@amaster.ai/components-templates 1.3.0

package/README.md

@@ -0,0 +1,193 @@
+# @amaster.ai/components-templates
+
+Amaster 组件模板集合，提供 CLI 工具快速初始化和更新组件。
+
+## 项目目录
+
+```
+amaster-components-template/
+├── bin/amaster.js                    # CLI 入口
+├── components/                       # 组件模板目录
+│   └── ai-assistant/                 # ai-assistant 组件
+│       ├── package.json              # 组件配置（依赖、目标目录等）
+│       └── template/                 # 模板文件
+│           ├── ai-assistant.tsx
+│           ├── index.ts
+│           ├── types.ts
+│           ├── components/           # 子组件
+│           ├── hooks/                # Hooks
+│           └── mock/                 # Mock 数据
+├── packages/cli/                     # CLI 工具
+│   ├── src/index.ts                  # CLI 源码
+│   ├── dist/                         # 编译输出
+│   └── package.json
+├── scripts/
+│   ├── publish.js                    # 一键发布脚本
+│   └── create-component.js           # 创建新组件模板向导
+├── index.js                          # 主入口
+├── package.json                      # 包配置
+└── README.md
+```
+
+## 安装
+
+```bash
+npm install -g @amaster.ai/components-templates
+```
+
+或使用 npx（推荐）：
+
+```bash
+npx @amaster.ai/components-templates <command>
+```
+
+## 使用
+
+### 列出所有可用组件
+
+```bash
+npx @amaster.ai/components-templates list
+# 或
+npx @amaster.ai/components-templates ls
+```
+
+### 初始化组件
+
+```bash
+# 交互式选择组件
+npx @amaster.ai/components-templates init
+
+# 安装整个组件
+npx @amaster.ai/components-templates init ai-assistant
+
+# 指定目标目录
+npx @amaster.ai/components-templates init ai-assistant -d ./src/components/ai-assistant
+
+# 强制覆盖（不提示确认）
+npx @amaster.ai/components-templates init ai-assistant --force
+
+# 跳过依赖安装
+npx @amaster.ai/components-templates init ai-assistant --skip-install
+
+# 只安装组件中的特定文件夹
+npx @amaster.ai/components-templates init ai-assistant/hooks -d ./src/components/ai-assistant/hooks
+
+# 只安装组件中的单个文件
+npx @amaster.ai/components-templates init ai-assistant/hooks/useSpeak.ts -d ./src/components/ai-assistant/hooks/useSpeak.ts
+```
+
+### 查看组件信息
+
+```bash
+npx @amaster.ai/components-templates info ai-assistant
+```
+
+## 特性
+
+### 1. 依赖自动合并
+
+初始化组件时，CLI 会自动：
+
+- 读取组件模板的 `package.json`
+- 合并依赖到目标项目的 `package.json`
+- 自动检测包管理器（pnpm/yarn/npm）并安装依赖
+
+### 2. 灵活的路径支持
+
+支持多种初始化方式：
+
+- **整个组件**: `init ai-assistant`
+- **子文件夹**: `init ai-assistant/hooks`
+- **单个文件**: `init ai-assistant/hooks/useSpeak.ts`
+
+### 3. 智能包管理器检测
+
+自动检测目标项目使用的包管理器：
+
+- `pnpm-lock.yaml` → pnpm
+- `yarn.lock` → yarn
+- `package-lock.json` → npm
+
+## 开发
+
+### 本地调试
+
+```bash
+# 列出所有组件
+node bin/amaster.js list
+
+# 安装组件到目标项目
+node bin/amaster.js init ai-assistant -d ../test/src/components/ai-assistant
+
+# 跳过依赖安装
+node bin/amaster.js init ai-assistant -d ../test/src/components/ai-assistant --skip-install
+
+# 强制执行
+node bin/amaster.js init ai-assistant -d ../test/src/components/ai-assistant --force
+
+# 只复制 hooks 文件夹
+node bin/amaster.js init ai-assistant/hooks -d ../test/src/components/ai-assistant/hooks --force
+
+# 只复制单个文件
+node bin/amaster.js init ai-assistant/hooks/useSpeak.ts -d ../test/src/components/ai-assistant/hooks/useSpeak.ts
+```
+
+### 脚本添加新组件模板
+
+```bash
+# 按提示输入组件名、描述、目标目录
+npm run create:component
+```
+
+### 手动添加新组件模板
+
+1. 在 `components/` 目录下创建新组件目录
+2. 添加 `package.json` 配置文件
+3. 在 `template/` 目录下放置模板文件
+
+```
+components/
+  └── your-component/
+      ├── package.json          # 组件配置
+      └── template/             # 模板文件
+          ├── index.ts
+          └── ...
+```
+
+### 组件 package.json 配置
+
+```json
+{
+  "name": "your-component",
+  "version": "1.0.0",
+  "description": "组件描述",
+  "template": {
+    "name": "your-component",
+    "targetDir": "src/components/your-component",
+    "files": ["**/*"],
+    "ignore": ["node_modules", "*.log", ".DS_Store"]
+  },
+  "dependencies": {
+    "some-lib": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0"
+  }
+}
+```
+
+## 发布
+
+```bash
+# 一键发布（自动构建、更新版本、同步组件版本）
+npm run publish:all     # patch
+npm run publish:minor   # minor
+npm run publish:major   # major
+```
+
+## License
+
+MIT

