@aigentyc/chat-sdk 0.1.0

package/dist/chunk-RPDJXB3U.js

@@ -0,0 +1,676 @@
+"use client";
+import { VisualizationRenderer } from './chunk-5T4FJ2SR.js';
+import { defineRegistry, JSONUIProvider, Renderer, useStateValue, useValidation } from '@json-render/react';
+import { useMemo, useRef, useCallback, useEffect } from 'react';
+import { shadcnComponents } from '@json-render/shadcn';
+import { defineCatalog } from '@json-render/core';
+import { schema } from '@json-render/react/schema';
+import { shadcnComponentDefinitions } from '@json-render/shadcn/catalog';
+import { z } from 'zod';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var seriesSchema = z.object({
+  dataKey: z.string(),
+  label: z.string(),
+  color: z.string().nullable().optional(),
+  type: z.enum(["line", "bar", "area"]).nullable().optional()
+});
+var chartConfigSchema = z.object({
+  xAxis: z.string().nullable().optional(),
+  series: z.array(seriesSchema),
+  showGrid: z.boolean().nullable().optional(),
+  showLegend: z.boolean().nullable().optional(),
+  stacked: z.boolean().nullable().optional(),
+  valueFormatter: z.enum(["currency", "percent", "number", "compact"]).nullable().optional()
+});
+var chartBaseProps = {
+  title: z.string().nullable().optional(),
+  description: z.string().nullable().optional(),
+  data: z.array(z.record(z.string(), z.unknown())),
+  config: chartConfigSchema,
+  height: z.number().nullable().optional()
+};
+var catalog = defineCatalog(schema, {
+  components: {
+    // ── Layout ──────────────────────────────────────────────
+    Card: shadcnComponentDefinitions.Card,
+    Stack: shadcnComponentDefinitions.Stack,
+    Grid: shadcnComponentDefinitions.Grid,
+    Separator: shadcnComponentDefinitions.Separator,
+    Tabs: shadcnComponentDefinitions.Tabs,
+    Accordion: shadcnComponentDefinitions.Accordion,
+    Collapsible: shadcnComponentDefinitions.Collapsible,
+    Dialog: shadcnComponentDefinitions.Dialog,
+    Drawer: shadcnComponentDefinitions.Drawer,
+    Carousel: shadcnComponentDefinitions.Carousel,
+    // ── Typography ──────────────────────────────────────────
+    Heading: shadcnComponentDefinitions.Heading,
+    Text: shadcnComponentDefinitions.Text,
+    Badge: shadcnComponentDefinitions.Badge,
+    Link: shadcnComponentDefinitions.Link,
+    Alert: shadcnComponentDefinitions.Alert,
+    // ── Media ───────────────────────────────────────────────
+    Image: shadcnComponentDefinitions.Image,
+    Avatar: shadcnComponentDefinitions.Avatar,
+    // ── Data ────────────────────────────────────────────────
+    Table: shadcnComponentDefinitions.Table,
+    // ── Charts & Visualization ────────────────────────────
+    LineChart: {
+      props: z.object(chartBaseProps),
+      description: "Line chart for trends over time. Provide data array + config.xAxis + config.series.",
+      example: {
+        title: "Monthly Sales",
+        data: [{ month: "Jan", sales: 100 }, { month: "Feb", sales: 150 }],
+        config: { xAxis: "month", series: [{ dataKey: "sales", label: "Sales" }] }
+      }
+    },
+    BarChart: {
+      props: z.object(chartBaseProps),
+      description: "Bar chart for comparing categories. Provide data array + config.xAxis + config.series.",
+      example: {
+        title: "Product Comparison",
+        data: [{ product: "A", revenue: 500 }, { product: "B", revenue: 300 }],
+        config: { xAxis: "product", series: [{ dataKey: "revenue", label: "Revenue" }] }
+      }
+    },
+    PieChart: {
+      props: z.object({
+        title: z.string().nullable().optional(),
+        description: z.string().nullable().optional(),
+        data: z.array(z.record(z.string(), z.unknown())),
+        dataKey: z.string(),
+        nameKey: z.string().nullable().optional(),
+        height: z.number().nullable().optional()
+      }),
+      description: "Pie chart for proportional breakdown. Each data item needs a name and a value field.",
+      example: {
+        title: "Market Share",
+        data: [{ name: "Product A", value: 60 }, { name: "Product B", value: 40 }],
+        dataKey: "value",
+        nameKey: "name"
+      }
+    },
+    AreaChart: {
+      props: z.object(chartBaseProps),
+      description: "Area chart for cumulative values over time with gradient fills.",
+      example: {
+        title: "Traffic Volume",
+        data: [{ day: "Mon", visits: 200 }, { day: "Tue", visits: 350 }],
+        config: { xAxis: "day", series: [{ dataKey: "visits", label: "Visits" }] }
+      }
+    },
+    MetricCards: {
+      props: z.object({
+        title: z.string().nullable().optional(),
+        metrics: z.array(
+          z.object({
+            label: z.string(),
+            value: z.string(),
+            unit: z.string().nullable().optional(),
+            trend: z.string().nullable().optional(),
+            trendDirection: z.enum(["up", "down", "neutral"]).nullable().optional(),
+            description: z.string().nullable().optional()
+          })
+        )
+      }),
+      description: "KPI metric cards grid with big numbers and optional trend indicators.",
+      example: {
+        metrics: [
+          { label: "Revenue", value: "$1.2M", trend: "+12%", trendDirection: "up" },
+          { label: "Users", value: "45K", trend: "-3%", trendDirection: "down" }
+        ]
+      }
+    },
+    ComparisonTable: {
+      props: z.object({
+        title: z.string().nullable().optional(),
+        items: z.array(
+          z.object({
+            name: z.string(),
+            highlight: z.boolean().nullable().optional(),
+            features: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()]))
+          })
+        ),
+        fields: z.array(
+          z.object({
+            key: z.string(),
+            label: z.string(),
+            type: z.enum(["text", "boolean", "rating"]).nullable().optional()
+          })
+        )
+      }),
+      description: "Side-by-side comparison table. Items are columns, fields are rows.",
+      example: {
+        title: "Plan Comparison",
+        items: [
+          { name: "Basic", features: { price: "$9/mo", storage: "10GB", support: true } },
+          { name: "Pro", highlight: true, features: { price: "$29/mo", storage: "100GB", support: true } }
+        ],
+        fields: [
+          { key: "price", label: "Price", type: "text" },
+          { key: "storage", label: "Storage", type: "text" },
+          { key: "support", label: "Support", type: "boolean" }
+        ]
+      }
+    },
+    Timeline: {
+      props: z.object({
+        title: z.string().nullable().optional(),
+        events: z.array(
+          z.object({
+            date: z.string().nullable().optional(),
+            title: z.string(),
+            description: z.string().nullable().optional(),
+            status: z.enum(["completed", "current", "upcoming"]).nullable().optional()
+          })
+        )
+      }),
+      description: "Vertical timeline for chronological events or process steps.",
+      example: {
+        events: [
+          { title: "Order Placed", date: "Jan 1", status: "completed" },
+          { title: "Shipped", date: "Jan 3", status: "current" },
+          { title: "Delivered", status: "upcoming" }
+        ]
+      }
+    },
+    ProgressBars: {
+      props: z.object({
+        title: z.string().nullable().optional(),
+        goals: z.array(
+          z.object({
+            label: z.string(),
+            current: z.number(),
+            target: z.number(),
+            unit: z.string().nullable().optional()
+          })
+        )
+      }),
+      description: "Progress bars for goal tracking with current/target values.",
+      example: {
+        goals: [
+          { label: "Revenue", current: 75e3, target: 1e5, unit: "$" },
+          { label: "Users", current: 800, target: 1e3 }
+        ]
+      }
+    },
+    // ── Form ────────────────────────────────────────────────
+    Input: shadcnComponentDefinitions.Input,
+    Textarea: shadcnComponentDefinitions.Textarea,
+    Select: shadcnComponentDefinitions.Select,
+    Checkbox: shadcnComponentDefinitions.Checkbox,
+    Radio: shadcnComponentDefinitions.Radio,
+    Switch: shadcnComponentDefinitions.Switch,
+    Slider: shadcnComponentDefinitions.Slider,
+    Button: shadcnComponentDefinitions.Button,
+    ButtonGroup: shadcnComponentDefinitions.ButtonGroup,
+    Toggle: shadcnComponentDefinitions.Toggle,
+    ToggleGroup: shadcnComponentDefinitions.ToggleGroup,
+    DropdownMenu: shadcnComponentDefinitions.DropdownMenu,
+    // ── Feedback ────────────────────────────────────────────
+    Progress: shadcnComponentDefinitions.Progress,
+    Spinner: shadcnComponentDefinitions.Spinner,
+    Skeleton: shadcnComponentDefinitions.Skeleton,
+    Tooltip: shadcnComponentDefinitions.Tooltip,
+    Popover: shadcnComponentDefinitions.Popover,
+    // ── Navigation ──────────────────────────────────────────
+    Pagination: shadcnComponentDefinitions.Pagination
+  },
+  actions: {
+    navigate_url: {
+      params: z.object({
+        url: z.string(),
+        target: z.enum(["_self", "_blank"]).default("_blank")
+      }),
+      description: "Open a URL in a new tab or the current tab."
+    },
+    send_message: {
+      params: z.object({
+        message: z.string()
+      }),
+      description: "Send a follow-up chat message on behalf of the user."
+    },
+    call_api: {
+      params: z.object({
+        endpoint: z.string(),
+        method: z.enum(["GET", "POST", "PUT", "DELETE"]).default("POST"),
+        body: z.record(z.string(), z.unknown()).optional()
+      }),
+      description: "Make a proxied API call through the platform backend."
+    }
+  }
+});
+var { registry, handlers: createActionHandlers } = defineRegistry(
+  catalog,
+  {
+    components: {
+      // ── Layout ──────────────────────────────────────────────
+      Card: (p) => /* @__PURE__ */ jsx("div", { className: "w-full [&>div]:border-0 [&>div]:shadow-none", children: shadcnComponents.Card(p) }),
+      Stack: shadcnComponents.Stack,
+      Grid: shadcnComponents.Grid,
+      Separator: shadcnComponents.Separator,
+      Tabs: shadcnComponents.Tabs,
+      Accordion: shadcnComponents.Accordion,
+      Collapsible: shadcnComponents.Collapsible,
+      Dialog: shadcnComponents.Dialog,
+      Drawer: shadcnComponents.Drawer,
+      Carousel: shadcnComponents.Carousel,
+      // ── Typography ──────────────────────────────────────────
+      Heading: shadcnComponents.Heading,
+      Text: shadcnComponents.Text,
+      Badge: shadcnComponents.Badge,
+      Link: shadcnComponents.Link,
+      Alert: shadcnComponents.Alert,
+      // ── Media ───────────────────────────────────────────────
+      Image: shadcnComponents.Image,
+      Avatar: shadcnComponents.Avatar,
+      // ── Data ────────────────────────────────────────────────
+      Table: shadcnComponents.Table,
+      // ── Charts & Visualization ────────────────────────────
+      LineChart: ({ props }) => /* @__PURE__ */ jsx(
+        VisualizationRenderer,
+        {
+          spec: {
+            type: "line_chart",
+            title: props.title ?? void 0,
+            description: props.description ?? void 0,
+            data: props.data,
+            config: {
+              xAxis: props.config?.xAxis ?? void 0,
+              series: props.config?.series?.map((s) => ({
+                dataKey: s.dataKey,
+                label: s.label,
+                color: s.color ?? void 0
+              })),
+              showGrid: props.config?.showGrid ?? void 0,
+              showLegend: props.config?.showLegend ?? void 0,
+              stacked: props.config?.stacked ?? void 0,
+              valueFormatter: props.config?.valueFormatter ?? void 0
+            }
+          }
+        }
+      ),
+      BarChart: ({ props }) => /* @__PURE__ */ jsx(
+        VisualizationRenderer,
+        {
+          spec: {
+            type: "bar_chart",
+            title: props.title ?? void 0,
+            description: props.description ?? void 0,
+            data: props.data,
+            config: {
+              xAxis: props.config?.xAxis ?? void 0,
+              series: props.config?.series?.map((s) => ({
+                dataKey: s.dataKey,
+                label: s.label,
+                color: s.color ?? void 0
+              })),
+              showGrid: props.config?.showGrid ?? void 0,
+              showLegend: props.config?.showLegend ?? void 0,
+              stacked: props.config?.stacked ?? void 0,
+              valueFormatter: props.config?.valueFormatter ?? void 0
+            }
+          }
+        }
+      ),
+      PieChart: ({ props }) => /* @__PURE__ */ jsx(
+        VisualizationRenderer,
+        {
+          spec: {
+            type: "pie_chart",
+            title: props.title ?? void 0,
+            description: props.description ?? void 0,
+            data: props.data,
+            config: {
+              series: [{ dataKey: props.dataKey, label: props.dataKey }]
+            }
+          }
+        }
+      ),
+      AreaChart: ({ props }) => /* @__PURE__ */ jsx(
+        VisualizationRenderer,
+        {
+          spec: {
+            type: "area_chart",
+            title: props.title ?? void 0,
+            description: props.description ?? void 0,
+            data: props.data,
+            config: {
+              xAxis: props.config?.xAxis ?? void 0,
+              series: props.config?.series?.map((s) => ({
+                dataKey: s.dataKey,
+                label: s.label,
+                color: s.color ?? void 0
+              })),
+              showGrid: props.config?.showGrid ?? void 0,
+              showLegend: props.config?.showLegend ?? void 0,
+              stacked: props.config?.stacked ?? void 0,
+              valueFormatter: props.config?.valueFormatter ?? void 0
+            }
+          }
+        }
+      ),
+      MetricCards: ({ props }) => /* @__PURE__ */ jsx(
+        VisualizationRenderer,
+        {
+          spec: {
+            type: "metric_cards",
+            title: props.title ?? void 0,
+            metrics: props.metrics?.map((m) => ({
+              label: m.label,
+              value: m.value,
+              unit: m.unit ?? void 0,
+              trend: m.trend ?? void 0,
+              trendDirection: m.trendDirection ?? void 0,
+              description: m.description ?? void 0
+            }))
+          }
+        }
+      ),
+      ComparisonTable: ({ props }) => /* @__PURE__ */ jsx(
+        VisualizationRenderer,
+        {
+          spec: {
+            type: "comparison",
+            title: props.title ?? void 0,
+            items: props.items?.map((item) => ({
+              name: item.name,
+              highlight: item.highlight ?? void 0,
+              features: item.features
+            })),
+            comparisonFields: props.fields?.map((f) => ({
+              key: f.key,
+              label: f.label,
+              type: f.type ?? void 0
+            }))
+          }
+        }
+      ),
+      Timeline: ({ props }) => /* @__PURE__ */ jsx(
+        VisualizationRenderer,
+        {
+          spec: {
+            type: "timeline",
+            title: props.title ?? void 0,
+            events: props.events?.map((e) => ({
+              date: e.date ?? void 0,
+              title: e.title,
+              description: e.description ?? void 0,
+              status: e.status ?? void 0
+            }))
+          }
+        }
+      ),
+      ProgressBars: ({ props }) => /* @__PURE__ */ jsx(
+        VisualizationRenderer,
+        {
+          spec: {
+            type: "progress",
+            title: props.title ?? void 0,
+            goals: props.goals?.map((g) => ({
+              label: g.label,
+              current: g.current,
+              target: g.target,
+              unit: g.unit ?? void 0
+            }))
+          }
+        }
+      ),
+      // ── Form (wrapped with w-full for proper layout) ────────
+      Input: (p) => /* @__PURE__ */ jsx("div", { className: "w-full", children: shadcnComponents.Input(p) }),
+      Textarea: (p) => /* @__PURE__ */ jsx("div", { className: "w-full", children: shadcnComponents.Textarea(p) }),
+      Select: (p) => /* @__PURE__ */ jsx("div", { className: "w-full", children: shadcnComponents.Select(p) }),
+      Checkbox: shadcnComponents.Checkbox,
+      Radio: shadcnComponents.Radio,
+      Switch: shadcnComponents.Switch,
+      Slider: shadcnComponents.Slider,
+      Button: shadcnComponents.Button,
+      ButtonGroup: shadcnComponents.ButtonGroup,
+      Toggle: shadcnComponents.Toggle,
+      ToggleGroup: shadcnComponents.ToggleGroup,
+      DropdownMenu: shadcnComponents.DropdownMenu,
+      // ── Feedback ────────────────────────────────────────────
+      Progress: shadcnComponents.Progress,
+      Spinner: shadcnComponents.Spinner,
+      Skeleton: shadcnComponents.Skeleton,
+      Tooltip: shadcnComponents.Tooltip,
+      Popover: shadcnComponents.Popover,
+      // ── Navigation ──────────────────────────────────────────
+      Pagination: shadcnComponents.Pagination
+    },
+    actions: {
+      navigate_url: async (params) => {
+        if (params?.url) {
+          window.open(params.url, params.target ?? "_blank");
+        }
+      },
+      send_message: async (params) => {
+        console.log("[json-render] send_message action:", params?.message);
+      },
+      call_api: async (params) => {
+        const p = params;
+        const url = p?.endpoint || p?.url;
+        if (!url) {
+          console.warn("[json-render] call_api: missing endpoint/url");
+          return;
+        }
+        const method = (params?.method || "POST").toUpperCase();
+        try {
+          const res = await fetch(url, {
+            method,
+            headers: { "Content-Type": "application/json" },
+            ...method !== "GET" && params?.body ? { body: JSON.stringify(params.body) } : {}
+          });
+          const data = await res.json().catch(() => null);
+          console.log("[json-render] call_api response:", res.status, data);
+          return data;
+        } catch (err) {
+          console.error("[json-render] call_api error:", err);
+        }
+      }
+    }
+  }
+);
+function normalizeSpec(raw) {
+  if (typeof raw.root === "string" && raw.elements) {
+    return raw;
+  }
+  const elements = {};
+  for (const [key, value] of Object.entries(raw)) {
+    if (value && typeof value === "object" && "type" in value) {
+      elements[key] = value;
+    }
+  }
+  return { root: "root", elements };
+}
+function extractSpecState(raw) {
+  const state = raw.state;
+  if (!state || typeof state !== "object") return {};
+  const result = {};
+  function walk(obj, prefix) {
+    for (const [key, value] of Object.entries(obj)) {
+      const path = `${prefix}/${key}`;
+      result[path] = value;
+      if (value && typeof value === "object" && !Array.isArray(value)) {
+        walk(value, path);
+      }
+    }
+  }
+  walk(state, "");
+  return result;
+}
+function deepResolve(value, stateMap) {
+  if (value === null || value === void 0) return value;
+  if (typeof value === "object" && !Array.isArray(value)) {
+    const obj = value;
+    if (Object.keys(obj).length === 1 && typeof obj.$state === "string") {
+      return stateMap[obj.$state];
+    }
+    const resolved = {};
+    for (const [key, val] of Object.entries(obj)) {
+      resolved[key] = deepResolve(val, stateMap);
+    }
+    return resolved;
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => deepResolve(item, stateMap));
+  }
+  return value;
+}
+function JsonRenderResult({
+  spec: rawSpec,
+  data,
+  onSendMessage,
+  className,
+  conversationMessages,
+  apiKey
+}) {
+  const rawSpecObj = rawSpec;
+  const spec = useMemo(() => normalizeSpec(rawSpecObj), [rawSpecObj]);
+  const formConfig = useMemo(
+    () => rawSpecObj._formConfig || null,
+    [rawSpecObj]
+  );
+  const initialState = useMemo(() => {
+    const specState = extractSpecState(rawSpecObj);
+    return {
+      "/data": data,
+      ...conversationMessages ? { "/conversationMessages": conversationMessages } : {},
+      ...specState
+    };
+  }, [data, rawSpecObj, conversationMessages]);
+  const stateRef = useRef(initialState);
+  const validateRef = useRef(null);
+  const handleStateChange = useCallback(
+    (changes) => {
+      for (const { path, value } of changes) {
+        stateRef.current[path] = value;
+      }
+    },
+    []
+  );
+  const handlers = useMemo(
+    () => ({
+      navigate_url: async (params) => {
+        if (params?.url) {
+          window.open(
+            params.url,
+            params.target ?? "_blank"
+          );
+        }
+      },
+      send_message: async (params) => {
+        if (onSendMessage && params?.message && typeof params.message === "string") {
+          onSendMessage(params.message);
+        }
+      },
+      call_api: async (params) => {
+        if (validateRef.current) {
+          const isValid = validateRef.current();
+          if (!isValid) {
+            throw new Error("Validation failed");
+          }
+        }
+        const resolved = deepResolve(
+          params,
+          stateRef.current
+        );
+        const url = resolved?.endpoint || resolved?.url;
+        if (!url) {
+          throw new Error("Missing endpoint/url in call_api params");
+        }
+        const method = (resolved?.method || "POST").toUpperCase();
+        const headers = {
+          "Content-Type": "application/json"
+        };
+        if (apiKey) {
+          headers.Authorization = `Bearer ${apiKey}`;
+        }
+        const res = await fetch(url, {
+          method,
+          headers,
+          credentials: "include",
+          ...method !== "GET" && resolved?.body ? { body: JSON.stringify(resolved.body) } : {}
+        });
+        if (!res.ok) {
+          const errBody = await res.text().catch(() => "");
+          throw new Error(
+            errBody || `Request failed with status ${res.status}`
+          );
+        }
+        const responseData = await res.json().catch(() => null);
+        return responseData;
+      }
+    }),
+    [onSendMessage, apiKey]
+  );
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs(
+    JSONUIProvider,
+    {
+      registry,
+      initialState,
+      handlers,
+      onStateChange: handleStateChange,
+      children: [
+        /* @__PURE__ */ jsx(ValidationBridge, { validateRef }),
+        formConfig ? /* @__PURE__ */ jsx(FormFeedbackWrapper, { formConfig, children: /* @__PURE__ */ jsx(Renderer, { spec, registry }) }) : /* @__PURE__ */ jsx(Renderer, { spec, registry })
+      ]
+    }
+  ) });
+}
+function FormFeedbackWrapper({
+  formConfig,
+  children
+}) {
+  const formSubmitted = useStateValue("/formSubmitted");
+  const formError = useStateValue("/formError");
+  const isSubmitted = formSubmitted === true;
+  const hasError = !!formError && formError !== "" && formError !== false;
+  if (isSubmitted && formConfig.hideFormAfter) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-950/30",
+        role: "alert",
+        children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-green-800 dark:text-green-200", children: formConfig.successMessage || "Submitted successfully!" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isSubmitted && formConfig.successMessage && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "rounded-lg border border-green-200 bg-green-50 p-3 mb-3 dark:border-green-800 dark:bg-green-950/30",
+        role: "alert",
+        children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-green-800 dark:text-green-200", children: formConfig.successMessage })
+      }
+    ),
+    hasError && formConfig.errorMessage && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "rounded-lg border border-red-200 bg-red-50 p-3 mb-3 dark:border-red-800 dark:bg-red-950/30",
+        role: "alert",
+        children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200", children: formConfig.errorMessage })
+      }
+    ),
+    children
+  ] });
+}
+function ValidationBridge({
+  validateRef
+}) {
+  const validation = useValidation();
+  useEffect(() => {
+    if (validation?.validateAll) {
+      validateRef.current = () => validation.validateAll();
+    }
+    return () => {
+      validateRef.current = null;
+    };
+  }, [validation, validateRef]);
+  return null;
+}
+
+export { JsonRenderResult, catalog, registry };
+//# sourceMappingURL=chunk-RPDJXB3U.js.map
+//# sourceMappingURL=chunk-RPDJXB3U.js.map