🖼️ 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/Conversations/ConvoOptions/ArchiveButton.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import type { MouseEvent, FocusEvent, KeyboardEvent } from 'react';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
+import { useConversations, useLocalize, useNewConvo } from '~/hooks';
+import { useArchiveConversationMutation } from '~/data-provider';
+import { NotificationSeverity } from '~/common';
+import { useToastContext } from '~/Providers';
+
+type ArchiveButtonProps = {
+  children?: React.ReactNode;
+  conversationId: string;
+  retainView: () => void;
+  shouldArchive: boolean;
+  icon?: React.ReactNode;
+  className?: string;
+};
+
+export function useArchiveHandler(
+  conversationId: string,
+  shouldArchive: boolean,
+  retainView: () => void,
+) {
+  const localize = useLocalize();
+  const navigate = useNavigate();
+  const { showToast } = useToastContext();
+  const { newConversation } = useNewConvo();
+  const { refreshConversations } = useConversations();
+  const { conversationId: currentConvoId } = useParams();
+
+  const archiveConvoMutation = useArchiveConversationMutation(conversationId);
+
+  return async (e?: MouseEvent | FocusEvent | KeyboardEvent) => {
+    if (e) {
+      e.preventDefault();
+    }
+    const label = shouldArchive ? 'archive' : 'unarchive';
+    archiveConvoMutation.mutate(
+      { conversationId, isArchived: shouldArchive },
+      {
+        onSuccess: () => {
+          if (currentConvoId === conversationId || currentConvoId === 'new') {
+            newConversation();
+            navigate('/c/new', { replace: true });
+          }
+          refreshConversations();
+          retainView();
+        },
+        onError: () => {
+          showToast({
+            message: localize(`com_ui_${label}_error`),
+            severity: NotificationSeverity.ERROR,
+            showIcon: true,
+          });
+        },
+      },
+    );
+  };
+}
+
+export default function ArchiveButton({
+  conversationId,
+  retainView,
+  shouldArchive,
+  icon,
+  className = '',
+}: ArchiveButtonProps) {
+  const localize = useLocalize();
+  const archiveHandler = useArchiveHandler(conversationId, shouldArchive, retainView);
+
+  return (
+    <button type="button" className={className} onClick={archiveHandler}>
+      <TooltipProvider delayDuration={250}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="h-5 w-5">{icon}</span>
+          </TooltipTrigger>
+          <TooltipContent side="top" sideOffset={0}>
+            {localize(`com_ui_${shouldArchive ? 'archive' : 'unarchive'}`)}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </button>
+  );
+}
+
+export { useArchiveHandler as archiveHandler };

