@copilotkit/react-core 1.83.0 → 2.0.0-rc.0

package/dist/{MarkdownSurfaces-FF5za2kU.cjs → MarkdownSurfaces-C2XZISKn.cjs}

@@ -25,17 +25,55 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
+let _copilotkit_core = require("@copilotkit/core");
 let react = require("react");
 react = __toESM(react);
-let _copilotkit_core = require("@copilotkit/core");
-let _copilotkit_shared = require("@copilotkit/shared");
-let _copilotkit_react_core_v2_context = require("@copilotkit/react-core/v2/context");
 let react_jsx_runtime = require("react/jsx-runtime");
-let streamdown = require("streamdown");
+let _copilotkit_markdown_renderer_react = require("@copilotkit/markdown-renderer/react");
+let _copilotkit_markdown_renderer = require("@copilotkit/markdown-renderer");
+let tailwind_merge = require("tailwind-merge");
+let _copilotkit_shared = require("@copilotkit/shared");
+let _copilotkit_react_core_context = require("@copilotkit/react-core/context");
 let zod = require("zod");
 let zod_to_json_schema = require("zod-to-json-schema");
 
-//#region src/v2/lib/shallow-stable-ref.ts
+//#region src/components/chat/StreamingMarkdownDefaultRenderer.tsx
+const defaultNodeRenderers = (0, _copilotkit_markdown_renderer_react.createStreamingMarkdownNodeRenderers)({ codeBlock: ({ node }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+	className: "cpk:overflow-x-auto cpk:rounded-lg cpk:bg-muted cpk:text-foreground cpk:p-3",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+		"data-code-info": node.info ?? void 0,
+		children: node.text
+	})
+}) });
+/**
+* react-core's built-in default markdown renderer — a thin adapter over
+* `@copilotkit/markdown-renderer`'s streaming renderer. Maps the pluggable
+* renderer contract (`{ content, isStreaming, className }`) onto the streaming
+* renderer for streaming-safe incremental rendering + per-token animation.
+* Still overridable via the slot/provider pluggable interface.
+*/
+function StreamingMarkdownDefaultRenderer({ content, isStreaming, className, nodeRenderers, caret, options, onLinkClick, onCitationClick }) {
+	const mergedNodeRenderers = (0, react.useMemo)(() => nodeRenderers ? (0, _copilotkit_markdown_renderer_react.createStreamingMarkdownNodeRenderers)({
+		...defaultNodeRenderers,
+		...nodeRenderers
+	}) : defaultNodeRenderers, [nodeRenderers]);
+	if (!content) return null;
+	(0, _copilotkit_markdown_renderer.warnUnsupportedRichSyntaxOnce)(content);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_markdown_renderer_react.StreamingMarkdownRenderer, {
+		className,
+		isComplete: !isStreaming,
+		caret: caret ?? !!isStreaming,
+		nodeRenderers: mergedNodeRenderers,
+		options,
+		onLinkClick,
+		onCitationClick,
+		children: content
+	});
+}
+StreamingMarkdownDefaultRenderer.displayName = "StreamingMarkdownDefaultRenderer";
+
+//#endregion
+//#region src/lib/shallow-stable-ref.ts
 /**
 * Shallow equality comparison for objects.
 */
@@ -77,7 +115,7 @@ function useShallowStableRef(value) {
 }
 
 //#endregion
-//#region src/v2/providers/CopilotChatConfigurationProvider.tsx
+//#region src/providers/CopilotChatConfigurationProvider.tsx
 const CopilotChatDefaultLabels = {
 	chatInputPlaceholder: "Type a message...",
 	chatInputToolbarStartTranscribeButtonLabel: "Transcribe",
@@ -151,7 +189,7 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 		...parentConfig?.labels,
 		...stableLabels
 	}), [stableLabels, parentConfig?.labels]);
-	const providerAgentId = (0, _copilotkit_react_core_v2_context.useDefaultAgentId)();
+	const providerAgentId = (0, _copilotkit_react_core_context.useDefaultAgentId)();
 	const resolvedAgentId = agentId ?? parentConfig?.agentId ?? providerAgentId ?? _copilotkit_shared.DEFAULT_AGENT_ID;
 	const threadIdPropIsAuthoritative = threadId !== void 0 && hasExplicitThreadId !== false;
 	const isThreadIdControlled = threadIdPropIsAuthoritative;
