@copilotkit/react-ui 1.10.7-next.0 → 1.50.0-beta.0

package/dist/components/chat/Modal.js

@@ -1028,14 +1028,30 @@ var import_react_core5 = require("@copilotkit/react-core");
 
 // src/components/chat/messages/UserMessage.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var getTextContent = (content) => {
+  if (typeof content === "undefined") {
+    return void 0;
+  }
+  if (typeof content === "string") {
+    return content;
+  }
+  return content.map((part) => {
+    if (part.type === "text") {
+      return part.text;
+    }
+    return void 0;
+  }).filter((value) => typeof value === "string" && value.length > 0).join(" ").trim() || void 0;
+};
 var UserMessage = (props) => {
   const { message, ImageRenderer: ImageRenderer2 } = props;
-  const isImageMessage = message && "image" in message && message.image;
+  const isImageMessage = message && "image" in message && Boolean(message.image);
   if (isImageMessage) {
     const imageMessage = message;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageRenderer2, { image: imageMessage.image, content: imageMessage.content }) });
+    const content2 = getTextContent(imageMessage == null ? void 0 : imageMessage.content);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageRenderer2, { image: imageMessage.image, content: content2 }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: message == null ? void 0 : message.content });
+  const content = getTextContent(message == null ? void 0 : message.content);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: content });
 };
 
 // src/components/chat/Markdown.tsx
