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,216 +78,224 @@ 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(
-  useShortcuts();
+  ({ description, initialMessages, storeMessageHistory, importChat, exportChat }: ChatProps) => {
+    useShortcuts();
 
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
+    const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
-  const [model, setModel] = useState(() => {
+    const [model, setModel] = useState(() => {
-    const savedModel = Cookies.get('selectedModel');
+      const savedModel = Cookies.get('selectedModel');
-    return savedModel || DEFAULT_MODEL;
+      return savedModel || DEFAULT_MODEL;
-  });
+    });
-  const [provider, setProvider] = useState(() => {
+    const [provider, setProvider] = useState(() => {
-    const savedProvider = Cookies.get('selectedProvider');
+      const savedProvider = Cookies.get('selectedProvider');
-    return PROVIDER_LIST.find((p) => p.name === savedProvider) || DEFAULT_PROVIDER;
+      return PROVIDER_LIST.find((p) => p.name === savedProvider) || DEFAULT_PROVIDER;
-  });
+    });
 
-  const { showChat } = useStore(chatStore);
+    const { showChat } = useStore(chatStore);
 
-  const [animationScope, animate] = useAnimate();
+    const [animationScope, animate] = useAnimate();
 
-  const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+    const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
 
-  const { messages, isLoading, input, handleInputChange, setInput, stop, append } = useChat({
+    const { messages, isLoading, input, handleInputChange, setInput, stop, append } = useChat({
-    api: '/api/chat',
+      api: '/api/chat',
-    body: {
+      body: {
-      apiKeys,
+        apiKeys,
-    },
+      },
-    onError: (error) => {
+      onError: (error) => {
-      logger.error('Request failed\n\n', error);
+        logger.error('Request failed\n\n', error);
-      toast.error(
+        toast.error(
-        'There was an error processing your request: ' + (error.message ? error.message : 'No details were returned'),
+          'There was an error processing your request: ' + (error.message ? error.message : 'No details were returned'),
-      );
-    },
-    onFinish: () => {
-      logger.debug('Finished streaming');
-    },
-    initialMessages,
-  });
-
-  const { enhancingPrompt, promptEnhanced, enhancePrompt, resetEnhancer } = usePromptEnhancer();
-  const { parsedMessages, parseMessages } = useMessageParser();
-
-  const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
-
-  useEffect(() => {
-    chatStore.setKey('started', initialMessages.length > 0);
-  }, []);
-
-  useEffect(() => {
-    parseMessages(messages, isLoading);
-
-    if (messages.length > initialMessages.length) {
-      storeMessageHistory(messages).catch((error) => toast.error(error.message));
-    }
-  }, [messages, isLoading, parseMessages]);
-
-  const scrollTextArea = () => {
-    const textarea = textareaRef.current;
-
-    if (textarea) {
-      textarea.scrollTop = textarea.scrollHeight;
-    }
-  };
-
-  const abort = () => {
-    stop();
-    chatStore.setKey('aborted', true);
-    workbenchStore.abortAllActions();
-  };
-
-  useEffect(() => {
-    const textarea = textareaRef.current;
-
-    if (textarea) {
-      textarea.style.height = 'auto';
-
-      const scrollHeight = textarea.scrollHeight;
-
-      textarea.style.height = `${Math.min(scrollHeight, TEXTAREA_MAX_HEIGHT)}px`;
-      textarea.style.overflowY = scrollHeight > TEXTAREA_MAX_HEIGHT ? 'auto' : 'hidden';
-    }
-  }, [input, textareaRef]);
-
-  const runAnimation = async () => {
-    if (chatStarted) {
-      return;
-    }
-
-    await Promise.all([
-      animate('#examples', { opacity: 0, display: 'none' }, { duration: 0.1 }),
-      animate('#intro', { opacity: 0, flex: 1 }, { duration: 0.2, ease: cubicEasingFn }),
-    ]);
-
-    chatStore.setKey('started', true);
-
-    setChatStarted(true);
-  };
-
-  const sendMessage = async (_event: React.UIEvent, messageInput?: string) => {
-    const _input = messageInput || input;
-
-    if (_input.length === 0 || isLoading) {
-      return;
-    }
-
-    /**
-     * @note (delm) Usually saving files shouldn't take long but it may take longer if there
-     * many unsaved files. In that case we need to block user input and show an indicator
-     * of some kind so the user is aware that something is happening. But I consider the
-     * happy case to be no unsaved files and I would expect users to save their changes
-     * before they send another message.
-     */
-    await workbenchStore.saveAllFiles();
-
-    const fileModifications = workbenchStore.getFileModifcations();
-
-    chatStore.setKey('aborted', false);
-
-    runAnimation();
-
-    if (fileModifications !== undefined) {
-      const diff = fileModificationsToHTML(fileModifications);
-
-      /**
-       * If we have file modifications we append a new user message manually since we have to prefix
-       * the user input with the file modifications and we don't want the new user input to appear
-       * in the prompt. Using `append` is almost the same as `handleSubmit` except that we have to
-       * manually reset the input and we'd have to manually pass in file attachments. However, those
-       * aren't relevant here.
-       */
-      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${diff}\n\n${_input}` });
-
-      /**
-       * After sending a new message we reset all modifications since the model
-       * should now be aware of all the changes.
-       */
-      workbenchStore.resetAllFileModifications();
-    } else {
-      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}` });
-    }
-
-    setInput('');
-
-    resetEnhancer();
-
-    textareaRef.current?.blur();
-  };
-
-  const [messageRef, scrollRef] = useSnapScroll();
-
-  useEffect(() => {
-    const storedApiKeys = Cookies.get('apiKeys');
-
-    if (storedApiKeys) {
-      setApiKeys(JSON.parse(storedApiKeys));
-    }
-  }, []);
-
-  const handleModelChange = (newModel: string) => {
-    setModel(newModel);
-    Cookies.set('selectedModel', newModel, { expires: 30 });
-  };
-
-  const handleProviderChange = (newProvider: ProviderInfo) => {
-    setProvider(newProvider);
-    Cookies.set('selectedProvider', newProvider.name, { expires: 30 });
-  };
-
-  return (
-    <BaseChat
-      ref={animationScope}
-      textareaRef={textareaRef}
-      input={input}
-      showChat={showChat}
-      chatStarted={chatStarted}
-      isStreaming={isLoading}
-      enhancingPrompt={enhancingPrompt}
-      promptEnhanced={promptEnhanced}
-      sendMessage={sendMessage}
-      model={model}
-      setModel={handleModelChange}
-      provider={provider}
-      setProvider={handleProviderChange}
-      messageRef={messageRef}
-      scrollRef={scrollRef}
-      handleInputChange={handleInputChange}
-      handleStop={abort}
-      messages={messages.map((message, i) => {
-        if (message.role === 'user') {
-          return message;
-        }
-
-        return {
-          ...message,
-          content: parsedMessages[i] || '',
-        };
-      })}
-      enhancePrompt={() => {
-        enhancePrompt(
-          input,
-          (input) => {
-            setInput(input);
-            scrollTextArea();
-          },
-          model,
-          provider,
-          apiKeys,
         );
-      }}
+      },
-    />
+      onFinish: () => {
-  );
+        logger.debug('Finished streaming');
-});
+      },
+      initialMessages,
+    });
+
+    const { enhancingPrompt, promptEnhanced, enhancePrompt, resetEnhancer } = usePromptEnhancer();
+    const { parsedMessages, parseMessages } = useMessageParser();
+
+    const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
+
+    useEffect(() => {
+      chatStore.setKey('started', initialMessages.length > 0);
+    }, []);
+
+    useEffect(() => {
+      parseMessages(messages, isLoading);
+
+      if (messages.length > initialMessages.length) {
+        storeMessageHistory(messages).catch((error) => toast.error(error.message));
+      }
+    }, [messages, isLoading, parseMessages]);
+
+    const scrollTextArea = () => {
+      const textarea = textareaRef.current;
+
+      if (textarea) {
+        textarea.scrollTop = textarea.scrollHeight;
+      }
+    };
+
+    const abort = () => {
+      stop();
+      chatStore.setKey('aborted', true);
+      workbenchStore.abortAllActions();
+    };
+
+    useEffect(() => {
+      const textarea = textareaRef.current;
+
+      if (textarea) {
+        textarea.style.height = 'auto';
+
+        const scrollHeight = textarea.scrollHeight;
+
+        textarea.style.height = `${Math.min(scrollHeight, TEXTAREA_MAX_HEIGHT)}px`;
+        textarea.style.overflowY = scrollHeight > TEXTAREA_MAX_HEIGHT ? 'auto' : 'hidden';
+      }
+    }, [input, textareaRef]);
+
+    const runAnimation = async () => {
+      if (chatStarted) {
+        return;
+      }
+
+      await Promise.all([
+        animate('#examples', { opacity: 0, display: 'none' }, { duration: 0.1 }),
+        animate('#intro', { opacity: 0, flex: 1 }, { duration: 0.2, ease: cubicEasingFn }),
+      ]);
+
+      chatStore.setKey('started', true);
+
+      setChatStarted(true);
+    };
+
+    const sendMessage = async (_event: React.UIEvent, messageInput?: string) => {
+      const _input = messageInput || input;
+
+      if (_input.length === 0 || isLoading) {
+        return;
+      }
+
+      /**
+       * @note (delm) Usually saving files shouldn't take long but it may take longer if there
+       * many unsaved files. In that case we need to block user input and show an indicator
+       * of some kind so the user is aware that something is happening. But I consider the
+       * happy case to be no unsaved files and I would expect users to save their changes
+       * before they send another message.
+       */
+      await workbenchStore.saveAllFiles();
+
+      const fileModifications = workbenchStore.getFileModifcations();
+
+      chatStore.setKey('aborted', false);
+
+      runAnimation();
+
+      if (fileModifications !== undefined) {
+        const diff = fileModificationsToHTML(fileModifications);
+
+        /**
+         * If we have file modifications we append a new user message manually since we have to prefix
+         * the user input with the file modifications and we don't want the new user input to appear
+         * in the prompt. Using `append` is almost the same as `handleSubmit` except that we have to
+         * manually reset the input and we'd have to manually pass in file attachments. However, those
+         * aren't relevant here.
+         */
+        append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${diff}\n\n${_input}` });
+
+        /**
+         * After sending a new message we reset all modifications since the model
+         * should now be aware of all the changes.
+         */
+        workbenchStore.resetAllFileModifications();
+      } else {
+        append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}` });
+      }
+
+      setInput('');
+
+      resetEnhancer();
+
+      textareaRef.current?.blur();
+    };
+
+    const [messageRef, scrollRef] = useSnapScroll();
+
+    useEffect(() => {
+      const storedApiKeys = Cookies.get('apiKeys');
+
+      if (storedApiKeys) {
+        setApiKeys(JSON.parse(storedApiKeys));
+      }
+    }, []);
+
+    const handleModelChange = (newModel: string) => {
+      setModel(newModel);
+      Cookies.set('selectedModel', newModel, { expires: 30 });
+    };
+
+    const handleProviderChange = (newProvider: ProviderInfo) => {
+      setProvider(newProvider);
+      Cookies.set('selectedProvider', newProvider.name, { expires: 30 });
+    };
+
+    return (
+      <BaseChat
+        ref={animationScope}
+        textareaRef={textareaRef}
+        input={input}
+        showChat={showChat}
+        chatStarted={chatStarted}
+        isStreaming={isLoading}
+        enhancingPrompt={enhancingPrompt}
+        promptEnhanced={promptEnhanced}
+        sendMessage={sendMessage}
+        model={model}
+        setModel={handleModelChange}
+        provider={provider}
+        setProvider={handleProviderChange}
+        messageRef={messageRef}
+        scrollRef={scrollRef}
+        handleInputChange={handleInputChange}
+        handleStop={abort}
+        description={description}
+        importChat={importChat}
+        exportChat={exportChat}
+        messages={messages.map((message, i) => {
+          if (message.role === 'user') {
+            return message;
+          }
+
+          return {
+            ...message,
+            content: parsedMessages[i] || '',
+          };
+        })}
+        enhancePrompt={() => {
+          enhancePrompt(
+            input,
+            (input) => {
+              setInput(input);
+              scrollTextArea();
+            },
+            model,
+            provider,
+            apiKeys,
+          );
+        }}
+      />
+    );
+  },
+);

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,92 +41,66 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
   };
 
   return (
-    <Tooltip.Provider delayDuration={200}>
+    <div id={id} ref={ref} className={props.className}>
-      <div id={id} ref={ref} className={props.className}>
+      {messages.length > 0
-        {messages.length > 0
+        ? messages.map((message, index) => {
-          ? messages.map((message, index) => {
+            const { role, content, id: messageId } = message;
-              const { role, content, id: messageId } = message;
+            const isUserMessage = role === 'user';
-              const isUserMessage = role === 'user';
+            const isFirst = index === 0;
-              const isFirst = index === 0;
+            const isLast = index === messages.length - 1;
-              const isLast = index === messages.length - 1;
 
-              return (
+            return (
-                <div
+              <div
-                  key={index}
+                key={index}
-                  className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
+                className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
-                    'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
+                  'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
-                    'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
+                  'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
-                      isStreaming && isLast,
+                    isStreaming && isLast,
-                    'mt-4': !isFirst,
+                  'mt-4': !isFirst,
-                  })}
+                })}
-                >
+              >
-                  {isUserMessage && (
+                {isUserMessage && (
-                    <div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
+                  <div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
-                      <div className="i-ph:user-fill text-xl"></div>
+                    <div className="i-ph:user-fill text-xl"></div>
-                    </div>
-                  )}
-                  <div className="grid grid-col-1 w-full">
-                    {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
                   </div>
-                  {!isUserMessage && (
+                )}
-                    <div className="flex gap-2 flex-col lg:flex-row">
+                <div className="grid grid-col-1 w-full">
-                      <Tooltip.Root>
+                  {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
-                        <Tooltip.Trigger asChild>
-                          {messageId && (
-                            <button
-                              onClick={() => handleRewind(messageId)}
-                              key="i-ph:arrow-u-up-left"
-                              className={classNames(
-                                'i-ph:arrow-u-up-left',
-                                'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
-                              )}
-                            />
-                          )}
-                        </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"
-                            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>
-                        <Tooltip.Trigger asChild>
-                          <button
-                            onClick={() => handleFork(messageId)}
-                            key="i-ph:git-fork"
-                            className={classNames(
-                              'i-ph:git-fork',
-                              'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
-                            )}
-                          />
-                        </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"
-                            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>
-              );
+                {!isUserMessage && (
-            })
+                  <div className="flex gap-2 flex-col lg:flex-row">
-          : null}
+                    <WithTooltip tooltip="Revert to this message">
-        {isStreaming && (
+                      {messageId && (
-          <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
+                        <button
-        )}
+                          onClick={() => handleRewind(messageId)}
-      </div>
+                          key="i-ph:arrow-u-up-left"
-    </Tooltip.Provider>
+                          className={classNames(
+                            'i-ph:arrow-u-up-left',
+                            'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
+                          )}
+                        />
+                      )}
+                    </WithTooltip>
+
+                    <WithTooltip tooltip="Fork chat from this message">
+                      <button
+                        onClick={() => handleFork(messageId)}
+                        key="i-ph:git-fork"
+                        className={classNames(
+                          'i-ph:git-fork',
+                          'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
+                        )}
+                      />
+                    </WithTooltip>
+                  </div>
+                )}
+              </div>
+            );
+          })
+        : null}
+      {isStreaming && (
+        <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
+      )}
+    </div>
   );
 });

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,25 +45,41 @@ 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">
-              {onDuplicate && (
+              <WithTooltip tooltip="Export chat">
                 <button
-                  className="i-ph:copy scale-110 mr-2"
+                  className="i-ph:download-simple scale-110 mr-2"
-                  onClick={() => onDuplicate?.(item.id)}
+                  onClick={(event) => {
-                  title="Duplicate chat"
+                    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>
-                <button
+                <WithTooltip tooltip="Delete chat">
-                  className="i-ph:trash scale-110"
+                  <button
-                  onClick={(event) => {
+                    className="i-ph:trash scale-110"
-                    // we prevent the default so we don't trigger the anchor above
+                    onClick={(event) => {
-                    event.preventDefault();
+                      // we prevent the default so we don't trigger the anchor above
-                    onDelete?.(event);
+                      event.preventDefault();
-                  }}
+                      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;