From a6060b81a53780772c7d36e069b3f957d718b282 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Fri, 22 Nov 2024 10:17:28 +0200
Subject: [PATCH 01/23] Export chat from sidebar

---
 app/components/sidebar/HistoryItem.tsx | 11 +++++-
 app/utils/chatExport.ts                | 46 ++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 app/utils/chatExport.ts

diff --git a/app/components/sidebar/HistoryItem.tsx b/app/components/sidebar/HistoryItem.tsx
index df270c8..6a6f61b 100644
--- a/app/components/sidebar/HistoryItem.tsx
+++ b/app/components/sidebar/HistoryItem.tsx
@@ -1,6 +1,7 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { useEffect, useRef, useState } from 'react';
 import { type ChatHistoryItem } from '~/lib/persistence';
+import { exportChat } from '~/utils/chatExport';
 
 interface HistoryItemProps {
   item: ChatHistoryItem;
@@ -43,9 +44,17 @@ 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">
+              <button
+                className="i-ph:download-simple scale-110 mr-2"
+                onClick={(event) => {
+                  event.preventDefault();
+                  exportChat(item.messages, item.description);
+                }}
+                title="Export chat"
+              />
               {onDuplicate && (
                 <button
                   className="i-ph:copy scale-110 mr-2"
diff --git a/app/utils/chatExport.ts b/app/utils/chatExport.ts
new file mode 100644
index 0000000..1750ddd
--- /dev/null
+++ b/app/utils/chatExport.ts
@@ -0,0 +1,46 @@
+import type { Message } from 'ai';
+import { toast } from 'react-toastify';
+
+export interface ChatExportData {
+  messages: Message[];
+  description?: string;
+  exportDate: string;
+}
+
+export const exportChat = (messages: Message[], description?: string) => {
+  const chatData: ChatExportData = {
+    messages,
+    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);
+};
+
+export const importChat = async (file: File): Promise<ChatExportData> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const content = e.target?.result as string;
+        const data = JSON.parse(content);
+        if (!Array.isArray(data.messages)) {
+          throw new Error('Invalid chat file format');
+        }
+        resolve(data);
+      } catch (error) {
+        reject(new Error('Failed to parse chat file'));
+      }
+    };
+    reader.onerror = () => reject(new Error('Failed to read chat file'));
+    reader.readAsText(file);
+  });
+};

From 60411550a5e1da0b231d8446a8af065bb09419f3 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Fri, 22 Nov 2024 11:05:18 +0200
Subject: [PATCH 02/23] Make tooltip easier to reuse across the app

---
 app/components/chat/BaseChat.tsx        | 326 ++++++++++++++----------
 app/components/chat/Messages.client.tsx |  68 ++---
 app/components/sidebar/HistoryItem.tsx  |  31 ++-
 app/components/sidebar/Menu.client.tsx  |  13 +-
 app/components/ui/Tooltip.tsx           |  24 ++
 5 files changed, 258 insertions(+), 204 deletions(-)
 create mode 100644 app/components/ui/Tooltip.tsx

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 902cb23..627d959 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 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';
@@ -10,9 +10,11 @@ import { classNames } from '~/utils/classNames';
 import { MODEL_LIST, DEFAULT_PROVIDER, 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 { importChat } from '~/utils/chatExport';
+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';
@@ -22,7 +24,7 @@ const EXAMPLE_PROMPTS = [
   { text: 'Build a simple blog using Astro' },
   { text: 'Create a cookie consent form using Material UI' },
   { text: 'Make a space invaders game' },
-  { text: 'How do I center a div?' },
+  { text: 'How do I center a div?' }
 ];
 
 const providerList = PROVIDER_LIST;
@@ -107,9 +109,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       sendMessage,
       handleInputChange,
       enhancePrompt,
-      handleStop,
+      handleStop
     },
-    ref,
+    ref
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
@@ -145,7 +147,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
           expires: 30, // 30 days
           secure: true, // Only send over HTTPS
           sameSite: 'strict', // Protect against CSRF
-          path: '/', // Accessible across the site
+          path: '/' // Accessible across the site
         });
       } catch (error) {
         console.error('Error saving API keys to cookies:', error);
@@ -153,72 +155,73 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     };
 
     return (
-      <div
-        ref={ref}
-        className={classNames(
-          styles.BaseChat,
-          'relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1',
-        )}
-        data-chat-visible={showChat}
-      >
-        <ClientOnly>{() => <Menu />}</ClientOnly>
-        <div ref={scrollRef} className="flex overflow-y-auto w-full h-full">
-          <div className={classNames(styles.Chat, 'flex flex-col flex-grow min-w-[var(--chat-min-width)] h-full')}>
-            {!chatStarted && (
-              <div id="intro" className="mt-[26vh] max-w-chat mx-auto text-center">
-                <h1 className="text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
-                  Where ideas begin
-                </h1>
-                <p className="text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
-                  Bring ideas to life in seconds or get help on existing projects.
-                </p>
-              </div>
-            )}
-            <div
-              className={classNames('pt-6 px-6', {
-                'h-full flex flex-col': chatStarted,
-              })}
-            >
-              <ClientOnly>
-                {() => {
-                  return chatStarted ? (
-                    <Messages
-                      ref={messageRef}
-                      className="flex flex-col w-full flex-1 max-w-chat px-4 pb-6 mx-auto z-1"
-                      messages={messages}
-                      isStreaming={isStreaming}
-                    />
-                  ) : null;
-                }}
-              </ClientOnly>
+      <Tooltip.Provider delayDuration={200}>
+        <div
+          ref={ref}
+          className={classNames(
+            styles.BaseChat,
+            'relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1'
+          )}
+          data-chat-visible={showChat}
+        >
+          <ClientOnly>{() => <Menu />}</ClientOnly>
+          <div ref={scrollRef} className="flex overflow-y-auto w-full h-full">
+            <div className={classNames(styles.Chat, 'flex flex-col flex-grow min-w-[var(--chat-min-width)] h-full')}>
+              {!chatStarted && (
+                <div id="intro" className="mt-[26vh] max-w-chat mx-auto text-center">
+                  <h1 className="text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
+                    Where ideas begin
+                  </h1>
+                  <p className="text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
+                    Bring ideas to life in seconds or get help on existing projects.
+                  </p>
+                </div>
+              )}
               <div
-                className={classNames(
-                  'bg-bolt-elements-background-depth-2 border-y border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
-                  {
-                    'sticky bottom-0': chatStarted
-                  })}
+                className={classNames('pt-6 px-6', {
+                  'h-full flex flex-col': chatStarted
+                })}
               >
-                <ModelSelector
-                  key={provider?.name + ':' + modelList.length}
-                  model={model}
-                  setModel={setModel}
-                  modelList={modelList}
-                  provider={provider}
-                  setProvider={setProvider}
-                  providerList={PROVIDER_LIST}
-                />
-                {provider && (
-                  <APIKeyManager
-                    provider={provider}
-                    apiKey={apiKeys[provider.name] || ''}
-                    setApiKey={(key) => updateApiKey(provider.name, key)}
-                  />
-                )}
+                <ClientOnly>
+                  {() => {
+                    return chatStarted ? (
+                      <Messages
+                        ref={messageRef}
+                        className="flex flex-col w-full flex-1 max-w-chat px-4 pb-6 mx-auto z-1"
+                        messages={messages}
+                        isStreaming={isStreaming}
+                      />
+                    ) : null;
+                  }}
+                </ClientOnly>
                 <div
                   className={classNames(
-                    'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
-                  )}
+                    'bg-bolt-elements-background-depth-2 border-y border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
+                    {
+                      'sticky bottom-0': chatStarted
+                    })}
                 >
+                  <ModelSelector
+                    key={provider?.name + ':' + modelList.length}
+                    model={model}
+                    setModel={setModel}
+                    modelList={modelList}
+                    provider={provider}
+                    setProvider={setProvider}
+                    providerList={PROVIDER_LIST}
+                  />
+                  {provider && (
+                    <APIKeyManager
+                      provider={provider}
+                      apiKey={apiKeys[provider.name] || ''}
+                      setApiKey={(key) => updateApiKey(provider.name, key)}
+                    />
+                  )}
+                  <div
+                    className={classNames(
+                      'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all'
+                    )}
+                  >
                   <textarea
                     ref={textareaRef}
                     className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
@@ -239,88 +242,133 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     }}
                     style={{
                       minHeight: TEXTAREA_MIN_HEIGHT,
-                      maxHeight: TEXTAREA_MAX_HEIGHT,
+                      maxHeight: TEXTAREA_MAX_HEIGHT
                     }}
                     placeholder="How can Bolt help you today?"
                     translate="no"
                   />
-                  <ClientOnly>
-                    {() => (
-                      <SendButton
-                        show={input.length > 0 || isStreaming}
-                        isStreaming={isStreaming}
-                        onClick={(event) => {
-                          if (isStreaming) {
-                            handleStop?.();
-                            return;
-                          }
+                    <ClientOnly>
+                      {() => (
+                        <SendButton
+                          show={input.length > 0 || isStreaming}
+                          isStreaming={isStreaming}
+                          onClick={(event) => {
+                            if (isStreaming) {
+                              handleStop?.();
+                              return;
+                            }
 
-                          sendMessage?.(event);
-                        }}
-                      />
-                    )}
-                  </ClientOnly>
-                  <div className="flex justify-between items-center text-sm p-4 pt-2">
-                    <div className="flex gap-1 items-center">
-                      <IconButton
-                        title="Enhance prompt"
-                        disabled={input.length === 0 || enhancingPrompt}
-                        className={classNames('transition-all', {
-                          'opacity-100!': enhancingPrompt,
-                          'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
-                            promptEnhanced,
-                        })}
-                        onClick={() => enhancePrompt?.()}
-                      >
-                        {enhancingPrompt ? (
-                          <>
-                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
-                            <div className="ml-1.5">Enhancing prompt...</div>
-                          </>
-                        ) : (
-                          <>
-                            <div className="i-bolt:stars text-xl"></div>
-                            {promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
-                          </>
-                        )}
-                      </IconButton>
-                    </div>
-                    {input.length > 3 ? (
-                      <div className="text-xs text-bolt-elements-textTertiary">
-                        Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> +{' '}
-                        <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> for
-                        a new line
+                            sendMessage?.(event);
+                          }}
+                        />
+                      )}
+                    </ClientOnly>
+                    <div className="flex justify-between items-center text-sm p-4 pt-2">
+                      <div className="flex gap-1 items-center">
+                        <IconButton
+                          title="Enhance prompt"
+                          disabled={input.length === 0 || enhancingPrompt}
+                          className={classNames('transition-all', {
+                            'opacity-100!': enhancingPrompt,
+                            'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
+                            promptEnhanced
+                          })}
+                          onClick={() => enhancePrompt?.()}
+                        >
+                          {enhancingPrompt ? (
+                            <>
+                              <div
+                                className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
+                              <div className="ml-1.5">Enhancing prompt...</div>
+                            </>
+                          ) : (
+                            <>
+                              <div className="i-bolt:stars text-xl"></div>
+                              {promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
+                            </>
+                          )}
+                        </IconButton>
                       </div>
-                    ) : null}
+                      {input.length > 3 ? (
+                        <div className="text-xs text-bolt-elements-textTertiary">
+                          Use <kbd
+                          className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> +{' '}
+                          <kbd
+                            className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> for
+                          a new line
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                  <div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
+                </div>
+              </div>
+              {!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) {
+                        try {
+                          const { messages: importedMessages } = await importChat(file);
+                          // Import each message
+                          for (const msg of importedMessages) {
+                            await sendMessage(new Event('import') as unknown as React.UIEvent, msg.content);
+                          }
+                          toast.success('Chat imported successfully');
+                        } catch (error) {
+                          toast.error(error instanceof Error ? error.message : 'Failed to import chat');
+                        }
+                        e.target.value = ''; // Reset file input
+                      }
+                    }}
+                  />
+                  <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>
-                <div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
-              </div>
-            </div>
-            {!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]">
-                  {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
-                    return (
-                      <button
-                        key={index}
-                        onClick={(event) => {
-                          sendMessage?.(event, examplePrompt.text);
-                        }}
-                        className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
-                      >
-                        {examplePrompt.text}
-                        <div className="i-ph:arrow-bend-down-left" />
-                      </button>
-                    );
-                  })}
+              )}
+              {!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]">
+                    {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
+                      return (
+                        <button
+                          key={index}
+                          onClick={(event) => {
+                            sendMessage?.(event, examplePrompt.text);
+                          }}
+                          className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
+                        >
+                          {examplePrompt.text}
+                          <div className="i-ph:arrow-bend-down-left" />
+                        </button>
+                      );
+                    })}
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
+            <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
           </div>
