diff --git a/client/src/components/Input/OpenAIOptions/Settings.jsx b/client/src/components/Input/OpenAIOptions/Settings.jsx index 6ea499464d..f42ffda52d 100644 --- a/client/src/components/Input/OpenAIOptions/Settings.jsx +++ b/client/src/components/Input/OpenAIOptions/Settings.jsx @@ -6,8 +6,7 @@ import { Slider } from '~/components/ui/Slider.tsx'; import OptionHover from './OptionHover'; import { HoverCard, - HoverCardTrigger - // HoverCardContent, + HoverCardTrigger, } from '~/components/ui/HoverCard.tsx'; import { cn } from '~/utils/'; const defaultTextProps = @@ -26,230 +25,214 @@ function Settings() { const [presP, setPresP] = useState(0); const textareaRef = useRef(null); const inputRef = useRef(null); - // + return ( -
- {/* - Note: important instructions are often better placed in your message rather than the prefix.{' '} - - More info here - - */} - <> -
-
- - setChatGptLabel(e.target.value)} - placeholder="Set a custom name for ChatGPT" - className=" col-span-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 dark:bg-gray-700 + <> +
+
+ + setChatGptLabel(e.target.value)} + placeholder="Set a custom name for ChatGPT" + className=" col-span-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]" + /> +
+
+ + setPromptPrefix(e.target.value)} + placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'" + className={cn(defaultTextProps, 'col-span-3 flex h-10 max-h-10 w-full resize-none px-3 py-2 ')} + onFocus={() => { + textareaRef.current.classList.remove('max-h-10'); + textareaRef.current.classList.add('max-h-52'); + }} + onBlur={() => { + textareaRef.current.classList.remove('max-h-52'); + textareaRef.current.classList.add('max-h-10'); + }} + ref={textareaRef} + /> +
+
+ + + + setTemperature(e.target.value)} + className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/temp:border-gray-200'))} + /> + + -
-
- - setPromptPrefix(e.target.value)} - placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'" - className={cn(defaultTextProps, 'col-span-3 flex h-10 max-h-10 w-full resize-none px-3 py-2 ')} - onFocus={() => { - textareaRef.current.classList.remove('max-h-10'); - textareaRef.current.classList.add('max-h-52'); - }} - onBlur={() => { - textareaRef.current.classList.remove('max-h-52'); - textareaRef.current.classList.add('max-h-10'); - }} - ref={textareaRef} + + + + + setMaxTokens(e.target.value)} + className={cn(defaultTextProps, cn(optionText, 'w-11 group-hover/max:border-gray-200'))} + /> + + -
-
- - - {/*
*/} - - setTemperature(e.target.value)} - className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/temp:border-gray-200'))} - /> - {/*
*/} - + +
+ +
+ setTemperature(value)} + max={2} + min={0} + step={0.01} + className="w-full" + /> + setMaxTokens(value)} + max={2048} // should be dynamic to the currently selected model + min={1} + step={1} + className="w-full" + /> +
+
+ + + + setTopP(e.target.value)} + className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/top:border-gray-200'))} + /> - - {/*
*/} - - - - setMaxTokens(e.target.value)} - className={cn(defaultTextProps, cn(optionText, 'w-11 group-hover/max:border-gray-200'))} - /> - - + + + + + setFreqP(e.target.value)} + className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/freq:border-gray-200'))} /> - - {/*
*/} -
- -
- setTemperature(value)} - max={2} - min={0} - step={0.01} - className="w-full" + + - setMaxTokens(value)} - max={2048} // should be dynamic to the currently selected model - min={1} - step={1} - className="w-full" - /> -
-
- - - - setTopP(e.target.value)} - className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/top:border-gray-200'))} - /> - - - - - - - setFreqP(e.target.value)} - className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/freq:border-gray-200'))} - /> - - - -
-
- setTopP(value)} - max={1} - min={0} - step={0.01} - className="w-full" - /> - setFreqP(value)} - max={2} - min={-2} - step={0.01} - className="w-full" - /> -
-
- - - - setPresP(e.target.value)} - className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/pres:border-gray-200'))} - /> - - - -
-
- setPresP(value)} - max={2} - min={0} - step={0.01} - className="w-full opacity-0" - /> - setPresP(value)} - max={2} - min={-2} - step={0.01} - className="w-full" - /> -
+
- -
+
+ setTopP(value)} + max={1} + min={0} + step={0.01} + className="w-full" + /> + setFreqP(value)} + max={2} + min={-2} + step={0.01} + className="w-full" + /> +
+
+ + + + setPresP(e.target.value)} + className={cn(defaultTextProps, cn(optionText, 'w-10 group-hover/pres:border-gray-200'))} + /> + + + +
+
+ setPresP(value)} + max={2} + min={0} + step={0.01} + className="w-full opacity-0" + /> + setPresP(value)} + max={2} + min={-2} + step={0.01} + className="w-full" + /> +
+
+ ); } diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx index 4b8f87a1a1..930122bc27 100644 --- a/client/src/components/Input/OpenAIOptions/index.jsx +++ b/client/src/components/Input/OpenAIOptions/index.jsx @@ -1,8 +1,10 @@ import React, { useEffect, useState } from 'react'; +import { Settings2 } from 'lucide-react'; import { useRecoilState } from 'recoil'; import ModelSelect from './ModelSelect'; import { Button } from '../../ui/Button.tsx'; import Settings from './Settings.jsx'; +import { cn } from '~/utils/'; import store from '~/store'; @@ -67,20 +69,20 @@ function OpenAIOptions() { model={model} onChange={setModel} type="button" - className={ - cardStyle + - ' 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' - } + className={cn( + cardStyle, + ' z-50 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' + )} />
-
+
+ +