feat: complete view for styles

2025-12-18 17:30:16 +01:00 · 2023-03-24 14:46:07 -04:00 · 2023-03-24 14:46:07 -04:00 · 83b88bd759
commit 83b88bd759
parent 4f18a471b0
7 changed files with 239 additions and 37 deletions
--- 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",
--- 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"
  },
--- a/client/src/components/Main/BingStyles.jsx
+++ 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 (
+    // <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>
+  );
+}
--- a/client/src/components/Main/RowButton.jsx
+++ b/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>
+  );
+}
--- 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 (
+    <>
    <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>
+    </>
  );
 }
--- 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;
--- 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'),
  ]
 };