🖼️ 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>
2026-01-20 01:06:11 +01:00 · 2024-08-16 10:30:14 +02:00 · 2024-08-16 10:30:14 +02:00 · 96581d56df
commit 96581d56df
parent 7f50d2f7c0
62 changed files with 2627 additions and 1821 deletions
--- a/client/src/components/Conversations/Convo.tsx
+++ b/client/src/components/Conversations/Convo.tsx
@ -1,21 +1,17 @@
 import { useRecoilValue } from 'recoil';
 import { useParams } from 'react-router-dom';
-import { useState, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+
 import { Constants } from 'librechat-data-provider';
-import { useGetEndpointsQuery, useGetStartupConfig } from 'librechat-data-provider/react-query';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
+import { Check, X } from 'lucide-react';
 import type { MouseEvent, FocusEvent, KeyboardEvent } from 'react';
+import { useConversations, useNavigateToConvo, useMediaQuery } from '~/hooks';
 import { useUpdateConversationMutation } from '~/data-provider';
 import EndpointIcon from '~/components/Endpoints/EndpointIcon';
-import { useConversations, useNavigateToConvo } from '~/hooks';
 import { NotificationSeverity } from '~/common';
-import { ArchiveIcon } from '~/components/svg';
 import { useToastContext } from '~/Providers';
-import ArchiveButton from './ArchiveButton';
-import DropDownMenu from './DropDownMenu';
-import DeleteButton from './DeleteButton';
-import RenameButton from './RenameButton';
-import HoverToggle from './HoverToggle';
-import ShareButton from './ShareButton';
+import { ConvoOptions } from './ConvoOptions';
 import { cn } from '~/utils';
 import store from '~/store';

@ -28,7 +24,6 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
  const activeConvos = useRecoilValue(store.allConversationsSelector);
  const { data: endpointsConfig } = useGetEndpointsQuery();
  const { navigateWithLastTools } = useNavigateToConvo();
-  const { data: startupConfig } = useGetStartupConfig();
  const { refreshConversations } = useConversations();
  const { showToast } = useToastContext();
  const { conversationId, title } = conversation;
@ -36,6 +31,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
  const [titleInput, setTitleInput] = useState(title);
  const [renaming, setRenaming] = useState(false);
  const [isPopoverActive, setIsPopoverActive] = useState(false);
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');

  const clickHandler = async (event: React.MouseEvent<HTMLAnchorElement>) => {
    if (event.button === 0 && (event.ctrlKey || event.metaKey)) {
@ -44,7 +40,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
    }

    event.preventDefault();
-    if (currentConvoId === conversationId) {
+    if (currentConvoId === conversationId || isPopoverActive) {
      return;
    }

@ -57,17 +53,17 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
  };

  const renameHandler = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
+    setIsPopoverActive(false);
    setTitleInput(title);
    setRenaming(true);
-    setTimeout(() => {
-      if (!inputRef.current) {
-        return;
-      }
-      inputRef.current.focus();
-    }, 25);
  };

+  useEffect(() => {
+    if (renaming && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [renaming]);
+
  const onRename = (e: MouseEvent<HTMLButtonElement> | FocusEvent<HTMLInputElement> | KeyEvent) => {
    e.preventDefault();
    setRenaming(false);
@ -99,6 +95,12 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
    }
  };

+  const cancelRename = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setTitleInput(title);
+    setRenaming(false);
+  };
+
  const isActiveConvo =
    currentConvoId === conversationId ||
    (isLatestConvo && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new');
@ -106,95 +108,77 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
  return (
    <div
      className={cn(
-        'hover:bg-token-sidebar-surface-secondary group relative rounded-lg active:opacity-90',
+        'group relative mt-2 flex h-9 items-center rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700',
+        isActiveConvo ? 'bg-gray-200 dark:bg-gray-700' : '',
+        isSmallScreen ? 'h-12' : '',
      )}
    >
      {renaming ? (
-        <div className="absolute inset-0 z-50 flex w-full items-center rounded-lg bg-gray-200 p-1.5 dark:bg-gray-700">
+        <div className="absolute inset-0 z-20 flex w-full items-center rounded-lg bg-gray-200 p-1.5 dark:bg-gray-700">
          <input
            ref={inputRef}
            type="text"
-            className="w-full rounded border border-blue-500 bg-transparent p-0.5 text-sm leading-tight outline-none"
+            className="w-full rounded bg-transparent p-0.5 text-sm leading-tight outline-none"
            value={titleInput}
            onChange={(e) => setTitleInput(e.target.value)}
-            onBlur={onRename}
            onKeyDown={handleKeyDown}
          />
+          <div className="flex gap-1">
+            <button onClick={cancelRename}>
+              <X className="transition-color h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
+            </button>
+            <button onClick={onRename}>
+              <Check className="transition-color h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
+            </button>
+          </div>
        </div>
      ) : (
-        <HoverToggle
-          isActiveConvo={isActiveConvo}
+        <a
+          href={`/c/${conversationId}`}
+          data-testid="convo-item"
+          onClick={clickHandler}
+          className={cn(
+            'flex grow cursor-pointer items-center gap-2 overflow-hidden whitespace-nowrap break-all rounded-lg px-2 py-2',
+            isActiveConvo ? 'bg-gray-200 dark:bg-gray-700' : '',
+          )}
+          title={title}
+        >
+          <EndpointIcon
+            conversation={conversation}
+            endpointsConfig={endpointsConfig}
+            size={20}
+            context="menu-item"
+          />
+          {!renaming && (
+            <div className="relative line-clamp-1 flex-1 grow overflow-hidden">{title}</div>
+          )}
+          {isActiveConvo ? (
+            <div
+              className={cn(
+                'absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l',
+                !renaming ? 'from-gray-200 from-40% to-transparent dark:from-gray-700' : '',
+              )}
+            />
+          ) : (
+            <div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 group-hover:from-40% dark:from-gray-850 dark:group-hover:from-gray-700" />
+          )}
+        </a>
+      )}
+      <div
+        className={cn(
+          'mr-2',
+          isPopoverActive || isActiveConvo ? 'flex' : 'hidden group-hover:flex',
+        )}
+      >
+        <ConvoOptions
+          conversation={conversation}
+          retainView={retainView}
+          renameHandler={renameHandler}
          isPopoverActive={isPopoverActive}
          setIsPopoverActive={setIsPopoverActive}
-        >
-          <DropDownMenu>
-            {startupConfig && startupConfig.sharedLinksEnabled && (
-              <ShareButton
-                conversationId={conversationId}
-                title={title}
-                appendLabel={true}
-                className="mb-[3.5px]"
-                setPopoverActive={setIsPopoverActive}
-              />
-            )}
-
-            <RenameButton
-              renaming={renaming}
-              onRename={onRename}
-              renameHandler={renameHandler}
-              appendLabel={true}
-              className="mb-[3.5px]"
-            />
-            <DeleteButton
-              conversationId={conversationId}
-              retainView={retainView}
-              renaming={renaming}
-              title={title}
-              appendLabel={true}
-              className="group m-1.5 mt-[3.5px] flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600"
-            />
-          </DropDownMenu>
-          <ArchiveButton
-            className="z-50 hover:text-black dark:hover:text-white"
-            conversationId={conversationId}
-            retainView={retainView}
-            shouldArchive={true}
-            icon={<ArchiveIcon className="hover:text-gray-400" />}
-          />
-        </HoverToggle>
-      )}
-      <a
-        href={`/c/${conversationId}`}
-        data-testid="convo-item"
-        onClick={clickHandler}
-        className={cn(
-          isActiveConvo || isPopoverActive
-            ? 'group relative mt-2 flex cursor-pointer items-center gap-2 break-all rounded-lg bg-gray-200 px-2 py-2 active:opacity-50 dark:bg-gray-700'
-            : 'group relative mt-2 flex grow cursor-pointer items-center gap-2 overflow-hidden whitespace-nowrap break-all rounded-lg px-2 py-2 hover:bg-gray-200 active:opacity-50 dark:hover:bg-gray-700',
-          !isActiveConvo && !renaming ? 'peer-hover:bg-gray-200 dark:peer-hover:bg-gray-800' : '',
-        )}
-        title={title}
-      >
-        <EndpointIcon
-          conversation={conversation}
-          endpointsConfig={endpointsConfig}
-          size={20}
-          context="menu-item"
+          isActiveConvo={isActiveConvo}
        />
-        {!renaming && (
-          <div className="relative line-clamp-1 max-h-5 flex-1 grow overflow-hidden">{title}</div>
-        )}
-        {isActiveConvo ? (
-          <div
-            className={cn(
-              'absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l',
-              !renaming ? 'from-gray-200 from-60% to-transparent dark:from-gray-700' : '',
-            )}
-          />
-        ) : (
-          <div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 group-hover:from-60% dark:from-gray-850 dark:group-hover:from-gray-700" />
-        )}
-      </a>
+      </div>
    </div>
  );
 }
