@xenide-io/the-old-ui-theme 0.9.5 → 0.9.6

package/dist/ai-message-markdown-AUEMCO7K.mjs

@@ -0,0 +1,65 @@
+"use client";
+import "./chunk-FWCSY2DS.mjs";
+
+// src/suite/components/ai-message-markdown.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx } from "react/jsx-runtime";
+var WORD_STEP_MS = 18;
+var MAX_DELAY_MS = 600;
+var SKIP_TAGS = /* @__PURE__ */ new Set(["code", "pre", "style", "script"]);
+function rehypeStaggerWords() {
+  return (tree) => {
+    let wordIndex = 0;
+    const visit = (node) => {
+      if (!node.children) return;
+      if (node.tagName && SKIP_TAGS.has(node.tagName)) return;
+      const next = [];
+      for (const child of node.children) {
+        const isText = child.type === "text" && typeof child.value === "string" && /\S/.test(child.value);
+        if (!isText) {
+          visit(child);
+          next.push(child);
+          continue;
+        }
+        for (const part of child.value.split(/(\s+)/)) {
+          if (!part) continue;
+          if (/^\s+$/.test(part)) {
+            next.push({ type: "text", value: part });
+            continue;
+          }
+          const delay = Math.min(wordIndex * WORD_STEP_MS, MAX_DELAY_MS);
+          wordIndex += 1;
+          next.push({
+            type: "element",
+            tagName: "span",
+            properties: {
+              className: ["suite-word-in"],
+              style: `animation-delay:${delay}ms`
+            },
+            children: [{ type: "text", value: part }]
+          });
+        }
+      }
+      node.children = next;
+    };
+    visit(tree);
+  };
+}
+function SuiteAiMarkdownMessage({
+  markdown,
+  animate = false
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "suite-ai-markdown", children: /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: animate ? [rehypeStaggerWords] : void 0,
+      components: { img: () => null },
+      children: markdown
+    }
+  ) });
+}
+export {
+  SuiteAiMarkdownMessage as default
+};

package/dist/suite.js

@@ -64,19 +64,59 @@ var ai_message_markdown_exports = {};
 __export(ai_message_markdown_exports, {
   default: () => SuiteAiMarkdownMessage
 });
+function rehypeStaggerWords() {
+  return (tree) => {
+    let wordIndex = 0;
+    const visit = (node) => {
+      if (!node.children) return;
+      if (node.tagName && SKIP_TAGS.has(node.tagName)) return;
+      const next = [];
+      for (const child of node.children) {
+        const isText = child.type === "text" && typeof child.value === "string" && /\S/.test(child.value);
+        if (!isText) {
+          visit(child);
+          next.push(child);
+          continue;
+        }
+        for (const part of child.value.split(/(\s+)/)) {
+          if (!part) continue;
+          if (/^\s+$/.test(part)) {
+            next.push({ type: "text", value: part });
+            continue;
+          }
+          const delay = Math.min(wordIndex * WORD_STEP_MS, MAX_DELAY_MS);
+          wordIndex += 1;
+          next.push({
+            type: "element",
+            tagName: "span",
+            properties: {
+              className: ["suite-word-in"],
+              style: `animation-delay:${delay}ms`
+            },
+            children: [{ type: "text", value: part }]
+          });
+        }
+      }
+      node.children = next;
+    };
+    visit(tree);
+  };
+}
 function SuiteAiMarkdownMessage({
-  markdown
+  markdown,
+  animate = false
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "suite-ai-markdown", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_react_markdown.default,
     {
       remarkPlugins: [import_remark_gfm.default],
+      rehypePlugins: animate ? [rehypeStaggerWords] : void 0,
       components: { img: () => null },
       children: markdown
     }
   ) });
 }
