reachat 2.2.0 → 3.0.0

package/dist/index.umd.cjs

@@ -11,8 +11,8 @@
   }
 })();
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("motion/react"), require("@tiptap/react"), require("@floating-ui/dom"), require("@tiptap/extension-document"), require("@tiptap/extension-paragraph"), require("@tiptap/extension-text"), require("@tiptap/extension-hard-break"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-mention"), require("@radix-ui/react-slot"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("rehype-raw"), require("reaviz"), require("mdast-util-find-and-replace"), require("unist-util-visit"), require("lodash/debounce.js"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns"), require("@floating-ui/react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "motion/react", "@tiptap/react", "@floating-ui/dom", "@tiptap/extension-document", "@tiptap/extension-paragraph", "@tiptap/extension-text", "@tiptap/extension-hard-break", "@tiptap/extension-placeholder", "@tiptap/extension-mention", "@radix-ui/react-slot", "react-markdown", "react-syntax-highlighter", "rehype-katex", "rehype-raw", "reaviz", "mdast-util-find-and-replace", "unist-util-visit", "lodash/debounce.js", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns", "@floating-ui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.reablocks, global.React, global.react$1, global.react, global.dom, global.Document, global.Paragraph, global.Text, global.HardBreak, global.Placeholder, global.Mention, global.reactSlot, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.rehypeRaw, global.reaviz, global.mdastUtilFindAndReplace, global.unistUtilVisit, global.debounce, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns, global.react$2));
-})(this, function(exports2, jsxRuntime, reablocks, React, react$1, react, dom, Document, Paragraph, Text, HardBreak, Placeholder, Mention, reactSlot, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, rehypeRaw, reaviz, mdastUtilFindAndReplace, unistUtilVisit, debounce, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns, react$2) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("motion/react"), require("@tiptap/react"), require("@floating-ui/dom"), require("@tiptap/extension-document"), require("@tiptap/extension-paragraph"), require("@tiptap/extension-text"), require("@tiptap/extension-hard-break"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-mention"), require("@radix-ui/react-slot"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("rehype-raw"), require("reaviz"), require("mdast-util-find-and-replace"), require("lodash/debounce.js"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns"), require("@floating-ui/react"), require("zod")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "motion/react", "@tiptap/react", "@floating-ui/dom", "@tiptap/extension-document", "@tiptap/extension-paragraph", "@tiptap/extension-text", "@tiptap/extension-hard-break", "@tiptap/extension-placeholder", "@tiptap/extension-mention", "@radix-ui/react-slot", "react-markdown", "react-syntax-highlighter", "rehype-katex", "rehype-raw", "reaviz", "mdast-util-find-and-replace", "lodash/debounce.js", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns", "@floating-ui/react", "zod"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.reablocks, global.React, global.react$1, global.react, global.dom, global.Document, global.Paragraph, global.Text, global.HardBreak, global.Placeholder, global.Mention, global.reactSlot, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.rehypeRaw, global.reaviz, global.mdastUtilFindAndReplace, global.debounce, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns, global.react$2, global.zod));
+})(this, function(exports2, jsxRuntime, reablocks, React, react$1, react, dom, Document, Paragraph, Text, HardBreak, Placeholder, Mention, reactSlot, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, rehypeRaw, reaviz, mdastUtilFindAndReplace, debounce, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns, react$2, zod) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -320,6 +320,9 @@
         ].join(" "),
         title: "text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2"
       }
+    },
+    component: {
+      base: "my-4"
     }
   };
   const POPUP_STYLE = { zIndex: 9999 };
@@ -1963,6 +1966,8 @@
         li: (props) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, className: reablocks.cn(theme.messages.message.markdown.li) }),
         ul: (props) => /* @__PURE__ */ jsxRuntime.jsx("ul", { ...props, className: reablocks.cn(theme.messages.message.markdown.ul) }),
         ol: (props) => /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, className: reablocks.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__ */ jsxRuntime.jsx(
           reablocks.Redact,
           {
@@ -1988,7 +1993,7 @@
       }
     );
   };
-  const ChartError = ({
+  const ComponentError = ({
     variant = "error",
     title,
     message,
@@ -2016,12 +2021,12 @@
         data: d.data
       }));
       if (!chartData || chartData.length === 0) {
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartError, { variant: "warning", message: "No chart data available" });
+        return /* @__PURE__ */ jsxRuntime.jsx(ComponentError, { variant: "warning", message: "No chart data available" });
       }
       for (const point of chartData) {
         if (typeof point.data !== "number" || isNaN(point.data)) {
           return /* @__PURE__ */ jsxRuntime.jsx(
-            ChartError,
+            ComponentError,
             {
               message: `Invalid data point: ${JSON.stringify(point)}`
             }
@@ -2090,10 +2095,10 @@
           case "sparkline":
             return /* @__PURE__ */ jsxRuntime.jsx(reaviz.SparklineChart, { width, height, data: chartData });
           default:
-            return /* @__PURE__ */ jsxRuntime.jsx(ChartError, { message: `Unknown chart type: ${type}` });
+            return /* @__PURE__ */ jsxRuntime.jsx(ComponentError, { message: `Unknown chart type: ${type}` });
         }
       } catch (error) {
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartError, { message: `Chart render error: ${String(error)}` });
+        return /* @__PURE__ */ jsxRuntime.jsx(ComponentError, { message: `Chart render error: ${String(error)}` });
       }
     }, [type, data, width, height]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.chart.base, className), children: [
@@ -2101,93 +2106,6 @@
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ChartRenderer, { config: chartConfig });
-          }
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          ChartError,
-          {
-            title: "Failed to parse chart configuration",
-            code: codeContent || "No content"
-          }
-        );
-      }
-    }
-    return /* @__PURE__ */ jsxRuntime.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) => {
@@ -2208,31 +2126,8 @@
       ];
     }
   }
