@tdesign-react/chat 1.0.2-alpha.9 → 1.1.0-alpha.2

package/es/chat-engine/components/json-render/catalog.js

@@ -0,0 +1,559 @@
+/**
+ * tdesign v1.1.0-alpha.1
+ * (c) 2026 tdesign
+ * @license MIT
+ */
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { createCatalog } from '@json-render/core';
+import { z } from 'zod';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var tdesignCatalog = createCatalog({
+  name: "tdesign",
+  components: {
+    Button: {
+      props: z.object({
+        label: z.string().optional(),
+        children: z.string().optional(),
+        variant: z["enum"](["base", "outline", "dashed", "text"]).nullable(),
+        theme: z["enum"](["default", "primary", "success", "warning", "danger"]).nullable(),
+        size: z["enum"](["small", "medium", "large"]).nullable(),
+        disabled: z["boolean"]().nullable(),
+        loading: z["boolean"]().nullable(),
+        block: z["boolean"]().nullable(),
+        action: z.union([z.string(), z.object({
+          name: z.string(),
+          params: z.record(z.any()).optional()
+        })]).nullable()
+      }),
+      description: "TDesign Button component with action support"
+    },
+    Input: {
+      props: z.object({
+        value: z.string().nullable(),
+        placeholder: z.string().nullable(),
+        type: z["enum"](["text", "password", "number"]).nullable(),
+        disabled: z["boolean"]().nullable(),
+        clearable: z["boolean"]().nullable(),
+        maxlength: z.number().nullable(),
+        showLimitNumber: z["boolean"]().nullable()
+      }),
+      description: "TDesign Input component"
+    },
+    TextField: {
+      props: z.object({
+        label: z.string(),
+        name: z.string().optional(),
+        valuePath: z.string(),
+        placeholder: z.string().nullable(),
+        required: z["boolean"]().nullable(),
+        type: z["enum"](["text", "password", "email", "number", "tel"]).nullable(),
+        disabled: z["boolean"]().nullable(),
+        helperText: z.string().nullable()
+      }),
+      description: "Form text field with label and data binding (combines Input + label)"
+    },
+    Text: {
+      props: z.object({
+        content: z.string(),
+        variant: z["enum"](["body", "caption", "label"]).nullable(),
+        color: z["enum"](["default", "primary", "secondary", "success", "warning", "error"]).nullable(),
+        weight: z["enum"](["normal", "medium", "bold"]).nullable()
+      }),
+      description: "Text display component"
+    },
+    Card: {
+      props: z.object({
+        title: z.string().nullable(),
+        description: z.string().nullable(),
+        bordered: z["boolean"]().nullable(),
+        shadow: z["boolean"]().nullable(),
+        loading: z["boolean"]().nullable()
+      }),
+      hasChildren: true,
+      description: "TDesign Card container"
+    },
+    Row: {
+      props: z.object({
+        gutter: z.number().nullable(),
+        justify: z["enum"](["start", "end", "center", "space-around", "space-between"]).nullable(),
+        align: z["enum"](["top", "middle", "bottom"]).nullable()
+      }),
+      hasChildren: true,
+      description: "Grid row layout"
+    },
+    Col: {
+      props: z.object({
+        span: z.number().min(1).max(24).nullable(),
+        offset: z.number().nullable()
+      }),
+      hasChildren: true,
+      description: "Grid column layout"
+    },
+    Space: {
+      props: z.object({
+        direction: z["enum"](["horizontal", "vertical"]).nullable(),
+        size: z.union([z["enum"](["small", "medium", "large"]), z.number(), z.string()]).nullable(),
+        align: z["enum"](["start", "center", "end", "baseline"]).nullable()
+      }),
+      hasChildren: true,
+      description: "Space layout component"
+    },
+    Column: {
+      props: z.object({
+        gap: z.number().nullable(),
+        align: z["enum"](["start", "center", "end", "stretch"]).nullable()
+      }),
+      hasChildren: true,
+      description: "Vertical column layout"
+    },
+    Divider: {
+      props: z.object({
+        layout: z["enum"](["horizontal", "vertical"]).nullable(),
+        dashed: z["boolean"]().nullable()
+      }),
+      description: "Divider line"
+    }
+  },
+  actions: {
+    submit: {
+      description: "Submit form data to server"
+    },
+    reset: {
+      description: "Reset form to initial state (handled by Button component automatically)"
+    },
+    cancel: {
+      description: "Cancel current operation"
+    }
+  },
+  validation: "strict"
+});
+function createCustomCatalog(customConfig) {
+  var tdesignComponents = tdesignCatalog.components;
+  var tdesignActions = tdesignCatalog.actions;
+  return createCatalog({
+    name: customConfig.name,
+    components: _objectSpread(_objectSpread({}, tdesignComponents), customConfig.components || {}),
+    actions: _objectSpread(_objectSpread({}, tdesignActions), customConfig.actions || {}),
+    validation: customConfig.validation || "strict"
+  });
+}
+var tdesignComponentList = tdesignCatalog.componentNames;
+var tdesignActionList = tdesignCatalog.actionNames;
+var BUILTIN_COMPONENT_DOCS = {
+  Button: {
+    description: "Button component with action support",
+    props: {
+      label: "string - Button text (alternative to children)",
+      children: "string - Button text",
+      variant: '"base" | "outline" | "dashed" | "text" - Button style variant',
+      theme: '"default" | "primary" | "success" | "warning" | "danger" - Color theme',
+      size: '"small" | "medium" | "large" - Button size',
+      disabled: "boolean - Whether button is disabled",
+      loading: "boolean - Whether to show loading state",
+      block: "boolean - Whether button should be full width",
+      action: "string | { name: string, params?: object } - Action to trigger on click"
+    }
+  },
+  Input: {
+    description: "Input component for text entry",
+    props: {
+      value: "string - Input value",
+      placeholder: "string - Placeholder text",
+      type: '"text" | "password" | "number" - Input type',
+      disabled: "boolean - Whether input is disabled",
+      clearable: "boolean - Whether to show clear button",
+      maxlength: "number - Maximum input length",
+      showLimitNumber: "boolean - Whether to show character count"
+    }
+  },
+  TextField: {
+    description: "Form text field with label and data binding",
+    props: {
+      label: "string (required) - Field label",
+      name: "string - Form field name",
+      valuePath: "string (required) - Data binding path in data model",
+      placeholder: "string - Placeholder text",
+      required: "boolean - Whether field is required",
+      type: '"text" | "password" | "email" | "number" | "tel" - Input type',
+      disabled: "boolean - Whether field is disabled",
+      disabledPath: "string - Data path to control disabled state dynamically",
+      helperText: "string - Helper text below the field"
+    }
+  },
+  Text: {
+    description: "Text display component",
+    props: {
+      content: "string (required) - Text content to display",
+      variant: '"body" | "caption" | "label" - Text style variant',
+      color: '"default" | "primary" | "secondary" | "success" | "warning" | "error" - Text color',
+      weight: '"normal" | "medium" | "bold" - Font weight'
+    }
+  },
+  Card: {
+    description: "Card container component",
+    props: {
+      title: "string - Card title",
+      description: "string - Card description",
+      bordered: "boolean - Whether to show border",
+      shadow: "boolean - Whether to show shadow",
+      loading: "boolean - Whether to show loading state"
+    },
+    hasChildren: true
+  },
+  Row: {
+    description: "Grid row layout (24-column grid system)",
+    props: {
+      gutter: "number - Gap between columns in pixels",
+      justify: '"start" | "end" | "center" | "space-around" | "space-between" - Horizontal alignment',
+      align: '"top" | "middle" | "bottom" - Vertical alignment'
+    },
+    hasChildren: true
+  },
+  Col: {
+    description: "Grid column layout (use inside Row)",
+    props: {
+      span: "number (1-24) - Column width, out of 24 total",
+      offset: "number - Column offset from left"
+    },
+    hasChildren: true
+  },
+  Space: {
+    description: "Space layout component for spacing children",
+    props: {
+      direction: '"horizontal" | "vertical" - Layout direction',
+      size: '"small" | "medium" | "large" | number - Gap size',
+      align: '"start" | "center" | "end" | "baseline" - Alignment'
+    },
+    hasChildren: true
+  },
+  Column: {
+    description: "Vertical column layout",
+    props: {
+      gap: "number - Gap between children in pixels",
+      align: '"start" | "center" | "end" | "stretch" - Horizontal alignment'
+    },
+    hasChildren: true
+  },
+  Divider: {
+    description: "Divider line",
+    props: {
+      layout: '"horizontal" | "vertical" - Divider direction',
+      dashed: "boolean - Whether to use dashed line"
+    }
+  }
+};
+function zodSchemaToPropsDoc(schema) {
+  var result = {};
+  var shape = schema.shape;
+  for (var _i = 0, _Object$entries = Object.entries(shape); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      key = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    result[key] = zodTypeToString(value);
+  }
+  return result;
+}
+function zodTypeToString(type) {
+  if (type instanceof z.ZodNullable) {
+    return "".concat(zodTypeToString(type.unwrap()), " (nullable)");
+  }
+  if (type instanceof z.ZodOptional) {
+    return "".concat(zodTypeToString(type.unwrap()), " (optional)");
+  }
+  if (type instanceof z.ZodEnum) {
+    var values = type.options;
+    return values.map(function (v) {
+      return "\"".concat(v, "\"");
+    }).join(" | ");
+  }
+  if (type instanceof z.ZodUnion) {
+    var options = type._def.options;
+    return options.map(function (o) {
+      return zodTypeToString(o);
+    }).join(" | ");
+  }
+  if (type instanceof z.ZodString) return "string";
+  if (type instanceof z.ZodNumber) return "number";
+  if (type instanceof z.ZodBoolean) return "boolean";
+  if (type instanceof z.ZodObject) return "object";
+  if (type instanceof z.ZodArray) return "array";
+  return "any";
+}
+function normalizeComponentDoc(doc) {
+  var props;
+  if (doc.props instanceof z.ZodObject) {
+    props = zodSchemaToPropsDoc(doc.props);
+  } else {
+    props = doc.props;
+  }
+  return {
+    description: doc.description,
+    props: props,
+    hasChildren: doc.hasChildren
+  };
+}
+function generateCatalogPrompt() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$name = options.name,
+    name = _options$name === void 0 ? "tdesign" : _options$name,
+    _options$components = options.components,
+    components = _options$components === void 0 ? {} : _options$components,
+    _options$actions = options.actions,
+    actions = _options$actions === void 0 ? {} : _options$actions,
+    _options$includeExamp = options.includeExample,
+    includeExample = _options$includeExamp === void 0 ? true : _options$includeExamp,
+    _options$templateMode = options.templateMode,
+    templateMode = _options$templateMode === void 0 ? "default" : _options$templateMode,
+    customTemplate = options.customTemplate;
+  var mergedComponents = _objectSpread(_objectSpread({}, BUILTIN_COMPONENT_DOCS), components);
+  var allComponents = {};
+  for (var _i2 = 0, _Object$entries2 = Object.entries(mergedComponents); _i2 < _Object$entries2.length; _i2++) {
+    var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+      key = _Object$entries2$_i[0],
+      doc = _Object$entries2$_i[1];
+    allComponents[key] = normalizeComponentDoc(doc);
+  }
+  var builtinActions = {
+    submit: {
+      description: "Submit form data to server"
+    },
+    reset: {
+      description: "Reset form to initial state"
+    },
+    cancel: {
+      description: "Cancel current operation"
+    }
+  };
+  var allActions = _objectSpread(_objectSpread({}, builtinActions), actions);
+  if (templateMode === "custom" && customTemplate) {
+    return customTemplate({
+      name: name,
+      components: allComponents,
+      actions: allActions
+    });
+  }
+  if (templateMode === "a2ui") {
+    return generateA2UIPrompt({
+      name: name,
+      components: allComponents,
+      actions: allActions,
+      includeExample: includeExample
+    });
+  }
+  var lines = ["# ".concat(name, " UI Component Catalog"), "", "You can generate dynamic UI using the following components and JSON schema format.", "", "## Output Format", "", "Generate a JSON object with this structure:", "```json", "{", '  "root": "element_id",  // ID of the root element', '  "elements": {', '    "element_id": {', '      "key": "element_id",  // Same as the key in elements object', '      "type": "ComponentName",  // One of the available components', '      "props": { ... },  // Component-specific props', '      "children": ["child_id_1", "child_id_2"]  // Optional: IDs of child elements', "    }", "  },", '  "data": {  // Optional: Initial data model for data binding', '    "fieldName": "value"', "  }", "}", "```", "", "## Available Components", ""];
+  for (var _i3 = 0, _Object$entries3 = Object.entries(allComponents); _i3 < _Object$entries3.length; _i3++) {
+    var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),
+      name2 = _Object$entries3$_i[0],
+      _doc = _Object$entries3$_i[1];
+    lines.push("### ".concat(name2));
+    lines.push(_doc.description);
+    if (_doc.hasChildren) {
+      lines.push("*This component can have children.*");
+    }
+    lines.push("");
+    lines.push("**Props:**");
+    for (var _i4 = 0, _Object$entries4 = Object.entries(_doc.props); _i4 < _Object$entries4.length; _i4++) {
+      var _Object$entries4$_i = _slicedToArray(_Object$entries4[_i4], 2),
+        propName = _Object$entries4$_i[0],
+        propDesc = _Object$entries4$_i[1];
+      lines.push("- `".concat(propName, "`: ").concat(propDesc));
+    }
+    lines.push("");
+  }
+  lines.push("## Available Actions");
+  lines.push("");
+  lines.push("Actions can be triggered by Button components. Use the `action` prop:");
+  lines.push('- Simple: `"action": "actionName"`');
+  lines.push('- With params: `"action": { "name": "actionName", "params": { ... } }`');
+  lines.push("");
+  for (var _i5 = 0, _Object$entries5 = Object.entries(allActions); _i5 < _Object$entries5.length; _i5++) {
+    var _Object$entries5$_i = _slicedToArray(_Object$entries5[_i5], 2),
+      _name = _Object$entries5$_i[0],
+      def = _Object$entries5$_i[1];
+    lines.push("- `".concat(_name, "`: ").concat(def.description));
+  }
+  lines.push("");
+  lines.push("## Data Binding");
+  lines.push("");
+  lines.push("Use `valuePath` to bind form fields to the data model:");
+  lines.push('- `"valuePath": "user.name"` binds to `data.user.name`');
+  lines.push('- `"disabledPath": "formDisabled"` controls disabled state from `data.formDisabled`');
+  lines.push("");
+  if (includeExample) {
+    lines.push("## Example");
+    lines.push("");
+    lines.push("A simple form with two text fields and a submit button:");
+    lines.push("```json");
+    lines.push(JSON.stringify({
+      root: "card1",
+      elements: {
+        card1: {
+          key: "card1",
+          type: "Card",
+          props: {
+            title: "User Information"
+          },
+          children: ["form_column"]
+        },
+        form_column: {
+          key: "form_column",
+          type: "Column",
+          props: {
+            gap: 16
+          },
+          children: ["name_field", "email_field", "button_row"]
+        },
+        name_field: {
+          key: "name_field",
+          type: "TextField",
+          props: {
+            label: "Name",
+            valuePath: "user.name",
+            placeholder: "Enter your name",
+            required: true
+          }
+        },
+        email_field: {
+          key: "email_field",
+          type: "TextField",
+          props: {
+            label: "Email",
+            valuePath: "user.email",
+            placeholder: "Enter your email",
+            type: "email"
+          }
+        },
+        button_row: {
+          key: "button_row",
+          type: "Space",
+          props: {
+            direction: "horizontal",
+            size: "medium"
+          },
+          children: ["submit_btn", "cancel_btn"]
+        },
+        submit_btn: {
+          key: "submit_btn",
+          type: "Button",
+          props: {
+            children: "Submit",
+            theme: "primary",
+            action: {
+              name: "submit",
+              params: {
+                source: "form"
+              }
+            }
+          }
+        },
+        cancel_btn: {
+          key: "cancel_btn",
+          type: "Button",
+          props: {
+            children: "Cancel",
+            variant: "outline",
+            action: "cancel"
+          }
+        }
+      },
+      data: {
+        user: {
+          name: "",
+          email: ""
+        }
+      }
+    }, null, 2));
+    lines.push("```");
+  }
+  return lines.join("\n");
+}
+function generateA2UIPrompt(context) {
+  var name = context.name,
+    components = context.components,
+    actions = context.actions,
+    _context$includeExamp = context.includeExample,
+    includeExample = _context$includeExamp === void 0 ? true : _context$includeExamp;
+  var lines = ["# ".concat(name, " A2UI Component Catalog"), "", "You can generate dynamic UI using A2UI protocol messages.", "", "## A2UI Message Types", "", "### createSurface", "Create a new UI surface with initial elements:", "```json", "{", '  "type": "createSurface",', '  "surfaceId": "unique_surface_id",', '  "ui": {', '    "root": "element_id",', '    "elements": { ... }', "  },", '  "data": { ... }', "}", "```", "", "### updateComponents", "Update existing UI elements:", "```json", "{", '  "type": "updateComponents",', '  "surfaceId": "existing_surface_id",', '  "elements": { ... }', "}", "```", "", "### updateDataModel", "Update data model without changing UI:", "```json", "{", '  "type": "updateDataModel",', '  "surfaceId": "existing_surface_id",', '  "data": { ... }', "}", "```", "", "### deleteSurface", "Remove a UI surface:", "```json", "{", '  "type": "deleteSurface",', '  "surfaceId": "surface_to_delete"', "}", "```", "", "## Available Components", ""];
+  for (var _i6 = 0, _Object$entries6 = Object.entries(components); _i6 < _Object$entries6.length; _i6++) {
+    var _Object$entries6$_i = _slicedToArray(_Object$entries6[_i6], 2),
+      compName = _Object$entries6$_i[0],
+      doc = _Object$entries6$_i[1];
+    lines.push("### ".concat(compName));
+    lines.push(doc.description);
+    if (doc.hasChildren) {
+      lines.push("*This component can have children.*");
+    }
+    lines.push("");
+    lines.push("**Props:**");
+    for (var _i7 = 0, _Object$entries7 = Object.entries(doc.props); _i7 < _Object$entries7.length; _i7++) {
+      var _Object$entries7$_i = _slicedToArray(_Object$entries7[_i7], 2),
+        propName = _Object$entries7$_i[0],
+        propDesc = _Object$entries7$_i[1];
+      lines.push("- `".concat(propName, "`: ").concat(propDesc));
+    }
+    lines.push("");
+  }
+  lines.push("## Available Actions");
+  lines.push("");
+  for (var _i8 = 0, _Object$entries8 = Object.entries(actions); _i8 < _Object$entries8.length; _i8++) {
+    var _Object$entries8$_i = _slicedToArray(_Object$entries8[_i8], 2),
+      actionName = _Object$entries8$_i[0],
+      def = _Object$entries8$_i[1];
+    lines.push("- `".concat(actionName, "`: ").concat(def.description));
+  }
+  lines.push("");
+  if (includeExample) {
+    lines.push("## Example");
+    lines.push("");
+    lines.push("Create a form surface:");
+    lines.push("```json");
+    lines.push(JSON.stringify({
+      type: "createSurface",
+      surfaceId: "user_form_1",
+      ui: {
+        root: "form_card",
+        elements: {
+          form_card: {
+            key: "form_card",
+            type: "Card",
+            props: {
+              title: "User Form"
+            },
+            children: ["name_field", "submit_btn"]
+          },
+          name_field: {
+            key: "name_field",
+            type: "TextField",
+            props: {
+              label: "Name",
+              valuePath: "user.name"
+            }
+          },
+          submit_btn: {
+            key: "submit_btn",
+            type: "Button",
+            props: {
+              children: "Submit",
+              theme: "primary",
+              action: "submit"
+            }
+          }
+        }
+      },
+      data: {
+        user: {
+          name: ""
+        }
+      }
+    }, null, 2));
+    lines.push("```");
+  }
+  return lines.join("\n");
+}
+
+export { createCustomCatalog, generateCatalogPrompt, tdesignActionList, tdesignCatalog, tdesignComponentList };
+//# sourceMappingURL=catalog.js.map