Small change to make review easier

app/components/chat/BaseChat.tsx

@@ -168,8 +168,68 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
-    return (
+    const chatImportButton = !chatStarted && (
-      <Tooltip.Provider delayDuration={200}>
+      <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(
@@ -179,10 +239,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         data-chat-visible={showChat}
       >
         <ClientOnly>{() => <Menu />}</ClientOnly>
-          <div ref={scrollRef} className="flex flex-col lg:flex-rowoverflow-y-auto w-full h-full">
+        <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-centerpx-4 lg:px-0">
+              <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>
@@ -210,7 +270,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
               </ClientOnly>
               <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',
+                  ' 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,
                   },
@@ -226,6 +286,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   providerList={PROVIDER_LIST}
                   apiKeys={apiKeys}
                 />
+
                 {provider && (
                   <APIKeyManager
                     provider={provider}
@@ -308,76 +369,16 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     </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>{' '}
+                        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>{' '}
+                        <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> for
-                          for a new line
+                        a new line
                       </div>
                     ) : null}
                   </div>
                 </div>
-                  <div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
               </div>
             </div>
-              {!chatStarted && (
+            {chatImportButton}
-                <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]">
@@ -402,7 +403,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
           <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
         </div>
       </div>
-      </Tooltip.Provider>
     );
+
+    return <Tooltip.Provider delayDuration={200}>{baseChat}</Tooltip.Provider>;
   },
 );