Add blinking typing cursing (#619)

Author: anthonypuppo

components/Chat/ChatLoader.tsx

@@ -1,5 +1,4 @@
 import { IconRobot } from '@tabler/icons-react';
-import { IconDots } from '@tabler/icons-react';
 import { FC } from 'react';
 
 interface Props { }
@@ -14,7 +13,7 @@ export const ChatLoader: FC<Props> = () => {
         <div className="min-w-[40px] items-end">
           <IconRobot size={30} />
         </div>
-        <IconDots className="animate-pulse" />
+        <span className="animate-pulse cursor-default mt-1">▍</span>
       </div>
     </div>
   );

components/Chat/ChatMessage.tsx

@@ -33,7 +33,7 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
   const { t } = useTranslation('chat');
 
   const {
-    state: { selectedConversation, conversations, currentMessage },
+    state: { selectedConversation, conversations, currentMessage, messageIsStreaming },
     dispatch: homeDispatch,
   } = useContext(HomeContext);
 
@@ -215,6 +215,14 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
                 rehypePlugins={[rehypeMathjax]}
                 components={{
                   code({ node, inline, className, children, ...props }) {
+                    if (children.length) {
+                      if (children[0] == '▍') {
+                        return <span className="animate-pulse cursor-default mt-1">▍</span>
+                      }
+
+                      children[0] = (children[0] as string).replace("`▍`", "▍")
+                    }
+
                     const match = /language-(\w+)/.exec(className || '');
 
                     return !inline ? (
@@ -253,7 +261,9 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
                   },
                 }}
               >
-                {message.content}
+                {`${message.content}${
+                  messageIsStreaming && messageIndex == (selectedConversation?.messages.length ?? 0) - 1 ? '`▍`' : ''
+                }`}
               </MemoizedReactMarkdown>
 
               <div className="md:-mr-8 ml-1 md:ml-0 flex flex-col md:flex-row gap-4 md:gap-1 items-center md:items-start justify-end md:justify-start">