-var import_react_markdown, import_remark_gfm, import_jsx_runtime23;
+var import_react_markdown, import_remark_gfm, import_jsx_runtime23, WORD_STEP_MS, MAX_DELAY_MS, SKIP_TAGS;
 var init_ai_message_markdown = __esm({
   "src/suite/components/ai-message-markdown.tsx"() {
     "use strict";
@@ -84,6 +124,9 @@ var init_ai_message_markdown = __esm({
     import_react_markdown = __toESM(require("react-markdown"));
     import_remark_gfm = __toESM(require("remark-gfm"));
     import_jsx_runtime23 = require("react/jsx-runtime");
+    WORD_STEP_MS = 18;
+    MAX_DELAY_MS = 600;
+    SKIP_TAGS = /* @__PURE__ */ new Set(["code", "pre", "style", "script"]);
   }
 });
 
@@ -3665,6 +3708,10 @@ function SuiteAiPanel({
     else window.location.assign(new URL(openPath, href).toString());
   }
   if (!open) return null;
+  const lastAssistantIndex = messages.reduce(
+    (found, message, index) => message.role === "assistant" ? index : found,
+    -1
+  );
   const Icon = BrandIcon != null ? BrandIcon : import_iconoir_react8.Sparks;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "aside",
@@ -3733,7 +3780,7 @@ function SuiteAiPanel({
                     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "div",
                       {
-                        className: "flex justify-end",
+                        className: "suite-msg-in suite-msg-in--user flex justify-end",
                         "data-test": "ask-ai-user",
                         children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]", children: message.content })
                       },
@@ -3749,12 +3796,12 @@ function SuiteAiPanel({
                         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           "span",
                           {
-                            className: "mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand",
+                            className: "suite-msg-avatar mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand",
                             "aria-hidden": true,
                             children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { className: "h-3.5 w-3.5" })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "min-w-0 max-w-[85%] space-y-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "suite-msg-bubble min-w-0 max-w-[85%] space-y-2", children: [
                           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             import_react12.Suspense,
                             {
@@ -3766,13 +3813,19 @@ function SuiteAiPanel({
                                   "aria-label": "Rendering response",
                                   children: [
                                     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", children: "Rendering response\u2026" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-3 w-11/12 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-3 w-full rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-3 w-3/5 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" })
+                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suite-shimmer h-3 w-11/12 rounded bg-ph-mutedtext/20" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suite-shimmer h-3 w-full rounded bg-ph-mutedtext/20" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suite-shimmer h-3 w-3/5 rounded bg-ph-mutedtext/20" })
                                   ]
                                 }
                               ),
-                              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SuiteAiMarkdownMessage2, { markdown: message.content })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                                SuiteAiMarkdownMessage2,
+                                {
+                                  markdown: message.content,
+                                  animate: index === lastAssistantIndex
+                                }
+                              )
                             }
                           ) }),
                           ((_a = message.actions) != null ? _a : []).map((action) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
@@ -3836,9 +3889,9 @@ function SuiteAiPanel({
                 waiting ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-end gap-2", "aria-hidden": true, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { className: "h-3.5 w-3.5" }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-1.5 rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.15s]" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.3s]" })
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "suite-think-dot h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "suite-think-dot suite-think-dot--2 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "suite-think-dot suite-think-dot--3 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" })
                   ] })
                 ] }) : null,
                 waiting ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", "aria-live": "polite", children: "Assistant is responding\u2026" }) : null,

package/dist/suite.mjs

@@ -2386,7 +2386,7 @@ import {
   WarningTriangle
 } from "iconoir-react";
 import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
-var SuiteAiMarkdownMessage = lazy(() => import("./ai-message-markdown-TSPYON2F.mjs"));
+var SuiteAiMarkdownMessage = lazy(() => import("./ai-message-markdown-AUEMCO7K.mjs"));
 var SUITE_OPEN_ASK_AI_EVENT = "shellstack:open-ask-ai";
 var SUITE_ASK_AI_OPEN_KEY = "shellstack:shelly-open";
 var SUITE_ASK_AI_OPEN_QUERY = "shelly";
