@paymanai/payman-ask-sdk 4.0.8 → 4.0.10

package/dist/index.js

@@ -1521,6 +1521,7 @@ var RAG_IMAGE_PATH_REGEX2 = /^(?:https?:\/\/[^/\s]+)?\/api\/rag\/chunks\/[^"'\s]
 function isUnresolvedRagImageSource2(src) {
   return RAG_IMAGE_PATH_REGEX2.test(src);
 }
+var loadedImageCache = /* @__PURE__ */ new Set();
 var frameStyle = {
   width: "min(100%, 32rem)",
   maxWidth: "100%"
@@ -1539,24 +1540,36 @@ function MarkdownImageV2({
   isResolving = false,
   onImageClick
 }) {
-  const [isVisible, setIsVisible] = react.useState(false);
-  const [isLoaded, setIsLoaded] = react.useState(false);
+  const cachedAlready = src ? loadedImageCache.has(src) : false;
+  const [isVisible, setIsVisible] = react.useState(cachedAlready);
+  const [isLoaded, setIsLoaded] = react.useState(cachedAlready);
   const [hasError, setHasError] = react.useState(false);
   const [retryCount, setRetryCount] = react.useState(0);
   const sentinelRef = react.useRef(null);
+  const prevLoadedRef = react.useRef(cachedAlready);
   const isUnresolvedRag = react.useMemo(
     () => src ? isUnresolvedRagImageSource2(src) : false,
     [src]
   );
   const isResolvingRag = Boolean(isResolving && isUnresolvedRag);
   react.useEffect(() => {
-    setIsLoaded(false);
+    if (src && loadedImageCache.has(src)) {
+      setIsLoaded(true);
+      setIsVisible(true);
+      prevLoadedRef.current = true;
+    }
     setHasError(false);
     setRetryCount(0);
   }, [src]);
   react.useEffect(() => {
     const el = sentinelRef.current;
     if (!el || !src) return;
+    const rect = el.getBoundingClientRect();
+    const alreadyNear = rect.bottom >= -200 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) + 200;
+    if (alreadyNear) {
+      setIsVisible(true);
+      return;
+    }
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -1570,7 +1583,7 @@ function MarkdownImageV2({
     return () => observer.disconnect();
   }, [src]);
   if (!src) return null;
-  if (isResolvingRag) {
+  if (isResolvingRag && !isLoaded) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -1645,10 +1658,13 @@ function MarkdownImageV2({
               opacity: isLoaded ? 1 : 0
             },
             onLoad: () => {
+              if (src) loadedImageCache.add(src);
+              prevLoadedRef.current = true;
               setHasError(false);
               setIsLoaded(true);
             },
             onError: () => {
+              prevLoadedRef.current = false;
               setIsLoaded(false);
               setHasError(true);
             }
@@ -1666,7 +1682,7 @@ function MarkdownImageV2({
     }
   ) });
 }
-function buildComponents(onImageClick, isResolvingImages) {
+function buildComponents(onImageClick, isResolvingRef) {
   return {
     p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { children }),
     code: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("code", { children }),
@@ -1687,7 +1703,7 @@ function buildComponents(onImageClick, isResolvingImages) {
       {
         src: typeof src === "string" ? src : void 0,
         alt: typeof alt === "string" ? alt : void 0,
-        isResolving: isResolvingImages,
+        isResolving: isResolvingRef?.current,
         onImageClick
       }
     ),
@@ -1704,9 +1720,11 @@ function MarkdownRendererV2({
   isResolvingImages,
   onImageClick
 }) {
+  const isResolvingRef = react.useRef(isResolvingImages);
+  isResolvingRef.current = isResolvingImages;
   const components = react.useMemo(
-    () => buildComponents(onImageClick, isResolvingImages),
-    [onImageClick, isResolvingImages]
+    () => buildComponents(onImageClick, isResolvingRef),
+    [onImageClick]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1978,6 +1996,7 @@ var RESPONSE_SPEED = {
   newline: [4, 6],
   idle: 15
 };
+var MARKDOWN_IMAGE_REGEX = /^!\[[^\]]*\]\([^)]*\)/;
 function charDelay(char, speed, multiplier) {
   const raw = (() => {
     if (char === "*") return speed.fast;
@@ -2017,6 +2036,10 @@ function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDis
       displayedRef.current = initialDisplayedRef.current;
       setDisplayedText(initialDisplayedRef.current);
     }
+    if (displayedRef.current && !targetRef.current.startsWith(displayedRef.current)) {
+      displayedRef.current = targetRef.current;
+      setDisplayedText(targetRef.current);
+    }
     if (runningRef.current) return;
     runningRef.current = true;
     const tick = () => {
@@ -2024,8 +2047,22 @@ function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDis
         runningRef.current = false;
         return;
       }
+      if (displayedRef.current && !targetRef.current.startsWith(displayedRef.current)) {
+        displayedRef.current = targetRef.current;
+        setDisplayedText(targetRef.current);
+        timerRef.current = setTimeout(tick, speed.idle / multiplier);
+        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) {
+          displayedRef.current += imgMatch[0];
+          setDisplayedText(displayedRef.current);
+          timerRef.current = setTimeout(tick, 0);
+          return;
+        }
+        const nextChar = remaining[0];
         displayedRef.current += nextChar;
         setDisplayedText(displayedRef.current);
         const delay = charDelay(nextChar, speed, multiplier);
@@ -2049,6 +2086,23 @@ function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDis
     isTyping
   };
 }
+function stripIncompleteImageToken(text) {
+  const lastBang = text.lastIndexOf("![");
+  if (lastBang === -1) return text;
+  const after = text.slice(lastBang);
+  if (/^!\[[^\]]*\]\([^)]*\)/.test(after)) return text;
+  return text.slice(0, lastBang);
+}
+function getFeedbackState(message) {
+  const feedback = message.feedback;
+  if (feedback === "up" || feedback === "down") return feedback;
+  if (feedback && typeof feedback === "object") {
+    const value = feedback.feedback;
+    if (!value) return null;
+    return value === "POSITIVE" ? "up" : "down";
+  }
+  return null;
+}
 function AssistantMessageV2({
   message,
   onImageClick,
@@ -2058,21 +2112,11 @@ function AssistantMessageV2({
   typingSpeed = 4
 }) {
   const [copied, setCopied] = react.useState(false);
-  const [activeFeedback, setActiveFeedback] = react.useState(null);
+  const [activeFeedback, setActiveFeedback] = react.useState(
+    () => getFeedbackState(message)
+  );
   const [reasonModalOpen, setReasonModalOpen] = react.useState(false);
   const canSubmitFeedback = !!onSubmitFeedback && !!message.executionId;
-  const handlePositiveFeedback = () => {
-    if (!canSubmitFeedback || activeFeedback === "up") return;
-    const previous = activeFeedback;
-    setActiveFeedback("up");
-    Promise.resolve(
-      onSubmitFeedback?.({
-        messageId: message.id,
-        executionId: message.executionId,
-        feedback: "POSITIVE"
-      })
-    ).catch(() => setActiveFeedback(previous));
-  };
   const [toast, setToast] = react.useState(null);
   const copyResetTimerRef = react.useRef(null);
   const toastTimerRef = react.useRef(null);
@@ -2080,8 +2124,12 @@ function AssistantMessageV2({
   const showTraceAction = (actions?.trace ?? true) && !!onExecutionTraceClick;
   const showThumbsUp = actions?.thumbsUp ?? true;
   const showThumbsDown = actions?.thumbsDown ?? true;
+  const hydratedFeedback = message.feedback;
   const hasEverStreamed = react.useRef(!!message.isStreaming);
   if (message.isStreaming) hasEverStreamed.current = true;
+  react.useEffect(() => {
+    setActiveFeedback(getFeedbackState(message));
+  }, [hydratedFeedback, message.id]);
   react.useEffect(() => {
     return () => {
       if (copyResetTimerRef.current) clearTimeout(copyResetTimerRef.current);
@@ -2091,7 +2139,8 @@ function AssistantMessageV2({
   const rawResponseContent = (() => {
     const raw = message.isStreaming ? message.streamingContent || message.content : message.content;
     if (!raw) return "";
-    return raw.replace(/\\n/g, "\n");
+    const normalized = raw.replace(/\\n/g, "\n");
+    return message.isStreaming ? stripIncompleteImageToken(normalized) : normalized;
   })();
   const isThinkingStreaming = !!message.isStreaming && !rawResponseContent && !message.isError;
   const responseTypingEnabled = hasEverStreamed.current && Boolean(rawResponseContent) && !message.isError;
@@ -2147,6 +2196,21 @@ function AssistantMessageV2({
     setToast({ label, tone });
     toastTimerRef.current = setTimeout(() => setToast(null), 1800);
   };
+  const handlePositiveFeedback = () => {
+    if (!canSubmitFeedback || activeFeedback === "up") return;
+    const previous = activeFeedback;
+    setActiveFeedback("up");
+    Promise.resolve(
+      onSubmitFeedback?.({
+        messageId: message.id,
+        executionId: message.executionId,
+        feedback: "POSITIVE"
+      })
+    ).then(() => showToast("Thank you for your feedback", "success")).catch(() => {
+      setActiveFeedback(previous);
+      showToast("Could not send feedback", "error");
+    });
+  };
   const handleCopy = async () => {
     try {
       if (!navigator.clipboard?.writeText) {
@@ -2293,7 +2357,13 @@ function AssistantMessageV2({
               activeFeedback === "up" && "payman-v2-assistant-msg-action-btn-active"
             ),
             "aria-label": "Good response",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ThumbsUp, { style: { width: 15, height: 15 } })
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ThumbsUp,
+              {
+                fill: activeFeedback === "up" ? "currentColor" : "none",
+                style: { width: 15, height: 15 }
+              }
+            )
           }
         ) }),
         showThumbsDown && canSubmitFeedback && /* @__PURE__ */ jsxRuntime.jsx(ActionTooltipV2, { label: "Bad response", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2305,7 +2375,13 @@ function AssistantMessageV2({
               activeFeedback === "down" && "payman-v2-assistant-msg-action-btn-active"
             ),
             "aria-label": "Bad response",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ThumbsDown, { style: { width: 15, height: 15 } })
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ThumbsDown,
+              {
+                fill: activeFeedback === "down" ? "currentColor" : "none",
+                style: { width: 15, height: 15 }
+              }
+            )
           }
         ) }),
         showTraceAction && /* @__PURE__ */ jsxRuntime.jsx(ActionTooltipV2, { label: "Trace", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2332,6 +2408,7 @@ function AssistantMessageV2({
             details
           });
           setActiveFeedback("down");
+          showToast("Thank you for your feedback", "success");
         }
       }
     )

package/dist/index.mjs

@@ -1495,6 +1495,7 @@ var RAG_IMAGE_PATH_REGEX2 = /^(?:https?:\/\/[^/\s]+)?\/api\/rag\/chunks\/[^"'\s]
 function isUnresolvedRagImageSource2(src) {
   return RAG_IMAGE_PATH_REGEX2.test(src);
 }
+var loadedImageCache = /* @__PURE__ */ new Set();
 var frameStyle = {
   width: "min(100%, 32rem)",
   maxWidth: "100%"
@@ -1513,24 +1514,36 @@ function MarkdownImageV2({
   isResolving = false,
   onImageClick
 }) {
-  const [isVisible, setIsVisible] = useState(false);
-  const [isLoaded, setIsLoaded] = useState(false);
+  const cachedAlready = src ? loadedImageCache.has(src) : false;
+  const [isVisible, setIsVisible] = useState(cachedAlready);
+  const [isLoaded, setIsLoaded] = useState(cachedAlready);
   const [hasError, setHasError] = useState(false);
   const [retryCount, setRetryCount] = useState(0);
   const sentinelRef = useRef(null);
+  const prevLoadedRef = useRef(cachedAlready);
   const isUnresolvedRag = useMemo(
     () => src ? isUnresolvedRagImageSource2(src) : false,
     [src]
   );
   const isResolvingRag = Boolean(isResolving && isUnresolvedRag);
   useEffect(() => {
-    setIsLoaded(false);
+    if (src && loadedImageCache.has(src)) {
+      setIsLoaded(true);
+      setIsVisible(true);
+      prevLoadedRef.current = true;
+    }
     setHasError(false);
     setRetryCount(0);
   }, [src]);
   useEffect(() => {
     const el = sentinelRef.current;
     if (!el || !src) return;
+    const rect = el.getBoundingClientRect();
+    const alreadyNear = rect.bottom >= -200 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) + 200;
+    if (alreadyNear) {
+      setIsVisible(true);
+      return;
+    }
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -1544,7 +1557,7 @@ function MarkdownImageV2({
     return () => observer.disconnect();
   }, [src]);
   if (!src) return null;
-  if (isResolvingRag) {
+  if (isResolvingRag && !isLoaded) {
     return /* @__PURE__ */ jsx(
       "span",
       {
@@ -1619,10 +1632,13 @@ function MarkdownImageV2({
               opacity: isLoaded ? 1 : 0
             },
             onLoad: () => {
+              if (src) loadedImageCache.add(src);
+              prevLoadedRef.current = true;
               setHasError(false);
               setIsLoaded(true);
             },
             onError: () => {
+              prevLoadedRef.current = false;
               setIsLoaded(false);
               setHasError(true);
             }
@@ -1640,7 +1656,7 @@ function MarkdownImageV2({
     }
   ) });
 }
-function buildComponents(onImageClick, isResolvingImages) {
+function buildComponents(onImageClick, isResolvingRef) {
   return {
     p: ({ children }) => /* @__PURE__ */ jsx("p", { children }),
     code: ({ children }) => /* @__PURE__ */ jsx("code", { children }),
@@ -1661,7 +1677,7 @@ function buildComponents(onImageClick, isResolvingImages) {
       {
         src: typeof src === "string" ? src : void 0,
         alt: typeof alt === "string" ? alt : void 0,
-        isResolving: isResolvingImages,
+        isResolving: isResolvingRef?.current,
         onImageClick
       }
     ),
@@ -1678,9 +1694,11 @@ function MarkdownRendererV2({
   isResolvingImages,
   onImageClick
 }) {
+  const isResolvingRef = useRef(isResolvingImages);
+  isResolvingRef.current = isResolvingImages;
   const components = useMemo(
-    () => buildComponents(onImageClick, isResolvingImages),
-    [onImageClick, isResolvingImages]
+    () => buildComponents(onImageClick, isResolvingRef),
+    [onImageClick]
   );
   return /* @__PURE__ */ jsx(
     "div",
@@ -1952,6 +1970,7 @@ var RESPONSE_SPEED = {
   newline: [4, 6],
   idle: 15
 };
+var MARKDOWN_IMAGE_REGEX = /^!\[[^\]]*\]\([^)]*\)/;
 function charDelay(char, speed, multiplier) {
   const raw = (() => {
     if (char === "*") return speed.fast;
@@ -1991,6 +2010,10 @@ function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDis
       displayedRef.current = initialDisplayedRef.current;
       setDisplayedText(initialDisplayedRef.current);
     }
+    if (displayedRef.current && !targetRef.current.startsWith(displayedRef.current)) {
+      displayedRef.current = targetRef.current;
+      setDisplayedText(targetRef.current);
+    }
     if (runningRef.current) return;
     runningRef.current = true;
     const tick = () => {
@@ -1998,8 +2021,22 @@ function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDis
         runningRef.current = false;
         return;
       }
+      if (displayedRef.current && !targetRef.current.startsWith(displayedRef.current)) {
+        displayedRef.current = targetRef.current;
+        setDisplayedText(targetRef.current);
+        timerRef.current = setTimeout(tick, speed.idle / multiplier);
+        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) {
+          displayedRef.current += imgMatch[0];
+          setDisplayedText(displayedRef.current);
+          timerRef.current = setTimeout(tick, 0);
+          return;
+        }
+        const nextChar = remaining[0];
         displayedRef.current += nextChar;
         setDisplayedText(displayedRef.current);
         const delay = charDelay(nextChar, speed, multiplier);
@@ -2023,6 +2060,23 @@ function useTypingEffect(targetText, enabled, speed = RESPONSE_SPEED, initialDis
     isTyping
   };
 }
+function stripIncompleteImageToken(text) {
+  const lastBang = text.lastIndexOf("![");
+  if (lastBang === -1) return text;
+  const after = text.slice(lastBang);
+  if (/^!\[[^\]]*\]\([^)]*\)/.test(after)) return text;
+  return text.slice(0, lastBang);
+}
+function getFeedbackState(message) {
+  const feedback = message.feedback;
+  if (feedback === "up" || feedback === "down") return feedback;
+  if (feedback && typeof feedback === "object") {
+    const value = feedback.feedback;
+    if (!value) return null;
+    return value === "POSITIVE" ? "up" : "down";
+  }
+  return null;
+}
 function AssistantMessageV2({
   message,
   onImageClick,
@@ -2032,21 +2086,11 @@ function AssistantMessageV2({
   typingSpeed = 4
 }) {
   const [copied, setCopied] = useState(false);
-  const [activeFeedback, setActiveFeedback] = useState(null);
+  const [activeFeedback, setActiveFeedback] = useState(
+    () => getFeedbackState(message)
+  );
   const [reasonModalOpen, setReasonModalOpen] = useState(false);
   const canSubmitFeedback = !!onSubmitFeedback && !!message.executionId;
-  const handlePositiveFeedback = () => {
-    if (!canSubmitFeedback || activeFeedback === "up") return;
-    const previous = activeFeedback;
-    setActiveFeedback("up");
-    Promise.resolve(
-      onSubmitFeedback?.({
-        messageId: message.id,
-        executionId: message.executionId,
-        feedback: "POSITIVE"
-      })
-    ).catch(() => setActiveFeedback(previous));
-  };
   const [toast, setToast] = useState(null);
   const copyResetTimerRef = useRef(null);
   const toastTimerRef = useRef(null);
@@ -2054,8 +2098,12 @@ function AssistantMessageV2({
   const showTraceAction = (actions?.trace ?? true) && !!onExecutionTraceClick;
   const showThumbsUp = actions?.thumbsUp ?? true;
   const showThumbsDown = actions?.thumbsDown ?? true;
+  const hydratedFeedback = message.feedback;
   const hasEverStreamed = useRef(!!message.isStreaming);
   if (message.isStreaming) hasEverStreamed.current = true;
+  useEffect(() => {
+    setActiveFeedback(getFeedbackState(message));
+  }, [hydratedFeedback, message.id]);
   useEffect(() => {
     return () => {
       if (copyResetTimerRef.current) clearTimeout(copyResetTimerRef.current);
@@ -2065,7 +2113,8 @@ function AssistantMessageV2({
   const rawResponseContent = (() => {
     const raw = message.isStreaming ? message.streamingContent || message.content : message.content;
     if (!raw) return "";
-    return raw.replace(/\\n/g, "\n");
+    const normalized = raw.replace(/\\n/g, "\n");
+    return message.isStreaming ? stripIncompleteImageToken(normalized) : normalized;
   })();
   const isThinkingStreaming = !!message.isStreaming && !rawResponseContent && !message.isError;
   const responseTypingEnabled = hasEverStreamed.current && Boolean(rawResponseContent) && !message.isError;
@@ -2121,6 +2170,21 @@ function AssistantMessageV2({
     setToast({ label, tone });
     toastTimerRef.current = setTimeout(() => setToast(null), 1800);
   };
+  const handlePositiveFeedback = () => {
+    if (!canSubmitFeedback || activeFeedback === "up") return;
+    const previous = activeFeedback;
+    setActiveFeedback("up");
+    Promise.resolve(
+      onSubmitFeedback?.({
+        messageId: message.id,
+        executionId: message.executionId,
+        feedback: "POSITIVE"
+      })
+    ).then(() => showToast("Thank you for your feedback", "success")).catch(() => {
+      setActiveFeedback(previous);
+      showToast("Could not send feedback", "error");
+    });
+  };
   const handleCopy = async () => {
     try {
       if (!navigator.clipboard?.writeText) {
@@ -2267,7 +2331,13 @@ function AssistantMessageV2({
               activeFeedback === "up" && "payman-v2-assistant-msg-action-btn-active"
             ),
             "aria-label": "Good response",
-            children: /* @__PURE__ */ jsx(ThumbsUp, { style: { width: 15, height: 15 } })
+            children: /* @__PURE__ */ jsx(
+              ThumbsUp,
+              {
+                fill: activeFeedback === "up" ? "currentColor" : "none",
+                style: { width: 15, height: 15 }
+              }
+            )
           }
         ) }),
         showThumbsDown && canSubmitFeedback && /* @__PURE__ */ jsx(ActionTooltipV2, { label: "Bad response", children: /* @__PURE__ */ jsx(
@@ -2279,7 +2349,13 @@ function AssistantMessageV2({
               activeFeedback === "down" && "payman-v2-assistant-msg-action-btn-active"
             ),
             "aria-label": "Bad response",
-            children: /* @__PURE__ */ jsx(ThumbsDown, { style: { width: 15, height: 15 } })
+            children: /* @__PURE__ */ jsx(
+              ThumbsDown,
+              {
+                fill: activeFeedback === "down" ? "currentColor" : "none",
+                style: { width: 15, height: 15 }
+              }
+            )
           }
         ) }),
         showTraceAction && /* @__PURE__ */ jsx(ActionTooltipV2, { label: "Trace", children: /* @__PURE__ */ jsx(
@@ -2306,6 +2382,7 @@ function AssistantMessageV2({
             details
           });
           setActiveFeedback("down");
+          showToast("Thank you for your feedback", "success");
         }
       }
     )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paymanai/payman-ask-sdk",
-  "version": "4.0.8",
+  "version": "4.0.10",
   "description": "Reusable web chat SDK for Payman K2 Agents with streaming support",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@lottiefiles/dotlottie-react": "^0.19.0",
-    "@paymanai/payman-typescript-ask-sdk": "4.0.8",
+    "@paymanai/payman-typescript-ask-sdk": "/Users/ibraheem/Desktop/Work/payman/sdks/payman-sdk-typescript",
     "@sentry/react": "^10.46.0",
     "clsx": "^2.1.1",
     "remark-breaks": "^4.0.0",