feat: complete bing styles (view)

client/src/components/Main/BingStyles.jsx

@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import { Tabs, TabsList, TabsTrigger } from '../ui/Tabs.tsx';
 import { useDispatch, useSelector } from 'react-redux';
 import { setConversation } from '~/store/convoSlice';
 
-export default function BingStyles() {
+function BingStyles(props, ref) {
   const dispatch = useDispatch();
   const [value, setValue] = useState('fast');
   const { model } = useSelector((state) => state.submit);
   const { conversationId } = useSelector((state) => state.convo);
   const { messages } = useSelector((state) => state.messages);
-  const isBing = model === 'bingai' || model === 'sydney';
   
+  const isBing = model === 'bingai' || model === 'sydney';
   useEffect(() => {
     if (isBing && !conversationId) {
       dispatch(setConversation({ toneStyle: value }));
@@ -32,6 +32,7 @@ export default function BingStyles() {
       defaultValue={value}
       className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`}
       onValueChange={changeHandler}
+      ref={ref}
     >
       <TabsList className="bg-white/[.60] dark:bg-gray-700">
         <TabsTrigger
@@ -56,3 +57,5 @@ export default function BingStyles() {
     </Tabs>
   );
 }
+
+export default forwardRef(BingStyles);

client/src/components/Main/TextChat.jsx

@@ -10,11 +10,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import createPayload from '~/utils/createPayload';
 import RegenerateIcon from '../svg/RegenerateIcon';
 import StopGeneratingIcon from '../svg/StopGeneratingIcon';
-import {
-  setConversation,
-  setError,
-  refreshConversation
-} from '~/store/convoSlice';
+import { setConversation, setError, refreshConversation } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setSubmitState, toggleCursor } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
@@ -22,12 +18,12 @@ import { useMessageHandler } from '../../utils/handleSubmit';
 
 export default function TextChat({ messages }) {
   const inputRef = useRef(null);
+  const bingStylesRef = useRef(null);
   const isComposing = useRef(false);
   const dispatch = useDispatch();
-  const convo = useSelector((state) => state.convo);
-  const { isSubmitting, stopStream, submission, disabled } =
-    useSelector((state) => state.submit);
-  const { text } = useSelector((state) => state.text);
+  const convo = useSelector(state => state.convo);
+  const { isSubmitting, stopStream, submission, disabled } = useSelector(state => state.submit);
+  const { text } = useSelector(state => state.text);
   const { latestMessage } = convo;
   const { ask, regenerate, stopGenerating } = useMessageHandler();
 
@@ -38,6 +34,22 @@ export default function TextChat({ messages }) {
     inputRef.current?.focus();
   }, [convo?.conversationId]);
 
+  // controls the height of Bing tone style tabs
+  useEffect(() => {
+    if (!inputRef.current) {
+      return; // wait for the ref to be available
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      const newHeight = inputRef.current.clientHeight;
+      if (newHeight >= 24) { // 24 is the default height of the input
+        bingStylesRef.current.style.bottom = 15 + newHeight + 'px';
+      }
+    });
+    resizeObserver.observe(inputRef.current);
+    return () => resizeObserver.disconnect();
+  }, [inputRef]);
+
   const messageHandler = (data, currentState, currentMsg) => {
     const { messages, message, sender, isRegenerate } = currentState;
 
@@ -114,8 +126,7 @@ export default function TextChat({ messages }) {
 
   const convoHandler = (data, currentState) => {
     const { requestMessage, responseMessage } = data;
-    const { messages, message, isCustomModel, isRegenerate } =
-      currentState;
+    const { messages, message, isCustomModel, isRegenerate } = currentState;
     const { model, chatGptLabel, promptPrefix } = message;
     if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
     else dispatch(setMessages([...messages, requestMessage, responseMessage]));
@@ -223,7 +234,7 @@ export default function TextChat({ messages }) {
     let latestResponseText = '';
 
     const { server, payload } = createPayload(submission);
-    const onMessage = (e) => {
+    const onMessage = e => {
       if (stopStream) {
         return;
       }
@@ -298,7 +309,7 @@ export default function TextChat({ messages }) {
     stopGenerating();
   };
 
-  const handleKeyDown = (e) => {
+  const handleKeyDown = e => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
     }
@@ -308,7 +319,11 @@ export default function TextChat({ messages }) {
     }
   };
 
-  const handleKeyUp = (e) => {
+  const handleKeyUp = e => {
+    if (e.keyCode === 8 && e.target.value.trim() === '') {
+      dispatch(setText(e.target.value));
+    }
+
     if (e.key === 'Enter' && e.shiftKey) {
       return console.log('Enter + Shift');
     }
@@ -326,7 +341,7 @@ export default function TextChat({ messages }) {
     isComposing.current = false;
   };
 
-  const changeHandler = (e) => {
+  const changeHandler = e => {
     const { value } = e.target;
 
     // if (isSubmitting && (value === '' || value === '\n')) {
@@ -343,7 +358,7 @@ export default function TextChat({ messages }) {
   const isSearchView = messages?.[0]?.searchResult === true;
   const getPlaceholderText = () => {
     if (isSearchView) {
-      return 'Click a message title to open its conversation.'
+      return 'Click a message title to open its conversation.';
     }
 
     if (disabled) {
@@ -351,7 +366,7 @@ export default function TextChat({ messages }) {
     }
 
     if (isNotAppendable) {
-      return 'Edit your message or Regenerate.'
+      return 'Edit your message or Regenerate.';
     }
 
     return '';
@@ -363,7 +378,7 @@ export default function TextChat({ messages }) {
         <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 />
+              <BingStyles ref={bingStylesRef}/>
               {isSubmitting && !isSearchView ? (
                 <button
                   onClick={handleStopGenerating}
@@ -406,7 +421,7 @@ export default function TextChat({ messages }) {
                 onCompositionEnd={handleCompositionEnd}
                 placeholder={getPlaceholderText()}
                 disabled={disabled || isNotAppendable}
-              className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm placeholder:text-gray-600 dark:placeholder:text-gray-500 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
+                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-8"
               />
               <SubmitButton
                 submitMessage={submitMessage}

client/src/components/Messages/Content/TextWrapper.jsx

@@ -46,7 +46,7 @@ const inLineWrap = (parts) => {
   });
 };
 
-export default function TextWrapper({ text, generateCursor }) {
+function TextWrapper({ text, generateCursor }) {
   let embedTest = false;
   let result = null;
 
@@ -158,3 +158,5 @@ export default function TextWrapper({ text, generateCursor }) {
     </>
   );
 }
+
+export default React.memo(TextWrapper);

client/src/style.css

@@ -33,7 +33,7 @@ position: absolute;
 left: 0; 
 right: 0; 
 opacity: 0;
-bottom: 35px;
+bottom: 39px;
 z-index: 995;
 margin-left: auto; 
 margin-right: auto;