reachat 2.2.0 → 3.0.0

package/dist/{index-DdRyk11n.js → index-8tlsyFe-.js}

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, useContext, useRef, forwardRef, useState, useEffect, useCallback, useImperativeHandle, memo, useMemo, lazy, Suspense, isValidElement, cloneElement } from "react";
+import { createContext, useContext, useRef, forwardRef, useState, useEffect, useCallback, useImperativeHandle, memo, useMemo, lazy, Suspense, isValidElement, cloneElement, Component } from "react";
 import { Button, cn, List, ListItem, Ellipsis, DateFormat, Redact, IconButton, Card, useInfinityList, useComponentTheme, ConnectedOverlay } from "reablocks";
 import { useEditor, EditorContent, ReactRenderer, posToDOMRect } from "@tiptap/react";
 import { computePosition, shift, flip } from "@floating-ui/dom";
@@ -18,7 +18,6 @@ import rehypeKatex from "rehype-katex";
 import rehypeRaw from "rehype-raw";
 import { SparklineChart, RadialAreaChart, RadialAreaSeries, RadialBarChart, RadialBarSeries, PieChart, PieArcSeries, AreaChart, AreaSeries, LinearYAxis, LinearXAxis, LineChart, LineSeries, BarChart, BarSeries } from "reaviz";
 import { findAndReplace } from "mdast-util-find-and-replace";
-import { visit } from "unist-util-visit";
 import debounce from "lodash/debounce.js";
 import { useHotkeys } from "reakeys";
 import remarkGfm from "remark-gfm";
@@ -26,6 +25,7 @@ import remarkYoutube from "remark-youtube";
 import remarkMath from "remark-math";
 import { isToday, isYesterday, isThisWeek, differenceInYears, format } from "date-fns";
 import { offset } from "@floating-ui/react";
