Feat/show shares

src/api/shares/mutations.ts

@@ -22,9 +22,11 @@ export const useMutationDeleteSharedSession = (sharedSessionId: string) => {
   };
 
   const queryClient = useQueryClient();
+  const router = useRouter();
 
   return useMutation(mutationFn, {
     onSuccess: (data, variables, context): void => {
+      router.push(`/`);
       queryClient.invalidateQueries({ queryKey: ['shares'] });
       queryClient.invalidateQueries({ queryKey: ['sharedSession', sharedSessionId] });
     },

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 />

src/components/experimental_/ChatHeader.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { EyeIcon, EyeSlashIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { useSession } from 'next-auth/react';
-import { useMutationDeleteChat, useMutationUpdateChatSettings } from '@/api/chats/mutations';
+import { useMutationDeleteChat } from '@/api/chats/mutations';
 import { useQueryChatSettings } from '@/api/chats/queries';
 import { useMutationCreateSharedSession } from '@/api/shares/mutations';
 import { useChatContext } from '@/contexts/ChatContext';

src/components/experimental_/ChatList.tsx

@@ -4,6 +4,8 @@ import { CheckIcon } from '@heroicons/react/24/outline';
 import { ShareIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { useMutationDeleteChat } from '@/api/chats/mutations';
 import { useQueryChats } from '@/api/chats/queries';
+import { useMutationDeleteSharedSession } from '@/api/shares/mutations';
+import { useQueryShares } from '@/api/shares/queries';
 import { useChatContext } from '@/contexts/ChatContext';
 import useThread from '@/hooks/useThread';
 import { abbreviateHash } from '@/utils';
@@ -18,9 +20,8 @@ const ChatItem = ({ id }: ChatItem) => {
   const { query } = useRouter();
   const selected = query.id === id;
 
-  const { mutate } = useMutationDeleteChat(id);
-
-  const handleDelete = () => mutate();
+  const { mutate: deleteChat } = useMutationDeleteChat(id);
+  const handleDelete = () => deleteChat();
   const handleShare = () => setShowShareModal(true);
 
   return (
@@ -29,20 +30,17 @@ const ChatItem = ({ id }: ChatItem) => {
         className={`
         group
         relative
-        flex w-full cursor-pointer items-center gap-2 break-all rounded-md p-2.5
+        flex w-full cursor-pointer items-center gap-1 break-all rounded-md p-2.5
         text-gray-300 hover:bg-gray-800/50 ${
           selected ? 'bg-gray-800/50 pr-12' : 'hover:bg-white/10 hover:text-white'
         }`}
       >
-        {selected ? <CheckIcon className="h-4 w-4 text-green-500" /> : <div />}
+        {selected ? <CheckIcon className="h-4 w-4 text-green-primary" /> : <div className="px-2" />}
+
         <div className={`relative max-h-4 flex-1 overflow-hidden text-ellipsis break-all text-xs`}>
           {threadName !== id ? threadName : abbreviateHash(id, 8)}
-          <div
-            className={`absolute inset-y-0 right-0 z-10 w-8 bg-gradient-to-l ${
-              selected ? 'from-gray-800/50' : 'from-[#031016] group-hover:from-gray-800/50'
-            } `}
-          ></div>
         </div>
+
         {selected && (
           <div className={`visible absolute right-1 z-10 flex text-gray-300`}>
             <button className="p-1" onClick={handleShare}>
@@ -58,8 +56,49 @@ const ChatItem = ({ id }: ChatItem) => {
   );
 };
 
+const ShareItem = ({ id }: ChatItem) => {
+  const { query } = useRouter();
+  const selected = query.id === id;
+
+  const { mutate: deleteShare } = useMutationDeleteSharedSession(id);
+  const handleDelete = () => deleteShare();
+
+  return (
+    <Link href={`/share/${id}`}>
+      <div
+        className={`
+        group
+        relative
+        flex w-full cursor-pointer items-center gap-2 break-all rounded-md p-2.5
+        text-gray-300 hover:bg-gray-800/50 ${
+          selected ? 'bg-gray-800/50 pr-12' : 'hover:bg-white/10 hover:text-white'
+        }`}
+      >
+        {selected ? (
+          <CheckIcon className="h-4 w-4 text-green-primary" />
+        ) : (
+          <ShareIcon className="h-3 w-3" />
+        )}
+        <div className={`relative max-h-4 flex-1 overflow-hidden text-ellipsis break-all text-xs`}>
+          {abbreviateHash(id, 6)}
+        </div>
+
+        {selected && (
+          <div className={`visible absolute right-1 z-10 flex text-gray-300`}>
+            <button className="p-1" onClick={handleDelete}>
+              <TrashIcon className="h-4 w-4 hover:text-white" />
+            </button>
+          </div>
+        )}
+      </div>
+    </Link>
+  );
+};
+
 const ChatList = () => {
   const { chats } = useQueryChats();
+  const { shares } = useQueryShares();
+
   return (
     <div>
       <div className="text-ellipsis break-all px-3 pb-2 pt-5 text-xs font-medium text-gray-400">
@@ -70,6 +109,17 @@ const ChatList = () => {
           <ChatItem key={chat.id} id={chat.id} />
         ))}
       </div>
+
+      {shares?.shares?.length ? (
+        <>
+          <div className="text-ellipsis break-all px-3 pb-2 pt-5 text-xs font-medium text-gray-400">
+            My Shared Chats
+          </div>
+          {shares?.shares?.map((chat) => (
+            <ShareItem key={chat.id} id={chat.id} />
+          ))}
+        </>
+      ) : null}
     </div>
   );
 };

src/components/experimental_/MessageItem_.tsx

@@ -5,7 +5,13 @@ 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 +51,7 @@ export const MessageItem = ({ message }: { message: Message }) => {
             submitEdit,
             submitRegenerate,
             submitDelete,
+            isShare,
           }}
         />
       )}

src/components/experimental_/MessageList_.tsx

@@ -19,12 +19,6 @@ const MessageList = () => {
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [messages]);
 
-  const multiStepInProgress = isMultiStepInProgress ? (
-    <div className={`relative flex w-[100%] flex-col gap-1 md:gap-3 lg:w-[100%]`}>
-      <span className="after:animate-ellipse">Multi-step workflow in progress</span>
-    </div>
-  ) : null;
-
   const bottomRefDiv = <div ref={bottomRef}></div>;
 
   return (

src/components/experimental_/ShareBox.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { ReadyState } from 'react-use-websocket';
+import { useRouter } from 'next/router';
+import { useMutationChatImportSession } from '@/api/chats/mutations';
+import { useQuerySharedSession, useQueryShares } from '@/api/shares/queries';
+import { useChatContext } from '@/contexts/ChatContext';
+import { Spinner } from '@/utils';
+import CustomConnectButton from './CustomConnectButton';
+import { MessageItem } from './MessageItem_';
+import { buttonStyle } from './layout/sidebar/NewChatButton';
+
+const ShareBox = () => {
+  const isWalletConnected = true;
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  const { showDebugMessages } = useChatContext();
+
+  const { isLoading, isSuccess, settings } = useQuerySharedSession(id as string);
+  const { mutate: continueChat, isLoading: isCreatingChat } = useMutationChatImportSession(
+    id as string
+  );
+
+  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={`${
+          isCreatingChat && 'blur'
+        }  flex h-full w-full items-center justify-center overflow-auto pt-5`}
+      >
+        {isLoading || !isSuccess ? <Spinner /> : messageContentComponent}
+      </div>
+      <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`}
+      >
+        {isWalletConnected ? (
+          <button onClick={() => continueChat({ metadata: {} })} className={buttonStyle}>
+            <Spinner className={`text-gray-300 ${!isCreatingChat && 'hidden'}`} />
+            <div> {isCreatingChat ? 'Converting to a new chat' : 'Continue Chatting'} </div>
+          </button>
+        ) : (
+          <div>
+            {' '}
+            <CustomConnectButton />{' '}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ShareBox;

src/components/experimental_/ShareChatModal.tsx

@@ -3,39 +3,33 @@ import { Dialog, Transition } from '@headlessui/react';
 import { CheckCircleIcon, DocumentDuplicateIcon, PencilIcon } from '@heroicons/react/24/outline';
 import { useMutationCreateSharedSession } from '@/api/shares/mutations';
 import { useChatContext } from '@/contexts/ChatContext';
-import useThread from '@/hooks/useThread';
 import { Spinner } from '@/utils';
 import CopyWrap from '../CopyWrap';
 
 const ShareChatModal = ({ id }: { id: string | undefined }) => {
-  const { threadName } = useThread(id);
   const { showShareModal: isOpen, setShowShareModal } = useChatContext();
-
   const { mutateAsync } = useMutationCreateSharedSession(id!);
-
   const [newThreadId, setNewThreadId] = useState<string>();
   const [newThreadUrl, setNewThreadUrl] = useState<string>();
 
   const [isSharing, setIsSharing] = useState<boolean>(false);
 
   const buttonStyle =
-    'w-full cursor-pointer select-none rounded-[8px] bg-green-primary p-[8px] text-center text-white transition ease-in-out active:bg-transparent';
+    'w-full cursor-pointer select-none rounded-lg bg-green-primary hover:bg-green-primary/80 p-[8px] text-center text-white transition ease-in-out ';
 
   /* Reset newThreadID whenever the id changes */
   useEffect(() => {
     setNewThreadId(undefined);
   }, [id]);
 
-  const handleEditName = (newName: string) => {};
+  // TODO: const handleEditName = (newName: string) => {};
   const handleShareChat = async () => {
     setIsSharing(true);
     try {
       /* Share the chat and get the new thread id */
       const newId = await mutateAsync();
       setNewThreadId(newId!);
       setNewThreadUrl(`${window.location.origin}/share/${newId}`);
-      /* TODO: If the thread has a name - rename the share to the same name */
-      // threadName !== id && handleEditName(threadName!);
     } catch (error) {
       console.log('Sharing Error: ', error);
     }