🎨 style: update Assistants builder (#3397)

* style: update Assistant builder * fix(Eng): re-introduce old file_search info message * feat: new OGDialogTemplate; style: imporved tools + actions dialogs * style: fix alignment issue for delete tool dialog * chore: import order --------- Co-authored-by: Danny Avila <danny@librechat.ai>
danny-avila · Jul 21, 2024 · 0bd59c0 · 0bd59c0
1 parent 3442970
commit 0bd59c0
Show file tree

Hide file tree

Showing 29 changed files with 1,115 additions and 916 deletions.
diff --git a/client/src/components/Chat/Input/Files/RemoveFile.tsx b/client/src/components/Chat/Input/Files/RemoveFile.tsx
@@ -2,7 +2,7 @@ export default function RemoveFile({ onRemove }: { onRemove: () => void }) {
   return (
     <button
       type="button"
-      className="absolute right-1 top-1 -translate-y-1/2 translate-x-1/2 rounded-full border border-white bg-gray-500 p-0.5 text-white transition-colors hover:bg-black hover:opacity-100 group-hover:opacity-100 md:opacity-0"
+      className="absolute right-1 top-1 -translate-y-1/2 translate-x-1/2 rounded-full border border-gray-500 bg-gray-500 p-0.5 text-white transition-colors hover:bg-gray-700 hover:opacity-100 group-hover:opacity-100 md:opacity-0"
       onClick={onRemove}
     >
       <span>
@@ -15,6 +15,8 @@ export default function RemoveFile({ onRemove }: { onRemove: () => void }) {
           strokeLinejoin="round"
           className="icon-sm"
           xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
         >
           <line x1="18" y1="6" x2="6" y2="18" />
           <line x1="6" y1="6" x2="18" y2="18" />

diff --git a/client/src/components/Chat/Input/Files/Table/DataTable.tsx b/client/src/components/Chat/Input/Files/Table/DataTable.tsx
@@ -32,7 +32,7 @@ import {
   DropdownMenuTrigger,
 } from '~/components/ui';
 import { useDeleteFilesFromTable } from '~/hooks/Files';
-import { NewTrashIcon, Spinner } from '~/components/svg';
+import { TrashIcon, Spinner } from '~/components/svg';
 import useLocalize from '~/hooks/useLocalize';
 
 interface DataTableProps<TData, TValue> {
@@ -102,7 +102,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           {isDeleting ? (
             <Spinner className="h-4 w-4" />
           ) : (
-            <NewTrashIcon className="h-4 w-4 text-red-400" />
+            <TrashIcon className="h-4 w-4 text-red-400" />
           )}
           {localize('com_ui_delete')}
         </Button>

diff --git a/client/src/components/Files/DeleteIconButton.tsx b/client/src/components/Files/DeleteIconButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CrossIcon, NewTrashIcon } from '~/components/svg';
+import { CrossIcon, TrashIcon } from '~/components/svg';
 import { Button } from '~/components/ui';
 
 type DeleteIconButtonProps = {
@@ -10,7 +10,7 @@ export default function DeleteIconButton({ onClick }: DeleteIconButtonProps) {
   return (
     <div className="w-fit">
       <Button className="bg-red-400 p-3" onClick={onClick}>
-        <NewTrashIcon />
+        <TrashIcon />
       </Button>
     </div>
   );

diff --git a/client/src/components/Files/FileList/DataTableFile.tsx b/client/src/components/Files/FileList/DataTableFile.tsx
@@ -32,7 +32,7 @@ import {
   DropdownMenuTrigger,
 } from '~/components/ui';
 import { useDeleteFilesFromTable } from '~/hooks/Files';
-import { NewTrashIcon, Spinner } from '~/components/svg';
+import { TrashIcon, Spinner } from '~/components/svg';
 import useLocalize from '~/hooks/useLocalize';
 import ActionButton from '../ActionButton';
 import UploadFileButton from './UploadFileButton';
@@ -112,7 +112,7 @@ export default function DataTableFile<TData, TValue>({
               {isDeleting ? (
                 <Spinner className="h-4 w-4" />
               ) : (
-                <NewTrashIcon className="h-4 w-4 text-red-400" />
+                <TrashIcon className="h-4 w-4 text-red-400" />
               )}
               {localize('com_ui_delete')}
             </Button>

diff --git a/client/src/components/Files/FileList/FileListItem.tsx b/client/src/components/Files/FileList/FileListItem.tsx
@@ -1,6 +1,6 @@
 import type { TFile } from 'librechat-data-provider';
 import React from 'react';
-import { NewTrashIcon } from '~/components/svg';
+import { TrashIcon } from '~/components/svg';
 import { Button } from '~/components/ui';
 
 type FileListItemProps = {
@@ -25,7 +25,7 @@ export default function FileListItem({ file, deleteFile, width = '400px' }: File
           className="my-0 ml-3 bg-transparent p-0 text-[#666666] hover:bg-slate-200"
           onClick={() => deleteFile(file._id)}
         >
-          <NewTrashIcon className="m-0 p-0" />
+          <TrashIcon className="m-0 p-0" />
         </Button>
       </div>
     </div>

diff --git a/client/src/components/Files/FileList/FileListItem2.tsx b/client/src/components/Files/FileList/FileListItem2.tsx
@@ -2,7 +2,7 @@ import type { TFile } from 'librechat-data-provider';
 import { FileIcon, PlusIcon } from 'lucide-react';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { DotsIcon, NewTrashIcon } from '~/components/svg';
+import { DotsIcon, TrashIcon } from '~/components/svg';
 import { Button } from '~/components/ui';
 
 type FileListItemProps = {
@@ -68,7 +68,7 @@ export default function FileListItem2({
           className="w-min bg-transparent text-[#666666] hover:bg-slate-200"
           onClick={() => deleteFile(file._id)}
         >
-          <NewTrashIcon className="" />
+          <TrashIcon className="" />
         </Button>
       </div>
     </div>

diff --git a/client/src/components/Files/FileList/FilePreview.tsx b/client/src/components/Files/FileList/FilePreview.tsx
@@ -1,7 +1,7 @@
 import { TFile } from 'librechat-data-provider/dist/types';
 import React, { useState } from 'react';
 import { TThread, TVectorStore } from '~/common';
-import { CheckMark, NewTrashIcon } from '~/components/svg';
+import { CheckMark, TrashIcon } from '~/components/svg';
 import { Button } from '~/components/ui';
 import DeleteIconButton from '../DeleteIconButton';
 import VectorStoreButton from '../VectorStore/VectorStoreButton';
@@ -140,7 +140,7 @@ export default function FilePreview() {
                     }}
                     variant={'ghost'}
                   >
-                    <NewTrashIcon className="m-0 p-0" />
+                    <TrashIcon className="m-0 p-0" />
                   </Button>
                 </div>
               </div>
@@ -167,7 +167,7 @@ export default function FilePreview() {
                       console.log('Remove from thread');
                     }}
                   >
-                    <NewTrashIcon className="m-0 p-0" />
+                    <TrashIcon className="m-0 p-0" />
                   </Button>
                 </div>
               </div>

diff --git a/client/src/components/Files/VectorStore/VectorStoreListItem.tsx b/client/src/components/Files/VectorStore/VectorStoreListItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TVectorStore } from '~/common';
-import { DotsIcon, NewTrashIcon, TrashIcon } from '~/components/svg';
+import { DotsIcon, TrashIcon, TrashIcon } from '~/components/svg';
 import { Button } from '~/components/ui';
 
 type VectorStoreListItemProps = {
@@ -39,7 +39,7 @@ export default function VectorStoreListItem({
           className="m-0 w-full bg-transparent p-0 text-[#666666] hover:bg-slate-200 sm:w-fit"
           onClick={() => deleteVectorStore(vectorStore._id)}
         >
-          <NewTrashIcon className="m-0 p-0" />
+          <TrashIcon className="m-0 p-0" />
         </Button>
       </div>
     </div>

diff --git a/client/src/components/Files/VectorStore/VectorStorePreview.tsx b/client/src/components/Files/VectorStore/VectorStorePreview.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import DeleteIconButton from '../DeleteIconButton';
 import { Button } from '~/components/ui';
-import { NewTrashIcon } from '~/components/svg';
+import { TrashIcon } from '~/components/svg';
 import { TFile } from 'librechat-data-provider/dist/types';
 import UploadFileButton from '../FileList/UploadFileButton';
 import UploadFileModal from '../FileList/UploadFileModal';
@@ -204,7 +204,7 @@ export default function VectorStorePreview() {
                     className="my-0 ml-3 h-min bg-transparent p-0 text-[#666666] hover:bg-slate-200"
                     onClick={() => console.log('click')}
                   >
-                    <NewTrashIcon className="m-0 p-0" />
+                    <TrashIcon className="m-0 p-0" />
                   </Button>
                 </div>
               </div>

diff --git a/client/src/components/Prompts/Groups/DashGroupItem.tsx b/client/src/components/Prompts/Groups/DashGroupItem.tsx
@@ -18,7 +18,7 @@ import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { RenameButton } from '~/components/Conversations';
 import { useLocalize, useAuthContext } from '~/hooks';
-import { NewTrashIcon } from '~/components/svg';
+import { TrashIcon } from '~/components/svg';
 import { cn } from '~/utils/';
 
 export default function DashGroupItem({
@@ -169,7 +169,7 @@ export default function DashGroupItem({
                               e.stopPropagation();
                             }}
                           >
-                            <NewTrashIcon className="icon-md text-gray-600 dark:text-gray-300" />
+                            <TrashIcon className="icon-md text-gray-600 dark:text-gray-300" />
                           </Button>
                         </DialogTrigger>
                         <DialogTemplate

diff --git a/client/src/components/SidePanel/Builder/ActionsPanel.tsx b/client/src/components/SidePanel/Builder/ActionsPanel.tsx
@@ -7,9 +7,10 @@ import {
 } from 'librechat-data-provider';
 import type { AssistantPanelProps, ActionAuthForm } from '~/common';
 import { useAssistantsMapContext, useToastContext } from '~/Providers';
-import { Dialog, DialogTrigger } from '~/components/ui';
+import { Dialog, DialogTrigger, OGDialog, OGDialogTrigger, Label } from '~/components/ui';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 import { useDeleteAction } from '~/data-provider';
-import { NewTrashIcon } from '~/components/svg';
+import { TrashIcon } from '~/components/svg';
 import useLocalize from '~/hooks/useLocalize';
 import ActionsInput from './ActionsInput';
 import ActionsAuth from './ActionsAuth';
@@ -119,33 +120,52 @@ export default function ActionsPanel({
                 </div>
               </button>
             </div>
+
             {!!action && (
-              <div className="absolute right-0 top-6">
-                <button
-                  type="button"
-                  disabled={!assistant_id || !action.action_id}
-                  className="btn relative bg-transparent text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800"
-                  onClick={() => {
-                    if (!assistant_id) {
-                      return prompt('No assistant_id found, is the assistant created?');
-                    }
-                    const confirmed = confirm('Are you sure you want to delete this action?');
-                    if (confirmed) {
+              <OGDialog>
+                <OGDialogTrigger asChild>
+                  <div className="absolute right-0 top-6">
+                    <button
+                      type="button"
+                      disabled={!assistant_id || !action.action_id}
+                      className="btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium"
+                    >
+                      <TrashIcon className="text-red-500" />
+                    </button>
+                  </div>
+                </OGDialogTrigger>
+                <OGDialogTemplate
+                  showCloseButton={false}
+                  title={localize('com_ui_delete_action')}
+                  className="max-w-[450px]"
+                  main={
+                    <Label className="text-left text-sm font-medium">
+                      {localize('com_ui_delete_action_confirm')}
+                    </Label>
+                  }
+                  selection={{
+                    selectHandler: () => {
+                      if (!assistant_id) {
+                        return showToast({
+                          message: 'No assistant_id found, is the assistant created?',
+                          status: 'error',
+                        });
+                      }
                       deleteAction.mutate({
                         model: assistantMap[endpoint][assistant_id].model,
                         action_id: action.action_id,
                         assistant_id,
                         endpoint,
                       });
-                    }
+                    },
+                    selectClasses:
+                      'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 transition-color duration-200 text-white',
+                    selectText: localize('com_ui_delete'),
                   }}
-                >
-                  <div className="flex w-full items-center justify-center gap-2">
-                    <NewTrashIcon className="icon-md text-red-500" />
-                  </div>
-                </button>
-              </div>
+                />
+              </OGDialog>
             )}
+
             <div className="text-xl font-medium">{(action ? 'Edit' : 'Add') + ' ' + 'actions'}</div>
             <div className="text-token-text-tertiary text-sm">
               {localize('com_assistants_actions_info')}

diff --git a/client/src/components/SidePanel/Builder/AssistantAction.tsx b/client/src/components/SidePanel/Builder/AssistantAction.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { Action } from 'librechat-data-provider';
 import GearIcon from '~/components/svg/GearIcon';
 
@@ -8,25 +9,30 @@ export default function AssistantAction({
   action: Action;
   onClick: () => void;
 }) {
+  const [isHovering, setIsHovering] = useState(false);
+
   return (
     <div>
       <div
         onClick={onClick}
-        className="border-token-border-medium flex w-full rounded-lg border text-sm hover:cursor-pointer"
+        className="flex w-full rounded-lg text-sm hover:cursor-pointer"
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
       >
         <div
           className="h-9 grow whitespace-nowrap px-3 py-2"
           style={{ textOverflow: 'ellipsis', wordBreak: 'break-all', overflow: 'hidden' }}
         >
           {action.metadata.domain}
         </div>
-        <div className="w-px bg-gray-300 dark:bg-gray-600" />
-        <button
-          type="button"
-          className="flex h-9 w-9 min-w-9 items-center justify-center rounded-lg rounded-l-none"
-        >
-          <GearIcon className="icon-sm" />
-        </button>
+        {isHovering && (
+          <button
+            type="button"
+            className="transition-color flex h-9 w-9 min-w-9 items-center justify-center rounded-lg duration-200 hover:bg-gray-200 dark:hover:bg-gray-700"
+          >
+            <GearIcon className="icon-sm" />
+          </button>
+        )}
       </div>
     </div>
   );