@amaster.ai/components-templates 1.5.0 → 1.8.0

package/components/ai-assistant-taro/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "taro-project",
+  "version": "1.8.0",
+  "description": "开箱即用的基于Taro + React + Zustand + TailwindCSS + TypeScript的模板",
+  "author": "amaster.ai",
+  "license": "MIT",
+  "templateInfo": {
+    "name": "default",
+    "typescript": true,
+    "css": "sass"
+  },
+  "scripts": {
+    "dev": "bun run build:h5 -- --watch",
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "lint": "biome check --write .",
+    "lint:check": "biome check .",
+    "lint:fix": "biome check --write --unsafe .",
+    "lint:format": "prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'",
+    "type-check": "tsc --noEmit",
+    "check:build": "node scripts/check-build.mjs",
+    "precommit": "bun run lint:check && bun run type-check",
+    "prepare": "husky || true",
+    "postinstall": "weapp-tw patch || true",
+    "patch": "weapp-tw patch"
+  },
+  "browserslist": [
+    "last 5 years",
+    "Android >= 9",
+    "iOS >= 13",
+    "not dead"
+  ],
+  "dependencies": {
+    "@a2a-js/sdk": "^0.3.7",
+    "@amaster.ai/bpm-ui": "1.1.0-beta.61",
+    "@amaster.ai/client": "1.1.0-beta.61",
+    "@amaster.ai/taro-echarts-ui": "1.1.0-beta.61",
+    "@amaster.ai/vite-plugins": "1.1.0-beta.61",
+    "@babel/runtime": "^7.28.3",
+    "@tarojs/components": "4.1.5",
+    "@tarojs/helper": "4.1.5",
+    "@tarojs/plugin-framework-react": "4.1.5",
+    "@tarojs/plugin-generator": "4.1.5",
+    "@tarojs/plugin-html": "4.1.5",
+    "@tarojs/plugin-http": "4.1.5",
+    "@tarojs/plugin-platform-h5": "4.1.5",
+    "@tarojs/plugin-platform-weapp": "4.1.5",
+    "@tarojs/react": "4.1.5",
+    "@tarojs/runtime": "4.1.5",
+    "@tarojs/shared": "4.1.5",
+    "@tarojs/taro": "4.1.5",
+    "immer": "^10.1.1",
+    "markdown-it": "^14.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.3",
+    "@babel/preset-react": "^7.24.1",
+    "@biomejs/biome": "^2.2.3",
+    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@iconify-json/lucide": "^1.2.64",
+    "@iconify-json/mdi": "^1.2.3",
+    "@tarojs/cli": "4.1.5",
+    "@tarojs/taro-loader": "4.1.5",
+    "@tarojs/vite-runner": "4.1.5",
+    "@types/node": "^24.3.0",
+    "@types/react": "^18.3.24",
+    "@typescript/native-preview": "7.0.0-dev.20250827.1",
+    "@vitejs/plugin-react": "^4.7.0",
+    "babel-preset-taro": "4.1.5",
+    "husky": "^9.1.7",
+    "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "react-refresh": "^0.14.0",
+    "tailwindcss": "^3.4.17",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.2",
+    "vite": "^4.5.14",
+    "weapp-tailwindcss": "^4.2.6"
+  },
+  "optionalDependencies": {
+    "@tarojs/binding-linux-arm64-gnu": "^4.1.10",
+    "@tarojs/binding-linux-x64-gnu": "4.1.5"
+  }
+}

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

