@springbrand/message-panel 0.1.3-alpha.21 → 0.1.3-alpha.23

package/cloud-os/chat/cloud-os-chat-messages.tsx

@@ -444,7 +444,11 @@ export function CloudOsChatMessages({
                             running={block.running}
                           />
                         );
-                      case "text":
+                      case "text": {
+                        const streaming =
+                          isActive &&
+                          entryIndex === entries.length - 1 &&
+                          block === entry.blocks.at(-1);
                         return (
                           <div
                             key={block.key}
@@ -453,9 +457,11 @@ export function CloudOsChatMessages({
                             <MarkdownMessage
                               message={block.text}
                               resolveUrl={resolveUrl}
+                              streaming={streaming}
                             />
                           </div>
                         );
+                      }
                       case "toolGroup":
                         return (
                           <ToolGroupRow

package/cloud-os/chat/markdown-message.tsx

@@ -14,6 +14,7 @@ import {
 export type CloudOsUrlResolver = (url: string) => string | null | undefined;
 
 const ALLOWED_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+const CJK_TEXT = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
 
 export function safeExternalUrl(href: string | undefined): string | undefined {
   if (!href) return undefined;
@@ -94,9 +95,11 @@ const DEFAULT_COMPONENTS: Components = {
 export const MarkdownMessage = memo(function MarkdownMessage({
   message,
   resolveUrl,
+  streaming = false,
 }: {
   message: string;
   resolveUrl?: CloudOsUrlResolver;
+  streaming?: boolean;
 }): ReactNode {
   const rehypePlugins = useMemo(
     () =>
@@ -107,9 +110,17 @@ export const MarkdownMessage = memo(function MarkdownMessage({
   );
   return (
     <Streamdown
+      animated={
+        streaming
+          ? CJK_TEXT.test(message)
+            ? { sep: "char", duration: 100, stagger: 5 }
+            : true
+          : false
+      }
       className="space-y-0"
       controls={false}
-      mode="static"
+      mode={streaming ? "streaming" : "static"}
+      isAnimating={streaming}
       rehypePlugins={rehypePlugins}
       skipHtml
       components={DEFAULT_COMPONENTS}

package/cloud-os/styles/cloud-os.css

@@ -579,6 +579,10 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  [data-sd-animate] {
+    animation: none !important;
+  }
+
   .cos-thinking-shimmer {
     animation: none;
     background: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.21",
+  "version": "0.1.3-alpha.23",
   "type": "module",
   "files": [
     "src",