@axis-ds/agentic-ui 1.5.0 → 1.5.1

package/README.md

@@ -94,7 +94,7 @@ AgentAvatar, ApprovalCard, AttachmentCard, CodeBlock, ContextPanel, DiffViewer,
 
 ## 문서
 
-자세한 사용법은 [AXIS Design System 문서](https://axis.minu.best)를 참고하세요.
+자세한 사용법은 [AXIS Design System 문서](https://axis-design-system.pages.dev)를 참고하세요.
 
 ## 라이선스
 

package/dist/streaming-text/index.js

@@ -45,36 +45,38 @@ function StreamingText({
   "aria-label": ariaLabel,
   className
 }) {
-  const [displayedText, setDisplayedText] = React.useState("");
-  const [isStreaming, setIsStreaming] = React.useState(false);
-  const prevTextRef = React.useRef("");
+  const chars = React.useMemo(() => Array.from(text), [text]);
+  const [visibleLength, setVisibleLength] = React.useState(0);
+  const [prevText, setPrevText] = React.useState(text);
+  if (text !== prevText) {
+    setPrevText(text);
+    if (!text.startsWith(prevText)) setVisibleLength(0);
+  }
+  const targetLength = chars.length;
+  const isStreaming = !isComplete && visibleLength < targetLength;
+  const onCompleteRef = React.useRef(onComplete);
+  React.useEffect(() => {
+    onCompleteRef.current = onComplete;
+  });
+  React.useEffect(() => {
+    if (!isStreaming) return;
+    const interval = setInterval(() => {
+      setVisibleLength((n) => Math.min(n + 1, targetLength));
+    }, speed);
+    return () => clearInterval(interval);
+  }, [isStreaming, targetLength, speed]);
+  const wasStreamingRef = React.useRef(false);
   React.useEffect(() => {
-    if (isComplete) {
-      setDisplayedText(text);
-      setIsStreaming(false);
+    if (isStreaming) {
+      wasStreamingRef.current = true;
       return;
     }
-    if (text.length > prevTextRef.current.length && text.startsWith(prevTextRef.current)) {
-      const newText = text.slice(prevTextRef.current.length);
-      let charIndex = 0;
-      setIsStreaming(true);
-      const interval = setInterval(() => {
-        if (charIndex < newText.length) {
-          setDisplayedText((prev) => prev + newText[charIndex]);
-          charIndex++;
-        } else {
-          clearInterval(interval);
-          setIsStreaming(false);
-          if (onComplete) onComplete();
-        }
-      }, speed);
-      prevTextRef.current = text;
-      return () => clearInterval(interval);
-    } else if (text !== prevTextRef.current) {
-      setDisplayedText("");
-      prevTextRef.current = "";
+    if (wasStreamingRef.current) {
+      wasStreamingRef.current = false;
+      if (!isComplete) onCompleteRef.current?.();
     }
-  }, [text, speed, isComplete, onComplete]);
+  }, [isStreaming, isComplete]);
+  const displayedText = isComplete ? text : chars.slice(0, visibleLength).join("");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {

package/dist/streaming-text/index.mjs

@@ -12,36 +12,38 @@ function StreamingText({
   "aria-label": ariaLabel,
   className
 }) {
-  const [displayedText, setDisplayedText] = React.useState("");
-  const [isStreaming, setIsStreaming] = React.useState(false);
-  const prevTextRef = React.useRef("");
+  const chars = React.useMemo(() => Array.from(text), [text]);
+  const [visibleLength, setVisibleLength] = React.useState(0);
+  const [prevText, setPrevText] = React.useState(text);
+  if (text !== prevText) {
+    setPrevText(text);
+    if (!text.startsWith(prevText)) setVisibleLength(0);
+  }
+  const targetLength = chars.length;
+  const isStreaming = !isComplete && visibleLength < targetLength;
+  const onCompleteRef = React.useRef(onComplete);
   React.useEffect(() => {
-    if (isComplete) {
-      setDisplayedText(text);
-      setIsStreaming(false);
+    onCompleteRef.current = onComplete;
+  });
+  React.useEffect(() => {
+    if (!isStreaming) return;
+    const interval = setInterval(() => {
+      setVisibleLength((n) => Math.min(n + 1, targetLength));
+    }, speed);
+    return () => clearInterval(interval);
+  }, [isStreaming, targetLength, speed]);
+  const wasStreamingRef = React.useRef(false);
+  React.useEffect(() => {
+    if (isStreaming) {
+      wasStreamingRef.current = true;
       return;
     }
-    if (text.length > prevTextRef.current.length && text.startsWith(prevTextRef.current)) {
-      const newText = text.slice(prevTextRef.current.length);
-      let charIndex = 0;
-      setIsStreaming(true);
-      const interval = setInterval(() => {
-        if (charIndex < newText.length) {
-          setDisplayedText((prev) => prev + newText[charIndex]);
-          charIndex++;
-        } else {
-          clearInterval(interval);
-          setIsStreaming(false);
-          if (onComplete) onComplete();
-        }
-      }, speed);
-      prevTextRef.current = text;
-      return () => clearInterval(interval);
-    } else if (text !== prevTextRef.current) {
-      setDisplayedText("");
-      prevTextRef.current = "";
+    if (wasStreamingRef.current) {
+      wasStreamingRef.current = false;
+      if (!isComplete) onCompleteRef.current?.();
     }
-  }, [text, speed, isComplete, onComplete]);
+  }, [isStreaming, isComplete]);
+  const displayedText = isComplete ? text : chars.slice(0, visibleLength).join("");
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axis-ds/agentic-ui",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "AXIS Design System - Agentic UI Components for AI/LLM Applications",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -103,6 +103,64 @@
     },
     "./tailwind.css": "./tailwind.css"
   },
+  "typesVersions": {
+    "*": {
+      "run-progress": [
+        "./dist/run-progress/index.d.ts"
+      ],
+      "approval-card": [
+        "./dist/approval-card/index.d.ts"
+      ],
+      "streaming-text": [
+        "./dist/streaming-text/index.d.ts"
+      ],
+      "tool-call-card": [
+        "./dist/tool-call-card/index.d.ts"
+      ],
+      "message-bubble": [
+        "./dist/message-bubble/index.d.ts"
+      ],
+      "feedback-buttons": [
+        "./dist/feedback-buttons/index.d.ts"
+      ],
+      "code-block": [
+        "./dist/code-block/index.d.ts"
+      ],
+      "diff-viewer": [
+        "./dist/diff-viewer/index.d.ts"
+      ],
+      "plan-card": [
+        "./dist/plan-card/index.d.ts"
+      ],
+      "context-panel": [
+        "./dist/context-panel/index.d.ts"
+      ],
+      "token-usage-indicator": [
+        "./dist/token-usage-indicator/index.d.ts"
+      ],
+      "attachment-card": [
+        "./dist/attachment-card/index.d.ts"
+      ],
+      "agent-avatar": [
+        "./dist/agent-avatar/index.d.ts"
+      ],
+      "recovery-banner": [
+        "./dist/recovery-banner/index.d.ts"
+      ],
+      "source-panel": [
+        "./dist/source-panel/index.d.ts"
+      ],
+      "step-timeline": [
+        "./dist/step-timeline/index.d.ts"
+      ],
+      "surface-renderer": [
+        "./dist/surface-renderer/index.d.ts"
+      ],
+      "thinking-indicator": [
+        "./dist/thinking-indicator/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist",
@@ -120,8 +178,8 @@
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.0",
     "tailwind-merge": "^2.5.0",
-    "@axis-ds/tokens": "1.5.0",
-    "@axis-ds/ui-react": "1.5.0"
+    "@axis-ds/tokens": "1.5.1",
+    "@axis-ds/ui-react": "1.5.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -153,7 +211,7 @@
     "url": "https://github.com/IDEA-on-Action/AXIS-Design-System.git",
     "directory": "packages/axis-agentic-ui"
   },
-  "homepage": "https://axis.minu.best",
+  "homepage": "https://axis-design-system.pages.dev",
   "scripts": {
     "build": "tsup && node scripts/postbuild.mjs",
     "dev": "tsup --watch --onSuccess \"node scripts/postbuild.mjs\"",