@copilotkit/react-core 1.61.2 → 1.62.0

package/dist/v2/headless.cjs

@@ -144,6 +144,25 @@ const CopilotChatDefaultLabels = {
 	modalHeaderTitle: "CopilotKit Chat",
 	welcomeMessageText: "How can I help you today?"
 };
+/**
+* Mobile breakpoint below which the chat modal and the thread-list drawer are
+* mutually exclusive. At or above this width both surfaces may coexist. This
+* mirrors the `(max-width: 767px)` / `(min-width: 768px)` split already used by
+* CopilotChatInput and CopilotSidebarView.
+*/
+const MOBILE_MAX_WIDTH_PX = 767;
+/**
+* Reports whether the current viewport is in the mobile range (`<768px`), where
+* the chat modal and drawer must not be open simultaneously. SSR-safe and
+* defensive against environments without `matchMedia` (treated as desktop, so
+* no mutual-exclusion constraint is applied).
+*
+* @returns `true` when the viewport is mobile-width, `false` otherwise.
+*/
+function isMobileViewport() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+	return window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH_PX}px)`).matches;
+}
 const CopilotChatConfiguration = (0, react.createContext)(null);
 const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, hasExplicitThreadId, isModalDefaultOpen }) => {
 	const parentConfig = (0, react.useContext)(CopilotChatConfiguration);
@@ -154,12 +173,22 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 		...stableLabels
 	}), [stableLabels, parentConfig?.labels]);
 	const resolvedAgentId = agentId ?? parentConfig?.agentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
+	const threadIdPropIsAuthoritative = threadId !== void 0 && hasExplicitThreadId !== false;
+	const isThreadIdControlled = threadIdPropIsAuthoritative;
+	const [activeThreadOverride, setActiveThreadOverride] = (0, react.useState)(null);
 	const resolvedThreadId = (0, react.useMemo)(() => {
-		if (threadId) return threadId;
+		if (threadIdPropIsAuthoritative) return threadId;
+		if (activeThreadOverride) return activeThreadOverride.threadId;
 		if (parentConfig?.threadId) return parentConfig.threadId;
+		if (threadId) return threadId;
 		return (0, _copilotkit_shared.randomUUID)();
-	}, [threadId, parentConfig?.threadId]);
-	const resolvedHasExplicitThreadId = (hasExplicitThreadId !== void 0 ? hasExplicitThreadId : !!threadId) || !!parentConfig?.hasExplicitThreadId;
+	}, [
+		threadIdPropIsAuthoritative,
+		threadId,
+		parentConfig?.threadId,
+		activeThreadOverride
+	]);
+	const resolvedHasExplicitThreadId = (threadIdPropIsAuthoritative ? true : activeThreadOverride?.explicit ?? hasExplicitThreadId ?? false) || !!parentConfig?.hasExplicitThreadId;
 	const [internalModalOpen, setInternalModalOpen] = (0, react.useState)(isModalDefaultOpen ?? true);
 	const hasExplicitDefault = isModalDefaultOpen !== void 0;
 	const setAndSync = (0, react.useCallback)((open) => {
@@ -178,20 +207,113 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 	}, [parentConfig?.isModalOpen, hasExplicitDefault]);
 	const resolvedIsModalOpen = hasExplicitDefault ? internalModalOpen : parentConfig?.isModalOpen ?? internalModalOpen;
 	const resolvedSetModalOpen = hasExplicitDefault ? setAndSync : parentConfig?.setModalOpen ?? setInternalModalOpen;
+	const [ownDrawerOpen, setOwnDrawerOpen] = (0, react.useState)(false);
+	const [ownDrawerCount, setOwnDrawerCount] = (0, react.useState)(0);
+	const modalCloseRef = (0, react.useRef)(() => {});
+	modalCloseRef.current = resolvedSetModalOpen;
+	const registeredModalClosersRef = (0, react.useRef)([]);
+	const ownRegisterModalCloser = (0, react.useCallback)((closeModal) => {
+		registeredModalClosersRef.current.push(closeModal);
+		return () => {
+			registeredModalClosersRef.current = registeredModalClosersRef.current.filter((entry) => entry !== closeModal);
+		};
+	}, []);
+	const ownSetDrawerOpen = (0, react.useCallback)((open) => {
+		setOwnDrawerOpen(open);
+		if (open && isMobileViewport()) {
+			const registered = registeredModalClosersRef.current;
+			(registered.length > 0 ? registered[registered.length - 1] : modalCloseRef.current)(false);
+		}
+	}, []);
+	const ownRegisterDrawer = (0, react.useCallback)(() => {
+		setOwnDrawerCount((count) => count + 1);
+		return () => {
+			setOwnDrawerCount((count) => Math.max(0, count - 1));
+		};
+	}, []);
+	const resolvedDrawerOpen = parentConfig ? parentConfig.drawerOpen : ownDrawerOpen;
+	const resolvedSetDrawerOpen = parentConfig ? parentConfig.setDrawerOpen : ownSetDrawerOpen;
+	const resolvedDrawerRegistered = parentConfig ? parentConfig.drawerRegistered : ownDrawerCount > 0;
+	const resolvedRegisterDrawer = parentConfig ? parentConfig.registerDrawer : ownRegisterDrawer;
+	const resolvedRegisterModalCloser = parentConfig ? parentConfig.ɵregisterModalCloser : ownRegisterModalCloser;
+	(0, react.useEffect)(() => {
+		if (!hasExplicitDefault) return;
+		return resolvedRegisterModalCloser(resolvedSetModalOpen);
+	}, [
+		hasExplicitDefault,
+		resolvedRegisterModalCloser,
+		resolvedSetModalOpen
+	]);
+	const isThreadIdControlledRef = (0, react.useRef)(isThreadIdControlled);
+	isThreadIdControlledRef.current = isThreadIdControlled;
+	const ownSetActiveThreadId = (0, react.useCallback)((id, options) => {
+		setActiveThreadOverride({
+			threadId: id,
+			explicit: options?.explicit ?? true
+		});
+	}, []);
+	const ownStartNewThread = (0, react.useCallback)(() => {
+		setActiveThreadOverride({
+			threadId: (0, _copilotkit_shared.randomUUID)(),
+			explicit: false
+		});
+	}, []);
+	const parentSetActiveThreadId = parentConfig?.setActiveThreadId;
+	const parentStartNewThread = parentConfig?.startNewThread;
+	const resolvedSetActiveThreadId = (0, react.useCallback)((id, options) => {
+		if (isThreadIdControlledRef.current) {
+			console.warn("[CopilotKit] Ignoring setActiveThreadId(): threadId is controlled via the `threadId` prop on CopilotChatConfigurationProvider.");
+			return;
+		}
+		if (parentSetActiveThreadId) {
+			parentSetActiveThreadId(id, options);
+			return;
+		}
+		ownSetActiveThreadId(id, options);
+	}, [parentSetActiveThreadId, ownSetActiveThreadId]);
+	const resolvedStartNewThread = (0, react.useCallback)(() => {
+		if (isThreadIdControlledRef.current) {
+			console.warn("[CopilotKit] Ignoring startNewThread(): threadId is controlled via the `threadId` prop on CopilotChatConfigurationProvider.");
+			return;
+		}
+		if (parentStartNewThread) {
+			parentStartNewThread();
+			return;
+		}
+		ownStartNewThread();
+	}, [parentStartNewThread, ownStartNewThread]);
+	const setModalOpenWithDrawerExclusion = (0, react.useCallback)((open) => {
+		if (open && isMobileViewport()) resolvedSetDrawerOpen(false);
+		resolvedSetModalOpen(open);
+	}, [resolvedSetModalOpen, resolvedSetDrawerOpen]);
 	const configurationValue = (0, react.useMemo)(() => ({
 		labels: mergedLabels,
 		agentId: resolvedAgentId,
 		threadId: resolvedThreadId,
 		hasExplicitThreadId: resolvedHasExplicitThreadId,
 		isModalOpen: resolvedIsModalOpen,
-		setModalOpen: resolvedSetModalOpen
+		setModalOpen: setModalOpenWithDrawerExclusion,
+		drawerOpen: resolvedDrawerOpen,
+		setDrawerOpen: resolvedSetDrawerOpen,
+		drawerRegistered: resolvedDrawerRegistered,
+		registerDrawer: resolvedRegisterDrawer,
+		ɵregisterModalCloser: resolvedRegisterModalCloser,
+		setActiveThreadId: resolvedSetActiveThreadId,
+		startNewThread: resolvedStartNewThread
 	}), [
 		mergedLabels,
 		resolvedAgentId,
 		resolvedThreadId,
 		resolvedHasExplicitThreadId,
 		resolvedIsModalOpen,
-		resolvedSetModalOpen
+		setModalOpenWithDrawerExclusion,
+		resolvedDrawerOpen,
+		resolvedSetDrawerOpen,
+		resolvedDrawerRegistered,
+		resolvedRegisterDrawer,
+		resolvedRegisterModalCloser,
+		resolvedSetActiveThreadId,
+		resolvedStartNewThread
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatConfiguration.Provider, {
 		value: configurationValue,
@@ -1021,7 +1143,7 @@ function useThreadStoreSelector(store, selector) {
 	return (0, react.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
 		const subscription = store.select(selector).subscribe(onStoreChange);
 		return () => subscription.unsubscribe();
-	}, [store, selector]), () => selector(store.getState()));
+	}, [store, selector]), () => selector(store.getState()), () => selector(store.getServerState()));
 }
 /**
 * React hook for listing and managing Intelligence platform threads.
@@ -1064,7 +1186,7 @@ function useThreadStoreSelector(store, selector) {
 * }
 * ```
 */
