Merge pull request #372 from wonderwhy-er/import-export-individual-chats

(Ready for review) Import and Export Individual Chats

app/components/chat/BaseChat.tsx

@@ -3,7 +3,7 @@
  * Preventing TS checks with files presented in the video for a better presentation.
  */
 import type { Message } from 'ai';
-import React, { type RefCallback, useEffect } from 'react';
+import React, { type RefCallback, useEffect, useState } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { Menu } from '~/components/sidebar/Menu.client';
 import { IconButton } from '~/components/ui/IconButton';
@@ -12,12 +12,14 @@ import { classNames } from '~/utils/classNames';
 import { MODEL_LIST, PROVIDER_LIST, initializeModelList } from '~/utils/constants';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
-import { useState } from 'react';
 import { APIKeyManager } from './APIKeyManager';
 import Cookies from 'js-cookie';
+import { toast } from 'react-toastify';
+import * as Tooltip from '@radix-ui/react-tooltip';
 
 import styles from './BaseChat.module.scss';
 import type { ProviderInfo } from '~/utils/types';
+import { ExportChatButton } from '~/components/chat/ExportChatButton';
 
 const EXAMPLE_PROMPTS = [
   { text: 'Build a todo app in React using Tailwind' },
@@ -79,6 +81,7 @@ interface BaseChatProps {
   chatStarted?: boolean;
   isStreaming?: boolean;
   messages?: Message[];
+  description?: string;
   enhancingPrompt?: boolean;
   promptEnhanced?: boolean;
   input?: string;
@@ -90,6 +93,8 @@ interface BaseChatProps {
   sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
   handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   enhancePrompt?: () => void;
+  importChat?: (description: string, messages: Message[]) => Promise<void>;
+  exportChat?: () => void;
 }
 
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
@@ -113,6 +118,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       handleInputChange,
       enhancePrompt,
       handleStop,
+      importChat,
+      exportChat,
     },
     ref,
   ) => {
@@ -161,7 +168,68 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
-    return (
+    const chatImportButton = !chatStarted && (
+      <div className="flex flex-col items-center justify-center flex-1 p-4">
+        <input
+          type="file"
+          id="chat-import"
+          className="hidden"
+          accept=".json"
+          onChange={async (e) => {
+            const file = e.target.files?.[0];
+
+            if (file && importChat) {
+              try {
+                const reader = new FileReader();
+
+                reader.onload = async (e) => {
+                  try {
+                    const content = e.target?.result as string;
+                    const data = JSON.parse(content);
+
+                    if (!Array.isArray(data.messages)) {
+                      toast.error('Invalid chat file format');
+                    }
+
+                    await importChat(data.description, data.messages);
+                    toast.success('Chat imported successfully');
+                  } catch (error: unknown) {
+                    if (error instanceof Error) {
+                      toast.error('Failed to parse chat file: ' + error.message);
+                    } else {
+                      toast.error('Failed to parse chat file');
+                    }
+                  }
+                };
+                reader.onerror = () => toast.error('Failed to read chat file');
+                reader.readAsText(file);
+              } catch (error) {
+                toast.error(error instanceof Error ? error.message : 'Failed to import chat');
+              }
+              e.target.value = ''; // Reset file input
+            } else {
+              toast.error('Something went wrong');
+            }
+          }}
+        />
+        <div className="flex flex-col items-center gap-4 max-w-2xl text-center">
+          <div className="flex gap-2">
+            <button
+              onClick={() => {
+                const input = document.getElementById('chat-import');
+                input?.click();
+              }}
+              className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
+            >
+              <div className="i-ph:upload-simple" />
+              Import Chat
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+
+    const baseChat = (
       <div
         ref={ref}
         className={classNames(
@@ -297,6 +365,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                           </>
                         )}
                       </IconButton>
+                      {chatStarted && <ClientOnly>{() => <ExportChatButton exportChat={exportChat} />}</ClientOnly>}
                     </div>
                     {input.length > 3 ? (
                       <div className="text-xs text-bolt-elements-textTertiary">
@@ -309,6 +378,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 </div>
               </div>
             </div>
+            {chatImportButton}
             {!chatStarted && (
               <div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex justify-center">
                 <div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
@@ -334,5 +404,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         </div>
       </div>
     );
+
+    return <Tooltip.Provider delayDuration={200}>{baseChat}</Tooltip.Provider>;
   },
 );

app/components/chat/Chat.client.tsx

@@ -9,7 +9,7 @@ import { useAnimate } from 'framer-motion';
 import { memo, useEffect, useRef, useState } from 'react';
 import { cssTransition, toast, ToastContainer } from 'react-toastify';
 import { useMessageParser, usePromptEnhancer, useShortcuts, useSnapScroll } from '~/lib/hooks';
-import { useChatHistory } from '~/lib/persistence';
+import { description, useChatHistory } from '~/lib/persistence';
 import { chatStore } from '~/lib/stores/chat';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { fileModificationsToHTML } from '~/utils/diff';
@@ -30,11 +30,20 @@ const logger = createScopedLogger('Chat');
 export function Chat() {
   renderLogger.trace('Chat');
 
-  const { ready, initialMessages, storeMessageHistory } = useChatHistory();
+  const { ready, initialMessages, storeMessageHistory, importChat, exportChat } = useChatHistory();
+  const title = useStore(description);
 
   return (
     <>
-      {ready && <ChatImpl initialMessages={initialMessages} storeMessageHistory={storeMessageHistory} />}
+      {ready && (
+        <ChatImpl
+          description={title}
+          initialMessages={initialMessages}
+          exportChat={exportChat}
+          storeMessageHistory={storeMessageHistory}
+          importChat={importChat}
+        />
+      )}
       <ToastContainer
         closeButton={({ closeToast }) => {
           return (
@@ -69,9 +78,13 @@ export function Chat() {
 interface ChatProps {
   initialMessages: Message[];
   storeMessageHistory: (messages: Message[]) => Promise<void>;
+  importChat: (description: string, messages: Message[]) => Promise<void>;
+  exportChat: () => void;
+  description?: string;
 }
 
-export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProps) => {
+export const ChatImpl = memo(
+  ({ description, initialMessages, storeMessageHistory, importChat, exportChat }: ChatProps) => {
     useShortcuts();
 
     const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -257,6 +270,9 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
         scrollRef={scrollRef}
         handleInputChange={handleInputChange}
         handleStop={abort}
+        description={description}
+        importChat={importChat}
+        exportChat={exportChat}
         messages={messages.map((message, i) => {
           if (message.role === 'user') {
             return message;
@@ -281,4 +297,5 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
         }}
       />
     );
-});
+  },
+);

app/components/chat/ExportChatButton.tsx

@@ -0,0 +1,13 @@
+import WithTooltip from '~/components/ui/Tooltip';
+import { IconButton } from '~/components/ui/IconButton';
+import React from 'react';
+
+export const ExportChatButton = ({ exportChat }: { exportChat?: () => void }) => {
+  return (
+    <WithTooltip tooltip="Export Chat">
+      <IconButton title="Export Chat" onClick={() => exportChat?.()}>
+        <div className="i-ph:download-simple text-xl"></div>
+      </IconButton>
+    </WithTooltip>
+  );
+};

app/components/chat/Messages.client.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import { classNames } from '~/utils/classNames';
 import { AssistantMessage } from './AssistantMessage';
 import { UserMessage } from './UserMessage';
-import * as Tooltip from '@radix-ui/react-tooltip';
 import { useLocation } from '@remix-run/react';
 import { db, chatId } from '~/lib/persistence/useChatHistory';
 import { forkChat } from '~/lib/persistence/db';
 import { toast } from 'react-toastify';
+import WithTooltip from '~/components/ui/Tooltip';
 
 interface MessagesProps {
   id?: string;
@@ -41,7 +41,6 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
   };
 
   return (
-    <Tooltip.Provider delayDuration={200}>
     <div id={id} ref={ref} className={props.className}>
       {messages.length > 0
         ? messages.map((message, index) => {
@@ -70,8 +69,7 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                 </div>
                 {!isUserMessage && (
                   <div className="flex gap-2 flex-col lg:flex-row">
-                      <Tooltip.Root>
+                    <WithTooltip tooltip="Revert to this message">
-                        <Tooltip.Trigger asChild>
                       {messageId && (
                         <button
                           onClick={() => handleRewind(messageId)}
@@ -82,21 +80,9 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                           )}
                         />
                       )}
-                        </Tooltip.Trigger>
+                    </WithTooltip>
-                        <Tooltip.Portal>
-                          <Tooltip.Content
-                            className="bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg"
-                            sideOffset={5}
-                            style={{ zIndex: 1000 }}
-                          >
-                            Revert to this message
-                            <Tooltip.Arrow className="fill-bolt-elements-tooltip-background" />
-                          </Tooltip.Content>
-                        </Tooltip.Portal>
-                      </Tooltip.Root>
 
-                      <Tooltip.Root>
+                    <WithTooltip tooltip="Fork chat from this message">
-                        <Tooltip.Trigger asChild>
                       <button
                         onClick={() => handleFork(messageId)}
                         key="i-ph:git-fork"
@@ -105,18 +91,7 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                           'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
                         )}
                       />
-                        </Tooltip.Trigger>
+                    </WithTooltip>
-                        <Tooltip.Portal>
-                          <Tooltip.Content
-                            className="bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg"
-                            sideOffset={5}
-                            style={{ zIndex: 1000 }}
-                          >
-                            Fork chat from this message
-                            <Tooltip.Arrow className="fill-bolt-elements-tooltip-background" />
-                          </Tooltip.Content>
-                        </Tooltip.Portal>
-                      </Tooltip.Root>
                   </div>
                 )}
               </div>
@@ -127,6 +102,5 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
         <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
       )}
     </div>
-    </Tooltip.Provider>
   );
 });

app/components/sidebar/HistoryItem.tsx

@@ -1,14 +1,16 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { useEffect, useRef, useState } from 'react';
 import { type ChatHistoryItem } from '~/lib/persistence';
+import WithTooltip from '~/components/ui/Tooltip';
 
 interface HistoryItemProps {
   item: ChatHistoryItem;
   onDelete?: (event: React.UIEvent) => void;
   onDuplicate?: (id: string) => void;
+  exportChat: (id?: string) => void;
 }
 
-export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
+export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: HistoryItemProps) {
   const [hovering, setHovering] = useState(false);
   const hoverRef = useRef<HTMLDivElement>(null);
 
@@ -43,17 +45,32 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
     >
       <a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
         {item.description}
-        <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-45%">
+        <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 box-content pl-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-99%">
           {hovering && (
             <div className="flex items-center p-1 text-bolt-elements-textSecondary">
+              <WithTooltip tooltip="Export chat">
+                <button
+                  className="i-ph:download-simple scale-110 mr-2"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    exportChat(item.id);
+
+                    //exportChat(item.messages, item.description);
+                  }}
+                  title="Export chat"
+                />
+              </WithTooltip>
               {onDuplicate && (
+                <WithTooltip tooltip="Duplicate chat">
                   <button
                     className="i-ph:copy scale-110 mr-2"
                     onClick={() => onDuplicate?.(item.id)}
                     title="Duplicate chat"
                   />
+                </WithTooltip>
               )}
               <Dialog.Trigger asChild>
+                <WithTooltip tooltip="Delete chat">
                   <button
                     className="i-ph:trash scale-110"
                     onClick={(event) => {
@@ -62,6 +79,7 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
                       onDelete?.(event);
                     }}
                   />
+                </WithTooltip>
               </Dialog.Trigger>
             </div>
           )}

app/components/sidebar/Menu.client.tsx

@@ -33,7 +33,7 @@ const menuVariants = {
 type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
 
 export function Menu() {
-  const { duplicateCurrentChat } = useChatHistory();
+  const { duplicateCurrentChat, exportChat } = useChatHistory();
   const menuRef = useRef<HTMLDivElement>(null);
   const [list, setList] = useState<ChatHistoryItem[]>([]);
   const [open, setOpen] = useState(false);
@@ -101,7 +101,6 @@ export function Menu() {
 
   const handleDeleteClick = (event: React.UIEvent, item: ChatHistoryItem) => {
     event.preventDefault();
-
     setDialogContent({ type: 'delete', item });
   };
 
@@ -142,6 +141,7 @@ export function Menu() {
                   <HistoryItem
                     key={item.id}
                     item={item}
+                    exportChat={exportChat}
                     onDelete={(event) => handleDeleteClick(event, item)}
                     onDuplicate={() => handleDuplicate(item.id)}
                   />

app/components/ui/Tooltip.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import type { ReactNode } from 'react';
+
+interface ToolTipProps {
+  tooltip: string;
+  children: ReactNode | ReactNode[];
+  sideOffset?: number;
+  className?: string;
+  arrowClassName?: string;
+  tooltipStyle?: any; //TODO better type
+}
+
+const WithTooltip = ({
+  tooltip,
+  children,
+  sideOffset = 5,
+  className = '',
+  arrowClassName = '',
+  tooltipStyle = {},
+}: ToolTipProps) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content
+          className={`bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg ${className}`}
+          sideOffset={sideOffset}
+          style={{ zIndex: 2000, backgroundColor: 'white', ...tooltipStyle }}
+        >
+          {tooltip}
+          <Tooltip.Arrow className={`fill-bolt-elements-tooltip-background ${arrowClassName}`} />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+export default WithTooltip;

app/lib/persistence/db.ts

@@ -176,14 +176,7 @@ export async function forkChat(db: IDBDatabase, chatId: string, messageId: strin
   // Get messages up to and including the selected message
   const messages = chat.messages.slice(0, messageIndex + 1);
 
-  // Generate new IDs
+  return createChatFromMessages(db, chat.description ? `${chat.description} (fork)` : 'Forked chat', messages);
-  const newId = await getNextId(db);
-  const urlId = await getUrlId(db, newId);
-
-  // Create the forked chat
-  await setMessages(db, newId, messages, urlId, chat.description ? `${chat.description} (fork)` : 'Forked chat');
-
-  return urlId;
 }
 
 export async function duplicateChat(db: IDBDatabase, id: string): Promise<string> {
@@ -193,15 +186,23 @@ export async function duplicateChat(db: IDBDatabase, id: string): Promise<string
     throw new Error('Chat not found');
   }
 
+  return createChatFromMessages(db, `${chat.description || 'Chat'} (copy)`, chat.messages);
+}
+
+export async function createChatFromMessages(
+  db: IDBDatabase,
+  description: string,
+  messages: Message[],
+): Promise<string> {
   const newId = await getNextId(db);
   const newUrlId = await getUrlId(db, newId); // Get a new urlId for the duplicated chat
 
   await setMessages(
     db,
     newId,
-    chat.messages,
+    messages,
     newUrlId, // Use the new urlId
-    `${chat.description || 'Chat'} (copy)`,
+    description,
   );
 
   return newUrlId; // Return the urlId instead of id for navigation

app/lib/persistence/useChatHistory.ts

@@ -4,7 +4,15 @@ import { atom } from 'nanostores';
 import type { Message } from 'ai';
 import { toast } from 'react-toastify';
 import { workbenchStore } from '~/lib/stores/workbench';
-import { getMessages, getNextId, getUrlId, openDatabase, setMessages, duplicateChat } from './db';
+import {
+  getMessages,
+  getNextId,
+  getUrlId,
+  openDatabase,
+  setMessages,
+  duplicateChat,
+  createChatFromMessages,
+} from './db';
 
 export interface ChatHistoryItem {
   id: string;
@@ -113,6 +121,45 @@ export function useChatHistory() {
         console.log(error);
       }
     },
+    importChat: async (description: string, messages: Message[]) => {
+      if (!db) {
+        return;
+      }
+
+      try {
+        const newId = await createChatFromMessages(db, description, messages);
+        window.location.href = `/chat/${newId}`;
+        toast.success('Chat imported successfully');
+      } catch (error) {
+        if (error instanceof Error) {
+          toast.error('Failed to import chat: ' + error.message);
+        } else {
+          toast.error('Failed to import chat');
+        }
+      }
+    },
+    exportChat: async (id = urlId) => {
+      if (!db || !id) {
+        return;
+      }
+
+      const chat = await getMessages(db, id);
+      const chatData = {
+        messages: chat.messages,
+        description: chat.description,
+        exportDate: new Date().toISOString(),
+      };
+
+      const blob = new Blob([JSON.stringify(chatData, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `chat-${new Date().toISOString()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    },
   };
 }
 

app/utils/logger.ts

@@ -11,7 +11,7 @@ interface Logger {
   setLevel: (level: DebugLevel) => void;
 }
 
-let currentLevel: DebugLevel = import.meta.env.VITE_LOG_LEVEL ?? import.meta.env.DEV ? 'debug' : 'info';
+let currentLevel: DebugLevel = (import.meta.env.VITE_LOG_LEVEL ?? import.meta.env.DEV) ? 'debug' : 'info';
 
 const isWorker = 'HTMLRewriter' in globalThis;
 const supportsColor = !isWorker;