-          <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
         </div>
-      </div>
+      </Tooltip.Provider>
     );
-  },
+  }
 );
diff --git a/app/components/chat/Messages.client.tsx b/app/components/chat/Messages.client.tsx
index fca6fbd..713dd02 100644
--- a/app/components/chat/Messages.client.tsx
+++ b/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, useNavigate } 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;
@@ -42,7 +42,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,51 +69,27 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                     {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
                   </div>
                   {!isUserMessage && (<div className="flex gap-2">
-                    <Tooltip.Root>
-                      <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>
+                    <WithTooltip tooltip="Revert to this message">
+                      {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'
+                        )}
+                      />)}
+                    </WithTooltip>
 
-                    <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>
+                    <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>
               );
@@ -124,6 +99,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>
   );
 });
diff --git a/app/components/sidebar/HistoryItem.tsx b/app/components/sidebar/HistoryItem.tsx
index 6a6f61b..44abeed 100644
--- a/app/components/sidebar/HistoryItem.tsx
+++ b/app/components/sidebar/HistoryItem.tsx
@@ -2,6 +2,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { useEffect, useRef, useState } from 'react';
 import { type ChatHistoryItem } from '~/lib/persistence';
 import { exportChat } from '~/utils/chatExport';
+import WithTooltip from '~/components/ui/Tooltip';
 
 interface HistoryItemProps {
   item: ChatHistoryItem;
@@ -47,22 +48,27 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
         <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">
-              <button
-                className="i-ph:download-simple scale-110 mr-2"
-                onClick={(event) => {
-                  event.preventDefault();
-                  exportChat(item.messages, item.description);
-                }}
-                title="Export chat"
-              />
-              {onDuplicate && (
+              <WithTooltip tooltip="Export chat">
                 <button
-                  className="i-ph:copy scale-110 mr-2"
-                  onClick={() => onDuplicate?.(item.id)}
-                  title="Duplicate chat"
+                  className="i-ph:download-simple scale-110 mr-2"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    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) => {
@@ -71,6 +77,7 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
                     onDelete?.(event);
                   }}
                 />
+                </WithTooltip>
               </Dialog.Trigger>
             </div>
           )}
diff --git a/app/components/sidebar/Menu.client.tsx b/app/components/sidebar/Menu.client.tsx
index 7d43d5d..b3d9631 100644
--- a/app/components/sidebar/Menu.client.tsx
+++ b/app/components/sidebar/Menu.client.tsx
@@ -17,8 +17,8 @@ const menuVariants = {
     left: '-150px',
     transition: {
       duration: 0.2,
-      ease: cubicEasingFn,
-    },
+      ease: cubicEasingFn
+    }
   },
   open: {
     opacity: 1,
@@ -26,9 +26,9 @@ const menuVariants = {
     left: 0,
     transition: {
       duration: 0.2,
-      ease: cubicEasingFn,
-    },
-  },
+      ease: cubicEasingFn
+    }
+  }
 } satisfies Variants;
 
 type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