--- a/client/src/components/Conversations/ConvoOptions/ArchiveButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/ArchiveButton.tsx
@ -1,3 +1,4 @@
+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';
@ -7,19 +8,19 @@ import { NotificationSeverity } from '~/common';
 import { useToastContext } from '~/Providers';

 type ArchiveButtonProps = {
+  children?: React.ReactNode;
  conversationId: string;
  retainView: () => void;
  shouldArchive: boolean;
-  icon: React.ReactNode;
+  icon?: React.ReactNode;
  className?: string;
 };
-export default function ArchiveButton({
-  conversationId,
-  retainView,
-  shouldArchive,
-  icon,
-  className = '',
-}: ArchiveButtonProps) {
+
+export function useArchiveHandler(
+  conversationId: string,
+  shouldArchive: boolean,
+  retainView: () => void,
+) {
  const localize = useLocalize();
  const navigate = useNavigate();
  const { showToast } = useToastContext();
@ -29,14 +30,11 @@ export default function ArchiveButton({

  const archiveConvoMutation = useArchiveConversationMutation(conversationId);

-  const label = shouldArchive ? 'archive' : 'unarchive';
-  const archiveHandler = (
-    e:
-      | MouseEvent<HTMLButtonElement>
-      | FocusEvent<HTMLInputElement>
-      | KeyboardEvent<HTMLInputElement>,
-  ) => {
-    e.preventDefault();
+  return async (e?: MouseEvent | FocusEvent | KeyboardEvent) => {
+    if (e) {
+      e.preventDefault();
+    }
+    const label = shouldArchive ? 'archive' : 'unarchive';
    archiveConvoMutation.mutate(
      { conversationId, isArchived: shouldArchive },
      {
@ -58,6 +56,17 @@ export default function ArchiveButton({
      },
    );
  };
+}
+
+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}>
@ -67,10 +76,12 @@ export default function ArchiveButton({
            <span className="h-5 w-5">{icon}</span>
          </TooltipTrigger>
          <TooltipContent side="top" sideOffset={0}>
-            {localize(`com_ui_${label}`)}
+            {localize(`com_ui_${shouldArchive ? 'archive' : 'unarchive'}`)}
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </button>
  );
 }
+
+export { useArchiveHandler as archiveHandler };
--- a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
+++ b/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}
+        />
+      )}
+    </>
+  );
+}
--- a/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+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';
@ -14,22 +14,32 @@ import {
  TooltipTrigger,
 } from '~/components/ui';
 import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
