mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 16:30:15 +01:00
feat: move EndpointOptionsPopover as a common component
This commit is contained in:
Wentao Lyu
parent
099210c10e
commit
4d7fa26e6c
5 changed files with 117 additions and 48 deletions
|
|
@ -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() {
|
|||
<Settings2 className="w-4 text-gray-600 dark:text-white" />
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
' openAIOptions-advanced-container absolute bottom-[-10px] flex w-full flex-col items-center justify-center md:px-4' +
|
||||
(advancedMode ? ' show' : '')
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
cardStyle +
|
||||
' flex w-full flex-col overflow-hidden rounded-md border bg-slate-200 px-0 pb-[10px] dark:border-white/10 lg:w-[736px]'
|
||||
}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between bg-slate-100 px-4 py-2 dark:bg-gray-800/60">
|
||||
<span className="text-xs font-medium font-normal">Advanced settings for OpenAI endpoint</span>
|
||||
<Button
|
||||
type="button"
|
||||
className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
|
||||
onClick={switchToSimpleMode}
|
||||
>
|
||||
Switch to simple mode
|
||||
</Button>
|
||||
</div>
|
||||
<EndpointOptionsPopover
|
||||
content={
|
||||
<div className="px-4 py-4">
|
||||
<Settings
|
||||
model={model}
|
||||
|
|
@ -132,8 +120,23 @@ function OpenAIOptions() {
|
|||
setPresP={setOption('frequency_penalty')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
visible={advancedMode}
|
||||
saveAsPreset={saveAsPreset}
|
||||
switchToSimpleMode={switchToSimpleMode}
|
||||
/>
|
||||
<Dialog
|
||||
open={saveAsDialogShow}
|
||||
onOpenChange={setSaveAsDialogShow}
|
||||
>
|
||||
<DialogTemplate
|
||||
title="title"
|
||||
description="desc"
|
||||
main="tttt"
|
||||
buttons={null}
|
||||
selection={{}}
|
||||
/>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
19
client/src/components/svg/SaveIcon.jsx
Normal file
19
client/src/components/svg/SaveIcon.jsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function SaveIcon({ size = '1em', className }) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="64 64 896 896"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={className}
|
||||
width={size}
|
||||
height={size}
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M893.3 293.3L730.7 130.7c-7.5-7.5-16.7-13-26.7-16V112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V338.5c0-17-6.7-33.2-18.7-45.2zM384 184h256v104H384V184zm456 656H184V184h136v136c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V205.8l136 136V840zM512 442c-79.5 0-144 64.5-144 144s64.5 144 144 144 144-64.5 144-144-64.5-144-144-144zm0 224c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z"></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
19
client/src/components/svg/SwitchIcon.jsx
Normal file
19
client/src/components/svg/SwitchIcon.jsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function SwitchIcon({ size = '1em', className }) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="64 64 896 896"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={className}
|
||||
width={size}
|
||||
height={size}
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
50
client/src/components/ui/EndpointOptionsPopover.jsx
Normal file
50
client/src/components/ui/EndpointOptionsPopover.jsx
Normal file
|
|
@ -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 (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
' endpointOptionsPopover-container absolute bottom-[-10px] flex w-full flex-col items-center justify-center md:px-4' +
|
||||
(visible ? ' show' : '')
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
cardStyle +
|
||||
' border-s-0 border-d-0 flex w-full flex-col overflow-hidden rounded-none border-t bg-slate-200 px-0 pb-[10px] dark:border-white/10 md:rounded-md md:border lg:w-[736px]'
|
||||
}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between bg-slate-100 px-2 py-2 dark:bg-gray-800/60">
|
||||
{/* <span className="text-xs font-medium font-normal">Advanced settings for OpenAI endpoint</span> */}
|
||||
<Button
|
||||
type="button"
|
||||
className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
|
||||
onClick={saveAsPreset}
|
||||
>
|
||||
<SaveIcon className="mr-1" />
|
||||
Save as preset
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
|
||||
onClick={switchToSimpleMode}
|
||||
>
|
||||
<SwitchIcon className="mr-1" />
|
||||
Switch to simple mode
|
||||
</Button>
|
||||
</div>
|
||||
<div>{content}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default EndpointOptionsPopover;
|
||||
|
|
@ -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%);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue