From 7da88af0d676a460c8f17bc195c65d140b65099d Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Tue, 26 Nov 2024 12:31:25 +0200
Subject: [PATCH] Extract chat box from base chat

---
 app/components/chat/BaseChat.tsx | 182 ++++-----------------------
 app/components/chat/ChatBox.tsx  | 205 +++++++++++++++++++++++++++++++
 2 files changed, 230 insertions(+), 157 deletions(-)
 create mode 100644 app/components/chat/ChatBox.tsx

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index dc6aecc8f..74ea8cad2 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -6,62 +6,18 @@ import type { Message } from 'ai';
 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';
 import { Workbench } from '~/components/workbench/Workbench.client';
 import { classNames } from '~/utils/classNames';
-import { MODEL_LIST, PROVIDER_LIST, initializeModelList } from '~/utils/constants';
+import { MODEL_LIST, initializeModelList } from '~/utils/constants';
 import { Messages } from './Messages.client';
-import { SendButton } from './SendButton.client';
-import { APIKeyManager } from './APIKeyManager';
 import Cookies from 'js-cookie';
 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 { ImportButtons } from '~/components/chat/chatExportAndImport/ImportButtons';
 import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
-
-// @ts-ignore TODO: Introduce proper types
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList, apiKeys }) => {
-  return (
-    <div className="mb-2 flex gap-2 flex-col sm:flex-row">
-      <select
-        value={provider?.name}
-        onChange={(e) => {
-          setProvider(providerList.find((p: ProviderInfo) => p.name === e.target.value));
-
-          const firstModel = [...modelList].find((m) => m.provider == e.target.value);
-          setModel(firstModel ? firstModel.name : '');
-        }}
-        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
-      >
-        {providerList.map((provider: ProviderInfo) => (
-          <option key={provider.name} value={provider.name}>
-            {provider.name}
-          </option>
-        ))}
-      </select>
-      <select
-        key={provider?.name}
-        value={model}
-        onChange={(e) => setModel(e.target.value)}
-        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all lg:max-w-[70%] "
-      >
-        {[...modelList]
-          .filter((e) => e.provider == provider?.name && e.name)
-          .map((modelOption) => (
-            <option key={modelOption.name} value={modelOption.name}>
-              {modelOption.label}
-            </option>
-          ))}
-      </select>
-    </div>
-  );
-};
-
-const TEXTAREA_MIN_HEIGHT = 76;
+import { ChatBox } from '~/components/chat/ChatBox';
 
 interface BaseChatProps {
   textareaRef?: React.RefObject<HTMLTextAreaElement> | undefined;
@@ -197,118 +153,30 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   ) : null;
                 }}
               </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',