-import { TrashIcon, CrossIcon } from '~/components/svg';
+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,
-  renaming,
  retainView,
  title,
-  appendLabel = false,
  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') {
@ -47,57 +57,56 @@ export default function DeleteButton({
    deleteConvoMutation.mutate({ conversationId, thread_id, source: 'button' });
  }, [conversationId, deleteConvoMutation, queryClient]);

-  const renderDeleteButton = () => {
-    if (appendLabel) {
-      return (
+  const dialogContent = (
+    <OGDialogTemplate
+      showCloseButton={false}
+      title={localize('com_ui_delete_conversation')}
+      className="max-w-[450px]"
+      main={
        <>
-          <TrashIcon /> {localize('com_ui_delete')}
+          <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>
-          <TooltipTrigger asChild>
-            <span>
-              <TrashIcon className="h-5 w-5" />
-            </span>
-          </TooltipTrigger>
-          <TooltipContent side="top" sideOffset={0}>
+          <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>
-    );
-  };
-
-  return (
-    <OGDialog>
-      <OGDialogTrigger asChild>
-        <button className={className}>{renaming ? <CrossIcon /> : renderDeleteButton()}</button>
-      </OGDialogTrigger>
-      <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'),
-        }}
-      />
+      {dialogContent}
    </OGDialog>
  );
 }
