@orangecatai/adgen-canvas 0.0.4 → 0.0.5

package/dist/dev/index.js

@@ -47849,7 +47849,13 @@ ${f.textContent}`).join("\n\n")}`;
         message: formatToolStartMessage(name, parsedArgs)
       });
       if (name === "generate_image" && onBeforeImageGen) {
-        const { allowed, error } = await onBeforeImageGen();
+        let gateResult;
+        try {
+          gateResult = await onBeforeImageGen();
+        } catch {
+          gateResult = { allowed: false, error: "Credit check failed" };
+        }
+        const { allowed, error } = gateResult;
         if (!allowed) {
           const gatedResult = {
             success: false,
@@ -48397,6 +48403,8 @@ var AIChatPanel = React57.forwardRef(
     const [availableFrames, setAvailableFrames] = useState49([]);
     const [attachedFiles, setAttachedFiles] = useState49([]);
     const [webSearchEnabled, setWebSearchEnabled] = useState49(false);
+    const [isSendPending, setIsSendPending] = useState49(false);
+    const [isLoadingSession, setIsLoadingSession] = useState49(false);
     const [isRecording, setIsRecording] = useState49(false);
     const [isTranscribing, setIsTranscribing] = useState49(false);
     const [copiedMsgId, setCopiedMsgId] = useState49(null);
@@ -48408,6 +48416,10 @@ var AIChatPanel = React57.forwardRef(
     const audioChunksRef = useRef49([]);
     const prevPromptRef = useRef49("");
     const voiceUsedRef = useRef49(false);
+    const currentSessionIdRef = useRef49(currentSessionId);
+    useEffect55(() => {
+      currentSessionIdRef.current = currentSessionId;
+    }, [currentSessionId]);
     useEffect55(() => {
       const handler = (e) => {
         if (historyRef.current && !historyRef.current.contains(e.target)) {
@@ -48425,7 +48437,18 @@ var AIChatPanel = React57.forwardRef(
         abortControllerRef.current?.abort();
       }
     }, [isOpen]);
-    const currentTitle = messages.length > 0 ? messages[0].content.slice(0, 30) + (messages[0].content.length > 30 ? "\u2026" : "") : "New chat";
+    const currentTitle = (() => {
+      const sessionTitle = sessions.find(
+        (s) => s.id === currentSessionId
+      )?.title;
+      if (sessionTitle) {
+        return sessionTitle;
+      }
+      if (messages.length > 0) {
+        return messages[0].content.slice(0, 30) + (messages[0].content.length > 30 ? "\u2026" : "");
+      }
+      return "New chat";
+    })();
     const saveCurrentSession = useCallback24(() => {
       if (messages.length === 0) {
         return;
@@ -48447,25 +48470,29 @@ var AIChatPanel = React57.forwardRef(
       const newSessionId = genId();
       setMessages([]);
       setCurrentSessionId(newSessionId);
+      setIsLoadingSession(false);
       setHistoryOpen(false);
       setError(null);
       setPrompt("");
       setFrameRef(null);
       setAttachedFiles([]);
       setStatusText("");
-      if (onSessionCreate) {
-        onSessionCreate({ id: newSessionId, title: "New chat" });
-      }
-    }, [saveCurrentSession, onSessionCreate]);
+    }, [saveCurrentSession]);
     const handleSwitchSession = useCallback24(
       (session) => {
         saveCurrentSession();
-        setMessages(session.messages);
         setCurrentSessionId(session.id);
         setHistoryOpen(false);
         setError(null);
-        if (onSessionSwitch) {
-          onSessionSwitch(session.id);
+        if (session.messages.length > 0) {
+          setMessages(session.messages);
+          setIsLoadingSession(false);
+        } else {
+          setMessages([]);
+          setIsLoadingSession(true);
+          if (onSessionSwitch) {
+            onSessionSwitch(session.id);
+          }
         }
       },
       [saveCurrentSession, onSessionSwitch]
@@ -48498,7 +48525,10 @@ var AIChatPanel = React57.forwardRef(
         if (!ctx) {
           return;
         }
-        const screenshot = await captureFrameScreenshot(excalidrawAPI, frame.id);
+        const screenshot = await captureFrameScreenshot(
+          excalidrawAPI,
+          frame.id
+        );
         setFrameRef({
           frameId: frame.id,
           label: ctx.frameInfo.name,
@@ -48618,7 +48648,10 @@ var AIChatPanel = React57.forwardRef(
             prevPromptRef.current = updated;
             setPrompt(updated);
           } catch (err) {
-            setError(err instanceof Error ? err.message : "Transcription failed");
+            voiceUsedRef.current = false;
+            setError(
+              err instanceof Error ? err.message : "Transcription failed"
+            );
           } finally {
             setIsTranscribing(false);
             setStatusText("");
@@ -48642,78 +48675,152 @@ var AIChatPanel = React57.forwardRef(
         }
       );
     }, []);
-    const handleSend = useCallback24(async (textOverride) => {
-      const text = (textOverride ?? prompt).trim();
-      const normalizedKey = resolveOpenRouterApiKey(apiKey);
-      if (!text || isLoading) {
-        return;
-      }
-      if (!normalizedKey) {
-        setError(
-          "No OpenRouter API key. Set VITE_APP_OPENROUTER_API_KEY in .env or pass the key via the `apiKey` prop."
-        );
-        return;
-      }
-      const hadVoice = voiceUsedRef.current;
-      voiceUsedRef.current = false;
-      if (onBeforeSend) {
-        const { allowed, error: creditError } = await onBeforeSend({
-          hasVoice: hadVoice
-        });
-        if (!allowed) {
-          setError(creditError || "Insufficient credits");
+    const handleSend = useCallback24(
+      async (textOverride) => {
+        const text = (textOverride ?? prompt).trim();
+        const normalizedKey = resolveOpenRouterApiKey(apiKey);
+        if (!text || isLoading || isSendPending) {
+          voiceUsedRef.current = false;
           return;
         }
-      }
-      const capturedFiles = [...attachedFiles];
-      const capturedWebSearch = webSearchEnabled;
-      const capturedFrameRef = frameRef;
-      const userMsg = {
-        id: genId(),
-        role: "user",
-        content: text,
-        timestamp: /* @__PURE__ */ new Date(),
-        attachments: capturedFiles.length > 0 ? capturedFiles.map((f) => ({
-          name: f.name,
-          type: f.type,
-          dataUrl: f.dataUrl
-        })) : void 0
-      };
-      const nextMessages = [...messages, userMsg];
-      setMessages(nextMessages);
-      setPrompt("");
-      prevPromptRef.current = "";
-      setAttachedFiles([]);
-      setFrameRef(null);
-      const controller = new AbortController();
-      abortControllerRef.current = controller;
-      setIsLoading(true);
-      setError(null);
-      setStatusText("Thinking\u2026");
-      if (!excalidrawAPI) {
-        try {
-          const reply = await callPlainChatAPI(
-            nextMessages,
-            normalizedKey,
-            controller.signal,
-            {
-              webSearchEnabled: capturedWebSearch,
-              attachments: capturedFiles
-            }
+        if (!normalizedKey) {
+          voiceUsedRef.current = false;
+          setError(
+            "No OpenRouter API key. Set VITE_APP_OPENROUTER_API_KEY in .env or pass the key via the `apiKey` prop."
           );
-          const assistantMsg = {
+          return;
+        }
+        const capturedFiles = [...attachedFiles];
+        const capturedWebSearch = webSearchEnabled;
+        const capturedFrameRef = frameRef;
+        const userMsg = {
+          id: genId(),
+          role: "user",
+          content: text,
+          timestamp: /* @__PURE__ */ new Date(),
+          attachments: capturedFiles.length > 0 ? capturedFiles.map((f) => ({
+            name: f.name,
+            type: f.type,
+            dataUrl: f.dataUrl
+          })) : void 0
+        };
+        const isFirstMessage = messages.length === 0;
+        const prevMessages = messages;
+        const nextMessages = [...messages, userMsg];
+        setMessages(nextMessages);
+        setPrompt("");
+        prevPromptRef.current = "";
+        setAttachedFiles([]);
+        setFrameRef(null);
+        setIsSendPending(true);
+        setError(null);
+        const hadVoice = voiceUsedRef.current;
+        voiceUsedRef.current = false;
+        if (onBeforeSend) {
+          const { allowed, error: creditError } = await onBeforeSend({
+            hasVoice: hadVoice
+          });
+          if (!allowed) {
+            setMessages(prevMessages);
+            setError(creditError || "Insufficient credits");
+            setIsSendPending(false);
+            return;
+          }
+        }
+        setIsSendPending(false);
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
+        setIsLoading(true);
+        setStatusText("Thinking\u2026");
+        if (!excalidrawAPI) {
+          try {
+            const reply = await callPlainChatAPI(
+              nextMessages,
+              normalizedKey,
+              controller.signal,
+              {
+                webSearchEnabled: capturedWebSearch,
+                attachments: capturedFiles
+              }
+            );
+            const assistantMsg = {
+              id: genId(),
+              role: "assistant",
+              content: reply,
+              timestamp: /* @__PURE__ */ new Date()
+            };
+            const updatedMessages = [...nextMessages, assistantMsg];
+            setMessages(updatedMessages);
+            if (onAfterSend) {
+              onAfterSend({ hasVoice: hadVoice });
+            }
+            if (isFirstMessage && onSessionCreate) {
+              onSessionCreate({
+                id: currentSessionId,
+                title: text.slice(0, 40)
+              });
+            }
+            if (onMessagesChange) {
+              onMessagesChange(updatedMessages, currentSessionId);
+            }
+          } catch (err) {
+            if (err instanceof Error && err.name !== "AbortError") {
+              setError(err.message);
+            }
+          } finally {
+            abortControllerRef.current = null;
+            setIsLoading(false);
+            setStatusText("");
+          }
+          return;
+        }
+        try {
+          const result = await runAgentLoop({
+            userMessages: nextMessages.map((m) => ({
+              role: m.role,
+              content: m.content
+            })),
+            elementContext: capturedFrameRef?.serialized,
+            frameScreenshot: capturedFrameRef?.screenshot,
+            fileAttachments: capturedFiles.length > 0 ? capturedFiles.map((f) => ({
+              name: f.name,
+              type: f.type,
+              dataUrl: f.dataUrl,
+              textContent: f.textContent
+            })) : void 0,
+            webSearchEnabled: capturedWebSearch,
+            apiKey: normalizedKey,
+            toolCtx: {
+              excalidrawAPI,
+              geminiApiKey: geminiApiKey || "",
+              signal: controller.signal
+            },
+            onUpdate: (update) => {
+              if (update.type !== "final") {
+                setStatusText(update.message);
+              }
+            },
+            signal: controller.signal,
+            onBeforeImageGen,
+            onAfterImageGen
+          });
+          const assistantMsgAgent = {
             id: genId(),
             role: "assistant",
-            content: reply,
-            timestamp: /* @__PURE__ */ new Date()
+            content: result.reply,
+            timestamp: /* @__PURE__ */ new Date(),
+            toolActions: result.toolActions.length > 0 ? result.toolActions : void 0
           };
-          const updatedMessages = [...nextMessages, assistantMsg];
-          setMessages(updatedMessages);
+          const updatedMessagesAgent = [...nextMessages, assistantMsgAgent];
+          setMessages(updatedMessagesAgent);
           if (onAfterSend) {
             onAfterSend({ hasVoice: hadVoice });
           }
+          if (isFirstMessage && onSessionCreate) {
+            onSessionCreate({ id: currentSessionId, title: text.slice(0, 40) });
+          }
           if (onMessagesChange) {
-            onMessagesChange(updatedMessages, currentSessionId);
+            onMessagesChange(updatedMessagesAgent, currentSessionId);
           }
         } catch (err) {
           if (err instanceof Error && err.name !== "AbortError") {
@@ -48724,86 +48831,49 @@ var AIChatPanel = React57.forwardRef(
           setIsLoading(false);
           setStatusText("");
         }
-        return;
-      }
-      try {
-        const result = await runAgentLoop({
-          userMessages: nextMessages.map((m) => ({
-            role: m.role,
-            content: m.content
-          })),
-          elementContext: capturedFrameRef?.serialized,
-          frameScreenshot: capturedFrameRef?.screenshot,
-          fileAttachments: capturedFiles.length > 0 ? capturedFiles.map((f) => ({
-            name: f.name,
-            type: f.type,
-            dataUrl: f.dataUrl,
-            textContent: f.textContent
-          })) : void 0,
-          webSearchEnabled: capturedWebSearch,
-          apiKey: normalizedKey,
-          toolCtx: {
-            excalidrawAPI,
-            geminiApiKey: geminiApiKey || "",
-            signal: controller.signal
-          },
-          onUpdate: (update) => {
-            if (update.type !== "final") {
-              setStatusText(update.message);
-            }
-          },
-          signal: controller.signal,
-          onBeforeImageGen,
-          onAfterImageGen
-        });
-        const assistantMsgAgent = {
-          id: genId(),
-          role: "assistant",
-          content: result.reply,
-          timestamp: /* @__PURE__ */ new Date(),
-          toolActions: result.toolActions.length > 0 ? result.toolActions : void 0
-        };
-        const updatedMessagesAgent = [...nextMessages, assistantMsgAgent];
-        setMessages(updatedMessagesAgent);
-        if (onAfterSend) {
-          onAfterSend({ hasVoice: hadVoice });
-        }
-        if (onMessagesChange) {
-          onMessagesChange(updatedMessagesAgent, currentSessionId);
-        }
-      } catch (err) {
-        if (err instanceof Error && err.name !== "AbortError") {
-          setError(err.message);
-        }
-      } finally {
-        abortControllerRef.current = null;
-        setIsLoading(false);
-        setStatusText("");
-      }
-    }, [
-      prompt,
-      isLoading,
-      messages,
-      apiKey,
-      excalidrawAPI,
-      geminiApiKey,
-      frameRef,
-      attachedFiles,
-      webSearchEnabled,
-      currentSessionId,
-      onBeforeSend,
-      onAfterSend,
-      onMessagesChange,
-      onBeforeImageGen,
-      onAfterImageGen
-    ]);
+      },
+      [
+        prompt,
+        isLoading,
+        isSendPending,
+        messages,
+        apiKey,
+        excalidrawAPI,
+        geminiApiKey,
+        frameRef,
+        attachedFiles,
+        webSearchEnabled,
+        currentSessionId,
+        onBeforeSend,
+        onAfterSend,
+        onMessagesChange,
+        onSessionCreate,
+        onBeforeImageGen,
+        onAfterImageGen
+      ]
+    );
     useImperativeHandle4(
       ref,
       () => ({
-        setMessages,
+        setMessages: (msgs, sessionId) => {
+          const targetSessionId = sessionId ?? currentSessionIdRef.current;
+          setSessions((prev) => {
+            const idx = prev.findIndex((s) => s.id === targetSessionId);
+            if (idx >= 0) {
+              const next = [...prev];
+              next[idx] = { ...next[idx], messages: msgs };
+              return next;
+            }
+            return prev;
+          });
+          if (targetSessionId === currentSessionIdRef.current) {
+            setMessages(msgs);
+            setIsLoadingSession(false);
+          }
+        },
         send: (text) => handleSend(text)
       }),
-      [setMessages, handleSend]
+      [handleSend]
     );
     const handleStop = useCallback24(() => {
       abortControllerRef.current?.abort();
@@ -48891,7 +48961,14 @@ var AIChatPanel = React57.forwardRef(
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx184("div", { className: "acp-messages-wrap", children: messages.length === 0 && !isLoading ? /* @__PURE__ */ jsxs100("div", { className: "acp-empty", children: [
+          /* @__PURE__ */ jsx184("div", { className: "acp-messages-wrap", children: isLoadingSession ? /* @__PURE__ */ jsx184("div", { className: "acp-empty", children: /* @__PURE__ */ jsxs100("div", { className: "acp-loading-session", children: [
+            /* @__PURE__ */ jsxs100("div", { className: "acp-loading-dots", children: [
+              /* @__PURE__ */ jsx184("span", {}),
+              /* @__PURE__ */ jsx184("span", {}),
+              /* @__PURE__ */ jsx184("span", {})
+            ] }),
+            /* @__PURE__ */ jsx184("span", { className: "acp-status-text", children: "Loading chat\u2026" })
+          ] }) }) : messages.length === 0 && !isLoading && !isSendPending ? /* @__PURE__ */ jsxs100("div", { className: "acp-empty", children: [
             /* @__PURE__ */ jsx184("div", { className: "acp-empty-icon", children: /* @__PURE__ */ jsx184(MessageSquare, { size: 22 }) }),
             /* @__PURE__ */ jsxs100("div", { children: [
               /* @__PURE__ */ jsx184("div", { className: "acp-empty-title", children: "AI Ad Designer" }),
@@ -49130,7 +49207,7 @@ var AIChatPanel = React57.forwardRef(
                         {
                           className: "acp-send-btn",
                           onClick: isLoading ? handleStop : () => handleSend(),
-                          disabled: !isLoading && !prompt.trim(),
+                          disabled: !isLoading && (!prompt.trim() || isSendPending),
                           title: isLoading ? "Stop" : "Send",
                           children: isLoading ? /* @__PURE__ */ jsx184("span", { className: "acp-stop-square" }) : /* @__PURE__ */ jsx184(ArrowUp3, { size: 16 })
                         }