Merge branch 'feat-endpoint-style-structure' of https://github.com/danny-avila/chatgpt-clone into feat-endpoint-style-structure

client/src/components/Input/OpenAIOptions/Settings.jsx

@@ -81,13 +81,13 @@ function Settings(props) {
               htmlFor="chatGptLabel"
               className="text-left text-sm font-medium"
             >
-              Custom Name
+              Custom Name <small className="opacity-40">(default: blank)</small>
             </Label>
             <Input
               id="chatGptLabel"
-              value={chatGptLabel}
+              value={chatGptLabel || ''}
               // ref={inputRef}
-              onChange={e => setChatGptLabel(e.target.value)}
+              onChange={e => setChatGptLabel(e.target.value || null)}
               placeholder="Set a custom name for ChatGPT"
               className={cn(
                 defaultTextProps,
@@ -100,12 +100,12 @@ function Settings(props) {
               htmlFor="promptPrefix"
               className="text-left text-sm font-medium"
             >
-              Prompt Prefix
+              Prompt Prefix <small className="opacity-40">(default: blank)</small>
             </Label>
             <TextareaAutosize
               id="promptPrefix"
-              value={promptPrefix}
-              onChange={e => 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,
@@ -131,7 +131,7 @@ function Settings(props) {
                   htmlFor="chatGptLabel"
                   className="text-left text-sm font-medium"
                 >
-                  Temperature
+                  Temperature <small className="opacity-40">(default: 1)</small>
                 </Label>
                 <Input
                   id="temp-int"
@@ -145,7 +145,7 @@ function Settings(props) {
               </div>
               <Slider
                 value={[temperature]}
-                onValueChange={value => setTemperature(value)}
+                onValueChange={value => setTemperature(value[0])}
                 max={2}
                 min={0}
                 step={0.01}
@@ -179,7 +179,7 @@ function Settings(props) {
               </div>
               <Slider
                 value={[maxTokens]}
-                onValueChange={value => setMaxTokens(value)}
+                onValueChange={value => setMaxTokens(value[0])}
                 max={2048} // should be dynamic to the currently selected model
                 min={1}
                 step={1}
@@ -199,7 +199,7 @@ function Settings(props) {
                   htmlFor="chatGptLabel"
                   className="text-left text-sm font-medium"
                 >
-                  Top P
+                  Top P <small className="opacity-40">(default: 1)</small>
                 </Label>
                 <Input
                   id="top-p-int"
@@ -213,7 +213,7 @@ function Settings(props) {
               </div>
               <Slider
                 value={[topP]}
-                onValueChange={value => setTopP(value)}
+                onValueChange={value => setTopP(value[0])}
                 max={1}
                 min={0}
                 step={0.01}
@@ -233,7 +233,7 @@ function Settings(props) {
                   htmlFor="chatGptLabel"
                   className="text-left text-sm font-medium"
                 >
-                  Frequency Penalty
+                  Frequency Penalty <small className="opacity-40">(default: 0)</small>
                 </Label>
                 <Input
                   id="freq-penalty-int"
@@ -247,7 +247,7 @@ function Settings(props) {
               </div>
               <Slider
                 value={[freqP]}
-                onValueChange={value => setFreqP(value)}
+                onValueChange={value => setFreqP(value[0])}
                 max={2}
                 min={-2}
                 step={0.01}
@@ -267,7 +267,7 @@ function Settings(props) {
                   htmlFor="chatGptLabel"
                   className="text-left text-sm font-medium"
                 >
-                  Presence Penalty
+                  Presence Penalty <small className="opacity-40">(default: 0)</small>
                 </Label>
                 <Input
                   id="pres-penalty-int"
@@ -281,7 +281,7 @@ function Settings(props) {
               </div>
               <Slider
                 value={[presP]}
-                onValueChange={value => setPresP(value)}
+                onValueChange={value => setPresP(value[0])}
                 max={2}
                 min={-2}
                 step={0.01}

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() {
           <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>
     </>
   );
 }