From 099210c10e4c0b9c0f3ca100b5b695ecab688c32 Mon Sep 17 00:00:00 2001 From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech> Date: Sat, 1 Apr 2023 23:45:19 +0800 Subject: [PATCH 1/2] feat: add default text. fix: slider should set a number --- .../Input/OpenAIOptions/Settings.jsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/client/src/components/Input/OpenAIOptions/Settings.jsx b/client/src/components/Input/OpenAIOptions/Settings.jsx index b72b861463..8f45b07e93 100644 --- a/client/src/components/Input/OpenAIOptions/Settings.jsx +++ b/client/src/components/Input/OpenAIOptions/Settings.jsx @@ -79,13 +79,13 @@ function Settings(props) { htmlFor="chatGptLabel" className="text-left text-sm font-medium" > - Custom Name + Custom Name (default: blank) setChatGptLabel(e.target.value)} + onChange={e => setChatGptLabel(e.target.value || null)} placeholder="Set a custom name for ChatGPT" className={cn( defaultTextProps, @@ -98,12 +98,12 @@ function Settings(props) { htmlFor="promptPrefix" className="text-left text-sm font-medium" > - Prompt Prefix + Prompt Prefix (default: blank) setPromptPrefix(e.target.value)} + value={promptPrefix || ''} + onChange={e => setPromptPrefix(e.target.value || null)} placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'" className={cn( defaultTextProps, @@ -129,7 +129,7 @@ function Settings(props) { htmlFor="chatGptLabel" className="text-left text-sm font-medium" > - Temperature + Temperature (default: 1) setTemperature(value)} + onValueChange={value => setTemperature(value[0])} max={2} min={0} step={0.01} @@ -177,7 +177,7 @@ function Settings(props) { setMaxTokens(value)} + onValueChange={value => setMaxTokens(value[0])} max={2048} // should be dynamic to the currently selected model min={1} step={1} @@ -197,7 +197,7 @@ function Settings(props) { htmlFor="chatGptLabel" className="text-left text-sm font-medium" > - Top P + Top P (default: 1) setTopP(value)} + onValueChange={value => setTopP(value[0])} max={1} min={0} step={0.01} @@ -231,7 +231,7 @@ function Settings(props) { htmlFor="chatGptLabel" className="text-left text-sm font-medium" > - Frequency Penalty + Frequency Penalty (default: 0) setFreqP(value)} + onValueChange={value => setFreqP(value[0])} max={2} min={-2} step={0.01} @@ -265,7 +265,7 @@ function Settings(props) { htmlFor="chatGptLabel" className="text-left text-sm font-medium" > - Presence Penalty + Presence Penalty (default: 0) setPresP(value)} + onValueChange={value => setPresP(value[0])} max={2} min={-2} step={0.01} From 4d7fa26e6c73f447ec083d4ac020047816b5ef7f Mon Sep 17 00:00:00 2001 From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech> Date: Sun, 2 Apr 2023 00:29:53 +0800 Subject: [PATCH 2/2] feat: move EndpointOptionsPopover as a common component --- .../components/Input/OpenAIOptions/index.jsx | 51 ++++++++++--------- client/src/components/svg/SaveIcon.jsx | 19 +++++++ client/src/components/svg/SwitchIcon.jsx | 19 +++++++ .../components/ui/EndpointOptionsPopover.jsx | 50 ++++++++++++++++++ client/src/style.css | 26 +--------- 5 files changed, 117 insertions(+), 48 deletions(-) create mode 100644 client/src/components/svg/SaveIcon.jsx create mode 100644 client/src/components/svg/SwitchIcon.jsx create mode 100644 client/src/components/ui/EndpointOptionsPopover.jsx diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx index a86c79c673..4397f2f195 100644 --- a/client/src/components/Input/OpenAIOptions/index.jsx +++ b/client/src/components/Input/OpenAIOptions/index.jsx @@ -2,7 +2,10 @@ import React, { useEffect, useState } from 'react'; import { Settings2 } from 'lucide-react'; import { useRecoilState, useRecoilValue } from 'recoil'; import ModelSelect from './ModelSelect'; +import EndpointOptionsPopover from '../../ui/EndpointOptionsPopover'; +import DialogTemplate from '../../ui/DialogTemplate'; import { Button } from '../../ui/Button.tsx'; +import { Dialog, DialogTrigger } from '../../ui/Dialog.tsx'; import Settings from './Settings.jsx'; import { cn } from '~/utils/'; @@ -10,6 +13,7 @@ import store from '~/store'; function OpenAIOptions() { const [advancedMode, setAdvancedMode] = useState(false); + const [saveAsDialogShow, setSaveAsDialogShow] = useState(false); const endpointsConfig = useRecoilValue(store.endpointsConfig); const availableModels = endpointsConfig?.['openAI']?.['availableModels'] || []; @@ -51,6 +55,10 @@ function OpenAIOptions() { setAdvancedMode(false); }; + const saveAsPreset = () => { + setSaveAsDialogShow(true); + }; + const setOption = param => newValue => { let update = {}; update[param] = newValue; @@ -92,28 +100,8 @@ function OpenAIOptions() { -
-
-
- Advanced settings for OpenAI endpoint - -
+
-
- + } + visible={advancedMode} + saveAsPreset={saveAsPreset} + switchToSimpleMode={switchToSimpleMode} + /> + + + ); } diff --git a/client/src/components/svg/SaveIcon.jsx b/client/src/components/svg/SaveIcon.jsx new file mode 100644 index 0000000000..ce98153799 --- /dev/null +++ b/client/src/components/svg/SaveIcon.jsx @@ -0,0 +1,19 @@ +import React from 'react'; + +export default function SaveIcon({ size = '1em', className }) { + return ( + + + + ); +} diff --git a/client/src/components/svg/SwitchIcon.jsx b/client/src/components/svg/SwitchIcon.jsx new file mode 100644 index 0000000000..97753adca0 --- /dev/null +++ b/client/src/components/svg/SwitchIcon.jsx @@ -0,0 +1,19 @@ +import React from 'react'; + +export default function SwitchIcon({ size = '1em', className }) { + return ( + + + + ); +} diff --git a/client/src/components/ui/EndpointOptionsPopover.jsx b/client/src/components/ui/EndpointOptionsPopover.jsx new file mode 100644 index 0000000000..701eee1323 --- /dev/null +++ b/client/src/components/ui/EndpointOptionsPopover.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Button } from './Button.tsx'; +import SwitchIcon from '../svg/SwitchIcon'; +import SaveIcon from '../svg/SaveIcon'; + +function EndpointOptionsPopover({ content, visible, saveAsPreset, switchToSimpleMode }) { + const cardStyle = + 'shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white'; + + return ( + <> +
+
+
+ {/* Advanced settings for OpenAI endpoint */} + + +
+
{content}
+
+
+ + ); +} + +export default EndpointOptionsPopover; diff --git a/client/src/style.css b/client/src/style.css index 4d143cd4d2..4f8c56b887 100644 --- a/client/src/style.css +++ b/client/src/style.css @@ -39,7 +39,7 @@ opacity: 1; } -.openAIOptions-advanced-container { +.endpointOptionsPopover-container { pointer-events: none; opacity: 0; transition: all 0.2s ease-in-out; @@ -47,34 +47,12 @@ transform-origin: bottom center; } -.openAIOptions-advanced-container.show { +.endpointOptionsPopover-container.show { pointer-events: fill; opacity: 1; transform: scaleY(1) } -.bing-styles { -position: absolute; -left: 0; -right: 0; -opacity: 0; -bottom: 39px; -z-index: 995; -margin-left: auto; -margin-right: auto; -width: 308px; /* Need a specific value to work */ -transition: all 0.5s ease-in-out; -pointer-events: none; -transform: translateY(-60px); -} - -.bing-styles.show { - /* bottom: -20px; */ - opacity: 1; - pointer-events: all; - transform: translateY(-20px); -} - .creative-tab { /* background: linear-gradient(90deg, #904887 10.79%, #8B257E 87.08%); */ background: linear-gradient(90deg, #904887 10.79%, #8B257E 87.08%);