@paymanai/payman-ask-sdk 1.2.19 → 1.2.20

package/dist/index.mjs

@@ -8,6 +8,7 @@ import { Check, RotateCcw, Mic, ArrowUp, ArrowDown, X, Loader2, User, Clock, Spa
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { createPortal } from 'react-dom';
 
 var PaymanChatContext = createContext(void 0);
 function usePaymanChat() {
@@ -315,6 +316,256 @@ function ChatInput({
     }
   );
 }
+function ImageLightbox({
+  src,
+  alt = "",
+  onClose
+}) {
+  const [isMounted, setIsMounted] = useState(false);
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+  const overlayStyle = {
+    position: "fixed",
+    inset: 0,
+    zIndex: 2147483647,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 16,
+    background: "rgba(2, 6, 23, 0.92)",
+    isolation: "isolate"
+  };
+  const frameStyle = {
+    position: "relative",
+    width: "min(92vw, 1280px)",
+    height: "min(88vh, 920px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  };
+  useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+  useEffect(() => {
+    setIsImageLoaded(false);
+  }, [src]);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, []);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+  if (!isMounted || typeof document === "undefined") {
+    return null;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        style: overlayStyle,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.18 },
+        onClick: onClose,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "absolute top-4 right-4 z-[1] flex h-9 w-9 items-center justify-center rounded-full bg-black/60 text-white/90 transition-colors hover:bg-black/75",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: frameStyle, onClick: (event) => event.stopPropagation(), children: [
+            !isImageLoaded ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-white/80" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-white/90", children: "Loading image" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-white/60", children: "Reference image" })
+            ] }) : null,
+            /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center p-3 sm:p-4", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src,
+                alt,
+                draggable: false,
+                onLoad: () => setIsImageLoaded(true),
+                className: `block h-full w-full rounded-xl object-contain shadow-2xl transition-opacity duration-200 ${isImageLoaded ? "opacity-100" : "opacity-0"}`
+              }
+            ) })
+          ] })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+var RAG_IMAGE_PATH_REGEX = /^(?:https?:\/\/[^/\s]+)?\/api\/rag\/chunks\/[^"'\s]+\/image(?:[?#][^"'\s]*)?$/;
+function isUnresolvedRagImageSource(src) {
+  return RAG_IMAGE_PATH_REGEX.test(src);
+}
+function LoadingImageCard({
+  label,
+  description
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: "my-3 flex min-h-36 w-full flex-col items-center justify-center gap-2 px-4 py-5 text-center", children: [
+    /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-slate-500 dark:text-slate-300" }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-slate-600 dark:text-slate-200", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] leading-relaxed text-slate-500/90 dark:text-slate-300/80", children: description })
+  ] });
+}
+function BrokenImageCard({ alt }) {
+  return /* @__PURE__ */ jsxs("span", { className: "my-3 flex min-h-44 w-full flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-red-200 bg-red-50/60 px-4 py-5 text-center dark:border-red-900/40 dark:bg-red-950/20", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-red-600 dark:text-red-300", children: "Unable to load image" }),
+    alt ? /* @__PURE__ */ jsx("span", { className: "max-w-sm text-[11px] leading-relaxed text-red-500/80 dark:text-red-200/80", children: alt }) : null
+  ] });
+}
+function MarkdownImage({
+  src,
+  alt,
+  isResolving = false
+}) {
+  const imageFrameStyle = {
+    width: "min(100%, 32rem)",
+    maxWidth: "100%"
+  };
+  const imageStyle = {
+    display: "block",
+    width: "100%",
+    height: "auto",
+    maxWidth: "100%",
+    maxHeight: "18rem",
+    objectFit: "contain"
+  };
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
+  const isUnresolvedRagImage = useMemo(
+    () => src ? isUnresolvedRagImageSource(src) : false,
+    [src]
+  );
+  const isResolvingRagImage = isResolving && isUnresolvedRagImage;
+  useEffect(() => {
+    setIsLoaded(false);
+    setHasError(false);
+    setIsLightboxOpen(false);
+  }, [src]);
+  if (!src) {
+    return null;
+  }
+  if (isResolvingRagImage) {
+    return /* @__PURE__ */ jsx(LoadingImageCard, { label: "Loading image", description: "Reference image" });
+  }
+  if (hasError) {
+    return /* @__PURE__ */ jsx(BrokenImageCard, { alt });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "my-3 block w-full", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          if (isLoaded) {
+            setIsLightboxOpen(true);
+          }
+        },
+        disabled: !isLoaded,
+        "aria-busy": !isLoaded,
+        className: "group relative mx-auto flex w-full items-center justify-center overflow-hidden rounded-xl bg-black/[0.03] px-3 py-3 text-left transition-colors hover:bg-black/[0.05] disabled:cursor-wait disabled:hover:bg-black/[0.03] dark:bg-white/[0.03] dark:hover:bg-white/[0.05] dark:disabled:hover:bg-white/[0.03]",
+        style: {
+          ...imageFrameStyle,
+          ...!isLoaded ? { minHeight: "9rem" } : {}
+        },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: alt || "",
+            className: `relative z-[1] block h-auto max-h-[22rem] w-full max-w-full rounded-lg object-contain transition-opacity duration-200 ${isLoaded ? "opacity-100" : "opacity-0"}`,
+            style: imageStyle,
+            onLoad: () => {
+              setHasError(false);
+              setIsLoaded(true);
+            },
+            onError: () => {
+              setIsLoaded(false);
+              setHasError(true);
+            }
+          }
+        )
+      }
+    ) }),
+    isLightboxOpen && isLoaded ? /* @__PURE__ */ jsx(
+      ImageLightbox,
+      {
+        src,
+        alt,
+        onClose: () => setIsLightboxOpen(false)
+      }
+    ) : null
+  ] });
+}
+function createMarkdownComponents(options = {}) {
+  return {
+    p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "mb-3 last:mb-0 text-sm leading-relaxed", children }),
+    code: ({ className: codeClassName, children }) => {
+      const isInline = !codeClassName;
+      return isInline ? /* @__PURE__ */ jsx("code", { className: "payman-agent-code-inline rounded-md px-1.5 py-0.5 font-mono text-xs break-all", children }) : /* @__PURE__ */ jsx("code", { className: "payman-agent-code-block my-2 block overflow-x-auto rounded-lg p-3 font-mono text-xs whitespace-pre", children });
+    },
+    pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: "my-2 max-w-full overflow-x-auto rounded-lg", children }),
+    ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "mb-3 ml-4 list-disc space-y-1 text-sm", children }),
+    ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "mb-3 ml-4 list-decimal space-y-1 text-sm", children }),
+    li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "text-sm leading-relaxed", children }),
+    h1: ({ children }) => /* @__PURE__ */ jsx("h1", { className: "mt-4 mb-2 text-lg font-semibold first:mt-0", children }),
+    h2: ({ children }) => /* @__PURE__ */ jsx("h2", { className: "mt-3 mb-2 text-base font-semibold first:mt-0", children }),
+    h3: ({ children }) => /* @__PURE__ */ jsx("h3", { className: "mt-2 mb-1 text-sm font-semibold first:mt-0", children }),
+    strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }),
+    em: ({ children }) => /* @__PURE__ */ jsx("em", { className: "italic", children }),
+    blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { className: "payman-agent-blockquote my-2 pl-4 italic", children }),
+    hr: () => /* @__PURE__ */ jsx("hr", { className: "payman-agent-hr my-4" }),
+    a: ({ href, children }) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "payman-agent-link underline decoration-1 underline-offset-2",
+        children
+      }
+    ),
+    img: ({ src, alt }) => /* @__PURE__ */ jsx(
+      MarkdownImage,
+      {
+        src: typeof src === "string" ? src : void 0,
+        alt: typeof alt === "string" ? alt : void 0,
+        isResolving: options.isResolvingImages
+      }
+    ),
+    table: ({ children }) => /* @__PURE__ */ jsx("div", { className: "relative my-4 -mx-1 w-full overflow-x-auto", children: /* @__PURE__ */ jsx("table", { className: "payman-agent-table min-w-full caption-bottom overflow-hidden rounded-lg text-sm", children }) }),
+    thead: ({ children }) => /* @__PURE__ */ jsx("thead", { className: "payman-agent-thead [&_tr]:border-b", children }),
+    tbody: ({ children }) => /* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child]:border-0", children }),
+    tr: ({ children }) => /* @__PURE__ */ jsx("tr", { className: "payman-agent-tr border-b transition-colors", children }),
+    th: ({ children }) => /* @__PURE__ */ jsx("th", { className: "h-10 px-3 text-left align-middle text-xs font-medium whitespace-nowrap", children }),
+    td: ({ children }) => /* @__PURE__ */ jsx("td", { className: "p-3 align-middle text-sm whitespace-nowrap", children })
+  };
+}
 
 // src/utils/errorMessages.ts
 var WORKFLOW_FAILED = "WORKFLOW_FAILED";
