feat(client): add @radix-ui/react-checkbox dependency and create BingAI Settings component

feat(BingAIOptions): add advanced mode to BingAIOptions component
feat(Checkbox): add Checkbox component to ui components

client/package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@headlessui/react": "^1.7.13",
         "@radix-ui/react-alert-dialog": "^1.0.2",
+        "@radix-ui/react-checkbox": "^1.0.3",
         "@radix-ui/react-dialog": "^1.0.2",
         "@radix-ui/react-dropdown-menu": "^2.0.2",
         "@radix-ui/react-hover-card": "^1.0.5",
@@ -2720,6 +2721,26 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.3.tgz",
+      "integrity": "sha512-55B8/vKzTuzxllH5sGJO4zaBf9gYpJuJRRzaOKm+0oAefRnMvbf+Kgww7IOANVN0w3z7agFJgtnXaZl8Uj95AA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-use-previous": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.2",
       "license": "MIT",
@@ -14946,6 +14967,22 @@
         "@radix-ui/react-primitive": "1.0.2"
       }
     },
+    "@radix-ui/react-checkbox": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.3.tgz",
+      "integrity": "sha512-55B8/vKzTuzxllH5sGJO4zaBf9gYpJuJRRzaOKm+0oAefRnMvbf+Kgww7IOANVN0w3z7agFJgtnXaZl8Uj95AA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-use-previous": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0"
+      }
+    },
     "@radix-ui/react-collection": {
       "version": "1.0.2",
       "requires": {

client/package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.13",
     "@radix-ui/react-alert-dialog": "^1.0.2",
+    "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-dropdown-menu": "^2.0.2",
     "@radix-ui/react-hover-card": "^1.0.5",

client/src/components/Endpoints/BingAI/Settings.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { Input } from '~/components/ui/Input.tsx';
+import { Label } from '~/components/ui/Label.tsx';
+import { Checkbox } from '~/components/ui/Checkbox.tsx';
+import { cn } from '~/utils/';
+// import ModelDropDown from '../../ui/ModelDropDown';
+// import { Slider } from '~/components/ui/Slider.tsx';
+// import OptionHover from './OptionHover';
+// import { HoverCard, HoverCardTrigger } from '~/components/ui/HoverCard.tsx';
+const defaultTextProps =
+  'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
+
+const optionText =
+  'p-0 shadow-none text-right pr-1 h-8 border-transparent focus:ring-[#10a37f] focus:ring-offset-0 focus:ring-opacity-100 hover:bg-gray-800/10 dark:hover:bg-white/10 focus:bg-gray-800/10 dark:focus:bg-white/10 transition-colors';
+
+function Settings(props) {
+  const [showSystemMessage, setShowSystemMessage] = React.useState(false);
+  const { context, setContext, systemMessage, setSystemMessage, jailbreak, setJailbreak } = props;
+
+  return (
+    <>
+      <div className="grid gap-6 sm:grid-cols-2">
+        <div className="col-span-1 flex flex-col items-center justify-start gap-6">
+          <div className="grid w-full items-center gap-2">
+            <Label
+              htmlFor="context"
+              className="text-left text-sm font-medium"
+            >
+              Context <small className="opacity-40">(default: blank)</small>
+            </Label>
+            <TextareaAutosize
+              id="context"
+              value={context || ''}
+              onChange={e => setContext(e.target.value || null)}
+              placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'"
+              className={cn(
+                defaultTextProps,
+                'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 '
+              )}
+            />
+          </div>
+        </div>
+        <div className="col-span-1 flex flex-col items-center justify-start gap-6">
+          <div className="grid w-full items-center gap-2">
+            <div className="flex items-center space-x-3">
+              <Checkbox
+                id="jailbreak"
+                value={jailbreak}
+                className="dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 focus:ring-opacity-20 dark:focus:ring-opacity-50 dark:focus:ring-offset-0 dark:focus:ring-gray-600"
+                // onCheckedChange={setJailbreak}
+                onCheckedChange={checked => {
+                  setJailbreak(checked);
+                  setShowSystemMessage(checked);
+                }}
+              />
+              <label
+                htmlFor="jailbreak"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
+              >
+                Jailbreak
+              </label>
+                <Label
+                  htmlFor="systemMessage"
+                  className="text-right text-sm font-medium mr-0 w-full"
+                  style={{ opacity: showSystemMessage ? '1' : '0' }}
+                >
+                  System Message <small className="opacity-40">(default: Sydney)</small>
+                </Label>
+            </div>
+            {showSystemMessage && (
+              <>
+                {/* <Label
+                  htmlFor="systemMessage"
+                  className="text-left text-sm font-medium"
+                >
+                  System Message <small className="opacity-40">(default: blank)</small>
+                </Label> */}
+                <TextareaAutosize
+                  id="systemMessage"
+                  value={systemMessage || ''}
+                  onChange={e => setSystemMessage(e.target.value || null)}
+                  placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'"
+                  className={cn(
+                    defaultTextProps,
+                    'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 '
+                  )}
+                />
+              </>
+            )}
+          </div>
+          {/* <HoverCard>
+            <HoverCardTrigger className="grid w-full items-center gap-2"> 
+            </HoverCardTrigger>
+            <OptionHover
+              type="temp"
+              side="left"
+            />
+          </HoverCard> */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Settings;

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

@@ -1,13 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { cn } from '~/utils';
+import { Button } from '../../ui/Button.tsx';
+import { Settings2 } from 'lucide-react';
 import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
+import Settings from '../../Endpoints/BingAI/Settings.jsx';
+import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
+import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
 
 import store from '~/store';
 
 function BingAIOptions() {
   const [conversation, setConversation] = useRecoilState(store.conversation) || {};
+  const [advancedMode, setAdvancedMode] = useState(false);
+  const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
   const { endpoint, conversationId } = conversation;
+  const { context, systemMessage, jailbreak } = conversation;
 
   if (endpoint !== 'bingAI') return null;
   if (conversationId !== 'new') return null;
@@ -16,6 +24,31 @@ function BingAIOptions() {
     setConversation(prevState => ({ ...prevState, toneStyle: value }));
   };
 
+  const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
+
+  const switchToSimpleMode = () => {
+    setConversation(prevState => ({
+      ...prevState,
+      context: null,
+      systemMessage: null,
+      jailbreak: null
+    }));
+    setAdvancedMode(false);
+  };
+
+  const saveAsPreset = () => {
+    setSaveAsDialogShow(true);
+  };
+
+  const setOption = param => newValue => {
+    let update = {};
+    update[param] = newValue;
+    setConversation(prevState => ({
+      ...prevState,
+      ...update
+    }));
+  };
+
   const { toneStyle } = conversation;
 
   const cardStyle =
@@ -26,43 +59,81 @@ function BingAIOptions() {
   const selectedClass = val => val + '-tab ' + defaultSelected;
 
   return (
-    <div className={' flex w-full items-center justify-center gap-2'}>
-      <Tabs
-        value={toneStyle}
+    <>
+      <div
         className={
-          cardStyle +
-          ' flex h-[40px] items-center justify-center px-0 hover:bg-slate-50 dark:hover:bg-gray-600'
+          'openAIOptions-simple-container flex w-full items-center justify-center gap-2' +
+          (!advancedMode ? ' show' : '')
         }
-        onValueChange={changeHandler}
       >
-        <TabsList className="bg-white/[.60] dark:bg-gray-700">
-          <TabsTrigger
-            value="creative"
-            className={`${toneStyle === 'creative' ? selectedClass('creative') : defaultClasses}`}
-          >
-            {'Creative'}
-          </TabsTrigger>
-          <TabsTrigger
-            value="fast"
-            className={`${toneStyle === 'fast' ? selectedClass('fast') : defaultClasses}`}
-          >
-            {'Fast'}
-          </TabsTrigger>
-          <TabsTrigger
-            value="balanced"
-            className={`${toneStyle === 'balanced' ? selectedClass('balanced') : defaultClasses}`}
-          >
-            {'Balanced'}
-          </TabsTrigger>
-          <TabsTrigger
-            value="precise"
-            className={`${toneStyle === 'precise' ? selectedClass('precise') : defaultClasses}`}
-          >
-            {'Precise'}
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
-    </div>
+        <Tabs
+          value={toneStyle}
+          className={
+            cardStyle +
+            ' z-50 flex h-[40px] items-center justify-center px-0 hover:bg-slate-50 dark:hover:bg-gray-600'
+          }
+          onValueChange={changeHandler}
+        >
+          <TabsList className="bg-white/[.60] dark:bg-gray-700">
+            <TabsTrigger
+              value="creative"
+              className={`${toneStyle === 'creative' ? selectedClass('creative') : defaultClasses}`}
+            >
+              {'Creative'}
+            </TabsTrigger>
+            <TabsTrigger
+              value="fast"
+              className={`${toneStyle === 'fast' ? selectedClass('fast') : defaultClasses}`}
+            >
+              {'Fast'}
+            </TabsTrigger>
+            <TabsTrigger
+              value="balanced"
+              className={`${toneStyle === 'balanced' ? selectedClass('balanced') : defaultClasses}`}
+            >
+              {'Balanced'}
+            </TabsTrigger>
+            <TabsTrigger
+              value="precise"
+              className={`${toneStyle === 'precise' ? selectedClass('precise') : defaultClasses}`}
+            >
+              {'Precise'}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <Button
+          type="button"
+          className={cn(
+            cardStyle,
+            'min-w-4 z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
+          )}
+          onClick={triggerAdvancedMode}
+        >
+          <Settings2 className="w-4 text-gray-600 dark:text-white" />
+        </Button>
+      </div>
+      <EndpointOptionsPopover
+        content={
+          <div className="px-4 py-4">
+            <Settings
+              context={context}
+              systemMessage={systemMessage}
+              setContext={setOption('context')}
+              setSystemMessage={setOption('systemMessage')}
+              setJailbreak={setOption('jailbreak')}
+            />
+          </div>
+        }
+        visible={advancedMode}
+        saveAsPreset={saveAsPreset}
+        switchToSimpleMode={switchToSimpleMode}
+      />
+      <SaveAsPresetDialog
+        open={saveAsDialogShow}
+        onOpenChange={setSaveAsDialogShow}
+        conversation={conversation}
+      />
+    </>
   );
 }
 

client/src/components/ui/Checkbox.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cn } from "../../utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }