share showing up

yieldprotocol · Jul 27, 2023 · 1c84179 · 1c84179
1 parent f01cf18
commit 1c84179
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 66 deletions.
diff --git a/src/components/experimental_/ChatBoxShare.tsx b/src/components/experimental_/ChatBoxShare.tsx
diff --git a/src/components/experimental_/ChatBox_.tsx b/src/components/experimental_/ChatBox_.tsx
@@ -25,6 +25,7 @@ const ChatBox = () => {
       <div className="flex h-full w-full items-center justify-center overflow-auto pt-5">
         {isLoading ? <Spinner /> : messageContentComponent}
       </div>
+
       {/* Chat input */}
       <div className="sticky top-[100vh] flex w-full items-center justify-center justify-items-center bg-gray-secondary px-2 py-4 lg:py-6">
         <MessageInput />

diff --git a/src/components/experimental_/MessageItem_.tsx b/src/components/experimental_/MessageItem_.tsx
@@ -5,7 +5,7 @@ import MessageTranslator from './MessageTranslator_';
 import { SystemMessage } from './SystemMessage_';
 import { UserMessage } from './UserMessage_';
 
-export const MessageItem = ({ message }: { message: Message }) => {
+export const MessageItem = ({ message, isShare = false }: { message: Message, isShare?: boolean }) => {
   const { actor, payload, messageId } = message;
   const { sendAction, truncateUntilNextHumanMessage, setInsertBeforeMessageId } = useChatContext();
 
@@ -45,6 +45,7 @@ export const MessageItem = ({ message }: { message: Message }) => {
             submitEdit,
             submitRegenerate,
             submitDelete,
+            isShare
           }}
         />
       )}

diff --git a/src/components/experimental_/ShareBox.tsx b/src/components/experimental_/ShareBox.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import { useQuerySharedSession, useQueryShares } from '@/api/shares/queries';
+import { Message, useChatContext } from '@/contexts/ChatContext';
+import { Spinner } from '@/utils';
+import { MessageItem } from './MessageItem_';
+
+const ShareBox = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const {showDebugMessages} = useChatContext();
+
+  const { isLoading, isSuccess, settings } = useQuerySharedSession(id as string);
+
+  console.log(settings?.messages);
+
+  const messageContentComponent = true ? (
+    <div className="h-full w-full pt-8">
+      {isSuccess &&
+        settings?.messages.map((message) => {
+          if (!showDebugMessages && (message.actor === 'system' || message.actor === 'function')) {
+            return <React.Fragment key={message.messageId} />;
+          }
+          return (
+            <React.Fragment key={message.messageId}>
+              <MessageItem message={message} isShare={true} />
+            </React.Fragment>
+          );
+        })}
+    </div>
+  ) : (
+    <div> Empty chat session </div>
+  );
+
+  return (
+    <div className="relative flex h-full w-full flex-col overflow-auto">
+      <div className="flex h-full w-full items-center justify-center overflow-auto pt-5">
+        {isLoading || !isSuccess ? <Spinner  /> : messageContentComponent}
+      </div>
+      {/* convert to chat button */}
+      <div className="sticky top-[100vh] flex w-full items-center justify-center justify-items-center bg-gray-secondary px-2 py-4 lg:py-6">
+        Convert to chat
+      </div>
+    </div>
+  );
+};
+
+export default ShareBox;
diff --git a/src/components/experimental_/UserMessage_.tsx b/src/components/experimental_/UserMessage_.tsx
@@ -6,6 +6,7 @@ import {
   PencilIcon,
   TrashIcon,
 } from '@heroicons/react/24/outline';
