fix: move featured tool catalog to tooltip + make scrollable for smal…

…ler viewports (#509) * fix: move featured tool catalog to tooltip + make scrollable for smaller viewports * fix: prevent threads container from shrinking with viewport
gptscript-ai · Sep 13, 2024 · 70e8d02 · 70e8d02
1 parent 9354f78
commit 70e8d02
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 23 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -35,8 +35,8 @@ function RunFile() {
           <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',
+              chatBar: 'w-full mx-auto xl:w-3/4 2xl:w-1/2',
+              messages: 'w-full mx-auto xl:w-3/4 2xl:w-1/2',
             }}
           />
         </div>

diff --git a/components/chat.tsx b/components/chat.tsx
@@ -159,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-10 bg-background">
                     <h1 className="text-3xl font-medium truncate">
                       {scriptDisplayName ?? ''}
                     </h1>

diff --git a/components/chat/chatBar/CatalogListBox.tsx b/components/chat/chatBar/CatalogListBox.tsx
@@ -122,7 +122,6 @@ export const CatalogListBox = forwardRef<ToolCatalogRef, CatalogListboxProps>(
 
     return (
       <Listbox
-        className="relative overflow-y-auto"
         aria-label={'catalog'}
         variant={'flat'}
         disallowEmptySelection

diff --git a/components/chat/chatBar/commands.tsx b/components/chat/chatBar/commands.tsx
@@ -8,7 +8,13 @@ import { ToolActionChatMessage } from '@/components/shared/tools/ToolActionChatM
 import { UrlToolModal } from '@/components/shared/tools/UrlToolModal';
 import { ChatContext } from '@/contexts/chat';
 import { useAsync } from '@/hooks/useFetch';
-import { Card, Listbox, ListboxItem, useDisclosure } from '@nextui-org/react';
+import {
+  Card,
+  Listbox,
+  ListboxItem,
+  Tooltip,
+  useDisclosure,
+} from '@nextui-org/react';
 import React, {
   forwardRef,
   useContext,
@@ -311,18 +317,28 @@ export default forwardRef<ChatCommandsRef, CommandsProps>(
     return (
       <div className="relative w-full h-3/4 command-options">
         <Upload isOpen={uploadOpen} setIsOpen={setUploadOpen} />
-        {isCatalogOpen && (
-          <Card className="absolute bottom-14 p-4" ref={catalogClickOutsideRef}>
-            <CatalogListBox
-              ref={toolcatalogRef}
-              query={text}
-              loading={loadingTool}
-              equippedTools={tools}
-              onAddTool={addTool.execute}
-              onUncapturedKeyDown={() => inputElement?.focus()}
-            />
-          </Card>
-        )}
+
+        <Tooltip
+          isOpen={isCatalogOpen}
+          placement="top-start"
+          content={
+            <div
+              className="max-h-[80vh] overflow-auto"
+              ref={catalogClickOutsideRef}
+            >
+              <CatalogListBox
+                ref={toolcatalogRef}
+                query={text}
+                loading={loadingTool}
+                equippedTools={tools}
+                onAddTool={addTool.execute}
+                onUncapturedKeyDown={() => inputElement?.focus()}
+              />
+            </div>
+          }
+        >
+          <div />
+        </Tooltip>
 
         <UrlToolModal
           isOpen={urlToolModal.isOpen}

diff --git a/components/chat/messages.tsx b/components/chat/messages.tsx
@@ -8,6 +8,7 @@ import type { CallFrame } from '@gptscript-ai/gptscript';
 import Calls from './messages/calls';
 import { GoIssueReopened } from 'react-icons/go';
 import { defaultUrlTransform } from 'react-markdown';
+import clsx from 'clsx';
 
 export enum MessageType {
   Alert,
@@ -73,13 +74,13 @@ const Message = React.memo(
                   closeDelay={0.5}
                 >
                   <Avatar
-                    showFallback
                     name={abbreviate(message.name || 'System')}
                     className="w-[40px] cursor-default"
                     classNames={{
-                      base: `bg-white p-6 text-sm border dark:border-none dark:bg-zinc-900 ${
-                        message.error && 'border-danger dark:border-danger'
-                      }`,
+                      base: clsx(
+                        `bg-white p-6 text-sm border dark:border-none dark:bg-zinc-900`,
+                        { 'border-danger dark:border-danger': !!message.error }
+                      ),
                       name: `text-lg text-default-600`,
                     }}
                   />

diff --git a/components/edit/configure/imports.tsx b/components/edit/configure/imports.tsx
@@ -164,8 +164,9 @@ const Imports: React.FC<ImportsProps> = ({
       )}
       <div className={`flex flex-col gap-2`}>
         <Tooltip
+          placement="right"
           content={
-            <div ref={clickOutsideRef}>
+            <div ref={clickOutsideRef} className="max-h-[80vh] overflow-auto">
               <CatalogListBox
                 equippedTools={tools || []}
                 onAddTool={(tool) => {

diff --git a/components/threads.tsx b/components/threads.tsx
@@ -40,7 +40,7 @@ const Threads: React.FC<ThreadsProps> = ({ onOpenExplore }: ThreadsProps) => {
   return (
     <div
       className={clsx(
-        `relative border-r-1 dark:border-r-zinc-800 flex flex-col transition-all duration-300 ease-in-out`,
+        `relative border-r-1 dark:border-r-zinc-800 flex flex-col transition-all duration-300 ease-in-out shrink-0`,
         {
           'w-[80px]': isCollapsed,
           'w-[350px]': !isCollapsed,