@copilotkitnext/react 0.0.16 → 0.0.17

package/dist/index.d.mts

@@ -93,6 +93,8 @@ type CopilotChatInputRestProps = {
     toolsMenu?: (ToolsMenuItem | "-")[];
     autoFocus?: boolean;
     onSubmitMessage?: (value: string) => void;
+    onStop?: () => void;
+    isRunning?: boolean;
     onStartTranscribe?: () => void;
     onCancelTranscribe?: () => void;
     onFinishTranscribe?: () => void;
@@ -107,7 +109,7 @@ type CopilotChatInputChildrenArgs = CopilotChatInputBaseProps extends {
 type CopilotChatInputProps = Omit<CopilotChatInputBaseProps, "children"> & {
     children?: (props: CopilotChatInputChildrenArgs) => React__default.ReactNode;
 };
-declare function CopilotChatInput({ mode, onSubmitMessage, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onAddFile, onChange, value, toolsMenu, autoFocus, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, children, className, ...props }: CopilotChatInputProps): react_jsx_runtime.JSX.Element;
+declare function CopilotChatInput({ mode, onSubmitMessage, onStop, isRunning, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onAddFile, onChange, value, toolsMenu, autoFocus, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, children, className, ...props }: CopilotChatInputProps): react_jsx_runtime.JSX.Element;
 declare namespace CopilotChatInput {
     const SendButton: React__default.FC<React__default.ButtonHTMLAttributes<HTMLButtonElement>>;
     const ToolbarButton: React__default.FC<React__default.ButtonHTMLAttributes<HTMLButtonElement> & {

package/dist/index.d.ts

@@ -93,6 +93,8 @@ type CopilotChatInputRestProps = {
     toolsMenu?: (ToolsMenuItem | "-")[];
     autoFocus?: boolean;
     onSubmitMessage?: (value: string) => void;
+    onStop?: () => void;
+    isRunning?: boolean;
     onStartTranscribe?: () => void;
     onCancelTranscribe?: () => void;
     onFinishTranscribe?: () => void;
@@ -107,7 +109,7 @@ type CopilotChatInputChildrenArgs = CopilotChatInputBaseProps extends {
 type CopilotChatInputProps = Omit<CopilotChatInputBaseProps, "children"> & {
     children?: (props: CopilotChatInputChildrenArgs) => React__default.ReactNode;
 };
-declare function CopilotChatInput({ mode, onSubmitMessage, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onAddFile, onChange, value, toolsMenu, autoFocus, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, children, className, ...props }: CopilotChatInputProps): react_jsx_runtime.JSX.Element;
+declare function CopilotChatInput({ mode, onSubmitMessage, onStop, isRunning, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onAddFile, onChange, value, toolsMenu, autoFocus, textArea, sendButton, startTranscribeButton, cancelTranscribeButton, finishTranscribeButton, addMenuButton, audioRecorder, children, className, ...props }: CopilotChatInputProps): react_jsx_runtime.JSX.Element;
 declare namespace CopilotChatInput {
     const SendButton: React__default.FC<React__default.ButtonHTMLAttributes<HTMLButtonElement>>;
     const ToolbarButton: React__default.FC<React__default.ButtonHTMLAttributes<HTMLButtonElement> & {

package/dist/index.js

@@ -567,6 +567,8 @@ var SLASH_MENU_ITEM_HEIGHT_PX = 40;
 function CopilotChatInput({
   mode = "input",
   onSubmitMessage,
+  onStop,
+  isRunning = false,
   onStartTranscribe,
   onCancelTranscribe,
   onFinishTranscribe,
@@ -815,7 +817,11 @@ function CopilotChatInput({
     }
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      send();
+      if (isProcessing) {
+        onStop?.();
+      } else {
+        send();
+      }
     }
   };
   const send = () => {
@@ -846,12 +852,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__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Square, { className: "size-[18px] fill-current" }) : void 0
   });
   const BoundStartTranscribeButton = renderSlot(startTranscribeButton, CopilotChatInput.StartTranscribeButton, {
     onClick: onStartTranscribe
@@ -877,6 +894,8 @@ function CopilotChatInput({
       finishTranscribeButton: BoundFinishTranscribeButton,
       addMenuButton: BoundAddMenuButton,
       onSubmitMessage,
+      onStop,
+      isRunning,
       onStartTranscribe,
       onCancelTranscribe,
       onFinishTranscribe,
@@ -1191,7 +1210,7 @@ function CopilotChatInput({
   );
 }
 ((CopilotChatInput2) => {
-  CopilotChatInput2.SendButton = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mr-[10px]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  CopilotChatInput2.SendButton = ({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mr-[10px]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Button,
     {
       type: "button",
@@ -1199,7 +1218,7 @@ function CopilotChatInput({
       size: "chatInputToolbarIcon",
       className,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ArrowUp, { className: "size-[18px]" })
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ArrowUp, { className: "size-[18px]" })
     }
   ) });
   CopilotChatInput2.ToolbarButton = ({ icon, labelKey, defaultClassName, className, ...props }) => {
@@ -3244,6 +3263,21 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
+  const stopCurrentRun = (0, import_react22.useCallback)(() => {
+    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 = (0, import_ts_deepmerge.merge)(
     {
       isRunning: agent?.isRunning ?? false,
@@ -3256,12 +3290,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 = (0, import_ts_deepmerge.merge)(mergedProps, {
     messages: agent?.messages ?? [],
-    inputProps: {
-      onSubmitMessage: onSubmitInput,
-      ...providedInputProps
-    }
+    inputProps: finalInputProps
   });
   const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(