@amaster.ai/components-templates 1.6.0 → 1.8.0

package/components/ai-assistant/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amaster-react-project",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "type": "module",
   "scripts": {
     "dev": "vite --force",
@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@a2a-js/sdk": "^0.3.7",
-    "@amaster.ai/client": "1.1.0-beta.59",
-    "@amaster.ai/vite-plugins": "1.1.0-beta.59",
+    "@amaster.ai/client": "1.1.0-beta.61",
+    "@amaster.ai/vite-plugins": "1.1.0-beta.61",
     "@fontsource-variable/inter": "^5.2.8",
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@hookform/resolvers": "^5.2.2",

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

@@ -9,7 +9,7 @@ import type React from "react";
 import { Button } from "@/components/ui/button";
 import { getText } from "../i18n";
 import type { Conversation, IDisplayMode } from "../types";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import {
   Tooltip,
@@ -118,6 +118,8 @@ const ChatInput: React.FC<ChatInputProps> = ({
     if (!lastConv) return false;
     return lastConv.system?.level === "newConversation";
   }, [lastConv]);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [speaking, setSpeaking] = useState(false);
 
   const [focus, setFocus] = useState(false);
   const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -127,6 +129,12 @@ const ChatInput: React.FC<ChatInputProps> = ({
     }
   };
 
+  const textareaScrollToBottom = () => {
+    if (textareaRef.current) {
+      textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+    }
+  };
+
   return (
     <div className="py-3 px-4">
       <div
@@ -138,16 +146,19 @@ const ChatInput: React.FC<ChatInputProps> = ({
         )}
       >
         <textarea
+          ref={textareaRef}
           value={inputValue}
           onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
             onInputChange(e.target.value)
           }
-          onKeyPress={isLoading ? undefined : handleKeyPress}
+          onKeyPress={isLoading || speaking ? undefined : handleKeyPress}
           placeholder={getText().typePlaceholder}
           onFocus={() => setFocus(true)}
           onBlur={() => setFocus(false)}
           className="w-full text-sm text-foreground placeholder:text-muted-foreground outline-none resize-none leading-5 bg-card"
           rows={4}
+          disabled={speaking}
+          readOnly={speaking}
         />
         <div className="flex items-center justify-between gap-2 mt-1">
           <div className="flex items-center gap-1">
@@ -164,17 +175,19 @@ const ChatInput: React.FC<ChatInputProps> = ({
             <VoiceInputButton
               onChange={(text) => {
                 onInputChange(text);
+                textareaScrollToBottom();
                 setFocus(true);
               }}
               value={inputValue}
               disabled={isLoading || starting}
+              onRunningChange={setSpeaking}
             />
-            {!isLoading ? (
+            {isLoading ? (
               <StopButton onClick={onCancel || (() => {})} />
             ) : (
               <SubmitButton
                 onClick={() => onSendMessage()}
-                disabled={!inputValue.trim() || isLoading}
+                disabled={!inputValue.trim() || isLoading || speaking}
                 starting={starting}
               />
             )}

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

@@ -80,7 +80,7 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
       }}
       data-role="chat-messages"
     >
-      {isLoadingHistory ? (
+      {isLoadingHistory && convLength > 0 ? (
         <div
           key="loading-history"
           className="flex justify-center items-center gap-2 text-center"

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

@@ -3,12 +3,14 @@ import { Mic, StopCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { useVoiceInput } from "../hooks/useVoiceInput";
+import { useEffect } from "react";
 
 const VoiceInputButton: React.FC<{
   onChange: (text: string) => void;
   disabled?: boolean;
   value?: string;
-}> = ({ onChange, disabled, value }) => {
+  onRunningChange?: (running: boolean) => void;
+}> = ({ onChange, disabled, value, onRunningChange }) => {
   const {
     start,
     stop,
@@ -23,6 +25,12 @@ const VoiceInputButton: React.FC<{
     value,
   });
 
+  useEffect(() => {
+    if (onRunningChange) {
+      onRunningChange(running);
+    }
+  }, [running, onRunningChange]);
+
   return (
     <Button
       variant="ghost"

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-taro/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taro-project",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "开箱即用的基于Taro + React + Zustand + TailwindCSS + TypeScript的模板",
   "author": "amaster.ai",
   "license": "MIT",
@@ -39,10 +39,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.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",

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,6 +1,6 @@
 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";
@@ -58,7 +58,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 +103,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,12 +122,31 @@ 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 && (
@@ -147,42 +167,51 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       )}
 
       <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} />
             ) : (