feat: complete view for styles

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",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.3.tgz",
-      "integrity": "sha512-gOUwh+HbjCuL0UCo8kZ+kdUEG8QtpdO4sMQduJ34ZEz0r4922g9REOBM+vIsfwtGxSug4Yb1msJMJYN2Bk8TpQ==",
+      "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-primitive": "1.0.2",
-        "@radix-ui/react-roving-focus": "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",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.3.tgz",
-      "integrity": "sha512-gOUwh+HbjCuL0UCo8kZ+kdUEG8QtpdO4sMQduJ34ZEz0r4922g9REOBM+vIsfwtGxSug4Yb1msJMJYN2Bk8TpQ==",
+      "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-primitive": "1.0.2",
-        "@radix-ui/react-roving-focus": "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",

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"
   },

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 (
+    // <div className='styles-container w-full'>
+    <Tabs
+      defaultValue={value}
+      className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`}
+      onValueChange={changeHandler}
+    >
+      <TabsList className="bg-white/[.60] ">
+        <TabsTrigger
+          value="creative"
+          className={`${value === 'creative' ? selectedClass(value) : defaultClasses}`}
+        >
+          {/* <RowButton text="creative" /> */}
+          {'Creative'}
+        </TabsTrigger>
+        <TabsTrigger
+          value="fast"
+          className={`${value === 'fast' ? selectedClass(value) : defaultClasses}`}
+        >
+          {'Balanced'}
+        </TabsTrigger>
+        <TabsTrigger
+          value="precise"
+          className={`${value === 'precise' ? selectedClass(value) : defaultClasses}`}
+        >
+          {'Precise'}
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+    // </div>
+  );
+}

client/src/components/Main/RowButton.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function RowButton({ onClick, children, text, className }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border ${className}`}
+      type="button"
+    >
+      {children}
+      <span className="hidden md:block">{text}</span> 
+      {/* <RegenerateIcon />
+<span className="hidden md:block">Regenerate response</span> */}
+    </button>
+  );
+}

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 } =
-  const { isSubmitting, stopStream, submission, disabled, model, chatGptLabel, promptPrefix } =
     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, message, isCustomModel, isRegenerate } =
-    const { messages, _currentMsg, message, isCustomModel, sender, 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) => {
+  // const tryAgain = (e) => {
-    e.preventDefault();
+  //   e.preventDefault();
-    dispatch(setError(false));
+  //   dispatch(setError(false));
-  };
+  // };
 
   const isSearchView = messages?.[0]?.searchResult === true;
   const getPlaceholderText = () => {
@@ -364,10 +358,12 @@ export default function TextChat({ messages }) {
   };
 
   return (
+    <>
     <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient fixed bottom-0 left-0 w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:absolute md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
       <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
         <div className="relative flex h-full flex-1 md:flex-col">
           <span className="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
+            <BingStyles />
             {isSubmitting && !isSearchView ? (
               <button
                 onClick={handleStopGenerating}
@@ -421,5 +417,6 @@ export default function TextChat({ messages }) {
       </form>
       <Footer />
     </div>
+    </>
   );
 }

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;

client/tailwind.config.js

@@ -45,6 +45,7 @@ module.exports = {
   },
   plugins: [
     require('tailwindcss-animate'),
+    require("tailwindcss-radix")(),
     // require('@tailwindcss/typography'),
   ]
 };