@xpert-ai/chatkit-ui 0.3.10 → 0.3.11

package/dist/index.cjs

@@ -10232,6 +10232,7 @@ function RequestUserInputResultCard({
 }
 
 // src/components/thread/messages/widget.tsx
+var import_react7 = require("react");
 var import_a2ui_react = require("@xpert-ai/a2ui-react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function WidgetMessage({ messageId, data }) {
@@ -10240,10 +10241,21 @@ function WidgetMessage({ messageId, data }) {
   const baseSurfaceId = `widget-${messageId}`;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "space-y-3", children: widgets.map((widget, index) => {
     const config = widget?.config;
-    if (!config || typeof config !== "object") {
+    const messages = Array.isArray(widget?.messages) ? widget.messages : [];
+    const surfaceId = widgets.length > 1 ? `${baseSurfaceId}-${index}` : baseSurfaceId;
+    if (messages.length > 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        FlatWidgetSurface,
+        {
+          messages,
+          surfaceId
+        },
+        widget?.name ?? surfaceId
+      );
+    }
+    if (!hasLegacySurface(config)) {
       return null;
     }
-    const surfaceId = widgets.length > 1 ? `${baseSurfaceId}-${index}` : baseSurfaceId;
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       import_a2ui_react.SurfaceRenderer,
       {
@@ -10254,6 +10266,283 @@ function WidgetMessage({ messageId, data }) {
     );
   }) });
 }
+function FlatWidgetSurface({
+  messages,
+  surfaceId
+}) {
+  const { processMessages } = (0, import_a2ui_react.useA2UI)();
+  const normalizedMessages = (0, import_react7.useMemo)(
+    () => normalizeFlatWidgetMessages(messages, surfaceId),
+    [messages, surfaceId]
+  );
+  (0, import_react7.useEffect)(() => {
+    if (normalizedMessages.length === 0) return;
+    processMessages(normalizedMessages);
+    return () => {
+      processMessages([{ deleteSurface: { surfaceId } }]);
+    };
+  }, [normalizedMessages, processMessages, surfaceId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_a2ui_react.A2UIRenderer, { surfaceId });
+}
+function normalizeFlatWidgetMessages(messages, surfaceId) {
+  const generatedTemplateDataPaths = collectTemplateDataPaths(messages);
+  const indexedRowsByPath = collectIndexedRowsByPath(
+    messages,
+    generatedTemplateDataPaths
+  );
+  return messages.map((message) => ({
+    ...message,
+    ...message.beginRendering ? {
+      beginRendering: {
+        ...message.beginRendering,
+        surfaceId
+      }
+    } : {},
+    ...message.surfaceUpdate ? {
+      surfaceUpdate: {
+        ...message.surfaceUpdate,
+        surfaceId,
+        components: normalizeComponentInstances(
+          message.surfaceUpdate.components
+        )
+      }
+    } : {},
+    ...message.dataModelUpdate ? {
+      dataModelUpdate: normalizeDataModelUpdate(
+        message.dataModelUpdate,
+        surfaceId,
+        indexedRowsByPath
+      )
+    } : {},
+    ...message.deleteSurface ? {
+      deleteSurface: {
+        ...message.deleteSurface,
+        surfaceId
+      }
+    } : {}
+  }));
+}
+function normalizeDataModelUpdate(dataModelUpdate, surfaceId, indexedRowsByPath) {
+  const path = dataModelUpdate.path ?? "/";
+  const indexedRows = indexedRowsByPath.get(path);
+  if (!indexedRows) {
+    return {
+      ...dataModelUpdate,
+      surfaceId
+    };
+  }
+  return {
+    ...dataModelUpdate,
+    surfaceId,
+    contents: [
+      {
+        key: ".",
+        valueString: JSON.stringify(indexedRows)
+      }
+    ]
+  };
+}
+function collectTemplateDataPaths(messages) {
+  const paths = /* @__PURE__ */ new Set();
+  for (const message of messages) {
+    for (const component of message.surfaceUpdate?.components ?? []) {
+      const componentType = getComponentType(component);
+      if (componentType !== "List") continue;
+      const properties = getComponentProperties(component);
+      const children = getObjectProperty(properties, "children");
+      const template = getObjectProperty(children, "template");
+      const dataPath = getStringProperty(template, "dataPath") ?? getStringProperty(template, "dataBinding");
+      if (dataPath) {
+        paths.add(dataPath);
+      }
+    }
+  }
+  return paths;
+}
+function collectIndexedRowsByPath(messages, generatedTemplateDataPaths) {
+  const indexedRowsByPath = /* @__PURE__ */ new Map();
+  for (const message of messages) {
+    const dataModelUpdate = message.dataModelUpdate;
+    const path = dataModelUpdate?.path ?? "/";
+    if (!dataModelUpdate || !generatedTemplateDataPaths.has(path)) {
+      continue;
+    }
+    const indexedRows = convertIndexedValueMapsToRows(
+      dataModelUpdate.contents
+    );
+    if (indexedRows) {
+      indexedRowsByPath.set(path, indexedRows);
+    }
+  }
+  return indexedRowsByPath;
+}
+function convertIndexedValueMapsToRows(contents) {
+  const rows = [];
+  let hasIndexedRows = false;
+  for (const item of contents) {
+    const value = readValueMapValue(item);
+    if (value === void 0) {
+      continue;
+    }
+    const match = item.key.match(/^(?:r(\d+)|row_(\d+))_(.+)$/);
+    if (!match) {
+      rows[0] = {
+        ...rows[0] ?? {},
+        [item.key]: value
+      };
+      continue;
+    }
+    const index = Number(match[1] ?? match[2]);
+    const field = match[3];
+    if (!Number.isInteger(index)) {
+      continue;
+    }
+    rows[index] = {
+      ...rows[index] ?? {},
+      [field]: value
+    };
+    hasIndexedRows = true;
+  }
+  return hasIndexedRows ? rows.map((row) => row ?? {}) : void 0;
+}
+function readValueMapValue(valueMap) {
+  if (valueMap.valueString !== void 0) return valueMap.valueString;
+  if (valueMap.valueNumber !== void 0) return valueMap.valueNumber;
+  if (valueMap.valueBoolean !== void 0) return valueMap.valueBoolean;
+  if (Array.isArray(valueMap.valueMap)) {
+    return valueMap.valueMap.reduce((result, item) => {
+      const value = readValueMapValue(item);
+      if (value !== void 0) {
+        result[item.key] = value;
+      }
+      return result;
+    }, {});
+  }
+  return void 0;
+}
+function normalizeComponentInstances(components) {
+  return components.flatMap((component) => {
+    const componentType = getComponentType(component);
+    const properties = getComponentProperties(component);
+    if (!componentType || !properties) {
+      return [component];
+    }
+    const normalizedProperties = normalizeComponentProperties(
+      componentType,
+      properties
+    );
+    const normalizedComponent = {
+      ...component,
+      component: {
+        [componentType]: normalizedProperties
+      }
+    };
+    const templateComponent = getGeneratedTemplateComponent(properties);
+    if (!templateComponent) {
+      return [normalizedComponent];
+    }
+    return [
+      normalizedComponent,
+      ...normalizeComponentInstances([templateComponent])
+    ];
+  });
+}
+function normalizeComponentProperties(componentType, properties) {
+  const normalized = Object.fromEntries(
+    Object.entries(properties).map(([key, value]) => [
+      key,
+      normalizePropertyValue(key, value)
+    ])
+  );
+  if (componentType !== "List") {
+    return normalized;
+  }
+  const children = getObjectProperty(normalized, "children");
+  const template = getObjectProperty(children, "template");
+  const dataPath = getStringProperty(template, "dataPath");
+  const itemTemplate = getObjectProperty(template, "itemTemplate");
+  const componentId = getStringProperty(template, "componentId") ?? getStringProperty(itemTemplate, "id");
+  if (!dataPath || !componentId) {
+    return normalized;
+  }
+  const direction = getStringProperty(children, "direction");
+  if (direction && !normalized.direction) {
+    normalized.direction = direction;
+  }
+  normalized.children = {
+    template: {
+      componentId,
+      dataBinding: dataPath
+    }
+  };
+  return normalized;
+}
+function normalizePropertyValue(key, value) {
+  if (key === "text" && typeof value === "string") {
+    return { literalString: value };
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => normalizePropertyValue(key, item));
+  }
+  if (!isPlainObject2(value)) {
+    return value;
+  }
+  return Object.fromEntries(
+    Object.entries(value).map(([childKey, childValue]) => [
+      childKey,
+      childKey === "path" && typeof childValue === "string" ? normalizeGeneratedIndexedPath(childValue) : normalizePropertyValue(childKey, childValue)
+    ])
+  );
+}
+function normalizeGeneratedIndexedPath(path) {
+  const match = path.match(/^\/[^/]+\/r\{index\}_(.+)$/);
+  return match?.[1] ?? path;
+}
+function getGeneratedTemplateComponent(properties) {
+  const children = getObjectProperty(properties, "children");
+  const template = getObjectProperty(children, "template");
+  const itemTemplate = getObjectProperty(template, "itemTemplate");
+  const id = getStringProperty(itemTemplate, "id");
+  const component = getObjectProperty(itemTemplate, "component");
+  if (!id || !component) {
+    return void 0;
+  }
+  return {
+    id,
+    component
+  };
+}
+function getComponentType(component) {
+  const entries = Object.keys(component.component ?? {});
+  return entries.length === 1 ? entries[0] : void 0;
+}
+function getComponentProperties(component) {
+  const componentType = getComponentType(component);
+  if (!componentType) {
+    return void 0;
+  }
+  return getObjectProperty(component.component, componentType);
+}
+function getObjectProperty(value, key) {
+  if (!isPlainObject2(value)) {
+    return void 0;
+  }
+  const property = value[key];
+  return isPlainObject2(property) ? property : void 0;
+}
+function getStringProperty(value, key) {
+  if (!isPlainObject2(value)) {
+    return void 0;
+  }
+  const property = value[key];
+  return typeof property === "string" ? property : void 0;
+}
+function isPlainObject2(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function hasLegacySurface(surface) {
+  return !!surface?.componentTree;
+}
 
 // src/components/thread/messages/ai.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");

package/dist/index.js

@@ -10322,7 +10322,12 @@ function RequestUserInputResultCard({
 }
 
 // src/components/thread/messages/widget.tsx
-import { SurfaceRenderer } from "@xpert-ai/a2ui-react";
+import { useEffect as useEffect15, useMemo as useMemo10 } from "react";
+import {
+  A2UIRenderer,
+  SurfaceRenderer,
+  useA2UI
+} from "@xpert-ai/a2ui-react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 function WidgetMessage({ messageId, data }) {
   const widgets = Array.isArray(data.widgets) ? data.widgets : [];
@@ -10330,10 +10335,21 @@ function WidgetMessage({ messageId, data }) {
   const baseSurfaceId = `widget-${messageId}`;
   return /* @__PURE__ */ jsx38("div", { className: "space-y-3", children: widgets.map((widget, index) => {
     const config = widget?.config;
-    if (!config || typeof config !== "object") {
+    const messages = Array.isArray(widget?.messages) ? widget.messages : [];
+    const surfaceId = widgets.length > 1 ? `${baseSurfaceId}-${index}` : baseSurfaceId;
+    if (messages.length > 0) {
+      return /* @__PURE__ */ jsx38(
+        FlatWidgetSurface,
+        {
+          messages,
+          surfaceId
+        },
+        widget?.name ?? surfaceId
+      );
+    }
+    if (!hasLegacySurface(config)) {
       return null;
     }
-    const surfaceId = widgets.length > 1 ? `${baseSurfaceId}-${index}` : baseSurfaceId;
     return /* @__PURE__ */ jsx38(
       SurfaceRenderer,
       {
@@ -10344,6 +10360,283 @@ function WidgetMessage({ messageId, data }) {
     );
   }) });
 }
+function FlatWidgetSurface({
+  messages,
+  surfaceId
+}) {
+  const { processMessages } = useA2UI();
+  const normalizedMessages = useMemo10(
+    () => normalizeFlatWidgetMessages(messages, surfaceId),
+    [messages, surfaceId]
+  );
+  useEffect15(() => {
+    if (normalizedMessages.length === 0) return;
+    processMessages(normalizedMessages);
+    return () => {
+      processMessages([{ deleteSurface: { surfaceId } }]);
+    };
+  }, [normalizedMessages, processMessages, surfaceId]);
+  return /* @__PURE__ */ jsx38(A2UIRenderer, { surfaceId });
+}
+function normalizeFlatWidgetMessages(messages, surfaceId) {
+  const generatedTemplateDataPaths = collectTemplateDataPaths(messages);
+  const indexedRowsByPath = collectIndexedRowsByPath(
+    messages,
+    generatedTemplateDataPaths
+  );
+  return messages.map((message) => ({
+    ...message,
+    ...message.beginRendering ? {
+      beginRendering: {
+        ...message.beginRendering,
+        surfaceId
+      }
+    } : {},
+    ...message.surfaceUpdate ? {
+      surfaceUpdate: {
+        ...message.surfaceUpdate,
+        surfaceId,
+        components: normalizeComponentInstances(
+          message.surfaceUpdate.components
+        )
+      }
+    } : {},
+    ...message.dataModelUpdate ? {
+      dataModelUpdate: normalizeDataModelUpdate(
+        message.dataModelUpdate,
+        surfaceId,
+        indexedRowsByPath
+      )
+    } : {},
+    ...message.deleteSurface ? {
+      deleteSurface: {
+        ...message.deleteSurface,
+        surfaceId
+      }
+    } : {}
+  }));
+}
+function normalizeDataModelUpdate(dataModelUpdate, surfaceId, indexedRowsByPath) {
+  const path = dataModelUpdate.path ?? "/";
+  const indexedRows = indexedRowsByPath.get(path);
+  if (!indexedRows) {
+    return {
+      ...dataModelUpdate,
+      surfaceId
+    };
+  }
+  return {
+    ...dataModelUpdate,
+    surfaceId,
+    contents: [
+      {
+        key: ".",
+        valueString: JSON.stringify(indexedRows)
+      }
+    ]
+  };
+}
+function collectTemplateDataPaths(messages) {
+  const paths = /* @__PURE__ */ new Set();
+  for (const message of messages) {
+    for (const component of message.surfaceUpdate?.components ?? []) {
+      const componentType = getComponentType(component);
+      if (componentType !== "List") continue;
+      const properties = getComponentProperties(component);
+      const children = getObjectProperty(properties, "children");
+      const template = getObjectProperty(children, "template");
+      const dataPath = getStringProperty(template, "dataPath") ?? getStringProperty(template, "dataBinding");
+      if (dataPath) {
+        paths.add(dataPath);
+      }
+    }
+  }
+  return paths;
+}
+function collectIndexedRowsByPath(messages, generatedTemplateDataPaths) {
+  const indexedRowsByPath = /* @__PURE__ */ new Map();
+  for (const message of messages) {
+    const dataModelUpdate = message.dataModelUpdate;
+    const path = dataModelUpdate?.path ?? "/";
+    if (!dataModelUpdate || !generatedTemplateDataPaths.has(path)) {
+      continue;
+    }
+    const indexedRows = convertIndexedValueMapsToRows(
+      dataModelUpdate.contents
+    );
+    if (indexedRows) {
+      indexedRowsByPath.set(path, indexedRows);
+    }
+  }
+  return indexedRowsByPath;
+}
+function convertIndexedValueMapsToRows(contents) {
+  const rows = [];
+  let hasIndexedRows = false;
+  for (const item of contents) {
+    const value = readValueMapValue(item);
+    if (value === void 0) {
+      continue;
+    }
+    const match = item.key.match(/^(?:r(\d+)|row_(\d+))_(.+)$/);
+    if (!match) {
+      rows[0] = {
+        ...rows[0] ?? {},
+        [item.key]: value
+      };
+      continue;
+    }
+    const index = Number(match[1] ?? match[2]);
+    const field = match[3];
+    if (!Number.isInteger(index)) {
+      continue;
+    }
+    rows[index] = {
+      ...rows[index] ?? {},
+      [field]: value
+    };
+    hasIndexedRows = true;
+  }
+  return hasIndexedRows ? rows.map((row) => row ?? {}) : void 0;
+}
+function readValueMapValue(valueMap) {
+  if (valueMap.valueString !== void 0) return valueMap.valueString;
+  if (valueMap.valueNumber !== void 0) return valueMap.valueNumber;
+  if (valueMap.valueBoolean !== void 0) return valueMap.valueBoolean;
+  if (Array.isArray(valueMap.valueMap)) {
+    return valueMap.valueMap.reduce((result, item) => {
+      const value = readValueMapValue(item);
+      if (value !== void 0) {
+        result[item.key] = value;
+      }
+      return result;
+    }, {});
+  }
+  return void 0;
+}
+function normalizeComponentInstances(components) {
+  return components.flatMap((component) => {
+    const componentType = getComponentType(component);
+    const properties = getComponentProperties(component);
+    if (!componentType || !properties) {
+      return [component];
+    }
+    const normalizedProperties = normalizeComponentProperties(
+      componentType,
+      properties
+    );
+    const normalizedComponent = {
+      ...component,
+      component: {
+        [componentType]: normalizedProperties
+      }
+    };
+    const templateComponent = getGeneratedTemplateComponent(properties);
+    if (!templateComponent) {
+      return [normalizedComponent];
+    }
+    return [
+      normalizedComponent,
+      ...normalizeComponentInstances([templateComponent])
+    ];
+  });
+}
+function normalizeComponentProperties(componentType, properties) {
+  const normalized = Object.fromEntries(
+    Object.entries(properties).map(([key, value]) => [
+      key,
+      normalizePropertyValue(key, value)
+    ])
+  );
+  if (componentType !== "List") {
+    return normalized;
+  }
+  const children = getObjectProperty(normalized, "children");
+  const template = getObjectProperty(children, "template");
+  const dataPath = getStringProperty(template, "dataPath");
+  const itemTemplate = getObjectProperty(template, "itemTemplate");
+  const componentId = getStringProperty(template, "componentId") ?? getStringProperty(itemTemplate, "id");
+  if (!dataPath || !componentId) {
+    return normalized;
+  }
+  const direction = getStringProperty(children, "direction");
+  if (direction && !normalized.direction) {
+    normalized.direction = direction;
+  }
+  normalized.children = {
+    template: {
+      componentId,
+      dataBinding: dataPath
+    }
+  };
+  return normalized;
+}
+function normalizePropertyValue(key, value) {
+  if (key === "text" && typeof value === "string") {
+    return { literalString: value };
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => normalizePropertyValue(key, item));
+  }
+  if (!isPlainObject2(value)) {
+    return value;
+  }
+  return Object.fromEntries(
+    Object.entries(value).map(([childKey, childValue]) => [
+      childKey,
+      childKey === "path" && typeof childValue === "string" ? normalizeGeneratedIndexedPath(childValue) : normalizePropertyValue(childKey, childValue)
+    ])
+  );
+}
+function normalizeGeneratedIndexedPath(path) {
+  const match = path.match(/^\/[^/]+\/r\{index\}_(.+)$/);
+  return match?.[1] ?? path;
+}
+function getGeneratedTemplateComponent(properties) {
+  const children = getObjectProperty(properties, "children");
+  const template = getObjectProperty(children, "template");
+  const itemTemplate = getObjectProperty(template, "itemTemplate");
+  const id = getStringProperty(itemTemplate, "id");
+  const component = getObjectProperty(itemTemplate, "component");
+  if (!id || !component) {
+    return void 0;
+  }
+  return {
+    id,
+    component
+  };
+}
+function getComponentType(component) {
+  const entries = Object.keys(component.component ?? {});
+  return entries.length === 1 ? entries[0] : void 0;
+}
+function getComponentProperties(component) {
+  const componentType = getComponentType(component);
+  if (!componentType) {
+    return void 0;
+  }
+  return getObjectProperty(component.component, componentType);
+}
+function getObjectProperty(value, key) {
+  if (!isPlainObject2(value)) {
+    return void 0;
+  }
+  const property = value[key];
+  return isPlainObject2(property) ? property : void 0;
+}
+function getStringProperty(value, key) {
+  if (!isPlainObject2(value)) {
+    return void 0;
+  }
+  const property = value[key];
+  return typeof property === "string" ? property : void 0;
+}
+function isPlainObject2(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function hasLegacySurface(surface) {
+  return !!surface?.componentTree;
+}
 
 // src/components/thread/messages/ai.tsx
 import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpert-ai/chatkit-ui",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "ChatKit UI.",
   "type": "module",
   "sideEffects": false,
@@ -59,9 +59,9 @@
     "tw-animate-css": "^1.4.0",
     "uuid": "^11.1.0",
     "zod": "^4.1.12",
-    "@xpert-ai/chatkit-types": "~0.3.8",
-    "@xpert-ai/a2ui-react": "~0.1.0",
-    "@xpert-ai/chatkit-web-shared": "~0.3.3"
+    "@xpert-ai/chatkit-types": "~0.3.9",
+    "@xpert-ai/chatkit-web-shared": "~0.3.3",
+    "@xpert-ai/a2ui-react": "~0.1.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/dist/app/assets/channel-XvEFGDvE.js

@@ -1 +0,0 @@
-import{aq as o,ar as n}from"./index-DZgiecHp.js";const t=(r,a)=>o.lang.round(n.parse(r)[a]);export{t as c};

package/dist/app/assets/classDiagram-6PBFFD2Q-Bs9iSMe-.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-o2O1F-vl.js";import{_ as i}from"./index-DZgiecHp.js";import"./chunk-FMBD7UC4-C6HcxS8j.js";import"./chunk-YZCP3GAM-Jbicl8Oz.js";import"./chunk-55IACEB6-DNGdIDCz.js";import"./chunk-EDXVE4YY-NBPNQat3.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/classDiagram-v2-HSJHXN6E-Bs9iSMe-.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-o2O1F-vl.js";import{_ as i}from"./index-DZgiecHp.js";import"./chunk-FMBD7UC4-C6HcxS8j.js";import"./chunk-YZCP3GAM-Jbicl8Oz.js";import"./chunk-55IACEB6-DNGdIDCz.js";import"./chunk-EDXVE4YY-NBPNQat3.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/clone-Dw-mRGet.js

@@ -1 +0,0 @@
-import{b as r}from"./graph-V2Lk_LJQ.js";var e=4;function a(o){return r(o,e)}export{a as c};

package/dist/app/assets/stateDiagram-v2-QKLJ7IA2-DbJ12qyy.js

@@ -1 +0,0 @@
-import{s as t,b as r,a,S as s}from"./chunk-OYMX7WX6-CqNUNWBa.js";import{_ as i}from"./index-DZgiecHp.js";import"./chunk-55IACEB6-DNGdIDCz.js";import"./chunk-EDXVE4YY-NBPNQat3.js";var l={parser:a,get db(){return new s(2)},renderer:r,styles:t,init:i(e=>{e.state||(e.state={}),e.state.arrowMarkerAbsolute=e.arrowMarkerAbsolute},"init")};export{l as diagram};