-                  {
-                    'sticky bottom-2': chatStarted,
-                  },
-                )}
-              >
-                <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(
-                    '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;
-                        }
-
-                        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>
-                      {chatStarted && <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>
-              </div>
+              <ChatBox
+                chatStarted={chatStarted}
+                provider={provider}
+                modelList={modelList}
+                model={model}
+                setModel={setModel}
+                setProvider={setProvider}
+                apiKeys={apiKeys}
+                updateApiKey={updateApiKey}
+                textareaRef={textareaRef}
+                sendMessage={sendMessage}
+                input={input}
+                handleInputChange={handleInputChange}
+                textAreaMaxHeight={TEXTAREA_MAX_HEIGHT}
+                isStreaming={isStreaming}
+                handleStop={handleStop}
+                enhancingPrompt={enhancingPrompt}
+                promptEnhanced={promptEnhanced}
+                enhancePrompt={enhancePrompt}
+                exportChat={exportChat}
+              />
             </div>
-            {!chatStarted && ImportButtons(importChat)}
-            {!chatStarted && ExamplePrompts(sendMessage)}
+            {!chatStarted && importChat && ImportButtons(importChat)}
+            {!chatStarted && sendMessage && ExamplePrompts(sendMessage)}
           </div>
           <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
         </div>
diff --git a/app/components/chat/ChatBox.tsx b/app/components/chat/ChatBox.tsx
new file mode 100644
index 000000000..b47118e56
--- /dev/null
+++ b/app/components/chat/ChatBox.tsx
@@ -0,0 +1,205 @@
+import type { ModelInfo, ProviderInfo } from '~/utils/types';
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+import { PROVIDER_LIST } from '~/utils/constants';
+import { APIKeyManager } from '~/components/chat/APIKeyManager';
+import { SendButton } from '~/components/chat/SendButton.client';
+import { IconButton } from '~/components/ui/IconButton';
+import { ExportChatButton } from '~/components/chat/chatExportAndImport/ExportChatButton';
+import { ClientOnly } from 'remix-utils/client-only';
+
+const TEXTAREA_MIN_HEIGHT = 76;
+
+// @ts-ignore TODO: Introduce proper types
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList, apiKeys }) => {
+  return (
+    <div className="mb-2 flex gap-2 flex-col sm:flex-row">
+      <select
+        value={provider?.name}
+        onChange={(e) => {
+          setProvider(providerList.find((p: ProviderInfo) => p.name === e.target.value));
+
+          const firstModel = [...modelList].find((m) => m.provider == e.target.value);
+          setModel(firstModel ? firstModel.name : '');
+        }}
+        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
+      >
+        {providerList.map((provider: ProviderInfo) => (
+          <option key={provider.name} value={provider.name}>
+            {provider.name}
+          </option>
+        ))}
+      </select>
+      <select
+        key={provider?.name}
+        value={model}
+        onChange={(e) => setModel(e.target.value)}
+        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all lg:max-w-[70%] "
+      >
+        {[...modelList]
+          .filter((e) => e.provider == provider?.name && e.name)
+          .map((modelOption) => (
+            <option key={modelOption.name} value={modelOption.name}>
+              {modelOption.label}
+            </option>
+          ))}
+      </select>
+    </div>
+  );
+};
+
+export interface ChatBoxProps {
+  chatStarted: boolean;
+  provider: ProviderInfo | undefined;
+  modelList: ModelInfo[];
+  model: string | undefined;
+  setModel: ((model: string) => void) | undefined;
+  setProvider: ((provider: ProviderInfo) => void) | undefined;
+  apiKeys: Record<string, string>;
+  updateApiKey: (provider: string, key: string) => void;
+  textareaRef: React.RefObject<HTMLTextAreaElement> | undefined;
+  sendMessage: ((event: React.UIEvent, messageInput?: string) => void) | undefined;
+  input: string;
+  handleInputChange: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
+  textAreaMaxHeight: number;
+  isStreaming: boolean;
+  handleStop: (() => void) | undefined;
+  enhancingPrompt: boolean;
+  promptEnhanced: boolean;
+  enhancePrompt: (() => void) | undefined;
+  exportChat: (() => void) | undefined;
+}
+
+export function ChatBox({
+                   chatStarted,
+                   provider,
+                   modelList,
+                   model,
+                   setModel,
+                   setProvider,
+                   apiKeys,
+                   updateApiKey,
+                   textareaRef,
+                   sendMessage,
+                   input,
+                   handleInputChange,
+                   textAreaMaxHeight,
+                   isStreaming,
+                   handleStop,
+                   enhancingPrompt,
+                   promptEnhanced,
+                   enhancePrompt,
+                   exportChat,
+                 }: ChatBoxProps) {
+  return (
+    <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,
+        },
+      )}
+    >
+      <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 as ProviderInfo}
+          apiKey={provider?.name ? apiKeys[provider.name] || '' : ''}
+          setApiKey={(key) => provider?.name && 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-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 && sendMessage(event);
+            }
+          }}
+          value={input}
+          onChange={(event) => {
+            handleInputChange?.(event);
+          }}
+          style={{
+            minHeight: TEXTAREA_MIN_HEIGHT,
+            maxHeight: textAreaMaxHeight,
+          }}
+          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 && 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>
+            {chatStarted && <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>
+    </div>
+  );
+}