@@ -168,7 +206,7 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 		parentConfig?.threadId,
 		activeThreadOverride
 	]);
-	const copilotkit = (0, react.useContext)(_copilotkit_react_core_v2_context.CopilotKitContext)?.copilotkit;
+	const copilotkit = (0, react.useContext)(_copilotkit_react_core_context.CopilotKitContext)?.copilotkit;
 	const openThreadRef = (0, react.useRef)(null);
 	const latestThreadIdRef = (0, react.useRef)(resolvedThreadId);
 	latestThreadIdRef.current = resolvedThreadId;
@@ -380,26 +418,85 @@ const ControlledModalOpenScope = ({ children, open, onOpenChange }) => {
 ControlledModalOpenScope.displayName = "ControlledModalOpenScope";
 
 //#endregion
-//#region src/v2/hooks/useKatexStyles.ts
-let injected = false;
+//#region src/lib/slots.tsx
 /**
-* Dynamically injects KaTeX CSS at runtime to avoid the Next.js
-* "Global CSS cannot be imported from within node_modules" build error.
-*
-* Uses a singleton flag so the stylesheet is only injected once.
+* Check if a value is a React component type (function, class, forwardRef, memo, etc.)
 */
-function useKatexStyles() {
-	(0, react.useEffect)(() => {
-		if (injected || typeof document === "undefined") return;
-		injected = true;
-		import("katex/dist/katex.min.css").catch(() => {
-			console.warn("[CopilotKit] Failed to load katex styles — math content may render without formatting");
+function isReactComponentType(value) {
+	if (typeof value === "function") return true;
+	if (value && typeof value === "object" && "$$typeof" in value && !react.default.isValidElement(value)) return true;
+	return false;
+}
+/**
+* Internal function to render a slot value as a React element (non-memoized).
+*/
+function renderSlotElement(slot, DefaultComponent, props) {
+	if (typeof slot === "string") {
+		const existingClassName = props.className;
+		return react.default.createElement(DefaultComponent, {
+			...props,
+			className: (0, tailwind_merge.twMerge)(existingClassName, slot)
 		});
-	}, []);
+	}
+	if (isReactComponentType(slot)) return react.default.createElement(slot, props);
+	if (slot && typeof slot === "object" && !react.default.isValidElement(slot)) return react.default.createElement(DefaultComponent, {
+		...props,
+		...slot
+	});
+	return react.default.createElement(DefaultComponent, props);
+}
+/**
+* Internal memoized wrapper component for renderSlot.
+* Uses forwardRef to support ref forwarding.
+*/
+const MemoizedSlotWrapper = react.default.memo(react.default.forwardRef(function MemoizedSlotWrapper(props, ref) {
+	const { $slot, $component, ...rest } = props;
+	return renderSlotElement($slot, $component, ref !== null ? {
+		...rest,
+		ref
+	} : rest);
+}), (prev, next) => {
+	if (prev.$slot !== next.$slot) return false;
+	if (prev.$component !== next.$component) return false;
+	const { $slot: _ps, $component: _pc, ...prevRest } = prev;
+	const { $slot: _ns, $component: _nc, ...nextRest } = next;
+	return shallowEqual(prevRest, nextRest);
+});
+/**
+* Renders a slot value as a memoized React element.
+* Automatically prevents unnecessary re-renders using shallow prop comparison.
+* Supports ref forwarding.
+*
+* @example
+* renderSlot(customInput, CopilotChatInput, { onSubmit: handleSubmit })
+*/
+function renderSlot(slot, DefaultComponent, props) {
+	return react.default.createElement(MemoizedSlotWrapper, {
+		...props,
+		$slot: slot,
+		$component: DefaultComponent
+	});
+}
+
+//#endregion
+//#region src/providers/MarkdownRendererContext.tsx
+const MarkdownRendererContext = (0, react.createContext)(void 0);
+const MarkdownRendererProvider = ({ renderer, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownRendererContext.Provider, {
+	value: renderer,
+	children
+});
+/**
+* The markdown renderer set at the provider level, or `undefined` when none was
+* supplied. Message components fall back to the built-in
+* `StreamingMarkdownDefaultRenderer` (via `CopilotChatAssistantMessage.MarkdownRenderer`)
+* when this is `undefined`.
+*/
+function useMarkdownRenderer() {
+	return (0, react.useContext)(MarkdownRendererContext);
 }
 
 //#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
+//#region src/types/defineToolCallRenderer.ts
 function defineToolCallRenderer(def) {
 	const argsSchema = def.name === "*" && !def.args ? zod.z.any() : def.args;
 	return {
@@ -412,7 +509,7 @@ function defineToolCallRenderer(def) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/json-schema.ts
+//#region src/generative-ui/json-schema.ts
 /**
 * JSON Schema for a Standard Schema (zod v3 via zod-to-json-schema),
 * inlined, no `$schema`. A prop marked by `child()` or `childList()`
@@ -424,7 +521,7 @@ function toJsonSchema(schema) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/catalog.ts
+//#region src/generative-ui/catalog.ts
 /** The A2UI component envelope: `id`, `component`, `catalogId`, `accessibility`, `metadata`. */
 const RESERVED_KEYS = new Set([
 	"id",
@@ -727,14 +824,14 @@ function toManifest(definition, modelProps, modelEvents) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/is-record.ts
+//#region src/generative-ui/is-record.ts
 /** True for a plain object: not null, not an array. Internal, not exported. */
 function isRecord(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
 //#endregion
-//#region src/v2/generative-ui/errors.ts
+//#region src/generative-ui/errors.ts
 var GenerativeUIError = class extends Error {
 	constructor(code, message) {
 		super(message);
@@ -744,7 +841,7 @@ var GenerativeUIError = class extends Error {
 };
 
 //#endregion
-//#region src/v2/generative-ui/functions.ts
+//#region src/generative-ui/functions.ts
 /**
 * The renderer-side functions of the A2UI 1.0 basic catalog. Each one takes
 * resolved args (no bindings left in them) and gives a plain value. They
@@ -939,7 +1036,7 @@ function givesValidationResult(name) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/markdown/source.ts
+//#region src/generative-ui/markdown/source.ts
 /**
 * Values by key, from the latest build. A value that a build does not use
 * is dropped at the end of that build, so the cache does not grow.
@@ -1570,7 +1667,7 @@ function getMarkdownSurfaceSource(runtime) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/calc.ts
+//#region src/generative-ui/calc.ts
 const MAX_SERIES = 1e3;
 const OPERATORS = [
 	"&&",
@@ -1905,7 +2002,7 @@ function series(args) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/resolve.ts
+//#region src/generative-ui/resolve.ts
 BASIC_FUNCTIONS.calc = calc;
 BASIC_FUNCTIONS.series = series;
 const NO_DATA = { get: () => void 0 };
@@ -2176,7 +2273,7 @@ var ExpressionParser = class {
 };
 
 //#endregion
-//#region src/v2/generative-ui/schema.ts
+//#region src/generative-ui/schema.ts
 const ASYNC_ISSUE = { message: "the schema validates asynchronously; component props and state need a schema that validates synchronously" };
 function toResult(result) {
 	return result.issues ? {
@@ -2242,7 +2339,7 @@ function formatIssues(issues, fallback = "props") {
 }
 
 //#endregion
-//#region src/v2/generative-ui/runtime-context.ts
+//#region src/generative-ui/runtime-context.ts
 const GenerativeUIRuntimeContext = (0, react.createContext)(null);
 function useGenerativeUIRuntime() {
 	return (0, react.useContext)(GenerativeUIRuntimeContext);
@@ -2265,7 +2362,7 @@ function reportErrorSafely(runtime, info) {
 const GenerativeUINodeContext = (0, react.createContext)(null);
 
 //#endregion
-//#region src/v2/generative-ui/hooks.ts
+//#region src/generative-ui/hooks.ts
 const noopSubscribe$1 = () => () => {};
 const zero = () => 0;
 /** Re-renders on any surface-manager change. */
@@ -2352,7 +2449,7 @@ function useGenerativeUIFunction(ui, name, handler) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/boundaries.tsx
+//#region src/generative-ui/boundaries.tsx
 function DefaultNodeFallback({ message, componentId, retry }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "alert",
@@ -2459,7 +2556,7 @@ var SurfaceBoundary = class extends react.Component {
 };
 
 //#endregion
-//#region src/v2/generative-ui/accessibility.ts
+//#region src/generative-ui/accessibility.ts
 const LIVE = new Set([
 	"off",
 	"polite",
@@ -2554,7 +2651,7 @@ function wrapperAria(aria) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/events.ts
+//#region src/generative-ui/events.ts
 /**
 * The context of a running event binding: it reads the surface data model
 * and resolves relative paths against the template item of the component.
@@ -2670,7 +2767,7 @@ function invokeMatchedEvent(params) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/theme.ts
+//#region src/generative-ui/theme.ts
 /**
 * The built-in dark values. The light values are the fallbacks in the
 * components, so a surface is light when no variable is set.
@@ -2780,7 +2877,7 @@ function themeStyleSheet(theme) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/SurfaceView.tsx
+//#region src/generative-ui/SurfaceView.tsx
 const NO_ANCESTORS = [];
 const ROOT_STYLE = { display: "contents" };
 const undefinedSnapshot = () => void 0;
@@ -3346,7 +3443,7 @@ function ResolvedNode({ surface, componentId, definition, properties, runtime, b
 }
 
 //#endregion
-//#region src/v2/generative-ui/chat.tsx
+//#region src/generative-ui/chat.tsx
 const GenerativeUIChatSlotContext = (0, react.createContext)(void 0);
 function DefaultGenerativeUIChatCard({ surfaceId, isStreaming, error, children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3421,7 +3518,7 @@ function createGenerativeUIFunctionCallActivityRenderer() {
 }
 /** Hides the raw `render_ui` tool call; the surface activity owns the UX. */
 function GenerativeUIToolCallRenderer() {
-	const { copilotkit } = (0, _copilotkit_react_core_v2_context.useCopilotKit)();
+	const { copilotkit } = (0, _copilotkit_react_core_context.useCopilotKit)();
 	(0, react.useEffect)(() => {
 		const renderer = defineToolCallRenderer({
 			name: _copilotkit_shared.GENERATIVE_UI_RENDER_TOOL,
@@ -3435,7 +3532,30 @@ function GenerativeUIToolCallRenderer() {
 }
 
 //#endregion
-//#region src/v2/generative-ui/markdown/MarkdownSurfaces.tsx
+//#region src/generative-ui/markdown/ProviderMarkdown.tsx
+/**
+* Markdown prose inside generative UI, rendered like the chat text around
+* it: the renderer set on the provider when there is one, else the built-in
+* streaming renderer. Config passed here wins over provider config.
+*/
+function ProviderMarkdown({ content, isStreaming, className, ...config }) {
+	const renderer = useMarkdownRenderer();
+	if (renderer && isReactComponentType(renderer)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(renderer, {
+		content,
+		isStreaming,
+		className
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StreamingMarkdownDefaultRenderer, {
+		...renderer,
+		...config,
+		content,
+		isStreaming,
+		className
+	});
+}
+
+//#endregion
+//#region src/generative-ui/markdown/MarkdownSurfaces.tsx
 const FADE_STYLE_ID = "a2ui-markdown-fade";
 /**
 * Components fade in as they stream: each element that appears under a
@@ -3496,13 +3616,14 @@ function ChatSurface({ runtime, threadId, surfaceId, Wrapper }) {
 	});
 }
 /** The blocks of one fence: lifted prose and chat surfaces, in order. */
-function FenceBlocks({ blocks, runtime, threadId, markdownProps }) {
+function FenceBlocks({ blocks, runtime, threadId, isStreaming, markdownProps }) {
 	const Wrapper = (0, react.useContext)(GenerativeUIChatSlotContext) ?? DefaultMarkdownChatSurface;
 	let surfaceCount = 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: blocks.map((block) => {
-		if (block.kind === "markdown") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(streamdown.Streamdown, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: blocks.map((block, index) => {
+		if (block.kind === "markdown") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProviderMarkdown, {
 			...markdownProps,
-			children: block.markdown
+			content: block.markdown,
+			isStreaming: isStreaming && index === blocks.length - 1
 		}, `md-${surfaceCount}`);
 		surfaceCount++;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatSurface, {
@@ -3531,7 +3652,7 @@ function FenceBlocks({ blocks, runtime, threadId, markdownProps }) {
 * <MarkdownSurfaces content={message.content} messageId={message.id} />
 * ```
 */
-function MarkdownSurfaces({ content, messageId, ...markdownProps }) {
+function MarkdownSurfaces({ content, messageId, isStreaming = false, ...markdownProps }) {
 	const runtime = useRequiredGenerativeUIRuntime();
 	const chatThreadId = useCopilotChatConfiguration()?.threadId;
 	useManagerVersion(runtime);
@@ -3539,9 +3660,11 @@ function MarkdownSurfaces({ content, messageId, ...markdownProps }) {
 	const threadId = chatThreadId ?? runtime.manager.getActiveThread();
 	const source = getMarkdownSurfaceSource(runtime);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: segments.map((segment, index) => {
-		if (segment.type === "markdown") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(streamdown.Streamdown, {
+		const isLast = index === segments.length - 1;
+		if (segment.type === "markdown") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProviderMarkdown, {
 			...markdownProps,
-			children: segment.text
+			content: segment.text,
+			isStreaming: isStreaming && isLast
 		}, `md-${index}`);
 		const blocks = threadId ? source.getFenceBlocks(threadId, messageId, segment.index) : void 0;
 		if (!threadId || !blocks) return null;
@@ -3549,6 +3672,7 @@ function MarkdownSurfaces({ content, messageId, ...markdownProps }) {
 			blocks,
 			runtime,
 			threadId,
+			isStreaming: isStreaming && isLast,
 			markdownProps
 		}, `a2ui-${segment.index}`);
 	}) });
@@ -3627,12 +3751,30 @@ Object.defineProperty(exports, 'GenerativeUIToolCallRenderer', {
     return GenerativeUIToolCallRenderer;
   }
 });
+Object.defineProperty(exports, 'MarkdownRendererProvider', {
+  enumerable: true,
+  get: function () {
+    return MarkdownRendererProvider;
+  }
+});
 Object.defineProperty(exports, 'MarkdownSurfaces', {
   enumerable: true,
   get: function () {
     return MarkdownSurfaces;
   }
 });
+Object.defineProperty(exports, 'ProviderMarkdown', {
+  enumerable: true,
+  get: function () {
+    return ProviderMarkdown;
+  }
+});
+Object.defineProperty(exports, 'StreamingMarkdownDefaultRenderer', {
+  enumerable: true,
+  get: function () {
+    return StreamingMarkdownDefaultRenderer;
+  }
+});
 Object.defineProperty(exports, 'SurfaceView', {
   enumerable: true,
   get: function () {
@@ -3711,6 +3853,12 @@ Object.defineProperty(exports, 'isAsyncIssue', {
     return isAsyncIssue;
   }
 });
+Object.defineProperty(exports, 'isReactComponentType', {
+  enumerable: true,
+  get: function () {
+    return isReactComponentType;
+  }
+});
 Object.defineProperty(exports, 'isRecord', {
   enumerable: true,
   get: function () {
@@ -3729,10 +3877,10 @@ Object.defineProperty(exports, 'namedRole', {
     return namedRole;
   }
 });
-Object.defineProperty(exports, 'shallowEqual', {
+Object.defineProperty(exports, 'renderSlot', {
   enumerable: true,
   get: function () {
-    return shallowEqual;
+    return renderSlot;
   }
 });
 Object.defineProperty(exports, 'toJsonSchema', {
@@ -3771,16 +3919,16 @@ Object.defineProperty(exports, 'useGenerativeUIState', {
     return useGenerativeUIState;
   }
 });
-Object.defineProperty(exports, 'useKatexStyles', {
+Object.defineProperty(exports, 'useManagerVersion', {
   enumerable: true,
   get: function () {
-    return useKatexStyles;
+    return useManagerVersion;
   }
 });
-Object.defineProperty(exports, 'useManagerVersion', {
+Object.defineProperty(exports, 'useMarkdownRenderer', {
   enumerable: true,
   get: function () {
-    return useManagerVersion;
+    return useMarkdownRenderer;
   }
 });
 Object.defineProperty(exports, 'useRequiredGenerativeUIRuntime', {
@@ -3813,4 +3961,4 @@ Object.defineProperty(exports, 'wrapperAria', {
     return wrapperAria;
   }
 });
-//# sourceMappingURL=MarkdownSurfaces-FF5za2kU.cjs.map
+//# sourceMappingURL=MarkdownSurfaces-C2XZISKn.cjs.map