@paymanai/payman-ask-sdk 2.0.1 → 2.0.3

package/dist/index.mjs

@@ -458,7 +458,6 @@ function MarkdownImageV2({
     setIsLoaded(false);
     setHasError(false);
     setRetryCount(0);
-    setIsVisible(false);
   }, [src]);
   useEffect(() => {
     const el = sentinelRef.current;
@@ -482,7 +481,13 @@ function MarkdownImageV2({
       {
         className: cn("payman-v2-md-image", "payman-v2-md-image-resolving"),
         children: /* @__PURE__ */ jsxs("span", { className: "payman-v2-md-image-resolving-inner", children: [
-          /* @__PURE__ */ jsx(Loader2, { className: "payman-v2-md-image-loading", "aria-hidden": true }),
+          /* @__PURE__ */ jsx(
+            Loader2,
+            {
+              style: { animation: "payman-v2-spin 0.7s linear infinite" },
+              "aria-hidden": true
+            }
+          ),
           /* @__PURE__ */ jsx("span", { children: "Loading image" }),
           /* @__PURE__ */ jsx("span", { children: "Reference image" })
         ] })
@@ -521,14 +526,14 @@ function MarkdownImageV2({
       "aria-busy": !isLoaded,
       style: {
         ...frameStyle,
-        ...!isLoaded ? { minHeight: "10rem" } : {}
+        minHeight: isLoaded ? 0 : "10rem"
       },
       children: [
-        !isLoaded && /* @__PURE__ */ jsxs("span", { className: "payman-v2-md-image-placeholder", children: [
+        !isLoaded && /* @__PURE__ */ jsxs("span", { className: "payman-v2-md-image-loading", children: [
           /* @__PURE__ */ jsx(
             Loader2,
             {
-              className: "payman-v2-md-image-loading",
+              style: { animation: "payman-v2-spin 0.7s linear infinite" },
               "aria-hidden": true
             }
           ),
@@ -872,26 +877,29 @@ function parseThinkingContent(content) {
   }
   return out;
 }
+function formatDuration(seconds) {
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return s > 0 ? `${m}m ${s}s` : `${m}m`;
+}
 function AnimatedSeconds({
   value,
   className,
   ariaLabel
 }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn("payman-v2-thinking-seconds", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsx("span", { className: "payman-v2-thinking-seconds-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
-      motion.span,
-      {
-        className: "payman-v2-thinking-seconds-value",
-        initial: { opacity: 0, y: 6, filter: "blur(2px)" },
-        animate: { opacity: 1, y: 0, filter: "blur(0px)" },
-        exit: { opacity: 0, y: -6, filter: "blur(2px)" },
-        transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },
-        children: value
-      },
-      value
-    ) }) }),
-    /* @__PURE__ */ jsx("span", { className: "payman-v2-thinking-seconds-suffix", "aria-hidden": "true", children: "s" })
-  ] });
+  return /* @__PURE__ */ jsx("span", { className: cn("payman-v2-thinking-seconds", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("span", { className: "payman-v2-thinking-seconds-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "payman-v2-thinking-seconds-value",
+      initial: { opacity: 0, y: 6, filter: "blur(2px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: { opacity: 0, y: -6, filter: "blur(2px)" },
+      transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },
+      children: formatDuration(value)
+    },
+    value
+  ) }) }) });
 }
 function ThinkingBlockV2({
   content,
@@ -902,8 +910,14 @@ function ThinkingBlockV2({
   const [open, setOpen] = useState(true);
   const [cursorIdx, setCursorIdx] = useState(0);
   const [elapsedSec, setElapsedSec] = useState(
-    () => startedAt ? Math.max(0, Math.floor((Date.now() - startedAt) / 1e3)) : 0
+    () => (
+      // Only seed from startedAt when actively streaming — otherwise (e.g.
+      // after a hot-reload on a completed message) Date.now()-startedAt would
+      // be the time since completion, not the actual thinking duration.
+      isStreaming && startedAt ? Math.max(0, Math.floor((Date.now() - startedAt) / 1e3)) : 0
+    )
   );
+  const elapsedSecRef = useRef(elapsedSec);
   const frozenSecRef = useRef(null);
   const prevStreaming = useRef(isStreaming);
   const parsed = useMemo(() => parseThinkingContent(content), [content]);
@@ -916,25 +930,25 @@ function ThinkingBlockV2({
   useEffect(() => {
     if (prevStreaming.current && !isStreaming) {
       setOpen(false);
-      if (startedAt) {
-        frozenSecRef.current = Math.max(
-          0,
-          Math.floor((Date.now() - startedAt) / 1e3)
-        );
-      }
+      frozenSecRef.current = elapsedSecRef.current;
     }
     prevStreaming.current = isStreaming;
   }, [isStreaming, startedAt]);
   useEffect(() => {
     if (!isStreaming || !startedAt) return;
+    let active = true;
     const tick = () => {
-      setElapsedSec(
-        Math.max(0, Math.floor((Date.now() - startedAt) / 1e3))
-      );
+      if (!active) return;
+      const val = Math.max(0, Math.floor((Date.now() - startedAt) / 1e3));
+      elapsedSecRef.current = val;
+      setElapsedSec(val);
     };
     tick();
     const id = window.setInterval(tick, 1e3);
-    return () => window.clearInterval(id);
+    return () => {
+      active = false;
+      window.clearInterval(id);
+    };
   }, [isStreaming, startedAt]);
   useEffect(() => {
     if (!isStreaming || isFinalizingPhase) return;
@@ -945,10 +959,11 @@ function ThinkingBlockV2({
   }, [isStreaming, isFinalizingPhase]);
   const justStoppedSec = !isStreaming && prevStreaming.current && startedAt ? Math.max(0, Math.floor((Date.now() - startedAt) / 1e3)) : void 0;
   const finalSec = getMaxDuration(
-    durationSec,
     frozenSecRef.current,
     justStoppedSec,
-    !isStreaming ? elapsedSec : void 0
+    // Only fall back to durationSec when the timer never ran this session
+    // (i.e. the message was already complete when this component mounted).
+    frozenSecRef.current == null && !prevStreaming.current ? durationSec : void 0
   );
   const headerLabel = isStreaming ? /* @__PURE__ */ jsxs("span", { className: "payman-v2-thinking-header-label", children: [
     /* @__PURE__ */ jsx("span", { className: "payman-v2-thinking-shimmer", children: "Working on it\u2026" }),
@@ -956,11 +971,11 @@ function ThinkingBlockV2({
       AnimatedSeconds,
       {
         className: "payman-v2-thinking-timer",
-        ariaLabel: `Elapsed ${elapsedSec} seconds`,
+        ariaLabel: `Elapsed ${formatDuration(elapsedSec)}`,
         value: elapsedSec
       }
     )
-  ] }) : finalSec !== null && finalSec !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "payman-v2-thinking-header-label", children: [
+  ] }) : finalSec != null && finalSec > 0 ? /* @__PURE__ */ jsxs("span", { className: "payman-v2-thinking-header-label", children: [
     /* @__PURE__ */ jsx("span", { children: "Thought for" }),
     /* @__PURE__ */ jsx(
       AnimatedSeconds,
@@ -969,7 +984,7 @@ function ThinkingBlockV2({
           "payman-v2-thinking-timer",
           "payman-v2-thinking-duration"
         ),
-        ariaLabel: `Thought for ${finalSec} seconds`,
+        ariaLabel: `Thought for ${formatDuration(finalSec)}`,
         value: finalSec
       }
     )
@@ -1091,6 +1106,7 @@ function charDelay(char, speed) {
     return speed.punctuation[0] + Math.random() * speed.punctuation[1];
   return speed.normal[0] + Math.random() * speed.normal[1];
 }
+var MARKDOWN_IMAGE_REGEX = /^!\[[^\]]*\]\([^)]*\)/;
 var typingProgressCache = /* @__PURE__ */ new Map();
 function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDisplayedText, cacheKey) {
   const cached = cacheKey ? typingProgressCache.get(cacheKey) : void 0;
@@ -1128,6 +1144,11 @@ function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDis
       }
       return;
     }
+    if (displayedRef.current && !targetRef.current.startsWith(displayedRef.current)) {
+      displayedRef.current = "";
+      setDisplayedText("");
+      if (cacheKeyRef.current) typingProgressCache.delete(cacheKeyRef.current);
+    }
     if (displayedRef.current.length === 0 && initialDisplayedRef.current && targetRef.current.startsWith(initialDisplayedRef.current)) {
       writeDisplayed(initialDisplayedRef.current);
     }
@@ -1138,8 +1159,41 @@ function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDis
         runningRef.current = false;
         return;
       }
+      if (displayedRef.current && !targetRef.current.startsWith(displayedRef.current)) {
+        let divergeAt = 0;
+        const minLen = Math.min(displayedRef.current.length, targetRef.current.length);
+        while (divergeAt < minLen && displayedRef.current[divergeAt] === targetRef.current[divergeAt]) {
+          divergeAt++;
+        }
+        const imgStart = targetRef.current.slice(0, divergeAt).lastIndexOf("![");
+        if (imgStart >= 0) {
+          const newImgMatch = MARKDOWN_IMAGE_REGEX.exec(targetRef.current.slice(imgStart));
+          const oldImgMatch = MARKDOWN_IMAGE_REGEX.exec(displayedRef.current.slice(imgStart));
+          if (newImgMatch && oldImgMatch) {
+            const oldImgEnd = imgStart + oldImgMatch[0].length;
+            const newImgEnd = imgStart + newImgMatch[0].length;
+            const newCursor = Math.min(
+              Math.max(displayedRef.current.length + (newImgEnd - oldImgEnd), newImgEnd),
+              targetRef.current.length
+            );
+            writeDisplayed(targetRef.current.slice(0, newCursor));
+            timerRef.current = setTimeout(tick, 0);
+            return;
+          }
+        }
+        writeDisplayed(targetRef.current.slice(0, imgStart >= 0 ? imgStart : divergeAt));
+        timerRef.current = setTimeout(tick, 0);
+        return;
+      }
       if (displayedRef.current.length < targetRef.current.length) {
-        const nextChar = targetRef.current[displayedRef.current.length];
+        const remaining = targetRef.current.slice(displayedRef.current.length);
+        const imgMatch = MARKDOWN_IMAGE_REGEX.exec(remaining);
+        if (imgMatch) {
+          writeDisplayed(displayedRef.current + imgMatch[0]);
+          timerRef.current = setTimeout(tick, 0);
+          return;
+        }
+        const nextChar = remaining[0];
         writeDisplayed(displayedRef.current + nextChar);
         const delay = charDelay(nextChar, speed);
         timerRef.current = setTimeout(tick, delay);
@@ -1379,7 +1433,7 @@ function AssistantMessageV2({
         {
           content: thinkingContent,
           isStreaming: isThinkingStreaming,
-          durationSec: thinkingDuration,
+          durationSec: message.thinkingDurationSec ?? thinkingDuration,
           startedAt: requestStartedAt
         }
       ),
@@ -3030,17 +3084,7 @@ function SessionList({
     [sessions, formattedNow]
   );
   if (!isReady) {
-    return /* @__PURE__ */ jsxs("div", { className: "payman-sidebar-notice", children: [
-      "Pass ",
-      /* @__PURE__ */ jsx(InlineCode, { children: "workflow.id" }),
-      " (or",
-      " ",
-      /* @__PURE__ */ jsx(InlineCode, { children: "workflow.name" }),
-      ") and",
-      " ",
-      /* @__PURE__ */ jsx(InlineCode, { children: "session.owner.id" }),
-      " in your chat config to view recent sessions."
-    ] });
+    return /* @__PURE__ */ jsx("div", { className: "payman-sidebar-notice-shell", children: /* @__PURE__ */ jsx("div", { className: "payman-sidebar-notice", children: "Configure the chat settings." }) });
   }
   return /* @__PURE__ */ jsxs(
     "div",
@@ -3207,9 +3251,6 @@ function Spinner({ size = 12 }) {
     }
   );
 }
-function InlineCode({ children }) {
-  return /* @__PURE__ */ jsx("code", { className: "payman-sidebar-inline-code", children });
-}
 function groupSessionsByDate(sessions, now) {
   const groups = /* @__PURE__ */ new Map();
   const orderedGroups = [];
@@ -3871,7 +3912,8 @@ var PaymanChat = forwardRef(function PaymanChat2({
                     alignItems: "center",
                     justifyContent: "center",
                     width: "100%",
-                    minHeight: 0
+                    minHeight: 0,
+                    marginTop: "1.5rem"
                   },
                   children: /* @__PURE__ */ jsx(
                     EmptyState2,