@copilotkitnext/react 0.0.16 → 0.0.17

package/dist/index.mjs

@@ -12,7 +12,7 @@ import {
   useMemo as useMemo2
 } from "react";
 import { twMerge as twMerge3 } from "tailwind-merge";
-import { Plus, Mic, ArrowUp, X, Check } from "lucide-react";
+import { Plus, Mic, ArrowUp, X, Check, Square } from "lucide-react";
 
 // src/providers/CopilotChatConfigurationProvider.tsx
 import { createContext, useContext, useMemo, useState } from "react";
@@ -507,6 +507,8 @@ var SLASH_MENU_ITEM_HEIGHT_PX = 40;
 function CopilotChatInput({
   mode = "input",
   onSubmitMessage,
+  onStop,
+  isRunning = false,
   onStartTranscribe,
   onCancelTranscribe,
   onFinishTranscribe,
@@ -755,7 +757,11 @@ function CopilotChatInput({
     }
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      send();
+      if (isProcessing) {
+        onStop?.();
+      } else {
+        send();
+      }
     }
   };
   const send = () => {
@@ -786,12 +792,23 @@ function CopilotChatInput({
       isExpanded ? "px-5" : "pr-5"
     )
   });
+  const isProcessing = mode !== "transcribe" && isRunning;
+  const canSend = resolvedValue.trim().length > 0 && !!onSubmitMessage;
+  const canStop = !!onStop;
+  const handleSendButtonClick = () => {
+    if (isProcessing) {
+      onStop?.();
+      return;
+    }
+    send();
+  };
   const BoundAudioRecorder = renderSlot(audioRecorder, CopilotChatAudioRecorder, {
     ref: audioRecorderRef
   });
   const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {
-    onClick: send,
-    disabled: !resolvedValue.trim() || !onSubmitMessage
+    onClick: handleSendButtonClick,
+    disabled: isProcessing ? !canStop : !canSend,
+    children: isProcessing && canStop ? /* @__PURE__ */ jsx6(Square, { className: "size-[18px] fill-current" }) : void 0
   });
   const BoundStartTranscribeButton = renderSlot(startTranscribeButton, CopilotChatInput.StartTranscribeButton, {
     onClick: onStartTranscribe
@@ -817,6 +834,8 @@ function CopilotChatInput({
       finishTranscribeButton: BoundFinishTranscribeButton,
       addMenuButton: BoundAddMenuButton,
       onSubmitMessage,
+      onStop,
+      isRunning,
       onStartTranscribe,
       onCancelTranscribe,
       onFinishTranscribe,
@@ -1131,7 +1150,7 @@ function CopilotChatInput({
   );
 }
 ((CopilotChatInput2) => {
-  CopilotChatInput2.SendButton = ({ className, ...props }) => /* @__PURE__ */ jsx6("div", { className: "mr-[10px]", children: /* @__PURE__ */ jsx6(
+  CopilotChatInput2.SendButton = ({ className, children, ...props }) => /* @__PURE__ */ jsx6("div", { className: "mr-[10px]", children: /* @__PURE__ */ jsx6(
     Button,
     {
       type: "button",
@@ -1139,7 +1158,7 @@ function CopilotChatInput({
       size: "chatInputToolbarIcon",
       className,
       ...props,
-      children: /* @__PURE__ */ jsx6(ArrowUp, { className: "size-[18px]" })
+      children: children ?? /* @__PURE__ */ jsx6(ArrowUp, { className: "size-[18px]" })
     }
   ) });
   CopilotChatInput2.ToolbarButton = ({ icon, labelKey, defaultClassName, className, ...props }) => {
@@ -3203,6 +3222,21 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
+  const stopCurrentRun = useCallback6(() => {
+    if (!agent) {
+      return;
+    }
+    try {
+      copilotkit.stopAgent({ agent });
+    } catch (error) {
+      console.error("CopilotChat: stopAgent failed", error);
+      try {
+        agent.abortRun();
+      } catch (abortError) {
+        console.error("CopilotChat: abortRun fallback failed", abortError);
+      }
+    }
+  }, [agent, copilotkit]);
   const mergedProps = merge(
     {
       isRunning: agent?.isRunning ?? false,
@@ -3215,12 +3249,20 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
       ...typeof providedMessageView === "string" ? { messageView: { className: providedMessageView } } : providedMessageView !== void 0 ? { messageView: providedMessageView } : {}
     }
   );
+  const providedStopHandler = providedInputProps?.onStop;
+  const hasMessages = (agent?.messages?.length ?? 0) > 0;
+  const shouldAllowStop = (agent?.isRunning ?? false) && hasMessages;
+  const effectiveStopHandler = shouldAllowStop ? providedStopHandler ?? stopCurrentRun : providedStopHandler;
+  const finalInputProps = {
+    ...providedInputProps,
+    onSubmitMessage: onSubmitInput,
+    onStop: effectiveStopHandler,
+    isRunning: agent?.isRunning ?? false
+  };
+  finalInputProps.mode = agent?.isRunning ? "processing" : finalInputProps.mode ?? "input";
   const finalProps = merge(mergedProps, {
     messages: agent?.messages ?? [],
-    inputProps: {
-      onSubmitMessage: onSubmitInput,
-      ...providedInputProps
-    }
+    inputProps: finalInputProps
   });
   const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
   return /* @__PURE__ */ jsx18(