From 059006382d1506f111148d7f5d15ad27212863ef Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Sat, 1 Apr 2023 00:09:49 +0800
Subject: [PATCH 1/2] feat: add animation

---
 .../components/Input/OpenAIOptions/index.jsx  | 52 +++++++++++++++----
 client/src/style.css                          | 25 +++++++++
 2 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx
index b7fdfc280c..0192ac8f0a 100644
--- a/client/src/components/Input/OpenAIOptions/index.jsx
+++ b/client/src/components/Input/OpenAIOptions/index.jsx
@@ -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>
     </>
   );
diff --git a/client/src/style.css b/client/src/style.css
index 86e343e63c..4d143cd4d2 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -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; 

From bb1f8d731b6812fe0077619b52e86deacdc01691 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Sat, 1 Apr 2023 00:38:05 +0800
Subject: [PATCH 2/2] feat: select model feat: force to be advanced mode

---
 .../Input/OpenAIOptions/ModelSelect.jsx       | 54 +++++++++++++++++++
 .../components/Input/OpenAIOptions/index.jsx  | 42 +++++++++++----
 2 files changed, 86 insertions(+), 10 deletions(-)
 create mode 100644 client/src/components/Input/OpenAIOptions/ModelSelect.jsx

diff --git a/client/src/components/Input/OpenAIOptions/ModelSelect.jsx b/client/src/components/Input/OpenAIOptions/ModelSelect.jsx
new file mode 100644
index 0000000000..73e2a7303b
--- /dev/null
+++ b/client/src/components/Input/OpenAIOptions/ModelSelect.jsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { Button } from '../../ui/Button.tsx';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuRadioItem
+} from '../../ui/DropdownMenu.tsx';
+
+const ModelSelect = ({ model, onChange, models, ...props }) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  models = ['gpt-4', 'text-davinci-003', 'gpt-3.5-turbo', 'gpt-3.5-turbo-0301'];
+
+  return (
+    <DropdownMenu
+      open={menuOpen}
+      onOpenChange={setMenuOpen}
+    >
+      <DropdownMenuTrigger asChild>
+        <Button {...props}>
+          <span className="w-full text-center text-xs font-medium font-normal">Model: {model}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-56 dark:bg-gray-700"
+        onCloseAutoFocus={event => event.preventDefault()}
+      >
+        <DropdownMenuLabel className="dark:text-gray-300">Select a model</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup
+          value={model}
+          onValueChange={onChange}
+          className="overflow-y-auto"
+        >
+          {models.map(model => (
+            <DropdownMenuRadioItem
+              key={model}
+              value={model}
+              className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
+            >
+              {model}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ModelSelect;
diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx
index 0192ac8f0a..cbc9b1f15d 100644
--- a/client/src/components/Input/OpenAIOptions/index.jsx
+++ b/client/src/components/Input/OpenAIOptions/index.jsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect, forwardRef } from 'react';
-import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
-import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil';
+import React, { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import ModelSelect from './ModelSelect';
 import { Button } from '../../ui/Button.tsx';
 
 import store from '~/store';
@@ -13,7 +13,6 @@ function OpenAIOptions({ conversation = {} }) {
   const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
 
   const switchToSimpleMode = () => {
-    setAdvancedMode(false);
     setConversation(prevState => ({
       ...prevState,
       chatGptLabel: null,
@@ -22,8 +21,31 @@ function OpenAIOptions({ conversation = {} }) {
       top_p: 1,
       presence_penalty: 1
     }));
+    setAdvancedMode(false);
   };
 
+  const setModel = newModel => {
+    setConversation(prevState => ({
+      ...prevState,
+      model: newModel
+    }));
+  };
+
+  useEffect(() => {
+    const { endpoint, chatGptLabel, promptPrefix, temperature, top_p, presence_penalty } = conversation;
+
+    if (endpoint !== 'openAI') return;
+
+    const mustInAdvancedMode =
+      chatGptLabel !== null ||
+      promptPrefix !== null ||
+      temperature !== 0.8 ||
+      top_p !== 1 ||
+      presence_penalty !== 1;
+
+    if (mustInAdvancedMode && !advancedMode) setAdvancedMode(true);
+  }, [conversation, advancedMode]);
+
   if (endpoint !== 'openAI') return null;
 
   const { model } = conversation;
@@ -39,15 +61,15 @@ function OpenAIOptions({ conversation = {} }) {
           (!advancedMode ? ' show' : '')
         }
       >
-        <Button
+        <ModelSelect
+          model={model}
+          onChange={setModel}
           type="button"
           className={
             cardStyle +
-            ' flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 dark:hover:bg-gray-600'
+            ' flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 data-[state=open]:bg-slate-50 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
           }
-        >
-          <span className="w-full text-center text-xs font-medium font-normal">Model: {model}</span>
-        </Button>
+        />
         <Button
           type="button"
           className={
@@ -62,7 +84,7 @@ function OpenAIOptions({ conversation = {} }) {
       <div
         className={
           cardStyle +
-          ' p-b-[40px] openAIOptions-advanced-container absolute left-4 right-4 bottom-[40px] flex flex-col overflow-hidden rounded-md bg-white px-0' +
+          ' p-b-[40px] openAIOptions-advanced-container absolute left-4 right-4 bottom-[40px] flex flex-col overflow-hidden rounded-md bg-slate-100 bg-white px-0' +
           (advancedMode ? ' show' : '')
         }
       >