ToolHost 表单提问

AI 对话过程中,有时需要收集用户信息——创建项目、配置服务、提交工单。这时候 AI 会弹出一个表单卡片,用户填写后提交,AI 继续处理。

slex: "0.1",
  namespace: "example_form_wizard",
  g: {
    submitted: false,
    formData: null,
    fields: { name: "", description: "", type: "web", priority: "medium" },
    submit: function () {
      this.submitted = true;
      this.formData = { name: this.fields.name, description: this.fields.description, type: this.fields.type, priority: this.fields.priority, timestamp: new Date().toLocaleString() };
    }
  },
  layout: {
    "section:toolhost": {
      eyebrow: "ToolHost · 表单提问",
      title: "AI 需要收集信息",
      subtitle: "AI 弹出表单,用户填写后提交,AI 继续处理。",
      "callout:context": {
        tone: "info",
        text: "AI:我需要为你创建一个新项目,请填写以下信息。"
      },
      "grid:fields": {
        columns: 1, mdColumns: 2,
        "input:name": { label: "项目名称", "$value": "g.fields.name", placeholder: "my-project", onchange: "g.fields.name = String($event || '')" },
        "input:description": { label: "项目描述", "$value": "g.fields.description", placeholder: "简短描述项目用途", onchange: "g.fields.description = String($event || '')" },
        "select:type": {
          label: "项目类型",
          "$value": "g.fields.type",
          options: [
            { label: "Web 应用", value: "web" },
            { label: "API 服务", value: "api" },
            { label: "CLI 工具", value: "cli" }
          ],
          onchange: "g.fields.type = String($event)"
        },
        "select:priority": {
          label: "优先级",
          "$value": "g.fields.priority",
          options: [
            { label: "低", value: "low" },
            { label: "中", value: "medium" },
            { label: "高", value: "high" }
          ],
          onchange: "g.fields.priority = String($event)"
        }
      },
      "grid:actions": {
        columns: 2,
        "button:submit": { label: "提交", onclick: "g.submit()" },
        "button:skip": { label: "跳过" }
      },
      "callout:result": {
        "$tone": "g.submitted ? 'success' : 'info'",
        "$text": "g.submitted ? '已提交:' + g.formData.name + '(' + g.formData.type + ')' : '等待用户填写...'"
      },
      "code-block:toolresult": {
        title: "返回给 AI 的 ToolResult",
        language: "json",
        "$code": "g.submitted ? JSON.stringify({ toolCallId: 'call_abc123', toolName: 'create-project', status: 'submitted', value: g.formData }, null, 2) : '// 提交后显示 ToolResult'"
      }
    }
  }
}