@@ -447,6 +698,12 @@ function AgentMessage({
     ),
     [message.steps, currentExecutingStepId]
   );
+  const markdownRenderers = useMemo(
+    () => createMarkdownComponents({
+      isResolvingImages: message.isResolvingImages
+    }),
+    [message.isResolvingImages]
+  );
   const getStepsLabel = (streaming) => {
     const count = message.steps.length;
     const stepWord = count === 1 ? "step" : "steps";
@@ -634,7 +891,7 @@ function AgentMessage({
                             ReactMarkdown,
                             {
                               remarkPlugins: [remarkGfm],
-                              components: markdownComponents(),
+                              components: markdownRenderers,
                               children: isError ? conflictErrorMessage ?? FRIENDLY_ERROR_MESSAGE : content || (isStreaming ? "Thinking..." : isCancelled ? "Request was stopped." : "")
                             }
                           )
@@ -685,42 +942,6 @@ function AgentMessage({
   }
   return messageContent;
 }
-function markdownComponents(_isError) {
-  return {
-    p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "mb-3 last:mb-0 text-sm leading-relaxed", children }),
-    code: ({ className: codeClassName, children }) => {
-      const isInline = !codeClassName;
-      return isInline ? /* @__PURE__ */ jsx("code", { className: "px-1.5 py-0.5 rounded-md text-xs font-mono break-all payman-agent-code-inline", children }) : /* @__PURE__ */ jsx("code", { className: "block p-3 rounded-lg text-xs font-mono overflow-x-auto my-2 whitespace-pre payman-agent-code-block", children });
-    },
-    pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: "my-2 overflow-x-auto max-w-full rounded-lg", children }),
-    ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "list-disc ml-4 mb-3 space-y-1 text-sm", children }),
-    ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "list-decimal ml-4 mb-3 space-y-1 text-sm", children }),
-    li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "text-sm leading-relaxed", children }),
-    h1: ({ children }) => /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold mb-2 mt-4 first:mt-0", children }),
-    h2: ({ children }) => /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold mb-2 mt-3 first:mt-0", children }),
-    h3: ({ children }) => /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold mb-1 mt-2 first:mt-0", children }),
-    strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }),
-    em: ({ children }) => /* @__PURE__ */ jsx("em", { className: "italic", children }),
-    blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { className: "pl-4 my-2 italic payman-agent-blockquote", children }),
-    hr: () => /* @__PURE__ */ jsx("hr", { className: "my-4 payman-agent-hr" }),
-    a: ({ href, children }) => /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "underline underline-offset-2 decoration-1 payman-agent-link",
-        children
-      }
-    ),
-    table: ({ children }) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-x-auto my-4 -mx-1", children: /* @__PURE__ */ jsx("table", { className: "min-w-full caption-bottom text-sm rounded-lg overflow-hidden payman-agent-table", children }) }),
-    thead: ({ children }) => /* @__PURE__ */ jsx("thead", { className: "[&_tr]:border-b payman-agent-thead", children }),
-    tbody: ({ children }) => /* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child]:border-0", children }),
-    tr: ({ children }) => /* @__PURE__ */ jsx("tr", { className: "border-b transition-colors payman-agent-tr", children }),
-    th: ({ children }) => /* @__PURE__ */ jsx("th", { className: "h-10 px-3 text-left align-middle font-medium whitespace-nowrap text-xs", children }),
-    td: ({ children }) => /* @__PURE__ */ jsx("td", { className: "p-3 align-middle text-sm whitespace-nowrap", children })
-  };
-}
 function UserMessage({
   message,
   animated = false,