From e8b2c2059d85c9076bb5193506dae2fac3f3b976 Mon Sep 17 00:00:00 2001 From: Danny Avila Date: Fri, 31 Mar 2023 13:12:06 -0400 Subject: [PATCH] feat: select options --- client/package-lock.json | 78 ++++++++ client/package.json | 1 + .../Input/OpenAIOptions/Settings.jsx | 184 ++++++++++++++++++ .../components/Input/OpenAIOptions/index.jsx | 8 +- client/src/components/ui/Slider.tsx | 28 +++ 5 files changed, 296 insertions(+), 3 deletions(-) create mode 100644 client/src/components/Input/OpenAIOptions/Settings.jsx create mode 100644 client/src/components/ui/Slider.tsx diff --git a/client/package-lock.json b/client/package-lock.json index 8ad817c6f..2c9320b5f 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -13,6 +13,7 @@ "@radix-ui/react-dialog": "^1.0.2", "@radix-ui/react-dropdown-menu": "^2.0.2", "@radix-ui/react-label": "^2.0.0", + "@radix-ui/react-slider": "^1.1.1", "@radix-ui/react-tabs": "^1.0.3", "@types/jest": "^29.5.0", "@types/node": "^18.15.10", @@ -2789,6 +2790,14 @@ "node": ">= 8" } }, + "node_modules/@radix-ui/number": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.0.tgz", + "integrity": "sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, "node_modules/@radix-ui/primitive": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz", @@ -3103,6 +3112,29 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-slider": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.1.tgz", + "integrity": "sha512-0aswLpUKZIraPEOcXfwW25N1KPfLA6Mvm1TxogUChGsbLbys2ihd7uk9XAKsol9ZQPucxh2/mybwdRtAKrs/MQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/number": "1.0.0", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.2", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-layout-effect": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-use-size": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", @@ -3181,6 +3213,17 @@ "react": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz", + "integrity": "sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-use-rect": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz", @@ -15615,6 +15658,14 @@ "fastq": "^1.6.0" } }, + "@radix-ui/number": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.0.tgz", + "integrity": "sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, "@radix-ui/primitive": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz", @@ -15858,6 +15909,25 @@ "@radix-ui/react-use-controllable-state": "1.0.0" } }, + "@radix-ui/react-slider": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.1.tgz", + "integrity": "sha512-0aswLpUKZIraPEOcXfwW25N1KPfLA6Mvm1TxogUChGsbLbys2ihd7uk9XAKsol9ZQPucxh2/mybwdRtAKrs/MQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/number": "1.0.0", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.2", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-layout-effect": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-use-size": "1.0.0" + } + }, "@radix-ui/react-slot": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", @@ -15917,6 +15987,14 @@ "@babel/runtime": "^7.13.10" } }, + "@radix-ui/react-use-previous": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz", + "integrity": "sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, "@radix-ui/react-use-rect": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz", diff --git a/client/package.json b/client/package.json index 4389315ad..547e18ee2 100644 --- a/client/package.json +++ b/client/package.json @@ -23,6 +23,7 @@ "@radix-ui/react-dialog": "^1.0.2", "@radix-ui/react-dropdown-menu": "^2.0.2", "@radix-ui/react-label": "^2.0.0", + "@radix-ui/react-slider": "^1.1.1", "@radix-ui/react-tabs": "^1.0.3", "@types/jest": "^29.5.0", "@types/node": "^18.15.10", diff --git a/client/src/components/Input/OpenAIOptions/Settings.jsx b/client/src/components/Input/OpenAIOptions/Settings.jsx new file mode 100644 index 000000000..60d06ec1f --- /dev/null +++ b/client/src/components/Input/OpenAIOptions/Settings.jsx @@ -0,0 +1,184 @@ +import React, { useRef, useState } from 'react'; +import TextareaAutosize from 'react-textarea-autosize'; +import { Input } from '~/components/ui/Input.tsx'; +import { Label } from '~/components/ui/Label.tsx'; +import { Slider } from '~/components/ui/Slider.tsx'; +import { cn } from '~/utils/'; +const defaultTextProps = + 'rounded-md border border-gray-300 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-none dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-none dark:focus:border-transparent dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0'; + +const optionText = 'p-0 shadow-none text-right pr-1 h-8'; + +function Settings() { + const [chatGptLabel, setChatGptLabel] = useState(''); + const [promptPrefix, setPromptPrefix] = useState(''); + const [temperature, setTemperature] = useState(1); + const [maxLength, setMaxLength] = useState(2048); + const [topP, setTopP] = useState(1); + const [freqP, setFreqP] = useState(0); + 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 + 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)} + placeholder="1.0" + className={cn(defaultTextProps, `w-9 ${optionText}`)} + /> +
+
+ + setMaxLength(e.target.value)} + placeholder="1.0" + className={cn(defaultTextProps, `w-11 ${optionText}`)} + /> +
+
+ +
+ setTemperature(value)} + max={2} + min={0} + step={0.01} + className="w-full" + /> + setMaxLength(value)} + max={2048} + min={1} + step={1} + className="w-full" + /> +
+ +
+
+ + setTopP(e.target.value)} + placeholder="1.0" + className={cn(defaultTextProps, `w-9 ${optionText}`)} + /> +
+
+ + setFreqP(e.target.value)} + placeholder="1.0" + className={cn(defaultTextProps, `w-9 ${optionText}`)} + /> +
+
+
+ setTopP(value)} + max={2} + min={0} + step={0.01} + className="w-full" + /> + setFreqP(value)} + max={2} + min={0} + step={0.01} + className="w-full" + /> +
+
+
+ ); +} + +export default Settings; diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx index b7fdfc280..04138e6d7 100644 --- a/client/src/components/Input/OpenAIOptions/index.jsx +++ b/client/src/components/Input/OpenAIOptions/index.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect, forwardRef } from 'react'; import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx'; import { useRecoilValue, useRecoilState } from 'recoil'; import { Button } from '../../ui/Button.tsx'; +import Settings from './Settings.jsx'; import store from '~/store'; @@ -38,11 +39,12 @@ function OpenAIOptions({ conversation = {} }) {
-
title
-
content
+
hi there
+ {/*
content
*/} +
); diff --git a/client/src/components/ui/Slider.tsx b/client/src/components/ui/Slider.tsx new file mode 100644 index 000000000..e522d0c7a --- /dev/null +++ b/client/src/components/ui/Slider.tsx @@ -0,0 +1,28 @@ +"use client" + +import * as React from "react" +import * as SliderPrimitive from "@radix-ui/react-slider" + +import { cn } from "../../utils" + +const Slider = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + + +)) +Slider.displayName = SliderPrimitive.Root.displayName + +export { Slider } \ No newline at end of file