diff --git a/client/package-lock.json b/client/package-lock.json index 56ccd4ec6c..bcf2e1b701 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -13,7 +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-tabs": "^1.0.2", + "@radix-ui/react-tabs": "^1.0.3", "@reduxjs/toolkit": "^1.9.2", "axios": "^1.3.4", "class-variance-authority": "^0.4.0", @@ -41,6 +41,7 @@ "swr": "^2.0.3", "tailwind-merge": "^1.9.1", "tailwindcss-animate": "^1.0.5", + "tailwindcss-radix": "^2.8.0", "url": "^0.11.0", "uuidv4": "^6.2.13" }, @@ -2897,9 +2898,9 @@ } }, "node_modules/@radix-ui/react-tabs": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.2.tgz", - "integrity": "sha512-gOUwh+HbjCuL0UCo8kZ+kdUEG8QtpdO4sMQduJ34ZEz0r4922g9REOBM+vIsfwtGxSug4Yb1msJMJYN2Bk8TpQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.3.tgz", + "integrity": "sha512-4CkF/Rx1GcrusI/JZ1Rvyx4okGUs6wEenWA0RG/N+CwkRhTy7t54y7BLsWUXrAz/GRbBfHQg/Odfs/RoW0CiRA==", "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/primitive": "1.0.0", @@ -2907,8 +2908,58 @@ "@radix-ui/react-direction": "1.0.0", "@radix-ui/react-id": "1.0.0", "@radix-ui/react-presence": "1.0.0", - "@radix-ui/react-primitive": "1.0.1", - "@radix-ui/react-roving-focus": "1.0.2", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-roving-focus": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-collection": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.2.tgz", + "integrity": "sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-slot": "1.0.1" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz", + "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.1" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz", + "integrity": "sha512-stjCkIoMe6h+1fWtXlA6cRfikdBzCLp3SnVk7c48cv/uy3DTGoXhN76YaOYUJuy3aEDvDIKwKR5KSmvrtPvQPQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@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-id": "1.0.0", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.0", "@radix-ui/react-use-controllable-state": "1.0.0" }, "peerDependencies": { @@ -11886,6 +11937,11 @@ "tailwindcss": ">=3.0.0 || insiders" } }, + "node_modules/tailwindcss-radix": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/tailwindcss-radix/-/tailwindcss-radix-2.8.0.tgz", + "integrity": "sha512-1k1UfoIYgVyBl13FKwwoKavjnJ5VEaUClCTAsgz3VLquN4ay/lyaMPzkbqD71sACDs2fRGImytAUlMb4TzOt1A==" + }, "node_modules/tailwindcss/node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", @@ -15035,9 +15091,9 @@ } }, "@radix-ui/react-tabs": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.2.tgz", - "integrity": "sha512-gOUwh+HbjCuL0UCo8kZ+kdUEG8QtpdO4sMQduJ34ZEz0r4922g9REOBM+vIsfwtGxSug4Yb1msJMJYN2Bk8TpQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.3.tgz", + "integrity": "sha512-4CkF/Rx1GcrusI/JZ1Rvyx4okGUs6wEenWA0RG/N+CwkRhTy7t54y7BLsWUXrAz/GRbBfHQg/Odfs/RoW0CiRA==", "requires": { "@babel/runtime": "^7.13.10", "@radix-ui/primitive": "1.0.0", @@ -15045,9 +15101,49 @@ "@radix-ui/react-direction": "1.0.0", "@radix-ui/react-id": "1.0.0", "@radix-ui/react-presence": "1.0.0", - "@radix-ui/react-primitive": "1.0.1", - "@radix-ui/react-roving-focus": "1.0.2", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-roving-focus": "1.0.3", "@radix-ui/react-use-controllable-state": "1.0.0" + }, + "dependencies": { + "@radix-ui/react-collection": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.2.tgz", + "integrity": "sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-slot": "1.0.1" + } + }, + "@radix-ui/react-primitive": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz", + "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.1" + } + }, + "@radix-ui/react-roving-focus": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz", + "integrity": "sha512-stjCkIoMe6h+1fWtXlA6cRfikdBzCLp3SnVk7c48cv/uy3DTGoXhN76YaOYUJuy3aEDvDIKwKR5KSmvrtPvQPQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@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-id": "1.0.0", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-controllable-state": "1.0.0" + } + } } }, "@radix-ui/react-use-callback-ref": { @@ -21553,6 +21649,11 @@ "integrity": "sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==", "requires": {} }, + "tailwindcss-radix": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/tailwindcss-radix/-/tailwindcss-radix-2.8.0.tgz", + "integrity": "sha512-1k1UfoIYgVyBl13FKwwoKavjnJ5VEaUClCTAsgz3VLquN4ay/lyaMPzkbqD71sACDs2fRGImytAUlMb4TzOt1A==" + }, "tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/client/package.json b/client/package.json index 1b8fb0458f..1050739668 100644 --- a/client/package.json +++ b/client/package.json @@ -23,7 +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-tabs": "^1.0.2", + "@radix-ui/react-tabs": "^1.0.3", "@reduxjs/toolkit": "^1.9.2", "axios": "^1.3.4", "class-variance-authority": "^0.4.0", @@ -51,6 +51,7 @@ "swr": "^2.0.3", "tailwind-merge": "^1.9.1", "tailwindcss-animate": "^1.0.5", + "tailwindcss-radix": "^2.8.0", "url": "^0.11.0", "uuidv4": "^6.2.13" }, diff --git a/client/src/components/Main/BingStyles.jsx b/client/src/components/Main/BingStyles.jsx new file mode 100644 index 0000000000..bc8e45a1f3 --- /dev/null +++ b/client/src/components/Main/BingStyles.jsx @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +// import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/Tabs"; +import { Tabs, TabsList, TabsTrigger } from '../ui/Tabs.tsx'; +import { useSelector } from 'react-redux'; +// import RowButton from './RowButton'; + +export default function BingStyles() { + const [value, setValue] = useState('fast'); + const { model } = useSelector((state) => state.submit); + + const show = model === 'bingai' || model === 'sydney'; + const defaultClasses = 'p-2 rounded-md font-normal bg-white/[.60] text-black'; + const defaultSelected = defaultClasses + 'font-medium data-[state=active]:text-white'; + + const selectedClass = (val) => val + '-tab ' + defaultSelected; + + const changeHandler = value => { + setValue(value); + }; + return ( + //
+ + + + {/* */} + {'Creative'} + + + {'Balanced'} + + + {'Precise'} + + + + //
+ ); +} diff --git a/client/src/components/Main/RowButton.jsx b/client/src/components/Main/RowButton.jsx new file mode 100644 index 0000000000..06aaa27e37 --- /dev/null +++ b/client/src/components/Main/RowButton.jsx @@ -0,0 +1,16 @@ +import React from 'react'; + +export default function RowButton({ onClick, children, text, className }) { + return ( + + ); +} \ No newline at end of file diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx index 3b62132f51..a955e627ef 100644 --- a/client/src/components/Main/TextChat.jsx +++ b/client/src/components/Main/TextChat.jsx @@ -1,18 +1,17 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; import { SSE } from '~/utils/sse'; import SubmitButton from './SubmitButton'; -import Regenerate from './Regenerate'; +// import Regenerate from './Regenerate'; // not used as of Wentao's update +import BingStyles from './BingStyles'; import ModelMenu from '../Models/ModelMenu'; import Footer from './Footer'; import TextareaAutosize from 'react-textarea-autosize'; import createPayload from '~/utils/createPayload'; -import resetConvo from '~/utils/resetConvo'; import RegenerateIcon from '../svg/RegenerateIcon'; import StopGeneratingIcon from '../svg/StopGeneratingIcon'; -import { useSelector, useDispatch } from 'react-redux'; import { setConversation, - setNewConvo, setError, refreshConversation } from '~/store/convoSlice'; @@ -22,17 +21,14 @@ import { setText } from '~/store/textSlice'; import { useMessageHandler } from '../../utils/handleSubmit'; export default function TextChat({ messages }) { - const [errorMessage, setErrorMessage] = useState(''); const inputRef = useRef(null); const isComposing = useRef(false); const dispatch = useDispatch(); - const { user } = useSelector((state) => state.user); const convo = useSelector((state) => state.convo); - const { initial } = useSelector((state) => state.models); - const { isSubmitting, stopStream, submission, disabled, model, chatGptLabel, promptPrefix } = + const { isSubmitting, stopStream, submission, disabled } = useSelector((state) => state.submit); const { text } = useSelector((state) => state.text); - const { error, latestMessage } = convo; + const { latestMessage } = convo; const { ask, regenerate, stopGenerating } = useMessageHandler(); const isNotAppendable = latestMessage?.cancelled || latestMessage?.error; @@ -43,7 +39,7 @@ export default function TextChat({ messages }) { }, [convo?.conversationId]); const messageHandler = (data, currentState, currentMsg) => { - const { messages, _currentMsg, message, sender, isRegenerate } = currentState; + const { messages, message, sender, isRegenerate } = currentState; if (isRegenerate) dispatch( @@ -75,7 +71,7 @@ export default function TextChat({ messages }) { }; const cancelHandler = (data, currentState, currentMsg) => { - const { messages, _currentMsg, message, sender, isRegenerate } = currentState; + const { messages, message, sender, isRegenerate } = currentState; if (isRegenerate) dispatch( @@ -116,10 +112,9 @@ export default function TextChat({ messages }) { ); }; - const convoHandler = (data, currentState, currentMsg) => { + const convoHandler = (data, currentState) => { const { requestMessage, responseMessage } = data; - const { conversationId } = requestMessage; - const { messages, _currentMsg, message, isCustomModel, sender, isRegenerate } = + const { messages, message, isCustomModel, isRegenerate } = currentState; const { model, chatGptLabel, promptPrefix } = message; if (isRegenerate) dispatch(setMessages([...messages, responseMessage])); @@ -199,14 +194,13 @@ export default function TextChat({ messages }) { }; const errorHandler = (data, currentState, currentMsg) => { - const { initialResponse, messages, _currentMsg, message } = currentState; + const {messages, message } = currentState; console.log('Error:', data); const errorResponse = { ...data, error: true, parentMessageId: currentMsg?.messageId }; - setErrorMessage(data?.text); dispatch(setSubmitState(false)); dispatch(setMessages([...messages, currentMsg, errorResponse])); dispatch(setText(message?.text)); @@ -237,7 +231,7 @@ export default function TextChat({ messages }) { const data = JSON.parse(e.data); if (data.final) { - convoHandler(data, currentState, currentMsg); + convoHandler(data, currentState); dispatch(toggleCursor()); console.log('final', data); } @@ -268,7 +262,7 @@ export default function TextChat({ messages }) { events.onmessage = onMessage; - events.oncancel = (e) => { + events.oncancel = () => { dispatch(toggleCursor(true)); cancelHandler(latestResponseText, currentState, currentMsg); }; @@ -324,11 +318,11 @@ export default function TextChat({ messages }) { } }; - const handleCompositionStart = (e) => { + const handleCompositionStart = () => { isComposing.current = true; }; - const handleCompositionEnd = (e) => { + const handleCompositionEnd = () => { isComposing.current = false; }; @@ -341,10 +335,10 @@ export default function TextChat({ messages }) { dispatch(setText(value)); }; - const tryAgain = (e) => { - e.preventDefault(); - dispatch(setError(false)); - }; + // const tryAgain = (e) => { + // e.preventDefault(); + // dispatch(setError(false)); + // }; const isSearchView = messages?.[0]?.searchResult === true; const getPlaceholderText = () => { @@ -364,10 +358,12 @@ export default function TextChat({ messages }) { }; return ( + <>
+ {isSubmitting && !isSearchView ? (
+ ); } diff --git a/client/src/style.css b/client/src/style.css index 2f43cfe285..04f2a899db 100644 --- a/client/src/style.css +++ b/client/src/style.css @@ -28,6 +28,41 @@ transition: all 1s ease-in-out; } */ +.bing-styles { +position: absolute; +left: 0; +right: 0; +opacity: 0; +bottom: 35px; +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%); +} + +.fast-tab { + background: linear-gradient(90deg, #2870EA 10.79%, #1B4AEF 87.08%); +} + +.precise-tab { + background: linear-gradient(90deg, #006880 10.79%, #005366 87.08%) +} + p > small { opacity: 0; animation: fadein 3s forwards; diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 7c02efecf3..d4b4d637c4 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -45,6 +45,7 @@ module.exports = { }, plugins: [ require('tailwindcss-animate'), + require("tailwindcss-radix")(), // require('@tailwindcss/typography'), ] };