@amaster.ai/components-templates 1.4.1 → 1.4.3

package/components/ai-assistant/others.md

@@ -1,6 +1,16 @@
 ## tailwind.config.js 
 
-content 添加
+content 添加 "./node_modules/@json-render/shadcn/dist/**/*.js"
+```
+{   
+    content: [
+        "./node_modules/@json-render/shadcn/dist/**/*.js"
+    ]
+}
+```
+
+## src/lib/client 保证是新的
+```
+import { createClient } from "@amaster.ai/client";
+export const client = createClient({});
 ```
-"./node_modules/@json-render/shadcn/dist/**/*.js"
-```

package/components/ai-assistant/package.json

@@ -1,37 +1,119 @@
 {
-  "name": "ai-assistant",
-  "version": "1.4.1",
-  "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"
-      }
-    }
+  "name": "amaster-react-project",
+  "version": "1.4.3",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --force",
+    "dev:local": "vite --config vite.config.local.ts",
+    "dev:restart": "bun scripts/dev-restart.mjs",
+    "build": "vite build",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "type-check": "bun scripts/type-check-filter.mjs",
+    "check:build": "bun scripts/check-build.mjs",
+    "check:ast": "bun scripts/ast-grep-scan.mjs",
+    "preview": "vite preview",
+    "prepare": "bun scripts/prepare.mjs || true"
   },
   "dependencies": {
-    "@amaster.ai/client": "1.1.0-beta.52",
-    "react-markdown": "^10.0.0",
-    "remark-gfm": "^4.0.0",
-    "immer": "^10.0.0",
+    "@a2a-js/sdk": "^0.3.7",
+    "@amaster.ai/client": "1.1.0-beta.55",
+    "@amaster.ai/vite-plugins": "1.1.0-beta.55",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "@hookform/resolvers": "^5.2.2",
     "@json-render/core": "^0.12.0",
     "@json-render/react": "^0.12.0",
-    "@json-render/shadcn": "^0.12.0"
+    "@json-render/shadcn": "^0.12.0",
+    "@radix-ui/react-accordion": "^1.2.8",
+    "@radix-ui/react-alert-dialog": "^1.1.11",
+    "@radix-ui/react-aspect-ratio": "^1.1.4",
+    "@radix-ui/react-avatar": "^1.1.7",
+    "@radix-ui/react-checkbox": "^1.2.3",
+    "@radix-ui/react-collapsible": "^1.1.8",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-dropdown-menu": "^2.1.12",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-menubar": "^1.1.12",
+    "@radix-ui/react-navigation-menu": "^1.2.10",
+    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.3.4",
+    "@radix-ui/react-scroll-area": "^1.2.6",
+    "@radix-ui/react-select": "^2.1.7",
+    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-slider": "^1.3.2",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.1.6",
+    "@radix-ui/react-toggle-group": "^1.1.7",
+    "@radix-ui/react-tooltip": "^1.2.4",
+    "@tanstack/react-table": "^8.21.3",
+    "bpmn-auto-layout": "^1.2.0",
+    "bpmn-js": "18.1.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "eventsource-parser": "^3.0.6",
+    "immer": "^11.1.4",
+    "input-otp": "^1.4.2",
+    "ky": "^1.9.1",
+    "lucide-react": "^0.544.0",
+    "next-themes": "^0.4.6",
+    "qrcode": "^1.5.4",
+    "qs": "6.9.7",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-dropzone": "^14.3.8",
+    "react-helmet-async": "^2.0.5",
+    "react-hook-form": "^7.71.1",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^2.1.8",
+    "react-router": "^7.13.0",
+    "react-router-dom": "^6.30.1",
+    "recharts": "^2.15.3",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.3",
+    "streamdown": "^1.1.6",
+    "tailwind-merge": "^3.2.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "video-react": "^0.16.0",
+    "xss": "^1.0.15",
+    "zod": "^3.24.3"
+  },
+  "devDependencies": {
+    "@ast-grep/napi": "^0.40.5",
+    "@ast-grep/napi-linux-arm64-musl": "^0.40.5",
+    "@ast-grep/napi-linux-x64-musl": "^0.40.5",
+    "@biomejs/biome": "^2.3.4",
+    "@types/glob": "^9.0.0",
+    "@types/http-proxy": "^1.17.15",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^22.10.2",
+    "@types/qs": "^6.14.0",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@types/video-react": "^0.15.8",
+    "@typescript/native-preview": "7.0.0-dev.20250819.1",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "autoprefixer": "^10.4.20",
+    "glob": "^11.0.0",
+    "http-proxy": "^1.18.1",
+    "husky": "^9.1.7",
+    "postcss": "^8.5.2",
+    "prettier": "^3.8.1",
+    "tailwindcss": "^3.4.11",
+    "typescript": "~5.7.2",
+    "vite": "^5.4.21",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }

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

@@ -10,8 +10,10 @@ import ChatDisplayModeSwitcher from "./components/chat-display-mode-switcher";
 import { useDisplayMode } from "./hooks/useDisplayMode";
 import InlineAIAssistant from "./inline-ai-assistant";
 
-const AIAssistant: React.FC = () => {
-
+const AIAssistant: React.FC<{
+  greeting?: string;
+  recommends?: string[];
+}> = ({ greeting, recommends }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [displayMode, setDisplayMode] = useDisplayMode(isOpen);
   const isFullscreen = displayMode === "fullscreen" && isOpen;
@@ -67,6 +69,7 @@ const AIAssistant: React.FC = () => {
           <ChatHeader
             disabledDrag={displayMode !== "floating"}
             isDragging={isDragging}
+            displayMode={displayMode}
             onMouseDown={handleDragStart}
             onTouchStart={handleTouchStart}
             onClose={handleClose}
@@ -77,7 +80,13 @@ const AIAssistant: React.FC = () => {
             />
           </ChatHeader>
 
-          <InlineAIAssistant showBanner={false} className="flex-1" greeting={getText().greeting} />
+          <InlineAIAssistant
+            showBanner={false}
+            className="flex-1"
+            greeting={greeting || getText().greeting}
+            recommends={recommends}
+            displayMode={displayMode}
+          />
         </ChatFloatingCard>
       )}
     </>

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

@@ -30,14 +30,14 @@ 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={`inline-flex items-center gap-1 animate-in fade-in-0 slide-in-from-bottom-2 duration-300 ${className}`}>
+      <div className="h-2 w-2 rounded-full bg-primary animate-pulse" />
       <div
-        className="h-2 w-2 rounded-full bg-[#7C3AED] animate-pulse"
+        className="h-2 w-2 rounded-full bg-primary animate-pulse"
         style={{ animationDelay: "150ms" }}
       />
       <div
-        className="h-2 w-2 rounded-full bg-[#7C3AED] animate-pulse"
+        className="h-2 w-2 rounded-full bg-primary animate-pulse"
         style={{ animationDelay: "300ms" }}
       />
     </div>
@@ -58,7 +58,6 @@ const ChatTextMessage: React.FC<
       </div>
       <TTSReader
         text={message.content}
-        className="opacity-0 group-hover:opacity-100"
       />
     </>
   );
@@ -116,7 +115,6 @@ const ChatToolMessage: React.FC<
       <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>
   );
 };
@@ -129,11 +127,25 @@ const ChatErrorMessage: React.FC<{ message: TextMessage }> = ({ message }) => {
   );
 };
 
+export const ChatDivider = () => {
+  return (
+    <div className="flex items-center justify-center gap-4 w-full my-4">
+      <div className="h-px bg-border flex-1" />
+      <span className="text-xs text-muted-foreground">
+        {getText().newConversation}
+      </span>
+      <div className="h-px bg-border flex-1" />
+    </div>
+  );
+};
+
 const ChatUIRenderMessage: React.FC<{ message: UIRenderMessage }> = ({
   message,
 }) => {
   return (
-    <UIRenderer spec={message.spec} className="mb-2" />
+    <div className="flex-1 overflow-hidden">
+      <UIRenderer spec={message.spec} className="mb-2" />
+    </div>
   );
 };
 
@@ -154,7 +166,9 @@ const MessageContentRenderer: React.FC<
     case "error":
       return <ChatErrorMessage message={message as TextMessage} {...rest} />;
     case "ui-render":
-      return <ChatUIRenderMessage message={message as UIRenderMessage} />;
+      return (
+        <ChatUIRenderMessage message={message as UIRenderMessage} {...rest} />
+      );
     default:
       return <div>{getText().unknownTool}</div>;
   }
@@ -166,15 +180,17 @@ const ChatAssistantMessage: React.FC<
     showAvatar?: boolean;
   } & MessageCommonProps
 > = ({ message, showAvatar, ...rest }) => {
+
   return (
     <div
+      data-conversation-message-id={(message as any).messageId}
       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",
+          "flex-shrink-0 h-7 w-7 rounded-full bg-gradient-to-br from-primary to-primary/40 flex items-center justify-center text-left",
           !showAvatar && "invisible",
         )}
       >

package/components/ai-assistant/template/components/chat-display-mode-switcher.tsx

@@ -3,12 +3,7 @@ import { getText } from "../i18n";
 import { HoverCard } from "@radix-ui/react-hover-card";
 import { HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
 import { Button } from "@/components/ui/button";
-
-export type IDisplayMode =
-  | "fullscreen"
-  | "floating"
-  | "side-left"
-  | "side-right";
+import type { IDisplayMode } from "../types";
 
 const ChatDisplayModeSwitcher: React.FC<{
   displayMode: IDisplayMode;

package/components/ai-assistant/template/components/chat-floating-button.tsx

@@ -31,7 +31,7 @@ const ChatFloatingButton: React.FC<ChatFloatingButtonProps> = ({
         size="lg"
         className={`
           group relative h-full w-full rounded-full