@@ -2685,6 +2685,10 @@ function SuiteAiPanel({
     else window.location.assign(new URL(openPath, href).toString());
   }
   if (!open) return null;
+  const lastAssistantIndex = messages.reduce(
+    (found, message, index) => message.role === "assistant" ? index : found,
+    -1
+  );
   const Icon = BrandIcon != null ? BrandIcon : Sparks;
   return /* @__PURE__ */ jsxs14(
     "aside",
@@ -2753,7 +2757,7 @@ function SuiteAiPanel({
                     return /* @__PURE__ */ jsx17(
                       "div",
                       {
-                        className: "flex justify-end",
+                        className: "suite-msg-in suite-msg-in--user flex justify-end",
                         "data-test": "ask-ai-user",
                         children: /* @__PURE__ */ jsx17("div", { className: "w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]", children: message.content })
                       },
@@ -2769,12 +2773,12 @@ function SuiteAiPanel({
                         /* @__PURE__ */ jsx17(
                           "span",
                           {
-                            className: "mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand",
+                            className: "suite-msg-avatar mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand",
                             "aria-hidden": true,
                             children: /* @__PURE__ */ jsx17(Icon, { className: "h-3.5 w-3.5" })
                           }
                         ),
-                        /* @__PURE__ */ jsxs14("div", { className: "min-w-0 max-w-[85%] space-y-2", children: [
+                        /* @__PURE__ */ jsxs14("div", { className: "suite-msg-bubble min-w-0 max-w-[85%] space-y-2", children: [
                           /* @__PURE__ */ jsx17("div", { className: "rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ jsx17(
                             Suspense,
                             {
@@ -2786,13 +2790,19 @@ function SuiteAiPanel({
                                   "aria-label": "Rendering response",
                                   children: [
                                     /* @__PURE__ */ jsx17("span", { className: "sr-only", children: "Rendering response\u2026" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "h-3 w-11/12 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "h-3 w-full rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "h-3 w-3/5 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" })
+                                    /* @__PURE__ */ jsx17("div", { className: "suite-shimmer h-3 w-11/12 rounded bg-ph-mutedtext/20" }),
+                                    /* @__PURE__ */ jsx17("div", { className: "suite-shimmer h-3 w-full rounded bg-ph-mutedtext/20" }),
+                                    /* @__PURE__ */ jsx17("div", { className: "suite-shimmer h-3 w-3/5 rounded bg-ph-mutedtext/20" })
                                   ]
                                 }
                               ),
-                              children: /* @__PURE__ */ jsx17(SuiteAiMarkdownMessage, { markdown: message.content })
+                              children: /* @__PURE__ */ jsx17(
+                                SuiteAiMarkdownMessage,
+                                {
+                                  markdown: message.content,
+                                  animate: index === lastAssistantIndex
+                                }
+                              )
                             }
                           ) }),
                           ((_a = message.actions) != null ? _a : []).map((action) => /* @__PURE__ */ jsxs14(
@@ -2856,9 +2866,9 @@ function SuiteAiPanel({
                 waiting ? /* @__PURE__ */ jsxs14("div", { className: "flex items-end gap-2", "aria-hidden": true, children: [
                   /* @__PURE__ */ jsx17("span", { className: "mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ jsx17(Icon, { className: "h-3.5 w-3.5" }) }),
                   /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1.5 rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2.5", children: [
-                    /* @__PURE__ */ jsx17("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce" }),
-                    /* @__PURE__ */ jsx17("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.15s]" }),
-                    /* @__PURE__ */ jsx17("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.3s]" })
+                    /* @__PURE__ */ jsx17("span", { className: "suite-think-dot h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
+                    /* @__PURE__ */ jsx17("span", { className: "suite-think-dot suite-think-dot--2 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
+                    /* @__PURE__ */ jsx17("span", { className: "suite-think-dot suite-think-dot--3 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" })
                   ] })
                 ] }) : null,
                 waiting ? /* @__PURE__ */ jsx17("span", { className: "sr-only", "aria-live": "polite", children: "Assistant is responding\u2026" }) : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/styles/suite-skin.css

@@ -797,6 +797,164 @@ button:hover > .ph-card {
   border-top: 1px solid var(--ph-border-subtle);
 }
 
+/* ── Ask AI conversation motion ─────────────────────────────────────────
+   Replies arrive whole (the suite chat is polled, not streamed), so the
+   motion carries the "alive" signal instead: a soft one-shot entrance per
+   message, a breathing thinking indicator, and a shimmer for the skeleton.
+   Only opacity + transform animate — height/margin would fight the
+   scroller. All of it collapses under prefers-reduced-motion. */
+@keyframes suite-msg-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+    filter: blur(4px);
+  }
+  60% {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+    transform: none;
+    filter: blur(0);
+  }
+}
+@keyframes suite-msg-in-user {
+  /* The user's own turn grows out of the composer corner, per the chat
+     scroller guidance, so sending feels anchored to where they typed. */
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.96);
+    filter: blur(4px);
+  }
+  60% {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+    transform: none;
+    filter: blur(0);
+  }
+}
+.suite-msg-in {
+  /* Slight overshoot rather than a flat ease-out: the bubble reads as
+     landing rather than fading up. Origin sits at the tail corner so it
+     appears to grow from the avatar (assistant) / composer (user). */
+  animation: suite-msg-in 280ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
+  transform-origin: 0 100%;
+}
+.suite-msg-in--user {
+  animation-name: suite-msg-in-user;
+  animation-duration: 240ms;
+  transform-origin: 100% 100%;
+}
+/* Avatar lands first, bubble follows — a small layer separation. The bubble
+   only settles (no blur) because the words themselves carry the reveal. */
+@keyframes suite-msg-settle {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.suite-msg-avatar {
+  animation: suite-msg-in 260ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
+}
+.suite-msg-bubble {
+  animation: suite-msg-settle 200ms ease-out both;
+}
+
+/* ── Answer reveal ──────────────────────────────────────────────────────
+   Replies land in one payload (the suite chat is polled), so the words
+   themselves are staggered to read as if they were being written. Delay is
+   applied per word inline by the rehype plugin in ai-message-markdown.tsx
+   and capped so a long answer still finishes settling in well under a
+   second. `both` fill keeps each word hidden until its turn. */
+@keyframes suite-word-in {
+  from {
+    opacity: 0;
+    filter: blur(2px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+.suite-word-in {
+  animation: suite-word-in 240ms ease-out both;
+}
+
+@keyframes suite-think-breathe {
+  0%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.suite-think-dot {
+  animation: suite-think-breathe 1.4s ease-in-out infinite;
+}
+.suite-think-dot--2 {
+  animation-delay: 0.16s;
+}
+.suite-think-dot--3 {
+  animation-delay: 0.32s;
+}
+
+/* Sweep a translateX band rather than background-position: the latter
+   repaints every frame, the former stays on the compositor. */
+@keyframes suite-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(200%);
+  }
+}
+.suite-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.suite-shimmer::after {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 60%;
+  background-image: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in oklab, var(--ph-text-primary) 9%, transparent),
+    transparent
+  );
+  animation: suite-shimmer 1.6s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .suite-msg-in,
+  .suite-msg-in--user,
+  .suite-msg-avatar,
+  .suite-msg-bubble,
+  .suite-word-in {
+    animation: none;
+    filter: none;
+  }
+  .suite-think-dot {
+    animation: none;
+    opacity: 0.7;
+    transform: none;
+  }
+  .suite-shimmer::after {
+    animation: none;
+    opacity: 0;
+  }
+}
+
 /* ── Auth / OAuth / launch handoff ──────────────────────────────────────
    One calm opacity fade — no stacked entrance reveals on bridge pages. */
 .suite-auth-handoff {

package/src/suite/components/ai-message-markdown.test.tsx

@@ -38,4 +38,44 @@ describe("SuiteAiMarkdownMessage", () => {
     expect(container.querySelector('[contenteditable]')).toBeNull();
     expect(container.querySelector("img")).toBeNull();
   });
+
+  it("leaves words untouched unless animate is set", () => {
+    const { container } = render(
+      <SuiteThemeProvider config={themeConfig}>
+        <SuiteAiMarkdownMessage markdown={"Hello there world"} />
+      </SuiteThemeProvider>,
+    );
+
+    expect(container.querySelectorAll(".suite-word-in")).toHaveLength(0);
+    expect(container.textContent).toContain("Hello there world");
+  });
+
+  it("staggers each word when animate is set", () => {
+    const { container } = render(
+      <SuiteThemeProvider config={themeConfig}>
+        <SuiteAiMarkdownMessage markdown={"Hello there world"} animate />
+      </SuiteThemeProvider>,
+    );
+
+    const words = container.querySelectorAll<HTMLElement>(".suite-word-in");
+    expect(words).toHaveLength(3);
+    expect(words[0].textContent).toBe("Hello");
+    expect(words[0].style.animationDelay).toBe("0ms");
+    expect(words[1].style.animationDelay).toBe("18ms");
+    expect(words[2].style.animationDelay).toBe("36ms");
+    // Copy still yields the original prose.
+    expect(container.textContent).toBe("Hello there world");
+  });
+
+  it("does not stagger code spans", () => {
+    const { container } = render(
+      <SuiteThemeProvider config={themeConfig}>
+        <SuiteAiMarkdownMessage markdown={"Run `npm run dev` now"} animate />
+      </SuiteThemeProvider>,
+    );
+
+    const code = container.querySelector("code");
+    expect(code).toBeTruthy();
+    expect(code?.querySelector(".suite-word-in")).toBeNull();
+  });
 });

package/src/suite/components/ai-message-markdown.tsx

@@ -1,17 +1,91 @@
 "use client";
 
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown, { type Options } from "react-markdown";
 import remarkGfm from "remark-gfm";
 
+/** Per-word stagger step, and the ceiling so a long reply still settles fast. */
+const WORD_STEP_MS = 18;
+const MAX_DELAY_MS = 600;
+
+/** Tags whose text is left alone — animating code word by word reads badly. */
+const SKIP_TAGS = new Set(["code", "pre", "style", "script"]);
+
+interface HastNode {
+  type: string;
+  tagName?: string;
+  value?: string;
+  properties?: Record<string, unknown>;
+  children?: HastNode[];
+}
+
+/**
+ * Wrap each word of prose in a span that fades in on a stagger, so a reply
+ * that arrived in one payload reads as if it were being written.
+ *
+ * Delay lives inline on the span, so React re-rendering the same tree reuses
+ * the same elements and the animation does not replay.
+ */
+function rehypeStaggerWords() {
+  return (tree: HastNode) => {
+    let wordIndex = 0;
+
+    const visit = (node: HastNode) => {
+      if (!node.children) return;
+      if (node.tagName && SKIP_TAGS.has(node.tagName)) return;
+
+      const next: HastNode[] = [];
+      for (const child of node.children) {
+        const isText =
+          child.type === "text" &&
+          typeof child.value === "string" &&
+          /\S/.test(child.value);
+
+        if (!isText) {
+          visit(child);
+          next.push(child);
+          continue;
+        }
+
+        for (const part of child.value!.split(/(\s+)/)) {
+          if (!part) continue;
+          if (/^\s+$/.test(part)) {
+            next.push({ type: "text", value: part });
+            continue;
+          }
+          const delay = Math.min(wordIndex * WORD_STEP_MS, MAX_DELAY_MS);
+          wordIndex += 1;
+          next.push({
+            type: "element",
+            tagName: "span",
+            properties: {
+              className: ["suite-word-in"],
+              style: `animation-delay:${delay}ms`,
+            },
+            children: [{ type: "text", value: part }],
+          });
+        }
+      }
+      node.children = next;
+    };
+
+    visit(tree);
+  };
+}
+
 export default function SuiteAiMarkdownMessage({
   markdown,
+  animate = false,
 }: {
   markdown: string;
+  animate?: boolean;
 }) {
   return (
     <div className="suite-ai-markdown">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
+        rehypePlugins={
+          (animate ? [rehypeStaggerWords] : undefined) as Options["rehypePlugins"]
+        }
         components={{ img: () => null }}
       >
         {markdown}

package/src/suite/components/ai-panel.tsx

@@ -425,6 +425,13 @@ export function SuiteAiPanel({
 
   if (!open) return null;
 
+  // Only the newest reply gets the staggered word reveal; animating the whole
+  // transcript would replay whenever the panel remounts mid-conversation.
+  const lastAssistantIndex = messages.reduce(
+    (found, message, index) => (message.role === "assistant" ? index : found),
+    -1,
+  );
+
   const Icon = BrandIcon ?? Sparks;
 
   return (
@@ -505,7 +512,7 @@ export function SuiteAiPanel({
               return (
                 <div
                   key={`user-${index}`}
-                  className="flex justify-end"
+                  className="suite-msg-in suite-msg-in--user flex justify-end"
                   data-test="ask-ai-user"
                 >
                   <div className="w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]">
@@ -521,12 +528,12 @@ export function SuiteAiPanel({
                 data-test="ask-ai-assistant"
               >
                 <span
-                  className="mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand"
+                  className="suite-msg-avatar mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand"
                   aria-hidden
                 >
                   <Icon className="h-3.5 w-3.5" />
                 </span>
-                <div className="min-w-0 max-w-[85%] space-y-2">
+                <div className="suite-msg-bubble min-w-0 max-w-[85%] space-y-2">
                   <div className="rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink">
                     <Suspense
                       fallback={
@@ -536,13 +543,16 @@ export function SuiteAiPanel({
                           aria-label="Rendering response"
                         >
                           <span className="sr-only">Rendering response…</span>
-                          <div className="h-3 w-11/12 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" />
-                          <div className="h-3 w-full rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" />
-                          <div className="h-3 w-3/5 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" />
+                          <div className="suite-shimmer h-3 w-11/12 rounded bg-ph-mutedtext/20" />
+                          <div className="suite-shimmer h-3 w-full rounded bg-ph-mutedtext/20" />
+                          <div className="suite-shimmer h-3 w-3/5 rounded bg-ph-mutedtext/20" />
                         </div>
                       }
                     >
-                      <SuiteAiMarkdownMessage markdown={message.content} />
+                      <SuiteAiMarkdownMessage
+                        markdown={message.content}
+                        animate={index === lastAssistantIndex}
+                      />
                     </Suspense>
                   </div>
                   {(message.actions ?? []).map((action) => (
@@ -612,9 +622,9 @@ export function SuiteAiPanel({
                 <Icon className="h-3.5 w-3.5" />
               </span>
               <div className="flex items-center gap-1.5 rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2.5">
-                <span className="h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce" />
-                <span className="h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.15s]" />
-                <span className="h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.3s]" />
+                <span className="suite-think-dot h-1.5 w-1.5 rounded-full bg-ph-mutedtext" />
+                <span className="suite-think-dot suite-think-dot--2 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" />
+                <span className="suite-think-dot suite-think-dot--3 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" />
               </div>
             </div>
           ) : null}

package/dist/ai-message-markdown-TSPYON2F.mjs

@@ -1,22 +0,0 @@
-"use client";
-import "./chunk-FWCSY2DS.mjs";
-
-// src/suite/components/ai-message-markdown.tsx
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { jsx } from "react/jsx-runtime";
-function SuiteAiMarkdownMessage({
-  markdown
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "suite-ai-markdown", children: /* @__PURE__ */ jsx(
-    ReactMarkdown,
-    {
-      remarkPlugins: [remarkGfm],
-      components: { img: () => null },
-      children: markdown
-    }
-  ) });
-}
-export {
-  SuiteAiMarkdownMessage as default
-};