--- a/client/src/components/Conversations/ConvoOptions/ShareButton.tsx
+++ b/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>
+  );
+}
--- a/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
--- a/client/src/components/Conversations/ConvoOptions/index.ts
+++ b/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';
--- a/client/src/components/Conversations/RenameButton.tsx
+++ b/client/src/components/Conversations/RenameButton.tsx
@ -1,46 +0,0 @@
-import type { MouseEvent, ReactElement } from 'react';
-import { EditIcon, CheckMark } from '~/components/svg';
-import { useLocalize } from '~/hooks';
-import { cn } from '~/utils';
-
-interface RenameButtonProps {
-  renaming: boolean;
-  renameHandler: (e: MouseEvent<HTMLButtonElement>) => void;
-  onRename?: (e: MouseEvent<HTMLButtonElement>) => void;
-  appendLabel?: boolean;
-  className?: string;
-  disabled?: boolean;
-}
-
-export default function RenameButton({
-  renaming,
-  onRename,
-  renameHandler,
-  className = '',
-  disabled = false,
-  appendLabel = false,
-}: RenameButtonProps): ReactElement {
-  const localize = useLocalize();
-  const handler = renaming ? onRename : renameHandler;
-
-  return (
-    <button
-      className={cn(
-        'group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600',
-        className,
-      )}
-      disabled={disabled}
-      onClick={handler}
-    >
-      {renaming ? (
-        <CheckMark />
-      ) : appendLabel ? (
-        <>
-          <EditIcon /> {localize('com_ui_rename')}
-        </>
-      ) : (
-        <EditIcon />
-      )}
-    </button>
-  );
-}
--- a/client/src/components/Conversations/ShareButton.tsx
+++ b/client/src/components/Conversations/ShareButton.tsx
@ -1,113 +0,0 @@
-import { useState } from 'react';
-import {
-  OGDialog,
-  Tooltip,
-  OGDialogTrigger,
-  TooltipContent,
-  TooltipTrigger,
-  TooltipProvider,
-} from '~/components/ui';
-import { Share2Icon } from 'lucide-react';
-import type { TSharedLink } from 'librechat-data-provider';
-import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
-import SharedLinkButton from './SharedLinkButton';
-import ShareDialog from './ShareDialog';
-import { useLocalize } from '~/hooks';
-import { cn } from '~/utils';
-
-export default function ShareButton({
-  conversationId,
-  title,
-  className,
-  appendLabel = false,
-  setPopoverActive,
-}: {
-  conversationId: string;
-  title: string;
-  className?: string;
-  appendLabel?: boolean;
-  setPopoverActive: (isActive: boolean) => void;
-}) {
-  const localize = useLocalize();
-  const [share, setShare] = useState<TSharedLink | null>(null);
-  const [open, setOpen] = useState(false);
-  const [isUpdated, setIsUpdated] = useState(false);
-
-  const classProp: { className?: string } = {
-    className: 'p-1 hover:text-black dark:hover:text-white',
-  };
-  if (className) {
-    classProp.className = className;
-  }
-  const renderShareButton = () => {
-    if (appendLabel) {
-      return (
-        <>
-          <Share2Icon className="h-4 w-4" /> {localize('com_ui_share')}
-        </>
-      );
-    }
-    return (
-      <TooltipProvider delayDuration={250}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span>
-              <Share2Icon />
-            </span>
-          </TooltipTrigger>
-          <TooltipContent side="top" sideOffset={0}>
-            {localize('com_ui_share')}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  };
-
-  const buttons = share && (
-    <SharedLinkButton
-      share={share}
-      conversationId={conversationId}
-      setShare={setShare}
-      isUpdated={isUpdated}
-      setIsUpdated={setIsUpdated}
-    />
-  );
-
-  const onOpenChange = (open: boolean) => {
-    setPopoverActive(open);
-    setOpen(open);
-  };
-  return (
-    <OGDialog open={open} onOpenChange={onOpenChange}>
-      <OGDialogTrigger asChild>
-        <button
-          className={cn(
-            'group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600',
-            className,
-          )}
-        >
-          {renderShareButton()}
-        </button>
-      </OGDialogTrigger>
-      <OGDialogTemplate
-        buttons={buttons}
-        showCloseButton={true}
-        showCancelButton={false}
-        title={localize('com_ui_share_link_to_chat')}
-        className="max-w-[550px]"
-        main={
-          <>
-            <ShareDialog
-              setDialogOpen={setOpen}
-              conversationId={conversationId}
-              title={title}
-              share={share}
-              setShare={setShare}
-              isUpdated={isUpdated}
-            />
-          </>
-        }
-      />
-    </OGDialog>
-  );
-}
--- a/client/src/components/Conversations/ShareDialog.tsx
+++ b/client/src/components/Conversations/ShareDialog.tsx
@ -1,80 +0,0 @@
-import { useLocalize } from '~/hooks';
-
-import { useCreateSharedLinkMutation } from '~/data-provider';
-import { useEffect, useState } from 'react';
-import { TSharedLink } from 'librechat-data-provider';
-import { useToastContext } from '~/Providers';
-import { NotificationSeverity } from '~/common';
-import { Spinner } from '~/components/svg';
-
-export default function ShareDialog({
-  conversationId,
-  title,
-  share,
-  setShare,
-  setDialogOpen,
-  isUpdated,
-}: {
-  conversationId: string;
-  title: string;
-  share: TSharedLink | null;
-  setShare: (share: TSharedLink | null) => void;
-  setDialogOpen: (open: boolean) => void;
-  isUpdated: boolean;
-}) {
-  const localize = useLocalize();
-  const { showToast } = useToastContext();
-  const { mutate, isLoading } = useCreateSharedLinkMutation();
-  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,
-        });
-        setDialogOpen(false);
-      },
-    });
-
-    // mutation.mutate should only be called once
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <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>
-  );
-}
--- a/client/src/components/Conversations/index.ts
+++ b/client/src/components/Conversations/index.ts
@ -1,4 +1,4 @@
 export { default as Fork } from './Fork';
 export { default as Pages } from './Pages';
-export { default as RenameButton } from './RenameButton';
 export { default as Conversations } from './Conversations';
+export * from './ConvoOptions';