@@ -0,0 +1,176 @@
+import { View } from "@tarojs/components";
+import { useState } from "react";
+import { JsonRenderer } from "@/components/json-render";
+import { useAiAssistantI18n } from "../i18n";
+import type {
+  MessagesItem,
+  TextMessage,
+  ThoughtMessage,
+  ToolMessage,
+  UIRenderMessage,
+} from "../types";
+import Markdown from "./markdown";
+
+interface MessageCommonProps {
+  isNewest?: boolean;
+  isLoading?: boolean;
+}
+
+export const ChatLoading: React.FC<
+  { className?: string } & MessageCommonProps
+> = ({ className }) => {
+  return (
+    <View className={`flex items-center gap-1 ${className}`}>
+      <View className="h-2 w-2 rounded-full bg-primary animate-pulse" />
+      <View
+        className="h-2 w-2 rounded-full bg-primary animate-pulse"
+        style={{ animationDelay: "150ms" }}
+      />
+      <View
+        className="h-2 w-2 rounded-full bg-primary animate-pulse"
+        style={{ animationDelay: "300ms" }}
+      />
+    </View>
+  );
+};
+
+const ChatTextMessage: React.FC<{ message: TextMessage }> = ({ message }) => {
+  if (!message.content) {
+    return <ChatLoading className="ml-2" />;
+  }
+
+  return (
+    <View className="whitespace-pre-wrap leading-relaxed break-words overflow-hidden min-w-0 max-w-full px-1">
+      <Markdown content={message.content} />
+    </View>
+  );
+};
+
+const ChatThoughtMessage: React.FC<
+  { message: ThoughtMessage } & MessageCommonProps
+> = ({ message, isNewest, isLoading }) => {
+  const [expanded, setExpanded] = useState(false);
+  const { t } = useAiAssistantI18n();
+  const thinking = isLoading && isNewest;
+  return (
+    <View className="leading-relaxed whitespace-pre-wrap break-words text-sm overflow-hidden text-left">
+      <View
+        className="hover:border-border border bg-primary/50 text-primary-foreground px-2 py-1 rounded-xl inline-flex items-center gap-1 cursor-pointer"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {thinking ? (
+          <View className="i-lucide-loader-circle text-blue-600 animate-spin size-4" />
+        ) : !expanded ? (
+          <View className="i-lucide-chevron-down size-4" />
+        ) : (
+          <View className="i-lucide-chevron-up size-4" />
+        )}
+        <View>{thinking ? t.thinking : t.thinkResult}</View>
+      </View>
+      {(expanded || thinking) && (
+        <Markdown
+          content={message.thought || "..."}
+          className="font-normal opacity-55 pl-4 py-2 border-l-[2px] ml-4"
+        />
+      )}
+    </View>
+  );
+};
+
+const ChatToolMessage: React.FC<
+  { message: ToolMessage } & MessageCommonProps
+> = ({ message, isLoading }) => {
+  const status = message.toolStatus || "executing";
+  const { t } = useAiAssistantI18n();
+  return (
+    <View className="leading-relaxed whitespace-pre-wrap break-words flex items-center gap-1 border px-2 p-1 rounded-xl bg-primary/50 text-primary-foreground text-sm max-w-full overflow-hidden">
+      {status === "success" ? (
+        <View className="i-lucide-badge-check size-4 text-green-600 fill-current shrink-0" />
+      ) : status === "failed" || status === "error" ? (
+        <View className="i-lucide-info size-4 text-red-600 shrink-0" />
+      ) : isLoading ? (
+        <View className="i-lucide-refresh-cw size-4 text-primary animate-spin  shrink-0 text-warning" />
+      ) : (
+        <View className="i-lucide-circle-x size-4 text-orange-600 shrink-0" />
+      )}
+      <View className="flex-1 truncate flex-shrink-0">
+        {message.toolName || t.unknownTool}
+      </View>
+    </View>
+  );
+};
+
+const ChatErrorMessage: React.FC<
+  { message: TextMessage } & MessageCommonProps
+> = ({ message }) => {
+  const { t } = useAiAssistantI18n();
+  return (
+    <View className="leading-relaxed whitespace-pre-wrap text-left break-words gap-1 border px-2 p-1 rounded-xl text-destructive text-lg max-w-full overflow-hidden">
+      {message.content || t.errorMessage}
+    </View>
+  );
+};
+
+const ChatUIRenderMessage: React.FC<{ message: UIRenderMessage }> = ({
+  message,
+}) => {
+  if (!message.spec) {
+    return (
+      <View className="p-2 border border-destructive rounded-lg bg-destructive/10">
+        <View className="text-destructive">Invalid UI spec</View>
+      </View>
+    );
+  }
+
+  return (
+    <View className="w-full overflow-hidden">
+      <JsonRenderer spec={message.spec} />
+    </View>
+  );
+};
+
+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 null;
+  }
+};
+
+export const ChatAssistantMessage: React.FC<
+  {
+    message: MessagesItem;
+    showAvatar?: boolean;
+  } & MessageCommonProps
+> = ({ message, showAvatar, ...rest }) => {
+  return (
+    <View className="flex gap-3 animate-in fade-in-0 slide-in-from-bottom-2 duration-300 overflow-hidden w-full chat-assistant-message">
+      <View
+        className={[
+          "flex-shrink-0 h-7 w-7 rounded-full bg-gradient-to-br from-primary to-primary/20 flex items-center justify-center text-left",
+          !showAvatar && "invisible",
+        ].join(" ")}
+      >
+        {showAvatar && (
+          <View className="i-lucide-message-square h-3.5 w-3.5 text-primary-foreground" />
+        )}
+      </View>
+      <MessageContentRenderer message={message} {...rest} />
+    </View>
+  );
+};

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

