@amaster.ai/components-templates 1.4.1 → 1.4.3

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

@@ -1,36 +1,106 @@
 import type React from "react";
+import { useEffect, useRef, useCallback } from "react";
 import type { Conversation } from "../types";
-import ChatAssistantMessage from "./chat-assistant-message";
+import ChatAssistantMessage, { ChatDivider } from "./chat-assistant-message";
 import ChatUserMessage from "./chat-user-message";
 import { cn } from "@/lib/utils";
+import { LoaderCircle } from "lucide-react";
+import { getText } from "../i18n";
 
 interface ChatMessagesProps {
   conversations: Conversation[];
   isLoading: boolean;
+  isLoadingHistory?: boolean;
+  hasMoreHistory?: boolean;
   scrollAreaRef: React.RefObject<HTMLDivElement>;
   messagesEndRef: React.RefObject<HTMLDivElement>;
   className?: string;
+  onLoadMore?: () => void;
 }
 
 const ChatMessages: React.FC<ChatMessagesProps> = ({
   conversations,
   isLoading,
+  isLoadingHistory,
+  hasMoreHistory,
   scrollAreaRef,
   messagesEndRef,
-  className
+  className,
+  onLoadMore,
 }) => {
+  const isNearTopRef = useRef(false);
+  const lastScrollTopRef = useRef(0);
+
+  const handleScroll = useCallback(() => {
+    const scrollArea = scrollAreaRef.current;
+    if (!scrollArea || !onLoadMore || !hasMoreHistory || isLoadingHistory)
+      return;
+
+    const scrollTop = scrollArea.scrollTop;
+
+    const isAtTop = scrollTop < 50;
+    const wasNearTop = isNearTopRef.current;
+
+    if (isAtTop && !wasNearTop && scrollTop < lastScrollTopRef.current) {
+      onLoadMore();
+    }
+
+    isNearTopRef.current = isAtTop;
+    lastScrollTopRef.current = scrollTop;
+  }, [scrollAreaRef, onLoadMore, hasMoreHistory, isLoadingHistory]);
+
+  useEffect(() => {
+    const scrollArea = scrollAreaRef.current;
+    if (!scrollArea) return;
+
+    scrollArea.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      scrollArea.removeEventListener("scroll", handleScroll);
+    };
+  }, [handleScroll, scrollAreaRef]);
+
+  const convLength = conversations.length;
+
   return (
     <div
       ref={scrollAreaRef}
-      className={cn('text-sm flex flex-col gap-4 w-full py-4 pb-0 min-h-0 overflow-x-hidden overflow-auto max-w-full min-w-0 px-4', {
-        'flex-1': conversations.length > 0,
-      }, className)}
+      className={cn(
+        "text-sm flex flex-col gap-4 w-full py-4 pb-0 min-h-0 overflow-x-hidden overflow-auto max-w-full min-w-0 px-4",
+        {
+          "flex-1": convLength > 0,
+        },
+        className,
+      )}
       data-role="chat-messages"
     >
+      {isLoadingHistory ? (
+        <div
+          key="loading-history"
+          className="flex justify-center items-center gap-2 text-center"
+        >
+          <LoaderCircle className="size-4 animate-spin" />
+          <span>{getText().loadingHistory}</span>
+        </div>
+      ) : hasMoreHistory ? (
+        <div className="flex justify-center items-center gap-2 text-center">
+          <span>
+            {hasMoreHistory ? getText().loadMore : getText().noMoreHistory}
+          </span>
+        </div>
+      ) : null}
+
       {conversations.map((conversation, index) => {
         const len = conversation.messages.length;
+        const historyId = conversation.historyId || "";
+        const lastHistoryId = conversations[index - 1]?.historyId || "";
+        let addDivider =
+          index > 0 && historyId !== lastHistoryId || conversation.system?.level === "newConversation";
+
         return (
           <div key={conversation.taskId} className="flex flex-col gap-4">
+            {addDivider && (
+              <ChatDivider key={`${conversation.taskId}-divider`} />
+            )}
             {conversation.messages.map((message, msgIndex) => {
               const key = message.messageId || `${index}-${msgIndex}`;
               const isNewest = msgIndex === len - 1;

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

@@ -4,7 +4,8 @@ const ChatRecommends: React.FC<{
   hidden?: boolean;
   data?: string[];
   onSend: (prompt: string) => void;
-}> = ({ hidden, data = getText().defaultRecommendedQuestions, onSend }) => {
+  disabled?: boolean;
+}> = ({ hidden, data = getText().defaultRecommendedQuestions, onSend, disabled }) => {
   if (hidden || !data || data.length === 0) return null;
   return (
     <div className="flex flex-wrap gap-2 pt-2 px-4">
@@ -13,6 +14,7 @@ const ChatRecommends: React.FC<{
           type="button"
           key={prompt}
           onClick={() => onSend(prompt)}
+          disabled={disabled}
           className="
                     text-xs px-2 py-1.5
                     bg-[#F3F4F6] hover:bg-[#E5E7EB]

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

@@ -2,6 +2,21 @@ import { Button } from "@/components/ui/button";
 import { Volume2 } from "lucide-react";
 import { useSpeak } from "../hooks/useSpeak";
 import { cn } from "@/lib/utils";
+import { toast } from "@/hooks/use-toast";
+import { getText } from "../i18n";
+
+function availableSpeak(text: string) {
+  if (!text) return false;
+
+  // 1. 长度限制
+  if (text.length >= 100) return false;
+
+  // 2. 是否包含复杂 markdown
+  const markdownPattern =
+    /(```|`|\*\*|__|\* |^- |^\d+\. |\[.+\]\(.+\)|#+ |>|!\[)/m;
+
+  return !markdownPattern.test(text);
+}
 
 export default function TTSReader({
   text,
@@ -12,7 +27,7 @@ export default function TTSReader({
 }) {
   const { speak, stop, speaking } = useSpeak();
 
-  if (!text) {
+  if (!speaking && !text) {
     return null;
   }
 
@@ -22,20 +37,23 @@ export default function TTSReader({
       size="sm"
       className={cn(
         "hover:bg-transparent p-0  h-6 text-primary/50 hover:text-primary",
+        !speaking && "opacity-0 group-hover:opacity-100",
+        speaking ? "pointer-events-none " : "",
         className,
       )}
       onClick={() => {
+        if (!availableSpeak(text)) {
+          toast({
+            title: getText().notAvailableSpeak,
+          });
+          return;
+        }
         try {
-          if (speaking) {
-            stop();
-          } else {
-            speak(text);
-          }
+          speaking ? stop() : speak(text);
         } catch (error) {
           console.error("TTS error:", error);
         }
       }}
-      title={speaking ? "停止朗读" : "朗读文本"}
     >
       <Volume2 className={cn(speaking ? "text-primary animate-pulse" : "")} />
     </Button>

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

@@ -1,6 +1,8 @@
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
+import { LoaderCircle } from "lucide-react";
 import { lazy, Suspense } from "react";
+import { getText } from "../i18n";
 
 const UIRendererLazy = lazy(() => import("./ui-renderer-lazy"));
 
@@ -25,7 +27,14 @@ export const UIRenderer: React.FC<UIRendererProps> = ({ spec, className }) => {
   }
 
   return (
-    <Suspense fallback={<Skeleton className={cn('w-full h-[120px] bg-gray-200', className)} />}>
+    <Suspense
+      fallback={
+        <Skeleton className={cn("w-full h-[120px] bg-gray-200 flex items-center justify-center gap-2", className)}>
+          <LoaderCircle className="size-4 animate-spin" />
+          <span>{getText().loading}...</span>
+        </Skeleton>
+      }
+    >
       <UIRendererLazy spec={spec} className={className} />
     </Suspense>
   );

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

@@ -1,13 +1,24 @@
-import { useState } from "react";
-import { useConversationProcessor } from "./useConversationProcessor";
+import { useState, useCallback } from "react";
+import { useConversation } from "./useConversation";
 import { useAutoScroll } from "./useAutoScroll";
 
 export const useAssistantStore = () => {
   const [inputValue, setInputValue] = useState("");
 
-  const chatStreamHook = useConversationProcessor();
-  const { conversations, isLoading, sendMessage, resetConversation } =
-    chatStreamHook;
+  const chatStreamHook = useConversation();
+  const {
+    conversations,
+    isLoading,
+    isLoadingHistory,
+    historyState,
+    sendMessage,
+    resetConversation,
+    startNewConversation,
+    loadHistory,
+    loadMoreHistory,
+    starting,
+    cancelChat,
+  } = chatStreamHook;
 
   const autoScrollHook = useAutoScroll(conversations, isLoading);
   const { scrollAreaRef, messagesEndRef, scrollToBottom } = autoScrollHook;
@@ -22,15 +33,33 @@ export const useAssistantStore = () => {
     await sendMessage(message.trim());
   };
 
+  const handleNewConversation = useCallback(async () => {
+    await startNewConversation();
+  }, [startNewConversation]);
+
+  const handleCancelChat = useCallback(async () => {
+    await cancelChat();
+  }, [cancelChat]);
+
+  const handleLoadMore = useCallback(async () => {
+    await loadMoreHistory();
+  }, [loadMoreHistory]);
+
   return {
     conversations,
     isLoading,
+    isLoadingHistory,
+    historyState,
     inputValue,
     setInputValue,
     sendMessage: handleSendMessage,
     reset: resetConversation,
+    startNewConversation: handleNewConversation,
+    cancelChat: handleCancelChat,
+    loadMoreHistory: handleLoadMore,
     scrollAreaRef,
     messagesEndRef,
-    scrollToBottom
+    scrollToBottom,
+    starting,
   };
 };