🖼️ style: Conversation Menu and Dialogs update (#3601)

* feat: new dropdown * fix: maintain popover active when open * fix: update DeleteButton and ShareButton component to use useState for managing dialog state * BREAKING: style improvement of base Button component * style: update export button * a11y: ExportAndShareButton * add border * quick style fix * fix: flick issue on convo * fix: DropDown opens when renaming * chore: update radix-ui/react-dropdown-menu to latest * small fix * style: bookmarks update * reorder export modal * feat: imporved dropdowns * style: a lot of changes; header, bookmarks, export, nav, convo, convoOptions * fix: small style issues * fix: button * fix: bookmarks header menu * fix: dropdown close glitch * feat: Improve accessibility and keyboard navigation in ModelSpec component * fix: Nav related type issues * style: ConvoOptions theming and focus ring --------- Co-authored-by: Danny Avila <danny@librechat.ai>
danny-avila · Aug 16, 2024 · 96581d5 · 96581d5
1 parent 7f50d2f
commit 96581d5
Show file tree

Hide file tree

Showing 62 changed files with 2,633 additions and 1,827 deletions.
diff --git a/api/models/ConversationTag.js b/api/models/ConversationTag.js
@@ -136,13 +136,13 @@ const adjustPositions = async (user, oldPosition, newPosition) => {
   const position =
     oldPosition < newPosition
       ? {
-          $gt: Math.min(oldPosition, newPosition),
-          $lte: Math.max(oldPosition, newPosition),
-        }
+        $gt: Math.min(oldPosition, newPosition),
+        $lte: Math.max(oldPosition, newPosition),
+      }
       : {
-          $gte: Math.min(oldPosition, newPosition),
-          $lt: Math.max(oldPosition, newPosition),
-        };
+        $gte: Math.min(oldPosition, newPosition),
+        $lt: Math.max(oldPosition, newPosition),
+      };
 
   await ConversationTag.updateMany(
     {

diff --git a/client/package.json b/client/package.json
@@ -37,7 +37,7 @@
     "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.2",
-    "@radix-ui/react-dropdown-menu": "^2.0.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-hover-card": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.0",

diff --git a/client/src/components/Bookmarks/BookmarkEditDialog.tsx b/client/src/components/Bookmarks/BookmarkEditDialog.tsx
@@ -1,7 +1,7 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, Dispatch, SetStateAction } from 'react';
 import { TConversationTag, TConversation } from 'librechat-data-provider';
 import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
-import { OGDialog, OGDialogTrigger, OGDialogClose } from '~/components/ui/';
+import { OGDialog, OGDialogClose } from '~/components/ui/';
 import BookmarkForm from './BookmarkForm';
 import { useLocalize } from '~/hooks';
 import { Spinner } from '../svg';
@@ -11,18 +11,20 @@ type BookmarkEditDialogProps = {
   conversation?: TConversation;
   tags?: string[];
   setTags?: (tags: string[]) => void;
-  trigger: React.ReactNode;
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
 };
+
 const BookmarkEditDialog = ({
   bookmark,
   conversation,
   tags,
   setTags,
-  trigger,
+  open,
+  setOpen,
 }: BookmarkEditDialogProps) => {
   const localize = useLocalize();
   const [isLoading, setIsLoading] = useState(false);
-  const [open, setOpen] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
 
   const handleSubmitForm = () => {
@@ -33,10 +35,8 @@ const BookmarkEditDialog = ({
 
   return (
     <OGDialog open={open} onOpenChange={setOpen}>
-      <OGDialogTrigger asChild>{trigger}</OGDialogTrigger>
       <OGDialogTemplate
         title="Bookmark"
-        className="w-11/12 sm:w-1/4"
         showCloseButton={false}
         main={
           <BookmarkForm

diff --git a/client/src/components/Bookmarks/BookmarkForm.tsx b/client/src/components/Bookmarks/BookmarkForm.tsx
@@ -170,7 +170,7 @@ const BookmarkForm = ({
                   checked={field.value}
                   onCheckedChange={field.onChange}
                   className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
-                  value={field?.value?.toString()}
+                  value={field.value?.toString()}
                 />
               )}
             />

diff --git a/client/src/components/Bookmarks/BookmarkItem.tsx b/client/src/components/Bookmarks/BookmarkItem.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { MenuItem } from '@headlessui/react';
 import { BookmarkFilledIcon, BookmarkIcon } from '@radix-ui/react-icons';
 import type { FC } from 'react';
 import { Spinner } from '~/components/svg';
@@ -7,25 +8,19 @@ import { cn } from '~/utils';
 type MenuItemProps = {
   tag: string | React.ReactNode;
   selected: boolean;
-  ctx: 'header' | 'nav';
   count?: number;
-  handleSubmit: (tag: string) => Promise<void>;
+  handleSubmit: (tag?: string) => Promise<void>;
   icon?: React.ReactNode;
-  highlightSelected?: boolean;
 };
 
-const BookmarkItem: FC<MenuItemProps> = ({
-  tag,
-  ctx,
-  selected,
-  count,
-  handleSubmit,
-  icon,
-  highlightSelected,
-  ...rest
-}) => {
+const BookmarkItem: FC<MenuItemProps> = ({ tag, selected, handleSubmit, icon, ...rest }) => {
   const [isLoading, setIsLoading] = useState(false);
   const clickHandler = async () => {
+    if (tag === 'New Bookmark') {
+      await handleSubmit();
+      return;
+    }
+
     setIsLoading(true);
     await handleSubmit(tag as string);
     setIsLoading(false);
@@ -49,40 +44,24 @@ const BookmarkItem: FC<MenuItemProps> = ({
     return <BookmarkIcon className="size-4" />;
   };
 
-  const ariaLabel =
-    ctx === 'header' ? `${selected ? 'Remove' : 'Add'} bookmark for ${tag}` : (tag as string);
-
   return (
-    <button
-      aria-label={ariaLabel}
-      role="menuitem"
+    <MenuItem
+      aria-label={tag as string}
       className={cn(
-        'group m-1.5 flex w-[225px] cursor-pointer gap-2 rounded bg-transparent px-2 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50',
-        highlightSelected && selected ? 'bg-surface-secondary' : '',
-        ctx === 'header' ? 'hover:bg-header-hover' : 'hover:bg-surface-hover',
+        'group flex w-full gap-2 rounded-lg p-2.5 text-sm text-text-primary transition-colors duration-200',
+        selected ? 'bg-surface-hover' : 'data-[focus]:bg-surface-hover',
       )}
-      tabIndex={-1}
       {...rest}
+      as="button"
       onClick={clickHandler}
     >
       <div className="flex grow items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           {renderIcon()}
           <div style={breakWordStyle}>{tag}</div>
         </div>
-
-        {count !== undefined && (
-          <div className="flex items-center justify-end">
-            <span
-              className="ml-auto w-7 min-w-max whitespace-nowrap rounded-md bg-surface-secondary px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-text-secondary"
-              aria-hidden="true"
-            >
-              {count}
-            </span>
-          </div>
-        )}
       </div>
-    </button>
+    </MenuItem>
   );
 };
 

diff --git a/client/src/components/Bookmarks/BookmarkItems.tsx b/client/src/components/Bookmarks/BookmarkItems.tsx
@@ -2,35 +2,24 @@ import type { FC } from 'react';
 import { useBookmarkContext } from '~/Providers/BookmarkContext';
 import BookmarkItem from './BookmarkItem';
 interface BookmarkItemsProps {
-  ctx: 'header' | 'nav';
   tags: string[];
-  handleSubmit: (tag: string) => Promise<void>;
+  handleSubmit: (tag?: string) => Promise<void>;
   header: React.ReactNode;
-  highlightSelected?: boolean;
 }
 
-const BookmarkItems: FC<BookmarkItemsProps> = ({
-  ctx,
-  tags,
-  handleSubmit,
-  header,
-  highlightSelected,
-}) => {
+const BookmarkItems: FC<BookmarkItemsProps> = ({ tags, handleSubmit, header }) => {
   const { bookmarks } = useBookmarkContext();
 
   return (
     <>
       {header}
-      <div className="my-1.5 h-px" role="none" />
+      {bookmarks.length > 0 && <div className="my-1.5 h-px" role="none" />}
       {bookmarks.map((bookmark) => (
         <BookmarkItem
-          ctx={ctx}
           key={bookmark.tag}
           tag={bookmark.tag}
           selected={tags.includes(bookmark.tag)}
-          count={bookmark.count}
           handleSubmit={handleSubmit}
-          highlightSelected={highlightSelected}
         />
       ))}
     </>

diff --git a/client/src/components/Bookmarks/DeleteBookmarkButton.tsx b/client/src/components/Bookmarks/DeleteBookmarkButton.tsx
@@ -46,7 +46,7 @@ const DeleteBookmarkButton: FC<{
         </Label>
       }
       confirm={confirmDelete}
-      className="transition-color flex h-7 w-7 min-w-7 items-center justify-center rounded-lg duration-200 hover:bg-gray-200 dark:hover:bg-gray-700"
+      className="transition-color flex size-7 items-center justify-center rounded-lg duration-200 hover:bg-surface-hover"
       icon={<TrashIcon className="size-4" />}
       tabIndex={tabIndex}
       onFocus={onFocus}

diff --git a/client/src/components/Bookmarks/EditBookmarkButton.tsx b/client/src/components/Bookmarks/EditBookmarkButton.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { FC } from 'react';
 import type { TConversationTag } from 'librechat-data-provider';
 import BookmarkEditDialog from './BookmarkEditDialog';
@@ -12,30 +13,31 @@ const EditBookmarkButton: FC<{
   onBlur?: () => void;
 }> = ({ bookmark, tabIndex = 0, onFocus, onBlur }) => {
   const localize = useLocalize();
+  const [open, setOpen] = useState(false);
+
   return (
-    <BookmarkEditDialog
-      bookmark={bookmark}
-      trigger={
-        <button
-          type="button"
-          className="transition-color flex h-7 w-7 min-w-7 items-center justify-center rounded-lg duration-200 hover:bg-gray-200 dark:hover:bg-gray-700"
-          tabIndex={tabIndex}
-          onFocus={onFocus}
-          onBlur={onBlur}
-        >
-          <TooltipProvider delayDuration={250}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <EditIcon />
-              </TooltipTrigger>
-              <TooltipContent side="top" sideOffset={0}>
-                {localize('com_ui_edit')}
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </button>
-      }
-    />
+    <>
+      <BookmarkEditDialog bookmark={bookmark} open={open} setOpen={setOpen} />
+      <button
+        type="button"
+        className="transition-color flex size-7 items-center justify-center rounded-lg duration-200 hover:bg-surface-hover"
+        tabIndex={tabIndex}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onClick={() => setOpen(!open)}
+      >
+        <TooltipProvider delayDuration={250}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <EditIcon />
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={0}>
+              {localize('com_ui_edit')}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </button>
+    </>
   );
 };
 

diff --git a/client/src/components/Chat/AddMultiConvo.tsx b/client/src/components/Chat/AddMultiConvo.tsx
@@ -3,6 +3,7 @@ import { isAssistantsEndpoint } from 'librechat-data-provider';
 import type { TConversation } from 'librechat-data-provider';
 import { useChatContext, useAddedChatContext } from '~/Providers';
 import { mainTextareaId } from '~/common';
+import { Button } from '~/components/ui';
 import { cn } from '~/utils';
 
 function AddMultiConvo({ className = '' }: { className?: string }) {
@@ -32,16 +33,15 @@ function AddMultiConvo({ className = '' }: { className?: string }) {
   }
 
   return (
-    <button
+    <Button
+      id="add-multi-conversation-button"
       aria-label="Add multi-conversation"
       onClick={clickHandler}
-      className={cn(
-        'group m-1.5 flex w-fit cursor-pointer items-center rounded text-sm hover:bg-border-medium focus-visible:bg-border-medium focus-visible:outline-offset-2',
-        className,
-      )}
+      variant="outline"
+      className={cn('h-10 w-10 p-0 transition-all duration-300 ease-in-out', className)}
     >
       <PlusCircle size={16} />
-    </button>
+    </Button>
   );
 }