diff --git a/tauri-app/src/components/StreamingBubble.tsx b/tauri-app/src/components/StreamingBubble.tsx
new file mode 100644
index 0000000..c2c9417
--- /dev/null
+++ b/tauri-app/src/components/StreamingBubble.tsx
@@ -0,0 +1,101 @@
+import { useEffect, useRef, memo } from "react";
+import { renderMarkdown } from "../lib/markdown";
+import "./StreamingBubble.css";
+
+interface Props {
+  content: string;
+  reasoning: string;
+  thinkingOpen: boolean;
+  raw?: string;
+}
+
+const StreamingBubble = memo(function StreamingBubble({
+  content,
+  reasoning,
+  thinkingOpen,
+  raw = "",
+}: Props) {
+  const reasoningRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const hasReasoning = reasoning.trim().length > 0 || thinkingOpen;
+  const hasContent = content.trim().length > 0;
+  const fallbackVisible = !hasContent && !hasReasoning && raw.trim().length > 0 ? raw : "";
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [content, reasoning, raw]);
+
+  return (
+    <div className="msg-wrapper assistant streaming-wrapper" aria-live="polite" aria-label="AI is generating a response">
+      {(hasReasoning || (!hasContent && !fallbackVisible)) && (
+        <div className="stream-thinking-block">
+          <div className="stream-thinking-header">
+            <span className="stream-thinking-pulse" aria-hidden="true" />
+            <span className="stream-thinking-label">
+              {(thinkingOpen || (!hasContent && !fallbackVisible)) ? "Thinking…" : "Thinking"}
+            </span>
+          </div>
+          <div ref={reasoningRef} className="stream-thinking-body">
+            {reasoning.trim().length > 0 ? (
+              <WordStream text={reasoning} />
+            ) : (
+              <span className="stream-thinking-placeholder">Generating reasoning…</span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {!hasReasoning && !hasContent && !fallbackVisible && (
+        <div className="stream-loading-dots" aria-label="Waiting for response">
+          <span />
+          <span />
+          <span />
+        </div>
+      )}
+
+      {hasContent && (
+        <div
+          className="msg-content msg-content--assistant manus-markdown"
+          dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }}
+        />
+      )}
+
+      {fallbackVisible && !hasContent && (
+        <div
+          className="msg-content msg-content--assistant manus-markdown"
+          dangerouslySetInnerHTML={{ __html: renderMarkdown(fallbackVisible) }}
+        />
+      )}
+
+      <div ref={bottomRef} />
+    </div>
+  );
+});
+
+export default StreamingBubble;
+
+interface WordStreamProps {
+  text: string;
+}
+
+const WordStream = memo(function WordStream({ text }: WordStreamProps) {
+  const tokens = text.split(/(\s+)/);
+
+  return (
+    <span className="word-stream">
+      {tokens.map((token, i) => {
+        if (/^\s+$/.test(token)) return <span key={i}>{token}</span>;
+        return (
+          <span
+            key={i}
+            className="word-stream-token"
+            style={{ animationDelay: `${Math.min(i * 8, 400)}ms` }}
+          >
+            {token}
+          </span>
+        );
+      })}
+    </span>
+  );
+});