@@ -136,7 +136,8 @@ export function Menu() {
           <DialogRoot open={dialogContent !== null}>
             {binDates(list).map(({ category, items }) => (
               <div key={category} className="mt-4 first:mt-0 space-y-1">
-                <div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
+                <div
+                  className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
                   {category}
                 </div>
                 {items.map((item) => (
diff --git a/app/components/ui/Tooltip.tsx b/app/components/ui/Tooltip.tsx
new file mode 100644
index 0000000..f6d0bd2
--- /dev/null
+++ b/app/components/ui/Tooltip.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import * as Tooltip from '@radix-ui/react-tooltip';
+
+const WithTooltip = ({ tooltip, children, sideOffset = 5, className = '', arrowClassName = '', tooltipStyle = {} }) => {
+  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;

From 9f49c25f96b79f53cc81b4b31df8fc3dda2ac73d Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Fri, 22 Nov 2024 11:51:52 +0200
Subject: [PATCH 03/23] Added export button

---
 app/components/chat/BaseChat.tsx         |  7 ++++++-
 app/components/chat/Chat.client.tsx      |  8 +++++---
 app/components/chat/ExportChatButton.tsx | 16 ++++++++++++++++
 app/components/ui/Tooltip.tsx            | 12 +++++++++++-
 4 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 app/components/chat/ExportChatButton.tsx

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 627d959..353e326 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -12,12 +12,14 @@ import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
 import { APIKeyManager } from './APIKeyManager';
 import Cookies from 'js-cookie';
-import { importChat } from '~/utils/chatExport';
+import { exportChat, importChat } from '~/utils/chatExport';
 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 WithTooltip from '~/components/ui/Tooltip';
+import { ExportChatButton } from '~/components/chat/ExportChatButton';
 
 const EXAMPLE_PROMPTS = [
   { text: 'Build a todo app in React using Tailwind' },
@@ -76,6 +78,7 @@ interface BaseChatProps {
   chatStarted?: boolean;
   isStreaming?: boolean;
   messages?: Message[];
+  description?: string;
   enhancingPrompt?: boolean;
   promptEnhanced?: boolean;
   input?: string;
@@ -101,6 +104,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       enhancingPrompt = false,
       promptEnhanced = false,
       messages,
+      description,
       input = '',
       model,
       setModel,
@@ -288,6 +292,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                             </>
                           )}
                         </IconButton>
+                        <ClientOnly>{() => <ExportChatButton description={description} messages={messages}/>}</ClientOnly>
                       </div>
                       {input.length > 3 ? (
                         <div className="text-xs text-bolt-elements-textTertiary">
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index 31748b3..8b56419 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -7,7 +7,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';
@@ -29,10 +29,11 @@ export function Chat() {
   renderLogger.trace('Chat');
 
   const { ready, initialMessages, storeMessageHistory } = useChatHistory();
+  const title = useStore(description);
 
   return (
     <>
-      {ready && <ChatImpl initialMessages={initialMessages} storeMessageHistory={storeMessageHistory} />}
+      {ready && <ChatImpl description={title} initialMessages={initialMessages} storeMessageHistory={storeMessageHistory} />}
       <ToastContainer
         closeButton={({ closeToast }) => {
           return (
@@ -69,7 +70,7 @@ interface ChatProps {
   storeMessageHistory: (messages: Message[]) => Promise<void>;
 }
 
-export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProps) => {
+export const ChatImpl = memo(({ description, initialMessages, storeMessageHistory }: ChatProps) => {
   useShortcuts();
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -252,6 +253,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
       scrollRef={scrollRef}
       handleInputChange={handleInputChange}
       handleStop={abort}
+      description={description}
       messages={messages.map((message, i) => {
         if (message.role === 'user') {
           return message;
diff --git a/app/components/chat/ExportChatButton.tsx b/app/components/chat/ExportChatButton.tsx
new file mode 100644
index 0000000..5b0906d
--- /dev/null
+++ b/app/components/chat/ExportChatButton.tsx
@@ -0,0 +1,16 @@
+import WithTooltip from '~/components/ui/Tooltip';
+import { IconButton } from '~/components/ui/IconButton';
+import { exportChat } from '~/utils/chatExport';
+import React from 'react';
+import type { Message } from 'ai';
+
+export const ExportChatButton = ({description, messages}: {description: string, messages: Message[]}) => {
+  return (<WithTooltip tooltip="Export Chat">
+    <IconButton
+      title="Export Chat"
+      onClick={() => exportChat(messages || [], description)}
+    >
+      <div className="i-ph:download-simple text-xl"></div>
+    </IconButton>
+  </WithTooltip>);
+}
diff --git a/app/components/ui/Tooltip.tsx b/app/components/ui/Tooltip.tsx
index f6d0bd2..956f340 100644
--- a/app/components/ui/Tooltip.tsx
+++ b/app/components/ui/Tooltip.tsx
@@ -1,7 +1,17 @@
 import React from 'react';
 import * as Tooltip from '@radix-ui/react-tooltip';
+import type {ReactNode} from 'react';
 
-const WithTooltip = ({ tooltip, children, sideOffset = 5, className = '', arrowClassName = '', tooltipStyle = {} }) => {
+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>

From b0eab230b5b15c28e8e89faaa136f97b25a784fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20J=C3=A4gle?= <github@beimir.net>
Date: Fri, 22 Nov 2024 17:52:01 +0100
Subject: [PATCH 04/23] =?UTF-8?q?adds=20Husky=20=F0=9F=90=B6=20for=20pre-c?=
 =?UTF-8?q?ommit=20linting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .husky/pre-commit |  1 +
 package.json      |  4 +++-
 pnpm-lock.yaml    | 12 +++++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .husky/pre-commit

diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 0000000..23b9a80
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+pnpm lint:fix
diff --git a/package.json b/package.json
index 16c59f7..71627c9 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "dockerbuild": "docker build -t bolt-ai:development -t bolt-ai:latest --target bolt-ai-development .",
     "typecheck": "tsc",
     "typegen": "wrangler types",
-    "preview": "pnpm run build && pnpm run start"
+    "preview": "pnpm run build && pnpm run start",
+    "prepare": "husky"
   },
   "engines": {
     "node": ">=18.18.0"
@@ -101,6 +102,7 @@
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "fast-glob": "^3.3.2",
+    "husky": "9.1.7",
     "is-ci": "^3.0.1",
     "node-fetch": "^3.3.2",
     "prettier": "^3.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 951d1a4..f483b57 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -231,6 +231,9 @@ importers:
       fast-glob:
         specifier: ^3.3.2
         version: 3.3.2
+      husky:
+        specifier: 9.1.7
+        version: 9.1.7
       is-ci:
         specifier: ^3.0.1
         version: 3.0.1
@@ -2482,7 +2485,7 @@ packages:
     resolution: {integrity: sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==}
 
   bytes@3.0.0:
-    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
+    resolution: {integrity: sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=}
     engines: {node: '>= 0.8'}
 
   bytes@3.1.2:
@@ -3382,6 +3385,11 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
+  husky@9.1.7:
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -9278,6 +9286,8 @@ snapshots:
 
   human-signals@5.0.0: {}
 
+  husky@9.1.7: {}
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2

From 17d0902d2aba454c4449948410299ec3e45aeaed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20J=C3=A4gle?= <github@beimir.net>
Date: Fri, 22 Nov 2024 18:02:21 +0100
Subject: [PATCH 05/23] Add information about the linting pre-commit to the
 contributions guideline

---
 CONTRIBUTING.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0f7744a..3ec673f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -56,6 +56,8 @@ We're looking for dedicated contributors to help maintain and grow this project.
 - Comment complex logic
 - Keep functions focused and small
 - Use meaningful variable names
+- Lint your code. This repo contains a pre-commit-hook that will verify your code is linted properly, 
+so set up your IDE to do that for you!
 
 ## Development Setup
 

From fb34a4cb8f2aa7145717811c69de969daeb795d0 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Sat, 23 Nov 2024 00:23:45 +0200
Subject: [PATCH 06/23] Add import, fix export

---
 app/components/chat/BaseChat.tsx         | 36 +++++++++++++------
 app/components/chat/Chat.client.tsx      | 10 ++++--
 app/components/chat/ExportChatButton.tsx |  6 ++--
 app/components/chat/Messages.client.tsx  |  1 -
 app/components/sidebar/HistoryItem.tsx   |  7 ++--
 app/components/sidebar/Menu.client.tsx   |  4 +--
 app/lib/persistence/db.ts                | 24 +++++--------
 app/lib/persistence/useChatHistory.ts    | 45 ++++++++++++++++++++++-
 app/utils/chatExport.ts                  | 46 ------------------------
 9 files changed, 93 insertions(+), 86 deletions(-)
 delete mode 100644 app/utils/chatExport.ts

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 353e326..d5c2e0f 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -12,7 +12,6 @@ import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
 import { APIKeyManager } from './APIKeyManager';
 import Cookies from 'js-cookie';
-import { exportChat, importChat } from '~/utils/chatExport';
 import { toast } from 'react-toastify';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
@@ -90,6 +89,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,7 +114,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       sendMessage,
       handleInputChange,
       enhancePrompt,
-      handleStop
+      handleStop,
+      importChat,
+      exportChat
     },
     ref
   ) => {
@@ -292,7 +295,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                             </>
                           )}
                         </IconButton>
-                        <ClientOnly>{() => <ExportChatButton description={description} messages={messages}/>}</ClientOnly>
+                        <ClientOnly>{() => <ExportChatButton exportChat={exportChat}/>}</ClientOnly>
                       </div>
                       {input.length > 3 ? (
                         <div className="text-xs text-bolt-elements-textTertiary">
@@ -317,18 +320,31 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     accept=".json"
                     onChange={async (e) => {
                       const file = e.target.files?.[0];
-                      if (file) {
+                      if (file && importChat) {
                         try {
-                          const { messages: importedMessages } = await importChat(file);
-                          // Import each message
-                          for (const msg of importedMessages) {
-                            await sendMessage(new Event('import') as unknown as React.UIEvent, msg.content);
-                          }
-                          toast.success('Chat imported successfully');
+                          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) {
+                              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');
                       }
                     }}
                   />
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index 8b56419..de5cb37 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -28,12 +28,12 @@ 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 description={title} initialMessages={initialMessages} storeMessageHistory={storeMessageHistory} />}
+      {ready && <ChatImpl description={title} initialMessages={initialMessages} exportChat={exportChat} storeMessageHistory={storeMessageHistory} importChat={importChat} />}
       <ToastContainer
         closeButton={({ closeToast }) => {
           return (
@@ -68,9 +68,11 @@ export function Chat() {
 interface ChatProps {
   initialMessages: Message[];
   storeMessageHistory: (messages: Message[]) => Promise<void>;
+  importChat: (description: string, messages: Message[]) => Promise<void>;
+  exportChat: () => void;
 }
 
-export const ChatImpl = memo(({ description, initialMessages, storeMessageHistory }: ChatProps) => {
+export const ChatImpl = memo(({ description, initialMessages, storeMessageHistory, importChat, exportChat }: ChatProps) => {
   useShortcuts();
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -254,6 +256,8 @@ export const ChatImpl = memo(({ description, initialMessages, storeMessageHistor
       handleInputChange={handleInputChange}
       handleStop={abort}
       description={description}
+      importChat={importChat}
+      exportChat={exportChat}
       messages={messages.map((message, i) => {
         if (message.role === 'user') {
           return message;
diff --git a/app/components/chat/ExportChatButton.tsx b/app/components/chat/ExportChatButton.tsx
index 5b0906d..4816fe4 100644
--- a/app/components/chat/ExportChatButton.tsx
+++ b/app/components/chat/ExportChatButton.tsx
@@ -1,14 +1,12 @@
 import WithTooltip from '~/components/ui/Tooltip';
 import { IconButton } from '~/components/ui/IconButton';
-import { exportChat } from '~/utils/chatExport';
 import React from 'react';
-import type { Message } from 'ai';
 
-export const ExportChatButton = ({description, messages}: {description: string, messages: Message[]}) => {
+export const ExportChatButton = ({exportChat}: {exportChat: () => void}) => {
   return (<WithTooltip tooltip="Export Chat">
     <IconButton
       title="Export Chat"
-      onClick={() => exportChat(messages || [], description)}
+      onClick={exportChat}
     >
       <div className="i-ph:download-simple text-xl"></div>
     </IconButton>
diff --git a/app/components/chat/Messages.client.tsx b/app/components/chat/Messages.client.tsx
index 713dd02..2f7476f 100644
--- a/app/components/chat/Messages.client.tsx
+++ b/app/components/chat/Messages.client.tsx
@@ -33,7 +33,6 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
         toast.error('Chat persistence is not available');
         return;
       }
-
       const urlId = await forkChat(db, chatId.get()!, messageId);
       window.location.href = `/chat/${urlId}`;
     } catch (error) {
diff --git a/app/components/sidebar/HistoryItem.tsx b/app/components/sidebar/HistoryItem.tsx
index 44abeed..9b8e2dc 100644
--- a/app/components/sidebar/HistoryItem.tsx
+++ b/app/components/sidebar/HistoryItem.tsx
@@ -1,16 +1,16 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { useEffect, useRef, useState } from 'react';
 import { type ChatHistoryItem } from '~/lib/persistence';
-import { exportChat } from '~/utils/chatExport';
 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);
 
@@ -53,7 +53,8 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
                   className="i-ph:download-simple scale-110 mr-2"
                   onClick={(event) => {
                     event.preventDefault();
-                    exportChat(item.messages, item.description);
+                    exportChat(item.id);
+                    //exportChat(item.messages, item.description);
                   }}
                   title="Export chat"
                 />
diff --git a/app/components/sidebar/Menu.client.tsx b/app/components/sidebar/Menu.client.tsx
index b3d9631..e7f5d2e 100644
--- a/app/components/sidebar/Menu.client.tsx
+++ b/app/components/sidebar/Menu.client.tsx
@@ -34,7 +34,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);
@@ -102,7 +102,6 @@ export function Menu() {
 
   const handleDeleteClick = (event: React.UIEvent, item: ChatHistoryItem) => {
     event.preventDefault();
-
     setDialogContent({ type: 'delete', item });
   };
 
@@ -144,6 +143,7 @@ export function Menu() {
                   <HistoryItem
                     key={item.id}
                     item={item}
+                    exportChat={exportChat}
                     onDelete={(event) => handleDeleteClick(event, item)}
                     onDuplicate={() => handleDuplicate(item.id)}
                   />
diff --git a/app/lib/persistence/db.ts b/app/lib/persistence/db.ts
index 3aa2004..676bbf4 100644
--- a/app/lib/persistence/db.ts
+++ b/app/lib/persistence/db.ts
@@ -170,37 +170,29 @@ 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
-  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;
+  return createChatFromMessages(db, chat.description ? `${chat.description} (fork)` : 'Forked chat', messages);
 }
 
+
+
 export async function duplicateChat(db: IDBDatabase, id: string): Promise<string> {
   const chat = await getMessages(db, id);
   if (!chat) {
     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
diff --git a/app/lib/persistence/useChatHistory.ts b/app/lib/persistence/useChatHistory.ts
index f5e8138..9cf649b 100644
--- a/app/lib/persistence/useChatHistory.ts
+++ b/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;
@@ -111,6 +119,41 @@ export function useChatHistory() {
       } catch (error) {
         toast.error('Failed to duplicate chat');
       }
+    },
+    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) {
+        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);
     }
   };
 }
diff --git a/app/utils/chatExport.ts b/app/utils/chatExport.ts
deleted file mode 100644
index 1750ddd..0000000
--- a/app/utils/chatExport.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { Message } from 'ai';
-import { toast } from 'react-toastify';
-
-export interface ChatExportData {
-  messages: Message[];
-  description?: string;
-  exportDate: string;
-}
-
-export const exportChat = (messages: Message[], description?: string) => {
-  const chatData: ChatExportData = {
-    messages,
-    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);
-};
-
-export const importChat = async (file: File): Promise<ChatExportData> => {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const content = e.target?.result as string;
-        const data = JSON.parse(content);
-        if (!Array.isArray(data.messages)) {
-          throw new Error('Invalid chat file format');
-        }
-        resolve(data);
-      } catch (error) {
-        reject(new Error('Failed to parse chat file'));
-      }
-    };
-    reader.onerror = () => reject(new Error('Failed to read chat file'));
-    reader.readAsText(file);
-  });
-};

From 6e8aa04d271881ef2c620b30bb4367f5bc769a6f Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Sat, 23 Nov 2024 00:29:16 +0200
Subject: [PATCH 07/23] Lint fixes

---
 app/components/chat/BaseChat.tsx         | 104 +++---
 app/components/chat/Chat.client.tsx      | 426 ++++++++++++-----------
 app/components/chat/ExportChatButton.tsx |  19 +-
 app/components/chat/Messages.client.tsx  |  92 ++---
 app/components/sidebar/HistoryItem.tsx   |  17 +-
 app/components/sidebar/Menu.client.tsx   |  13 +-
 app/components/ui/Tooltip.tsx            |  27 +-
 app/lib/persistence/db.ts                |  11 +-
 app/lib/persistence/useChatHistory.ts    |   8 +-
 app/utils/logger.ts                      |   2 +-
 10 files changed, 368 insertions(+), 351 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index e1008d4..d22d63b 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -19,7 +19,6 @@ import * as Tooltip from '@radix-ui/react-tooltip';
 
 import styles from './BaseChat.module.scss';
 import type { ProviderInfo } from '~/utils/types';
-import WithTooltip from '~/components/ui/Tooltip';
 import { ExportChatButton } from '~/components/chat/ExportChatButton';
 
 const EXAMPLE_PROMPTS = [
@@ -27,7 +26,7 @@ const EXAMPLE_PROMPTS = [
   { text: 'Build a simple blog using Astro' },
   { text: 'Create a cookie consent form using Material UI' },
   { text: 'Make a space invaders game' },
-  { text: 'How do I center a div?' }
+  { text: 'How do I center a div?' },
 ];
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -110,7 +109,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       enhancingPrompt = false,
       promptEnhanced = false,
       messages,
-      description,
       input = '',
       model,
       setModel,
@@ -121,9 +119,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       enhancePrompt,
       handleStop,
       importChat,
-      exportChat
+      exportChat,
     },
-    ref
+    ref,
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
@@ -163,7 +161,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
           expires: 30, // 30 days
           secure: true, // Only send over HTTPS
           sameSite: 'strict', // Protect against CSRF
-          path: '/' // Accessible across the site
+          path: '/', // Accessible across the site
         });
       } catch (error) {
         console.error('Error saving API keys to cookies:', error);
@@ -176,7 +174,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
           ref={ref}
           className={classNames(
             styles.BaseChat,
-            'relative flex flex-col lg:flex-row h-full w-full overflow-hidden bg-bolt-elements-background-depth-1'
+            'relative flex flex-col lg:flex-row h-full w-full overflow-hidden bg-bolt-elements-background-depth-1',
           )}
           data-chat-visible={showChat}
         >
@@ -195,7 +193,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
               )}
               <div
                 className={classNames('pt-6 px-2 sm:px-6', {
-                  'h-full flex flex-col': chatStarted
+                  'h-full flex flex-col': chatStarted,
                 })}
               >
                 <ClientOnly>
@@ -215,8 +213,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     'bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt mb-6',
                     {
                       'sticky bottom-2': chatStarted,
-                  },
-                    )}
+                    },
+                  )}
                 >
                   <ModelSelector
                     key={provider?.name + ':' + modelList.length}
@@ -226,45 +224,46 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     provider={provider}
                     setProvider={setProvider}
                     providerList={PROVIDER_LIST}
-                  apiKeys={apiKeys}
-                />
+                    apiKeys={apiKeys}
+                  />
                   {provider && (
                     <APIKeyManager
                       provider={provider}
                       apiKey={apiKeys[provider.name] || ''}
-                      setApiKey={(key) => updateApiKey(provider.name, key)}/>
-                    )}
+                      setApiKey={(key) => updateApiKey(provider.name, key)}
+                    />
+                  )}
 
                   <div
                     className={classNames(
-                      'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all'
+                      'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
                     )}
                   >
-                  <textarea
-                    ref={textareaRef}
-                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-0 focus:border-none focus:shadow-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter') {
-                        if (event.shiftKey) {
-                          return;
+                    <textarea
+                      ref={textareaRef}
+                      className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-0 focus:border-none focus:shadow-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter') {
+                          if (event.shiftKey) {
+                            return;
+                          }
+
+                          event.preventDefault();
+
+                          sendMessage?.(event);
                         }
-
-                        event.preventDefault();
-
-                        sendMessage?.(event);
-                      }
-                    }}
-                    value={input}
-                    onChange={(event) => {
-                      handleInputChange?.(event);
-                    }}
-                    style={{
-                      minHeight: TEXTAREA_MIN_HEIGHT,
-                      maxHeight: TEXTAREA_MAX_HEIGHT
-                    }}
-                    placeholder="How can Bolt help you today?"
-                    translate="no"
-                  />
+                      }}
+                      value={input}
+                      onChange={(event) => {
+                        handleInputChange?.(event);
+                      }}
+                      style={{
+                        minHeight: TEXTAREA_MIN_HEIGHT,
+                        maxHeight: TEXTAREA_MAX_HEIGHT,
+                      }}
+                      placeholder="How can Bolt help you today?"
+                      translate="no"
+                    />
                     <ClientOnly>
                       {() => (
                         <SendButton
@@ -289,14 +288,13 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                           className={classNames('transition-all', {
                             'opacity-100!': enhancingPrompt,
                             'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
-                            promptEnhanced
+                              promptEnhanced,
                           })}
                           onClick={() => enhancePrompt?.()}
                         >
                           {enhancingPrompt ? (
                             <>
-                              <div
-                                className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
+                              <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
                               <div className="ml-1.5">Enhancing prompt...</div>
                             </>
                           ) : (
@@ -306,15 +304,13 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                             </>
                           )}
                         </IconButton>
-                        <ClientOnly>{() => <ExportChatButton exportChat={exportChat}/>}</ClientOnly>
+                        <ClientOnly>{() => <ExportChatButton exportChat={exportChat} />}</ClientOnly>
                       </div>
                       {input.length > 3 ? (
                         <div className="text-xs text-bolt-elements-textTertiary">
-                          Use <kbd
-                          className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> +{' '}
-                          <kbd
-                            className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> for
-                          a new line
+                          Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd>{' '}
+                          + <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd>{' '}
+                          for a new line
                         </div>
                       ) : null}
                     </div>
@@ -331,25 +327,28 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     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) {
-                              toast.error('Failed to parse chat file');
+                              toast.error('Failed to parse chat file: ' + error.message);
                             }
                           };
                           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');
                         }
@@ -377,8 +376,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
               )}
               {!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]">
+                  <div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
                     {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
                       return (
                         <button
@@ -402,5 +400,5 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         </div>
       </Tooltip.Provider>
     );
-  }
+  },
 );
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index cb39740..4da0804 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -35,7 +35,15 @@ export function Chat() {
 
   return (
     <>
-      {ready && <ChatImpl description={title} initialMessages={initialMessages} exportChat={exportChat} storeMessageHistory={storeMessageHistory} importChat={importChat} />}
+      {ready && (
+        <ChatImpl
+          description={title}
+          initialMessages={initialMessages}
+          exportChat={exportChat}
+          storeMessageHistory={storeMessageHistory}
+          importChat={importChat}
+        />
+      )}
       <ToastContainer
         closeButton={({ closeToast }) => {
           return (
@@ -74,217 +82,219 @@ interface ChatProps {
   exportChat: () => void;
 }
 
-export const ChatImpl = memo(({ description, initialMessages, storeMessageHistory, importChat, exportChat }: ChatProps) => {
-  useShortcuts();
+export const ChatImpl = memo(
+  ({ 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 [model, setModel] = useState(() => {
-    const savedModel = Cookies.get('selectedModel');
-    return savedModel || DEFAULT_MODEL;
-  });
-  const [provider, setProvider] = useState(() => {
-    const savedProvider = Cookies.get('selectedProvider');
-    return PROVIDER_LIST.find((p) => p.name === savedProvider) || DEFAULT_PROVIDER;
-  });
+    const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
+    const [model, setModel] = useState(() => {
+      const savedModel = Cookies.get('selectedModel');
+      return savedModel || DEFAULT_MODEL;
+    });
+    const [provider, setProvider] = useState(() => {
+      const savedProvider = Cookies.get('selectedProvider');
+      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({
-    api: '/api/chat',
-    body: {
-      apiKeys,
-    },
-    onError: (error) => {
-      logger.error('Request failed\n\n', error);
-      toast.error(
-        '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}
-      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,
+    const { messages, isLoading, input, handleInputChange, setInput, stop, append } = useChat({
+      api: '/api/chat',
+      body: {
+        apiKeys,
+      },
+      onError: (error) => {
+        logger.error('Request failed\n\n', error);
+        toast.error(
+          '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}
+        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,
+          );
+        }}
+      />
+    );
+  },
+);
diff --git a/app/components/chat/ExportChatButton.tsx b/app/components/chat/ExportChatButton.tsx
index 4816fe4..5ee889a 100644
--- a/app/components/chat/ExportChatButton.tsx
+++ b/app/components/chat/ExportChatButton.tsx
@@ -2,13 +2,12 @@ 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>);
-}
+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>
+  );
+};
diff --git a/app/components/chat/Messages.client.tsx b/app/components/chat/Messages.client.tsx
index 4cde504..4a2ac6a 100644
--- a/app/components/chat/Messages.client.tsx
+++ b/app/components/chat/Messages.client.tsx
@@ -32,6 +32,7 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
         toast.error('Chat persistence is not available');
         return;
       }
+
       const urlId = await forkChat(db, chatId.get()!, messageId);
       window.location.href = `/chat/${urlId}`;
     } catch (error) {
@@ -40,47 +41,48 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
   };
 
   return (
-      <div id={id} ref={ref} className={props.className}>
-        {messages.length > 0
-          ? messages.map((message, index) => {
-              const { role, content, id: messageId } = message;
-              const isUserMessage = role === 'user';
-              const isFirst = index === 0;
-              const isLast = index === messages.length - 1;
+    <div id={id} ref={ref} className={props.className}>
+      {messages.length > 0
+        ? messages.map((message, index) => {
+            const { role, content, id: messageId } = message;
+            const isUserMessage = role === 'user';
+            const isFirst = index === 0;
+            const isLast = index === messages.length - 1;
 
-              return (
-                <div
-                  key={index}
-                  className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
-                    'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
-                    'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
-                      isStreaming && isLast,
-                    'mt-4': !isFirst,
-                  })}
-                >
-                  {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="i-ph:user-fill text-xl"></div>
-                    </div>
-                  )}
-                  <div className="grid grid-col-1 w-full">
-                    {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+            return (
+              <div
+                key={index}
+                className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
+                  'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
+                  'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
+                    isStreaming && isLast,
+                  'mt-4': !isFirst,
+                })}
+              >
+                {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="i-ph:user-fill text-xl"></div>
                   </div>
-                  {!isUserMessage && (
-                    <div className="flex gap-2 flex-col lg:flex-row">
-                      <WithTooltip tooltip="Revert to this message">
-                      {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',
-                              )}
+                )}
+                <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">
+                    <WithTooltip tooltip="Revert to this message">
+                      {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',
+                          )}
                         />
                       )}
                     </WithTooltip>
 
-                      <WithTooltip tooltip="Fork chat from this message">
+                    <WithTooltip tooltip="Fork chat from this message">
                       <button
                         onClick={() => handleFork(messageId)}
                         key="i-ph:git-fork"
@@ -90,15 +92,15 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                         )}
                       />
                     </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>
+                  </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>
   );
 });
diff --git a/app/components/sidebar/HistoryItem.tsx b/app/components/sidebar/HistoryItem.tsx
index 9b8e2dc..3f58735 100644
--- a/app/components/sidebar/HistoryItem.tsx
+++ b/app/components/sidebar/HistoryItem.tsx
@@ -54,6 +54,7 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
                   onClick={(event) => {
                     event.preventDefault();
                     exportChat(item.id);
+
                     //exportChat(item.messages, item.description);
                   }}
                   title="Export chat"
@@ -70,14 +71,14 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
               )}
               <Dialog.Trigger asChild>
                 <WithTooltip tooltip="Delete chat">
-                <button
-                  className="i-ph:trash scale-110"
-                  onClick={(event) => {
-                    // we prevent the default so we don't trigger the anchor above
-                    event.preventDefault();
-                    onDelete?.(event);
-                  }}
-                />
+                  <button
+                    className="i-ph:trash scale-110"
+                    onClick={(event) => {
+                      // we prevent the default so we don't trigger the anchor above
+                      event.preventDefault();
+                      onDelete?.(event);
+                    }}
+                  />
                 </WithTooltip>
               </Dialog.Trigger>
             </div>
diff --git a/app/components/sidebar/Menu.client.tsx b/app/components/sidebar/Menu.client.tsx
index 659666d..5becf82 100644
--- a/app/components/sidebar/Menu.client.tsx
+++ b/app/components/sidebar/Menu.client.tsx
@@ -16,8 +16,8 @@ const menuVariants = {
     left: '-150px',
     transition: {
       duration: 0.2,
-      ease: cubicEasingFn
-    }
+      ease: cubicEasingFn,
+    },
   },
   open: {
     opacity: 1,
@@ -25,9 +25,9 @@ const menuVariants = {
     left: 0,
     transition: {
       duration: 0.2,
-      ease: cubicEasingFn
-    }
-  }
+      ease: cubicEasingFn,
+    },
+  },
 } satisfies Variants;
 
 type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
@@ -134,8 +134,7 @@ export function Menu() {
           <DialogRoot open={dialogContent !== null}>
             {binDates(list).map(({ category, items }) => (
               <div key={category} className="mt-4 first:mt-0 space-y-1">
-                <div
-                  className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
+                <div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
                   {category}
                 </div>
                 {items.map((item) => (
diff --git a/app/components/ui/Tooltip.tsx b/app/components/ui/Tooltip.tsx
index 956f340..73ababb 100644
--- a/app/components/ui/Tooltip.tsx
+++ b/app/components/ui/Tooltip.tsx
@@ -1,27 +1,32 @@
 import React from 'react';
 import * as Tooltip from '@radix-ui/react-tooltip';
-import type {ReactNode} from 'react';
+import type { ReactNode } from 'react';
 
 interface ToolTipProps {
-  tooltip: string,
+  tooltip: string;
   children: ReactNode | ReactNode[];
-  sideOffset?: number,
-  className?: string,
-  arrowClassName?: string,
-  tooltipStyle?: any, //TODO better type
+  sideOffset?: number;
+  className?: string;
+  arrowClassName?: string;
+  tooltipStyle?: any; //TODO better type
 }
 
-const WithTooltip = ({ tooltip, children, sideOffset = 5, className = '', arrowClassName = '', tooltipStyle = {} }: ToolTipProps) => {
+const WithTooltip = ({
+  tooltip,
+  children,
+  sideOffset = 5,
+  className = '',
+  arrowClassName = '',
+  tooltipStyle = {},
+}: ToolTipProps) => {
   return (
     <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        {children}
-      </Tooltip.Trigger>
+      <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 }}
+          style={{ zIndex: 2000, backgroundColor: 'white', ...tooltipStyle }}
         >
           {tooltip}
           <Tooltip.Arrow className={`fill-bolt-elements-tooltip-background ${arrowClassName}`} />
diff --git a/app/lib/persistence/db.ts b/app/lib/persistence/db.ts
index 6de4fb5..6ce604d 100644
--- a/app/lib/persistence/db.ts
+++ b/app/lib/persistence/db.ts
@@ -179,18 +179,21 @@ export async function forkChat(db: IDBDatabase, chatId: string, messageId: strin
   return createChatFromMessages(db, chat.description ? `${chat.description} (fork)` : 'Forked chat', messages);
 }
 
-
-
 export async function duplicateChat(db: IDBDatabase, id: string): Promise<string> {
   const chat = await getMessages(db, id);
 
   if (!chat) {
     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> {
+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
 
@@ -199,7 +202,7 @@ export async function createChatFromMessages(db: IDBDatabase, description: strin
     newId,
     messages,
     newUrlId, // Use the new urlId
-    description
+    description,
   );
 
   return newUrlId; // Return the urlId instead of id for navigation
diff --git a/app/lib/persistence/useChatHistory.ts b/app/lib/persistence/useChatHistory.ts
index c890486..779e598 100644
--- a/app/lib/persistence/useChatHistory.ts
+++ b/app/lib/persistence/useChatHistory.ts
@@ -11,7 +11,7 @@ import {
   openDatabase,
   setMessages,
   duplicateChat,
-  createChatFromMessages
+  createChatFromMessages,
 } from './db';
 
 export interface ChatHistoryItem {
@@ -121,7 +121,7 @@ export function useChatHistory() {
         console.log(error);
       }
     },
-    importChat: async (description: string, messages:Message[]) => {
+    importChat: async (description: string, messages: Message[]) => {
       if (!db) {
         return;
       }
@@ -131,7 +131,7 @@ export function useChatHistory() {
         window.location.href = `/chat/${newId}`;
         toast.success('Chat imported successfully');
       } catch (error) {
-        toast.error('Failed to import chat');
+        toast.error('Failed to import chat: ' + error.message);
       }
     },
     exportChat: async (id = urlId) => {
@@ -155,7 +155,7 @@ export function useChatHistory() {
       a.click();
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
-    }
+    },
   };
 }
 
diff --git a/app/utils/logger.ts b/app/utils/logger.ts
index 1a5c932..9b2c31c 100644
--- a/app/utils/logger.ts
+++ b/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;

From fbea4744421cfa22608c6249fe17d90153c1cac8 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Sat, 23 Nov 2024 10:41:43 +0200
Subject: [PATCH 08/23] Type fixes

---
 app/components/chat/BaseChat.tsx         | 8 ++++++--
 app/components/chat/Chat.client.tsx      | 1 +
 app/components/chat/ExportChatButton.tsx | 2 +-
 app/lib/persistence/useChatHistory.ts    | 6 +++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index d22d63b..ab67167 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -343,8 +343,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
 
                               await importChat(data.description, data.messages);
                               toast.success('Chat imported successfully');
-                            } catch (error) {
-                              toast.error('Failed to parse chat file: ' + error.message);
+                            } 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');
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index 4da0804..9841820 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -80,6 +80,7 @@ interface ChatProps {
   storeMessageHistory: (messages: Message[]) => Promise<void>;
   importChat: (description: string, messages: Message[]) => Promise<void>;
   exportChat: () => void;
+  description?: string;
 }
 
 export const ChatImpl = memo(
diff --git a/app/components/chat/ExportChatButton.tsx b/app/components/chat/ExportChatButton.tsx
index 5ee889a..8972eed 100644
--- a/app/components/chat/ExportChatButton.tsx
+++ b/app/components/chat/ExportChatButton.tsx
@@ -2,7 +2,7 @@ import WithTooltip from '~/components/ui/Tooltip';
 import { IconButton } from '~/components/ui/IconButton';
 import React from 'react';
 
-export const ExportChatButton = ({ exportChat }: { exportChat: () => void }) => {
+export const ExportChatButton = ({ exportChat }: { exportChat?: () => void }) => {
   return (
     <WithTooltip tooltip="Export Chat">
       <IconButton title="Export Chat" onClick={exportChat}>
diff --git a/app/lib/persistence/useChatHistory.ts b/app/lib/persistence/useChatHistory.ts
index 779e598..9daa61f 100644
--- a/app/lib/persistence/useChatHistory.ts
+++ b/app/lib/persistence/useChatHistory.ts
@@ -131,7 +131,11 @@ export function useChatHistory() {
         window.location.href = `/chat/${newId}`;
         toast.success('Chat imported successfully');
       } catch (error) {
-        toast.error('Failed to import chat: ' + error.message);
+        if (error instanceof Error) {
+          toast.error('Failed to import chat: ' + error.message);
+        } else {
+          toast.error('Failed to import chat');
+        }
       }
     },
     exportChat: async (id = urlId) => {

From ad511db0fe618ba4bc8f3615f104da0ae35fedf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20J=C3=A4gle?= <github@beimir.net>
Date: Sat, 23 Nov 2024 10:08:14 +0100
Subject: [PATCH 09/23] Don't fix linting-issues pre-commit

I figured that lint:fix might not be the best experience: If there are linting errors and the pre-commit fixes them, those changes will stay in the staging area but will not be automatically commited.
Thus, a subsequent pre-commit check would succeed without these changes included.
---
 .husky/pre-commit                  | 18 +++++++++++++++++-
 app/lib/.server/llm/stream-text.ts |  4 ++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 23b9a80..966a4ad 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1,17 @@
-pnpm lint:fix
+#!/bin/sh
+
+echo "🔍 Running pre-commit hook to check the code looks good... 🔍"
+
+if ! pnpm typecheck; then
+    echo "❌ Type checking failed! Please review TypeScript types."
+    echo "Once you're done, don't forget to add your changes to the commit! 🚀"
+    exit 1
+fi
+
+if ! pnpm lint; then
+    echo "❌ Linting failed! 'pnpm lint:check' will help you fix the easy ones."
+    echo "Once you're done, don't forget to add your beautification to the commit! 🤩"
+    exit 1
+fi
+
+echo "👍 All good! Committing changes..."
diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 86e285c..3ef8792 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -1,11 +1,11 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck – TODO: Provider proper types
 
-import { streamText as _streamText, convertToCoreMessages } from 'ai';
+import { convertToCoreMessages, streamText as _streamText } from 'ai';
 import { getModel } from '~/lib/.server/llm/model';
 import { MAX_TOKENS } from './constants';
 import { getSystemPrompt } from './prompts';
-import { MODEL_LIST, DEFAULT_MODEL, DEFAULT_PROVIDER, MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
+import { DEFAULT_MODEL, DEFAULT_PROVIDER, MODEL_LIST, MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
 
 interface ToolResult<Name extends string, Args, Result> {
   toolCallId: string;

From 1f09459fa5cd436327481567537881ec2ea21d16 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Sun, 24 Nov 2024 12:05:22 +0200
Subject: [PATCH 10/23] Small change to make review easier

---
 app/components/chat/BaseChat.tsx | 436 ++++++++++++++++---------------
 1 file changed, 219 insertions(+), 217 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index ab67167..b1d14ea 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -168,241 +168,243 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
-    return (
-      <Tooltip.Provider delayDuration={200}>
-        <div
-          ref={ref}
-          className={classNames(
-            styles.BaseChat,
-            'relative flex flex-col lg:flex-row h-full w-full overflow-hidden bg-bolt-elements-background-depth-1',
-          )}
-          data-chat-visible={showChat}
-        >
-          <ClientOnly>{() => <Menu />}</ClientOnly>
-          <div ref={scrollRef} className="flex flex-col lg:flex-rowoverflow-y-auto w-full h-full">
-            <div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
-              {!chatStarted && (
-                <div id="intro" className="mt-[26vh] max-w-chat mx-auto text-centerpx-4 lg:px-0">
-                  <h1 className="text-3xl lg:text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
-                    Where ideas begin
-                  </h1>
-                  <p className="text-md lg:text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
-                    Bring ideas to life in seconds or get help on existing projects.
-                  </p>
-                </div>
-              )}
+    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(
+          styles.BaseChat,
+          'relative flex flex-col lg:flex-row h-full w-full overflow-hidden bg-bolt-elements-background-depth-1',
+        )}
+        data-chat-visible={showChat}
+      >
+        <ClientOnly>{() => <Menu />}</ClientOnly>
+        <div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
+          <div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
+            {!chatStarted && (
+              <div id="intro" className="mt-[26vh] max-w-chat mx-auto text-center px-4 lg:px-0">
+                <h1 className="text-3xl lg:text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
+                  Where ideas begin
+                </h1>
+                <p className="text-md lg:text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
+                  Bring ideas to life in seconds or get help on existing projects.
+                </p>
+              </div>
+            )}
+            <div
+              className={classNames('pt-6 px-2 sm:px-6', {
+                'h-full flex flex-col': chatStarted,
+              })}
+            >
+              <ClientOnly>
+                {() => {
+                  return chatStarted ? (
+                    <Messages
+                      ref={messageRef}
+                      className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1"
+                      messages={messages}
+                      isStreaming={isStreaming}
+                    />
+                  ) : null;
+                }}
+              </ClientOnly>
               <div
-                className={classNames('pt-6 px-2 sm:px-6', {
-                  'h-full flex flex-col': chatStarted,
-                })}
+                className={classNames(
+                  ' bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt mb-6',
+                  {
+                    'sticky bottom-2': chatStarted,
+                  },
+                )}
               >
-                <ClientOnly>
-                  {() => {
-                    return chatStarted ? (
-                      <Messages
-                        ref={messageRef}
-                        className="flex flex-col w-full flex-1 max-w-chat  pb-6 mx-auto z-1"
-                        messages={messages}
-                        isStreaming={isStreaming}
-                      />
-                    ) : null;
-                  }}
-                </ClientOnly>
+                <ModelSelector
+                  key={provider?.name + ':' + modelList.length}
+                  model={model}
+                  setModel={setModel}
+                  modelList={modelList}
+                  provider={provider}
+                  setProvider={setProvider}
+                  providerList={PROVIDER_LIST}
+                  apiKeys={apiKeys}
+                />
+
+                {provider && (
+                  <APIKeyManager
+                    provider={provider}
+                    apiKey={apiKeys[provider.name] || ''}
+                    setApiKey={(key) => updateApiKey(provider.name, key)}
+                  />
+                )}
+
                 <div
                   className={classNames(
-                    'bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt mb-6',
-                    {
-                      'sticky bottom-2': chatStarted,
-                    },
+                    'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
                   )}
                 >
-                  <ModelSelector
-                    key={provider?.name + ':' + modelList.length}
-                    model={model}
-                    setModel={setModel}
-                    modelList={modelList}
-                    provider={provider}
-                    setProvider={setProvider}
-                    providerList={PROVIDER_LIST}
-                    apiKeys={apiKeys}
-                  />
-                  {provider && (
-                    <APIKeyManager
-                      provider={provider}
-                      apiKey={apiKeys[provider.name] || ''}
-                      setApiKey={(key) => updateApiKey(provider.name, key)}
-                    />
-                  )}
+                  <textarea
+                    ref={textareaRef}
+                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-0 focus:border-none focus:shadow-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') {
+                        if (event.shiftKey) {
+                          return;
+                        }
 
-                  <div
-                    className={classNames(
-                      'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
-                    )}
-                  >
-                    <textarea
-                      ref={textareaRef}
-                      className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-0 focus:border-none focus:shadow-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
-                      onKeyDown={(event) => {
-                        if (event.key === 'Enter') {
-                          if (event.shiftKey) {
+                        event.preventDefault();
+
+                        sendMessage?.(event);
+                      }
+                    }}
+                    value={input}
+                    onChange={(event) => {
+                      handleInputChange?.(event);
+                    }}
+                    style={{
+                      minHeight: TEXTAREA_MIN_HEIGHT,
+                      maxHeight: TEXTAREA_MAX_HEIGHT,
+                    }}
+                    placeholder="How can Bolt help you today?"
+                    translate="no"
+                  />
+                  <ClientOnly>
+                    {() => (
+                      <SendButton
+                        show={input.length > 0 || isStreaming}
+                        isStreaming={isStreaming}
+                        onClick={(event) => {
+                          if (isStreaming) {
+                            handleStop?.();
                             return;
                           }
 
-                          event.preventDefault();
-
                           sendMessage?.(event);
-                        }
-                      }}
-                      value={input}
-                      onChange={(event) => {
-                        handleInputChange?.(event);
-                      }}
-                      style={{
-                        minHeight: TEXTAREA_MIN_HEIGHT,
-                        maxHeight: TEXTAREA_MAX_HEIGHT,
-                      }}
-                      placeholder="How can Bolt help you today?"
-                      translate="no"
-                    />
-                    <ClientOnly>
-                      {() => (
-                        <SendButton
-                          show={input.length > 0 || isStreaming}
-                          isStreaming={isStreaming}
-                          onClick={(event) => {
-                            if (isStreaming) {
-                              handleStop?.();
-                              return;
-                            }
-
-                            sendMessage?.(event);
-                          }}
-                        />
-                      )}
-                    </ClientOnly>
-                    <div className="flex justify-between items-center text-sm p-4 pt-2">
-                      <div className="flex gap-1 items-center">
-                        <IconButton
-                          title="Enhance prompt"
-                          disabled={input.length === 0 || enhancingPrompt}
-                          className={classNames('transition-all', {
-                            'opacity-100!': enhancingPrompt,
-                            'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
-                              promptEnhanced,
-                          })}
-                          onClick={() => enhancePrompt?.()}
-                        >
-                          {enhancingPrompt ? (
-                            <>
-                              <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
-                              <div className="ml-1.5">Enhancing prompt...</div>
-                            </>
-                          ) : (
-                            <>
-                              <div className="i-bolt:stars text-xl"></div>
-                              {promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
-                            </>
-                          )}
-                        </IconButton>
-                        <ClientOnly>{() => <ExportChatButton exportChat={exportChat} />}</ClientOnly>
-                      </div>
-                      {input.length > 3 ? (
-                        <div className="text-xs text-bolt-elements-textTertiary">
-                          Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd>{' '}
-                          + <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd>{' '}
-                          for a new line
-                        </div>
-                      ) : null}
+                        }}
+                      />
+                    )}
+                  </ClientOnly>
+                  <div className="flex justify-between items-center text-sm p-4 pt-2">
+                    <div className="flex gap-1 items-center">
+                      <IconButton
+                        title="Enhance prompt"
+                        disabled={input.length === 0 || enhancingPrompt}
+                        className={classNames('transition-all', {
+                          'opacity-100!': enhancingPrompt,
+                          'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
+                            promptEnhanced,
+                        })}
+                        onClick={() => enhancePrompt?.()}
+                      >
+                        {enhancingPrompt ? (
+                          <>
+                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
+                            <div className="ml-1.5">Enhancing prompt...</div>
+                          </>
+                        ) : (
+                          <>
+                            <div className="i-bolt:stars text-xl"></div>
+                            {promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
+                          </>
+                        )}
+                      </IconButton>
+                      <ClientOnly>{() => <ExportChatButton exportChat={exportChat} />}</ClientOnly>
                     </div>
+                    {input.length > 3 ? (
+                      <div className="text-xs text-bolt-elements-textTertiary">
+                        Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> +{' '}
+                        <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> for
+                        a new line
+                      </div>
+                    ) : null}
                   </div>
-                  <div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
                 </div>
               </div>
-              {!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>
-              )}
-              {!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]">
-                    {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
-                      return (
-                        <button
-                          key={index}
-                          onClick={(event) => {
-                            sendMessage?.(event, examplePrompt.text);
-                          }}
-                          className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
-                        >
-                          {examplePrompt.text}
-                          <div className="i-ph:arrow-bend-down-left" />
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-              )}
             </div>
-            <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
+            {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]">
+                  {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
+                    return (
+                      <button
+                        key={index}
+                        onClick={(event) => {
+                          sendMessage?.(event, examplePrompt.text);
+                        }}
+                        className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
+                      >
+                        {examplePrompt.text}
+                        <div className="i-ph:arrow-bend-down-left" />
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
           </div>
+          <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
         </div>
-      </Tooltip.Provider>
+      </div>
     );
+
+    return <Tooltip.Provider delayDuration={200}>{baseChat}</Tooltip.Provider>;
   },
 );

From 6e94d20a744b7726fb56994f94c3753d354fbd6a Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Sun, 24 Nov 2024 15:28:49 +0200
Subject: [PATCH 11/23] Couple of bugfixes

---
 app/components/chat/BaseChat.tsx         | 2 +-
 app/components/chat/ExportChatButton.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index b1d14ea..1a33375 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -365,7 +365,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                           </>
                         )}
                       </IconButton>
-                      <ClientOnly>{() => <ExportChatButton exportChat={exportChat} />}</ClientOnly>
+                      {chatStarted && <ClientOnly>{() => <ExportChatButton exportChat={exportChat} />}</ClientOnly>}
                     </div>
                     {input.length > 3 ? (
                       <div className="text-xs text-bolt-elements-textTertiary">
diff --git a/app/components/chat/ExportChatButton.tsx b/app/components/chat/ExportChatButton.tsx
index 8972eed..6ab294b 100644
--- a/app/components/chat/ExportChatButton.tsx
+++ b/app/components/chat/ExportChatButton.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 export const ExportChatButton = ({ exportChat }: { exportChat?: () => void }) => {
   return (
     <WithTooltip tooltip="Export Chat">
-      <IconButton title="Export Chat" onClick={exportChat}>
+      <IconButton title="Export Chat" onClick={() => exportChat?.()}>
         <div className="i-ph:download-simple text-xl"></div>
       </IconButton>
     </WithTooltip>

From e8e291141fa2b5153ac88d40057946818d505eca Mon Sep 17 00:00:00 2001
From: Sujal Shah <sujal@zuru.com>
Date: Mon, 25 Nov 2024 12:07:10 +0530
Subject: [PATCH 12/23] fix: prettier issue

---
 app/utils/logger.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/utils/logger.ts b/app/utils/logger.ts
index 9b2c31c..1a5c932 100644
--- a/app/utils/logger.ts
+++ b/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;

From 30605ea3a1a00f1c1ffcd511618b926aad12fc1f Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Mon, 25 Nov 2024 09:43:34 +0200
Subject: [PATCH 13/23] Small-cleanup-of-base-chat-component

---
 app/components/chat/BaseChat.tsx              | 97 +------------------
 app/components/chat/ExamplePrompts.tsx        | 32 ++++++
 .../ExportChatButton.tsx                      |  0
 .../chat/chatExportAndImport/ImportButton.tsx | 66 +++++++++++++
 4 files changed, 103 insertions(+), 92 deletions(-)
 create mode 100644 app/components/chat/ExamplePrompts.tsx
 rename app/components/chat/{ => chatExportAndImport}/ExportChatButton.tsx (100%)
 create mode 100644 app/components/chat/chatExportAndImport/ImportButton.tsx

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 1a33375..98f13c7 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -14,20 +14,13 @@ import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
 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' },
-  { text: 'Build a simple blog using Astro' },
-  { text: 'Create a cookie consent form using Material UI' },
-  { text: 'Make a space invaders game' },
-  { text: 'How do I center a div?' },
-];
+import { ExportChatButton } from '~/components/chat/chatExportAndImport/ExportChatButton';
+import { ImportButton } from '~/components/chat/chatExportAndImport/ImportButton';
+import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const providerList = PROVIDER_LIST;
@@ -168,67 +161,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
-    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}
@@ -378,27 +310,8 @@ 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]">
-                  {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
-                    return (
-                      <button
-                        key={index}
-                        onClick={(event) => {
-                          sendMessage?.(event, examplePrompt.text);
-                        }}
-                        className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
-                      >
-                        {examplePrompt.text}
-                        <div className="i-ph:arrow-bend-down-left" />
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
+            {!chatStarted && ImportButton(importChat)}
+            {!chatStarted && ExamplePrompts(sendMessage)}
           </div>
           <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
         </div>
diff --git a/app/components/chat/ExamplePrompts.tsx b/app/components/chat/ExamplePrompts.tsx
new file mode 100644
index 0000000..60b7643
--- /dev/null
+++ b/app/components/chat/ExamplePrompts.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+const EXAMPLE_PROMPTS = [
+  { text: 'Build a todo app in React using Tailwind' },
+  { text: 'Build a simple blog using Astro' },
+  { text: 'Create a cookie consent form using Material UI' },
+  { text: 'Make a space invaders game' },
+  { text: 'How do I center a div?' },
+];
+
+export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInput?: string): void | undefined }) {
+  return (
+    <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]">
+        {EXAMPLE_PROMPTS.map((examplePrompt, index: number) => {
+          return (
+            <button
+              key={index}
+              onClick={(event) => {
+                sendMessage?.(event, examplePrompt.text);
+              }}
+              className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
+            >
+              {examplePrompt.text}
+              <div className="i-ph:arrow-bend-down-left" />
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/chat/ExportChatButton.tsx b/app/components/chat/chatExportAndImport/ExportChatButton.tsx
similarity index 100%
rename from app/components/chat/ExportChatButton.tsx
rename to app/components/chat/chatExportAndImport/ExportChatButton.tsx
diff --git a/app/components/chat/chatExportAndImport/ImportButton.tsx b/app/components/chat/chatExportAndImport/ImportButton.tsx
new file mode 100644
index 0000000..91c699e
--- /dev/null
+++ b/app/components/chat/chatExportAndImport/ImportButton.tsx
@@ -0,0 +1,66 @@
+import type { Message } from 'ai';
+import { toast } from 'react-toastify';
+import React from 'react';
+
+export function ImportButton(importChat: ((description: string, messages: Message[]) => Promise<void>) | undefined) {
+  return (
+    <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>
+  );
+}

From 3d2ab89cdc01b822a4fcfbd4ba4ec61ee66c3622 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Mon, 25 Nov 2024 10:24:03 +0200
Subject: [PATCH 14/23] Proof of concept for folder import

---
 app/components/chat/BaseChat.tsx           |  31 +++----
 app/components/chat/ImportFolderButton.tsx | 100 +++++++++++++++++++++
 2 files changed, 113 insertions(+), 18 deletions(-)
 create mode 100644 app/components/chat/ImportFolderButton.tsx

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 1a33375..4da6493 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -20,6 +20,7 @@ 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';
+import { ImportFolderButton } from '~/components/chat/ImportFolderButton';
 
 const EXAMPLE_PROMPTS = [
   { text: 'Build a todo app in React using Tailwind' },
@@ -184,31 +185,21 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
 
                 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');
-                    }
+                    const content = JSON.parse(e.target?.result as string);
+                    await importChat(content.description || '', content.messages || []);
+                  } catch (error) {
+                    toast.error(`Invalid chat file format: ${error instanceof Error ? ': ' + error.message : ''}`);
                   }
                 };
-                reader.onerror = () => toast.error('Failed to read chat file');
+
+                reader.onerror = () => {
+                  toast.error('Something went wrong');
+                };
                 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');
             }
           }}
         />
@@ -224,6 +215,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
               <div className="i-ph:upload-simple" />
               Import Chat
             </button>
+            <ImportFolderButton
+              importChat={importChat}
+              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>
         </div>
       </div>
diff --git a/app/components/chat/ImportFolderButton.tsx b/app/components/chat/ImportFolderButton.tsx
new file mode 100644
index 0000000..1444580
--- /dev/null
+++ b/app/components/chat/ImportFolderButton.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import type { Message } from 'ai';
+import { toast } from 'react-toastify';
+
+interface ImportFolderButtonProps {
+  className?: string;
+  importChat?: (description: string, messages: Message[]) => Promise<void>;
+}
+
+const IGNORED_FOLDERS = ['node_modules', '.git', 'dist', 'build', '.next', 'coverage', '.cache', '.vscode', '.idea'];
+
+const generateId = () => Math.random().toString(36).substring(2, 15);
+
+export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ className, importChat }) => {
+  const shouldIncludeFile = (path: string): boolean => {
+    return !IGNORED_FOLDERS.some((folder) => path.includes(`/${folder}/`));
+  };
+
+  const createChatFromFolder = async (files: File[]) => {
+    const fileArtifacts = await Promise.all(
+      files.map(async (file) => {
+        return new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+
+          reader.onload = () => {
+            const content = reader.result as string;
+            const relativePath = file.webkitRelativePath.split('/').slice(1).join('/');
+            resolve(
+              `<boltAction type="file" filePath="${relativePath}">
+${content}
+</boltAction>`,
+            );
+          };
+          reader.onerror = reject;
+          reader.readAsText(file);
+        });
+      }),
+    );
+
+    const message: Message = {
+      role: 'assistant',
+      content: `I'll help you set up these files.
+
+<boltArtifact id="imported-files" title="Imported Files">
+${fileArtifacts.join('\n\n')}
+</boltArtifact>`,
+      id: generateId(),
+      createdAt: new Date(),
+    };
+
+    const userMessage: Message = {
+      role: 'user',
+      id: generateId(),
+      content: 'Import my files',
+      createdAt: new Date(),
+    };
+
+    const description = `Folder Import: ${files[0].webkitRelativePath.split('/')[0]}`;
+
+    if (importChat) {
+      await importChat(description, [userMessage, message]);
+    }
+  };
+
+  return (
+    <>
+      <input
+        type="file"
+        id="folder-import"
+        className="hidden"
+        webkitdirectory=""
+        directory=""
+        onChange={async (e) => {
+          const allFiles = Array.from(e.target.files || []);
+          const filteredFiles = allFiles.filter((file) => shouldIncludeFile(file.webkitRelativePath));
+
+          try {
+            await createChatFromFolder(filteredFiles);
+          } catch (error) {
+            console.error('Failed to import folder:', error);
+            toast.error('Failed to import folder');
+          }
+
+          e.target.value = ''; // Reset file input
+        }}
+        {...({} as any)} // if removed webkitdirectory will throw errors as unknow attribute
+      />
+      <button
+        onClick={() => {
+          const input = document.getElementById('folder-import');
+          input?.click();
+        }}
+        className={className}
+      >
+        <div className="i-ph:folder-simple-upload" />
+        Import Folder
+      </button>
+    </>
+  );
+};

From f94165a421a0c97ef2b2d733e8739baf9f3cc6f9 Mon Sep 17 00:00:00 2001
From: Sujal Shah <sujal@zuru.com>
Date: Mon, 25 Nov 2024 14:00:18 +0530
Subject: [PATCH 15/23] fix: silent eslint issues

---
 app/components/chat/BaseChat.tsx | 3 ---
 app/lib/runtime/action-runner.ts | 5 ++---
 app/utils/constants.ts           | 6 +++---
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 1a33375..19daf5b 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -29,9 +29,6 @@ const EXAMPLE_PROMPTS = [
   { text: 'How do I center a div?' },
 ];
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const providerList = PROVIDER_LIST;
-
 // @ts-ignore TODO: Introduce proper types
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList, apiKeys }) => {
diff --git a/app/lib/runtime/action-runner.ts b/app/lib/runtime/action-runner.ts
index ca78a74..13b17ef 100644
--- a/app/lib/runtime/action-runner.ts
+++ b/app/lib/runtime/action-runner.ts
@@ -93,14 +93,13 @@ export class ActionRunner {
 
     this.#updateAction(actionId, { ...action, ...data.action, executed: !isStreaming });
 
-    // eslint-disable-next-line consistent-return
-    return (this.#currentExecutionPromise = this.#currentExecutionPromise
+    this.#currentExecutionPromise = this.#currentExecutionPromise
       .then(() => {
         this.#executeAction(actionId, isStreaming);
       })
       .catch((error) => {
         console.error('Action failed:', error);
-      }));
+      });
   }
 
   async #executeAction(actionId: string, isStreaming: boolean = false) {
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index de68a82..6645020 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -294,8 +294,8 @@ async function getOllamaModels(): Promise<ModelInfo[]> {
       provider: 'Ollama',
       maxTokenAllowed: 8000,
     }));
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (e) {
+    console.error('Error getting Ollama models:', e);
     return [];
   }
 }
@@ -321,8 +321,8 @@ async function getOpenAILikeModels(): Promise<ModelInfo[]> {
       label: model.id,
       provider: 'OpenAILike',
     }));
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (e) {
+    console.error('Error getting OpenAILike models:', e);
     return [];
   }
 }
@@ -371,8 +371,8 @@ async function getLMStudioModels(): Promise<ModelInfo[]> {
       label: model.id,
       provider: 'LMStudio',
     }));
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (e) {
+    console.error('Error getting LMStudio models:', e);
     return [];
   }
 }

From 12dcb8deb32f3d08075071e33711ecdc94852532 Mon Sep 17 00:00:00 2001
From: Sujal Shah <sujal@zuru.com>
Date: Mon, 25 Nov 2024 17:54:29 +0530
Subject: [PATCH 16/23] fix: add browser environment check for local API calls

---
 app/utils/constants.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 6645020..17fe9d8 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -283,6 +283,10 @@ const getOllamaBaseUrl = () => {
 };
 
 async function getOllamaModels(): Promise<ModelInfo[]> {
+  if (typeof window === 'undefined') {
+    return [];
+  }
+
   try {
     const baseUrl = getOllamaBaseUrl();
     const response = await fetch(`${baseUrl}/api/tags`);
@@ -361,6 +365,10 @@ async function getOpenRouterModels(): Promise<ModelInfo[]> {
 }
 
 async function getLMStudioModels(): Promise<ModelInfo[]> {
+  if (typeof window === 'undefined') {
+    return [];
+  }
+
   try {
     const baseUrl = import.meta.env.LMSTUDIO_API_BASE_URL || 'http://localhost:1234';
     const response = await fetch(`${baseUrl}/v1/models`);

From dafe934d991c1c7f1e8b9eed31c1beb76cb83788 Mon Sep 17 00:00:00 2001
From: SujalXplores <shahc9437@gmail.com>
Date: Mon, 25 Nov 2024 20:43:56 +0530
Subject: [PATCH 17/23] fix: sidebar scroll always showing up

---
 app/components/sidebar/Menu.client.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/sidebar/Menu.client.tsx b/app/components/sidebar/Menu.client.tsx
index 5becf82..d753d24 100644
--- a/app/components/sidebar/Menu.client.tsx
+++ b/app/components/sidebar/Menu.client.tsx
@@ -129,7 +129,7 @@ export function Menu() {
           </a>
         </div>
         <div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
-        <div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
+        <div className="flex-1 overflow-auto pl-4 pr-5 pb-5">
           {list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
           <DialogRoot open={dialogContent !== null}>
             {binDates(list).map(({ category, items }) => (

From b8b25baf5c645afd8e0fd93f5fa649059c2759a8 Mon Sep 17 00:00:00 2001
From: SujalXplores <shahc9437@gmail.com>
Date: Mon, 25 Nov 2024 20:46:17 +0530
Subject: [PATCH 18/23] refactor: improve history item hover states and
 interactions

---
 app/components/sidebar/HistoryItem.tsx | 99 +++++++++-----------------
 1 file changed, 33 insertions(+), 66 deletions(-)

diff --git a/app/components/sidebar/HistoryItem.tsx b/app/components/sidebar/HistoryItem.tsx
index 3f58735..4c28435 100644
--- a/app/components/sidebar/HistoryItem.tsx
+++ b/app/components/sidebar/HistoryItem.tsx
@@ -1,5 +1,4 @@
 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';
 
@@ -11,78 +10,46 @@ interface HistoryItemProps {
 }
 
 export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: HistoryItemProps) {
-  const [hovering, setHovering] = useState(false);
-  const hoverRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    let timeout: NodeJS.Timeout | undefined;
-
-    function mouseEnter() {
-      setHovering(true);
-
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    }
-
-    function mouseLeave() {
-      setHovering(false);
-    }
-
-    hoverRef.current?.addEventListener('mouseenter', mouseEnter);
-    hoverRef.current?.addEventListener('mouseleave', mouseLeave);
-
-    return () => {
-      hoverRef.current?.removeEventListener('mouseenter', mouseEnter);
-      hoverRef.current?.removeEventListener('mouseleave', mouseLeave);
-    };
-  }, []);
-
   return (
-    <div
-      ref={hoverRef}
-      className="group rounded-md text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 overflow-hidden flex justify-between items-center px-2 py-1"
-    >
+    <div className="group rounded-md text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 overflow-hidden flex justify-between items-center px-2 py-1">
       <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 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">
+          <div className="flex items-center p-1 text-bolt-elements-textSecondary opacity-0 group-hover:opacity-100 transition-opacity">
+            <WithTooltip tooltip="Export chat">
+              <button
+                type="button"
+                className="i-ph:download-simple scale-110 mr-2 hover:text-bolt-elements-item-contentAccent"
+                onClick={(event) => {
+                  event.preventDefault();
+                  exportChat(item.id);
+                }}
+                title="Export chat"
+              />
+            </WithTooltip>
+            {onDuplicate && (
+              <WithTooltip tooltip="Duplicate 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"
+                  type="button"
+                  className="i-ph:copy scale-110 mr-2 hover:text-bolt-elements-item-contentAccent"
+                  onClick={() => onDuplicate?.(item.id)}
+                  title="Duplicate 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) => {
-                      // we prevent the default so we don't trigger the anchor above
-                      event.preventDefault();
-                      onDelete?.(event);
-                    }}
-                  />
-                </WithTooltip>
-              </Dialog.Trigger>
-            </div>
-          )}
+            )}
+            <Dialog.Trigger asChild>
+              <WithTooltip tooltip="Delete chat">
+                <button
+                  type="button"
+                  className="i-ph:trash scale-110 hover:text-bolt-elements-button-danger-text"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    onDelete?.(event);
+                  }}
+                />
+              </WithTooltip>
+            </Dialog.Trigger>
+          </div>
         </div>
       </a>
     </div>

From 0ebd4a6a3870923faed67d035b71eca0bcf92f50 Mon Sep 17 00:00:00 2001
From: SujalXplores <shahc9437@gmail.com>
Date: Mon, 25 Nov 2024 20:46:49 +0530
Subject: [PATCH 19/23] fix: tooltip UI

---
 app/components/ui/Tooltip.tsx | 58 +++++++++++++++++++++++++++--------
 1 file changed, 46 insertions(+), 12 deletions(-)

diff --git a/app/components/ui/Tooltip.tsx b/app/components/ui/Tooltip.tsx
index 73ababb..4e22f54 100644
--- a/app/components/ui/Tooltip.tsx
+++ b/app/components/ui/Tooltip.tsx
@@ -1,14 +1,15 @@
-import React from 'react';
 import * as Tooltip from '@radix-ui/react-tooltip';
-import type { ReactNode } from 'react';
 
-interface ToolTipProps {
-  tooltip: string;
-  children: ReactNode | ReactNode[];
+interface TooltipProps {
+  tooltip: React.ReactNode;
+  children: React.ReactNode;
   sideOffset?: number;
   className?: string;
   arrowClassName?: string;
-  tooltipStyle?: any; //TODO better type
+  tooltipStyle?: React.CSSProperties;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  maxWidth?: number;
+  delay?: number;
 }
 
 const WithTooltip = ({
@@ -18,18 +19,51 @@ const WithTooltip = ({
   className = '',
   arrowClassName = '',
   tooltipStyle = {},
-}: ToolTipProps) => {
+  position = 'top',
+  maxWidth = 250,
+  delay = 0,
+}: TooltipProps) => {
   return (
-    <Tooltip.Root>
+    <Tooltip.Root delayDuration={delay}>
       <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}`}
+          side={position}
+          className={`
+            z-[2000]
+            px-2.5
+            py-1.5
+            max-h-[300px]
+            select-none
+            rounded-md
+            bg-bolt-elements-background-depth-3
+            text-bolt-elements-textPrimary
+            text-sm
+            leading-tight
+            shadow-lg
+            animate-in
+            fade-in-0
+            zoom-in-95
+            data-[state=closed]:animate-out
+            data-[state=closed]:fade-out-0
+            data-[state=closed]:zoom-out-95
+            ${className}
+          `}
           sideOffset={sideOffset}
-          style={{ zIndex: 2000, backgroundColor: 'white', ...tooltipStyle }}
+          style={{
+            maxWidth,
+            ...tooltipStyle,
+          }}
         >
-          {tooltip}
-          <Tooltip.Arrow className={`fill-bolt-elements-tooltip-background ${arrowClassName}`} />
+          <div className="break-words">{tooltip}</div>
+          <Tooltip.Arrow
+            className={`
+              fill-bolt-elements-background-depth-3
+              ${arrowClassName}
+            `}
+            width={12}
+            height={6}
+          />
         </Tooltip.Content>
       </Tooltip.Portal>
     </Tooltip.Root>

From 23df7ae1b660f6dd4d05d59fb0cadbc0b8e93e83 Mon Sep 17 00:00:00 2001
From: Cole Medin <cole@dynamous.ai>
Date: Mon, 25 Nov 2024 09:29:50 -0600
Subject: [PATCH 20/23] Created FAQ at bottom of README

---
 CONTRIBUTING.md |  7 ++-----
 README.md       | 47 +++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0f7744a..4e260d9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,9 +1,6 @@
-# Contributing to Bolt.new Fork
-## DEFAULT_NUM_CTX
+# Contributing to oTToDev
 
-The `DEFAULT_NUM_CTX` environment variable can be used to limit the maximum number of context values used by the qwen2.5-coder model. For example, to limit the context to 24576 values (which uses 32GB of VRAM), set `DEFAULT_NUM_CTX=24576` in your `.env.local` file.
-
-First off, thank you for considering contributing to Bolt.new! This fork aims to expand the capabilities of the original project by integrating multiple LLM providers and enhancing functionality. Every contribution helps make Bolt.new a better tool for developers worldwide.
+First off, thank you for considering contributing to oTToDev! This fork aims to expand the capabilities of the original project by integrating multiple LLM providers and enhancing functionality. Every contribution helps make oTToDev a better tool for developers worldwide.
 
 ## 📋 Table of Contents
 - [Code of Conduct](#code-of-conduct)
diff --git a/README.md b/README.md
index f952e0a..5a67294 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,8 @@ https://thinktank.ottomator.ai
 - ✅ Bolt terminal to see the output of LLM run commands (@thecodacus)
 - ✅ Streaming of code output (@thecodacus)
 - ✅ Ability to revert code to earlier version (@wonderwhy-er)
+- ✅ Cohere Integration (@hasanraiyan)
+- ✅ Dynamic model max token length (@hasanraiyan)
 - ⬜ **HIGH PRIORITY** - Prevent Bolt from rewriting files as often (file locking and diffs)
 - ⬜ **HIGH PRIORITY** - Better prompting for smaller LLMs (code window sometimes doesn't start)
 - ⬜ **HIGH PRIORITY** - Load local projects into the app
@@ -39,8 +41,6 @@ https://thinktank.ottomator.ai
 - ⬜ Azure Open AI API Integration
 - ⬜ Perplexity Integration
 - ⬜ Vertex AI Integration
-- ✅ Cohere Integration (@hasanraiyan)
-- ✅ Dynamic model max token length (@hasanraiyan)
 - ⬜ Deploy directly to Vercel/Netlify/other similar platforms
 - ⬜ Prompt caching
 - ⬜ Better prompt enhancing
@@ -246,14 +246,49 @@ pnpm run dev
 
 This will start the Remix Vite development server. You will need Google Chrome Canary to run this locally if you use Chrome! It's an easy install and a good browser for web development anyway.
 
-## Tips and Tricks
+## FAQ
 
-Here are some tips to get the most out of Bolt.new:
+### How do I get the best results with oTToDev?
 
 - **Be specific about your stack**: If you want to use specific frameworks or libraries (like Astro, Tailwind, ShadCN, or any other popular JavaScript framework), mention them in your initial prompt to ensure Bolt scaffolds the project accordingly.
 
 - **Use the enhance prompt icon**: Before sending your prompt, try clicking the 'enhance' icon to have the AI model help you refine your prompt, then edit the results before submitting.
 
-- **Scaffold the basics first, then add features**: Make sure the basic structure of your application is in place before diving into more advanced functionality. This helps Bolt understand the foundation of your project and ensure everything is wired up right before building out more advanced functionality.
+- **Scaffold the basics first, then add features**: Make sure the basic structure of your application is in place before diving into more advanced functionality. This helps oTToDev understand the foundation of your project and ensure everything is wired up right before building out more advanced functionality.
 
-- **Batch simple instructions**: Save time by combining simple instructions into one message. For example, you can ask Bolt to change the color scheme, add mobile responsiveness, and restart the dev server, all in one go saving you time and reducing API credit consumption significantly.
+- **Batch simple instructions**: Save time by combining simple instructions into one message. For example, you can ask oTToDev to change the color scheme, add mobile responsiveness, and restart the dev server, all in one go saving you time and reducing API credit consumption significantly.
+
+### How do I contribute to oTToDev?
+
+[Please check out our dedicated page for contributing to oTToDev here!](CONTRIBUTING.md)
+
+### Do you plan on merging oTToDev back into the official Bolt.new repo?
+
+More news coming on this coming early next month - stay tuned!
+
+### Why are there so many open issues/pull requests?
+
+oTToDev was started simply to showcase how to edit an open source project and to do something cool with local LLMs on my (@ColeMedin) YouTube channel! However, it quickly
+grew into a massive community project that I am working hard to keep up with the demand of by forming a team of maintainers and getting as many people involved as I can.
+That effort is going well and all of our maintainers are ABSOLUTE rockstars, but it still takes time to organize everything so we can efficiently get through all
+the issues and PRs. But rest assured, we are working hard and even working on some partnerships behind the scenes to really help this project take off!
+
+### How do local LLMs fair compared to larger models like Claude 3.5 Sonnet for oTToDev/Bolt.new?
+
+As much as the gap is quickly closing between open source and massive close source models, you’re still going to get the best results with the very large models like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b. This is one of the big tasks we have at hand - figuring out how to prompt better, use agents, and improve the platform as a whole to make it work better for even the smaller local LLMs!
+
+### I'm getting the error: "There was an error processing this request"
+
+If you see this error within oTToDev, that is just the application telling you there is a problem at a high level, and this could mean a number of different things. To find the actual error, please check BOTH the terminal where you started the application (with Docker or pnpm) and the developer console in the browser. For most browsers, you can access the developer console by pressing F12 or right clicking anywhere in the browser and selecting “Inspect”. Then go to the “console” tab in the top right.
+
+### I'm getting the error: "x-api-key header missing"
+
+We have seen this error a couple times and for some reason just restarting the Docker container has fixed it. This seems to be Ollama specific. Another thing to try is try to run oTToDev with Docker or pnpm, whichever you didn’t run first. We are still on the hunt for why this happens once and a while!
+
+### I'm getting a blank preview when oTToDev runs my app!
+
+We promise you that we are constantly testing new PRs coming into oTToDev and the preview is core functionality, so the application is not broken! When you get a blank preview or don’t get a preview, this is generally because the LLM hallucinated bad code or incorrect commands. We are working on making this more transparent so it is obvious. Sometimes the error will appear in developer console too so check that as well.
+
+### Everything works but the results are bad
+
+This goes to the point above about how local LLMs are getting very powerful but you still are going to see better (sometimes much better) results with the largest LLMs like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b. If you are using smaller LLMs like Qwen-2.5-Coder, consider it more experimental and educational at this point. It can build smaller applications really well, which is super impressive for a local LLM, but for larger scale applications you want to use the larger LLMs still!

From 66ef47cf73a35f411ce5172f5bc32ac1b5144ac2 Mon Sep 17 00:00:00 2001
From: Cole Medin <47287758+coleam00@users.noreply.github.com>
Date: Mon, 25 Nov 2024 09:40:52 -0600
Subject: [PATCH 21/23] Added roadmap to README FAQ

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 5a67294..0127dd0 100644
--- a/README.md
+++ b/README.md
@@ -266,6 +266,12 @@ This will start the Remix Vite development server. You will need Google Chrome C
 
 More news coming on this coming early next month - stay tuned!
 
+### What are the future plans for oTToDev?
+
+[Check out our Roadmap here!](https://roadmap.sh/r/ottodev-roadmap-2ovzo)
+
+Lot more updates to this roadmap coming soon!
+
 ### Why are there so many open issues/pull requests?
 
 oTToDev was started simply to showcase how to edit an open source project and to do something cool with local LLMs on my (@ColeMedin) YouTube channel! However, it quickly

From 050bf2028fc143bb76eb7fe2efb998018efac9c7 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Mon, 25 Nov 2024 19:50:01 +0200
Subject: [PATCH 22/23] Added parsing if ignore file and added handling of
 binary files

---
 app/components/chat/ImportFolderButton.tsx | 74 ++++++++++++++++++++--
 app/utils/logger.ts                        |  2 +-
 package.json                               |  1 +
 pnpm-lock.yaml                             |  9 +++
 4 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/app/components/chat/ImportFolderButton.tsx b/app/components/chat/ImportFolderButton.tsx
index 1444580..5f822ee 100644
--- a/app/components/chat/ImportFolderButton.tsx
+++ b/app/components/chat/ImportFolderButton.tsx
@@ -1,22 +1,55 @@
 import React from 'react';
 import type { Message } from 'ai';
 import { toast } from 'react-toastify';
+import ignore from 'ignore';
 
 interface ImportFolderButtonProps {
   className?: string;
   importChat?: (description: string, messages: Message[]) => Promise<void>;
 }
 
-const IGNORED_FOLDERS = ['node_modules', '.git', 'dist', 'build', '.next', 'coverage', '.cache', '.vscode', '.idea'];
+// Common patterns to ignore, similar to .gitignore
+const IGNORE_PATTERNS = [
+  'node_modules/**',
+  '.git/**',
+  'dist/**',
+  'build/**',
+  '.next/**',
+  'coverage/**',
+  '.cache/**',
+  '.vscode/**',
+  '.idea/**',
+  '**/*.log',
+  '**/.DS_Store',
+  '**/npm-debug.log*',
+  '**/yarn-debug.log*',
+  '**/yarn-error.log*',
+];
 
+const ig = ignore().add(IGNORE_PATTERNS);
 const generateId = () => Math.random().toString(36).substring(2, 15);
 
+const isBinaryFile = async (file: File): Promise<boolean> => {
+  const chunkSize = 1024; // Read the first 1 KB of the file
+  const buffer = new Uint8Array(await file.slice(0, chunkSize).arrayBuffer());
+
+  for (let i = 0; i < buffer.length; i++) {
+    const byte = buffer[i];
+
+    if (byte === 0 || (byte < 32 && byte !== 9 && byte !== 10 && byte !== 13)) {
+      return true; // Found a binary character
+    }
+  }
+
+  return false;
+};
+
 export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ className, importChat }) => {
   const shouldIncludeFile = (path: string): boolean => {
-    return !IGNORED_FOLDERS.some((folder) => path.includes(`/${folder}/`));
+    return !ig.ignores(path);
   };
 
-  const createChatFromFolder = async (files: File[]) => {
+  const createChatFromFolder = async (files: File[], binaryFiles: string[]) => {
     const fileArtifacts = await Promise.all(
       files.map(async (file) => {
         return new Promise<string>((resolve, reject) => {
@@ -37,9 +70,14 @@ ${content}
       }),
     );
 
+    const binaryFilesMessage =
+      binaryFiles.length > 0
+        ? `\n\nSkipped ${binaryFiles.length} binary files:\n${binaryFiles.map((f) => `- ${f}`).join('\n')}`
+        : '';
+
     const message: Message = {
       role: 'assistant',
-      content: `I'll help you set up these files.
+      content: `I'll help you set up these files.${binaryFilesMessage}
 
 <boltArtifact id="imported-files" title="Imported Files">
 ${fileArtifacts.join('\n\n')}
@@ -74,8 +112,34 @@ ${fileArtifacts.join('\n\n')}
           const allFiles = Array.from(e.target.files || []);
           const filteredFiles = allFiles.filter((file) => shouldIncludeFile(file.webkitRelativePath));
 
+          if (filteredFiles.length === 0) {
+            toast.error('No files found in the selected folder');
+            return;
+          }
+
           try {
-            await createChatFromFolder(filteredFiles);
+            const fileChecks = await Promise.all(
+              filteredFiles.map(async (file) => ({
+                file,
+                isBinary: await isBinaryFile(file),
+              })),
+            );
+
+            const textFiles = fileChecks.filter((f) => !f.isBinary).map((f) => f.file);
+            const binaryFilePaths = fileChecks
+              .filter((f) => f.isBinary)
+              .map((f) => f.file.webkitRelativePath.split('/').slice(1).join('/'));
+
+            if (textFiles.length === 0) {
+              toast.error('No text files found in the selected folder');
+              return;
+            }
+
+            if (binaryFilePaths.length > 0) {
+              toast.info(`Skipping ${binaryFilePaths.length} binary files`);
+            }
+
+            await createChatFromFolder(textFiles, binaryFilePaths);
           } catch (error) {
             console.error('Failed to import folder:', error);
             toast.error('Failed to import folder');
diff --git a/app/utils/logger.ts b/app/utils/logger.ts
index 9b2c31c..1a5c932 100644
--- a/app/utils/logger.ts
+++ b/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;
diff --git a/package.json b/package.json
index 16c59f7..ad98403 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "diff": "^5.2.0",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.2.12",
+    "ignore": "^6.0.2",
     "isbot": "^4.1.0",
     "istextorbinary": "^9.5.0",
     "jose": "^5.6.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 951d1a4..1c92ad2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -143,6 +143,9 @@ importers:
       framer-motion:
         specifier: ^11.2.12
         version: 11.2.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      ignore:
+        specifier: ^6.0.2
+        version: 6.0.2
       isbot:
         specifier: ^4.1.0
         version: 4.4.0
@@ -3399,6 +3402,10 @@ packages:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
 
+  ignore@6.0.2:
+    resolution: {integrity: sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==}
+    engines: {node: '>= 4'}
+
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
@@ -9290,6 +9297,8 @@ snapshots:
 
   ignore@5.3.1: {}
 
+  ignore@6.0.2: {}
+
   immediate@3.0.6: {}
 
   immutable@4.3.7: {}

From 15d490dda4503640f613f2dbf50927686a18fdc8 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Mon, 25 Nov 2024 19:57:53 +0200
Subject: [PATCH 23/23] Merge with master fixes

---
 app/components/chat/BaseChat.tsx                           | 5 ++---
 .../{ImportButton.tsx => ImportButtons.tsx}                | 7 ++++++-
 2 files changed, 8 insertions(+), 4 deletions(-)
 rename app/components/chat/chatExportAndImport/{ImportButton.tsx => ImportButtons.tsx} (82%)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 360d38d..0760078 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -19,9 +19,8 @@ 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/chatExportAndImport/ExportChatButton';
-import { ImportButton } from '~/components/chat/chatExportAndImport/ImportButton';
+import { ImportButtons } from '~/components/chat/chatExportAndImport/ImportButtons';
 import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
-import { ImportFolderButton } from '~/components/chat/ImportFolderButton';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const providerList = PROVIDER_LIST;
@@ -311,7 +310,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 </div>
               </div>
             </div>
-            {!chatStarted && ImportButton(importChat)}
+            {!chatStarted && ImportButtons(importChat)}
             {!chatStarted && ExamplePrompts(sendMessage)}
           </div>
           <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
diff --git a/app/components/chat/chatExportAndImport/ImportButton.tsx b/app/components/chat/chatExportAndImport/ImportButtons.tsx
similarity index 82%
rename from app/components/chat/chatExportAndImport/ImportButton.tsx
rename to app/components/chat/chatExportAndImport/ImportButtons.tsx
index 91c699e..2b59574 100644
--- a/app/components/chat/chatExportAndImport/ImportButton.tsx
+++ b/app/components/chat/chatExportAndImport/ImportButtons.tsx
@@ -1,8 +1,9 @@
 import type { Message } from 'ai';
 import { toast } from 'react-toastify';
 import React from 'react';
+import { ImportFolderButton } from '~/components/chat/ImportFolderButton';
 
-export function ImportButton(importChat: ((description: string, messages: Message[]) => Promise<void>) | undefined) {
+export function ImportButtons(importChat: ((description: string, messages: Message[]) => Promise<void>) | undefined) {
   return (
     <div className="flex flex-col items-center justify-center flex-1 p-4">
       <input
@@ -59,6 +60,10 @@ export function ImportButton(importChat: ((description: string, messages: Messag
             <div className="i-ph:upload-simple" />
             Import Chat
           </button>
+          <ImportFolderButton
+            importChat={importChat}
+            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>
       </div>
     </div>