package/bin/amaster.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import("../packages/cli/dist/index.js");

package/components/ai-assistant/example.md

@@ -0,0 +1,34 @@
+# AIAssistant
+智能助手，支持对话方式解决用户需求和问题
+
+### 悬浮模式
+```tsx
+import AIAssistant from "@/components/ai-assistant";
+import { Link } from "react-router-dom";
+
+export default function HomePage() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <div className="text-center text-2xl font-bold text-foreground">
+        Home Page
+      </div>
+
+      <Link to="/ai" className="mt-6 text-primary underline">
+        Go to AI Page
+      </Link>
+
+      <AIAssistant />
+    </div>
+  );
+}
+```
+
+### 内嵌模式
+
+```tsx
+import { InlineAIAssistant } from "@/components/ai-assistant";
+
+export default function AIPage() {
+  return <InlineAIAssistant className="min-h-screen" />;
+}
+```

package/components/ai-assistant/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "ai-assistant",
+  "version": "1.3.0",
+  "description": "AI Assistant component template",
+  "main": "template/index.ts",
+  "template": {
+    "name": "ai-assistant",
+    "targetDir": "src/components/ai-assistant",
+    "files": [
+      "**/*"
+    ],
+    "ignore": [
+      "node_modules",
+      "*.log",
+      ".DS_Store"
+    ],
+    "variables": {
+      "COMPONENT_NAME": {
+        "description": "Component name",
+        "default": "AIAssistant"
+      },
+      "TARGET_DIR": {
+        "description": "Target directory",
+        "default": "src/components/ai-assistant"
+      }
+    }
+  },
+  "dependencies": {
+    "@amaster.ai/client": "1.1.0-beta.52",
+    "react-markdown": "^10.0.0",
+    "remark-gfm": "^4.0.0",
+    "immer": "^10.0.0"
+  }
+}

package/components/ai-assistant/template/ai-assistant.tsx

