@copilotkit/react-core 1.3.6 → 1.3.7-fix-chat-interactions-rerenders.0

package/dist/index.js

@@ -83,6 +83,7 @@ var src_exports = {};
 __export(src_exports, {
   CopilotContext: () => CopilotContext,
   CopilotKit: () => CopilotKit,
+  CopilotMessagesContext: () => CopilotMessagesContext,
   CopilotTask: () => CopilotTask,
   defaultCopilotContextCategories: () => defaultCopilotContextCategories,
   extract: () => extract,
@@ -91,13 +92,14 @@ __export(src_exports, {
   useCopilotAction: () => useCopilotAction,
   useCopilotChat: () => useCopilotChat,
   useCopilotContext: () => useCopilotContext,
+  useCopilotMessagesContext: () => useCopilotMessagesContext,
   useCopilotReadable: () => useCopilotReadable,
   useMakeCopilotDocumentReadable: () => useMakeCopilotDocumentReadable
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/components/copilot-provider/copilotkit.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/context/copilot-context.tsx
 var import_react = __toESM(require("react"));
@@ -119,8 +121,6 @@ var emptyCopilotContext = {
   },
   getFunctionCallHandler: () => returnAndThrowInDebug(() => __async(void 0, null, function* () {
   })),
-  messages: [],
-  setMessages: () => returnAndThrowInDebug([]),
   isLoading: false,
   setIsLoading: () => returnAndThrowInDebug(false),
   chatInstructions: "",
@@ -367,61 +367,96 @@ function setsHaveIntersection2(setA, setB) {
   return false;
 }
 
-// src/components/copilot-provider/copilotkit.tsx
+// src/components/copilot-provider/copilot-messages.tsx
+var import_react5 = require("react");
+
+// src/context/copilot-messages-context.tsx
+var import_react4 = __toESM(require("react"));
+var emptyCopilotContext2 = {
+  messages: [],
+  setMessages: () => []
+};
+var CopilotMessagesContext = import_react4.default.createContext(emptyCopilotContext2);
+function useCopilotMessagesContext() {
+  const context = import_react4.default.useContext(CopilotMessagesContext);
+  if (context === emptyCopilotContext2) {
+    throw new Error(
+      "A messages consuming component was not wrapped with `<CopilotMessages> {...} </CopilotMessages>`"
+    );
+  }
+  return context;
+}
+
+// src/components/copilot-provider/copilot-messages.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+function CopilotMessages(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  const [messages, setMessages] = (0, import_react5.useState)([]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CopilotMessagesContext.Provider,
+    {
+      value: {
+        messages,
+        setMessages
+      },
+      children
+    }
+  );
+}
+
+// src/components/copilot-provider/copilotkit.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function CopilotKit(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  var _a2, _b2;
   if (!props.runtimeUrl && !props.publicApiKey) {
     throw new Error(
       "Please provide either a runtimeUrl or a publicApiKey to the CopilotKit component."
     );
   }
   const chatApiEndpoint = props.runtimeUrl || import_shared3.COPILOT_CLOUD_CHAT_URL;
-  const [actions, setActions] = (0, import_react4.useState)({});
-  const [coAgentStateRenders, setCoAgentStateRenders] = (0, import_react4.useState)({});
-  const chatComponentsCache = (0, import_react4.useRef)({
+  const [actions, setActions] = (0, import_react6.useState)({});
+  const [coAgentStateRenders, setCoAgentStateRenders] = (0, import_react6.useState)({});
+  const chatComponentsCache = (0, import_react6.useRef)({
     actions: {},
     coAgentStateRenders: {}
   });
   const { addElement, removeElement, printTree } = use_tree_default();
-  const [messages, setMessages] = (0, import_react4.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
-  const [chatInstructions, setChatInstructions] = (0, import_react4.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+  const [chatInstructions, setChatInstructions] = (0, import_react6.useState)("");
   const {
     addElement: addDocument,
     removeElement: removeDocument,
     allElements: allDocuments
   } = use_flat_category_store_default();
-  const setAction = (0, import_react4.useCallback)((id, action) => {
+  const setAction = (0, import_react6.useCallback)((id, action) => {
     setActions((prevPoints) => {
       return __spreadProps(__spreadValues({}, prevPoints), {
         [id]: action
       });
     });
   }, []);
-  const removeAction = (0, import_react4.useCallback)((id) => {
+  const removeAction = (0, import_react6.useCallback)((id) => {
     setActions((prevPoints) => {
       const newPoints = __spreadValues({}, prevPoints);
       delete newPoints[id];
       return newPoints;
     });
   }, []);
-  const setCoAgentStateRender = (0, import_react4.useCallback)((id, stateRender) => {
+  const setCoAgentStateRender = (0, import_react6.useCallback)((id, stateRender) => {
     setCoAgentStateRenders((prevPoints) => {
       return __spreadProps(__spreadValues({}, prevPoints), {
         [id]: stateRender
       });
     });
   }, []);
-  const removeCoAgentStateRender = (0, import_react4.useCallback)((id) => {
+  const removeCoAgentStateRender = (0, import_react6.useCallback)((id) => {
     setCoAgentStateRenders((prevPoints) => {
       const newPoints = __spreadValues({}, prevPoints);
       delete newPoints[id];
       return newPoints;
     });
   }, []);
-  const getContextString = (0, import_react4.useCallback)(
+  const getContextString = (0, import_react6.useCallback)(
     (documents, categories) => {
       const documentsString = documents.map((document) => {
         return `${document.name} (${document.sourceApplication}):
@@ -434,37 +469,37 @@ ${nonDocumentStrings}`;
     },
     [printTree]
   );
-  const addContext = (0, import_react4.useCallback)(
+  const addContext = (0, import_react6.useCallback)(
     (context, parentId, categories = defaultCopilotContextCategories) => {
       return addElement(context, categories, parentId);
     },
     [addElement]
   );
-  const removeContext = (0, import_react4.useCallback)(
+  const removeContext = (0, import_react6.useCallback)(
     (id) => {
       removeElement(id);
     },
     [removeElement]
   );
-  const getFunctionCallHandler = (0, import_react4.useCallback)(
+  const getFunctionCallHandler = (0, import_react6.useCallback)(
     (customEntryPoints) => {
       return entryPointsToFunctionCallHandler(Object.values(customEntryPoints || actions));
     },
     [actions]
   );
-  const getDocumentsContext = (0, import_react4.useCallback)(
+  const getDocumentsContext = (0, import_react6.useCallback)(
     (categories) => {
       return allDocuments(categories);
     },
     [allDocuments]
   );
-  const addDocumentContext = (0, import_react4.useCallback)(
+  const addDocumentContext = (0, import_react6.useCallback)(
     (documentPointer, categories = defaultCopilotContextCategories) => {
       return addDocument(documentPointer, categories);
     },
     [addDocument]
   );
-  const removeDocumentContext = (0, import_react4.useCallback)(
+  const removeDocumentContext = (0, import_react6.useCallback)(
     (documentId) => {
       removeDocument(documentId);
     },
@@ -477,49 +512,60 @@ ${nonDocumentStrings}`;
       );
     }
   }
-  let cloud = void 0;
-  if (props.publicApiKey) {
-    cloud = {
-      guardrails: {
-        input: {
-          restrictToTopic: {
-            enabled: props.cloudRestrictToTopic ? true : false,
-            validTopics: ((_a2 = props.cloudRestrictToTopic) == null ? void 0 : _a2.validTopics) || [],
-            invalidTopics: ((_b2 = props.cloudRestrictToTopic) == null ? void 0 : _b2.invalidTopics) || []
+  const copilotApiConfig = (0, import_react6.useMemo)(() => {
+    var _a2, _b2;
+    let cloud = void 0;
+    if (props.publicApiKey) {
+      cloud = {
+        guardrails: {
+          input: {
+            restrictToTopic: {
+              enabled: props.cloudRestrictToTopic ? true : false,
+              validTopics: ((_a2 = props.cloudRestrictToTopic) == null ? void 0 : _a2.validTopics) || [],
+              invalidTopics: ((_b2 = props.cloudRestrictToTopic) == null ? void 0 : _b2.invalidTopics) || []
+            }
           }
         }
-      }
-    };
-  }
-  const copilotApiConfig = __spreadProps(__spreadValues({
-    publicApiKey: props.publicApiKey
-  }, cloud ? { cloud } : {}), {
-    chatApiEndpoint,
-    headers: props.headers || {},
-    properties: props.properties || {},
-    transcribeAudioUrl: props.transcribeAudioUrl,
-    textToSpeechUrl: props.textToSpeechUrl,
-    credentials: props.credentials
-  });
-  const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = (0, import_react4.useState)({});
+      };
+    }
+    return __spreadProps(__spreadValues({
+      publicApiKey: props.publicApiKey
+    }, cloud ? { cloud } : {}), {
+      chatApiEndpoint,
+      headers: props.headers || {},
+      properties: props.properties || {},
+      transcribeAudioUrl: props.transcribeAudioUrl,
+      textToSpeechUrl: props.textToSpeechUrl,
+      credentials: props.credentials
+    });
+  }, [
+    props.publicApiKey,
+    props.headers,
+    props.properties,
+    props.transcribeAudioUrl,
+    props.textToSpeechUrl,
+    props.credentials,
+    props.cloudRestrictToTopic
+  ]);
+  const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = (0, import_react6.useState)({});
   const addChatSuggestionConfiguration = (id, suggestion) => {
     setChatSuggestionConfiguration((prev) => __spreadProps(__spreadValues({}, prev), { [id]: suggestion }));
   };
   const removeChatSuggestionConfiguration = (id) => {
     setChatSuggestionConfiguration((prev) => {
-      const _a3 = prev, { [id]: _ } = _a3, rest = __objRest(_a3, [__restKey(id)]);
+      const _a2 = prev, { [id]: _ } = _a2, rest = __objRest(_a2, [__restKey(id)]);
       return rest;
     });
   };
-  const [coagentStates, setCoagentStates] = (0, import_react4.useState)({});
+  const [coagentStates, setCoagentStates] = (0, import_react6.useState)({});
   let initialAgentSession = null;
   if (props.agent) {
     initialAgentSession = {
       agentName: props.agent
     };
   }
-  const [agentSession, setAgentSession] = (0, import_react4.useState)(initialAgentSession);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const [agentSession, setAgentSession] = (0, import_react6.useState)(initialAgentSession);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     CopilotContext.Provider,
     {
       value: {
@@ -538,8 +584,6 @@ ${nonDocumentStrings}`;
         addDocumentContext,
         removeDocumentContext,
         copilotApiConfig,
-        messages,
-        setMessages,
         isLoading,
         setIsLoading,
         chatSuggestionConfiguration,
@@ -553,7 +597,7 @@ ${nonDocumentStrings}`;
         agentSession,
         setAgentSession
       },
-      children
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopilotMessages, { children })
     }
   );
 }
@@ -585,11 +629,11 @@ function entryPointsToFunctionCallHandler(actions) {
 }
 
 // src/hooks/use-copilot-chat.ts
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
 
 // src/hooks/use-chat.ts
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_shared4 = require("@copilotkit/shared");
 var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
 function useChat(options) {
@@ -609,13 +653,13 @@ function useChat(options) {
     agentSession,
     setAgentSession
   } = options;
-  const abortControllerRef = (0, import_react5.useRef)();
-  const threadIdRef = (0, import_react5.useRef)(null);
-  const runIdRef = (0, import_react5.useRef)(null);
-  const runChatCompletionRef = (0, import_react5.useRef)();
-  const coagentStatesRef = (0, import_react5.useRef)(coagentStates);
+  const abortControllerRef = (0, import_react7.useRef)();
+  const threadIdRef = (0, import_react7.useRef)(null);
+  const runIdRef = (0, import_react7.useRef)(null);
+  const runChatCompletionRef = (0, import_react7.useRef)();
+  const coagentStatesRef = (0, import_react7.useRef)(coagentStates);
   coagentStatesRef.current = coagentStates;
-  const agentSessionRef = (0, import_react5.useRef)(agentSession);
+  const agentSessionRef = (0, import_react7.useRef)(agentSession);
   agentSessionRef.current = agentSession;
   const publicApiKey = copilotConfig.publicApiKey;
   const headers = __spreadValues(__spreadValues({}, copilotConfig.headers || {}), publicApiKey ? { [import_shared4.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {});
@@ -842,8 +886,6 @@ function useCopilotChat(_a = {}) {
     getContextString,
     getFunctionCallHandler,
     copilotApiConfig,
-    messages,
-    setMessages,
     isLoading,
     setIsLoading,
     chatInstructions,
@@ -854,14 +896,15 @@ function useCopilotChat(_a = {}) {
     agentSession,
     setAgentSession
   } = useCopilotContext();
+  const { messages, setMessages } = useCopilotMessagesContext();
   const latestGetContextString = useUpdatedRef(getContextString);
-  const deleteMessage = (0, import_react6.useCallback)(
+  const deleteMessage = (0, import_react8.useCallback)(
     (messageId) => {
       setMessages((prev) => prev.filter((message) => message.id !== messageId));
     },
     [setMessages]
   );
-  const makeSystemMessageCallback = (0, import_react6.useCallback)(() => {
+  const makeSystemMessageCallback = (0, import_react8.useCallback)(() => {
     const systemMessageMaker = makeSystemMessage2 || defaultSystemMessage;
     const contextString = latestGetContextString.current([], defaultCopilotContextCategories);
     return new import_runtime_client_gql2.TextMessage({
@@ -869,7 +912,7 @@ function useCopilotChat(_a = {}) {
       role: import_runtime_client_gql2.Role.System
     });
   }, [getContextString, makeSystemMessage2, chatInstructions]);
-  const onCoAgentStateRender = (0, import_react6.useCallback)(
+  const onCoAgentStateRender = (0, import_react8.useCallback)(
     (args) => __async(this, null, function* () {
       var _a2;
       const { name, nodeName, state } = args;
@@ -904,29 +947,29 @@ function useCopilotChat(_a = {}) {
     setAgentSession
   }));
   const latestAppend = useUpdatedRef(append);
-  const latestAppendFunc = (0, import_react6.useCallback)(
+  const latestAppendFunc = (0, import_react8.useCallback)(
     (message) => {
       return latestAppend.current(message);
     },
     [latestAppend]
   );
   const latestReload = useUpdatedRef(reload);
-  const latestReloadFunc = (0, import_react6.useCallback)(() => {
+  const latestReloadFunc = (0, import_react8.useCallback)(() => {
     return latestReload.current();
   }, [latestReload]);
   const latestStop = useUpdatedRef(stop);
-  const latestStopFunc = (0, import_react6.useCallback)(() => {
+  const latestStopFunc = (0, import_react8.useCallback)(() => {
     return latestStop.current();
   }, [latestStop]);
   const latestDelete = useUpdatedRef(deleteMessage);
-  const latestDeleteFunc = (0, import_react6.useCallback)(
+  const latestDeleteFunc = (0, import_react8.useCallback)(
     (messageId) => {
       return latestDelete.current(messageId);
     },
     [latestDelete]
   );
   const latestSetMessages = useUpdatedRef(setMessages);
-  const latestSetMessagesFunc = (0, import_react6.useCallback)(
+  const latestSetMessagesFunc = (0, import_react8.useCallback)(
     (messages2) => {
       return latestSetMessages.current(messages2);
     },
@@ -943,8 +986,8 @@ function useCopilotChat(_a = {}) {
   };
 }
 function useUpdatedRef(value) {
-  const ref = (0, import_react6.useRef)(value);
-  (0, import_react6.useEffect)(() => {
+  const ref = (0, import_react8.useRef)(value);
+  (0, import_react8.useEffect)(() => {
     ref.current = value;
   }, [value]);
   return ref;
@@ -974,12 +1017,12 @@ ${additionalInstructions}` : "");
 }
 
 // src/hooks/use-copilot-action.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_shared5 = require("@copilotkit/shared");
 function useCopilotAction(action, dependencies) {
   const { setAction, removeAction, actions, chatComponentsCache } = useCopilotContext();
-  const idRef = (0, import_react7.useRef)((0, import_shared5.randomId)());
-  const renderAndWaitRef = (0, import_react7.useRef)(null);
+  const idRef = (0, import_react9.useRef)((0, import_shared5.randomId)());
+  const renderAndWaitRef = (0, import_react9.useRef)(null);
   action = __spreadValues({}, action);
   if (action.renderAndWait) {
     const renderAndWait = action.renderAndWait;
@@ -1014,7 +1057,7 @@ function useCopilotAction(action, dependencies) {
       }
     }
   }
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     setAction(idRef.current, action);
     if (chatComponentsCache.current !== null && action.render !== void 0) {
       chatComponentsCache.current.actions[action.name] = action.render;
@@ -1039,7 +1082,7 @@ function useCopilotAction(action, dependencies) {
 }
 
 // src/hooks/use-coagent-state-render.ts
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_shared6 = require("@copilotkit/shared");
 function useCoAgentStateRender(action, dependencies) {
   const {
@@ -1047,8 +1090,8 @@ function useCoAgentStateRender(action, dependencies) {
     removeCoAgentStateRender,
     coAgentStateRenders,
     chatComponentsCache
-  } = (0, import_react8.useContext)(CopilotContext);
-  const idRef = (0, import_react8.useRef)((0, import_shared6.randomId)());
+  } = (0, import_react10.useContext)(CopilotContext);
+  const idRef = (0, import_react10.useRef)((0, import_shared6.randomId)());
   const key = `${action.name}-${action.nodeName || "global"}`;
   if (dependencies === void 0) {
     if (coAgentStateRenders[idRef.current]) {
@@ -1060,7 +1103,7 @@ function useCoAgentStateRender(action, dependencies) {
       }
     }
   }
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setCoAgentStateRender(idRef.current, action);
     if (chatComponentsCache.current !== null && action.render !== void 0) {
       chatComponentsCache.current.coAgentStateRenders[key] = action.render;
@@ -1080,11 +1123,11 @@ function useCoAgentStateRender(action, dependencies) {
 }
 
 // src/hooks/use-make-copilot-document-readable.ts
-var import_react9 = require("react");
+var import_react11 = require("react");
 function useMakeCopilotDocumentReadable(document, categories, dependencies = []) {
   const { addDocumentContext, removeDocumentContext } = useCopilotContext();
-  const idRef = (0, import_react9.useRef)();
-  (0, import_react9.useEffect)(() => {
+  const idRef = (0, import_react11.useRef)();
+  (0, import_react11.useEffect)(() => {
     const id = addDocumentContext(document, categories);
     idRef.current = id;
     return () => {
@@ -1095,16 +1138,16 @@ function useMakeCopilotDocumentReadable(document, categories, dependencies = [])
 }
 
 // src/hooks/use-copilot-readable.ts
-var import_react10 = require("react");
+var import_react12 = require("react");
 function convertToJSON(description, value) {
   return `${description}: ${typeof value === "string" ? value : JSON.stringify(value)}`;
 }
 function useCopilotReadable({ description, value, parentId, categories, convert }, dependencies) {
   const { addContext, removeContext } = useCopilotContext();
-  const idRef = (0, import_react10.useRef)();
+  const idRef = (0, import_react12.useRef)();
   convert = convert || convertToJSON;
   const information = convert(description, value);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const id = addContext(information, parentId, categories);
     idRef.current = id;
     return () => {
@@ -1115,7 +1158,7 @@ function useCopilotReadable({ description, value, parentId, categories, convert
 }
 
 // src/hooks/use-coagent.ts
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
 function useCoAgent(options) {
   const isExternalStateManagement = (options2) => {
@@ -1125,7 +1168,9 @@ function useCoAgent(options) {
   const isInternalStateManagementWithInitial = (options2) => {
     return "initialState" in options2;
   };
-  const context = useCopilotContext();
+  const generalContext = useCopilotContext();
+  const messagesContext = useCopilotMessagesContext();
+  const context = __spreadValues(__spreadValues({}, generalContext), messagesContext);
   const { coagentStates, setCoagentStates } = context;
   const { appendMessage } = useCopilotChat();
   const getCoagentState = (coagentStates2, name2) => {
@@ -1156,7 +1201,7 @@ function useCoAgent(options) {
   };
   const coagentState = getCoagentState(coagentStates, name);
   const state = isExternalStateManagement(options) ? options.state : coagentState.state;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (isExternalStateManagement(options)) {
       setState(options.state);
     } else if (coagentStates[name] === void 0) {
@@ -1456,6 +1501,7 @@ Any additional messages provided are for providing context only and should not b
 0 && (module.exports = {
   CopilotContext,
   CopilotKit,
+  CopilotMessagesContext,
   CopilotTask,
   defaultCopilotContextCategories,
   extract,
@@ -1464,6 +1510,7 @@ Any additional messages provided are for providing context only and should not b
   useCopilotAction,
   useCopilotChat,
   useCopilotContext,
+  useCopilotMessagesContext,
   useCopilotReadable,
   useMakeCopilotDocumentReadable
 });