@amaster.ai/components-templates 1.8.0 → 1.10.0

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.8.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.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",
+    "@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/ChatInput.tsx

@@ -4,6 +4,7 @@ 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 {
@@ -151,18 +152,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     >
       {!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>
       )}
 

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>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amaster.ai/components-templates",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Amaster component templates collection",
   "type": "module",
   "main": "index.js",

package/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amaster.ai/cli",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Amaster CLI tool for component templates",
   "type": "module",
   "main": "dist/index.js",