Render streamed assistant responses as Markdown

frontend/src/ai/ChatPanel.tsx

@@ -1,5 +1,13 @@
 import { useChat } from "@ai-sdk/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Banner,
   Button,
@@ -35,6 +43,12 @@ import type {
   UIAction,
 } from "./types";
 
+const MessageMarkdown = lazy(() =>
+  import("./MessageMarkdown").then((module) => ({
+    default: module.MessageMarkdown,
+  })),
+);
+
 export function ChatPanel({
   open,
   context,
@@ -427,9 +441,25 @@ export function ChatPanel({
             </span>
             {message.parts.map((part, index) =>
               part.type === "text" ? (
-                <div className="ai-text" key={index}>
-                  {part.text}
-                </div>
+                message.role === "assistant" ? (
+                  <Suspense
+                    key={index}
+                    fallback={<div className="ai-text">{part.text}</div>}
+                  >
+                    <MessageMarkdown
+                      content={part.text}
+                      final={
+                        !streaming ||
+                        message.id !== chat.messages.at(-1)?.id ||
+                        part.state === "done"
+                      }
+                    />
+                  </Suspense>
+                ) : (
+                  <div className="ai-text" key={index}>
+                    {part.text}
+                  </div>
+                )
               ) : part.type === "data-tool" ? (
                 <BusinessCard
                   key={part.id ?? index}