@paymanai/payman-ask-sdk 2.0.1 → 2.0.3

package/dist/index.js

@@ -483,7 +483,6 @@ function MarkdownImageV2({
     setIsLoaded(false);
     setHasError(false);
     setRetryCount(0);
-    setIsVisible(false);
   }, [src]);
   react.useEffect(() => {
     const el = sentinelRef.current;
@@ -507,7 +506,13 @@ function MarkdownImageV2({
       {
         className: cn("payman-v2-md-image", "payman-v2-md-image-resolving"),
         children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-md-image-resolving-inner", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payman-v2-md-image-loading", "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              style: { animation: "payman-v2-spin 0.7s linear infinite" },
+              "aria-hidden": true
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading image" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Reference image" })
         ] })
@@ -546,14 +551,14 @@ function MarkdownImageV2({
       "aria-busy": !isLoaded,
       style: {
         ...frameStyle,
-        ...!isLoaded ? { minHeight: "10rem" } : {}
+        minHeight: isLoaded ? 0 : "10rem"
       },
       children: [
-        !isLoaded && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-md-image-placeholder", children: [
+        !isLoaded && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-md-image-loading", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.Loader2,
             {
-              className: "payman-v2-md-image-loading",
+              style: { animation: "payman-v2-spin 0.7s linear infinite" },
               "aria-hidden": true
             }
           ),
@@ -897,26 +902,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__ */ jsxRuntime.jsxs("span", { className: cn("payman-v2-thinking-seconds", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-thinking-seconds-track", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.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__ */ jsxRuntime.jsx("span", { className: "payman-v2-thinking-seconds-suffix", "aria-hidden": "true", children: "s" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("payman-v2-thinking-seconds", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-thinking-seconds-track", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.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,
@@ -927,8 +935,14 @@ function ThinkingBlockV2({
   const [open, setOpen] = react.useState(true);
   const [cursorIdx, setCursorIdx] = react.useState(0);
   const [elapsedSec, setElapsedSec] = react.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 = react.useRef(elapsedSec);
   const frozenSecRef = react.useRef(null);
   const prevStreaming = react.useRef(isStreaming);
   const parsed = react.useMemo(() => parseThinkingContent(content), [content]);
@@ -941,25 +955,25 @@ function ThinkingBlockV2({
   react.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]);
   react.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]);
   react.useEffect(() => {
     if (!isStreaming || isFinalizingPhase) return;
@@ -970,10 +984,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__ */ jsxRuntime.jsxs("span", { className: "payman-v2-thinking-header-label", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-thinking-shimmer", children: "Working on it\u2026" }),
@@ -981,11 +996,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__ */ jsxRuntime.jsxs("span", { className: "payman-v2-thinking-header-label", children: [
+  ] }) : finalSec != null && finalSec > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-thinking-header-label", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Thought for" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       AnimatedSeconds,
@@ -994,7 +1009,7 @@ function ThinkingBlockV2({
           "payman-v2-thinking-timer",
           "payman-v2-thinking-duration"
         ),
-        ariaLabel: `Thought for ${finalSec} seconds`,
+        ariaLabel: `Thought for ${formatDuration(finalSec)}`,
         value: finalSec
       }
     )
@@ -1116,6 +1131,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;
@@ -1153,6 +1169,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);
     }
@@ -1163,8 +1184,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);
@@ -1404,7 +1458,7 @@ function AssistantMessageV2({
         {
           content: thinkingContent,
           isStreaming: isThinkingStreaming,
-          durationSec: thinkingDuration,
+          durationSec: message.thinkingDurationSec ?? thinkingDuration,
           startedAt: requestStartedAt
         }
       ),
@@ -3055,17 +3109,7 @@ function SessionList({
     [sessions, formattedNow]
   );
   if (!isReady) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-sidebar-notice", children: [
-      "Pass ",
-      /* @__PURE__ */ jsxRuntime.jsx(InlineCode, { children: "workflow.id" }),
-      " (or",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx(InlineCode, { children: "workflow.name" }),
-      ") and",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx(InlineCode, { children: "session.owner.id" }),
-      " in your chat config to view recent sessions."
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-notice-shell", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-notice", children: "Configure the chat settings." }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -3232,9 +3276,6 @@ function Spinner({ size = 12 }) {
     }
   );
 }
-function InlineCode({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("code", { className: "payman-sidebar-inline-code", children });
-}
 function groupSessionsByDate(sessions, now) {
   const groups = /* @__PURE__ */ new Map();
   const orderedGroups = [];
@@ -3896,7 +3937,8 @@ var PaymanChat = react.forwardRef(function PaymanChat2({
                     alignItems: "center",
                     justifyContent: "center",
                     width: "100%",
-                    minHeight: 0
+                    minHeight: 0,
+                    marginTop: "1.5rem"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     EmptyState2,