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] 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%);