@@ -1714,6 +1730,7 @@ function RenderMessage(_a) {
   var _a2;
   const {
     message,
+    messages,
     inProgress,
     index,
     isCurrentMessage,
@@ -1744,6 +1761,7 @@ function RenderMessage(_a) {
           subComponent: (_a2 = message.generativeUI) == null ? void 0 : _a2.call(message),
           rawData: message,
           message,
+          messages,
           isLoading: inProgress && isCurrentMessage && !message.content,
           isGenerating: inProgress && isCurrentMessage && !!message.content,
           isCurrentMessage,
@@ -1765,6 +1783,7 @@ var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var LegacyRenderMessage = ({
   message,
+  messages,
   inProgress,
   index,
   isCurrentMessage,
@@ -1793,6 +1812,7 @@ var LegacyRenderMessage = ({
       RenderTextMessage,
       {
         message,
+        messages,
         inProgress,
         index,
         isCurrentMessage,
@@ -1810,6 +1830,7 @@ var LegacyRenderMessage = ({
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       RenderActionExecutionMessage,
       {
+        messages,
         message,
         inProgress,
         index,
@@ -1824,6 +1845,7 @@ var LegacyRenderMessage = ({
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       RenderAgentStateMessage,
       {
+        messages,
         message,
         inProgress,
         index,
@@ -1837,6 +1859,7 @@ var LegacyRenderMessage = ({
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       RenderResultMessage,
       {
+        messages,
         message,
         inProgress,
         index,
@@ -1850,6 +1873,7 @@ var LegacyRenderMessage = ({
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       RenderImageMessage,
       {
+        messages,
         message,
         inProgress,
         index,
@@ -1862,6 +1886,7 @@ var LegacyRenderMessage = ({
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     RenderMessage,
     {
+      messages,
       message,
       inProgress,
       index,
@@ -1902,7 +1927,8 @@ var Messages = ({
   RenderResultMessage,
   RenderImageMessage
 }) => {
-  const { labels } = useChatContext();
+  var _a;
+  const { labels, icons } = useChatContext();
   const { messages: visibleMessages, interrupt } = (0, import_react_core5.useCopilotChatInternal)();
   const initialMessages = (0, import_react10.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
   const messages = [...initialMessages, ...visibleMessages];
@@ -1932,6 +1958,7 @@ var Messages = ({
     ]
   );
   const MessageRenderer = hasLegacyProps ? (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LegacyRenderMessage, __spreadProps(__spreadValues({}, props), { legacyProps })) : RenderMessage2;
+  const LoadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: icons.activityIcon });
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "copilotKitMessagesContainer", children: [
       messages.map((message, index) => {
@@ -1940,6 +1967,7 @@ var Messages = ({
           MessageRenderer,
           {
             message,
+            messages,
             inProgress,
             index,
             isCurrentMessage,
@@ -1956,6 +1984,7 @@ var Messages = ({
           index
         );
       }),
+      ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) === "user" && inProgress && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingIcon, {}),
       interrupt,
       chatError && ErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ErrorMessage, { error: chatError, isCurrentMessage: true })
     ] }),
@@ -2249,12 +2278,12 @@ var MAX_NEWLINES = 6;
 var Input = ({
   inProgress,
   onSend,
-  isVisible = false,
+  chatReady = true,
   onStop,
   onUpload,
   hideStopButton = false
 }) => {
-  var _a, _b;
+  var _a;
   const context = useChatContext();
   const copilotContext = (0, import_react_core7.useCopilotContext)();
   const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
@@ -2284,14 +2313,16 @@ var Input = ({
     inProgress
   });
   const isInProgress = inProgress || pushToTalkState === "transcribing";
-  const buttonIcon = isInProgress && !hideStopButton ? context.icons.stopIcon : context.icons.sendIcon;
+  const { buttonIcon, buttonAlt } = (0, import_react14.useMemo)(() => {
+    if (!chatReady)
+      return { buttonIcon: context.icons.spinnerIcon, buttonAlt: "Loading" };
+    return isInProgress && !hideStopButton ? { buttonIcon: context.icons.stopIcon, buttonAlt: "Stop" } : { buttonIcon: context.icons.sendIcon, buttonAlt: "Send" };
+  }, [isInProgress, chatReady, hideStopButton, context.icons.stopIcon, context.icons.sendIcon]);
   const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
+  const { interrupt } = (0, import_react_core7.useCopilotChatInternal)();
   const canSend = (0, import_react14.useMemo)(() => {
-    var _a2;
-    const interruptEvent = (_a2 = copilotContext.langGraphInterruptAction) == null ? void 0 : _a2.event;
-    const interruptInProgress = (interruptEvent == null ? void 0 : interruptEvent.name) === "LangGraphInterruptEvent" && !(interruptEvent == null ? void 0 : interruptEvent.response);
-    return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interruptInProgress;
-  }, [(_b = copilotContext.langGraphInterruptAction) == null ? void 0 : _b.event, isInProgress, text, pushToTalkState]);
+    return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interrupt;
+  }, [interrupt, isInProgress, text, pushToTalkState]);
   const canStop = (0, import_react14.useMemo)(() => {
     return isInProgress && !hideStopButton;
   }, [isInProgress, hideStopButton]);
@@ -2338,6 +2369,7 @@ var Input = ({
             "data-copilotkit-in-progress": inProgress,
             "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
             className: "copilotKitInputControlButton",
+            "aria-label": buttonAlt,
             children: buttonIcon
           }
         )
@@ -2351,8 +2383,6 @@ var Input = ({
 var import_react15 = __toESM(require("react"));
 var import_react_core9 = require("@copilotkit/react-core");
 var import_shared3 = require("@copilotkit/shared");
-var import_shared4 = require("@copilotkit/shared");
-var import_react_core10 = require("@copilotkit/react-core");
 
 // src/components/chat/ImageUploadQueue.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -2456,18 +2486,25 @@ function Suggestion({ title, onClick, partial, className }) {
 
 // src/components/chat/Suggestions.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function Suggestions({ suggestions, onSuggestionClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "suggestions", children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    Suggestion,
-    {
-      title: suggestion.title,
-      message: suggestion.message,
-      partial: suggestion.partial,
-      className: suggestion.className,
-      onClick: () => onSuggestionClick(suggestion.message)
-    },
-    index
-  )) });
+function Suggestions({
+  suggestions,
+  onSuggestionClick,
+  isLoading
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "suggestions", children: suggestions.map((suggestion, index) => {
+    var _a, _b;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Suggestion,
+      {
+        title: suggestion.title,
+        message: suggestion.message,
+        partial: (_b = (_a = suggestion.isLoading) != null ? _a : suggestion.partial) != null ? _b : isLoading,
+        className: suggestion.className,
+        onClick: () => onSuggestionClick(suggestion.message)
+      },
+      index
+    );
+  }) });
 }
 
 // src/components/chat/Chat.tsx
@@ -2667,16 +2704,12 @@ function CopilotChat({
     sendMessage,
     stopGeneration,
     reloadMessages,
-    suggestions: currentSuggestions
-  } = useCopilotChatLogic(
-    suggestions,
-    makeSystemMessage,
-    disableSystemMessage,
-    onInProgress,
-    onSubmitMessage,
-    onStopGeneration,
-    onReloadMessages
-  );
+    suggestions: currentSuggestions,
+    isLoadingSuggestions,
+    agent
+  } = (0, import_react_core9.useCopilotChatInternal)({
+    suggestions
+  });
   const prevIsLoading = (0, import_react15.useRef)(isLoading);
   (0, import_react15.useEffect)(() => {
     if (prevIsLoading.current !== isLoading) {
@@ -2695,7 +2728,11 @@ function CopilotChat({
       fileInputRef.current.value = "";
     }
     triggerObservabilityHook("onMessageSent", text);
-    return sendMessage(text, images);
+    return sendMessage({
+      id: (0, import_shared3.randomUUID)(),
+      content: text,
+      role: "user"
+    });
   };
   const chatContext = import_react15.default.useContext(ChatContext);
   const isVisible = chatContext ? chatContext.open : true;
@@ -2798,7 +2835,8 @@ function CopilotChat({
           RenderSuggestionsList,
           {
             onSuggestionClick: handleSendMessage,
-            suggestions: currentSuggestions
+            suggestions: currentSuggestions,
+            isLoading: isLoadingSuggestions
           }
         )
       }
@@ -2821,6 +2859,7 @@ function CopilotChat({
       Input2,
       {
         inProgress: isLoading,
+        chatReady: Boolean(agent),
         onSend: handleSendMessage,
         isVisible,
         onStop: stopGeneration,
@@ -2846,243 +2885,10 @@ function WrappedCopilotChat({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children });
 }
-var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, disableSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
-  var _a;
-  const {
-    messages,
-    sendMessage,
-    setMessages,
-    reloadMessages: defaultReloadMessages,
-    stopGeneration: defaultStopGeneration,
-    runChatCompletion,
-    isLoading,
-    suggestions,
-    setSuggestions,
-    generateSuggestions,
-    resetSuggestions: resetSuggestionsFromHook,
-    isLoadingSuggestions
-  } = (0, import_react_core9.useCopilotChatInternal)({
-    makeSystemMessage,
-    disableSystemMessage
-  });
-  const generalContext = (0, import_react_core9.useCopilotContext)();
-  const messagesContext = (0, import_react_core9.useCopilotMessagesContext)();
-  const { actions } = generalContext;
-  const [suggestionsFailed, setSuggestionsFailed] = (0, import_react15.useState)(false);
-  const hasGeneratedInitialSuggestions = (0, import_react15.useRef)(false);
-  (0, import_react15.useEffect)(() => {
-    if (Array.isArray(chatSuggestions)) {
-      setSuggestions(chatSuggestions);
-      hasGeneratedInitialSuggestions.current = true;
-    }
-  }, [JSON.stringify(chatSuggestions), setSuggestions]);
-  const generateSuggestionsWithErrorHandling = (0, import_react15.useCallback)(
-    (context) => __async(void 0, null, function* () {
-      try {
-        yield generateSuggestions();
-      } catch (error) {
-        console.error("Failed to generate suggestions:", error);
-        setSuggestionsFailed(true);
-      }
-    }),
-    [generateSuggestions]
-  );
-  (0, import_react15.useEffect)(() => {
-    if (chatSuggestions !== "auto" || isLoadingSuggestions || suggestionsFailed) {
-      return;
-    }
-    if (isLoading) {
-      return;
-    }
-    if (Object.keys(generalContext.chatSuggestionConfiguration).length === 0) {
-      return;
-    }
-    if (messages.length === 0 && !hasGeneratedInitialSuggestions.current) {
-      hasGeneratedInitialSuggestions.current = true;
-      generateSuggestionsWithErrorHandling("initial");
-      return;
-    }
-    if (messages.length > 0 && suggestions.length === 0) {
-      generateSuggestionsWithErrorHandling("post-message");
-      return;
-    }
-  }, [
-    chatSuggestions,
-    isLoadingSuggestions,
-    suggestionsFailed,
-    messages.length,
-    isLoading,
-    suggestions.length,
-    Object.keys(generalContext.chatSuggestionConfiguration).join(","),
-    // Use stable string instead of object reference
-    generateSuggestionsWithErrorHandling
-  ]);
-  (0, import_react15.useEffect)(() => {
-    if (chatSuggestions !== "auto") {
-      hasGeneratedInitialSuggestions.current = false;
-      setSuggestionsFailed(false);
-    }
-  }, [chatSuggestions]);
-  const stableContext = (0, import_react15.useMemo)(
-    () => __spreadValues(__spreadValues({}, generalContext), messagesContext),
-    [
-      // Only include stable dependencies
-      generalContext.actions,
-      messagesContext.messages.length,
-      generalContext.isLoading
-    ]
-  );
-  const resetSuggestions = (0, import_react15.useCallback)(() => {
-    resetSuggestionsFromHook();
-    setSuggestionsFailed(false);
-    hasGeneratedInitialSuggestions.current = false;
-  }, [resetSuggestionsFromHook]);
-  (0, import_react15.useEffect)(() => {
-    onInProgress == null ? void 0 : onInProgress(isLoading);
-  }, [onInProgress, isLoading]);
-  const safelySendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {
-    const images = imagesToUse || [];
-    if (chatSuggestions === "auto" || chatSuggestions === "manual") {
-      setSuggestions([]);
-    }
-    let firstMessage = null;
-    if (messageContent.trim().length > 0) {
-      const textMessage = {
-        id: (0, import_shared4.randomId)(),
-        role: "user",
-        content: messageContent
-      };
-      if (onSubmitMessage) {
-        try {
-          yield onSubmitMessage(messageContent);
-        } catch (error) {
-          console.error("Error in onSubmitMessage:", error);
-        }
-      }
-      yield sendMessage(textMessage, {
-        followUp: images.length === 0,
-        clearSuggestions: chatSuggestions === "auto" || chatSuggestions === "manual"
-      });
-      if (!firstMessage) {
-        firstMessage = textMessage;
-      }
-    }
-    if (images.length > 0) {
-      for (let i = 0; i < images.length; i++) {
-        const imageMessage = {
-          id: (0, import_shared4.randomId)(),
-          role: "user",
-          image: {
-            format: images[i].contentType.replace("image/", ""),
-            bytes: images[i].bytes
-          }
-        };
-        yield sendMessage(imageMessage, { followUp: i === images.length - 1 });
-        if (!firstMessage) {
-          firstMessage = imageMessage;
-        }
-      }
-    }
-    if (!firstMessage) {
-      return { role: "user", content: "", id: (0, import_shared4.randomId)() };
-    }
-    return firstMessage;
-  });
-  const currentAgentName = (_a = generalContext.agentSession) == null ? void 0 : _a.agentName;
-  const restartCurrentAgent = (hint) => __async(void 0, null, function* () {
-    if (generalContext.agentSession) {
-      generalContext.setAgentSession(__spreadProps(__spreadValues({}, generalContext.agentSession), {
-        nodeName: void 0,
-        threadId: void 0
-      }));
-      generalContext.setCoagentStates((prevAgentStates) => {
-        return __spreadProps(__spreadValues({}, prevAgentStates), {
-          [generalContext.agentSession.agentName]: __spreadProps(__spreadValues({}, prevAgentStates[generalContext.agentSession.agentName]), {
-            threadId: void 0,
-            nodeName: void 0,
-            runId: void 0
-          })
-        });
-      });
-    }
-  });
-  const runCurrentAgent = (hint) => __async(void 0, null, function* () {
-    if (generalContext.agentSession) {
-      yield (0, import_react_core10.runAgent)(
-        generalContext.agentSession.agentName,
-        stableContext,
-        messagesContext.messages,
-        sendMessage,
-        runChatCompletion
-      );
-    }
-  });
-  const stopCurrentAgent = () => {
-    if (generalContext.agentSession) {
-      (0, import_react_core10.stopAgent)(generalContext.agentSession.agentName, stableContext);
-    }
-  };
-  const setCurrentAgentState = (state) => {
-    if (generalContext.agentSession) {
-      generalContext.setCoagentStates((prevAgentStates) => {
-        return __spreadProps(__spreadValues({}, prevAgentStates), {
-          [generalContext.agentSession.agentName]: {
-            state
-          }
-        });
-      });
-    }
-  };
-  function stopGeneration() {
-    setSuggestions([]);
-    if (onStopGeneration) {
-      onStopGeneration({
-        messages,
-        setMessages,
-        stopGeneration: defaultStopGeneration,
-        currentAgentName,
-        restartCurrentAgent,
-        stopCurrentAgent,
-        runCurrentAgent,
-        setCurrentAgentState
-      });
-    } else {
-      defaultStopGeneration();
-    }
-  }
-  function reloadMessages(messageId) {
-    if (onReloadMessages) {
-      onReloadMessages({
-        messages,
-        setMessages,
-        stopGeneration: defaultStopGeneration,
-        currentAgentName,
-        restartCurrentAgent,
-        stopCurrentAgent,
-        runCurrentAgent,
-        setCurrentAgentState,
-        messageId
-      });
-    } else {
-      defaultReloadMessages(messageId);
-    }
-  }
-  return {
-    messages,
-    isLoading,
-    suggestions,
-    sendMessage: safelySendMessage,
-    stopGeneration,
-    reloadMessages,
-    resetSuggestions,
-    context: stableContext,
-    actions
-  };
-};
 
 // src/components/chat/Modal.tsx
-var import_react_core11 = require("@copilotkit/react-core");
-var import_shared5 = require("@copilotkit/shared");
+var import_react_core10 = require("@copilotkit/react-core");
+var import_shared4 = require("@copilotkit/shared");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var CopilotModalInner = (_a) => {
   var _b = _a, {
@@ -3108,7 +2914,7 @@ var CopilotModalInner = (_a) => {
     "Button",
     "Header"
   ]);
-  const { copilotApiConfig, setBannerError } = (0, import_react_core11.useCopilotContext)();
+  const { copilotApiConfig, setBannerError } = (0, import_react_core10.useCopilotContext)();
   const { publicApiKey } = copilotApiConfig;
   const triggerObservabilityHook = (0, import_react16.useCallback)(
     (hookName, ...args) => {
@@ -3117,14 +2923,14 @@ var CopilotModalInner = (_a) => {
       }
       if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !publicApiKey) {
         setBannerError(
-          new import_shared5.CopilotKitError({
+          new import_shared4.CopilotKitError({
             message: "observabilityHooks requires a publicApiKey to function.",
-            code: import_shared5.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
-            severity: import_shared5.Severity.CRITICAL,
-            visibility: import_shared5.ErrorVisibility.BANNER
+            code: import_shared4.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: import_shared4.Severity.CRITICAL,
+            visibility: import_shared4.ErrorVisibility.BANNER
           })
         );
-        import_shared5.styledConsole.publicApiKeyRequired("observabilityHooks");
+        import_shared4.styledConsole.publicApiKeyRequired("observabilityHooks");
       }
     },
     [publicApiKey, observabilityHooks, setBannerError]