client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { Ellipsis, Share2, Archive, Pen, Trash } from 'lucide-react';
+import { useGetStartupConfig } from 'librechat-data-provider/react-query';
+import { Button } from '~/components/ui';
+import { useArchiveHandler } from './ArchiveButton';
+import { DropdownPopup } from '~/components/ui';
+import DeleteButton from './DeleteButton';
+import ShareButton from './ShareButton';
+import { useLocalize } from '~/hooks';
+
+export default function ConvoOptions({
+  conversation,
+  retainView,
+  renameHandler,
+  isPopoverActive,
+  setIsPopoverActive,
+  isActiveConvo,
+}) {
+  const localize = useLocalize();
+  const { data: startupConfig } = useGetStartupConfig();
+  const { conversationId, title } = conversation;
+  const [showShareDialog, setShowShareDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const archiveHandler = useArchiveHandler(conversationId, true, retainView);
+
+  const shareHandler = () => {
+    setIsPopoverActive(false);
+    setShowShareDialog(true);
+  };
+
+  const deleteHandler = () => {
+    setIsPopoverActive(false);
+    setShowDeleteDialog(true);
+  };
+
+  const dropdownItems = [
+    {
+      label: localize('com_ui_rename'),
+      onClick: renameHandler,
+      icon: <Pen className="icon-md mr-2 text-text-secondary" />,
+    },
+    {
+      label: localize('com_ui_share'),
+      onClick: shareHandler,
+      icon: <Share2 className="icon-md mr-2 text-text-secondary" />,
+      show: startupConfig && startupConfig.sharedLinksEnabled,
+    },
+    {
+      label: localize('com_ui_archive'),
+      onClick: archiveHandler,
+      icon: <Archive className="icon-md mr-2 text-text-secondary" />,
+    },
+    {
+      label: localize('com_ui_delete'),
+      onClick: deleteHandler,
+      icon: <Trash className="icon-md mr-2 text-text-secondary" />,
+    },
+  ];
+
+  return (
+    <>
+      <DropdownPopup
+        isOpen={isPopoverActive}
+        setIsOpen={setIsPopoverActive}
+        trigger={
+          <Button
+            id="conversation-menu-button"
+            aria-label="conversation-menu-button"
+            variant="link"
+            className="z-10 h-7 w-7 border-none p-0 transition-all duration-200 ease-in-out"
+          >
+            <Ellipsis className="icon-md text-text-secondary" />
+          </Button>
+        }
+        items={dropdownItems}
+        className={`${
+          isActiveConvo === true
+            ? 'opacity-100'
+            : 'opacity-0 focus:opacity-100 group-hover:opacity-100 data-[open]:opacity-100'
+        }`}
+      />
+      {showShareDialog && (
+        <ShareButton
+          conversationId={conversationId}
+          title={title}
+          showShareDialog={showShareDialog}
+          setShowShareDialog={setShowShareDialog}
+        />
+      )}
+      {showDeleteDialog && (
+        <DeleteButton
+          conversationId={conversationId}
+          retainView={retainView}
+          title={title}
+          showDeleteDialog={showDeleteDialog}
+          setShowDeleteDialog={setShowDeleteDialog}
+        />
+      )}
+    </>
+  );
+}

client/src/components/Conversations/ConvoOptions/DeleteButton.tsx

@@ -0,0 +1,112 @@
+import React, { useCallback, useState } from 'react';
+import { QueryKeys } from 'librechat-data-provider';
+import { useQueryClient } from '@tanstack/react-query';
+import { useParams, useNavigate } from 'react-router-dom';
+import type { TMessage } from 'librechat-data-provider';
+import { useDeleteConversationMutation } from '~/data-provider';
+import {
+  OGDialog,
+  OGDialogTrigger,
+  Label,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '~/components/ui';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
+import { TrashIcon } from '~/components/svg';
+import { useLocalize, useNewConvo } from '~/hooks';
+
+type DeleteButtonProps = {
+  conversationId: string;
+  retainView: () => void;
+  title: string;
+  className?: string;
+  showDeleteDialog?: boolean;
+  setShowDeleteDialog?: (value: boolean) => void;
+};
+
+export default function DeleteButton({
+  conversationId,
+  retainView,
+  title,
+  className = '',
+  showDeleteDialog,
+  setShowDeleteDialog,
+}: DeleteButtonProps) {
+  const localize = useLocalize();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { newConversation } = useNewConvo();
+  const { conversationId: currentConvoId } = useParams();
+  const [open, setOpen] = useState(false);
+  const deleteConvoMutation = useDeleteConversationMutation({
+    onSuccess: () => {
+      if (currentConvoId === conversationId || currentConvoId === 'new') {
+        newConversation();
+        navigate('/c/new', { replace: true });
+      }
+      retainView();
+    },
+  });
+
+  const confirmDelete = useCallback(() => {
+    const messages = queryClient.getQueryData<TMessage[]>([QueryKeys.messages, conversationId]);
+    const thread_id = messages?.[messages.length - 1]?.thread_id;
+
+    deleteConvoMutation.mutate({ conversationId, thread_id, source: 'button' });
+  }, [conversationId, deleteConvoMutation, queryClient]);
+
+  const dialogContent = (
+    <OGDialogTemplate
+      showCloseButton={false}
+      title={localize('com_ui_delete_conversation')}
+      className="max-w-[450px]"
+      main={
+        <>
+          <div className="flex w-full flex-col items-center gap-2">
+            <div className="grid w-full items-center gap-2">
+              <Label htmlFor="dialog-confirm-delete" className="text-left text-sm font-medium">
+                {localize('com_ui_delete_confirm')} <strong>{title}</strong>
+              </Label>
+            </div>
+          </div>
+        </>
+      }
+      selection={{
+        selectHandler: confirmDelete,
+        selectClasses:
+          'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
+        selectText: localize('com_ui_delete'),
+      }}
+    />
+  );
+
+  if (showDeleteDialog !== undefined && setShowDeleteDialog !== undefined) {
+    return (
+      <OGDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        {dialogContent}
+      </OGDialog>
+    );
+  }
+
+  return (
+    <OGDialog open={open} onOpenChange={setOpen}>
+      <TooltipProvider delayDuration={250}>
+        <Tooltip>
+          <OGDialogTrigger asChild>
+            <TooltipTrigger asChild>
+              <button>
+                <TrashIcon className="h-5 w-5" />
+              </button>
+            </TooltipTrigger>
+          </OGDialogTrigger>
+          <TooltipContent side="top" sideOffset={0} className={className}>
+            {localize('com_ui_delete')}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      {dialogContent}
+    </OGDialog>
+  );
+}

client/src/components/Conversations/ConvoOptions/ShareButton.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import { OGDialog } from '~/components/ui';
+import { useToastContext } from '~/Providers';
+import type { TSharedLink } from 'librechat-data-provider';
+import { useCreateSharedLinkMutation } from '~/data-provider';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
+import SharedLinkButton from './SharedLinkButton';
+import { NotificationSeverity } from '~/common';
+import { Spinner } from '~/components/svg';
+import { useLocalize } from '~/hooks';
+
+export default function ShareButton({
+  conversationId,
+  title,
+  showShareDialog,
+  setShowShareDialog,
+}: {
+  conversationId: string;
+  title: string;
+  showShareDialog: boolean;
+  setShowShareDialog: (value: boolean) => void;
+}) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const { mutate, isLoading } = useCreateSharedLinkMutation();
+  const [share, setShare] = useState<TSharedLink | null>(null);
+  const [isUpdated, setIsUpdated] = useState(false);
+  const [isNewSharedLink, setIsNewSharedLink] = useState(false);
+
+  useEffect(() => {
+    if (isLoading || share) {
+      return;
+    }
+    const data = {
+      conversationId,
+      title,
+      isAnonymous: true,
+    };
+
+    mutate(data, {
+      onSuccess: (result) => {
+        setShare(result);
+        setIsNewSharedLink(!result.isPublic);
+      },
+      onError: () => {
+        showToast({
+          message: localize('com_ui_share_error'),
+          severity: NotificationSeverity.ERROR,
+          showIcon: true,
+        });
+      },
+    });
+
+    // mutation.mutate should only be called once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const buttons = share && (
+    <SharedLinkButton
+      share={share}
+      conversationId={conversationId}
+      setShare={setShare}
+      isUpdated={isUpdated}
+      setIsUpdated={setIsUpdated}
+    />
+  );
+
+  return (
+    <OGDialog open={showShareDialog} onOpenChange={setShowShareDialog}>
+      <OGDialogTemplate
+        buttons={buttons}
+        showCloseButton={true}
+        showCancelButton={false}
+        title={localize('com_ui_share_link_to_chat')}
+        className="max-w-[550px]"
+        main={
+          <div>
+            <div className="h-full py-2 text-gray-400 dark:text-gray-200">
+              {(() => {
+                if (isLoading) {
+                  return <Spinner className="m-auto h-14 animate-spin" />;
+                }
+
+                if (isUpdated) {
+                  return isNewSharedLink
+                    ? localize('com_ui_share_created_message')
+                    : localize('com_ui_share_updated_message');
+                }
+
+                return share?.isPublic
+                  ? localize('com_ui_share_update_message')
+                  : localize('com_ui_share_create_message');
+              })()}
+            </div>
+          </div>
+        }
+      />
+    </OGDialog>
+  );
+}

client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'react';
+import copy from 'copy-to-clipboard';
+import { Copy, Link } from 'lucide-react';
+import type { TSharedLink } from 'librechat-data-provider';
+import { useUpdateSharedLinkMutation } from '~/data-provider';
+import { NotificationSeverity } from '~/common';
+import { useToastContext } from '~/Providers';
+import { Spinner } from '~/components/svg';
+import { Button } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+
+export default function SharedLinkButton({
+  conversationId,
+  share,
+  setShare,
+  isUpdated,
+  setIsUpdated,
+}: {
+  conversationId: string;
+  share: TSharedLink;
+  setShare: (share: TSharedLink) => void;
+  isUpdated: boolean;
+  setIsUpdated: (isUpdated: boolean) => void;
+}) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const [isCopying, setIsCopying] = useState(false);
+
+  const { mutateAsync, isLoading } = useUpdateSharedLinkMutation({
+    onError: () => {
+      showToast({
+        message: localize('com_ui_share_error'),
+        severity: NotificationSeverity.ERROR,
+        showIcon: true,
+      });
+    },
+  });
+
+  const copyLink = () => {
+    if (!share) {
+      return;
+    }
+    setIsCopying(true);
+    const sharedLink =
+      window.location.protocol + '//' + window.location.host + '/share/' + share.shareId;
+    copy(sharedLink);
+    setTimeout(() => {
+      setIsCopying(false);
+    }, 1500);
+  };
+  const updateSharedLink = async () => {
+    if (!share) {
+      return;
+    }
+    const result = await mutateAsync({
+      shareId: share.shareId,
+      conversationId: conversationId,
+      isPublic: true,
+      isVisible: true,
+      isAnonymous: true,
+    });
+
+    if (result) {
+      setShare(result);
+      setIsUpdated(true);
+      copyLink();
+    }
+  };
+  const getHandler = () => {
+    if (isUpdated) {
+      return {
+        handler: () => {
+          copyLink();
+        },
+        label: (
+          <>
+            <Copy className="mr-2 h-4 w-4" />
+            {localize('com_ui_copy_link')}
+          </>
+        ),
+      };
+    }
+    if (share.isPublic) {
+      return {
+        handler: async () => {
+          await updateSharedLink();
+        },
+
+        label: (
+          <>
+            <Link className="mr-2 h-4 w-4" />
+            {localize('com_ui_update_link')}
+          </>
+        ),
+      };
+    }
+    return {
+      handler: updateSharedLink,
+      label: (
+        <>
+          <Link className="mr-2 h-4 w-4" />
+          {localize('com_ui_create_link')}
+        </>
+      ),
+    };
+  };
+
+  const handlers = getHandler();
+  return (
+    <button
+      disabled={isLoading || isCopying}
+      onClick={() => {
+        handlers.handler();
+      }}
+      className="btn btn-primary flex items-center"
+    >
+      {isCopying && (
+        <>
+          <Copy className="mr-2 h-4 w-4" />
+          {localize('com_ui_copied')}
+        </>
+      )}
+      {!isCopying && !isLoading && handlers.label}
+      {!isCopying && isLoading && <Spinner className="h-4 w-4" />}
+    </button>
+  );
+}

client/src/components/Conversations/ConvoOptions/index.ts

@@ -0,0 +1,5 @@
+export { default as ArchiveButton } from './ArchiveButton';
+export { default as DeleteButton } from './DeleteButton';
+export { default as ShareButton } from './ShareButton';
+export { default as SharedLinkButton } from './SharedLinkButton';
+export { default as ConvoOptions } from './ConvoOptions';