fix: apply more solid container scrolling logic

gptscript-ai · Sep 11, 2024 · c1c09be · c1c09be
1 parent 8809ed1
commit c1c09be
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 119 deletions.
diff --git a/app/build/layout.tsx b/app/build/layout.tsx
diff --git a/app/build/page.tsx b/app/build/page.tsx
@@ -20,47 +20,54 @@ export default function Home() {
   useEffect(() => setCurrent('/build'), []);
   if (loading) return <Loading />;
   return (
-    <section className="w-full gap-4 px-20 pt-20">
-      <div className="flex justify-between">
-        <h1 className="text-4xl font-bold text-primary-400">
-          <GoPeople className="inline mb-2 mr-1 text-5xl" /> My Assistants
-        </h1>
-        <div>
-          <Create />
-          <Button
-            isLoading={loading}
-            size="md"
-            startContent={<MdOutlineTravelExplore />}
-            color="primary"
-            variant="flat"
-            className="ml-2"
-            onPress={() => {
-              onOpen();
-            }}
-          >
-            Assistant Catalog
-          </Button>
-        </div>
-      </div>
-      <div className="flex h-5 ml-2 mt-5 items-center space-x-4 text-medium text-zinc-500">
-        <div
-          className={`cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-300 ${!showFavorites ? 'font-bold text-zinc-900 dark:text-white' : ''}`}
-          onClick={() => setShowFavorites(false)}
-        >
-          My Assistants
+    <section className="w-full gap-4 h-full overflow-auto">
+      <div className="sticky top-0 space-y-4 z-20 bg-background px-20 py-5 border-b-1 dark:border-zinc-800">
+        <div className="flex justify-between">
+          <h1 className="text-4xl font-bold text-primary-400">
+            <GoPeople className="inline mb-2 mr-1 text-5xl" /> My Assistants
+          </h1>
+
+          <div>
+            <Create />
+            <Button
+              isLoading={loading}
+              size="md"
+              startContent={<MdOutlineTravelExplore />}
+              color="primary"
+              variant="flat"
+              className="ml-2"
+              onPress={() => {
+                onOpen();
+              }}
+            >
+              Assistant Catalog
+            </Button>
+          </div>
         </div>
-        <Divider orientation="vertical" />
-        <div
-          className={`cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-300 ${showFavorites ? 'font-bold text-zinc-900 dark:text-white' : ''}`}
-          onClick={() => setShowFavorites(true)}
-        >
-          Favorites
+
+        <div className="flex h-5 items-center space-x-4 text-medium text-zinc-500">
+          <div
+            className={`cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-300 ${!showFavorites ? 'font-bold text-zinc-900 dark:text-white' : ''}`}
+            onClick={() => setShowFavorites(false)}
+          >
+            My Assistants
+          </div>
+
+          <Divider orientation="vertical" />
+
+          <div
+            className={`cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-300 ${showFavorites ? 'font-bold text-zinc-900 dark:text-white' : ''}`}
+            onClick={() => setShowFavorites(true)}
+          >
+            Favorites
+          </div>
         </div>
       </div>
 
-      <div className="w-full pt-8 pb-24">
+      <div className="w-full pt-8 pb-24 px-20 h-full">
         <Scripts showFavorites={showFavorites} />
       </div>
+
       <ExploreModal isOpen={isOpen} onOpen={onOpen} onClose={onClose} />
     </section>
   );

diff --git a/app/edit/layout.tsx b/app/edit/layout.tsx
diff --git a/app/edit/page.tsx b/app/edit/page.tsx
@@ -26,7 +26,7 @@ function EditFile() {
     >
       <EditContextProvider scriptPath={file} initialScriptId={scriptId}>
         <div
-          className={`w-full h-full grid ${collapsed ? 'grid-cols-4' : 'grid-cols-2'}`}
+          className={`relative w-full h-full grid ${collapsed ? 'grid-cols-4' : 'grid-cols-2'}`}
         >
           <div className="absolute left-6 top-6">
             <ScriptNav collapsed={collapsed} setCollapsed={setCollapsed} />

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -39,12 +39,12 @@ export default function RootLayout({
         )}
       >
         <Providers themeProps={{ attribute: 'class', defaultTheme: 'dark' }}>
-          <div className="relative flex flex-col h-screen overflow-auto order-transparent">
+          <div className="relative flex flex-col h-screen overflow-hidden order-transparent">
             <Navbar />
-            <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
+
+            <main className="flex-auto border-t-1 dark:border-zinc-800 overflow-hidden">
               {children}
             </main>
-            <footer className="w-full flex items-center justify-center py-3"></footer>
           </div>
         </Providers>
       </body>

diff --git a/app/page.tsx b/app/page.tsx
@@ -28,20 +28,14 @@ function RunFile() {
       initialScriptId={scriptId}
       enableThread={true}
     >
-      <section className="absolute left-0 top-[50px]">
-        <div
-          className="border-t-1 dark:border-zinc-800"
-          style={{ width: `100vw`, height: `calc(100vh - 50px)` }}
-        >
-          <div className="w-full h-full flex pb-10">
-            <Threads onOpenExplore={onOpen} />
-            <div className="mx-auto w-[75%] 2xl:w-[55%] 3xl:[w-50%]">
-              <Chat showAssistantName className="px-4 pb-10" />
-            </div>
-          </div>
+      <div className="w-full h-full flex">
+        <Threads onOpenExplore={onOpen} />
+
+        <div className="flex-auto overflow-hidden">
+          <Chat showAssistantName />
         </div>
-        <ExploreModal isOpen={isOpen} onOpen={onOpen} onClose={onClose} />
-      </section>
+      </div>
+      <ExploreModal isOpen={isOpen} onOpen={onOpen} onClose={onClose} />
     </ChatContextProvider>
   );
 }

diff --git a/components/chat.tsx b/components/chat.tsx
@@ -137,12 +137,12 @@ const Chat: React.FC<ScriptProps> = ({
   };
 
   return (
-    <div className={`h-full w-full ${className}`}>
+    <div className={`h-full w-full overflow-hidden ${className}`}>
       {connected || (showForm && hasParams) ? (
         <>
           <div
             id="small-message"
-            className={`overflow-y-auto w-full items-center ${messagesHeight}`}
+            className={`overflow-auto w-full flex flex-col ${messagesHeight}`}
           >
             {showForm && hasParams ? (
               <ToolForm
@@ -151,7 +151,7 @@ const Chat: React.FC<ScriptProps> = ({
                 handleInputChange={handleInputChange}
               />
             ) : (
-              <div>
+              <>
                 {showAssistantName && scriptDisplayName && (
                   <div className="sticky top-0 p-4 z-50 bg-background">
                     <h1 className="text-3xl font-medium truncate">
@@ -164,37 +164,40 @@ const Chat: React.FC<ScriptProps> = ({
                     </div>
                   </div>
                 )}
-                <Messages
-                  restart={restartScript}
-                  messages={messages}
-                  latestAgentMessage={latestAgentMessage}
-                />
-              </div>
-            )}
-          </div>
 
-          <div className="w-full ">
-            {showForm && hasParams ? (
-              <Button
-                className="mt-4 w-full"
-                type="submit"
-                color={tool.chat ? 'primary' : 'secondary'}
-                onPress={handleFormSubmit}
-                size="lg"
-              >
-                {tool.chat ? 'Start chat' : 'Run script'}
-              </Button>
-            ) : (
-              <ChatBar
-                disableInput={
-                  disableInput || !running || waitingForUserResponse
-                }
-                noChat={noChat}
-                disableCommands={disableCommands}
-                inputPlaceholder={inputPlaceholder}
-                onMessageSent={handleMessageSent}
-              />
+                <div className="flex-auto">
+                  <Messages
+                    restart={restartScript}
+                    messages={messages}
+                    latestAgentMessage={latestAgentMessage}
+                  />
+                </div>
+              </>
             )}
+
+            <div className="w-full sticky bottom-0 bg-background pb-4">
+              {showForm && hasParams ? (
+                <Button
+                  className="mt-4 w-full"
+                  type="submit"
+                  color={tool.chat ? 'primary' : 'secondary'}
+                  onPress={handleFormSubmit}
+                  size="lg"
+                >
+                  {tool.chat ? 'Start chat' : 'Run script'}
+                </Button>
+              ) : (
+                <ChatBar
+                  disableInput={
+                    disableInput || !running || waitingForUserResponse
+                  }
+                  noChat={noChat}
+                  disableCommands={disableCommands}
+                  inputPlaceholder={inputPlaceholder}
+                  onMessageSent={handleMessageSent}
+                />
+              )}
+            </div>
           </div>
         </>
       ) : notFound ? (

diff --git a/components/chat/messages.tsx b/components/chat/messages.tsx
@@ -85,8 +85,9 @@ const Message = React.memo(
                   />
                 </Tooltip>
               )}
+
               <div
-                className={`w-full rounded-2xl text-black dark:text-white pt-1 px-4 border dark:border-none dark:bg-zinc-900 ${
+                className={`flex-auto rounded-2xl text-black dark:text-white pt-1 px-4 border dark:border-none dark:bg-zinc-900 overflow-x-hidden ${
                   message.error ? 'border-danger dark:border-danger' : ''
                 }`}
               >
@@ -192,7 +193,7 @@ const Messages = ({
   noAvatar?: boolean;
   restart?: () => void;
 }) => (
-  <div className="pr-4">
+  <div className="px-4">
     {messages.map((message, index) => (
       <Message
         key={index}

diff --git a/components/edit/configure.tsx b/components/edit/configure.tsx
@@ -350,8 +350,7 @@ const Configure: React.FC<ConfigureProps> = ({ collapsed }) => {
         </div>
       </div>
       <Chat
-        messagesHeight="h-[93%]"
-        className={`p-6 overflow-auto ${collapsed ? 'col-span-3 px-32' : ''}`}
+        className={`p-6 ${collapsed ? 'col-span-3 px-32' : ''}`}
         disableInput={updated}
         disableCommands={true}
         inputPlaceholder={

diff --git a/components/threads.tsx b/components/threads.tsx
@@ -5,6 +5,7 @@ import { Button, Divider, Tooltip } from '@nextui-org/react';
 import { GoSidebarExpand, GoSidebarCollapse } from 'react-icons/go';
 import { ChatContext } from '@/contexts/chat';
 import { getScript } from '@/actions/me/scripts';
+import clsx from 'clsx';
 
 interface ThreadsProps {
   className?: string;
@@ -38,9 +39,19 @@ const Threads: React.FC<ThreadsProps> = ({ onOpenExplore }: ThreadsProps) => {
 
   return (
     <div
-      className={`relative flex flex-col transition-[width] duration-300 ease-in-out ${isCollapsed ? 'border-none w-[125px]' : 'w-[350px] border-r-1 dark:border-r-zinc-800'}`}
+      className={clsx(
+        `relative border-r-1 dark:border-r-zinc-800 flex flex-col transition-all duration-300 ease-in-out`,
+        {
+          'w-[80px]': isCollapsed,
+          'w-[350px]': !isCollapsed,
+        }
+      )}
     >
-      <div className={`flex justify-between gap-0 mb-2 pt-4 px-4`}>
+      <div
+        className={clsx(`flex justify-between gap-0 mb-2 pt-4 px-4`, {
+          'flex-col items-start': isCollapsed,
+        })}
+      >
         <Tooltip
           content={isCollapsed ? 'Expand threads' : 'Collapse threads'}
           placement="top"
@@ -66,7 +77,13 @@ const Threads: React.FC<ThreadsProps> = ({ onOpenExplore }: ThreadsProps) => {
       />
 
       <div
-        className={`flex-1 h-full px-4 pb-4 overflow-y-auto transition-[width] duration-300 ease-in-out ${isCollapsed ? 'w-0' : 'w-full'}`}
+        className={clsx(
+          `flex-1 h-full px-4 pb-4 overflow-y-auto transition-all duration-300 ease-in-out`,
+          {
+            'w-0 overflow-hidden': isCollapsed,
+            'w-full': !isCollapsed,
+          }
+        )}
       >
         <div
           className={`mb-4 transition-opacity duration-200 ${isCollapsed ? 'opacity-0' : 'opacity-100'}`}