From ade590af80884777911fa62be8f0cbc14700238b Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <rhopperlowe@gmail.com>
Date: Thu, 12 Sep 2024 15:15:56 -0500
Subject: [PATCH] fix: revert chat box to follow responsive design

---
 app/page.tsx        |  8 +++++++-
 components/chat.tsx | 17 ++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index d85e2c0..1d4aab2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -32,7 +32,13 @@ function RunFile() {
         <Threads onOpenExplore={onOpen} />
 
         <div className="flex-auto overflow-hidden">
-          <Chat showAssistantName />
+          <Chat
+            showAssistantName
+            classNames={{
+              chatBar: 'w-full mx-auto lg:w-3/4 2xl:w-1/2',
+              messages: 'w-full mx-auto lg:w-3/4 2xl:w-1/2',
+            }}
+          />
         </div>
       </div>
       <ExploreModal isOpen={isOpen} onOpen={onOpen} onClose={onClose} />
diff --git a/components/chat.tsx b/components/chat.tsx
index 1260670..dec6c1c 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -22,9 +22,14 @@ import KnowledgeDropdown from '@/components/scripts/knowledge-dropdown';
 import SaveScriptDropdown from '@/components/scripts/script-save';
 import { Tool } from '@gptscript-ai/gptscript';
 import { rootTool } from '@/actions/gptscript';
+import clsx from 'clsx';
 
 interface ScriptProps {
   className?: string;
+  classNames?: {
+    chatBar?: string;
+    messages?: string;
+  };
   messagesHeight?: string;
   showAssistantName?: boolean;
   inputPlaceholder?: string;
@@ -41,6 +46,7 @@ const Chat: React.FC<ScriptProps> = ({
   disableInput = false,
   disableCommands = false,
   noChat = false,
+  classNames = {},
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, _setInputValue] = useState<string>('');
@@ -153,7 +159,7 @@ const Chat: React.FC<ScriptProps> = ({
             ) : (
               <>
                 {showAssistantName && scriptDisplayName && (
-                  <div className="sticky top-0 p-4 z-50 bg-background">
+                  <div className="sticky top-0 p-4 z-50  bg-background">
                     <h1 className="text-3xl font-medium truncate">
                       {scriptDisplayName ?? ''}
                     </h1>
@@ -165,7 +171,7 @@ const Chat: React.FC<ScriptProps> = ({
                   </div>
                 )}
 
-                <div className="flex-auto">
+                <div className={clsx('flex-auto', classNames.messages)}>
                   <Messages
                     restart={restartScript}
                     messages={messages}
@@ -175,7 +181,12 @@ const Chat: React.FC<ScriptProps> = ({
               </>
             )}
 
-            <div className="w-full sticky bottom-0 bg-background pb-4">
+            <div
+              className={clsx(
+                'w-full sticky bottom-0 bg-background pb-4',
+                classNames.chatBar
+              )}
+            >
               {showForm && hasParams ? (
                 <Button
                   className="mt-4 w-full"