@@ -0,0 +1,27 @@
+import { Text, View } from "@tarojs/components";
+import type React from "react";
+import { useSafeArea } from "../hooks/useSafeArea";
+import { useAiAssistantI18n } from "../i18n";
+
+export const ChatHeader: React.FC = () => {
+  const { t } = useAiAssistantI18n();
+  const safeAreaInsets = useSafeArea();
+
+  return (
+    <View
+      className="flex items-center px-4 py-3 border-b border-primary/40 bg-background/80 backdrop-blur-sm"
+      style={{ paddingTop: `${12 + safeAreaInsets.top}px` }}
+    >
+      <View className="flex items-center gap-2.5">
+        <View className="flex items-center justify-center h-9 w-9 rounded-full bg-gradient-to-br from-primary to-primary/80 shadow-sm">
+          <View className="i-lucide-bot text-primary-foreground text-lg" />
+        </View>
+        <View className="flex flex-col">
+          <Text className="text-lg font-semibold text-foreground">
+            {t.title}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};

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

@@ -0,0 +1,233 @@
+import { Text, Textarea, View } from "@tarojs/components";
+import type React from "react";
+import { useMemo, useRef, useState } from "react";
+import { useSafeArea } from "../hooks/useSafeArea";
+import { useAiAssistantI18n } from "../i18n";
+import type { Conversation } from "../types";
+import { VoiceInput } from "./VoiceInput";
+
+interface ChatInputProps {
+  conversations: Conversation[];
+  isLoading: boolean;
+  starting?: boolean;
+  inputValue: string;
+  onInputChange: (value: string) => void;
+  onInputAppend?: (value: string) => void;
+  onSendMessage: () => void;
+  onNewConversation?: () => void;
+  onCancel: () => void;
+  recommendedQuestions?: string[];
+  onQuestionClick?: (question: string) => void;
+}
+
+const SubmitButton: React.FC<{
+  disabled: boolean;
+  starting?: boolean;
+  onClick: () => void;
+}> = ({ disabled, starting, onClick }) => {
+  const { t } = useAiAssistantI18n();
+  return (
+    <View
+      onClick={onClick}
+      className={`flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl transition-all duration-200 shadow-sm text-primary-foreground bg-gradient-to-r from-primary to-primary/80 active:opacity-80 ${
+        disabled ? "opacity-50 active:opacity-50 cursor-not-allowed" : ""
+      }`}
+      hoverClass={disabled ? "" : "opacity-90"}
+    >
+      <View className={`i-lucide-send text-sm`} />
+      <Text className={`text-sm font-medium`}>
+        {starting ? t.loading : t.send}
+      </Text>
+    </View>
+  );
+};
+
+const StopButton: React.FC<{ onClick: () => void }> = ({ onClick }) => {
+  const { t } = useAiAssistantI18n();
+  return (
+    <View
+      onClick={onClick}
+      className="flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl active:opacity-80 transition-all duration-200 shadow-sm text-primary-foreground bg-primary"
+      hoverClass="opacity-90"
+    >
+      <View className="i-lucide-square text-sm" />
+      <Text className="text-sm  font-medium">{t.stopGenerating}</Text>
+    </View>
+  );
+};
+
+const NewConversationButton: React.FC<{
+  disabled: boolean;
+  onClick?: () => void;
+}> = ({ disabled, onClick }) => {
+  const { t } = useAiAssistantI18n();
+  return (
+    <View className="flex items-center gap-2">
+      <View
+        onClick={disabled ? undefined : onClick}
+        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-all duration-200 ${
+          disabled ? "opacity-40" : "active:bg-primary/40"
+        }`}
+        hoverClass={disabled ? "" : "bg-primary/20"}
+      >
+        <View className="i-lucide-message-circle-plus text-primary text-base" />
+        <Text className="text-sm text-primary">{t.newConversation}</Text>
+      </View>
+    </View>
+  );
+};
+
+export const ChatInput: React.FC<ChatInputProps> = ({
+  conversations,
+  isLoading,
+  starting,
+  inputValue,
+  onInputChange,
+  onInputAppend,
+  onSendMessage,
+  onNewConversation,
+  onCancel,
+  recommendedQuestions = [],
+  onQuestionClick,
+}) => {
+  const safeAreaInsets = useSafeArea();
+  const { t } = useAiAssistantI18n();
+  const [isFocused, setIsFocused] = useState(false);
+
+  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 disabledNewConversation =
+    !hasConversations || lastIsDivider || starting || isLoading;
+  const textareaRef = useRef<any>(null);
+
+  const handleInput = (e: { detail: { value: string } }) => {
+    onInputChange(e.detail.value);
+  };
+
+  const handleConfirm = () => {
+    if (!isLoading && inputValue.trim()) {
+      onSendMessage();
+    }
+  };
+
+  const handleVoiceResult = (text: string) => {
+    if (text) {
+      if (onInputAppend) {
+        onInputAppend(text);
+      } else {
+        onInputChange(inputValue + text);
+      }
+
+      // 2. 延迟执行滚动（等渲染完成）
+      setTimeout(() => {
+        scrollToEndQuickly();
+      }, 60); // 50~100ms，根据真机测试微调
+    }
+  };
+
+  const scrollToEndQuickly = () => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+
+    const len = inputValue.length;
+
+    ta.focus?.();
+    ta.setSelectionRange?.(len, len);
+
+    setTimeout(() => {
+      ta.blur?.();
+    }, 30);
+  };
+
+  return (
+    <View
+      className="px-4 py-3"
+      style={{ paddingBottom: `${8 + safeAreaInsets.bottom}px` }}
+    >
+      {!isLoading && recommendedQuestions.length > 0 && (
+        <View className="mb-3">
+          <View className="flex flex-wrap gap-2">
+            {recommendedQuestions.map((question) => (
+              <View
+                key={question}
+                onClick={() => onQuestionClick?.(question)}
+                className="text-xs px-3 py-1.5 bg-primary/20 text-primary rounded-full border border-primary/40 active:bg-primary/30"
+                hoverClass="bg-primary/40"
+              >
+                <Text>{question}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      )}
+
+      <View
+        className={`w-full rounded-xl bg-background transition-all duration-200 p-3 border ${
+          isFocused ? "border-primary shadow-sm" : "border-primary/40"
+        }`}
+        data-role="chat-input"
+      >
+        <Textarea
+          ref={textareaRef}
+          value={inputValue}
+          onInput={handleInput}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          placeholder={t.inputPlaceholder}
+          disabled={isLoading}
+          maxlength={10000}
+          className="w-full text-base text-foreground placeholder:text-muted-foreground leading-relaxed disabled:opacity-50 resize-none"
+          data-role="chat-textarea"
+          confirm-type="send"
+          style={{
+            height: "60px",
+            minHeight: "60px",
+            maxHeight: "60px",
+            resize: "none",
+            background: "none",
+            fontSize: "14px",
+          }}
+        >
+          {/* 不要删掉，这是为了解决 h5 textarea 样式问题 */}
+          <style>
+            {`.taro-textarea {background: none;resize: none;}`}
+          </style>
+          </Textarea>
+
+        <View
+          className="flex items-center justify-between mt-1 pt-2"
+          data-role="chat-tools"
+        >
+          <View className="flex items-center gap-2">
+            <NewConversationButton
+              disabled={disabledNewConversation}
+              onClick={onNewConversation}
+            />
+          </View>
+
+          <View className="flex items-center gap-2">
+            <VoiceInput onResult={handleVoiceResult} disabled={starting} />
+            {isLoading ? (
+              <StopButton onClick={onCancel} />
+            ) : (
+              <SubmitButton
+                disabled={starting || isLoading || !inputValue.trim()}
+                starting={starting}
+                onClick={handleConfirm}
+              />
+            )}
+          </View>
+        </View>
+      </View>
+
+      <View className="text-[10px] text-muted mt-2 text-center">
+        {t.sendHint}
+      </View>
+    </View>
+  );
+};

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

@@ -0,0 +1,126 @@
+import { ScrollView, Text, View } from "@tarojs/components";
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
+import { useAiAssistantI18n } from "../i18n";
+import type { Conversation } from "../types";
+import { ChatAssistantMessage, ChatLoading } from "./ChatAssistantMessage";
+import { ChatUserMessage } from "./ChatUserMessage";
+
+interface ChatMessagesProps {
+  conversations: Conversation[];
+  isLoading: boolean;
+  isLoadingHistory?: boolean;
+  hasMoreHistory?: boolean;
+  onLoadMore?: () => void;
+}
+
+export const ChatMessages: React.FC<ChatMessagesProps> = ({
+  conversations,
+  isLoading,
+  isLoadingHistory,
+  hasMoreHistory,
+  onLoadMore,
+}) => {
+  const [scrollTop, setScrollTop] = useState(0);
+  const { t } = useAiAssistantI18n();
+
+  const scrollToBottom = useCallback(() => {
+    setScrollTop((prev) => prev + 10000);
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [conversations, scrollToBottom]);
+
+  const handleScrollToUpper = useCallback(() => {
+    if (onLoadMore && hasMoreHistory && !isLoadingHistory) {
+      onLoadMore();
+    }
+  }, [onLoadMore, hasMoreHistory, isLoadingHistory]);
+
+  return (
+    <ScrollView
+      scrollY
+      scrollTop={scrollTop}
+      scrollWithAnimation
+      className="flex-1 overflow-hidden"
+      onScrollToLower={scrollToBottom}
+      onScrollToUpper={handleScrollToUpper}
+      upperThreshold={50}
+    >
+      <View className="flex flex-col min-h-full">
+        {isLoadingHistory && (
+          <View className="flex justify-center items-center py-4">
+            <Text className="text-sm text-gray-400">{t.loadingHistory}</Text>
+          </View>
+        )}
+        {!isLoadingHistory && hasMoreHistory && (
+          <View className="flex justify-center items-center py-4">
+            <Text className="text-sm text-gray-400">{t.loadMore}</Text>
+          </View>
+        )}
+        {conversations.map((conversation, index) => {
+          const len = conversation.messages.length;
+          const historyId = conversation.historyId || "";
+          const lastHistoryId = conversations[index - 1]?.historyId || "";
+          const showDivider =
+            index > 0 &&
+            (historyId !== lastHistoryId ||
+              conversation.system?.level === "newConversation");
+
+          return (
+            <View key={conversation.taskId} className="flex flex-col">
+              {showDivider && (
+                <View className="flex items-center justify-center py-4">
+                  <View className="flex-1 h-px bg-gray-200" />
+                  <Text className="px-4 text-xs text-gray-400">
+                    {t.conversationDivider}
+                  </Text>
+                  <View className="flex-1 h-px bg-gray-200" />
+                </View>
+              )}
+              <View className="flex flex-col gap-2 px-4 pt-4">
+                {conversation.messages.map((message, msgIndex) => {
+                  const key = message.messageId || `${index}-${msgIndex}`;
+                  const isNewest = msgIndex === len - 1;
+                  if (message.role === "assistant") {
+                    return (
+                      <ChatAssistantMessage
+                        key={key}
+                        message={message}
+                        isNewest={isNewest}
+                        isLoading={isLoading}
+                        showAvatar={
+                          msgIndex === 0 ||
+                          conversation.messages[msgIndex - 1].role !==
+                            "assistant"
+                        }
+                      />
+                    );
+                  }
+                  return <ChatUserMessage key={key} message={message} />;
+                })}
+              </View>
+            </View>
+          );
+        })}
+        {isLoading && (
+          <View key="loading" className="flex flex-col gap-2 px-4 pt-2">
+            <ChatAssistantMessage
+              key="loading"
+              message={{
+                kind: "text-content",
+                messageId: "loading",
+                role: "assistant",
+                content: "",
+              }}
+              isLoading={true}
+              showAvatar={false}
+            />
+          </View>
+        )}
+        <View className="w-full mt-auto sticky bottom-0 flex items-center justify-center py-2" />
+      </View>
+    </ScrollView>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { View } from "@tarojs/components";
+import type { MessagesItem, TextMessage } from "../types";
+import Markdown from "./markdown";
+
+export const ChatUserMessage: React.FC<{
+  message: MessagesItem;
+}> = ({ message }) => {
+  return (
+    <View
+      className={`flex gap-3 animate-in fade-in-0 slide-in-from-bottom-2 duration-300 overflow-hidden w-full flex-row-reverse`}
+    >
+      <View
+        className={`
+        px-4 py-2.5 rounded-2xl
+        transition-all duration-200 min-w-0 overflow-hidden max-w-full
+        bg-primary/20 text-foreground rounded-br-md
+      `}
+      >
+        <View className="text-lg leading-relaxed whitespace-pre-wrap break-words">
+          <Markdown content={(message as TextMessage).content || "..."} />
+        </View>
+      </View>
+    </View>
+  );
+};