chore: refactor cursor blink, debugging

client/src/components/Messages/Message.jsx

@@ -1,10 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import TextWrapper from './TextWrapper';
 import MultiMessage from './MultiMessage';
 import { useSelector, useDispatch } from 'react-redux';
 import HoverButtons from './HoverButtons';
 import SiblingSwitch from './SiblingSwitch';
-import Spinner from '../svg/Spinner';
 import { setError } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setSubmitState, setSubmission } from '~/store/submitSlice';
@@ -22,21 +21,28 @@ export default function Message({
   siblingCount,
   setSiblingIdx
 }) {
-  const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector((state) => state.submit);
+  const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector(
+    (state) => state.submit
+  );
   const [abortScroll, setAbort] = useState(false);
-  const { sender, text, isCreatedByUser, error, submitting } = message
+  const { sender, text, isCreatedByUser, error, submitting } = message;
-  const textEditor = useRef(null)
+  const textEditor = useRef(null);
   const convo = useSelector((state) => state.convo);
   const { initial } = useSelector((state) => state.models);
   const { error: convoError } = convo;
-  const last = !message?.children?.length
+  const last = !message?.children?.length;
-
   const edit = message.messageId == currentEditId;
-
   const dispatch = useDispatch();
 
   // const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
   const blinker = submitting && isSubmitting && last && !isCreatedByUser;
+  const generateCursor = useCallback(() => {
+    if (!blinker) {
+      return '';
+    }
+
+    return <span className="result-streaming">█</span>;
+  }, [blinker]);
 
   useEffect(() => {
     if (blinker && !abortScroll) {
@@ -45,15 +51,10 @@ export default function Message({
   }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
 
   useEffect(() => {
-    if (last)
+    if (last) dispatch(setConversation({ parentMessageId: message?.messageId }));
-      dispatch(setConversation({parentMessageId: message?.messageId}))
+  }, [last]);
-  }, [last, ])
 
-  // if (sender === '') {
+  const enterEdit = (cancel) => setCurrentEditId(cancel ? -1 : message.messageId);
-  //   return <Spinner />;
-  // }
-
-  const enterEdit = (cancel) => setCurrentEditId(cancel?-1:message.messageId)
 
   const handleWheel = () => {
     if (blinker) {
@@ -68,16 +69,23 @@ export default function Message({
       'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800'
   };
 
-  const icon = getIconOfModel({ sender, isCreatedByUser, model, chatGptLabel, promptPrefix, error });
+  const icon = getIconOfModel({
+    sender,
+    isCreatedByUser,
+    model,
+    chatGptLabel,
+    promptPrefix,
+    error
+  });
 
   if (!isCreatedByUser)
     props.className =
       'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
 
-  const wrapText = (text) => <TextWrapper text={text} />;
+  // const wrapText = (text) => <TextWrapper text={text} generateCursor={generateCursor}/>;
 
   const resubmitMessage = () => {
-    const text = textEditor.current.innerText
+    const text = textEditor.current.innerText;
 
     if (convoError) {
       dispatch(setError(false));
@@ -91,13 +99,22 @@ export default function Message({
     const fakeMessageId = crypto.randomUUID();
     const isCustomModel = model === 'chatgptCustom' || !initial[model];
     const currentMsg = {
-      sender: 'User', text: text.trim(), current: true, isCreatedByUser: true, 
+      sender: 'User',
+      text: text.trim(),
+      current: true,
+      isCreatedByUser: true,
       parentMessageId: message?.parentMessageId,
       conversationId: message?.conversationId,
-      messageId: fakeMessageId };
+      messageId: fakeMessageId
+    };
     const sender = model === 'chatgptCustom' ? chatGptLabel : model;
 
-    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
+    const initialResponse = {
+      sender,
+      text: '',
+      parentMessageId: fakeMessageId,
+      submitting: true
+    };
 
     dispatch(setSubmitState(true));
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
@@ -109,18 +126,18 @@ export default function Message({
         ...currentMsg,
         model,
         chatGptLabel,
-        promptPrefix,
+        promptPrefix
       },
       messages: messages,
       currentMsg,
       initialResponse,
-      sender,
+      sender
     };
     console.log('User Input:', currentMsg?.text);
     // handleSubmit(submission);
     dispatch(setSubmission(submission));
 
-    setSiblingIdx(siblingCount - 1)
+    setSiblingIdx(siblingCount - 1);
     enterEdit(true);
   };
 
@@ -131,42 +148,48 @@ export default function Message({
         onWheel={handleWheel}
       >
         <div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
-
           <div className="relative flex h-[30px] w-[30px] flex-col items-end text-right text-xs md:text-sm">
             {typeof icon === 'string' && icon.match(/[^\u0000-\u007F]+/) ? (
               <span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span>
             ) : (
               icon
             )}
-            <SiblingSwitch siblingIdx={siblingIdx} siblingCount={siblingCount} setSiblingIdx={setSiblingIdx} />
+            <SiblingSwitch
+              siblingIdx={siblingIdx}
+              siblingCount={siblingCount}
+              setSiblingIdx={setSiblingIdx}
+            />
           </div>
           <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
             <div className="flex flex-grow flex-col gap-3">
               {error ? (
-                <div className="flex flex min-h-[20px] flex-col flex-grow items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
+                <div className="flex flex min-h-[20px] flex-grow flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
                   <div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
                     {`An error occurred. Please try again in a few moments.\n\nError message: ${text}`}
                   </div>
                 </div>
-              ) : 
+              ) : edit ? (
-                edit ? (
+                <div className="flex min-h-[20px] flex-grow flex-col items-start gap-4 whitespace-pre-wrap">
-                  <div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
                   {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
 
-                    <div className="markdown prose dark:prose-invert light w-full break-words border-none focus:outline-none" 
+                  <div
-                      contentEditable={true} ref={textEditor} suppressContentEditableWarning={true}>
+                    className="markdown prose dark:prose-invert light w-full break-words border-none focus:outline-none"
+                    contentEditable={true}
+                    ref={textEditor}
+                    suppressContentEditableWarning={true}
+                  >
                     {text}
                   </div>
-                    <div className="text-center mt-2 flex w-full justify-center">
+                  <div className="mt-2 flex w-full justify-center text-center">
                     <button
-                        className="btn relative btn-primary mr-2"
+                      className="btn btn-primary relative mr-2"
                       disabled={isSubmitting}
                       onClick={resubmitMessage}
                     >
                       Save & Submit
                     </button>
                     <button
-                        className="btn relative btn-neutral"
+                      className="btn btn-neutral relative"
                       onClick={() => enterEdit(true)}
                     >
                       Cancel
@@ -174,16 +197,26 @@ export default function Message({
                   </div>
                 </div>
               ) : (
-                  <div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
+                <div className="flex min-h-[20px] flex-grow flex-col items-start gap-4 whitespace-pre-wrap">
                   {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
                   <div className="markdown prose dark:prose-invert light w-full break-words">
-                      {!isCreatedByUser ? wrapText(text) : text}
+                    {!isCreatedByUser ? (
-                      {blinker && <span className="result-streaming">█</span>}
+                      <TextWrapper
+                        text={text}
+                        generateCursor={generateCursor}
+                      />
+                    ) : (
+                      text
+                    )}
                   </div>
                 </div>
               )}
             </div>
-              <HoverButtons model={model} visible={!error && isCreatedByUser && !edit} onClick={() => enterEdit()}/>
+            <HoverButtons
+              model={model}
+              visible={!error && isCreatedByUser && !edit}
+              onClick={() => enterEdit()}
+            />
           </div>
         </div>
       </div>

client/src/components/Messages/TextWrapper.jsx

@@ -46,8 +46,9 @@ const inLineWrap = (parts) => {
   });
 };
 
-export default function TextWrapper({ text }) {
+export default function TextWrapper({ text, generateCursor }) {
   let embedTest = false;
+  let result = null;
 
   // to match unenclosed code blocks
   if (text.match(/```/g)?.length === 1) {
@@ -137,13 +138,23 @@ export default function TextWrapper({ text }) {
       }
     });
 
-    return <>{codeParts}</>; // return the wrapped text
+    // return <>{codeParts}</>; // return the wrapped text
+    result = <>{codeParts}</>;
   } else if (text.match(markupRegex)) {
     // map over the parts and wrap any text between tildes with <code> tags
     const parts = text.split(markupRegex);
     const codeParts = inLineWrap(parts);
-    return <Markdown options={mdOptions}>{codeParts}</Markdown>; // return the wrapped text
+    // return <>{codeParts}</>; // return the wrapped text
+    result = <>{codeParts}</>;
   } else {
-    return <Markdown options={mdOptions}>{text}</Markdown>;
+    // return <Markdown options={mdOptions}>{text}</Markdown>;
+    result = <Markdown options={mdOptions}>{text}</Markdown>;
   }
+
+  return (
+    <>
+    {result}
+    {(<>{generateCursor()}</>)}
+    </>
+  );
 }

client/src/style.css

@@ -1251,7 +1251,6 @@ html {
   vertical-align: baseline;
 }
 
-
 /* .result-streaming>:not(ol):not(ul):not(pre):last-child:after,
 .result-streaming>ol:last-child li:last-child:after,
 .result-streaming>pre:last-child code:after,