@amaster.ai/components-templates 1.6.0 → 1.10.0

package/components/ai-assistant/template/hooks/useConversation.ts

@@ -391,7 +391,6 @@ export function useConversation() {
           try {
             const partData = JSON.parse(json);
             if (partData.root && partData.elements) {
-              debugger
               fillData({
                 kind: 'ui-render',
                 taskId,
@@ -768,28 +767,6 @@ export function useConversation() {
       const controller = abortControllerRef.current;
       forceStopRef.current = false;
 
-      // mock
-      if (userContent === "MAGA") {
-        const { generateMockUIStream } = await import("../mock/mock-data");
-        const cancelMock = generateMockUIStream(
-          taskId || generateId(),
-          (chunk) => {
-            if (forceStopRef.current) return;
-            hasResponse = true;
-            processLiveData(chunk as any);
-            if (chunk.result.final) {
-              setIsLoading(false);
-            }
-          },
-        );
-        abortControllerRef.current?.signal.addEventListener(
-          "abort",
-          cancelMock,
-        );
-        return;
-      }
-
-      // real chat
       try {
         const stream = client.copilot.chat(
           userContent ? [{ role: "user", content: userContent }] : [],

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

@@ -2,13 +2,50 @@ import { useEffect, useState } from "react";
 import type { IDisplayMode } from "../types";
 
 const getStorageKey = () => `${location.hostname}-ai-assistant-display-mode`;
+const MOBILE_DISPLAY_MODES: IDisplayMode[] = [
+  "fullscreen",
+  "half-top",
+  "half-bottom",
+];
+const DESKTOP_DEFAULT_MODE: IDisplayMode = "floating";
+const MOBILE_DEFAULT_MODE: IDisplayMode = "fullscreen";
 
-export const useDisplayMode = (enabled: boolean) => {
+const normalizeDisplayMode = (
+  mode: IDisplayMode | null,
+  isMobile: boolean,
+): IDisplayMode => {
+  if (!mode) {
+    return isMobile ? MOBILE_DEFAULT_MODE : DESKTOP_DEFAULT_MODE;
+  }
+
+  if (isMobile) {
+    return MOBILE_DISPLAY_MODES.includes(mode) ? mode : MOBILE_DEFAULT_MODE;
+  }
+
+  if (mode === "half-top" || mode === "half-bottom") {
+    return DESKTOP_DEFAULT_MODE;
+  }
+
+  return mode;
+};
+
+export const useDisplayMode = (
+  enabled: boolean,
+  isMobile: boolean,
+  sideWidths?: { left: number; right: number },
+) => {
   const STORAGE_KEY = getStorageKey();
   const [displayMode, setDisplayMode] = useState<IDisplayMode>(
-    (localStorage.getItem(STORAGE_KEY) as IDisplayMode) || "floating",
+    normalizeDisplayMode(
+      localStorage.getItem(STORAGE_KEY) as IDisplayMode | null,
+      isMobile,
+    ),
   );
 
+  useEffect(() => {
+    setDisplayMode((currentMode) => normalizeDisplayMode(currentMode, isMobile));
+  }, [isMobile]);
+
   useEffect(() => {
     localStorage.setItem(STORAGE_KEY, displayMode);
 
@@ -26,15 +63,25 @@ export const useDisplayMode = (enabled: boolean) => {
     if (enabled) {
       if (displayMode === "side-left") {
         layoutRoot.setAttribute("data-display-mode", "side-left");
+        layoutRoot.style.setProperty(
+          "--ai-assistant-side-left-width",
+          `${sideWidths?.left ?? 420}px`,
+        );
       } else if (displayMode === "side-right") {
         layoutRoot.setAttribute("data-display-mode", "side-right");
+        layoutRoot.style.setProperty(
+          "--ai-assistant-side-right-width",
+          `${sideWidths?.right ?? 420}px`,
+        );
       }
     }
 
     return () => {
       removeAttr();
+      layoutRoot.style.removeProperty("--ai-assistant-side-left-width");
+      layoutRoot.style.removeProperty("--ai-assistant-side-right-width");
     };
-  }, [displayMode, enabled]);
+  }, [displayMode, enabled, sideWidths?.left, sideWidths?.right]);
 
   const removeStyle = () => {
     const style = document.getElementById("ai-assistant-display-mode-style");
@@ -49,13 +96,13 @@ export const useDisplayMode = (enabled: boolean) => {
       style.id = "ai-assistant-display-mode-style";
       style.innerHTML = `
       [data-display-mode="side-left"] {
-        padding-left: 420px !important;
+        padding-left: var(--ai-assistant-side-left-width, 420px) !important;
         padding-right: 0 !important;
       }
       
       [data-display-mode="side-right"] {
         padding-left: 0 !important;
-        padding-right: 420px !important;
+        padding-right: var(--ai-assistant-side-right-width, 420px) !important;
       }
     `;
       document.head.appendChild(style);

package/components/ai-assistant/template/hooks/useDraggable.ts

@@ -52,6 +52,9 @@ export const useDraggable = ({
       const touch = e.touches[0];
       if (!touch) return;
 
+      e.preventDefault();
+      e.stopPropagation();
+
       const actualPos = getActualPosition();
       dragRef.current = {
         startX: touch.clientX,
@@ -86,15 +89,20 @@ export const useDraggable = ({
     const handleTouchMove = (e: TouchEvent) => {
       const touch = e.touches[0];
       if (touch) {
+        e.preventDefault();
         handleMove(touch.clientX, touch.clientY);
       }
     };
 
-    const handleEnd = (event) => {
+    const handleEnd = (event: MouseEvent | TouchEvent) => {
       if (dragRef.current) {
         setPosition((prev) => {
+          const fallbackPoint =
+            "changedTouches" in event ? event.changedTouches[0] : event;
           const snapped = snapToEdge(
-            prev.x === -1 && prev.y === -1 ? { x: event.x, y: event.y } : prev,
+            prev.x === -1 && prev.y === -1 && fallbackPoint
+              ? { x: fallbackPoint.clientX, y: fallbackPoint.clientY }
+              : prev,
           );
           savePosition(snapped);
           return snapped;
@@ -106,7 +114,7 @@ export const useDraggable = ({
 
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleEnd);
-    document.addEventListener("touchmove", handleTouchMove, { passive: true });
+    document.addEventListener("touchmove", handleTouchMove, { passive: false });
     document.addEventListener("touchend", handleEnd);
 
     return () => {

package/components/ai-assistant/template/hooks/usePosition.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import type { Position } from "../types";
 
 const DEFAULT_POSITION: Position = { x: -1, y: -1 };
@@ -34,23 +34,14 @@ const savePosition = (pos: Position) => {
   }
 };
 
-export const usePosition = (isOpen: boolean, isFullscreen: boolean) => {
+export const usePosition = (
+  isOpen: boolean,
+  isFullscreen: boolean,
+  getElementDimensions: () => { width: number; height: number },
+) => {
   const [position, setPosition] = useState<Position>(getSavedPosition);
-  // 使用 ref 来跟踪是否已经初始化，避免重复执行
-  const initializedRef = useRef(false);
   const edgeDistance = 16; // 距离边缘的最小距离
 
-  const getElementDimensions = useCallback(() => {
-    const buttonSize = 56;
-    const dialogWidth = 420;
-    const dialogHeight =
-      window.innerHeight < 600 ? window.innerHeight : window.innerHeight - 200;
-    return {
-      width: isOpen ? dialogWidth : buttonSize,
-      height: isOpen ? dialogHeight : buttonSize,
-    };
-  }, [isOpen]);
-
   const getActualPosition = useCallback((): Position => {
     if (position.x < 0 || position.y < 0) {
       return {
@@ -149,7 +140,8 @@ export const usePosition = (isOpen: boolean, isFullscreen: boolean) => {
     const handleResize = () => {
       setPosition((prev) => {
         if (prev.x < 0 || prev.y < 0) return prev;
-        return clampToBounds(prev);
+        const clamped = clampToBounds(prev);
+        return clamped.x === prev.x && clamped.y === prev.y ? prev : clamped;
       });
     };
 
@@ -157,23 +149,19 @@ export const usePosition = (isOpen: boolean, isFullscreen: boolean) => {
     return () => window.removeEventListener("resize", handleResize);
   }, [clampToBounds]);
 
-  // 修复：只在 isOpen 状态改变时检查边界，避免无限循环
   useEffect(() => {
-    if (position.x < 0 || position.y < 0) {
-      initializedRef.current = true;
-      return;
-    }
-
-    // 只在状态变化时执行一次
-    if (!initializedRef.current) {
-      const clamped = clampToBounds(position);
-      if (clamped.x !== position.x || clamped.y !== position.y) {
-        setPosition(clamped);
+    setPosition((prev) => {
+      if (prev.x < 0 || prev.y < 0) {
+        return prev;
+      }
+      const clamped = clampToBounds(prev);
+      if (clamped.x !== prev.x || clamped.y !== prev.y) {
         savePosition(clamped);
+        return clamped;
       }
-      initializedRef.current = true;
-    }
-  }, [isOpen, clampToBounds]); // 移除 position 依赖，避免循环
+      return prev;
+    });
+  }, [isOpen, clampToBounds]);
 
   const setPositionTo = useCallback(
     (x: "left" | "right", y: "top" | "bottom") => {
@@ -191,7 +179,7 @@ export const usePosition = (isOpen: boolean, isFullscreen: boolean) => {
       setPosition(newPos);
       savePosition(newPos);
     },
-    [],
+    [getElementDimensions],
   );
   return {
     position,

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

@@ -15,6 +15,8 @@ const i18nText = {
     online: "在线",
     thinking: "思考中",
     thought: "思考过程",
+    thoughtCountUnit: "条思考",
+    toolCountUnit: "次工具",
     newConversation: "开始新对话",
     fullscreen: "全屏显示",
     exitFullscreen: "退出全屏",
@@ -30,6 +32,8 @@ const i18nText = {
       sideLeft: "侧边模式（左）",
       sideRight: "侧边模式（右）",
       fullscreen: "全屏模式",
+      halfTop: "上半屏",
+      halfBottom: "下半屏",
     },
     voiceInput: "语音输入",
     stopVoiceInput: "停止录音",
@@ -72,6 +76,8 @@ const i18nText = {
     online: "Online",
     thinking: "Thinking",
     thought: "Thought process",
+    thoughtCountUnit: "thoughts",
+    toolCountUnit: "tools",
     newConversation: "Start a new chat",
     fullscreen: "Fullscreen",
     exitFullscreen: "Exit fullscreen",
@@ -88,6 +94,8 @@ const i18nText = {
       sideLeft: "Side mode (left)",
       sideRight: "Side mode (right)",
       fullscreen: "Fullscreen mode",
+      halfTop: "Top half",
+      halfBottom: "Bottom half",
     },
     voiceInput: "Voice input",
     stopVoiceInput: "Stop recording",

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

@@ -75,6 +75,8 @@ export type IDisplayMode =
   | "floating"
   | "side-left"
   | "side-right"
+  | "half-top"
+  | "half-bottom"
   | "inline";
 
 export interface InlineAIAssistantProps {

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

@@ -1,16 +1,22 @@
 {
   "name": "taro-project",
-  "version": "1.6.0",
+  "version": "1.10.0",
   "description": "开箱即用的基于Taro + React + Zustand + TailwindCSS + TypeScript的模板",
   "author": "amaster.ai",
   "license": "MIT",
+  "packageManager": "bun@1.2.21",
   "templateInfo": {
     "name": "default",
     "typescript": true,
     "css": "sass"
   },
   "scripts": {
-    "dev": "bun run build:h5 -- --watch",
+    "dev": "bun run preview:h5",
+    "preview:h5": "taro build --type h5 --watch",
+    "dev:h5": "bun run preview:h5",
+    "dev:weapp": "taro build --type weapp --watch",
+    "build": "bun run build:weapp",
+    "build:mini": "bun run build:weapp",
     "build:weapp": "taro build --type weapp",
     "build:swan": "taro build --type swan",
     "build:alipay": "taro build --type alipay",
@@ -24,8 +30,9 @@
     "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",
+    "pre-commit-check": "amaster-cli check all --stack taro",
+    "type-check": "amaster-cli check type --stack taro",
+    "check:build": "amaster-cli check build --stack taro",
     "precommit": "bun run lint:check && bun run type-check",
     "prepare": "husky || true",
     "postinstall": "weapp-tw patch || true",
@@ -39,10 +46,10 @@
   ],
   "dependencies": {
     "@a2a-js/sdk": "^0.3.7",
-    "@amaster.ai/bpm-ui": "1.1.0-beta.57",
-    "@amaster.ai/client": "1.1.0-beta.57",
-    "@amaster.ai/taro-echarts-ui": "1.1.0-beta.57",
-    "@amaster.ai/vite-plugins": "1.1.0-beta.57",
+    "@amaster.ai/bpm-ui": "1.1.0-beta.67",
+    "@amaster.ai/client": "1.1.0-beta.67",
+    "@amaster.ai/taro-echarts-ui": "1.1.0-beta.67",
+    "@amaster.ai/vite-plugins": "1.1.0-beta.67",
     "@babel/runtime": "^7.28.3",
     "@tarojs/components": "4.1.5",
     "@tarojs/helper": "4.1.5",
@@ -69,6 +76,7 @@
     "@egoist/tailwindcss-icons": "^1.9.0",
     "@iconify-json/lucide": "^1.2.64",
     "@iconify-json/mdi": "^1.2.3",
+    "@amaster.ai/cli": "1.1.0-beta.67",
     "@tarojs/cli": "4.1.5",
     "@tarojs/taro-loader": "4.1.5",
     "@tarojs/vite-runner": "4.1.5",

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

@@ -1,11 +1,13 @@
 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";
 
@@ -51,7 +53,7 @@ const ChatThoughtMessage: React.FC<
   const { t } = useAiAssistantI18n();
   const thinking = isLoading && isNewest;
   return (
-    <View className="leading-relaxed whitespace-pre-wrap break-words text-lg overflow-hidden text-left">
+    <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)}
@@ -81,7 +83,7 @@ const ChatToolMessage: React.FC<
   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-muted text-lg max-w-full overflow-hidden">
+    <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" ? (
@@ -109,6 +111,24 @@ const ChatErrorMessage: React.FC<
   );
 };
 
+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;
@@ -125,6 +145,8 @@ const MessageContentRenderer: React.FC<
       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;
   }

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

@@ -1,9 +1,10 @@
 import { Text, Textarea, View } from "@tarojs/components";
 import type React from "react";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useSafeArea } from "../hooks/useSafeArea";
 import { useAiAssistantI18n } from "../i18n";
 import type { Conversation } from "../types";
+import { RecommendedQuestions } from "./RecommendedQuestions";
 import { VoiceInput } from "./VoiceInput";
 
 interface ChatInputProps {
@@ -58,7 +59,7 @@ const StopButton: React.FC<{ onClick: () => void }> = ({ onClick }) => {
 
 const NewConversationButton: React.FC<{
   disabled: boolean;
-  onClick: () => void;
+  onClick?: () => void;
 }> = ({ disabled, onClick }) => {
   const { t } = useAiAssistantI18n();
   return (
@@ -103,6 +104,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   }, [lastConv]);
   const disabledNewConversation =
     !hasConversations || lastIsDivider || starting || isLoading;
+  const textareaRef = useRef<any>(null);
 
   const handleInput = (e: { detail: { value: string } }) => {
     onInputChange(e.detail.value);
@@ -121,68 +123,88 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       } 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 border-t border-primary/40 bg-background"
+      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>
+          <RecommendedQuestions
+            questions={recommendedQuestions}
+            onQuestionClick={onQuestionClick}
+          />
         </View>
       )}
 
       <View
-        className={`w-full rounded-xl bg-primary/10 transition-all duration-200 p-3 border ${
+        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={2000}
-          autoHeight
-          fixed
-          style={{ minHeight: "48px", maxHeight: "120px" }}
-          className="w-full text-base text-foreground placeholder:text-muted-foreground leading-relaxed disabled:opacity-50"
+          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-3 pt-2"
+          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!}
+              onClick={onNewConversation}
             />
           </View>
 
           <View className="flex items-center gap-2">
-            <VoiceInput
-              onResult={handleVoiceResult}
-              disabled={starting}
-            />
+            <VoiceInput onResult={handleVoiceResult} disabled={starting} />
             {isLoading ? (
               <StopButton onClick={onCancel} />
             ) : (

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

@@ -0,0 +1,39 @@
+import { ScrollView, Text, View } from "@tarojs/components";
+import type React from "react";
+
+interface RecommendedQuestionsProps {
+  questions: string[];
+  onQuestionClick?: (question: string) => void;
+}
+
+export const RecommendedQuestions: React.FC<RecommendedQuestionsProps> = ({
+  questions,
+  onQuestionClick,
+}) => {
+  if (questions.length === 0) {
+    return null;
+  }
+
+  return (
+    <ScrollView
+      scrollX
+      enhanced
+      showScrollbar={false}
+      enableFlex
+      className="w-full"
+    >
+      <View className="flex w-max gap-2 pr-4">
+        {questions.map((question) => (
+          <View
+            key={question}
+            onClick={() => onQuestionClick?.(question)}
+            className="shrink-0 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 className="whitespace-nowrap">{question}</Text>
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  );
+};