Add blinking typing cursing (#619)

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">