🎨 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>
2025-12-28 22:28:51 +01:00 · 2024-07-21 19:46:43 +02:00 · 2024-07-21 19:46:43 +02:00 · 0bd59c0efe
commit 0bd59c0efe
parent 344297021f
29 changed files with 1115 additions and 916 deletions
--- 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')}
--- 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,11 +9,15 @@ 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"
@ -20,13 +25,14 @@ export default function AssistantAction({
        >
          {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>
  );
--- a/client/src/components/SidePanel/Builder/AssistantPanel.tsx
+++ b/client/src/components/SidePanel/Builder/AssistantPanel.tsx
@ -13,6 +13,7 @@ import {
 import type { FunctionTool, TConfig, TPlugin } from 'librechat-data-provider';
 import type { AssistantForm, AssistantPanelProps } from '~/common';
 import { useCreateAssistantMutation, useUpdateAssistantMutation } from '~/data-provider';
+import { cn, cardStyle, defaultTextProps, removeFocusOutlines } from '~/utils';
 import { useAssistantsMapContext, useToastContext } from '~/Providers';
 import { useSelectAssistant, useLocalize } from '~/hooks';
 import { ToolSelectDialog } from '~/components/Tools';
@ -24,13 +25,15 @@ import AssistantAction from './AssistantAction';
 import ContextButton from './ContextButton';
 import AssistantTool from './AssistantTool';
 import { Spinner } from '~/components/svg';
-import { cn, cardStyle } from '~/utils/';
 import Knowledge from './Knowledge';
 import { Panel } from '~/common';

-const labelClass = 'mb-2 block text-xs font-bold text-gray-700 dark:text-gray-400';
-const inputClass =
-  'focus:shadow-outline w-full appearance-none rounded-md border px-3 py-2 text-sm leading-tight text-gray-700 dark:text-white shadow focus:border-green-500 focus:outline-none focus:ring-0 dark:bg-gray-800 dark:border-gray-700/80';
+const labelClass = 'mb-2 text-token-text-primary block font-medium';
+const inputClass = cn(
+  defaultTextProps,
+  'flex w-full px-3 py-2 dark:border-gray-800 dark:bg-gray-800',
+  removeFocusOutlines,
+);

 export default function AssistantPanel({
  // index = 0,
@ -297,7 +300,7 @@ export default function AssistantPanel({
                  {...field}
                  value={field.value ?? ''}
                  {...{ max: 32768 }}
-                  className="focus:shadow-outline min-h-[150px] w-full resize-none resize-y appearance-none rounded-md border px-3 py-2 text-sm leading-tight text-gray-700 shadow focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700/80 dark:bg-gray-800 dark:text-white"
+                  className={cn(inputClass, 'min-h-[100px] resize-none resize-y')}
                  id="instructions"
                  placeholder={localize('com_assistants_instructions_placeholder')}
                  rows={3}
@ -357,7 +360,7 @@ export default function AssistantPanel({
              ${toolsEnabled && actionsEnabled ? ' + ' : ''}
              ${actionsEnabled ? localize('com_assistants_actions') : ''}`}
            </label>
-            <div className="space-y-1">
+            <div className="space-y-2">
              {functions.map((func, i) => (
                <AssistantTool
                  key={`${func}-${i}-${assistant_id}`}
@ -373,37 +376,39 @@ export default function AssistantPanel({
                    <AssistantAction key={i} action={action} onClick={() => setAction(action)} />
                  );
                })}
-              {toolsEnabled && (
-                <button
-                  type="button"
-                  onClick={() => setShowToolDialog(true)}
-                  className="btn border-token-border-light relative mx-1 mt-2 h-8 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800"
-                >
-                  <div className="flex w-full items-center justify-center gap-2">
-                    {localize('com_assistants_add_tools')}
-                  </div>
-                </button>
-              )}
-              {actionsEnabled && (
-                <button
-                  type="button"
-                  disabled={!assistant_id}
-                  onClick={() => {
-                    if (!assistant_id) {
-                      return showToast({
-                        message: localize('com_assistants_actions_disabled'),
-                        status: 'warning',
-                      });
-                    }
-                    setActivePanel(Panel.actions);
-                  }}
-                  className="btn border-token-border-light relative mt-2 h-8 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800"
-                >
-                  <div className="flex w-full items-center justify-center gap-2">
-                    {localize('com_assistants_add_actions')}
-                  </div>
-                </button>
-              )}
+              <div className="flex space-x-2">
+                {toolsEnabled && (
+                  <button
+                    type="button"
+                    onClick={() => setShowToolDialog(true)}
+                    className="btn btn-neutral border-token-border-light relative h-8 w-full rounded-lg font-medium"
+                  >
+                    <div className="flex w-full items-center justify-center gap-2">
+                      {localize('com_assistants_add_tools')}
+                    </div>
+                  </button>
+                )}
+                {actionsEnabled && (
+                  <button
+                    type="button"
+                    disabled={!assistant_id}
+                    onClick={() => {
+                      if (!assistant_id) {
+                        return showToast({
+                          message: localize('com_assistants_actions_disabled'),
+                          status: 'warning',
+                        });
+                      }
+                      setActivePanel(Panel.actions);
+                    }}
+                    className="btn btn-neutral border-token-border-light relative h-8 w-full rounded-lg font-medium"
+                  >
+                    <div className="flex w-full items-center justify-center gap-2">
+                      {localize('com_assistants_add_actions')}
+                    </div>
+                  </button>
+                )}
+              </div>
            </div>
          </div>
          <div className="flex items-center justify-end gap-2">
@ -415,23 +420,9 @@ export default function AssistantPanel({
              createMutation={create}
              endpoint={endpoint}
            />
-            {/* Secondary Select Button */}
-            {assistant_id && (
-              <button
-                className="btn btn-secondary"
-                type="button"
-                disabled={!assistant_id}
-                onClick={(e) => {
-                  e.preventDefault();
-                  onSelectAssistant(assistant_id);
-                }}
-              >
-                {localize('com_ui_select')}
-              </button>
-            )}
            {/* Submit Button */}
            <button
-              className="btn btn-primary focus:shadow-outline flex w-[90px] items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
+              className="btn btn-primary focus:shadow-outline flex w-full items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
              type="submit"
            >
              {create.isLoading || update.isLoading ? (
--- a/client/src/components/SidePanel/Builder/AssistantTool.tsx
+++ b/client/src/components/SidePanel/Builder/AssistantTool.tsx
@ -1,5 +1,12 @@
+import React, { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 import type { TPlugin } from 'librechat-data-provider';
-import GearIcon from '~/components/svg/GearIcon';
+import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
+import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
+import { useToastContext } from '~/Providers';
+import { TrashIcon } from '~/components/svg';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';

 export default function AssistantTool({
@ -11,42 +18,90 @@ export default function AssistantTool({
  allTools: TPlugin[];
  assistant_id?: string;
 }) {
+  const [isHovering, setIsHovering] = useState(false);
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const updateUserPlugins = useUpdateUserPluginsMutation();
+  const { getValues, setValue } = useFormContext();
  const currentTool = allTools.find((t) => t.pluginKey === tool);

+  const removeTool = (tool: string) => {
+    if (tool) {
+      updateUserPlugins.mutate(
+        { pluginKey: tool, action: 'uninstall', auth: null, isAssistantTool: true },
+        {
+          onError: (error: unknown) => {
+            showToast({ message: `Error while deleting the tool: ${error}`, status: 'error' });
+          },
+          onSuccess: () => {
+            const fns = getValues('functions').filter((fn) => fn !== tool);
+            setValue('functions', fns);
+            showToast({ message: 'Tool deleted successfully', status: 'success' });
+          },
+        },
+      );
+    }
+  };
+
  if (!currentTool) {
    return null;
  }

  return (
-    <div>
+    <OGDialog>
      <div
        className={cn(
-          'border-token-border-medium flex w-full rounded-lg border text-sm hover:cursor-pointer',
+          'flex w-full items-center rounded-lg text-sm',
          !assistant_id ? 'opacity-40' : '',
        )}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
      >
-        {currentTool.icon && (
-          <div className="flex h-9 w-9 items-center justify-center overflow-hidden rounded-full">
-            <div
-              className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-center bg-no-repeat dark:bg-white/20"
-              style={{ backgroundImage: `url(${currentTool.icon})`, backgroundSize: 'cover' }}
-            />
+        <div className="flex grow items-center">
+          {currentTool.icon && (
+            <div className="flex h-9 w-9 items-center justify-center overflow-hidden rounded-full">
+              <div
+                className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-center bg-no-repeat dark:bg-white/20"
+                style={{ backgroundImage: `url(${currentTool.icon})`, backgroundSize: 'cover' }}
+              />
+            </div>
+          )}
+          <div
+            className="h-9 grow px-3 py-2"
+            style={{ textOverflow: 'ellipsis', wordBreak: 'break-all', overflow: 'hidden' }}
+          >
+            {currentTool.name}
          </div>
-        )}
-        <div
-          className="h-9 grow px-3 py-2"
-          style={{ textOverflow: 'ellipsis', wordBreak: 'break-all', overflow: 'hidden' }}
-        >
-          {currentTool.name}
        </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 && (
+          <OGDialogTrigger asChild>
+            <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"
+            >
+              <TrashIcon />
+            </button>
+          </OGDialogTrigger>
+        )}
      </div>
-    </div>
+      <OGDialogTemplate
+        showCloseButton={false}
+        title={localize('com_ui_delete_tool')}
+        mainClassName="px-0"
+        className="max-w-[450px]"
+        main={
+          <Label className="text-left text-sm font-medium">
+            {localize('com_ui_delete_tool_confirm')}
+          </Label>
+        }
+        selection={{
+          selectHandler: () => removeTool(currentTool.pluginKey),
+          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'),
+        }}
+      />
+    </OGDialog>
  );
 }
--- a/client/src/components/SidePanel/Builder/CapabilitiesForm.tsx
+++ b/client/src/components/SidePanel/Builder/CapabilitiesForm.tsx
@ -1,9 +1,12 @@
 import { useMemo } from 'react';
 import { Capabilities } from 'librechat-data-provider';
+import { useFormContext, useWatch } from 'react-hook-form';
 import type { TConfig, AssistantsEndpoint } from 'librechat-data-provider';
+import type { AssistantForm } from '~/common';
 import ImageVision from './ImageVision';
 import { useLocalize } from '~/hooks';
 import Retrieval from './Retrieval';
+import CodeFiles from './CodeFiles';
 import Code from './Code';

 export default function CapabilitiesForm({
@ -21,6 +24,17 @@ export default function CapabilitiesForm({
 }) {
  const localize = useLocalize();

+  const methods = useFormContext<AssistantForm>();
+  const { control } = methods;
+  const assistant = useWatch({ control, name: 'assistant' });
+  const assistant_id = useWatch({ control, name: 'id' });
+  const files = useMemo(() => {
+    if (typeof assistant === 'string') {
+      return [];
+    }
+    return assistant.code_files;
+  }, [assistant]);
+
  const retrievalModels = useMemo(
    () => new Set(assistantsConfig?.retrievalModels ?? []),
    [assistantsConfig],
@ -31,7 +45,7 @@ export default function CapabilitiesForm({
  );

  return (
-    <div className="mb-6">
+    <div className="mb-4">
      <div className="mb-1.5 flex items-center">
        <span>
          <label className="text-token-text-primary block font-medium">
@ -40,11 +54,19 @@ export default function CapabilitiesForm({
        </span>
      </div>
      <div className="flex flex-col items-start gap-2">
-        {codeEnabled && <Code endpoint={endpoint} version={version} />}
-        {imageVisionEnabled && version == 1 && <ImageVision />}
+        {codeEnabled && <Code version={version} />}
        {retrievalEnabled && (
          <Retrieval endpoint={endpoint} version={version} retrievalModels={retrievalModels} />
        )}
+        {imageVisionEnabled && version == 1 && <ImageVision />}
+        {codeEnabled && version && (
+          <CodeFiles
+            assistant_id={assistant_id}
+            version={version}
+            endpoint={endpoint}
+            files={files}
+          />
+        )}
      </div>
    </div>
  );
--- a/client/src/components/SidePanel/Builder/Code.tsx
+++ b/client/src/components/SidePanel/Builder/Code.tsx
@ -1,70 +1,66 @@
-import { useMemo } from 'react';
 import { Capabilities } from 'librechat-data-provider';
-import { useFormContext, Controller, useWatch } from 'react-hook-form';
-import type { AssistantsEndpoint } from 'librechat-data-provider';
+import { useFormContext, Controller } from 'react-hook-form';
 import type { AssistantForm } from '~/common';
-import { Checkbox, QuestionMark } from '~/components/ui';
+import {
+  Checkbox,
+  HoverCard,
+  HoverCardContent,
+  HoverCardPortal,
+  HoverCardTrigger,
+} from '~/components/ui';
+import { CircleHelpIcon } from '~/components/svg';
 import { useLocalize } from '~/hooks';
-import CodeFiles from './CodeFiles';
+import { ESide } from '~/common';

-export default function Code({
-  version,
-  endpoint,
-}: {
-  version: number | string;
-  endpoint: AssistantsEndpoint;
-}) {
+export default function Code({ version }: { version: number | string }) {
  const localize = useLocalize();
  const methods = useFormContext<AssistantForm>();
  const { control, setValue, getValues } = methods;
-  const assistant = useWatch({ control, name: 'assistant' });
-  const assistant_id = useWatch({ control, name: 'id' });
-  const files = useMemo(() => {
-    if (typeof assistant === 'string') {
-      return [];
-    }
-    return assistant.code_files;
-  }, [assistant]);

  return (
    <>
-      <div className="flex items-center">
-        <Controller
-          name={Capabilities.code_interpreter}
-          control={control}
-          render={({ field }) => (
-            <Checkbox
-              {...field}
-              checked={field.value}
-              onCheckedChange={field.onChange}
-              className="relative float-left  mr-2 inline-flex h-4 w-4 cursor-pointer"
-              value={field?.value?.toString()}
-            />
-          )}
-        />
-        <label
-          className="form-check-label text-token-text-primary w-full cursor-pointer"
-          htmlFor={Capabilities.code_interpreter}
-          onClick={() =>
-            setValue(Capabilities.code_interpreter, !getValues(Capabilities.code_interpreter), {
-              shouldDirty: true,
-            })
-          }
-        >
-          <div className="flex select-none items-center">
-            {localize('com_assistants_code_interpreter')}
-            <QuestionMark />
+      <HoverCard openDelay={50}>
+        <div className="flex items-center">
+          <Controller
+            name={Capabilities.code_interpreter}
+            control={control}
+            render={({ field }) => (
+              <Checkbox
+                {...field}
+                checked={field.value}
+                onCheckedChange={field.onChange}
+                className="relative float-left  mr-2 inline-flex h-4 w-4 cursor-pointer"
+                value={field?.value?.toString()}
+              />
+            )}
+          />
+          <div className="flex items-center space-x-2">
+            <label
+              className="form-check-label text-token-text-primary w-full cursor-pointer"
+              htmlFor={Capabilities.code_interpreter}
+              onClick={() =>
+                setValue(Capabilities.code_interpreter, !getValues(Capabilities.code_interpreter), {
+                  shouldDirty: true,
+                })
+              }
+            >
+              {localize('com_assistants_code_interpreter')}
+            </label>
+            <HoverCardTrigger>
+              <CircleHelpIcon className="h-5 w-5 text-gray-500" />
+            </HoverCardTrigger>
          </div>
-        </label>
-      </div>
-      {version == 2 && (
-        <CodeFiles
-          assistant_id={assistant_id}
-          version={version}
-          endpoint={endpoint}
-          files={files}
-        />
-      )}
+          <HoverCardPortal>
+            <HoverCardContent side={ESide.Top} className="w-80">
+              <div className="space-y-2">
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  {version == 2 && localize('com_assistants_code_interpreter_info')}
+                </p>
+              </div>
+            </HoverCardContent>
+          </HoverCardPortal>
+        </div>
+      </HoverCard>
    </>
  );
 }
--- a/client/src/components/SidePanel/Builder/CodeFiles.tsx
+++ b/client/src/components/SidePanel/Builder/CodeFiles.tsx
@ -58,7 +58,7 @@ export default function CodeFiles({
  };

  return (
-    <div className={'mb-2'}>
+    <div className="mb-2 w-full">
      <div className="flex flex-col gap-4">
        <div className="text-token-text-tertiary rounded-lg text-xs">
          {localize('com_assistants_code_interpreter_files')}
@ -75,7 +75,7 @@ export default function CodeFiles({
          <button
            type="button"
            disabled={!assistant_id}
-            className="btn btn-neutral border-token-border-light relative h-8 rounded-lg font-medium"
+            className="btn btn-neutral border-token-border-light relative h-8 w-full rounded-lg font-medium"
            onClick={handleButtonClick}
          >
            <div className="flex w-full items-center justify-center gap-2">
--- a/client/src/components/SidePanel/Builder/ContextButton.tsx
+++ b/client/src/components/SidePanel/Builder/ContextButton.tsx
@ -1,4 +1,3 @@
-import * as Popover from '@radix-ui/react-popover';
 import type { Assistant, AssistantCreateParams, AssistantsEndpoint } from 'librechat-data-provider';
 import type { UseMutationResult } from '@tanstack/react-query';
 import { Dialog, DialogTrigger, Label } from '~/components/ui';
@ -7,7 +6,7 @@ import { useDeleteAssistantMutation } from '~/data-provider';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { useLocalize, useSetIndexOptions } from '~/hooks';
 import { cn, removeFocusOutlines } from '~/utils/';
-import { NewTrashIcon } from '~/components/svg';
+import { TrashIcon } from '~/components/svg';

 export default function ContextButton({
  activeModel,
@ -78,88 +77,40 @@ export default function ContextButton({

  return (
    <Dialog>
-      <Popover.Root>
-        <Popover.Trigger asChild>
-          <button
-            className={cn(
-              'btn border-token-border-light relative h-9 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800',
-              removeFocusOutlines,
-            )}
-            type="button"
-          >
-            <div className="flex w-full items-center justify-center gap-2">
-              <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                className="icon-md"
-              >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M3 12C3 10.8954 3.89543 10 5 10C6.10457 10 7 10.8954 7 12C7 13.1046 6.10457 14 5 14C3.89543 14 3 13.1046 3 12ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM17 12C17 10.8954 17.8954 10 19 10C20.1046 10 21 10.8954 21 12C21 13.1046 20.1046 14 19 14C17.8954 14 17 13.1046 17 12Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-          </button>
-        </Popover.Trigger>
-        <div
-          style={{
-            position: 'fixed',
-            left: ' 0px',
-            top: ' 0px',
-            transform: 'translate(1772.8px, 49.6px)',
-            minWidth: 'max-content',
-            zIndex: 'auto',
-          }}
-          dir="ltr"
+      <DialogTrigger asChild>
+        <button
+          className={cn(
+            'btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium',
+            removeFocusOutlines,
+          )}
+          type="button"
        >
-          <Popover.Content
-            side="top"
-            role="menu"
-            className="bg-token-surface-primary min-w-[180px] max-w-xs rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-900 dark:bg-gray-850"
-            style={{ outline: 'none', pointerEvents: 'auto' }}
-            sideOffset={8}
-            tabIndex={-1}
-            align="end"
-          >
-            <DialogTrigger asChild>
-              <Popover.Close
-                role="menuitem"
-                className="group m-1.5 flex w-full cursor-pointer gap-2 rounded p-2.5 text-sm text-red-500 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
-                tabIndex={-1}
-              >
-                <NewTrashIcon />
-                {localize('com_ui_delete') + ' ' + localize('com_ui_assistant')}
-              </Popover.Close>
-            </DialogTrigger>
-          </Popover.Content>
-        </div>
-        <DialogTemplate
-          title={localize('com_ui_delete') + ' ' + localize('com_ui_assistant')}
-          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="delete-assistant" className="text-left text-sm font-medium">
-                    {localize('com_ui_delete_assistant_confirm')}
-                  </Label>
-                </div>
+          <div className="flex w-full items-center justify-center gap-2 text-red-500">
+            <TrashIcon />
+          </div>
+        </button>
+      </DialogTrigger>
+      <DialogTemplate
+        title={localize('com_ui_delete') + ' ' + localize('com_ui_assistant')}
+        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="delete-assistant" className="text-left text-sm font-medium">
+                  {localize('com_ui_delete_assistant_confirm')}
+                </Label>
              </div>
-            </>
-          }
-          selection={{
-            selectHandler: () =>
-              deleteAssistant.mutate({ assistant_id, model: activeModel, endpoint }),
-            selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
-            selectText: localize('com_ui_delete'),
-          }}
-        />
-      </Popover.Root>
+            </div>
+          </>
+        }
+        selection={{
+          selectHandler: () =>
+            deleteAssistant.mutate({ assistant_id, model: activeModel, endpoint }),
+          selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
+          selectText: localize('com_ui_delete'),
+        }}
+      />
    </Dialog>
  );
 }
--- a/client/src/components/SidePanel/Builder/ImageVision.tsx
+++ b/client/src/components/SidePanel/Builder/ImageVision.tsx
@ -33,10 +33,7 @@ export default function ImageVision() {
          })
        }
      >
-        <div className="flex items-center">
-          {localize('com_assistants_image_vision')}
-          <QuestionMark />
-        </div>
+        <div className="flex items-center">{localize('com_assistants_image_vision')}</div>
      </label>
    </div>
  );
--- a/client/src/components/SidePanel/Builder/Retrieval.tsx
+++ b/client/src/components/SidePanel/Builder/Retrieval.tsx
@ -1,10 +1,17 @@
 import { useEffect, useMemo } from 'react';
-import { useFormContext, Controller, useWatch } from 'react-hook-form';
 import { Capabilities } from 'librechat-data-provider';
 import type { AssistantsEndpoint } from 'librechat-data-provider';
-import type { AssistantForm } from '~/common';
+import { useFormContext, Controller, useWatch } from 'react-hook-form';
+import {
+  Checkbox,
+  HoverCard,
+  HoverCardContent,
+  HoverCardPortal,
+  HoverCardTrigger,
+} from '~/components/ui';
 import OptionHover from '~/components/SidePanel/Parameters/OptionHover';
-import { Checkbox, HoverCard, HoverCardTrigger } from '~/components/ui';
+import { CircleHelpIcon } from '~/components/svg';
+import type { AssistantForm } from '~/common';
 import { useLocalize } from '~/hooks';
 import { ESide } from '~/common';
 import { cn } from '~/utils/';
@ -40,23 +47,23 @@ export default function Retrieval({

  return (
    <>
-      <div className="flex items-center">
-        <Controller
-          name={Capabilities.retrieval}
-          control={control}
-          render={({ field }) => (
-            <Checkbox
-              {...field}
-              checked={field.value}
-              disabled={isDisabled}
-              onCheckedChange={field.onChange}
-              className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
-              value={field?.value?.toString()}
-            />
-          )}
-        />
-        <HoverCard openDelay={50}>
-          <HoverCardTrigger asChild>
+      <HoverCard openDelay={50}>
+        <div className="flex items-center">
+          <Controller
+            name={Capabilities.retrieval}
+            control={control}
+            render={({ field }) => (
+              <Checkbox
+                {...field}
+                checked={field.value}
+                disabled={isDisabled}
+                onCheckedChange={field.onChange}
+                className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
+                value={field?.value?.toString()}
+              />
+            )}
+          />
+          <div className="flex items-center space-x-2">
            <label
              className={cn(
                'form-check-label text-token-text-primary w-full select-none',
@ -74,21 +81,29 @@ export default function Retrieval({
                ? localize('com_assistants_retrieval')
                : localize('com_assistants_file_search')}
            </label>
-          </HoverCardTrigger>
+            <HoverCardTrigger>
+              <CircleHelpIcon className="h-5 w-5 text-gray-500" />
+            </HoverCardTrigger>
+          </div>
+          <HoverCardPortal>
+            <HoverCardContent side={ESide.Top} disabled={isDisabled} className="ml-16 w-80">
+              <div className="space-y-2">
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  {version == 2 && localize('com_assistants_file_search_info')}
+                </p>
+              </div>
+            </HoverCardContent>
+          </HoverCardPortal>
          <OptionHover
            side={ESide.Top}
            disabled={!isDisabled}
            description="com_assistants_non_retrieval_model"
            langCode={true}
            sideOffset={20}
+            className="ml-16"
          />
-        </HoverCard>
-      </div>
-      {version == 2 && (
-        <div className="text-token-text-tertiary rounded-lg text-xs">
-          {localize('com_assistants_file_search_info')}
        </div>
-      )}
+      </HoverCard>
    </>
  );
 }
--- a/client/src/components/SidePanel/Parameters/OptionHover.tsx
+++ b/client/src/components/SidePanel/Parameters/OptionHover.tsx
@ -9,6 +9,7 @@ type TOptionHoverProps = {
  sideOffset?: number;
  disabled?: boolean;
  side: ESide;
+  className?: string;
 };

 function OptionHover({
@ -17,6 +18,7 @@ function OptionHover({
  disabled,
  langCode,
  sideOffset = 30,
+  className,
 }: TOptionHoverProps) {
  const localize = useLocalize();
  if (disabled) {
@ -25,11 +27,7 @@ function OptionHover({
  const text = langCode ? localize(description) : description;
  return (
    <HoverCardPortal>
-      <HoverCardContent
-        side={side}
-        className="z-[999] w-80 dark:bg-gray-700"
-        sideOffset={sideOffset}
-      >
+      <HoverCardContent side={side} className={`z-[999] w-80 ${className}`} sideOffset={sideOffset}>
        <div className="space-y-2">
          <p className="text-sm text-gray-600 dark:text-gray-300">{text}</p>
        </div>