@@ -0,0 +1,88 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import ChatFloatingCard from "./components/chat-floating-card";
+import ChatFloatingButton from "./components/chat-floating-button";
+import { useDraggable } from "./hooks/useDraggable";
+import { usePosition } from "./hooks/usePosition";
+import ChatHeader from "./components/chat-header";
+import { getText } from "./i18n";
+import ChatDisplayModeSwitcher from "./components/chat-display-mode-switcher";
+import { useDisplayMode } from "./hooks/useDisplayMode";
+import InlineAIAssistant from "./inline-ai-assistant";
+
+const AIAssistant: React.FC = () => {
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [displayMode, setDisplayMode] = useDisplayMode(isOpen);
+  const isFullscreen = displayMode === "fullscreen" && isOpen;
+  const positionHook = usePosition(isOpen, isFullscreen);
+
+  const draggableHook = useDraggable({
+    ...positionHook,
+    isFullscreen,
+  });
+  const { isDragging, handleDragStart, handleTouchStart } = draggableHook;
+
+  useEffect(() => {
+    const handleOpenAIAssistant = () => {
+      setIsOpen(true);
+    };
+
+    window.addEventListener("openAIAssistant", handleOpenAIAssistant);
+    return () => {
+      window.removeEventListener("openAIAssistant", handleOpenAIAssistant);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (displayMode === "side-left") {
+      positionHook.setPositionTo("left", "bottom");
+    } else if (displayMode === "side-right") {
+      positionHook.setPositionTo("right", "bottom");
+    }
+  }, [displayMode]);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      {!isOpen && (
+        <ChatFloatingButton
+          onClick={() => setIsOpen(true)}
+          onMouseDown={handleDragStart}
+          onTouchStart={handleTouchStart}
+          isDragging={isDragging}
+          style={positionHook.getPositionStyles()}
+        />
+      )}
+
+      {isOpen && (
+        <ChatFloatingCard
+          displayMode={displayMode}
+          isDragging={isDragging}
+          style={positionHook.getPositionStyles()}
+        >
+          <ChatHeader
+            disabledDrag={displayMode !== "floating"}
+            isDragging={isDragging}
+            onMouseDown={handleDragStart}
+            onTouchStart={handleTouchStart}
+            onClose={handleClose}
+          >
+            <ChatDisplayModeSwitcher
+              displayMode={displayMode}
+              onChange={setDisplayMode}
+            />
+          </ChatHeader>
+
+          <InlineAIAssistant showBanner={false} className="flex-1" greeting={getText().greeting} />
+        </ChatFloatingCard>
+      )}
+    </>
+  );
+};
+
+export { AIAssistant };
+export default AIAssistant;

package/components/ai-assistant/template/components/Markdown.tsx

@@ -0,0 +1,70 @@
+import type React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import {cn} from "@/lib/utils";
+
+interface MarkdownProps {
+  content: string;
+  className?: string;
+}
+
+const Markdown: React.FC<MarkdownProps> = ({ content, className }) => {
+  return (
+    <div
+      className={cn(
+        "text-foreground text-left max-w-none whitespace-normal",
+        // 标题样式
+        "[&_h1] [&_h1]:my-4 [&_h1]:text-xl [&_h1]:font-medium [&_h1]:tracking-tight",
+        "[&_h2] [&_h2]:my-3 [&_h2]:text-lg [&_h2]:font-medium [&_h2]:tracking-tight",
+        "[&_h3] [&_h3]:text-md [&_h3]:my-2 [&_h3]:font-medium [&_h3]:tracking-tight",
+        "[&_h4] [&_h4]:my-2 [&_h4]:text-base [&_h4]:font-medium [&_h4]:tracking-tight",
+        // 段落样式
+        "[&_p]:leading-6",
+        // 有序列表样式
+        "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:space-y-2 [&_ol]:pl-6",
+        // 无序列表样式
+        "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:space-y-2 [&_ul]:pl-6",
+        // 列表项样式
+        "[&_li]:my-1 [&_li]:leading-6",
+        "[&_li::marker]:text-slate-500 dark:[&_li::marker]:text-slate-400",
+        // 嵌套列表样式
+        "[&_li_ul]:mt-2 [&_li_ul]:mb-2",
+        "[&_li_ol]:mt-2 [&_li_ol]:mb-2",
+        // 代码块样式
+        "[&_pre]:bg-slate-100 dark:[&_pre]:bg-slate-800",
+        "[&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:p-4",
+        "[&_pre_code]:font-mono [&_pre_code]:text-xs",
+        // 行内代码样式
+        "[&_:not(pre)_code]:bg-slate-100 dark:[&_:not(pre)_code]:bg-slate-800",
+        "[&_:not(pre)_code]:rounded [&_:not(pre)_code]:px-1.5 [&_:not(pre)_code]:py-0.5",
+        "[&_:not(pre)_code]:font-mono [&_:not(pre)_code]:text-xs",
+        "[&_:not(pre)_code]:before:content-none [&_:not(pre)_code]:after:content-none",
+        // 引用样式
+        "[&_blockquote]:border-l-4 [&_blockquote]:border-slate-300 dark:[&_blockquote]:border-slate-600",
+        "[&_blockquote]:my-2 [&_blockquote]:pl-4 [&_blockquote]:italic",
+        "[&_blockquote]:text-slate-600 dark:[&_blockquote]:text-slate-400",
+        // 链接样式
+        "[&_a]:text-blue-600 dark:[&_a]:text-blue-400",
+        "[&_a]:no-underline hover:[&_a]:underline",
+        // 强调样式
+        "[&_strong]:font-medium [&_strong]:text-slate-900 dark:[&_strong]:text-slate-100",
+        "[&_em]:italic",
+        // 表格样式
+        "[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse",
+        "[&_th]:border [&_th]:border-slate-300 dark:[&_th]:border-slate-600",
+        "[&_th]:bg-slate-50 [&_th]:p-2 [&_th]:font-medium dark:[&_th]:bg-slate-800",
+        "[&_td]:border [&_td]:border-slate-300 [&_td]:p-2 dark:[&_td]:border-slate-600",
+        // 水平线样式
+        "[&_hr]:my-6 [&_hr]:border-slate-300 dark:[&_hr]:border-slate-600",
+        className,
+      )}
+      data-slot="markdown-content"
+    >
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+    </div>
+  );
+};
+
+Markdown.displayName = 'markdown-render'
+
+export default Markdown;

