diff --git a/client/package-lock.json b/client/package-lock.json index 444dd39ba0..e5d9ea6267 100644 --- a/client/package-lock.json +++ b/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": { diff --git a/client/package.json b/client/package.json index 3f13522fda..8483c13a1e 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/Endpoints/BingAI/Settings.jsx b/client/src/components/Endpoints/BingAI/Settings.jsx new file mode 100644 index 0000000000..b37a1bbc60 --- /dev/null +++ b/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 ( + <> +
+
+
+ + 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 ' + )} + /> +
+
+
+
+
+ { + setJailbreak(checked); + setShowSystemMessage(checked); + }} + /> + + +
+ {showSystemMessage && ( + <> + {/* */} + 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 ' + )} + /> + + )} +
+ {/* + + + + */} +
+
+ + ); +} + +export default Settings; diff --git a/client/src/components/Input/BingAIOptions/index.jsx b/client/src/components/Input/BingAIOptions/index.jsx index c13db8837f..ad8be67c41 100644 --- a/client/src/components/Input/BingAIOptions/index.jsx +++ b/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 ( -
- +
- - - {'Creative'} - - - {'Fast'} - - - {'Balanced'} - - - {'Precise'} - - - -
+ + + + {'Creative'} + + + {'Fast'} + + + {'Balanced'} + + + {'Precise'} + + + + +
+ + + + } + visible={advancedMode} + saveAsPreset={saveAsPreset} + switchToSimpleMode={switchToSimpleMode} + /> + + ); } diff --git a/client/src/components/ui/Checkbox.tsx b/client/src/components/ui/Checkbox.tsx new file mode 100644 index 0000000000..cbc06fca44 --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } \ No newline at end of file