@amaster.ai/components-templates 1.3.0

package/components/ai-assistant/template/mock/mock-data.ts

@@ -0,0 +1,643 @@
+import type { Conversation, UIRenderMessage } from "../types";
+
+export const mockUIConversations: {
+  type: "ui";
+  spec: any;
+}[] = [
+  {
+    type: "ui",
+    spec: {
+      root: "table-card",
+      elements: {
+        "table-card": {
+          type: "Card",
+          props: { title: "用户数据", description: "最近活跃用户列表" },
+          children: ["table-1"],
+        },
+        "table-1": {
+          type: "Table",
+          props: {
+            columns: ["用户名", "邮箱", "角色", "状态"],
+            rows: [
+              ["张三", "zhangsan@example.com", "管理员", "活跃"],
+              ["李四", "lisi@example.com", "用户", "活跃"],
+              ["王五", "wangwu@example.com", "用户", "禁用"],
+              ["赵六", "zhaoliu@example.com", "编辑", "活跃"],
+            ],
+          },
+        },
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "status-1",
+      elements: {
+        "status-1": {
+          type: "Alert",
+          props: {
+            type: "success",
+            title: "系统运行正常",
+            message: "所有服务都在正常运行，无需处理",
+          },
+        },
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "progress-card",
+      elements: {
+        "progress-card": {
+          type: "Card",
+          props: { title: "任务进度" },
+          children: ["progress-1"],
+        },
+        "progress-1": {
+          type: "Progress",
+          props: {
+            value: 65,
+            max: 100,
+            label: "正在处理数据...",
+          },
+        },
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "stats-card",
+      elements: {
+        "stats-card": {
+          type: "Card",
+          props: { title: "服务器配置" },
+          children: ["stats-stack"],
+        },
+        "stats-stack": {
+          type: "Stack",
+          props: { direction: "vertical", gap: "sm" },
+          children: [
+            "stat-cpu",
+            "stat-memory",
+            "stat-storage",
+            "stat-status",
+            "stat-version",
+          ],
+        },
+        "stat-cpu": {
+          type: "Text",
+          props: { text: "CPU: 8 核", variant: "body" },
+        },
+        "stat-memory": {
+          type: "Text",
+          props: { text: "内存: 32 GB", variant: "body" },
+        },
+        "stat-storage": {
+          type: "Text",
+          props: { text: "存储: 500 GB SSD", variant: "body" },
+        },
+        "stat-status": {
+          type: "Stack",
+          props: { direction: "horizontal", gap: "sm", align: "center" },
+          children: ["status-text", "status-badge"],
+        },
+        "status-text": {
+          type: "Text",
+          props: { text: "状态:", variant: "body" },
+        },
+        "status-badge": {
+          type: "Badge",
+          props: { text: "运行中", variant: "default" },
+        },
+        "stat-version": {
+          type: "Text",
+          props: { text: "版本: v2.5.1", variant: "muted" },
+        },
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "actions-card",
+      elements: {
+        "actions-card": {
+          type: "Card",
+          props: {
+            title: "确认操作",
+            description: "您确定要删除此文件吗？此操作不可撤销。",
+          },
+          children: ["actions-stack"],
+        },
+        "actions-stack": {
+          type: "Stack",
+          props: { direction: "horizontal", gap: "md" },
+          children: ["btn-confirm", "btn-cancel"],
+        },
+        "btn-confirm": {
+          type: "Button",
+          props: { label: "确认删除", variant: "danger" },
+          on: {
+            press: {
+              action: "confirmSubmit"
+            },
+          },
+        },
+        "btn-cancel": {
+          type: "Button",
+          props: { label: "取消", variant: "secondary" },
+          on: {
+            press: {
+              action: "confirmCancel",
+            },
+          },
+        }
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "main-card",
+      elements: {
+        "main-card": {
+          type: "Card",
+          props: {
+            title: "系统概览",
+            description: "当前系统的整体运行状态",
+          },
+          children: ["stats-grid"],
+        },
+        "stats-grid": {
+          type: "Grid",
+          props: { columns: 3, gap: "md" },
+          children: ["stat-users", "stat-rps", "stat-error"],
+        },
+        "stat-users": {
+          type: "Card",
+          props: {},
+          children: ["users-heading", "users-value"],
+        },
+        "users-heading": {
+          type: "Heading",
+          props: { level: "h4", text: "在线用户" },
+        },
+        "users-value": {
+          type: "Text",
+          props: { text: "1,234", variant: "lead" },
+        },
+        "stat-rps": {
+          type: "Card",
+          props: {},
+          children: ["rps-heading", "rps-value"],
+        },
+        "rps-heading": {
+          type: "Heading",
+          props: { level: "h4", text: "请求/秒" },
+        },
+        "rps-value": {
+          type: "Text",
+          props: { text: "856", variant: "lead" },
+        },
+        "stat-error": {
+          type: "Card",
+          props: {},
+          children: ["error-heading", "error-badge"],
+        },
+        "error-heading": {
+          type: "Heading",
+          props: { level: "h4", text: "错误率" },
+        },
+        "error-badge": {
+          type: "Badge",
+          props: { text: "0.12%", variant: "secondary" },
+        },
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "login-container",
+      elements: {
+        "login-container": {
+          type: "Card",
+          props: {
+            title: "登录",
+            description: "请输入您的账号和密码",
+            maxWidth: "sm",
+            centered: true,
+          },
+          children: ["login-form"],
+          visible: {
+            $state: "/showForm",
+            not: true,
+          },
+        },
+        "login-form": {
+          type: "Stack",
+          props: {
+            direction: "vertical",
+            gap: "md",
+          },
+          children: ["email-input", "password-input", "submit-button"],
+        },
+        "email-input": {
+          type: "Input",
+          props: {
+            label: "邮箱",
+            name: "email",
+            type: "email",
+            placeholder: "请输入邮箱",
+            value: {
+              $bindState: "/form/email",
+            },
+            checks: [
+              {
+                type: "required",
+                message: "邮箱不能为空",
+              },
+              {
+                type: "email",
+                message: "请输入有效的邮箱地址",
+              },
+            ],
+          },
+          children: [],
+        },
+        "password-input": {
+          type: "Input",
+          props: {
+            label: "密码",
+            name: "password",
+            type: "password",
+            placeholder: "请输入密码",
+            value: {
+              $bindState: "/form/password",
+            },
+            checks: [
+              {
+                type: "required",
+                message: "密码不能为空",
+              },
+              {
+                type: "minLength",
+                message: "密码至少需要6个字符",
+                args: {
+                  min: 6,
+                },
+              },
+            ],
+          },
+          children: [],
+        },
+        "submit-button": {
+          type: "Button",
+          props: {
+            label: "登录",
+            variant: "primary",
+          },
+          on: {
+            press: {
+              action: "validateForm",
+              params: {
+                statePath: "/formValidation",
+              },
+            },
+          },
+          children: [],
+          watch: {
+            "/formValidation": {
+              action: "submitLogin",
+              params: {
+                email: {
+                  $state: "/form/email",
+                },
+                password: {
+                  $state: "/form/password",
+                },
+              },
+            },
+          },
+        },
+      },
+      state: {
+        form: {
+          email: "",
+          password: "",
+        },
+        formValidation: {
+          valid: false,
+          errors: {},
+        },
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "accordion-card",
+      elements: {
+        "accordion-card": {
+          type: "Card",
+          props: { title: "常见问题" },
+          children: ["accordion-1"],
+        },
+        "accordion-1": {
+          type: "Accordion",
+          props: {
+            type: "single",
+            items: [
+              {
+                title: "如何重置密码？",
+                content: "点击登录页面的'忘记密码'链接，按提示操作。",
+              },
+              {
+                title: "支持哪些支付方式？",
+                content: "我们支持支付宝、微信支付、银行卡等多种支付方式。",
+              },
+              {
+                title: "如何联系客服？",
+                content: "您可以通过在线客服、电话或邮件联系我们。",
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "chart-card",
+      elements: {
+        "chart-card": {
+          type: "Card",
+          props: {
+            title: "月度销售数据",
+            description: "2024年上半年销售额统计",
+          },
+          children: ["bar-chart-1"],
+        },
+        "bar-chart-1": {
+          type: "BarChart",
+          props: {
+            data: [
+              { month: "1月", sales: 12000 },
+              { month: "2月", sales: 19000 },
+              { month: "3月", sales: 15000 },
+              { month: "4月", sales: 22000 },
+              { month: "5月", sales: 28000 },
+              { month: "6月", sales: 32000 },
+            ],
+            xKey: "month",
+            yKey: "sales",
+            height: 300,
+          },
+        },
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "line-chart-card",
+      elements: {
+        "line-chart-card": {
+          type: "Card",
+          props: { title: "用户增长趋势", description: "最近7天活跃用户变化" },
+          children: ["line-chart-1"],
+        },
+        "line-chart-1": {
+          type: "LineChart",
+          props: {
+            data: [
+              { day: "周一", users: 1200 },
+              { day: "周二", users: 1350 },
+              { day: "周三", users: 1100 },
+              { day: "周四", users: 1580 },
+              { day: "周五", users: 1890 },
+              { day: "周六", users: 2100 },
+              { day: "周日", users: 1950 },
+            ],
+            xKey: "day",
+            yKey: "users",
+            height: 300,
+          },
+        },
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "pie-chart-card",
+      elements: {
+        "pie-chart-card": {
+          type: "Card",
+          props: { title: "用户分布", description: "按设备类型统计" },
+          children: ["pie-chart-1"],
+        },
+        "pie-chart-1": {
+          type: "PieChart",
+          props: {
+            data: [
+              { name: "桌面端", value: 450 },
+              { name: "移动端", value: 680 },
+              { name: "平板", value: 120 },
+              { name: "其他", value: 50 },
+            ],
+            nameKey: "name",
+            valueKey: "value",
+            height: 300,
+          },
+        },
+      },
+    },
+  },
+
+  {
+    type: "ui",
+    spec: {
+      root: "dashboard-card",
+      elements: {
+        "dashboard-card": {
+          type: "Card",
+          props: { title: "数据看板", description: "核心业务指标监控" },
+          children: ["dashboard-grid"],
+        },
+        "dashboard-grid": {
+          type: "Grid",
+          props: { columns: 2, gap: "md" },
+          children: ["area-chart-card", "stats-list-card"],
+        },
+        "area-chart-card": {
+          type: "Card",
+          props: { title: "收入趋势" },
+          children: ["area-chart-1"],
+        },
+        "area-chart-1": {
+          type: "AreaChart",
+          props: {
+            data: [
+              { month: "1月", revenue: 45000 },
+              { month: "2月", revenue: 52000 },
+              { month: "3月", revenue: 48000 },
+              { month: "4月", revenue: 61000 },
+              { month: "5月", revenue: 75000 },
+              { month: "6月", revenue: 82000 },
+            ],
+            xKey: "month",
+            yKey: "revenue",
+            height: 250,
+          },
+        },
+        "stats-list-card": {
+          type: "Card",
+          props: { title: "关键指标" },
+          children: ["stats-stack"],
+        },
+        "stats-stack": {
+          type: "Stack",
+          props: { direction: "vertical", gap: "sm" },
+          children: ["stat-1", "stat-2", "stat-3", "stat-4"],
+        },
+        "stat-1": {
+          type: "Stack",
+          props: { direction: "horizontal", justify: "between" },
+          children: ["stat-1-label", "stat-1-value"],
+        },
+        "stat-1-label": {
+          type: "Text",
+          props: { text: "总收入", variant: "muted" },
+        },
+        "stat-1-value": {
+          type: "Text",
+          props: { text: "¥358,000", variant: "body" },
+        },
+        "stat-2": {
+          type: "Stack",
+          props: { direction: "horizontal", justify: "between" },
+          children: ["stat-2-label", "stat-2-value"],
+        },
+        "stat-2-label": {
+          type: "Text",
+          props: { text: "订单数", variant: "muted" },
+        },
+        "stat-2-value": {
+          type: "Text",
+          props: { text: "1,234", variant: "body" },
+        },
+        "stat-3": {
+          type: "Stack",
+          props: { direction: "horizontal", justify: "between" },
+          children: ["stat-3-label", "stat-3-badge"],
+        },
+        "stat-3-label": {
+          type: "Text",
+          props: { text: "转化率", variant: "muted" },
+        },
+        "stat-3-badge": {
+          type: "Badge",
+          props: { text: "3.2%", variant: "default" },
+        },
+        "stat-4": {
+          type: "Stack",
+          props: { direction: "horizontal", justify: "between" },
+          children: ["stat-4-label", "stat-4-badge"],
+        },
+        "stat-4-label": {
+          type: "Text",
+          props: { text: "满意度", variant: "muted" },
+        },
+        "stat-4-badge": {
+          type: "Badge",
+          props: { text: "4.8/5", variant: "secondary" },
+        },
+      },
+    },
+  },
+];
+
+export function generateMockUIStream(
+  taskId: string,
+  onChunk: (chunk: {
+    result: {
+      kind: "status-update";
+      taskId: string;
+      status: {
+        state: "working" | "completed";
+        timestamp: string;
+        message: {
+          kind: "message";
+          role: "agent";
+          parts: Array<{
+            kind: "data";
+            data: {
+              type: "ui";
+              spec: Record<string, any>;
+            };
+          }>;
+          messageId: string;
+        };
+      };
+      final: boolean;
+      metadata?: Record<string, unknown>;
+    };
+  }) => void,
+): () => void {
+  const chunks = mockUIConversations;
+  let index = 0;
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  const next = () => {
+    if (index >= chunks.length) return;
+    onChunk({
+      result: {
+        kind: "status-update",
+        taskId,
+        status: {
+          state: index === chunks.length - 1 ? "completed" : "working",
+          timestamp: new Date().toISOString(),
+          message: {
+            kind: "message",
+            role: "agent",
+            messageId: `mock-message-${index}`,
+            parts: [
+              {
+                kind: "data",
+                data: chunks[index],
+              },
+            ],
+          },
+        },
+        final: index === chunks.length - 1,
+      },
+    });
+    index++;
+    if (index < chunks.length) {
+      timeoutId = setTimeout(next, 500);
+    }
+  };
+
+  next();
+
+  return () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  };
+}

package/components/ai-assistant/template/types.ts

@@ -0,0 +1,72 @@
+export type Role = "user" | "assistant" | "system";
+
+interface BaseMessage {
+  messageId: string;
+  role?: Role;
+  kind: string; // 'message' | 'status-update' | 'text-content' 等
+  timestamp?: string;
+}
+
+export interface TextMessage extends BaseMessage {
+  kind: "text-content" | "message";
+  content: string; // 最终拼接后的文本
+}
+
+export interface ErrorMessage extends BaseMessage {
+  kind: "error";
+  content: string; // 错误信息文本
+}
+
+export interface ThoughtMessage extends BaseMessage {
+  kind: "thought";
+  thought: string; // 逐步累积的 thinking 内容
+}
+
+export interface ToolMessage extends BaseMessage {
+  kind: "tool";
+  toolName?: string;
+  toolStatus?: string;
+  toolDescription?: string;
+}
+
+export interface UIRenderMessage extends BaseMessage {
+  kind: "ui-render";
+  spec: {
+    root: string;
+    elements: Record<
+      string,
+      {
+        type: string;
+        props?: Record<string, unknown>;
+        children?: string[];
+      }
+    >;
+  };
+}
+
+export type MessagesItem =
+  | TextMessage
+  | ThoughtMessage
+  | ToolMessage
+  | UIRenderMessage
+  | BaseMessage;
+
+export interface Conversation {
+  taskId: string;
+  status: "submitted" | "working" | "completed" | "error";
+  messages: MessagesItem[];
+  lastUpdated: string;
+}
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface InlineAIAssistantProps {
+  showBanner?: boolean;
+  bannerText?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  greeting?: string;
+}