+import { z } from "zod";
 const SvgSend = (props) => /* @__PURE__ */ React.createElement("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { id: "send" }, /* @__PURE__ */ React.createElement("path", { id: "Vector", d: "M14.6111 2.33327C14.5349 2.3339 14.4598 2.35194 14.3917 2.386L2.39168 8.386C2.31456 8.42456 2.24872 8.4824 2.20055 8.55391C2.15238 8.62543 2.12352 8.70818 2.11677 8.79414C2.11002 8.88009 2.12561 8.96634 2.16203 9.04449C2.19845 9.12264 2.25446 9.19005 2.32462 9.24017L4.52514 10.8124L5.47371 13.6581C5.50257 13.7447 5.55457 13.8217 5.62406 13.8808C5.69355 13.9399 5.7779 13.9789 5.86796 13.9935C5.95802 14.0082 6.05036 13.9979 6.13499 13.9638C6.21962 13.9297 6.2933 13.873 6.34806 13.8001L7.05249 12.8606L10.3207 15.2376C10.3843 15.2839 10.4579 15.3146 10.5355 15.3271C10.6132 15.3396 10.6927 15.3336 10.7676 15.3097C10.8425 15.2857 10.9107 15.2444 10.9667 15.1891C11.0226 15.1338 11.0647 15.0661 11.0896 14.9915L15.0896 2.99147C15.1148 2.91597 15.1216 2.83555 15.1094 2.7569C15.0972 2.67825 15.0665 2.60363 15.0197 2.53926C14.9729 2.47488 14.9114 2.42261 14.8403 2.38678C14.7693 2.35096 14.6907 2.33261 14.6111 2.33327ZM13.2478 5.35345L10.3565 14.0266L7.67293 12.0755L13.2478 5.35345ZM10.684 5.35801L4.934 9.87559L3.58113 8.90879L10.684 5.35801ZM11.2784 6.16205L6.56746 11.843C6.56681 11.8437 6.56616 11.8443 6.56551 11.845L6.56355 11.8476C6.55841 11.8538 6.55342 11.8601 6.54858 11.8665C6.54319 11.8733 6.53798 11.8802 6.53295 11.8873L6.12085 12.4361L5.53426 10.6751L11.2784 6.16205Z", fill: "currentColor" })));
 const SvgStop = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-octagon-x", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m15 9-6 6" }), /* @__PURE__ */ React.createElement("path", { d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z" }), /* @__PURE__ */ React.createElement("path", { d: "m9 9 6 6" }));
 const ChatContext = createContext({
@@ -315,6 +315,9 @@ const chatTheme = {
       ].join(" "),
       title: "text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2"
     }
+  },
+  component: {
+    base: "my-4"
   }
 };
 const POPUP_STYLE = { zIndex: 9999 };
@@ -1958,6 +1961,8 @@ const Markdown = ({
       li: (props) => /* @__PURE__ */ jsx("li", { ...props, className: cn(theme.messages.message.markdown.li) }),
       ul: (props) => /* @__PURE__ */ jsx("ul", { ...props, className: cn(theme.messages.message.markdown.ul) }),
       ol: (props) => /* @__PURE__ */ jsx("ol", { ...props, className: cn(theme.messages.message.markdown.ol) }),
+      // 'redact' is a custom element created by remarkRedact, not a standard
+      // HTML tag, so it falls outside react-markdown's Components type.
       redact: (props) => /* @__PURE__ */ jsx(
         Redact,
         {
@@ -1983,7 +1988,7 @@ const Markdown = ({
     }
   );
 };
-const ChartError = ({
+const ComponentError = ({
   variant = "error",
   title,
   message,
@@ -2011,12 +2016,12 @@ const ChartRenderer = ({
       data: d.data
     }));
     if (!chartData || chartData.length === 0) {
-      return /* @__PURE__ */ jsx(ChartError, { variant: "warning", message: "No chart data available" });
+      return /* @__PURE__ */ jsx(ComponentError, { variant: "warning", message: "No chart data available" });
     }
     for (const point of chartData) {
       if (typeof point.data !== "number" || isNaN(point.data)) {
         return /* @__PURE__ */ jsx(
-          ChartError,
+          ComponentError,
           {
             message: `Invalid data point: ${JSON.stringify(point)}`
           }
@@ -2085,10 +2090,10 @@ const ChartRenderer = ({
         case "sparkline":
           return /* @__PURE__ */ jsx(SparklineChart, { width, height, data: chartData });
         default:
-          return /* @__PURE__ */ jsx(ChartError, { message: `Unknown chart type: ${type}` });
+          return /* @__PURE__ */ jsx(ComponentError, { message: `Unknown chart type: ${type}` });
       }
     } catch (error) {
-      return /* @__PURE__ */ jsx(ChartError, { message: `Chart render error: ${String(error)}` });
+      return /* @__PURE__ */ jsx(ComponentError, { message: `Chart render error: ${String(error)}` });
     }
   }, [type, data, width, height]);
   return /* @__PURE__ */ jsxs("div", { className: cn(theme.chart.base, className), children: [
@@ -2096,93 +2101,6 @@ const ChartRenderer = ({
     /* @__PURE__ */ jsx("div", { className: theme.chart.content, children: chartElement })
   ] });
 };
-function validateChartData(data) {
-  if (!Array.isArray(data)) {
-    return null;
-  }
-  const validData = [];
-  for (const item of data) {
-    if (item && typeof item === "object" && "key" in item && "data" in item && typeof item.data === "number") {
-      validData.push({
-        key: String(item.key),
-        data: item.data
-      });
-    } else {
-      return null;
-    }
-  }
-  return validData.length > 0 ? validData : null;
-}
-function parseChartConfig(value) {
-  try {
-    const config = JSON.parse(value);
-    if (!config || !config.type || !config.data) {
-      return null;
-    }
-    const validData = validateChartData(config.data);
-    if (!validData) {
-      console.warn("parseChartConfig: Invalid chart data format");
-      return null;
-    }
-    return {
-      ...config,
-      data: validData
-    };
-  } catch (error) {
-    console.warn("parseChartConfig: Failed to parse JSON", error);
-    return null;
-  }
-}
-function isChartClassName(className) {
-  return className === "language-chart";
-}
-function getChildText(children) {
-  if (children === null || children === void 0) {
-    return "";
-  }
-  if (typeof children === "string") {
-    return children;
-  }
-  if (typeof children === "number") {
-    return String(children);
-  }
-  if (Array.isArray(children)) {
-    return children.map(getChildText).join("");
-  }
-  if (typeof children === "object") {
-    if ("props" in children && children.props) {
-      const element = children;
-      return getChildText(element.props.children);
-    }
-  }
-  return "";
-}
-const ChartPre = ({ children, ...props }) => {
-  var _a, _b;
-  if (children && typeof children === "object" && "props" in children) {
-    const codeElement = children;
-    if (isChartClassName((_a = codeElement.props) == null ? void 0 : _a.className)) {
-      const codeContent = getChildText((_b = codeElement.props) == null ? void 0 : _b.children);
-      if (codeContent) {
-        const chartConfig = parseChartConfig(codeContent);
-        if (chartConfig) {
-          return /* @__PURE__ */ jsx(ChartRenderer, { config: chartConfig });
-        }
-      }
-      return /* @__PURE__ */ jsx(
-        ChartError,
-        {
-          title: "Failed to parse chart configuration",
-          code: codeContent || "No content"
-        }
-      );
-    }
-  }
-  return /* @__PURE__ */ jsx("pre", { ...props, children });
-};
-const chartComponents = {
-  pre: ChartPre
-};
 const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;
 function remarkCve() {
   return (tree, _file) => {
@@ -2203,31 +2121,8 @@ function remarkCve() {
     ];
   }
 }
-const remarkChart = (options = {}) => {
-  const { defaultWidth = 400, defaultHeight = 300 } = options;
-  return (tree) => {
-    visit(tree, "code", (node) => {
-      if (node.lang !== "chart") {
-        return;
-      }
-      try {
-        const config = JSON.parse(node.value);
-        if (!config.type || !config.data) {
-          console.warn(
-            "remarkChart: Invalid chart config - missing type or data"
-          );
-          return;
-        }
-        const chartConfig = {
-          ...config,
-          width: config.width ?? defaultWidth,
-          height: config.height ?? defaultHeight
-        };
-        node.value = JSON.stringify(chartConfig);
-      } catch (error) {
-        console.warn("remarkChart: Failed to parse chart config:", error);
-      }
-    });
+const remarkComponent = (_options = {}) => {
+  return () => {
   };
 };
 function remarkRedact(matchers) {
@@ -2284,8 +2179,8 @@ const commonRedactMatchers = [
   bitcoinMatcher
 ];
 const SvgFile = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.7036 1.37034C3.04741 1.02653 3.51373 0.833374 3.99996 0.833374H9.33329H9.33331C9.47275 0.833374 9.59885 0.890449 9.68954 0.98251L13.6843 4.97722C13.7763 5.0679 13.8333 5.19398 13.8333 5.33337L13.8333 5.3379V13.3334C13.8333 13.8196 13.6401 14.2859 13.2963 14.6297C12.9525 14.9736 12.4862 15.1667 12 15.1667H3.99996C3.51373 15.1667 3.04741 14.9736 2.7036 14.6297C2.35978 14.2859 2.16663 13.8196 2.16663 13.3334V2.66671C2.16663 2.18048 2.35978 1.71416 2.7036 1.37034ZM3.99996 1.83337H8.83331V5.33337C8.83331 5.60952 9.05717 5.83337 9.33331 5.83337H12.8333V13.3334C12.8333 13.5544 12.7455 13.7663 12.5892 13.9226C12.4329 14.0789 12.221 14.1667 12 14.1667H3.99996C3.77895 14.1667 3.56698 14.0789 3.4107 13.9226C3.25442 13.7663 3.16663 13.5544 3.16663 13.3334V2.66671C3.16663 2.44569 3.25442 2.23373 3.4107 2.07745C3.56698 1.92117 3.77895 1.83337 3.99996 1.83337ZM9.83331 2.5405L12.1262 4.83337H9.83331V2.5405ZM5.33331 8.16663C5.05717 8.16663 4.83331 8.39048 4.83331 8.66663C4.83331 8.94277 5.05717 9.16663 5.33331 9.16663H10.6666C10.9428 9.16663 11.1666 8.94277 11.1666 8.66663C11.1666 8.39048 10.9428 8.16663 10.6666 8.16663H5.33331ZM4.83331 11.3334C4.83331 11.0572 5.05717 10.8334 5.33331 10.8334H10.6666C10.9428 10.8334 11.1666 11.0572 11.1666 11.3334C11.1666 11.6095 10.9428 11.8334 10.6666 11.8334H5.33331C5.05717 11.8334 4.83331 11.6095 4.83331 11.3334ZM5.33331 5.5C5.05717 5.5 4.83331 5.72386 4.83331 6C4.83331 6.27614 5.05717 6.5 5.33331 6.5H6.66665C6.94279 6.5 7.16665 6.27614 7.16665 6C7.16665 5.72386 6.94279 5.5 6.66665 5.5H5.33331Z" }));
-const DefaultFileRenderer = lazy(() => import("./DefaultFileRenderer-C2MsQ9wz.js"));
-const CSVFileRenderer = lazy(() => import("./CSVFileRenderer-BOdL4Jte.js"));
+const DefaultFileRenderer = lazy(() => import("./DefaultFileRenderer-CJ3jwiQa.js"));
+const CSVFileRenderer = lazy(() => import("./CSVFileRenderer-C2tuexJf.js"));
 const ImageFileRenderer = lazy(() => import("./ImageFileRenderer-C8tVW3I8.js"));
 const PDFFileRenderer = lazy(() => import("./PDFFileRenderer-DQdFS2l6.js"));
 const FILE_TYPE_RENDERER_MAP = {
@@ -2795,6 +2690,7 @@ const Chat = ({
   onNewSession,
   remarkPlugins = defaultRemarkPlugins,
   markdownComponents,
+  components: componentCatalog2,
   disabled,
   style,
   className
@@ -2839,12 +2735,23 @@ const Chat = ({
     () => sessions.find((session) => session.id === internalActiveSessionID),
     [sessions, internalActiveSessionID]
   );
+  const mergedRemarkPlugins = useMemo(() => {
+    if (!componentCatalog2) return remarkPlugins;
+    return [...remarkPlugins, componentCatalog2.remarkPlugin];
+  }, [remarkPlugins, componentCatalog2]);
+  const mergedMarkdownComponents = useMemo(() => {
+    if (!componentCatalog2) return markdownComponents;
+    return {
+      ...componentCatalog2.components,
+      ...markdownComponents
+    };
+  }, [markdownComponents, componentCatalog2]);
   const contextValue = useMemo(
     () => ({
       sessions,
       activeSession,
-      remarkPlugins,
-      markdownComponents,
+      remarkPlugins: mergedRemarkPlugins,
+      markdownComponents: mergedMarkdownComponents,
       theme,
       disabled,
       isLoading,
@@ -2864,8 +2771,8 @@ const Chat = ({
       viewType,
       disabled,
       theme,
-      remarkPlugins,
-      markdownComponents,
+      mergedRemarkPlugins,
+      mergedMarkdownComponents,
       sessions,
       activeSession,
       internalActiveSessionID,
@@ -3632,11 +3539,427 @@ function useAgUi({
     stopMessage
   };
 }
+function validateSpec(raw, definitions) {
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return {
+      ok: false,
+      error: {
+        type: "invalid_json",
+        message: "Failed to parse component JSON",
+        raw
+      }
+    };
+  }
+  const specArray = Array.isArray(parsed) ? parsed : [parsed];
+  const validated = [];
+  for (const item of specArray) {
+    const result = validateSingleSpec(item, raw, definitions);
+    if (!result.ok) {
+      return { ok: false, error: result.error };
+    }
+    validated.push(result.spec);
+  }
+  return { ok: true, specs: validated };
+}
+function validateSingleSpec(item, raw, definitions) {
+  if (!item || typeof item !== "object" || !("type" in item)) {
+    return {
+      ok: false,
+      error: {
+        type: "invalid_json",
+        message: 'Component spec must be an object with a "type" field',
+        raw
+      }
+    };
+  }
+  const spec = item;
+  if (typeof spec.type !== "string") {
+    return {
+      ok: false,
+      error: {
+        type: "invalid_json",
+        message: '"type" must be a string',
+        raw
+      }
+    };
+  }
+  const componentType = spec.type;
+  const definition = definitions[componentType];
+  if (!definition) {
+    return {
+      ok: false,
+      error: {
+        type: "unknown_component",
+        message: `Unknown component "${componentType}". Available: ${Object.keys(definitions).join(", ")}`,
+        raw,
+        componentType
+      }
+    };
+  }
+  const props = spec.props && typeof spec.props === "object" && !Array.isArray(spec.props) ? spec.props : {};
+  const parseResult = definition.props.safeParse(props);
+  if (!parseResult.success) {
+    return {
+      ok: false,
+      error: {
+        type: "invalid_props",
+        message: `Invalid props for "${componentType}": ${parseResult.error.issues.map((i) => i.message).join(", ")}`,
+        raw,
+        componentType,
+        issues: parseResult.error.issues.map((i) => ({
+          message: i.message,
+          path: i.path
+        }))
+      }
+    };
+  }
+  let validatedChildren;
+  if (spec.children) {
+    if (!Array.isArray(spec.children)) {
+      return {
+        ok: false,
+        error: {
+          type: "invalid_json",
+          message: '"children" must be an array',
+          raw,
+          componentType
+        }
+      };
+    }
+    validatedChildren = [];
+    for (const child of spec.children) {
+      const childResult = validateSingleSpec(child, raw, definitions);
+      if (!childResult.ok) {
+        return childResult;
+      }
+      validatedChildren.push(childResult.spec);
+    }
+  }
+  return {
+    ok: true,
+    spec: {
+      type: componentType,
+      props: parseResult.data,
+      ...validatedChildren ? { children: validatedChildren } : {}
+    }
+  };
+}
+const ComponentRenderer = ({
+  raw,
+  definitions,
+  options
+}) => {
+  var _a, _b;
+  const { theme, sendMessage } = useContext(ChatContext);
+  const result = useMemo(
+    () => validateSpec(raw, definitions),
+    [raw, definitions]
+  );
+  if (!result.ok) {
+    const error = result.error;
+    const custom = (_a = options == null ? void 0 : options.onError) == null ? void 0 : _a.call(options, error);
+    if (custom !== void 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: custom });
+    }
+    return /* @__PURE__ */ jsx(
+      ComponentError,
+      {
+        title: errorTitle(error.type),
+        message: error.message,
+        code: error.raw
+      }
+    );
+  }
+  const specs = result.specs;
+  return /* @__PURE__ */ jsx("div", { className: (_b = theme.component) == null ? void 0 : _b.base, children: specs.map((spec, index) => /* @__PURE__ */ jsx(
+    SpecRenderer,
+    {
+      spec,
+      definitions,
+      options,
+      sendMessage
+    },
+    `${spec.type}-${index}-${stableKey(spec)}`
+  )) });
+};
+const SpecRenderer = ({
+  spec,
+  definitions,
+  options,
+  sendMessage
+}) => {
+  var _a, _b;
+  const definition = definitions[spec.type];
+  if (!definition) {
+    const error = {
+      type: "unknown_component",
+      message: `Unknown component "${spec.type}"`,
+      raw: JSON.stringify(spec),
+      componentType: spec.type
+    };
+    const custom = (_a = options == null ? void 0 : options.onError) == null ? void 0 : _a.call(options, error);
+    if (custom !== void 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: custom });
+    }
+    return /* @__PURE__ */ jsx(ComponentError, { title: errorTitle(error.type), message: error.message });
+  }
+  const RenderedComponent = definition.component;
+  const children = (_b = spec.children) == null ? void 0 : _b.map((child, index) => /* @__PURE__ */ jsx(
+    SpecRenderer,
+    {
+      spec: child,
+      definitions,
+      options,
+      sendMessage
+    },
+    `${child.type}-${index}-${stableKey(child)}`
+  ));
+  return /* @__PURE__ */ jsx(SpecErrorBoundary, { spec, options, children: /* @__PURE__ */ jsx(RenderedComponent, { ...spec.props, sendMessage, children }) });
+};
+class SpecErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  render() {
+    var _a;
+    if (this.state.error) {
+      const { spec, options } = this.props;
+      const catalogError = {
+        type: "render_error",
+        message: `Error rendering "${spec.type}": ${this.state.error.message}`,
+        raw: JSON.stringify(spec),
+        componentType: spec.type
+      };
+      const custom = (_a = options == null ? void 0 : options.onError) == null ? void 0 : _a.call(options, catalogError);
+      if (custom !== void 0) {
+        return /* @__PURE__ */ jsx(Fragment, { children: custom });
+      }
+      return /* @__PURE__ */ jsx(
+        ComponentError,
+        {
+          title: errorTitle(catalogError.type),
+          message: catalogError.message
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+function stableKey(spec) {
+  const str = JSON.stringify({
+    t: spec.type,
+    p: spec.props,
+    c: spec.children
+  });
+  let h = 0;
+  for (let i = 0; i < str.length; i++) {
+    h = h * 31 + str.charCodeAt(i) | 0;
+  }
+  return (h >>> 0).toString(36);
+}
+function errorTitle(type) {
+  switch (type) {
+    case "unknown_component":
+      return "Unknown Component";
+    case "invalid_props":
+      return "Invalid Props";
+    case "render_error":
+      return "Render Error";
+    default:
+      return "Invalid Component";
+  }
+}
+function getChildText(children) {
+  if (children === null || children === void 0) {
+    return "";
+  }
+  if (typeof children === "string") {
+    return children;
+  }
+  if (typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(getChildText).join("");
+  }
+  if (typeof children === "object") {
+    if ("props" in children && children.props) {
+      const element = children;
+      return getChildText(element.props.children);
+    }
+  }
+  return "";
+}
+function createComponentPre(definitions, options) {
+  const language = (options == null ? void 0 : options.language) ?? "component";
+  const className = `language-${language}`;
+  const ComponentPre = ({ children, ...props }) => {
+    var _a, _b;
+    if (children && typeof children === "object" && "props" in children) {
+      const codeElement = children;
+      if (((_a = codeElement.props) == null ? void 0 : _a.className) === className) {
+        const codeContent = getChildText((_b = codeElement.props) == null ? void 0 : _b.children);
+        if (codeContent) {
+          return /* @__PURE__ */ jsx(
+            ComponentRenderer,
+            {
+              raw: codeContent,
+              definitions,
+              options
+            }
+          );
+        }
+      }
+    }
+    return /* @__PURE__ */ jsx("pre", { ...props, children });
+  };
+  ComponentPre.displayName = "ComponentPre";
+  return ComponentPre;
+}
+function describeJsonSchemaProperty(prop, indent = "") {
+  const description = prop.description ? ` // ${prop.description}` : "";
+  if (prop.anyOf) {
+    const nonNull = prop.anyOf.filter((s) => !(s.type === "null"));
+    const hasNull = prop.anyOf.some((s) => s.type === "null");
+    if (nonNull.length === 1 && hasNull) {
+      return `${describeJsonSchemaProperty(nonNull[0], indent)} | null${description}`;
+    }
+    const parts = prop.anyOf.map(
+      (s) => describeJsonSchemaProperty(s, indent)
+    );
+    return `${parts.join(" | ")}${description}`;
+  }
+  if (prop.enum) {
+    return `${prop.enum.map((v) => `"${v}"`).join(" | ")}${description}`;
+  }
+  if (prop.type === "array") {
+    const items = prop.items ? describeJsonSchemaProperty(prop.items, indent) : "any";
+    return `${items}[]${description}`;
+  }
+  if (prop.type === "object" && prop.properties) {
+    const required = new Set(prop.required ?? []);
+    const fields = [];
+    for (const [key, value] of Object.entries(prop.properties)) {
+      const opt = required.has(key) ? "" : "?";
+      fields.push(
+        `${indent}  ${key}: ${describeJsonSchemaProperty(value, indent + "  ")}${opt}`
+      );
+    }
+    return `{
+${fields.join(",\n")}
+${indent}}${description}`;
+  }
+  if (prop.type === "string") return `string${description}`;
+  if (prop.type === "number" || prop.type === "integer")
+    return `number${description}`;
+  if (prop.type === "boolean") return `boolean${description}`;
+  if (prop.type === "null") return `null${description}`;
+  return `any${description}`;
+}
+function describeProps(schema) {
+  try {
+    const jsonSchema = z.toJSONSchema(schema);
+    if (jsonSchema.type === "object" && jsonSchema.properties) {
+      return describeJsonSchemaProperty(jsonSchema);
+    }
+    return "Record<string, any>";
+  } catch {
+    return "Record<string, any>";
+  }
+}
+function generatePrompt(definitions, language = "component") {
+  const names = Object.keys(definitions);
+  if (names.length === 0) {
+    return "";
+  }
+  const componentDocs = names.map((name) => {
+    const def = definitions[name];
+    const propsDesc = describeProps(def.props);
+    return `- **${name}**: ${def.description}
+  Props: ${propsDesc}`;
+  }).join("\n\n");
+  return `When you need to render a dynamic UI component in your response, use a fenced code block with language \`${language}\` containing a JSON object:
+
+\`\`\`${language}
+{ "type": "ComponentName", "props": { ... } }
+\`\`\`
+
+For multiple components, use a JSON array:
+
+\`\`\`${language}
+[
+  { "type": "ComponentA", "props": { ... } },
+  { "type": "ComponentB", "props": { ... } }
+]
+\`\`\`
+
+For nested/composed layouts, use the "children" field:
+
+\`\`\`${language}
+{
+  "type": "Parent",
+  "props": { ... },
+  "children": [
+    { "type": "Child", "props": { ... } }
+  ]
+}
+\`\`\`
+
+Available components:
+
+${componentDocs}`;
+}
+function componentCatalog(definitions, options) {
+  const language = (options == null ? void 0 : options.language) ?? "component";
+  const plugin = remarkComponent.bind(void 0, {
+    language
+  });
+  const Pre = createComponentPre(definitions, options);
+  return {
+    remarkPlugin: plugin,
+    components: { pre: Pre },
+    systemPrompt: () => generatePrompt(definitions, language),
+    definitions
+  };
+}
+function createChartComponentDef() {
+  const chartPropsSchema = z.object({
+    type: z.enum([
+      "bar",
+      "line",
+      "area",
+      "pie",
+      "radialBar",
+      "radialArea",
+      "sparkline"
+    ]).describe("Chart type"),
+    data: z.array(z.object({ key: z.string(), data: z.number() })).describe("Array of { key, data } data points"),
+    width: z.number().describe("Chart width in px").optional(),
+    height: z.number().describe("Chart height in px").optional(),
+    title: z.string().describe("Chart title").optional()
+  });
+  return {
+    description: "Renders a chart. Supported types: bar, line, area, pie, radialBar, radialArea, sparkline",
+    props: chartPropsSchema,
+    component: ({
+      children: _children,
+      sendMessage: _sendMessage,
+      ...config
+    }) => /* @__PURE__ */ jsx(ChartRenderer, { config })
+  };
+}
 export {
   remarkRedact as $,
   AgUiEventType as A,
   SessionMessages as B,
-  ChartError as C,
+  ChartRenderer as C,
   SessionMessagesHeader as D,
   SessionsGroup as E,
   FileInput as F,
@@ -3645,36 +3968,36 @@ export {
   TableDataCell as I,
   TableHeaderCell as J,
   bitcoinMatcher as K,
-  chartComponents as L,
+  chatTheme as L,
   Markdown as M,
   NewSessionButton as N,
-  chatTheme as O,
-  commonRedactMatchers as P,
-  creditCardMatcher as Q,
+  commonRedactMatchers as O,
+  componentCatalog as P,
+  createChartComponentDef as Q,
   RichTextInput as R,
   SvgFile as S,
   TableComponent as T,
-  dark as U,
-  getChildText as V,
-  isChartClassName as W,
-  light as X,
-  parseChartConfig as Y,
-  remarkChart as Z,
+  createComponentPre as U,
+  creditCardMatcher as V,
+  dark as W,
+  generatePrompt as X,
+  light as Y,
+  remarkComponent as Z,
   remarkCve as _,
   SvgCopy as a,
   ssnMatcher as a0,
   useAgUi as a1,
-  validateChartData as a2,
+  validateSpec as a2,
   AppBar as b,
-  ChartPre as c,
-  ChartRenderer as d,
-  Chat as e,
-  ChatBubble as f,
-  ChatContext as g,
-  ChatInput as h,
-  ChatSuggestion as i,
-  ChatSuggestions as j,
-  CodeHighlighter as k,
+  Chat as c,
+  ChatBubble as d,
+  ChatContext as e,
+  ChatInput as f,
+  ChatSuggestion as g,
+  ChatSuggestions as h,
+  CodeHighlighter as i,
+  ComponentError as j,
+  ComponentRenderer as k,
   MentionList as l,
   MessageActions as m,
   MessageFile as n,
@@ -3691,4 +4014,4 @@ export {
   SessionMessage as y,
   SessionMessagePanel as z
 };
-//# sourceMappingURL=index-DdRyk11n.js.map
+//# sourceMappingURL=index-8tlsyFe-.js.map