Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 00:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat: add animation

Browse source
This commit is contained in:
Wentao Lyu 2023-04-01 00:09:49 +08:00
parent 462660d554
commit 059006382d
2 changed files with 68 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

52
client/src/components/Input/OpenAIOptions/index.jsx
View file

@ -1,35 +1,59 @@
import React, { useState, useEffect, forwardRef } from 'react';
import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
import { useRecoilValue, useRecoilState } from 'recoil';
import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil';
import { Button } from '../../ui/Button.tsx';
import store from '~/store';
function OpenAIOptions({ conversation = {} }) {
const { endpoint } = conversation;
const { advancedMode, setAdvancedMode } = useState(false);
const [advancedMode, setAdvancedMode] = useState(false);
const setConversation = useSetRecoilState(store.conversation);
const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
const switchToSimpleMode = () => {
setAdvancedMode(false);
setConversation(prevState => ({
...prevState,
chatGptLabel: null,
promptPrefix: null,
temperature: 0.8,
top_p: 1,
presence_penalty: 1
}));
};
if (endpoint !== 'openAI') return null;
const { model } = conversation;
const cardStyle =
'shadow-md px-4 h-[40px] rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
'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="flex w-full items-center justify-center gap-2">
<div
className={
'openAIOptions-simple-container flex w-full items-center justify-center gap-2' +
(!advancedMode ? ' show' : '')
}
>
<Button
type="button"
className={cardStyle + ' flex items-center justify-center hover:bg-slate-50 dark:hover:bg-gray-600'}
className={
cardStyle +
' flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 dark:hover:bg-gray-600'
}
>
<span className="w-full text-center text-xs font-medium font-normal">Model: {model}</span>
</Button>
<Button
type="button"
className={cardStyle + ' flex items-center justify-center hover:bg-slate-50 dark:hover:bg-gray-600'}
className={
cardStyle +
' flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 dark:hover:bg-gray-600'
}
onClick={triggerAdvancedMode}
>
<span className="w-full text-center text-xs font-medium font-normal">More</span>
@ -38,11 +62,21 @@ function OpenAIOptions({ conversation = {} }) {
<div
className={
cardStyle +
' p-b-[40px] absolute left-4 right-4 bottom-[40px] flex h-[220px] flex-col rounded-md bg-white'
' p-b-[40px] openAIOptions-advanced-container absolute left-4 right-4 bottom-[40px] flex flex-col overflow-hidden rounded-md bg-white px-0' +
(advancedMode ? ' show' : '')
}
>
<div>title</div>
<div>content</div>
<div className="flex w-full items-center justify-between bg-slate-100 px-4 py-2 dark:bg-white/10">
<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>
<div className="h-[200px]">content</div>
</div>
</>
);

25
client/src/style.css
View file

@ -28,6 +28,31 @@
transition: all 1s ease-in-out;
} */
.openAIOptions-simple-container {
pointer-events: none;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.openAIOptions-simple-container.show {
pointer-events: fill;
opacity: 1;
}
.openAIOptions-advanced-container {
pointer-events: none;
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scaleY(0);
transform-origin: bottom center;
}
.openAIOptions-advanced-container.show {
pointer-events: fill;
opacity: 1;
transform: scaleY(1)
}
.bing-styles {
position: absolute;
left: 0;