-          bg-gradient-to-br from-[#6366F1] to-[#8B5CF6]
+          bg-gradient-to-br from-primary to-primary/40
           text-white
           border-0
           transition-all duration-300 ease-out select-none
@@ -43,7 +43,7 @@ const ChatFloatingButton: React.FC<ChatFloatingButtonProps> = ({
           }
         `}
       >
-        <span className="absolute inset-0 rounded-full bg-[#6366F1] animate-ping opacity-20" />
+        <span className="absolute inset-0 rounded-full bg-primary animate-ping opacity-20" />
         <MessageSquare
           className="relative h-5 w-5 pointer-events-none"
           strokeWidth={1.75}

package/components/ai-assistant/template/components/chat-floating-card.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
+import type { IDisplayMode } from "../types";
 import { useRef } from "react";
 import { Card } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
-import { IDisplayMode } from "./chat-display-mode-switcher";
 
 interface ChatFloatingCardProps {
   displayMode: IDisplayMode;

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

@@ -2,8 +2,11 @@ import { MessageSquare, X } from "lucide-react";
 import type React from "react";
 import { Button } from "@/components/ui/button";
 import { getText } from "../i18n";
+import { cn } from "@/lib/utils";
+import type { IDisplayMode } from "../types";
 
 interface ChatHeaderProps {
+  displayMode?: IDisplayMode;
   disabledDrag?: boolean;
   isDragging?: boolean;
   onMouseDown?: (e: React.MouseEvent) => void;
@@ -13,6 +16,7 @@ interface ChatHeaderProps {
 }
 
 const ChatHeader: React.FC<ChatHeaderProps> = ({
+  displayMode,
   disabledDrag,
   isDragging,
   onMouseDown,
@@ -22,27 +26,25 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
 }) => {
   return (
     <div
-      className={`
-        flex items-center justify-between px-4 py-3
-        border-b border-[#E5E7EB]
-        bg-white
-        ${!disabledDrag && onMouseDown ? (isDragging ? "cursor-grabbing" : "cursor-grab") : ""}
-      `}
+      className={cn(
+        "flex items-center justify-between px-4",
+        !disabledDrag && onMouseDown
+          ? isDragging
+            ? "cursor-grabbing"
+            : "cursor-grab"
+          : "",
+        {
+          'border-b border-[#E5E7EB] bg-white': displayMode === "floating",
+        },
+      )}
       onMouseDown={!disabledDrag ? onMouseDown : undefined}
       onTouchStart={!disabledDrag ? onTouchStart : undefined}
     >
       <div className="flex items-center gap-2.5">
-        <div className="flex items-center justify-center h-8 w-8 rounded-full bg-gradient-to-br from-[#6366F1] to-[#8B5CF6]">
-          <MessageSquare className="h-4 w-4 text-white" strokeWidth={2} />
-        </div>
         <div className="flex flex-col">
           <span className="text-sm font-semibold text-[#111827]">
-            AI Assistant
+            {getText().assistantName}
           </span>
-          <div className="flex items-center gap-1.5">
-            <span className="h-1.5 w-1.5 rounded-full bg-[#10B981] animate-pulse" />
-            <span className="text-xs text-[#6B7280]">{getText().online}</span>
-          </div>
         </div>
       </div>
       <div className="flex items-center gap-1">

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

@@ -1,9 +1,15 @@
-import { ArrowUp, MessageCirclePlus } from "lucide-react";
+import {
+  ArrowUp,
+  LoaderCircle,
+  MessageCirclePlus,
+  RotateCw,
+  Square,
+} from "lucide-react";
 import type React from "react";
 import { Button } from "@/components/ui/button";
 import { getText } from "../i18n";
-import type { Conversation } from "../types";
-import { useState } from "react";
+import type { Conversation, IDisplayMode } from "../types";
+import { useMemo, useState } from "react";
 import { cn } from "@/lib/utils";
 import {
   Tooltip,
@@ -13,18 +19,19 @@ import {
 } from "@/components/ui/tooltip";
 import VoiceInputButton from "./voice-input";
 
-const ResetButton: React.FC<{ onReset?: () => void }> = ({ onReset }) => {
-  if (!onReset) return null;
+const NewConvButton: React.FC<{ onNew?: () => void; disabled?: boolean }> = ({ onNew, disabled }) => {
+  if (!onNew) return null;
   return (
     <TooltipProvider>
       <Tooltip delayDuration={0}>
-        <TooltipContent>{getText().resetConversation}</TooltipContent>
+        <TooltipContent>{getText().newConversation}</TooltipContent>
         <TooltipTrigger asChild>
           <Button
             type="button"
             variant="ghost"
             size="icon"
-            onClick={onReset}
+            onClick={onNew}
+            disabled={disabled}
             className="h-8 w-8 text-[#6B7280] hover:text-[#374151] hover:bg-[#F3F4F6] rounded-lg transition-colors duration-200 cursor-pointer"
           >
             <MessageCirclePlus className="size-5" />
@@ -35,29 +42,56 @@ const ResetButton: React.FC<{ onReset?: () => void }> = ({ onReset }) => {
   );
 };
 
-const SubmitButton: React.FC<{ disabled: boolean; onClick: () => void }> = ({
-  disabled,
+const SubmitButton: React.FC<{
+  disabled: boolean;
+  starting?: boolean;
+  onClick: () => void;
+}> = ({ disabled, starting, onClick }) => {
+  return (
+    <Button
+      type="button"
+      onClick={onClick}
+      disabled={disabled || starting}
+      size="icon"
+      className={cn(
+        "size-8 text-white rounded-xl transition-all duration-200 cursor-pointer shadow-[0_2px_8px_rgba(99,102,241,0.3)] hover:shadow-[0_4px_12px_rgba(99,102,241,0.4)]",
+        "bg-gradient-to-r from-primary to-primary/80",
+        "hover:from-primary/90 hover:to-primary/70",
+        "disabled:opacity-40 disabled:cursor-not-allowed",
+        starting && "bg-gray-600",
+      )}
+    >
+      {starting ? (
+        <LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2} />
+      ) : (
+        <ArrowUp className="h-4 w-4" strokeWidth={2} />
+      )}
+    </Button>
+  );
+};
+
+const StopButton: React.FC<{ onClick: () => void; disabled?: boolean }> = ({
   onClick,
+  disabled,
 }) => {
   return (
     <Button
       type="button"
       onClick={onClick}
-      disabled={disabled}
       size="icon"
+      disabled={disabled}
       className="
                 size-8
-                bg-gradient-to-r from-[#6366F1] to-[#8B5CF6]
-                hover:from-[#4F46E5] hover:to-[#7C3AED]
+                bg-foreground
+                hover:bg-foreground/50
                 text-white
                 rounded-xl
                 transition-all duration-200
                 cursor-pointer
-                disabled:opacity-40 disabled:cursor-not-allowed
-                shadow-[0_2px_8px_rgba(99,102,241,0.3)]
-                hover:shadow-[0_4px_12px_rgba(99,102,241,0.4)]"
+                shadow-[0_2px_8px_rgba(239,68,68,0.3)]
+                hover:shadow-[0_4px_12px_rgba(239,68,68,0.4)]"
     >
-      <ArrowUp className="h-4 w-4" strokeWidth={2} />
+      <Square className="h-3 w-3 fill-current" strokeWidth={2} />
     </Button>
   );
 };
@@ -68,7 +102,10 @@ interface ChatInputProps {
   inputValue: string;
   onInputChange: (value: string) => void;
   onSendMessage: () => void;
-  onReset?: () => void;
+  onNew?: () => void;
+  onCancel?: () => void;
+  starting?: boolean;
+  displayMode?: IDisplayMode;
 }
 
 const ChatInput: React.FC<ChatInputProps> = ({
@@ -77,9 +114,19 @@ const ChatInput: React.FC<ChatInputProps> = ({
   inputValue,
   onInputChange,
   onSendMessage,
-  onReset,
+  onNew,
+  onCancel,
+  starting,
+  displayMode
 }) => {
-  const hasConversations = conversations.length > 1;
+  const hasConversations = conversations.length > 0;
+  const lastConv =
+    conversations.length > 0 ? conversations[conversations.length - 1] : null;
+  const lastIsDivider = useMemo(() => {
+    if (!lastConv) return false;
+    return (lastConv.system?.level === "newConversation");
+  }, [lastConv]);
+
   const [focus, setFocus] = useState(false);
   const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter" && !e.shiftKey) {
@@ -92,9 +139,9 @@ const ChatInput: React.FC<ChatInputProps> = ({
     <div className="py-3 px-4">
       <div
         className={cn(
-          "w-full rounded-xl bg-white transition-all duration-200 p-3 border border-[#6366F1]/80",
+          "w-full rounded-xl bg-white transition-all duration-200 p-3 border border-primary/80",
           {
-            "border-[#6366F1] ring-2 ring-[#6366F1]/20": focus
+            "border-primary ring-2 ring-primary/20": focus,
           },
         )}
       >
@@ -112,7 +159,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
         />
         <div className="flex items-center justify-between gap-2 mt-1">
           <div className="flex items-center gap-1">
-            <ResetButton onReset={hasConversations ? onReset : undefined} />
+            {onNew && <NewConvButton onNew={onNew} disabled={!hasConversations || lastIsDivider || starting || isLoading} />}
           </div>
           <div className="flex items-center gap-2">
             <VoiceInputButton
@@ -121,17 +168,22 @@ const ChatInput: React.FC<ChatInputProps> = ({
                 setFocus(true);
               }}
               value={inputValue}
-              disabled={isLoading}
-            />
-            <SubmitButton
-              onClick={() => onSendMessage()}
-              disabled={!inputValue.trim() || isLoading}
+              disabled={isLoading || starting}
             />
+            {isLoading ? (
+              <StopButton onClick={onCancel || (() => {})} />
+            ) : (
+              <SubmitButton
+                onClick={() => onSendMessage()}
+                disabled={!inputValue.trim() || isLoading}
+                starting={starting}
+              />
+            )}
           </div>
         </div>
       </div>
 
-      {conversations.length > 0 && (
+      {(conversations.length > 0 || displayMode !== "inline") && (
         <p className="text-[10px] text-[#9CA3AF] mt-2 text-center">
           {getText().footerAiWarning}
         </p>