⬤ style: Circular Streaming Cursor (#1736)

* Updated Style Cursor like ChatGPT

* style(Markdown.tsx): add space before cursor when there is text

* fix: revert OpenAIClient.tokens.js change

* fix:(Markdown.tsx): revert change of unused file

* fix(convos.spec.ts): test fix

* chore: remove raw HTML for cursor animations

---------

Co-authored-by: Danny Avila <danacordially@gmail.com>
Co-authored-by: Danny Avila <messagedaniel@protonmail.com>

api/server/utils/handleText.js

@@ -1,7 +1,6 @@
 const partialRight = require('lodash/partialRight');
 const { sendMessage } = require('./streamResponse');
 const { getCitations, citeText } = require('./citations');
-const cursor = '<span className="result-streaming">█</span>';
 const citationRegex = /\[\^\d+?\^]/g;
 
 const addSpaceIfNeeded = (text) => (text.length > 0 && !text.endsWith(' ') ? text + ' ' : text);
@@ -51,7 +50,7 @@ const createOnProgress = ({ generation = '', onProgress: _onProgress }) => {
   const sendIntermediateMessage = (res, payload, extraTokens = '') => {
     tokens += extraTokens;
     sendMessage(res, {
-      text: tokens?.length === 0 ? cursor : tokens,
+      text: tokens?.length === 0 ? '' : tokens,
       message: true,
       initial: i === 0,
       ...payload,

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -1,14 +1,14 @@
-import { useRecoilValue } from 'recoil';
-import React, { useState, useEffect } from 'react';
-import type { TMessage } from 'librechat-data-provider';
-import rehypeHighlight from 'rehype-highlight';
-import type { PluggableList } from 'unified';
-import ReactMarkdown from 'react-markdown';
-import supersub from 'remark-supersub';
-import rehypeKatex from 'rehype-katex';
-import remarkMath from 'remark-math';
+import { memo } from 'react';
 import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
+import remarkMath from 'remark-math';
+import supersub from 'remark-supersub';
+import rehypeKatex from 'rehype-katex';
+import { useRecoilValue } from 'recoil';
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import type { TMessage } from 'librechat-data-provider';
+import type { PluggableList } from 'unified';
 import CodeBlock from '~/components/Messages/Content/CodeBlock';
 import { langSubset, validateIframe, processLaTeX } from '~/utils';
 import { useChatContext } from '~/Providers';
@@ -26,7 +26,7 @@ type TContentProps = {
   showCursor?: boolean;
 };
 
-const code = React.memo(({ inline, className, children }: TCodeProps) => {
+const code = memo(({ inline, className, children }: TCodeProps) => {
   const match = /language-(\w+)/.exec(className || '');
   const lang = match && match[1];
 
@@ -37,48 +37,25 @@ const code = React.memo(({ inline, className, children }: TCodeProps) => {
   }
 });
 
-const p = React.memo(({ children }: { children: React.ReactNode }) => {
+const p = memo(({ children }: { children: React.ReactNode }) => {
   return <p className="mb-2 whitespace-pre-wrap">{children}</p>;
 });
 
-const Markdown = React.memo(({ content, message, showCursor }: TContentProps) => {
-  const [cursor, setCursor] = useState('█');
+const cursor = ' ⬤';
+const Markdown = memo(({ content, message, showCursor }: TContentProps) => {
   const { isSubmitting, latestMessage } = useChatContext();
   const LaTeXParsing = useRecoilValue<boolean>(store.LaTeXParsing);
 
-  const isInitializing = content === '<span className="result-streaming">█</span>';
+  const isInitializing = content === '';
 
   const { isEdited, messageId } = message ?? {};
   const isLatestMessage = messageId === latestMessage?.messageId;
 
-  const _content = content?.replace('z-index: 1;', '') ?? '';
-  const currentContent = LaTeXParsing ? processLaTeX(_content) : _content;
-
-  useEffect(() => {
-    let timer1: NodeJS.Timeout, timer2: NodeJS.Timeout;
-
-    if (!showCursor) {
-      setCursor('ㅤ');
-      return;
-    }
-
-    if (isSubmitting && isLatestMessage) {
-      timer1 = setInterval(() => {
-        setCursor('ㅤ');
-        timer2 = setTimeout(() => {
-          setCursor('█');
-        }, 200);
-      }, 1000);
-    } else {
-      setCursor('ㅤ');
-    }
-
-    // This is the cleanup function that React will run when the component unmounts
-    return () => {
-      clearInterval(timer1);
-      clearTimeout(timer2);
-    };
-  }, [isSubmitting, isLatestMessage, showCursor]);
+  let currentContent = content;
+  if (!isInitializing) {
+    currentContent = currentContent?.replace('z-index: 1;', '') ?? '';
+    currentContent = LaTeXParsing ? processLaTeX(currentContent) : currentContent;
+  }
 
   const rehypePlugins: PluggableList = [
     [rehypeKatex, { output: 'mathml' }],
@@ -93,6 +70,11 @@ const Markdown = React.memo(({ content, message, showCursor }: TContentProps) =>
     [rehypeRaw],
   ];
 
+  if (isInitializing) {
+    rehypePlugins.pop();
+    return <span className="result-thinking" />;
+  }
+
   let isValidIframe: string | boolean | null = false;
   if (!isEdited) {
     isValidIframe = validateIframe(currentContent);
@@ -116,7 +98,7 @@ const Markdown = React.memo(({ content, message, showCursor }: TContentProps) =>
         }
       }
     >
-      {isLatestMessage && isSubmitting && !isInitializing
+      {isLatestMessage && isSubmitting && !isInitializing && showCursor
         ? currentContent + cursor
         : currentContent}
     </ReactMarkdown>

client/src/hooks/useChatHelpers.ts

@@ -179,9 +179,7 @@ export default function useChatHelpers(index = 0, paramId: string | undefined) {
 
     // construct the placeholder response message
     const generation = editedText ?? latestMessage?.text ?? '';
-    const responseText = isEditOrContinue
-      ? generation
-      : '<span className="result-streaming">█</span>';
+    const responseText = isEditOrContinue ? generation : '';
 
     const responseMessageId = editedMessageId ?? latestMessage?.messageId ?? null;
     const initialResponse: TMessage = {

client/src/hooks/useMessageHandler.ts

@@ -87,9 +87,7 @@ const useMessageHandler = () => {
 
     // construct the placeholder response message
     const generation = editedText ?? latestMessage?.text ?? '';
-    const responseText = isEditOrContinue
-      ? generation
-      : '<span className="result-streaming">█</span>';
+    const responseText = isEditOrContinue ? generation : '';
 
     const responseMessageId = editedMessageId ?? latestMessage?.messageId ?? null;
     const initialResponse: TMessage = {
@@ -99,7 +97,6 @@ const useMessageHandler = () => {
       messageId: responseMessageId ?? `${isRegenerate ? messageId : fakeMessageId}_`,
       conversationId,
       unfinished: false,
-      submitting: true,
       isCreatedByUser: false,
       isEdited: isEditOrContinue,
       error: false,

client/src/hooks/useSSE.ts

@@ -332,10 +332,6 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
         } else if (response.status === 204) {
           const responseMessage = {
             ...submission.initialResponse,
-            text: submission.initialResponse.text.replace(
-              '<span className="result-streaming">█</span>',
-              '',
-            ),
           };
 
           return {

client/src/style.css

@@ -1314,7 +1314,7 @@ html {
 .result-streaming {
   -webkit-animation: blink 1s steps(5, start) infinite;
   animation: blink 1s steps(5, start) infinite;
-  content:"▋";
+  content:"⬤ ";
   margin-left: 0.25rem;
   vertical-align: baseline;
 }
@@ -1777,4 +1777,49 @@ html {
 .border-token-surface-tertiary {
   border-color: #ececf1;
   border-color: var(--surface-tertiary)
+}
+
+@-webkit-keyframes pulseSize {
+  0%,
+  to {
+    -webkit-transform:scaleX(1);
+    transform:scaleX(1)
+  }
+  50% {
+    -webkit-transform:scale3d(1.25,1.25,1);
+    transform:scale3d(1.25,1.25,1)
+  }
+}
+@keyframes pulseSize {
+  0%,
+  to {
+    -webkit-transform:scaleX(1);
+    transform:scaleX(1)
+  }
+  50% {
+    -webkit-transform:scale3d(1.25,1.25,1);
+    transform:scale3d(1.25,1.25,1)
+  }
+}
+.result-thinking:empty:last-child:after {
+  -webkit-font-smoothing:subpixel-antialiased;
+  -webkit-animation:pulseSize 1.25s ease-in-out infinite;
+  animation:pulseSize 1.25s ease-in-out infinite;
+  -webkit-backface-visibility:hidden;
+  backface-visibility:hidden;
+  background-color:#0d0d0d;
+  background-color:var(--text-primary);
+  border-radius:50%;
+  box-sizing:border-box;
+  content:" ";
+  display:block;
+  height:12px;
+  position:absolute;
+  top:32px;
+  -webkit-transform:translateZ(0);
+  transform:translateZ(0);
+  -webkit-transform-origin:center;
+  transform-origin:center;
+  width:12px;
+  will-change:transform
 }

client/src/utils/convos.spec.ts

@@ -152,7 +152,7 @@ describe('Conversation Utilities with Fake Data', () => {
       const allConversations = pages.flatMap((p) => p.conversations);
       const grouped = groupConversationsByDate(allConversations);
 
-      expect(grouped).toHaveLength(1);
+      expect(grouped).toHaveLength(2);
       expect(grouped[0][1]).toBeInstanceOf(Array);
     });
   });