📂 feat: RAG Improvements (#2169)

* feat: new vector file processing strategy

* chore: remove unused client files

* chore: remove more unused client files

* chore: remove more unused client files and move used to new dir

* chore(DataIcon): add className

* WIP: Model Endpoint Settings Update, draft additional context settings

* feat: improve parsing for augmented prompt, add full context option

* chore: remove volume mounting from rag.yml as no longer necessary

client/src/components/Endpoints/AlternativeSettings.tsx

@@ -0,0 +1,24 @@
+import { useRecoilValue } from 'recoil';
+import { SettingsViews } from 'librechat-data-provider';
+import type { TSettingsProps } from '~/common';
+import { Advanced } from './Settings';
+import { cn } from '~/utils';
+import store from '~/store';
+
+export default function AlternativeSettings({
+  conversation,
+  setOption,
+  isPreset = false,
+  className = '',
+}: TSettingsProps & { isMultiChat?: boolean }) {
+  const currentSettingsView = useRecoilValue(store.currentSettingsView);
+  if (!conversation?.endpoint || currentSettingsView === SettingsViews.default) {
+    return null;
+  }
+
+  return (
+    <div className={cn('hide-scrollbar h-[500px] overflow-y-auto md:mb-2 md:h-[350px]', className)}>
+      <Advanced conversation={conversation} setOption={setOption} isPreset={isPreset} />
+    </div>
+  );
+}

client/src/components/Endpoints/EditPresetDialog.tsx

@@ -1,145 +0,0 @@
-import axios from 'axios';
-import { useEffect } from 'react';
-import filenamify from 'filenamify';
-import exportFromJSON from 'export-from-json';
-import { useSetRecoilState, useRecoilState } from 'recoil';
-import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
-import type { TEditPresetProps } from '~/common';
-import { useSetOptions, useLocalize } from '~/hooks';
-import { Input, Label, Dropdown, Dialog, DialogClose, DialogButton } from '~/components/';
-import DialogTemplate from '~/components/ui/DialogTemplate';
-import PopoverButtons from './PopoverButtons';
-import EndpointSettings from './EndpointSettings';
-import { cn, defaultTextProps, removeFocusOutlines, cleanupPreset, mapEndpoints } from '~/utils/';
-import store from '~/store';
-
-const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }: TEditPresetProps) => {
-  const [preset, setPreset] = useRecoilState(store.preset);
-  const setPresets = useSetRecoilState(store.presets);
-  const { data: availableEndpoints = [] } = useGetEndpointsQuery({
-    select: mapEndpoints,
-  });
-  const { setOption } = useSetOptions(_preset);
-  const localize = useLocalize();
-
-  const submitPreset = () => {
-    if (!preset) {
-      return;
-    }
-    axios({
-      method: 'post',
-      url: '/api/presets',
-      data: cleanupPreset({ preset }),
-      withCredentials: true,
-    }).then((res) => {
-      setPresets(res?.data);
-    });
-  };
-
-  const exportPreset = () => {
-    if (!preset) {
-      return;
-    }
-    const fileName = filenamify(preset?.title || 'preset');
-    exportFromJSON({
-      data: cleanupPreset({ preset }),
-      fileName,
-      exportType: exportFromJSON.types.json,
-    });
-  };
-
-  useEffect(() => {
-    setPreset(_preset);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-
-  const { endpoint } = preset || {};
-  if (!endpoint) {
-    return null;
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogTemplate
-        title={`${title || localize('com_ui_edit') + ' ' + localize('com_endpoint_preset')} - ${
-          preset?.title
-        }`}
-        className="h-full max-w-full overflow-y-auto pb-4 sm:w-[680px] sm:pb-0 md:h-[720px] md:w-[750px] md:overflow-y-hidden lg:w-[950px] xl:h-[720px]"
-        main={
-          <div className="flex w-full flex-col items-center gap-2 md:h-[530px]">
-            <div className="grid w-full grid-cols-5 gap-6">
-              <div className="col-span-4 flex items-start justify-start gap-4">
-                <div className="flex w-full flex-col">
-                  <Label htmlFor="preset-name" className="mb-1 text-left text-sm font-medium">
-                    {localize('com_endpoint_preset_name')}
-                  </Label>
-                  <Input
-                    id="preset-name"
-                    value={preset?.title || ''}
-                    onChange={(e) => setOption('title')(e.target.value || '')}
-                    placeholder={localize('com_endpoint_set_custom_name')}
-                    className={cn(
-                      defaultTextProps,
-                      'flex h-10 max-h-10 w-full resize-none px-3 py-2',
-                      removeFocusOutlines,
-                    )}
-                  />
-                </div>
-                <div className="flex w-full flex-col">
-                  <Label htmlFor="endpoint" className="mb-1 text-left text-sm font-medium">
-                    {localize('com_endpoint')}
-                  </Label>
-                  <Dropdown
-                    value={endpoint || ''}
-                    onChange={(value) => setOption('endpoint')(value)}
-                    options={availableEndpoints}
-                    className={cn()}
-                  />
-                </div>
-              </div>
-              <div className="col-span-2 flex items-start justify-start gap-4 sm:col-span-1">
-                <div className="flex w-full flex-col">
-                  <Label
-                    htmlFor="endpoint"
-                    className="mb-1 hidden text-left text-sm font-medium sm:block"
-                  >
-                    {'ㅤ'}
-                  </Label>
-                  <PopoverButtons
-                    endpoint={endpoint}
-                    buttonClass="ml-0 w-full dark:bg-gray-700 dark:hover:bg-gray-800 p-2 h-[40px] justify-center mt-0"
-                    iconClass="hidden lg:block w-4"
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="my-4 w-full border-t border-gray-300 dark:border-gray-500" />
-            <div className="w-full p-0">
-              <EndpointSettings
-                conversation={preset}
-                setOption={setOption}
-                isPreset={true}
-                className="h-full md:mb-4 md:h-[440px]"
-              />
-            </div>
-          </div>
-        }
-        buttons={
-          <div className="mb-6 md:mb-2">
-            <DialogButton onClick={exportPreset} className="dark:hover:gray-400 border-gray-700">
-              {localize('com_endpoint_export')}
-            </DialogButton>
-            <DialogClose
-              onClick={submitPreset}
-              className="dark:hover:gray-400 ml-2 border-gray-700 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800"
-            >
-              {localize('com_ui_save')}
-            </DialogClose>
-          </div>
-        }
-      />
-    </Dialog>
-  );
-};
-
-export default EditPresetDialog;

client/src/components/Endpoints/EndpointOptionsDialog.tsx

@@ -1,113 +0,0 @@
-import exportFromJSON from 'export-from-json';
-import { useEffect, useState } from 'react';
-import { useRecoilState } from 'recoil';
-import { tPresetSchema } from 'librechat-data-provider';
-import type { TSetOption, TEditPresetProps } from '~/common';
-import { Dialog, DialogButton } from '~/components/ui';
-import DialogTemplate from '~/components/ui/DialogTemplate';
-import SaveAsPresetDialog from './SaveAsPresetDialog';
-import EndpointSettings from './EndpointSettings';
-import PopoverButtons from './PopoverButtons';
-import { cleanupPreset } from '~/utils';
-import { useLocalize } from '~/hooks';
-import store from '~/store';
-
-// A preset dialog to show readonly preset values.
-const EndpointOptionsDialog = ({
-  open,
-  onOpenChange,
-  preset: _preset,
-  title,
-}: TEditPresetProps) => {
-  const [preset, setPreset] = useRecoilState(store.preset);
-  const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
-  const localize = useLocalize();
-
-  const setOption: TSetOption = (param) => (newValue) => {
-    const update = {};
-    update[param] = newValue;
-    setPreset((prevState) =>
-      tPresetSchema.parse({
-        ...prevState,
-        ...update,
-      }),
-    );
-  };
-
-  const saveAsPreset = () => {
-    setSaveAsDialogShow(true);
-  };
-
-  const exportPreset = () => {
-    if (!preset) {
-      return;
-    }
-    exportFromJSON({
-      data: cleanupPreset({ preset }),
-      fileName: `${preset?.title}.json`,
-      exportType: exportFromJSON.types.json,
-    });
-  };
-
-  useEffect(() => {
-    setPreset(_preset);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-
-  const { endpoint } = preset ?? {};
-  if (!endpoint) {
-    return null;
-  }
-
-  if (!preset) {
-    return null;
-  }
-
-  return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogTemplate
-          title={`${title || localize('com_endpoint_save_convo_as_preset')}`}
-          className="h-full max-w-full overflow-y-auto pb-4 sm:w-[680px] sm:pb-0 md:h-[680px] md:w-[750px] md:overflow-y-hidden lg:w-[950px]"
-          // headerClassName="sm:p-2 h-16"
-          main={
-            <div className="flex w-full flex-col items-center gap-2 md:h-[530px]">
-              <div className="w-full p-0">
-                <PopoverButtons
-                  endpoint={endpoint}
-                  buttonClass="ml-0 mb-4 col-span-2 dark:bg-gray-700 dark:hover:bg-gray-800 p-2"
-                />
-                <EndpointSettings
-                  conversation={preset}
-                  setOption={setOption}
-                  isPreset={true}
-                  className="h-full md:mb-0 md:h-[490px]"
-                />
-              </div>
-            </div>
-          }
-          buttons={
-            <div className="mb-6 md:mb-2">
-              <DialogButton onClick={exportPreset} className="dark:hover:gray-400 border-gray-700">
-                {localize('com_endpoint_export')}
-              </DialogButton>
-              <DialogButton
-                onClick={saveAsPreset}
-                className="dark:hover:gray-400 ml-2 border-gray-700 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800"
-              >
-                {localize('com_endpoint_save_as_preset')}
-              </DialogButton>
-            </div>
-          }
-        />
-      </Dialog>
-      <SaveAsPresetDialog
-        open={saveAsDialogShow}
-        onOpenChange={setSaveAsDialogShow}
-        preset={preset}
-      />
-    </>
-  );
-};
-
-export default EndpointOptionsDialog;

client/src/components/Endpoints/EndpointSettings.tsx

@@ -1,4 +1,5 @@
 import { useRecoilValue } from 'recoil';
+import { SettingsViews } from 'librechat-data-provider';
 import type { TSettingsProps } from '~/common';
 import { getSettings } from './Settings';
 import { cn } from '~/utils';
@@ -12,7 +13,8 @@ export default function Settings({
   isMultiChat = false,
 }: TSettingsProps & { isMultiChat?: boolean }) {
   const modelsConfig = useRecoilValue(store.modelsConfig);
-  if (!conversation?.endpoint) {
+  const currentSettingsView = useRecoilValue(store.currentSettingsView);
+  if (!conversation?.endpoint || currentSettingsView !== SettingsViews.default) {
     return null;
   }
 

client/src/components/Endpoints/PopoverButtons.tsx

@@ -1,80 +0,0 @@
-import { EModelEndpoint } from 'librechat-data-provider';
-import { MessagesSquared, GPTIcon } from '~/components/svg';
-import { useRecoilState } from 'recoil';
-import { Button } from '~/components';
-import { cn } from '~/utils/';
-import store from '~/store';
-import { useLocalize } from '~/hooks';
-
-type TPopoverButton = {
-  label: string;
-  buttonClass: string;
-  handler: () => void;
-  icon: React.ReactNode;
-};
-
-export default function PopoverButtons({
-  endpoint,
-  buttonClass,
-  iconClass = '',
-}: {
-  endpoint: EModelEndpoint | string;
-  buttonClass?: string;
-  iconClass?: string;
-}) {
-  const localize = useLocalize();
-  const [optionSettings, setOptionSettings] = useRecoilState(store.optionSettings);
-  const [showAgentSettings, setShowAgentSettings] = useRecoilState(store.showAgentSettings);
-  const { showExamples, isCodeChat } = optionSettings;
-  const triggerExamples = () =>
-    setOptionSettings((prev) => ({ ...prev, showExamples: !prev.showExamples }));
-
-  const buttons: { [key: string]: TPopoverButton[] } = {
-    google: [
-      {
-        label:
-          (showExamples ? localize('com_endpoint_hide') : localize('com_endpoint_show')) +
-          localize('com_endpoint_examples'),
-        buttonClass: isCodeChat ? 'disabled' : '',
-        handler: triggerExamples,
-        icon: <MessagesSquared className={cn('mr-1 w-[14px]', iconClass)} />,
-      },
-    ],
-    gptPlugins: [
-      {
-        label: localize(
-          'com_endpoint_show_what_settings',
-          showAgentSettings ? localize('com_endpoint_completion') : localize('com_endpoint_agent'),
-        ),
-        buttonClass: '',
-        handler: () => setShowAgentSettings((prev) => !prev),
-        icon: <GPTIcon className={cn('mr-1 w-[14px]', iconClass)} size={24} />,
-      },
-    ],
-  };
-
-  const endpointButtons = buttons[endpoint];
-  if (!endpointButtons) {
-    return null;
-  }
-
-  return (
-    <div>
-      {endpointButtons.map((button, index) => (
-        <Button
-          key={`${endpoint}-button-${index}`}
-          type="button"
-          className={cn(
-            button.buttonClass,
-            'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
-            buttonClass ?? '',
-          )}
-          onClick={button.handler}
-        >
-          {button.icon}
-          {button.label}
-        </Button>
-      ))}
-    </div>
-  );
-}

client/src/components/Endpoints/Settings/Advanced.tsx

@@ -0,0 +1,333 @@
+import TextareaAutosize from 'react-textarea-autosize';
+import { ImageDetail, imageDetailNumeric, imageDetailValue } from 'librechat-data-provider';
+import {
+  Input,
+  Label,
+  Switch,
+  Slider,
+  HoverCard,
+  InputNumber,
+  HoverCardTrigger,
+} from '~/components/ui';
+import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils/';
+import { useLocalize, useDebouncedInput } from '~/hooks';
+import type { TModelSelectProps } from '~/common';
+import OptionHover from './OptionHover';
+import { ESide } from '~/common';
+
+export default function Settings({
+  conversation,
+  setOption,
+  readonly,
+}: Omit<TModelSelectProps, 'models'>) {
+  const localize = useLocalize();
+  const {
+    endpoint,
+    endpointType,
+    chatGptLabel,
+    promptPrefix,
+    temperature,
+    top_p: topP,
+    frequency_penalty: freqP,
+    presence_penalty: presP,
+    resendFiles,
+    imageDetail,
+  } = conversation ?? {};
+  const [setChatGptLabel, chatGptLabelValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'chatGptLabel',
+    initialValue: chatGptLabel,
+  });
+  const [setPromptPrefix, promptPrefixValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'promptPrefix',
+    initialValue: promptPrefix,
+  });
+  const [setTemperature, temperatureValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'temperature',
+    initialValue: temperature,
+  });
+  const [setTopP, topPValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'top_p',
+    initialValue: topP,
+  });
+  const [setFreqP, freqPValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'frequency_penalty',
+    initialValue: freqP,
+  });
+  const [setPresP, presPValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'presence_penalty',
+    initialValue: presP,
+  });
+
+  if (!conversation) {
+    return null;
+  }
+
+  const setResendFiles = setOption('resendFiles');
+  const setImageDetail = setOption('imageDetail');
+
+  const optionEndpoint = endpointType ?? endpoint;
+
+  return (
+    <div className="grid grid-cols-5 gap-6">
+      <div className="col-span-5 flex flex-col items-center justify-start gap-6 sm:col-span-3">
+        <div className="grid w-full items-center gap-2">
+          <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
+            {localize('com_endpoint_custom_name')}{' '}
+            <small className="opacity-40">({localize('com_endpoint_default_blank')})</small>
+          </Label>
+          <Input
+            id="chatGptLabel"
+            disabled={readonly}
+            value={(chatGptLabelValue as string) || ''}
+            onChange={setChatGptLabel}
+            placeholder={localize('com_endpoint_openai_custom_name_placeholder')}
+            className={cn(
+              defaultTextProps,
+              'flex h-10 max-h-10 w-full resize-none px-3 py-2',
+              removeFocusOutlines,
+            )}
+          />
+        </div>
+        <div className="grid w-full items-center gap-2">
+          <Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
+            {localize('com_endpoint_prompt_prefix')}{' '}
+            <small className="opacity-40">({localize('com_endpoint_default_blank')})</small>
+          </Label>
+          <TextareaAutosize
+            id="promptPrefix"
+            disabled={readonly}
+            value={(promptPrefixValue as string) || ''}
+            onChange={setPromptPrefix}
+            placeholder={localize('com_endpoint_openai_prompt_prefix_placeholder')}
+            className={cn(
+              defaultTextProps,
+              'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
+            )}
+          />
+        </div>
+      </div>
+      <div className="col-span-5 flex flex-col items-center justify-start gap-6 px-3 sm:col-span-2">
+        <HoverCard openDelay={300}>
+          <HoverCardTrigger className="grid w-full items-center gap-2">
+            <div className="flex justify-between">
+              <Label htmlFor="temp-int" className="text-left text-sm font-medium">
+                {localize('com_endpoint_temperature')}{' '}
+                <small className="opacity-40">
+                  ({localize('com_endpoint_default_with_num', '1')})
+                </small>
+              </Label>
+              <InputNumber
+                id="temp-int"
+                disabled={readonly}
+                value={temperatureValue as number}
+                onChange={setTemperature}
+                max={2}
+                min={0}
+                step={0.01}
+                controls={false}
+                className={cn(
+                  defaultTextProps,
+                  cn(
+                    optionText,
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                  ),
+                )}
+              />
+            </div>
+            <Slider
+              disabled={readonly}
+              value={[(temperatureValue as number) ?? 1]}
+              onValueChange={(value) => setTemperature(value[0])}
+              doubleClickHandler={() => setTemperature(1)}
+              max={2}
+              min={0}
+              step={0.01}
+              className="flex h-4 w-full"
+            />
+          </HoverCardTrigger>
+          <OptionHover endpoint={optionEndpoint ?? ''} type="temp" side={ESide.Left} />
+        </HoverCard>
+        <HoverCard openDelay={300}>
+          <HoverCardTrigger className="grid w-full items-center gap-2">
+            <div className="flex justify-between">
+              <Label htmlFor="top-p-int" className="text-left text-sm font-medium">
+                {localize('com_endpoint_top_p')}{' '}
+                <small className="opacity-40">({localize('com_endpoint_default')}: 1)</small>
+              </Label>
+              <InputNumber
+                id="top-p-int"
+                disabled={readonly}
+                value={topPValue as number}
+                onChange={(value) => setTopP(Number(value))}
+                max={1}
+                min={0}
+                step={0.01}
+                controls={false}
+                className={cn(
+                  defaultTextProps,
+                  cn(
+                    optionText,
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                  ),
+                )}
+              />
+            </div>
+            <Slider
+              disabled={readonly}
+              value={[(topPValue as number) ?? 1]}
+              onValueChange={(value) => setTopP(value[0])}
+              doubleClickHandler={() => setTopP(1)}
+              max={1}
+              min={0}
+              step={0.01}
+              className="flex h-4 w-full"
+            />
+          </HoverCardTrigger>
+          <OptionHover endpoint={optionEndpoint ?? ''} type="topp" side={ESide.Left} />
+        </HoverCard>
+
+        <HoverCard openDelay={300}>
+          <HoverCardTrigger className="grid w-full items-center gap-2">
+            <div className="flex justify-between">
+              <Label htmlFor="freq-penalty-int" className="text-left text-sm font-medium">
+                {localize('com_endpoint_frequency_penalty')}{' '}
+                <small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
+              </Label>
+              <InputNumber
+                id="freq-penalty-int"
+                disabled={readonly}
+                value={freqPValue as number}
+                onChange={(value) => setFreqP(Number(value))}
+                max={2}
+                min={-2}
+                step={0.01}
+                controls={false}
+                className={cn(
+                  defaultTextProps,
+                  cn(
+                    optionText,
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                  ),
+                )}
+              />
+            </div>
+            <Slider
+              disabled={readonly}
+              value={[(freqPValue as number) ?? 0]}
+              onValueChange={(value) => setFreqP(value[0])}
+              doubleClickHandler={() => setFreqP(0)}
+              max={2}
+              min={-2}
+              step={0.01}
+              className="flex h-4 w-full"
+            />
+          </HoverCardTrigger>
+          <OptionHover endpoint={optionEndpoint ?? ''} type="freq" side={ESide.Left} />
+        </HoverCard>
+
+        <HoverCard openDelay={300}>
+          <HoverCardTrigger className="grid w-full items-center gap-2">
+            <div className="flex justify-between">
+              <Label htmlFor="pres-penalty-int" className="text-left text-sm font-medium">
+                {localize('com_endpoint_presence_penalty')}{' '}
+                <small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
+              </Label>
+              <InputNumber
+                id="pres-penalty-int"
+                disabled={readonly}
+                value={presPValue as number}
+                onChange={(value) => setPresP(Number(value))}
+                max={2}
+                min={-2}
+                step={0.01}
+                controls={false}
+                className={cn(
+                  defaultTextProps,
+                  cn(
+                    optionText,
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                  ),
+                )}
+              />
+            </div>
+            <Slider
+              disabled={readonly}
+              value={[(presPValue as number) ?? 0]}
+              onValueChange={(value) => setPresP(value[0])}
+              doubleClickHandler={() => setPresP(0)}
+              max={2}
+              min={-2}
+              step={0.01}
+              className="flex h-4 w-full"
+            />
+          </HoverCardTrigger>
+          <OptionHover endpoint={optionEndpoint ?? ''} type="pres" side={ESide.Left} />
+        </HoverCard>
+        <div className="w-full">
+          <div className="mb-2 flex w-full justify-between gap-2">
+            <label
+              htmlFor="resend-files"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
+            >
+              <small>{localize('com_endpoint_plug_resend_files')}</small>
+            </label>
+            <label
+              htmlFor="image-detail-value"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
+            >
+              <small>{localize('com_endpoint_plug_image_detail')}</small>
+            </label>
+            <Input
+              id="image-detail-value"
+              disabled={true}
+              value={imageDetail ?? ImageDetail.auto}
+              className={cn(
+                defaultTextProps,
+                optionText,
+                'flex rounded-md bg-transparent py-2 text-xs focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:border-gray-700',
+                'pointer-events-none max-h-5 w-12 border-0 group-hover/temp:border-gray-200',
+              )}
+            />
+          </div>
+          <div className="flex w-full justify-between gap-2">
+            <HoverCard openDelay={500}>
+              <HoverCardTrigger>
+                <Switch
+                  id="resend-files"
+                  checked={resendFiles ?? true}
+                  onCheckedChange={(checked: boolean) => setResendFiles(checked)}
+                  disabled={readonly}
+                  className="flex"
+                />
+                <OptionHover endpoint={optionEndpoint ?? ''} type="resend" side={ESide.Bottom} />
+              </HoverCardTrigger>
+            </HoverCard>
+            <HoverCard openDelay={500}>
+              <HoverCardTrigger className="flex w-[52%] md:w-[125px]">
+                <Slider
+                  id="image-detail-slider"
+                  disabled={readonly}
+                  value={[
+                    imageDetailNumeric[imageDetail ?? ''] ?? imageDetailNumeric[ImageDetail.auto],
+                  ]}
+                  onValueChange={(value) => setImageDetail(imageDetailValue[value[0]])}
+                  doubleClickHandler={() => setImageDetail(ImageDetail.auto)}
+                  max={2}
+                  min={0}
+                  step={1}
+                />
+                <OptionHover endpoint={optionEndpoint ?? ''} type="detail" side={ESide.Bottom} />
+              </HoverCardTrigger>
+            </HoverCard>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/Endpoints/Settings/index.ts

@@ -1,3 +1,4 @@
+export { default as Advanced } from './Advanced';
 export { default as AssistantsSettings } from './Assistants';
 export { default as OpenAISettings } from './OpenAI';
 export { default as BingAISettings } from './BingAI';

client/src/components/Endpoints/index.ts

@@ -1,7 +1,6 @@
 export { default as Icon } from './Icon';
 export { default as MinimalIcon } from './MinimalIcon';
-export { default as PopoverButtons } from './PopoverButtons';
 export { default as EndpointSettings } from './EndpointSettings';
 export { default as SaveAsPresetDialog } from './SaveAsPresetDialog';
-export { default as EndpointOptionsDialog } from './EndpointOptionsDialog';
+export { default as AlternativeSettings } from './AlternativeSettings';
 export { default as EndpointOptionsPopover } from './EndpointOptionsPopover';