clean up markdown

app/components/Chat.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { notoSansThai } from '../constants';
 import useChat from '../hooks/useChat';
 import type { AgentMessage, Language, StreamEntry } from '../types';
+import { markdownToPlainText } from '../utils';
 import ChatInput from './ChatInput';
 import StreamItem from './StreamItem';
 
@@ -18,24 +19,15 @@ export default function Chat({ className, currentLanguage }: ChatProps) {
 
   const bottomRef = useRef<HTMLDivElement>(null);
 
-  // TODO: revisit this logic
   const handleSuccess = useCallback((messages: AgentMessage[]) => {
-    // const message = messages.find((res) => res.event === "agent");
-    const filteredMessages = messages.filter(
-      (msg) => msg.event !== 'completed',
-    );
-    const streams = filteredMessages.map((msg) => {
-      return {
-        timestamp: new Date(),
-        content: msg?.data || '',
-        type: msg?.event,
-      };
-    });
-    // const streamEntry = {
-    //   timestamp: new Date(),
-    //   content: message?.data || "",
-    // };
-    setStreamEntries((prev) => [...prev, ...streams]);
+    const message = messages.find((res) => res.event === 'agent');
+    const streamEntry: StreamEntry = {
+      timestamp: new Date(),
+      content: markdownToPlainText(message?.data || ''),
+      type: 'agent',
+    };
+
+    setStreamEntries((prev) => [...prev, streamEntry]);
   }, []);
 
   const { postChat, isLoading } = useChat({ onSuccess: handleSuccess });

app/components/Stream.tsx

@@ -7,6 +7,7 @@ import {
 } from '../constants';
 import useChat from '../hooks/useChat';
 import { translations } from '../translations';
+import { markdownToPlainText } from '../utils';
 import type { AgentMessage, Language, StreamEntry } from '../types';
 import StreamItem from './StreamItem';
 
@@ -20,25 +21,15 @@ export default function Stream({ currentLanguage }: StreamProps) {
   const [loadingDots, setLoadingDots] = useState('');
   const bottomRef = useRef<HTMLDivElement>(null);
 
-  // TODO: revisit this logic
   const handleSuccess = useCallback((messages: AgentMessage[]) => {
-    // const message = messages.find((res) => res.event === "agent");
-    const filteredMessages = messages.filter(
-      (msg) => msg.event !== 'completed',
-    );
-    const streams = filteredMessages.map((msg) => {
-      return {
-        timestamp: new Date(),
-        content: msg?.data || '',
-        type: msg?.event,
-      };
-    });
-    // const streamEntry = {
-    //   timestamp: new Date(),
-    //   content: message?.data || "",
-    // };
+    const message = messages.find((res) => res.event === 'agent');
+    const streamEntry: StreamEntry = {
+      timestamp: new Date(),
+      content: markdownToPlainText(message?.data || ''),
+      type: 'agent',
+    };
     setIsThinking(false);
-    setStreamEntries((prev) => [...prev, ...streams]);
+    setStreamEntries((prev) => [...prev, streamEntry]);
     setTimeout(() => {
       setIsThinking(true);
     }, 800);

app/utils.tsx

@@ -1,28 +1,10 @@
-import ArrowSvg from './svg/ArrowSvg';
-import NftSvg from './svg/NftSvg';
-import RequestSvg from './svg/RequestSvg';
-import SwapSvg from './svg/SwapSvg';
-import TokenSvg from './svg/TokenSvg';
-import WalletSvg from './svg/WalletSvg';
-import type { StreamEntry } from './types';
-
-export const getActionIcon = (type: StreamEntry['type']) => {
-  switch (type) {
-    case 'create_wallet':
-      return <WalletSvg />;
-    case 'request_faucet_funds':
-      return <RequestSvg />;
-    case 'get_balance':
-      return <WalletSvg />;
-    case 'swap_token':
-      return <SwapSvg />;
-    case 'tools':
-      return <TokenSvg />;
-    case 'transfer_nft':
-      return <NftSvg />;
-    case 'user':
-      return <ArrowSvg className="-rotate-45 w-3 w-3" />;
-    default:
-      return null;
-  }
-};
+export function markdownToPlainText(markdown: string) {
+  return markdown
+    .replace(/[#*_~`>]/g, '') // Remove Markdown syntax characters
+    .replace(/\[(.*?)\]\((.*?)\)/g, '$2') // Replace links [title](url) with url
+    .replace(/!\[(.*?)\]\(.*?\)/g, '$1') // Replace images ![alt](url) with "alt"
+    .replace(/>\s?/g, '') // Remove blockquotes
+    .replace(/^\s*-\s+/gm, '\n- ') // Retain unordered list markers
+    .replace(/\n+/g, '\n') // Collapse multiple newlines
+    .trim(); // Remove leading/trailing whitespace
+}

pyproject.toml

@@ -2,6 +2,7 @@
 name = "api"
 version = "0.1.0"
 description = ""
+authors = ["Your Name <[email protected]>"]
 readme = "README.md"
 
 [tool.poetry.dependencies]