Merge pull request #128 from HyunggyuJang/sydney/tone-adjustment

Make tone adjustment available after conversation started if sydney

Author: danny-avila

client/src/components/Main/AdjustToneButton.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+export default function AdjustButton({ onClick }) {
+  const clickHandler = (e) => {
+    e.preventDefault();
+    onClick();
+  };
+  return (
+    <button
+      onClick={clickHandler}
+      className="group absolute bottom-11 md:bottom-0 -right-11 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
+    >
+      <div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          height="1em"
+          width="1em"
+          strokeWidth="2"
+          stroke="currentColor"
+          className="mr-1 h-4 w-4">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
+        </svg>
+      </div>
+    </button>
+  );
+}

client/src/components/Main/BingStyles.jsx

@@ -9,15 +9,15 @@ function BingStyles(props, ref) {
   const { model } = useSelector((state) => state.submit);
   const { conversationId } = useSelector((state) => state.convo);
   const { messages } = useSelector((state) => state.messages);
-  
+
   const isBing = model === 'bingai' || model === 'sydney';
   useEffect(() => {
-    if (isBing && !conversationId) {
+    if (model === 'bingai' && !conversationId || model === 'sydney') {
       dispatch(setConversation({ toneStyle: value }));
     }
-  }, [isBing, conversationId, model, value, dispatch]);
+  }, [conversationId, model, value, dispatch]);
 
-  const show = isBing && (!conversationId || messages?.length === 0);
+  const show = isBing && ((!conversationId || messages?.length === 0) || props.show);
   const defaultClasses = 'p-2 rounded-md font-normal bg-white/[.60] dark:bg-gray-700 text-black';
   const defaultSelected = defaultClasses + 'font-medium data-[state=active]:text-white';
 

client/src/components/Main/TextChat.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { SSE } from '~/utils/sse';
 import SubmitButton from './SubmitButton';
@@ -15,14 +15,16 @@ import { setMessages } from '~/store/messageSlice';
 import { setSubmitState, toggleCursor } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
 import { useMessageHandler } from '../../utils/handleSubmit';
+import AdjustToneButton from './AdjustToneButton';
 
 export default function TextChat({ messages }) {
   const inputRef = useRef(null);
   const bingStylesRef = useRef(null);
+  const [showBingToneSetting, setShowBingToneSetting] = useState(false);
   const isComposing = useRef(false);
   const dispatch = useDispatch();
   const convo = useSelector(state => state.convo);
-  const { isSubmitting, stopStream, submission, disabled } = useSelector(state => state.submit);
+  const { isSubmitting, stopStream, submission, disabled, model } = useSelector(state => state.submit);
   const { text } = useSelector(state => state.text);
   const { latestMessage } = convo;
   const { ask, regenerate, stopGenerating } = useMessageHandler();
@@ -372,13 +374,17 @@ export default function TextChat({ messages }) {
     return '';
   };
 
+  const handleBingToneSetting = () => {
+    setShowBingToneSetting((show) => !show)
+  }
+
   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 ref={bingStylesRef}/>
+              <BingStyles ref={bingStylesRef} show={showBingToneSetting}/>
               {isSubmitting && !isSearchView ? (
                 <button
                   onClick={handleStopGenerating}
@@ -427,6 +433,9 @@ export default function TextChat({ messages }) {
                 submitMessage={submitMessage}
                 disabled={disabled || isNotAppendable}
               />
+              {messages?.length && model === 'sydney' ?
+                <AdjustToneButton onClick={handleBingToneSetting} /> :
+                null}
             </div>
           </div>
         </form>