-function useThreads({ agentId, includeArchived, limit }) {
+function useThreads({ agentId, includeArchived, limit, enabled = true }) {
 	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
 	const [store] = (0, react.useState)(() => (0, _copilotkit_core.ɵcreateThreadStore)({ fetch: globalThis.fetch }));
 	const coreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreads);
@@ -1081,6 +1203,7 @@ function useThreads({ agentId, includeArchived, limit }) {
 	const storeError = useThreadStoreSelector(store, _copilotkit_core.ɵselectThreadsError);
 	const hasMoreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectHasNextPage);
 	const isFetchingMoreThreads = useThreadStoreSelector(store, _copilotkit_core.ɵselectIsFetchingNextPage);
+	const isMutating = useThreadStoreSelector(store, _copilotkit_core.ɵselectIsMutating);
 	const headersKey = (0, react.useMemo)(() => {
 		return JSON.stringify(Object.entries(copilotkit.headers ?? {}).sort(([left], [right]) => left.localeCompare(right)));
 	}, [copilotkit.headers]);
@@ -1101,9 +1224,16 @@ function useThreads({ agentId, includeArchived, limit }) {
 		return /* @__PURE__ */ new Error("Thread mutations are not available on this CopilotKit runtime");
 	}, [threadMutationsSupported]);
 	const [hasDispatchedContext, setHasDispatchedContext] = (0, react.useState)(false);
