@gendive/chatllm 0.21.7 → 0.21.9

package/dist/react/index.mjs

@@ -2244,6 +2244,7 @@ var useChatUI = (options) => {
     onAnalyzePatterns,
     // Image upload
     onUploadImage,
+    onImageError,
     // External storage options
     useExternalStorage = false,
     startWithNewSession = false,
@@ -2350,6 +2351,7 @@ var useChatUI = (options) => {
   const onSessionContextChangeRef = useRef5(onSessionContextChange);
   const onLoadModelsRef = useRef5(onLoadModels);
   const onUploadImageRef = useRef5(onUploadImage);
+  const onImageErrorRef = useRef5(onImageError);
   const globalMemoryRef = useRef5(null);
   useEffect4(() => {
     onSendMessageRef.current = onSendMessage;
@@ -2370,6 +2372,7 @@ var useChatUI = (options) => {
     onSkillCompleteRef.current = onSkillComplete;
     onSessionContextChangeRef.current = onSessionContextChange;
     onUploadImageRef.current = onUploadImage;
+    onImageErrorRef.current = onImageError;
     onLoadModelsRef.current = onLoadModels;
   });
   const abortControllersRef = useRef5(/* @__PURE__ */ new Map());
@@ -3459,7 +3462,7 @@ ${finalContent}`;
         if (att.type === "image" && att.file) {
           const dataUri = await fileToDataUri(att.file);
           const imageUrl = onUploadImageRef.current ? await onUploadImageRef.current(dataUri, att.name) : dataUri;
-          userContentParts.push({ type: "image", url: imageUrl, alt: att.name });
+          userContentParts.push({ type: "image", url: imageUrl, alt: att.name, fileName: att.name });
         } else {
           userContentParts.push({ type: "file", name: att.name, url: att.previewUrl || "", mimeType: att.mimeType, size: att.size });
         }
@@ -5655,6 +5658,11 @@ ${result.content}
   };
 };
 
+// src/react/contexts/ImageErrorContext.ts
+import { createContext, useContext } from "react";
+var ImageErrorContext = createContext(null);
+var useImageError = () => useContext(ImageErrorContext);
+
 // src/react/components/ChatSidebar.tsx
 import { useState as useState9, useRef as useRef7, useEffect as useEffect6 } from "react";
 
@@ -6455,6 +6463,17 @@ var CodeBlock = ({ language, code }) => {
 };
 var ImageWithCopyButton = ({ src, alt, imageKey }) => {
   const [isHovered, setIsHovered] = React2.useState(false);
+  const [imgSrc, setImgSrc] = React2.useState(src);
+  const onImageError = useImageError();
+  const handleImageError = React2.useCallback(async () => {
+    if (onImageError) {
+      const newUrl = await onImageError(imgSrc);
+      if (newUrl) {
+        setImgSrc(newUrl);
+        return;
+      }
+    }
+  }, [onImageError, imgSrc]);
   const [copyState, setCopyState] = React2.useState("idle");
   const imgRef = React2.useRef(null);
   const getImageBlob = async () => {
@@ -6476,9 +6495,9 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
         console.log("Canvas method failed (CORS), trying fetch...");
       }
     }
-    if (!src.startsWith("data:")) {
+    if (!imgSrc.startsWith("data:")) {
       try {
-        const response = await fetch(src, { mode: "cors" });
+        const response = await fetch(imgSrc, { mode: "cors" });
         if (response.ok) {
           const blob = await response.blob();
           if (blob.type === "image/png") return blob;
@@ -6518,7 +6537,7 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
     setCopyState("copying");
     try {
       if (!navigator.clipboard?.write) {
-        await navigator.clipboard.writeText(src);
+        await navigator.clipboard.writeText(imgSrc);
         setCopyState("copied");
         setTimeout(() => setCopyState("idle"), 2e3);
         return;
@@ -6528,7 +6547,7 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
         await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
         setCopyState("copied");
       } else {
-        await navigator.clipboard.writeText(src);
+        await navigator.clipboard.writeText(imgSrc);
         setCopyState("copied");
       }
       setTimeout(() => setCopyState("idle"), 2e3);
@@ -6541,7 +6560,7 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
   const handleDownload = async () => {
     try {
       const blob = await getImageBlob();
-      const url = blob ? URL.createObjectURL(blob) : src;
+      const url = blob ? URL.createObjectURL(blob) : imgSrc;
       const link = document.createElement("a");
       link.href = url;
       link.download = alt || `image-${Date.now()}.png`;
@@ -6551,7 +6570,7 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
       if (blob) URL.revokeObjectURL(url);
     } catch (error) {
       console.error("Failed to download image:", error);
-      window.open(src, "_blank");
+      window.open(imgSrc, "_blank");
     }
   };
   return /* @__PURE__ */ jsxs2(
@@ -6569,10 +6588,11 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
           "img",
           {
             ref: imgRef,
-            src,
+            src: imgSrc,
             alt,
             className: "chatllm-image",
-            crossOrigin: src.startsWith("data:") ? void 0 : "anonymous",
+            crossOrigin: imgSrc.startsWith("data:") ? void 0 : "anonymous",
+            onError: handleImageError,
             style: {
               maxWidth: "100%",
               borderRadius: "8px",
@@ -8855,7 +8875,7 @@ var iconButtonStyle = {
 };
 
 // src/react/components/MessageList.tsx
-import React14, { useRef as useRef10, useEffect as useEffect10, useCallback as useCallback10, useState as useState18 } from "react";
+import React14, { useRef as useRef10, useEffect as useEffect10, useCallback as useCallback11, useState as useState18 } from "react";
 
 // src/react/components/MessageBubble.tsx
 import { useState as useState17 } from "react";
@@ -9697,12 +9717,25 @@ var SkillProgressUI = ({
 };
 
 // src/react/components/ImageContentCard.tsx
-import { useState as useState13 } from "react";
+import { useState as useState13, useCallback as useCallback8 } from "react";
 import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var ImageContentCard = ({ part }) => {
   const [isExpanded, setIsExpanded] = useState13(false);
   const [isLoaded, setIsLoaded] = useState13(false);
   const [hasError, setHasError] = useState13(false);
+  const [imgSrc, setImgSrc] = useState13(part.url);
+  const onImageError = useImageError();
+  const handleImageError = useCallback8(async () => {
+    if (onImageError) {
+      const newUrl = await onImageError(imgSrc, part.fileName);
+      if (newUrl) {
+        setImgSrc(newUrl);
+        setIsLoaded(false);
+        return;
+      }
+    }
+    setHasError(true);
+  }, [onImageError, imgSrc, part.fileName]);
   if (hasError) {
     return /* @__PURE__ */ jsxs10(
       "div",
@@ -9755,10 +9788,10 @@ var ImageContentCard = ({ part }) => {
           /* @__PURE__ */ jsx11(
             "img",
             {
-              src: part.url,
+              src: imgSrc,
               alt: part.alt || "",
               onLoad: () => setIsLoaded(true),
-              onError: () => setHasError(true),
+              onError: handleImageError,
               style: {
                 display: isLoaded ? "block" : "none",
                 width: "100%",
@@ -9801,7 +9834,7 @@ var ImageContentCard = ({ part }) => {
         children: /* @__PURE__ */ jsx11(
           "img",
           {
-            src: part.url,
+            src: imgSrc,
             alt: part.alt || "",
             style: {
               maxWidth: "90vw",
@@ -10069,7 +10102,7 @@ var ToolStatusCard = ({
 };
 
 // src/react/components/ArtifactCard.tsx
-import { useRef as useRef9, useEffect as useEffect9, useState as useState15, useCallback as useCallback8 } from "react";
+import { useRef as useRef9, useEffect as useEffect9, useState as useState15, useCallback as useCallback9 } from "react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var getThemeStyles = () => {
   const root = document.documentElement;
@@ -10162,7 +10195,7 @@ var MermaidArtifact = ({ code }) => {
   const containerRef = useRef9(null);
   const [svgHtml, setSvgHtml] = useState15(null);
   const [error, setError] = useState15(null);
-  const renderMermaid = useCallback8(async () => {
+  const renderMermaid = useCallback9(async () => {
     try {
       let mermaid;
       try {
@@ -10546,7 +10579,7 @@ var ContentPartRenderer = ({
           effectiveType === "image" && /* @__PURE__ */ jsx15(
             ImageContentCard,
             {
-              part: { type: "image", url: result.content, alt: result.metadata?.alt }
+              part: { type: "image", url: result.content, alt: result.metadata?.alt, fileName: result.metadata?.fileName }
             }
           ),
           effectiveType === "file" && /* @__PURE__ */ jsx15(
@@ -11898,7 +11931,7 @@ var MessageList = ({
       container.removeEventListener("touchmove", handleTouchMove);
     };
   }, []);
-  const handleScroll = useCallback10(() => {
+  const handleScroll = useCallback11(() => {
     if (!containerRef.current) return;
     const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
     const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
@@ -11914,7 +11947,7 @@ var MessageList = ({
       behavior: "smooth"
     });
   }, [messages]);
-  const scrollToBottom = useCallback10(() => {
+  const scrollToBottom = useCallback11(() => {
     userScrollLockRef.current = false;
     setShowScrollButton(false);
     containerRef.current?.scrollTo({
@@ -11922,7 +11955,7 @@ var MessageList = ({
       behavior: "smooth"
     });
   }, []);
-  const handleMouseUp = useCallback10(() => {
+  const handleMouseUp = useCallback11(() => {
     const selection = typeof window !== "undefined" ? window.getSelection() : null;
     const text = selection?.toString().trim();
     if (text && text.length > 0) {
@@ -15043,7 +15076,8 @@ var ChatUIWithHook = ({
   onWorkflowSuggested,
   onAnalyzePatterns,
   // Image upload
-  onUploadImage
+  onUploadImage,
+  onImageError
 }) => {
   const hookOptions = {
     models,
@@ -15093,10 +15127,11 @@ var ChatUIWithHook = ({
     onWorkflowSuggested,
     onAnalyzePatterns,
     // Image upload
-    onUploadImage
+    onUploadImage,
+    onImageError
   };
   const state = useChatUI(hookOptions);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx23(ImageErrorContext.Provider, { value: onImageError || null, children: /* @__PURE__ */ jsx23(
     ChatUIView,
     {
       state,
@@ -15123,7 +15158,7 @@ var ChatUIWithHook = ({
       onImportMemory,
       importMemoryPrompt
     }
-  );
+  ) });
 };
 var ChatUI = (props) => {
   injectStyles();
@@ -15153,7 +15188,7 @@ var ChatUI = (props) => {
       onImportMemory,
       importMemoryPrompt
     } = props;
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx23(ImageErrorContext.Provider, { value: props.onImageError || null, children: /* @__PURE__ */ jsx23(
       ChatUIView,
       {
         state: props.chatState,
@@ -15181,19 +15216,19 @@ var ChatUI = (props) => {
         onImportMemory,
         importMemoryPrompt
       }
-    );
+    ) });
   }
   return /* @__PURE__ */ jsx23(ChatUIWithHook, { ...props });
 };
 
 // src/react/ChatFloatingWidget.tsx
-import { useState as useState28, useRef as useRef17, useEffect as useEffect19, useMemo as useMemo7, useCallback as useCallback15 } from "react";
+import { useState as useState28, useRef as useRef17, useEffect as useEffect19, useMemo as useMemo7, useCallback as useCallback16 } from "react";
 
 // src/react/hooks/useFloatingWidget.ts
-import { useState as useState22, useCallback as useCallback12, useEffect as useEffect14, useRef as useRef12 } from "react";
+import { useState as useState22, useCallback as useCallback13, useEffect as useEffect14, useRef as useRef12 } from "react";
 
 // src/react/hooks/useDragResize.ts
-import { useState as useState21, useRef as useRef11, useCallback as useCallback11, useEffect as useEffect13, useMemo as useMemo6 } from "react";
+import { useState as useState21, useRef as useRef11, useCallback as useCallback12, useEffect as useEffect13, useMemo as useMemo6 } from "react";
 var DRAG_THRESHOLD = 5;
 var FAB_SIZE = 56;
 var EDGE_MARGIN = 24;
@@ -15343,7 +15378,7 @@ var useDragResize = (options) => {
       if (dragRafRef.current) cancelAnimationFrame(dragRafRef.current);
     };
   }, []);
-  const handleFabPointerDown = useCallback11((e) => {
+  const handleFabPointerDown = useCallback12((e) => {
     if (disabled || isMobile) return;
     dragCleanupRef.current?.();
     const el = e.currentTarget;
@@ -15557,7 +15592,7 @@ var useDragResize = (options) => {
       borderRadius: "var(--floating-panel-radius, 16px)"
     };
   }, [isMobile, disabled, fabPos.x, fabPos.y, panelSize.width, panelSize.height, vw, vh, panelDirection, minHeight]);
-  const handleResizePointerDown = useCallback11((edge, e) => {
+  const handleResizePointerDown = useCallback12((edge, e) => {
     if (disabled || isMobile) return;
     e.preventDefault();
     e.stopPropagation();
@@ -15573,7 +15608,7 @@ var useDragResize = (options) => {
     };
     setIsResizing(true);
   }, [disabled, isMobile]);
-  const handleResizePointerMove = useCallback11((e) => {
+  const handleResizePointerMove = useCallback12((e) => {
     if (!resizeStartRef.current) return;
     const { startX, startY, width, height, edge, fabY } = resizeStartRef.current;
     const dx = e.clientX - startX;
@@ -15597,7 +15632,7 @@ var useDragResize = (options) => {
     newHeight = Math.max(minHeight, Math.min(maxH, newHeight));
     setPanelSize({ width: newWidth, height: newHeight });
   }, [minWidth, maxWidth, minHeight]);
-  const handleResizePointerUp = useCallback11((e) => {
+  const handleResizePointerUp = useCallback12((e) => {
     if (!resizeStartRef.current) return;
     e.currentTarget.releasePointerCapture(e.pointerId);
     resizeStartRef.current = null;
@@ -15694,15 +15729,15 @@ var useFloatingWidget = (options) => {
   useEffect14(() => {
     onTabChangeRef.current = onTabChange;
   }, [onTabChange]);
-  const open = useCallback12(() => {
+  const open = useCallback13(() => {
     setIsOpen(true);
     onOpenRef.current?.();
   }, []);
-  const close = useCallback12(() => {
+  const close = useCallback13(() => {
     setIsOpen(false);
     onCloseRef.current?.();
   }, []);
-  const toggle = useCallback12(() => {
+  const toggle = useCallback13(() => {
     setIsOpen((prev) => {
       const next = !prev;
       if (next) onOpenRef.current?.();
@@ -15710,11 +15745,11 @@ var useFloatingWidget = (options) => {
       return next;
     });
   }, []);
-  const setTab = useCallback12((tabKey) => {
+  const setTab = useCallback13((tabKey) => {
     setActiveTab(tabKey);
     onTabChangeRef.current?.(tabKey);
   }, []);
-  const handleFabInteraction = useCallback12(() => {
+  const handleFabInteraction = useCallback13(() => {
     if (dragResize.isDragging) return;
     toggle();
   }, [dragResize.isDragging, toggle]);
@@ -15747,7 +15782,7 @@ var useFloatingWidget = (options) => {
 import { useRef as useRef14, useState as useState24, useEffect as useEffect16 } from "react";
 
 // src/react/components/floating/DevDiveCharacter.tsx
-import { useState as useState23, useEffect as useEffect15, useRef as useRef13, useCallback as useCallback13 } from "react";
+import { useState as useState23, useEffect as useEffect15, useRef as useRef13, useCallback as useCallback14 } from "react";
 import { Fragment as Fragment10, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var THEMES = {
   dark: { body: "#2ecc71", stroke: "#27ae60", highlight: "#3ddc84", face: "#1a1a2e", eyeLight: "#fff" },
@@ -15782,7 +15817,7 @@ var DevDiveFabCharacter = ({
   const cleanupRef = useRef13(null);
   const lastActivityRef = useRef13(Date.now());
   const isSleepyRef = useRef13(false);
-  const markActivity = useCallback13(() => {
+  const markActivity = useCallback14(() => {
     lastActivityRef.current = Date.now();
     if (isSleepyRef.current) {
       isSleepyRef.current = false;
@@ -16509,7 +16544,7 @@ var FloatingTabBar = ({
 };
 
 // src/react/components/floating/CompactChatView.tsx
-import { useState as useState27, useCallback as useCallback14 } from "react";
+import { useState as useState27, useCallback as useCallback15 } from "react";
 
 // src/react/components/floating/CompactSessionMenu.tsx
 import { useState as useState26, useRef as useRef16, useEffect as useEffect18 } from "react";
@@ -16855,15 +16890,15 @@ var CompactChatView = ({
     setInput(choice.text);
   };
   const [showSessionMenu, setShowSessionMenu] = useState27(false);
-  const handleSessionSelect = useCallback14((id) => {
+  const handleSessionSelect = useCallback15((id) => {
     selectSession(id);
     setShowSessionMenu(false);
   }, [selectSession]);
-  const handleNewSession = useCallback14(() => {
+  const handleNewSession = useCallback15(() => {
     newSession();
     setShowSessionMenu(false);
   }, [newSession]);
-  const handleCloseMenu = useCallback14(() => {
+  const handleCloseMenu = useCallback15(() => {
     setShowSessionMenu(false);
   }, []);
   const greeting = personalization?.userProfile?.nickname ? `${personalization.userProfile.nickname}\uB2D8, \uBB34\uC5C7\uC774\uB4E0 \uBB3C\uC5B4\uBCF4\uC138\uC694` : "\uBB34\uC5C7\uC774\uB4E0 \uBB3C\uC5B4\uBCF4\uC138\uC694";
@@ -17187,7 +17222,7 @@ var ChatFloatingWidget = ({
     if (!notification) return null;
     return typeof notification === "string" ? { text: notification } : notification;
   }, [notification]);
-  const handleFabClick = useCallback15(() => {
+  const handleFabClick = useCallback16(() => {
     if (notifObj?.onClick) {
       notifObj.onClick();
       if (!isOpen) handleFabInteraction();
@@ -17371,7 +17406,7 @@ var ChatFloatingWidget = ({
 };
 
 // src/react/hooks/useDeepResearch.ts
-import { useState as useState29, useCallback as useCallback16, useRef as useRef18 } from "react";
+import { useState as useState29, useCallback as useCallback17, useRef as useRef18 } from "react";
 var REPORT_GENERATION_PROMPT2 = `\uB2F9\uC2E0\uC740 \uB9AC\uC11C\uCE58 \uBCF4\uACE0\uC11C \uC791\uC131 \uC804\uBB38\uAC00\uC785\uB2C8\uB2E4.
 
 <collected_sources>
@@ -17425,7 +17460,7 @@ var useDeepResearch = (options) => {
   const [isResearching, setIsResearching] = useState29(false);
   const [progress, setProgress] = useState29(null);
   const abortControllerRef = useRef18(null);
-  const callLLM2 = useCallback16(
+  const callLLM2 = useCallback17(
     async (prompt, stream = false) => {
       const response = await fetch(apiEndpoint, {
         method: "POST",
@@ -17452,7 +17487,7 @@ var useDeepResearch = (options) => {
     },
     [apiEndpoint, apiKey, model, provider]
   );
-  const analyzeQuery2 = useCallback16(
+  const analyzeQuery2 = useCallback17(
     async (query) => {
       const prompt = QUERY_ANALYSIS_PROMPT2.replace("{question}", query);
       const response = await callLLM2(prompt);
@@ -17471,7 +17506,7 @@ var useDeepResearch = (options) => {
     },
     [callLLM2]
   );
-  const runSubAgent2 = useCallback16(
+  const runSubAgent2 = useCallback17(
     async (topic, queries, agentId, updateProgress) => {
       updateProgress({ status: "searching", searchCount: 0, resultsCount: 0 });
       const allResults = [];
@@ -17510,7 +17545,7 @@ var useDeepResearch = (options) => {
     },
     [onWebSearch, onExtractContent]
   );
-  const generateReport2 = useCallback16(
+  const generateReport2 = useCallback17(
     async (query, results, onStreamContent) => {
       const allSources = [];
       const sourcesForPrompt = [];
@@ -17568,7 +17603,7 @@ var useDeepResearch = (options) => {
     },
     [callLLM2]
   );
-  const runDeepResearch = useCallback16(
+  const runDeepResearch = useCallback17(
     async (query, onStreamContent) => {
       abortControllerRef.current = new AbortController();
       setIsResearching(true);
@@ -17671,7 +17706,7 @@ var useDeepResearch = (options) => {
     },
     [analyzeQuery2, runSubAgent2, generateReport2]
   );
-  const stopResearch = useCallback16(() => {
+  const stopResearch = useCallback17(() => {
     abortControllerRef.current?.abort();
     setIsResearching(false);
     setProgress(null);
@@ -18236,6 +18271,7 @@ export {
   Icon,
   IconSvg,
   ImageContentCard,
+  ImageErrorContext,
   LinkChip,
   MarkdownRenderer,
   MemoryPanel,
@@ -18257,6 +18293,7 @@ export {
   useDeepResearch,
   useDragResize,
   useFloatingWidget,
+  useImageError,
   useObserver,
   useProject,
   useSkills