@copilotkitnext/react 0.0.11 → 0.0.12

package/dist/index.d.mts

@@ -37,7 +37,7 @@ interface CopilotChatConfigurationProviderProps {
     threadId: string;
 }
 declare const CopilotChatConfigurationProvider: React__default.FC<CopilotChatConfigurationProviderProps>;
-declare const useCopilotChatConfiguration: () => CopilotChatConfigurationValue;
+declare const useCopilotChatConfiguration: () => CopilotChatConfigurationValue | null;
 
 /** Finite-state machine for every recorder implementation */
 type AudioRecorderState = "idle" | "recording" | "processing";
@@ -255,11 +255,12 @@ declare namespace CopilotChatView {
     const Disclaimer: React__default.FC<React__default.HTMLAttributes<HTMLDivElement>>;
 }
 
-type CopilotChatProps = Omit<CopilotChatViewProps, "messages"> & {
+type CopilotChatProps = Omit<CopilotChatViewProps, "messages" | "isRunning"> & {
     agentId?: string;
     threadId?: string;
+    labels?: Partial<CopilotChatLabels>;
 };
-declare function CopilotChat({ agentId, threadId, ...props }: CopilotChatProps): react_jsx_runtime.JSX.Element;
+declare function CopilotChat({ agentId, threadId, labels, ...props }: CopilotChatProps): react_jsx_runtime.JSX.Element;
 
 declare const WildcardToolCallRender: ReactToolCallRender<any>;
 

package/dist/index.d.ts

@@ -37,7 +37,7 @@ interface CopilotChatConfigurationProviderProps {
     threadId: string;
 }
 declare const CopilotChatConfigurationProvider: React__default.FC<CopilotChatConfigurationProviderProps>;
-declare const useCopilotChatConfiguration: () => CopilotChatConfigurationValue;
+declare const useCopilotChatConfiguration: () => CopilotChatConfigurationValue | null;
 
 /** Finite-state machine for every recorder implementation */
 type AudioRecorderState = "idle" | "recording" | "processing";
@@ -255,11 +255,12 @@ declare namespace CopilotChatView {
     const Disclaimer: React__default.FC<React__default.HTMLAttributes<HTMLDivElement>>;
 }
 
-type CopilotChatProps = Omit<CopilotChatViewProps, "messages"> & {
+type CopilotChatProps = Omit<CopilotChatViewProps, "messages" | "isRunning"> & {
     agentId?: string;
     threadId?: string;
+    labels?: Partial<CopilotChatLabels>;
 };
-declare function CopilotChat({ agentId, threadId, ...props }: CopilotChatProps): react_jsx_runtime.JSX.Element;
+declare function CopilotChat({ agentId, threadId, labels, ...props }: CopilotChatProps): react_jsx_runtime.JSX.Element;
 
 declare const WildcardToolCallRender: ReactToolCallRender<any>;
 

package/dist/index.js

@@ -100,11 +100,6 @@ var CopilotChatConfigurationProvider = ({
 };
 var useCopilotChatConfiguration = () => {
   const configuration = (0, import_react.useContext)(CopilotChatConfiguration);
-  if (!configuration) {
-    throw new Error(
-      "useCopilotChatConfiguration must be used within CopilotChatConfigurationProvider"
-    );
-  }
   return configuration;
 };
 
@@ -734,7 +729,8 @@ function CopilotChatInput({
     }
   ) });
   CopilotChatInput2.ToolbarButton = ({ icon, labelKey, defaultClassName, className, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Tooltip, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Button,
@@ -787,7 +783,8 @@ function CopilotChatInput({
     }
   );
   CopilotChatInput2.ToolsButton = ({ className, toolsMenu, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     const renderMenuItems = (items) => {
       return items.map((item, index) => {
         if (item === "-") {
@@ -840,7 +837,8 @@ function CopilotChatInput({
     function TextArea2({ maxRows = 5, style, className, ...props }, ref) {
       const internalTextareaRef = (0, import_react4.useRef)(null);
       const [maxHeight, setMaxHeight] = (0, import_react4.useState)(0);
-      const { labels } = useCopilotChatConfiguration();
+      const config = useCopilotChatConfiguration();
+      const labels = config?.labels ?? CopilotChatDefaultLabels;
       (0, import_react4.useImperativeHandle)(
         ref,
         () => internalTextareaRef.current
@@ -1013,9 +1011,7 @@ var CopilotKitProvider = ({
         ...tool.agentId && { agentId: tool.agentId },
         handler: async () => {
           return new Promise((resolve) => {
-            console.warn(
-              `Human-in-the-loop tool '${tool.name}' called but no interactive handler is set up.`
-            );
+            console.warn(`Human-in-the-loop tool '${tool.name}' called but no interactive handler is set up.`);
             resolve(void 0);
           });
         }
@@ -1061,7 +1057,7 @@ var CopilotKitProvider = ({
       runtimeUrl: void 0,
       headers,
       properties,
-      agents,
+      agents__unsafe_dev_only: agents,
       tools: allTools
     };
     const copilotkit2 = new import_core.CopilotKitCore(config);
@@ -1097,7 +1093,7 @@ var CopilotKitProvider = ({
     copilotkit.setRuntimeUrl(runtimeUrl);
     copilotkit.setHeaders(headers);
     copilotkit.setProperties(properties);
-    copilotkit.setAgents(agents);
+    copilotkit.setAgents__unsafe_dev_only(agents);
   }, [runtimeUrl, headers, properties, agents]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     CopilotKitContext.Provider,
@@ -1133,10 +1129,12 @@ var useCopilotKit = () => {
 
 // src/hooks/use-render-tool-call.tsx
 var import_shared2 = require("@copilotkitnext/shared");
+var import_shared3 = require("@copilotkitnext/shared");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function useRenderToolCall() {
   const { currentRenderToolCalls, copilotkit } = useCopilotKit();
-  const { agentId } = useCopilotChatConfiguration();
+  const config = useCopilotChatConfiguration();
+  const agentId = config?.agentId ?? import_shared2.DEFAULT_AGENT_ID;
   const [executingToolCallIds, setExecutingToolCallIds] = (0, import_react6.useState)(() => /* @__PURE__ */ new Set());
   (0, import_react6.useEffect)(() => {
     const unsubscribe = copilotkit.subscribe({
@@ -1172,7 +1170,7 @@ function useRenderToolCall() {
         return null;
       }
       const RenderComponent = renderConfig.render;
-      const args = (0, import_shared2.partialJSONParse)(toolCall.function.arguments);
+      const args = (0, import_shared3.partialJSONParse)(toolCall.function.arguments);
       const toolName = toolCall.function.name;
       if (toolMessage) {
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1325,14 +1323,14 @@ function useHumanInTheLoop(tool) {
 
 // src/hooks/use-agent.tsx
 var import_react10 = require("react");
-var import_shared3 = require("@copilotkitnext/shared");
+var import_shared4 = require("@copilotkitnext/shared");
 var ALL_UPDATES = [
   "OnMessagesChanged" /* OnMessagesChanged */,
   "OnStateChanged" /* OnStateChanged */,
   "OnRunStatusChanged" /* OnRunStatusChanged */
 ];
 function useAgent({ agentId, updates } = {}) {
-  agentId ??= import_shared3.DEFAULT_AGENT_ID;
+  agentId ??= import_shared4.DEFAULT_AGENT_ID;
   const { copilotkit } = useCopilotKit();
   const [, forceUpdate] = (0, import_react10.useReducer)((x) => x + 1, 0);
   const updateFlags = (0, import_react10.useMemo)(
@@ -1572,7 +1570,8 @@ function CopilotChatAssistantMessage({
     );
   };
   const CodeBlock = ({ children, className, onClick, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     const [copied, setCopied] = (0, import_react13.useState)(false);
     const getCodeContent = (node) => {
       if (typeof node === "string") return node;
@@ -1685,7 +1684,8 @@ function CopilotChatAssistantMessage({
     ] });
   };
   CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     const [copied, setCopied] = (0, import_react13.useState)(false);
     const handleClick = (event) => {
       setCopied(true);
@@ -1706,7 +1706,8 @@ function CopilotChatAssistantMessage({
     );
   };
   CopilotChatAssistantMessage2.ThumbsUpButton = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
@@ -1717,7 +1718,8 @@ function CopilotChatAssistantMessage({
     );
   };
   CopilotChatAssistantMessage2.ThumbsDownButton = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
@@ -1728,7 +1730,8 @@ function CopilotChatAssistantMessage({
     );
   };
   CopilotChatAssistantMessage2.ReadAloudButton = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
@@ -1739,7 +1742,8 @@ function CopilotChatAssistantMessage({
     );
   };
   CopilotChatAssistantMessage2.RegenerateButton = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
@@ -1903,7 +1907,8 @@ function CopilotChatUserMessage({
     ] });
   };
   CopilotChatUserMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     const [copied, setCopied] = (0, import_react14.useState)(false);
     const handleClick = (event) => {
       setCopied(true);
@@ -1924,7 +1929,8 @@ function CopilotChatUserMessage({
     );
   };
   CopilotChatUserMessage2.EditButton = ({ className, title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       CopilotChatUserMessage2.ToolbarButton,
       {
@@ -2315,7 +2321,8 @@ function CopilotChatView({
     className,
     ...props
   }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
@@ -2332,23 +2339,32 @@ function CopilotChatView({
 var CopilotChatView_default = CopilotChatView;
 
 // src/components/chat/CopilotChat.tsx
-var import_shared4 = require("@copilotkitnext/shared");
+var import_shared5 = require("@copilotkitnext/shared");
 var import_react16 = require("react");
 var import_ts_deepmerge = require("ts-deepmerge");
 var import_client = require("@ag-ui/client");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function CopilotChat({
-  agentId = import_shared4.DEFAULT_AGENT_ID,
-  threadId,
-  ...props
-}) {
-  const { agent } = useAgent({ agentId });
+function CopilotChat({ agentId, threadId, labels, ...props }) {
+  const existingConfig = useCopilotChatConfiguration();
+  const resolvedAgentId = agentId ?? existingConfig?.agentId ?? import_shared5.DEFAULT_AGENT_ID;
+  const resolvedThreadId = (0, import_react16.useMemo)(
+    () => threadId ?? existingConfig?.threadId ?? (0, import_shared5.randomUUID)(),
+    [threadId, existingConfig?.threadId]
+  );
+  const resolvedLabels = (0, import_react16.useMemo)(
+    () => ({
+      ...CopilotChatDefaultLabels,
+      ...existingConfig?.labels || {},
+      ...labels || {}
+    }),
+    [existingConfig?.labels, labels]
+  );
+  const { agent } = useAgent({ agentId: resolvedAgentId });
   const { copilotkit } = useCopilotKit();
-  const resolvedThreadId = (0, import_react16.useMemo)(() => threadId ?? (0, import_shared4.randomUUID)(), [threadId]);
   (0, import_react16.useEffect)(() => {
     const connect = async (agent2) => {
       try {
-        await copilotkit.connectAgent({ agent: agent2, agentId });
+        await copilotkit.connectAgent({ agent: agent2, agentId: resolvedAgentId });
       } catch (error) {
         if (error instanceof import_client.AGUIConnectNotImplementedError) {
         } else {
@@ -2362,29 +2378,25 @@ function CopilotChat({
     }
     return () => {
     };
-  }, [resolvedThreadId, agent, copilotkit, agentId]);
+  }, [resolvedThreadId, agent, copilotkit, resolvedAgentId]);
   const onSubmitInput = (0, import_react16.useCallback)(
     async (value) => {
       agent?.addMessage({
-        id: (0, import_shared4.randomUUID)(),
+        id: (0, import_shared5.randomUUID)(),
         role: "user",
         content: value
       });
       if (agent) {
         try {
-          await copilotkit.runAgent({ agent, agentId });
+          await copilotkit.runAgent({ agent, agentId: resolvedAgentId });
         } catch (error) {
           console.error("CopilotChat: runAgent failed", error);
         }
       }
     },
-    [agent, copilotkit, agentId]
+    [agent, copilotkit, resolvedAgentId]
   );
-  const {
-    inputProps: providedInputProps,
-    messageView: providedMessageView,
-    ...restProps
-  } = props;
+  const { inputProps: providedInputProps, messageView: providedMessageView, ...restProps } = props;
   const mergedProps = (0, import_ts_deepmerge.merge)(
     {
       isRunning: agent?.isRunning ?? false
@@ -2394,26 +2406,19 @@ function CopilotChat({
       ...typeof providedMessageView === "string" ? { messageView: { className: providedMessageView } } : providedMessageView !== void 0 ? { messageView: providedMessageView } : {}
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    CopilotChatConfigurationProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CopilotChatConfigurationProvider, { agentId: resolvedAgentId, threadId: resolvedThreadId, labels: resolvedLabels, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    CopilotChatView,
     {
-      agentId,
-      threadId: resolvedThreadId,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        CopilotChatView,
-        {
-          ...{
-            messages: agent?.messages ?? [],
-            inputProps: {
-              onSubmitMessage: onSubmitInput,
-              ...providedInputProps
-            },
-            ...mergedProps
-          }
-        }
-      )
+      ...{
+        messages: agent?.messages ?? [],
+        inputProps: {
+          onSubmitMessage: onSubmitInput,
+          ...providedInputProps
+        },
+        ...mergedProps
+      }
     }
-  );
+  ) });
 }
 
 // src/types/defineToolCallRender.ts