-	const preConnectLoading = !!copilotkit.runtimeUrl && !threadEndpointsUnavailable && !hasDispatchedContext;
-	const isLoading = runtimeError || threadEndpointsError ? false : preConnectLoading || storeIsLoading;
-	const error = runtimeError ?? threadEndpointsError ?? storeError;
+	const preConnectLoading = enabled && !!copilotkit.runtimeUrl && !threadEndpointsUnavailable && !hasDispatchedContext;
+	const [configErrorDismissed, setConfigErrorDismissed] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		setConfigErrorDismissed(false);
+	}, [runtimeError, threadEndpointsError]);
+	const activeRuntimeError = configErrorDismissed ? null : runtimeError;
+	const activeThreadEndpointsError = configErrorDismissed ? null : threadEndpointsError;
+	const isLoading = activeRuntimeError || activeThreadEndpointsError ? false : preConnectLoading || storeIsLoading;
+	const error = activeRuntimeError ?? activeThreadEndpointsError ?? storeError;
+	const listError = storeError;
 	(0, react.useEffect)(() => {
 		store.start();
 		return () => {
@@ -1111,6 +1241,7 @@ function useThreads({ agentId, includeArchived, limit }) {
 		};
 	}, [store]);
 	(0, react.useEffect)(() => {
+		if (!enabled) return;
 		copilotkit.registerThreadStore(agentId, store);
 		return () => {
 			copilotkit.unregisterThreadStore(agentId);
@@ -1118,9 +1249,15 @@ function useThreads({ agentId, includeArchived, limit }) {
 	}, [
 		copilotkit,
 		agentId,
-		store
+		store,
+		enabled
 	]);
 	(0, react.useEffect)(() => {
+		if (!enabled) {
+			store.setContext(null);
+			setHasDispatchedContext(false);
+			return;
+		}
 		if (!copilotkit.runtimeUrl) {
 			store.setContext(null);
 			setHasDispatchedContext(false);
@@ -1144,6 +1281,7 @@ function useThreads({ agentId, includeArchived, limit }) {
 		setHasDispatchedContext(true);
 	}, [
 		store,
+		enabled,
 		copilotkit.runtimeUrl,
 		runtimeStatus,
 		headersKey,
@@ -1167,9 +1305,16 @@ function useThreads({ agentId, includeArchived, limit }) {
 		threads,
 		isLoading,
 		error,
+		listError,
 		hasMoreThreads,
 		isFetchingMoreThreads,
+		isMutating,
 		fetchMoreThreads: (0, react.useCallback)(() => store.fetchNextPage(), [store]),
+		refetchThreads: (0, react.useCallback)(() => store.refetchThreads(), [store]),
+		startNewThread: (0, react.useCallback)(() => {
+			setConfigErrorDismissed(true);
+			store.startNewThread();
+		}, [store]),
 		renameThread,
 		archiveThread,
 		unarchiveThread,