-  const remarkChart = (options = {}) => {
-    const { defaultWidth = 400, defaultHeight = 300 } = options;
-    return (tree) => {
-      unistUtilVisit.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) {
@@ -2960,6 +2855,7 @@ ${response}` : ""}`);
     onNewSession,
     remarkPlugins = defaultRemarkPlugins,
     markdownComponents,
+    components: componentCatalog2,
     disabled,
     style,
     className
@@ -3004,12 +2900,23 @@ ${response}` : ""}`);
       () => sessions.find((session) => session.id === internalActiveSessionID),
       [sessions, internalActiveSessionID]
     );
+    const mergedRemarkPlugins = React.useMemo(() => {
+      if (!componentCatalog2) return remarkPlugins;
+      return [...remarkPlugins, componentCatalog2.remarkPlugin];
+    }, [remarkPlugins, componentCatalog2]);
+    const mergedMarkdownComponents = React.useMemo(() => {
+      if (!componentCatalog2) return markdownComponents;
+      return {
+        ...componentCatalog2.components,
+        ...markdownComponents
+      };
+    }, [markdownComponents, componentCatalog2]);
     const contextValue = React.useMemo(
       () => ({
         sessions,
         activeSession,
-        remarkPlugins,
-        markdownComponents,
+        remarkPlugins: mergedRemarkPlugins,
+        markdownComponents: mergedMarkdownComponents,
         theme,
         disabled,
         isLoading,
@@ -3029,8 +2936,8 @@ ${response}` : ""}`);
         viewType,
         disabled,
         theme,
-        remarkPlugins,
-        markdownComponents,
+        mergedRemarkPlugins,
+        mergedMarkdownComponents,
         sessions,
         activeSession,
         internalActiveSessionID,
@@ -3797,10 +3704,424 @@ ${response}` : ""}`);
       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 } = React.useContext(ChatContext);
+    const result = React.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ComponentError,
+        {
+          title: errorTitle(error.type),
+          message: error.message,
+          code: error.raw
+        }
+      );
+    }
+    const specs = result.specs;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: (_b = theme.component) == null ? void 0 : _b.base, children: specs.map((spec, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
+      }
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      SpecRenderer,
+      {
+        spec: child,
+        definitions,
+        options,
+        sendMessage
+      },
+      `${child.type}-${index}-${stableKey(child)}`
+    ));
+    return /* @__PURE__ */ jsxRuntime.jsx(SpecErrorBoundary, { spec, options, children: /* @__PURE__ */ jsxRuntime.jsx(RenderedComponent, { ...spec.props, sendMessage, children }) });
+  };
+  class SpecErrorBoundary extends React.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
+        }
+        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              ComponentRenderer,
+              {
+                raw: codeContent,
+                definitions,
+                options
+              }
+            );
+          }
+        }
+      }
+      return /* @__PURE__ */ jsxRuntime.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 = zod.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 = zod.z.object({
+      type: zod.z.enum([
+        "bar",
+        "line",
+        "area",
+        "pie",
+        "radialBar",
+        "radialArea",
+        "sparkline"
+      ]).describe("Chart type"),
+      data: zod.z.array(zod.z.object({ key: zod.z.string(), data: zod.z.number() })).describe("Array of { key, data } data points"),
+      width: zod.z.number().describe("Chart width in px").optional(),
+      height: zod.z.number().describe("Chart height in px").optional(),
+      title: zod.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__ */ jsxRuntime.jsx(ChartRenderer, { config })
+    };
+  }
   exports2.AgUiEventType = AgUiEventType;
   exports2.AppBar = AppBar;
-  exports2.ChartError = ChartError;
-  exports2.ChartPre = ChartPre;
   exports2.ChartRenderer = ChartRenderer;
   exports2.Chat = Chat;
   exports2.ChatBubble = ChatBubble;
@@ -3809,6 +4130,8 @@ ${response}` : ""}`);
   exports2.ChatSuggestion = ChatSuggestion;
   exports2.ChatSuggestions = ChatSuggestions;
   exports2.CodeHighlighter = CodeHighlighter;
+  exports2.ComponentError = ComponentError;
+  exports2.ComponentRenderer = ComponentRenderer;
   exports2.FileInput = FileInput;
   exports2.Markdown = Markdown;
   exports2.MentionList = MentionList;
@@ -3837,21 +4160,21 @@ ${response}` : ""}`);
   exports2.TableDataCell = TableDataCell;
   exports2.TableHeaderCell = TableHeaderCell;
   exports2.bitcoinMatcher = bitcoinMatcher;
-  exports2.chartComponents = chartComponents;
   exports2.chatTheme = chatTheme;
   exports2.commonRedactMatchers = commonRedactMatchers;
+  exports2.componentCatalog = componentCatalog;
+  exports2.createChartComponentDef = createChartComponentDef;
+  exports2.createComponentPre = createComponentPre;
   exports2.creditCardMatcher = creditCardMatcher;
   exports2.dark = dark;
-  exports2.getChildText = getChildText;
-  exports2.isChartClassName = isChartClassName;
+  exports2.generatePrompt = generatePrompt;
   exports2.light = light;
-  exports2.parseChartConfig = parseChartConfig;
-  exports2.remarkChart = remarkChart;
+  exports2.remarkComponent = remarkComponent;
   exports2.remarkCve = remarkCve;
   exports2.remarkRedact = remarkRedact;
   exports2.ssnMatcher = ssnMatcher;
   exports2.useAgUi = useAgUi;
-  exports2.validateChartData = validateChartData;
+  exports2.validateSpec = validateSpec;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=index.umd.cjs.map