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}
+              value={promptPrefix || ''}
-              onChange={e => setPromptPrefix(e.target.value)}
+              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
+      <EndpointOptionsPopover
-        className={
+        content={
-          ' 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>
           <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>
     </>
   );
 }

client/src/components/svg/SaveIcon.jsx

@@ -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>
+  );
+}

client/src/components/svg/SwitchIcon.jsx

@@ -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>
+  );
+}

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 (
+    <>
+      <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;

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