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

package/dist/{MarkdownSurfaces-DGpjmPaB.mjs → MarkdownSurfaces-ChSlVYOk.mjs}

@@ -1,13 +1,51 @@
-import React, { Component, createContext, memo, useCallback, useContext, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { extractFenceOperations, flattenInformationalCards, getMarkdownOperationSurfaceId, prepareSurfaceOperations, segmentSurfaceProse, splitA2UIMarkdown } from "@copilotkit/core";
-import { A2UI_COMPONENT_ENVELOPE_KEYS, A2UI_INDEX_FUNCTION, A2UI_VERSION, DEFAULT_AGENT_ID, GENERATIVE_UI_ACTIVITY_TYPE, GENERATIVE_UI_CHAT_TARGET, GENERATIVE_UI_FUNCTIONS, GENERATIVE_UI_FUNCTION_CALL_ACTIVITY_TYPE, GENERATIVE_UI_RENDER_TOOL, GENERATIVE_UI_ROOT_ID, applyChildRefMarks, childIdsAtRefs, collectChildRefs, functionCallers, getOperationKind, hasBoundChildRef, isActionBinding, isCallBinding, isPathBinding, isValidationResult, mapAtChildRef, randomUUID, schemaToJsonSchema, validateOperation } from "@copilotkit/shared";
-import { CopilotKitContext, useCopilotKit, useDefaultAgentId } from "@copilotkit/react-core/v2/context";
+import React, { Component, createContext, memo, useCallback, useContext, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Streamdown } from "streamdown";
+import { StreamingMarkdownRenderer, createStreamingMarkdownNodeRenderers } from "@copilotkit/markdown-renderer/react";
+import { warnUnsupportedRichSyntaxOnce } from "@copilotkit/markdown-renderer";
+import { twMerge } from "tailwind-merge";
+import { A2UI_COMPONENT_ENVELOPE_KEYS, A2UI_INDEX_FUNCTION, A2UI_VERSION, DEFAULT_AGENT_ID, GENERATIVE_UI_ACTIVITY_TYPE, GENERATIVE_UI_CHAT_TARGET, GENERATIVE_UI_FUNCTIONS, GENERATIVE_UI_FUNCTION_CALL_ACTIVITY_TYPE, GENERATIVE_UI_RENDER_TOOL, GENERATIVE_UI_ROOT_ID, applyChildRefMarks, childIdsAtRefs, collectChildRefs, functionCallers, getOperationKind, hasBoundChildRef, isActionBinding, isCallBinding, isPathBinding, isValidationResult, mapAtChildRef, randomUUID, schemaToJsonSchema, validateOperation } from "@copilotkit/shared";
+import { CopilotKitContext, useCopilotKit, useDefaultAgentId } from "@copilotkit/react-core/context";
 import { z } from "zod";
 import { zodToJsonSchema } from "zod-to-json-schema";
 
-//#region src/v2/lib/shallow-stable-ref.ts
+//#region src/components/chat/StreamingMarkdownDefaultRenderer.tsx
+const defaultNodeRenderers = createStreamingMarkdownNodeRenderers({ codeBlock: ({ node }) => /* @__PURE__ */ jsx("pre", {
+	className: "cpk:overflow-x-auto cpk:rounded-lg cpk:bg-muted cpk:text-foreground cpk:p-3",
+	children: /* @__PURE__ */ 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 = useMemo(() => nodeRenderers ? createStreamingMarkdownNodeRenderers({
+		...defaultNodeRenderers,
+		...nodeRenderers
+	}) : defaultNodeRenderers, [nodeRenderers]);
+	if (!content) return null;
+	warnUnsupportedRichSyntaxOnce(content);
+	return /* @__PURE__ */ jsx(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.
 */
@@ -49,7 +87,7 @@ function useShallowStableRef(value) {
 }
 
 //#endregion
-//#region src/v2/providers/CopilotChatConfigurationProvider.tsx
+//#region src/providers/CopilotChatConfigurationProvider.tsx
 const CopilotChatDefaultLabels = {
 	chatInputPlaceholder: "Type a message...",
 	chatInputToolbarStartTranscribeButtonLabel: "Transcribe",
@@ -352,26 +390,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() {
-	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.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.createElement(DefaultComponent, {
+			...props,
+			className: twMerge(existingClassName, slot)
 		});
-	}, []);
+	}
+	if (isReactComponentType(slot)) return React.createElement(slot, props);
+	if (slot && typeof slot === "object" && !React.isValidElement(slot)) return React.createElement(DefaultComponent, {
+		...props,
+		...slot
+	});
+	return React.createElement(DefaultComponent, props);
+}
+/**
+* Internal memoized wrapper component for renderSlot.
+* Uses forwardRef to support ref forwarding.
+*/
+const MemoizedSlotWrapper = React.memo(React.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.createElement(MemoizedSlotWrapper, {
+		...props,
+		$slot: slot,
+		$component: DefaultComponent
+	});
 }
 
 //#endregion
-//#region src/v2/types/defineToolCallRenderer.ts
+//#region src/providers/MarkdownRendererContext.tsx
+const MarkdownRendererContext = createContext(void 0);
+const MarkdownRendererProvider = ({ renderer, children }) => /* @__PURE__ */ 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 useContext(MarkdownRendererContext);
+}
+
+//#endregion
+//#region src/types/defineToolCallRenderer.ts
 function defineToolCallRenderer(def) {
 	const argsSchema = def.name === "*" && !def.args ? z.any() : def.args;
 	return {
@@ -384,7 +481,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()`
@@ -396,7 +493,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",
@@ -699,14 +796,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);
@@ -716,7 +813,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
@@ -911,7 +1008,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.
@@ -1542,7 +1639,7 @@ function getMarkdownSurfaceSource(runtime) {
 }
 
 //#endregion
-//#region src/v2/generative-ui/calc.ts
+//#region src/generative-ui/calc.ts
 const MAX_SERIES = 1e3;
 const OPERATORS = [
 	"&&",
@@ -1877,7 +1974,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 };
@@ -2148,7 +2245,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 ? {
@@ -2214,7 +2311,7 @@ function formatIssues(issues, fallback = "props") {
 }
 
 //#endregion
-//#region src/v2/generative-ui/runtime-context.ts
+//#region src/generative-ui/runtime-context.ts
 const GenerativeUIRuntimeContext = createContext(null);
 function useGenerativeUIRuntime() {
 	return useContext(GenerativeUIRuntimeContext);
@@ -2237,7 +2334,7 @@ function reportErrorSafely(runtime, info) {
 const GenerativeUINodeContext = 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. */
@@ -2324,7 +2421,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__ */ jsxs("div", {
 		role: "alert",
@@ -2431,7 +2528,7 @@ var SurfaceBoundary = class extends Component {
 };
 
 //#endregion
-//#region src/v2/generative-ui/accessibility.ts
+//#region src/generative-ui/accessibility.ts
 const LIVE = new Set([
 	"off",
 	"polite",
@@ -2526,7 +2623,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.
@@ -2642,7 +2739,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.
@@ -2752,7 +2849,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;
@@ -3318,7 +3415,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 = createContext(void 0);
 function DefaultGenerativeUIChatCard({ surfaceId, isStreaming, error, children }) {
 	return /* @__PURE__ */ jsxs("div", {
@@ -3407,7 +3504,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__ */ jsx(renderer, {
+		content,
+		isStreaming,
+		className
+	});
+	return /* @__PURE__ */ 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
@@ -3468,13 +3588,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 = useContext(GenerativeUIChatSlotContext) ?? DefaultMarkdownChatSurface;
 	let surfaceCount = 0;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: blocks.map((block) => {
-		if (block.kind === "markdown") return /* @__PURE__ */ jsx(Streamdown, {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: blocks.map((block, index) => {
+		if (block.kind === "markdown") return /* @__PURE__ */ jsx(ProviderMarkdown, {
 			...markdownProps,
-			children: block.markdown
+			content: block.markdown,
+			isStreaming: isStreaming && index === blocks.length - 1
 		}, `md-${surfaceCount}`);
 		surfaceCount++;
 		return /* @__PURE__ */ jsx(ChatSurface, {
@@ -3503,7 +3624,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);
@@ -3511,9 +3632,11 @@ function MarkdownSurfaces({ content, messageId, ...markdownProps }) {
 	const threadId = chatThreadId ?? runtime.manager.getActiveThread();
 	const source = getMarkdownSurfaceSource(runtime);
 	return /* @__PURE__ */ jsx(Fragment$1, { children: segments.map((segment, index) => {
-		if (segment.type === "markdown") return /* @__PURE__ */ jsx(Streamdown, {
+		const isLast = index === segments.length - 1;
+		if (segment.type === "markdown") return /* @__PURE__ */ 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;
@@ -3521,11 +3644,12 @@ function MarkdownSurfaces({ content, messageId, ...markdownProps }) {
 			blocks,
 			runtime,
 			threadId,
+			isStreaming: isStreaming && isLast,
 			markdownProps
 		}, `a2ui-${segment.index}`);
 	}) });
 }
 
 //#endregion
-export { isRecord as A, useCopilotChatConfiguration as B, validateSchemaSync as C, BASIC_FUNCTIONS as D, getMarkdownSurfaceSource as E, defineToolCallRenderer as F, useShallowStableRef as H, useKatexStyles as I, ControlledModalOpenScope as L, componentCatalogIds as M, createGenerativeUI as N, ExpressionError as O, toJsonSchema as P, CopilotChatConfigurationProvider as R, issueKey as S, containsDynamicValue as T, shallowEqual as V, GenerativeUIRuntimeContext as _, createGenerativeUIActivityRenderer as a, formatIssues as b, DARK_THEME_CSS as c, useGenerativeUIAccessibility as d, wrapperAria as f, GenerativeUINodeContext as g, useManagerVersion as h, GenerativeUIToolCallRenderer as i, catalogIdsOf as j, GenerativeUIError as k, controlAria as l, useGenerativeUIState as m, DefaultGenerativeUIChatCard as n, createGenerativeUIFunctionCallActivityRenderer as o, useGenerativeUIFunction as p, GenerativeUIChatSlotContext as r, SurfaceView as s, MarkdownSurfaces as t, namedRole as u, useGenerativeUIRuntime as v, withoutRejectedNulls as w, isAsyncIssue as x, useRequiredGenerativeUIRuntime as y, CopilotChatDefaultLabels as z };
-//# sourceMappingURL=MarkdownSurfaces-DGpjmPaB.mjs.map
+export { GenerativeUIError as A, renderSlot as B, issueKey as C, getMarkdownSurfaceSource as D, containsDynamicValue as E, toJsonSchema as F, useShallowStableRef as G, CopilotChatConfigurationProvider as H, defineToolCallRenderer as I, StreamingMarkdownDefaultRenderer as K, MarkdownRendererProvider as L, catalogIdsOf as M, componentCatalogIds as N, BASIC_FUNCTIONS as O, createGenerativeUI as P, useMarkdownRenderer as R, isAsyncIssue as S, withoutRejectedNulls as T, CopilotChatDefaultLabels as U, ControlledModalOpenScope as V, useCopilotChatConfiguration as W, GenerativeUINodeContext as _, GenerativeUIToolCallRenderer as a, useRequiredGenerativeUIRuntime as b, SurfaceView as c, namedRole as d, useGenerativeUIAccessibility as f, useManagerVersion as g, useGenerativeUIState as h, GenerativeUIChatSlotContext as i, isRecord as j, ExpressionError as k, DARK_THEME_CSS as l, useGenerativeUIFunction as m, ProviderMarkdown as n, createGenerativeUIActivityRenderer as o, wrapperAria as p, DefaultGenerativeUIChatCard as r, createGenerativeUIFunctionCallActivityRenderer as s, MarkdownSurfaces as t, controlAria as u, GenerativeUIRuntimeContext as v, validateSchemaSync as w, formatIssues as x, useGenerativeUIRuntime as y, isReactComponentType as z };
+//# sourceMappingURL=MarkdownSurfaces-ChSlVYOk.mjs.map