+import { VoidExpression } from 'typescript';
 import Avatar from '../Avatar';
 
 interface IconBtnProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -25,23 +26,29 @@ export const UserMessage = ({
   submitEdit,
   submitRegenerate,
   submitDelete,
+  isShare = false,
 }: {
   actor: string;
   initialText: string;
   submitEdit: (text: string) => void;
   submitRegenerate: () => void;
   submitDelete: () => void;
+  isShare?: boolean;
 }) => {
   const [input, setInput] = useState(initialText);
   const [isEditing, setIsEditing] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const isCommenter = actor === 'commenter';
 
+  const setEditing = (val:boolean) => {
+    !isShare && setIsEditing(val)
+  };
+
   useEffect(() => {
     const handleKeys = (e: globalThis.KeyboardEvent) => {
       // cancel edit
       if (e.key === 'Escape') {
-        setIsEditing(false);
+        setEditing(false);
         setInput(initialText);
       }
 
@@ -52,7 +59,7 @@ export const UserMessage = ({
         }
         inputRef.current?.blur();
         setInput(input);
-        setIsEditing(false);
+        setEditing(false);
       }
     };
 
@@ -103,16 +110,16 @@ export const UserMessage = ({
         focus:outline-none
       `}
         value={input}
-        onClick={() => setIsEditing(true)}
+        onClick={() => setEditing(true)}
         onChange={(e) => {
-          setIsEditing(true);
-          setInput(e.target.value);
+          setEditing(true);
+          !isShare && setInput(e.target.value);
         }}
         onBlur={() => {
           setInput(initialText);
-          setIsEditing(false);
+          setEditing(false);
         }}
-        onFocus={() => setIsEditing(true)}
+        onFocus={() => setEditing(true)}
       />
 
       {isEditing ? (
@@ -128,27 +135,29 @@ export const UserMessage = ({
           </span>
         </div>
       ) : (
-        <>
-          <div className="durtaion-200 flex items-center gap-2 opacity-0 group-hover:opacity-100">
+        <div
+          className={`durtaion-200 flex items-center gap-2 opacity-0 group-hover:opacity-100 ${
+            isShare && 'hidden'
+          }`}
+        >
+          <IconBtn
+            onClick={() => setEditing(true)}
+            className={`${iconBtnBaseStyle} hover:bg-teal-100/10`}
+          >
+            <PencilIcon className="h-4 w-4" />
+          </IconBtn>
+          <IconBtn className={`${iconBtnBaseStyle} hover:bg-red-800/60`} onClick={submitDelete}>
+            <TrashIcon className="h-4 w-4" />
+          </IconBtn>
+          {!isCommenter && (
             <IconBtn
-              onClick={() => setIsEditing(true)}
-              className={`${iconBtnBaseStyle} hover:bg-teal-100/10`}
+              onClick={submitRegenerate}
+              className={`${iconBtnBaseStyle} hover:bg-teal-800/60`}
             >
-              <PencilIcon className="h-4 w-4" />
-            </IconBtn>
-            <IconBtn className={`${iconBtnBaseStyle} hover:bg-red-800/60`} onClick={submitDelete}>
-              <TrashIcon className="h-4 w-4" />
+              <PaperAirplaneIcon className="h-4 w-4" />
             </IconBtn>
-            {!isCommenter && (
-              <IconBtn
-                onClick={submitRegenerate}
-                className={`${iconBtnBaseStyle} hover:bg-teal-800/60`}
-              >
-                <PaperAirplaneIcon className="h-4 w-4" />
-              </IconBtn>
-            )}
-          </div>
-        </>
+          )}
+        </div>
       )}
     </div>
   );

diff --git a/src/contexts/ChatContext.tsx b/src/contexts/ChatContext.tsx
@@ -32,12 +32,14 @@ export type ChatContextType = {
   insertBeforeMessageId: string | null;
   setInsertBeforeMessageId: (arg0: string | null) => void;
   isMultiStepInProgress: boolean;
-  showDebugMessages: boolean;
-  setShowDebugMessages: (arg0: boolean) => void;
+
   interactor: string;
   setInteractor: (arg0: string) => void;
   connectionStatus: ReadyState;
 
+  showDebugMessages: boolean;
+  setShowDebugMessages: (arg0: boolean) => void;
+
   showShareModal: boolean;
   setShowShareModal: (value: boolean) => void;
 };

diff --git a/src/hooks/useThread.tsx b/src/hooks/useThread.tsx
@@ -16,9 +16,10 @@ const useThread = (threadId?: string) => {
   const setThreadName = (newName: string) => {
     settingsMutation.mutate({ metadata: { name: newName } });
   };
-  //const threadName = window.localStorage.getItem(`thread-${threadId_}`);
-  //const setThreadName = (newName: string) =>
-  //  newName && window.localStorage.setItem(`thread-${threadId_}`, newName);
+
+  // const threadName = window.localStorage.getItem(`thread-${threadId_}`);
+  // const setThreadName = (newName: string) =>
+  // newName && window.localStorage.setItem(`thread-${threadId_}`, newName);
 
   return {
     threadId: threadId_,

diff --git a/src/pages/share/[id].tsx b/src/pages/share/[id].tsx
@@ -1,9 +1,9 @@
 import dynamic from 'next/dynamic';
 
-const ChatBoxDynamic = dynamic(() => import('@/components/experimental_/ChatBoxShare'), {
+const ShareBoxDynamic = dynamic(() => import('@/components/experimental_/ShareBox'), {
   ssr: false,
 });
 
-export const Chat = () => <ChatBoxDynamic />;
+export const Chat = () => <ShareBoxDynamic />;
 
 export default Chat;