package/components/ai-assistant/template/components/chat-assistant-message.tsx

@@ -0,0 +1,190 @@
+import type {
+  MessagesItem,
+  TextMessage,
+  ThoughtMessage,
+  ToolMessage,
+  UIRenderMessage,
+} from "../types";
+import {
+  Check,
+  ChevronDown,
+  ChevronUp,
+  CircleX,
+  Info,
+  LoaderCircle,
+  MessageSquare,
+} from "lucide-react";
+import Markdown from "./Markdown";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+import { getText } from "../i18n";
+import TTSReader from "./chat-speech-button";
+import { UIRenderer } from "./ui-renderer";
+
+interface MessageCommonProps {
+  isNewest?: boolean;
+  isLoading?: boolean;
+}
+
+export const ChatLoading: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  return (
+    <div className={`inline-flex items-center gap-1`}>
+      <div className="h-2 w-2 rounded-full bg-[#7C3AED] animate-pulse" />
+      <div
+        className="h-2 w-2 rounded-full bg-[#7C3AED] animate-pulse"
+        style={{ animationDelay: "150ms" }}
+      />
+      <div
+        className="h-2 w-2 rounded-full bg-[#7C3AED] animate-pulse"
+        style={{ animationDelay: "300ms" }}
+      />
+    </div>
+  );
+};
+
+const ChatTextMessage: React.FC<
+  { message: TextMessage } & MessageCommonProps
+> = ({ message }) => {
+  if (!message.content) {
+    return <ChatLoading />;
+  }
+
+  return (
+    <>
+      <div className="prose prose-sm prose-p:my-1 prose-pre:my-2 whitespace-pre-wrap leading-relaxed break-words overflow-hidden min-w-0 max-w-full px-1">
+        <Markdown content={message.content} />
+      </div>
+      <TTSReader
+        text={message.content}
+        className="opacity-0 group-hover:opacity-100"
+      />
+    </>
+  );
+};
+
+const ChatThoughtMessage: React.FC<
+  { message: ThoughtMessage } & MessageCommonProps
+> = ({ message, isNewest, isLoading }) => {
+  const [expanded, setExpanded] = useState(false);
+  const thinking = isLoading && isNewest;
+  return (
+    <div className="leading-relaxed whitespace-pre-wrap break-words text-xs overflow-hidden text-left">
+      <div
+        className="hover:border-border border bg-muted px-2 py-1 rounded-md inline-flex items-center gap-1 cursor-pointer"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {thinking ? (
+          <LoaderCircle className="text-primary animate-spin size-3" />
+        ) : (
+          <div>
+            {!expanded ? (
+              <ChevronDown className="size-3.5" />
+            ) : (
+              <ChevronUp className="size-3.5" />
+            )}
+          </div>
+        )}
+        <span>{thinking ? getText().thinking : getText().thought}</span>
+      </div>
+      {(expanded || thinking) && (
+        <Markdown
+          content={message.thought || "..."}
+          className="text-xs font-normal opacity-55 pl-4 py-2 border-l-[2px] ml-4"
+        />
+      )}
+    </div>
+  );
+};
+
+const ChatToolMessage: React.FC<
+  { message: ToolMessage } & MessageCommonProps
+> = ({ message, isLoading }) => {
+  const status = message.toolStatus || "executing";
+  return (
+    <div className="leading-relaxed whitespace-pre-wrap break-words flex items-center gap-1 border px-2 p-1 rounded-md bg-muted text-xs max-w-full overflow-hidden">
+      {status === "success" ? (
+        <Check className="size-3.5 text-success shrink-0" />
+      ) : status === "failed" || status === "error" ? (
+        <Info className="size-3.5 text-destructive shrink-0" />
+      ) : isLoading ? (
+        <LoaderCircle className="text-primary animate-spin size-3" />
+      ) : (
+        <CircleX className="size-3.5 text-muted-foreground shrink-0" />
+      )}
+      <span className="flex-1 truncate flex-shrink-0">
+        {message.toolName || getText().unknownTool}
+      </span>
+      {/* {message.toolDescription && <div className="flex-1 truncate max-w-1/2">{message.toolDescription}</div>} */}
+    </div>
+  );
+};
+
+const ChatErrorMessage: React.FC<{ message: TextMessage }> = ({ message }) => {
+  return (
+    <div className="leading-relaxed whitespace-pre-wrap text-left break-words gap-1 border px-2 p-1 rounded-md text-destructive text-xs max-w-full overflow-hidden">
+      {message.content || getText().errorMessage}
+    </div>
+  );
+};
+
+const ChatUIRenderMessage: React.FC<{ message: UIRenderMessage }> = ({
+  message,
+}) => {
+  return (
+    <UIRenderer spec={message.spec} className="mb-2" />
+  );
+};
+
+const MessageContentRenderer: React.FC<
+  {
+    message: MessagesItem;
+  } & MessageCommonProps
+> = ({ message, ...rest }) => {
+  switch (message.kind) {
+    case "text-content":
+      return <ChatTextMessage message={message as TextMessage} {...rest} />;
+    case "thought":
+      return (
+        <ChatThoughtMessage message={message as ThoughtMessage} {...rest} />
+      );
+    case "tool":
+      return <ChatToolMessage message={message as ToolMessage} {...rest} />;
+    case "error":
+      return <ChatErrorMessage message={message as TextMessage} {...rest} />;
+    case "ui-render":
+      return <ChatUIRenderMessage message={message as UIRenderMessage} />;
+    default:
+      return <div>{getText().unknownTool}</div>;
+  }
+};
+
+const ChatAssistantMessage: React.FC<
+  {
+    message: MessagesItem;
+    showAvatar?: boolean;
+  } & MessageCommonProps
+> = ({ message, showAvatar, ...rest }) => {
+  return (
+    <div
+      className={cn(
+        "flex gap-3 animate-in fade-in-0 slide-in-from-bottom-2 duration-300 overflow-hidden w-full chat-assistant-message &+.chat-assistant-message:mt-4 group",
+      )}
+    >
+      <div
+        className={cn(
+          "flex-shrink-0 h-7 w-7 rounded-full bg-gradient-to-br from-[#6366F1] to-[#8B5CF6] flex items-center justify-center text-left",
+          !showAvatar && "invisible",
+        )}
+      >
+        {showAvatar && (
+          <MessageSquare className="h-3.5 w-3.5 text-white" strokeWidth={2} />
+        )}
+      </div>
+      <MessageContentRenderer message={message} {...rest} />
+    </div>
+  );
+};
+
+export default ChatAssistantMessage;

package/components/ai-assistant/template/components/chat-banner.tsx

@@ -0,0 +1,17 @@
+import { getText } from "../i18n";
+
+const ChatBanner: React.FC<{
+  text?: string;
+  hidden?: boolean;
+}> = ({ text, hidden }) => {
+  if (hidden) {
+    return null;
+  }
+  return (
+    <h1 className="text-center text-3xl text-[#000] font-medium p-4">
+      {text || getText().greeting}
+    </h1>
+  );
+};
+
+export default ChatBanner;