enhance: fix the assistant name to the top of the chat screen

Signed-off-by: Donnie Adams <[email protected]>

Author: thedadams

app/page.tsx

@@ -33,9 +33,7 @@ function RunFile() {
         >
           <div className="w-full h-full flex pb-10">
             <Threads />
-            <div className="mx-auto w-[75%] 2xl:w-[55%] 3xl:[w-50%]">
-              <Script enableThreads showAssistantName className="pb-10" />
-            </div>
+            <Script enableThreads showAssistantName className="pb-10" />
           </div>
         </div>
       </section>

components/script.tsx

@@ -106,7 +106,7 @@ const Script: React.FC<ScriptProps> = ({
         <>
           <div
             id="small-message"
-            className={`px-6 pt-10 overflow-y-auto w-full items-center ${messagesHeight}`}
+            className={`overflow-y-auto w-full items-center ${messagesHeight}`}
           >
             {showForm && hasParams ? (
               <ToolForm
@@ -117,9 +117,11 @@ const Script: React.FC<ScriptProps> = ({
             ) : (
               <div>
                 {showAssistantName && (
-                  <h1 className="mb-10 text-2xl font-medium truncate">
-                    {scriptDisplayName ?? ''}
-                  </h1>
+                  <div className="sticky top-0 p-4 z-50 bg-background">
+                    <h1 className="text-2xl font-medium truncate">
+                      {scriptDisplayName ?? ''}
+                    </h1>
+                  </div>
                 )}
                 <Messages restart={restartScript} messages={messages} />
               </div>

components/script/chatBar.tsx

@@ -96,7 +96,7 @@ const ChatBar = ({ disabled = false, onMessageSent }: ChatBarProps) => {
   }
 
   return (
-    <div className="flex px-4 space-x-2 sw-full">
+    <div className="flex px-4 space-x-2 sw-full mx-auto 2xl:w-[75%]">
       <Button
         isIconOnly
         startContent={<GoKebabHorizontal />}

components/script/messages.tsx

@@ -163,7 +163,7 @@ const Messages = ({
   noAvatar?: boolean;
   restart?: () => void;
 }) => (
-  <div>
+  <div className="mx-auto px-6 2xl:w-[75%]">
     {messages.map((message, index) => (
       <Message
         key={index}

components/threads.tsx

@@ -34,7 +34,7 @@ const Threads: React.FC<ThreadsProps> = () => {
 
   return (
     <div
-      className={`relative p-4 overflow-y-auto ${isCollapsed ? 'border-none' : 'border-r-1 dark:border-r-zinc-800'}`}
+      className={`min-w-fit relative p-4 overflow-y-auto ${isCollapsed ? 'border-none' : 'border-r-1 dark:border-r-zinc-800'}`}
     >
       <div className={`flex justify-between items-center mb-2`}>
         <Tooltip
@@ -57,7 +57,7 @@ const Threads: React.FC<ThreadsProps> = () => {
       </div>
       <div
         style={{
-          width: isCollapsed ? '50px' : '250px',
+          width: isCollapsed ? '50px' : 'max-w-[300px]',
           transition: 'width 0.3s ease-in-out',
         }}
       >