feat(ChatAgent.js): add support for skipping completion mode in ChatAgent

feat(ChatAgent.js): add a check for images when completion is skipped to add to response
feat(askGPTPlugins.js): add skipCompletion option to agentOptions
feat(client): add Switch component to ui components and use for new Agent Settings
chore(package.json): ignore client directory in nodemonConfig

client/src/components/Endpoints/EditPresetDialog.jsx

@@ -239,6 +239,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
               {preset?.endpoint === 'gptPlugins' && showAgentSettings && (
                 <AgentSettings
                   agent={preset.agent}
+                  skipCompletion={preset.agentOptions.skipCompletion}
                   model={preset.agentOptions.model}
                   endpoint={preset.agentOptions.endpoint}
                   temperature={preset.agentOptions.temperature}

client/src/components/Endpoints/Plugins/AgentSettings.jsx

@@ -1,6 +1,7 @@
 import { cn } from '~/utils/';
 import { useRecoilValue } from 'recoil';
 import {
+  Switch,
   SelectDropDown,
   Label,
   Slider,
@@ -21,26 +22,28 @@ function Settings(props) {
   const {
     readonly,
     agent,
+    skipCompletion,
     model,
     temperature,
-    // topP,
-    // freqP,
-    // presP,
     setOption,
-    // tools
   } = props;
   const endpoint = 'gptPlugins';
 
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const setModel = setOption('model');
   const setTemperature = setOption('temperature');
-  // const setTopP = setOption('top_p');
-  // const setFreqP = setOption('presence_penalty');
-  // const setPresP = setOption('frequency_penalty');
+  const setAgent = setOption('agent');
+  const setSkipCompletion = setOption('skipCompletion');
+  const onCheckedChangeAgent = (checked) => {
+    setAgent(checked ? 'functions' : 'classic');
+  };
+
+  const onCheckedChangeSkip = (checked) => {
+    setSkipCompletion(checked);
+  };
+  
 
-  // const toolsSelected = tools?.length > 0;
   const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
-  const agents = endpointsConfig?.[endpoint]?.['availableAgents'] || [];
 
   return (
     <div className="max-h-[350px] min-h-[305px] overflow-y-auto">
@@ -60,19 +63,31 @@ function Settings(props) {
               containerClassName="flex w-full resize-none"
             />
           </div>
-          <div className="grid w-full items-center gap-2">
-            <SelectDropDown
-              title="Agent Mode"
-              value={agent}
-              setValue={setOption('agent')}
-              availableValues={agents}
-              disabled={readonly}
-              className={cn(
-                defaultTextProps,
-                'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
-              )}
-              containerClassName="flex w-full resize-none"
-            />
+          <div className="grid w-full items-center gap-2 grid-cols-2">
+            <HoverCard openDelay={500}>
+              <HoverCardTrigger className='w-1/2'>
+                <label
+                  htmlFor="functions-agent"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
+                >
+                  <small>Use Functions</small>
+                </label>
+                <Switch id="functions-agent" checked={agent === 'functions'} onCheckedChange={onCheckedChangeAgent} disabled={readonly} className="mt-2 ml-4"/>
+              </HoverCardTrigger>
+              <OptionHover type="temp" side="right" />
+            </HoverCard>
+            <HoverCard openDelay={500}>
+              <HoverCardTrigger className='w-1/2 ml-[-60px]'>
+                <label
+                  htmlFor="skip-completion"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
+                >
+                  <small>Skip Completion</small>
+                </label>
+                <Switch id="skip-completion" checked={skipCompletion === true} onCheckedChange={onCheckedChangeSkip} disabled={readonly} className="mt-2 ml-4"/>
+              </HoverCardTrigger>
+              <OptionHover type="temp" side="right" />
+            </HoverCard>
           </div>
         </div>
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">

client/src/components/Input/PluginsOptions/index.jsx

@@ -188,6 +188,7 @@ function PluginsOptions() {
             {showAgentSettings ? (
               <AgentSettings
                 agent={agentOptions.agent}
+                skipCompletion={agentOptions.skipCompletion}
                 model={agentOptions.model}
                 endpoint={agentOptions.endpoint}
                 temperature={agentOptions.temperature}

client/src/components/ui/Switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from '../../utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-600 data-[state=unchecked]:bg-gray-200",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.45)] transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+ 
+export { Switch }

client/src/components/ui/index.ts

@@ -11,6 +11,7 @@ export * from './Landing';
 export * from './ModelSelect';
 export * from './Prompt';
 export * from './Slider';
+export * from './Switch';
 export * from './Tabs';
 export * from './Templates';
 export * from './Textarea';