fix: add cursor at the end of markdown when receiving msg

sunshinesmilelk · Oct 31, 2024 · b692a38 · b692a38
1 parent 2afa417
commit b692a38
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/web-packages/magent-chat/src/chat-view/components/markdown/index.tsx b/web-packages/magent-chat/src/chat-view/components/markdown/index.tsx
@@ -36,6 +36,28 @@ export function ImageModal({ src, alt }: any) {
     };
   }, [src]);
 
+  if (alt === 'cursor') {
+    return (
+      <div
+        style={{
+          display: 'inline-block',
+          transform: 'translateY(3px)',
+        }}
+      >
+        <img
+          src={src}
+          alt={alt}
+          style={{
+            cursor: 'pointer',
+            userSelect: 'none',
+            width: '2px',
+            height: '15px',
+          }}
+        />
+      </div>
+    );
+  }
+
   const maxModalWidth = window.innerWidth * 0.8; // 80% of the viewport width
   const maxModalHeight = window.innerHeight * 0.8; // 80% of the viewport height
 

diff --git a/web-packages/magent-chat/src/chat-view/components/message/ai-message.tsx b/web-packages/magent-chat/src/chat-view/components/message/ai-message.tsx
@@ -101,7 +101,8 @@ export const AIMessageContent = (props: AIMessageProps) => {
               {...instance.getMarkdownProps()}
               className={item.state !== AnswerState.RECEIVING ? 'tp-md' : ''}
             >
-              {item.content}
+              {item.content +
+                `${item.state === AnswerState.RECEIVING ? '![cursor](https://mdn.alipayobjects.com/huamei_enmr8b/afts/img/A*Ou5LR4JY3j8AAAAAAAAAAAAADtGPAQ/original)' : ''}`}
             </Markdown>
           </span>
         </div>