@paymanai/payman-ask-sdk 4.0.9 → 4.0.11

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,13 @@ 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;
@@ -2095,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;

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,13 @@ 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;
@@ -2069,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paymanai/payman-ask-sdk",
-  "version": "4.0.9",
+  "version": "4.0.11",
   "description": "Reusable web chat SDK for Payman K2 Agents with streaming support",
   "main": "dist/index.js",
   "module": "dist/index.mjs",