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] 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>;
   },
 );