📂 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/Chat/Input/PopoverButtons.tsx

@@ -1,24 +1,33 @@
-import { EModelEndpoint } from 'librechat-data-provider';
+import { useRecoilState } from 'recoil';
+import { EModelEndpoint, SettingsViews } from 'librechat-data-provider';
 import type { ReactNode } from 'react';
-import { MessagesSquared, GPTIcon } from '~/components/svg';
+import { MessagesSquared, GPTIcon, AssistantIcon, DataIcon } from '~/components/svg';
 import { useChatContext } from '~/Providers';
 import { Button } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils/';
+import store from '~/store';
 
 type TPopoverButton = {
   label: string;
   buttonClass: string;
   handler: () => void;
+  type?: 'alternative';
   icon: ReactNode;
 };
 
 export default function PopoverButtons({
   buttonClass,
   iconClass = '',
+  endpoint: _overrideEndpoint,
+  endpointType: overrideEndpointType,
+  model: overrideModel,
 }: {
   buttonClass?: string;
   iconClass?: string;
+  endpoint?: EModelEndpoint | string;
+  endpointType?: EModelEndpoint | string;
+  model?: string | null;
 }) {
   const {
     conversation,
@@ -28,9 +37,13 @@ export default function PopoverButtons({
     setShowAgentSettings,
   } = useChatContext();
   const localize = useLocalize();
+  const [settingsView, setSettingsView] = useRecoilState(store.currentSettingsView);
+
+  const { model: _model, endpoint: _endpoint, endpointType } = conversation ?? {};
+  const overrideEndpoint = overrideEndpointType ?? _overrideEndpoint;
+  const endpoint = overrideEndpoint ?? endpointType ?? _endpoint;
+  const model = overrideModel ?? _model;
 
-  const { model, endpoint: _endpoint, endpointType } = conversation ?? {};
-  const endpoint = endpointType ?? _endpoint;
   const isGenerativeModel = model?.toLowerCase()?.includes('gemini');
   const isChatModel = !isGenerativeModel && model?.toLowerCase()?.includes('chat');
   const isTextModel = !isGenerativeModel && !isChatModel && /code|text/.test(model ?? '');
@@ -38,10 +51,12 @@ export default function PopoverButtons({
   const { showExamples } = optionSettings;
   const showExamplesButton = !isGenerativeModel && !isTextModel && isChatModel;
 
-  const triggerExamples = () =>
+  const triggerExamples = () => {
+    setSettingsView(SettingsViews.default);
     setOptionSettings((prev) => ({ ...prev, showExamples: !prev.showExamples }));
+  };
 
-  const buttons: { [key: string]: TPopoverButton[] } = {
+  const endpointSpecificbuttons: { [key: string]: TPopoverButton[] } = {
     [EModelEndpoint.google]: [
       {
         label: localize(showExamples ? 'com_hide_examples' : 'com_show_examples'),
@@ -56,14 +71,16 @@ export default function PopoverButtons({
           showAgentSettings ? 'com_show_completion_settings' : 'com_show_agent_settings',
         ),
         buttonClass: '',
-        handler: () => setShowAgentSettings((prev) => !prev),
+        handler: () => {
+          setSettingsView(SettingsViews.default);
+          setShowAgentSettings((prev) => !prev);
+        },
         icon: <GPTIcon className={cn('mr-1 w-[14px]', iconClass)} size={24} />,
       },
     ],
   };
 
-  const endpointButtons = buttons[endpoint ?? ''];
-  if (!endpointButtons) {
+  if (!endpoint) {
     return null;
   }
 
@@ -71,23 +88,71 @@ export default function PopoverButtons({
     return null;
   }
 
+  const additionalButtons: { [key: string]: TPopoverButton[] } = {
+    [SettingsViews.default]: [
+      {
+        label: 'Context Settings',
+        buttonClass: '',
+        type: 'alternative',
+        handler: () => setSettingsView(SettingsViews.advanced),
+        icon: <DataIcon className={cn('mr-1 h-6 w-[14px]', iconClass)} />,
+      },
+    ],
+    [SettingsViews.advanced]: [
+      {
+        label: 'Model Settings',
+        buttonClass: '',
+        type: 'alternative',
+        handler: () => setSettingsView(SettingsViews.default),
+        icon: <AssistantIcon className={cn('mr-1 h-6 w-[14px]', iconClass)} />,
+      },
+    ],
+  };
+
+  const endpointButtons = endpointSpecificbuttons[endpoint] ?? [];
+
+  const disabled = true;
+
   return (
-    <div>
-      {endpointButtons.map((button, index) => (
-        <Button
-          key={`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-600 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
-            buttonClass ?? '',
-          )}
-          onClick={button.handler}
-        >
-          {button.icon}
-          {button.label}
-        </Button>
-      ))}
+    <div className="flex w-full justify-between">
+      <div className="flex items-center justify-start">
+        {endpointButtons.map((button, index) => (
+          <Button
+            key={`button-${index}`}
+            type="button"
+            className={cn(
+              button.buttonClass,
+              'border-2 border-gray-300/50 focus:ring-1 focus:ring-green-500/90 dark:border-gray-500/50 dark:focus:ring-green-500',
+              'ml-1 h-full bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-white',
+              buttonClass ?? '',
+            )}
+            onClick={button.handler}
+          >
+            {button.icon}
+            {button.label}
+          </Button>
+        ))}
+      </div>
+      {disabled ? null : (
+        <div className="flex w-[150px] items-center justify-end">
+          {additionalButtons[settingsView].map((button, index) => (
+            <Button
+              key={`button-${index}`}
+              type="button"
+              className={cn(
+                button.buttonClass,
+                'flex justify-center border-2 border-gray-300/50 focus:ring-1 focus:ring-green-500/90 dark:border-gray-500/50 dark:focus:ring-green-500',
+                'h-full w-full bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-white',
+                buttonClass ?? '',
+              )}
+              onClick={button.handler}
+            >
+              {button.icon}
+              {button.label}
+            </Button>
+          ))}
+        </div>
+      )}
     </div>
   );
 }