🖼️ 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>

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

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()}
                 />
               )}
             />

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,20 +44,15 @@ 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">
@@ -70,19 +60,8 @@ const BookmarkItem: FC<MenuItemProps> = ({
           {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>
   );
 };
 

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}
         />
       ))}
     </>

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}

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>
+    </>
   );
 };