@amaster.ai/components-templates 1.4.0 → 1.4.2

package/components/ai-assistant/others.md

@@ -0,0 +1,16 @@
+## tailwind.config.js 
+
+content 添加 "./node_modules/@json-render/shadcn/dist/**/*.js"
+```
+{   
+    content: [
+        "./node_modules/@json-render/shadcn/dist/**/*.js"
+    ]
+}
+```
+
+## src/lib/client 保证是新的
+```
+import { createClient } from "@amaster.ai/client";
+export const client = createClient({});
+```

package/components/ai-assistant/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-assistant",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "AI Assistant component template",
   "main": "template/index.ts",
   "template": {
@@ -29,6 +29,9 @@
     "@amaster.ai/client": "1.1.0-beta.52",
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
-    "immer": "^10.0.0"
+    "immer": "^10.0.0",
+    "@json-render/core": "^0.12.0",
+    "@json-render/react": "^0.12.0",
+    "@json-render/shadcn": "^0.12.0"
   }
 }

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

@@ -10,8 +10,10 @@ import ChatDisplayModeSwitcher from "./components/chat-display-mode-switcher";
 import { useDisplayMode } from "./hooks/useDisplayMode";
 import InlineAIAssistant from "./inline-ai-assistant";
 
-const AIAssistant: React.FC = () => {
-
+const AIAssistant: React.FC<{
+  greeting?: string;
+  recommends?: string[];
+}> = ({ greeting, recommends }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [displayMode, setDisplayMode] = useDisplayMode(isOpen);
   const isFullscreen = displayMode === "fullscreen" && isOpen;
@@ -67,6 +69,7 @@ const AIAssistant: React.FC = () => {
           <ChatHeader
             disabledDrag={displayMode !== "floating"}
             isDragging={isDragging}
+            displayMode={displayMode}
             onMouseDown={handleDragStart}
             onTouchStart={handleTouchStart}
             onClose={handleClose}
@@ -77,7 +80,13 @@ const AIAssistant: React.FC = () => {
             />
           </ChatHeader>
 
-          <InlineAIAssistant showBanner={false} className="flex-1" greeting={getText().greeting} />
+          <InlineAIAssistant
+            showBanner={false}
+            className="flex-1"
+            greeting={greeting || getText().greeting}
+            recommends={recommends}
+            displayMode={displayMode}
+          />
         </ChatFloatingCard>
       )}
     </>

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

@@ -116,7 +116,6 @@ const ChatToolMessage: React.FC<
       <span className="flex-1 truncate flex-shrink-0">
         {message.toolName || getText().unknownTool}
       </span>
-      {/* {message.toolDescription && <div className="flex-1 truncate max-w-1/2">{message.toolDescription}</div>} */}
     </div>
   );
 };
@@ -129,11 +128,25 @@ const ChatErrorMessage: React.FC<{ message: TextMessage }> = ({ message }) => {
   );
 };
 
+export const ChatDivider = () => {
+  return (
+    <div className="flex items-center justify-center gap-4 w-full my-4">
+      <div className="h-px bg-border flex-1" />
+      <span className="text-xs text-muted-foreground">
+        {getText().newConversation}
+      </span>
+      <div className="h-px bg-border flex-1" />
+    </div>
+  );
+};
+
 const ChatUIRenderMessage: React.FC<{ message: UIRenderMessage }> = ({
   message,
 }) => {
   return (
-    <UIRenderer spec={message.spec} className="mb-2" />
+    <div className="flex-1 overflow-hidden">
+      <UIRenderer spec={message.spec} className="mb-2" />
+    </div>
   );
 };
 
@@ -154,7 +167,9 @@ const MessageContentRenderer: React.FC<
     case "error":
       return <ChatErrorMessage message={message as TextMessage} {...rest} />;
     case "ui-render":
-      return <ChatUIRenderMessage message={message as UIRenderMessage} />;
+      return (
+        <ChatUIRenderMessage message={message as UIRenderMessage} {...rest} />
+      );
     default:
       return <div>{getText().unknownTool}</div>;
   }
@@ -166,15 +181,17 @@ const ChatAssistantMessage: React.FC<
     showAvatar?: boolean;
   } & MessageCommonProps
 > = ({ message, showAvatar, ...rest }) => {
+
   return (
     <div
+      data-conversation-message-id={(message as any).messageId}
       className={cn(
         "flex gap-3 animate-in fade-in-0 slide-in-from-bottom-2 duration-300 overflow-hidden w-full chat-assistant-message &+.chat-assistant-message:mt-4 group",
       )}
     >
       <div
         className={cn(
-          "flex-shrink-0 h-7 w-7 rounded-full bg-gradient-to-br from-[#6366F1] to-[#8B5CF6] flex items-center justify-center text-left",
+          "flex-shrink-0 h-7 w-7 rounded-full bg-gradient-to-br from-primary to-primary/40 flex items-center justify-center text-left",
           !showAvatar && "invisible",
         )}
       >

package/components/ai-assistant/template/components/chat-display-mode-switcher.tsx

@@ -3,12 +3,7 @@ import { getText } from "../i18n";
 import { HoverCard } from "@radix-ui/react-hover-card";
 import { HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
 import { Button } from "@/components/ui/button";
-
-export type IDisplayMode =
-  | "fullscreen"
-  | "floating"
-  | "side-left"
-  | "side-right";
+import type { IDisplayMode } from "../types";
 
 const ChatDisplayModeSwitcher: React.FC<{
   displayMode: IDisplayMode;

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

@@ -31,7 +31,7 @@ const ChatFloatingButton: React.FC<ChatFloatingButtonProps> = ({
         size="lg"
         className={`
           group relative h-full w-full rounded-full
-          bg-gradient-to-br from-[#6366F1] to-[#8B5CF6]
+          bg-gradient-to-br from-primary to-primary/40
           text-white
           border-0
           transition-all duration-300 ease-out select-none
@@ -43,7 +43,7 @@ const ChatFloatingButton: React.FC<ChatFloatingButtonProps> = ({
           }
         `}
       >
-        <span className="absolute inset-0 rounded-full bg-[#6366F1] animate-ping opacity-20" />
+        <span className="absolute inset-0 rounded-full bg-primary animate-ping opacity-20" />
         <MessageSquare
           className="relative h-5 w-5 pointer-events-none"
           strokeWidth={1.75}

package/components/ai-assistant/template/components/chat-floating-card.tsx

@@ -2,7 +2,7 @@ import type React from "react";
 import { useRef } from "react";
 import { Card } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
-import { IDisplayMode } from "./chat-display-mode-switcher";
+import { IDisplayMode } from "../types";
 
 interface ChatFloatingCardProps {
   displayMode: IDisplayMode;

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

@@ -2,8 +2,11 @@ import { MessageSquare, X } from "lucide-react";
 import type React from "react";
 import { Button } from "@/components/ui/button";
 import { getText } from "../i18n";
+import { cn } from "@/lib/utils";
+import { IDisplayMode } from "../types";
 
 interface ChatHeaderProps {
+  displayMode?: IDisplayMode;
   disabledDrag?: boolean;
   isDragging?: boolean;
   onMouseDown?: (e: React.MouseEvent) => void;
@@ -13,6 +16,7 @@ interface ChatHeaderProps {
 }
 
 const ChatHeader: React.FC<ChatHeaderProps> = ({
+  displayMode,
   disabledDrag,
   isDragging,
   onMouseDown,
@@ -22,27 +26,25 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
 }) => {
   return (
     <div
-      className={`
-        flex items-center justify-between px-4 py-3
-        border-b border-[#E5E7EB]
-        bg-white
-        ${!disabledDrag && onMouseDown ? (isDragging ? "cursor-grabbing" : "cursor-grab") : ""}
-      `}
+      className={cn(
+        "flex items-center justify-between px-4",
+        !disabledDrag && onMouseDown
+          ? isDragging
+            ? "cursor-grabbing"
+            : "cursor-grab"
+          : "",
+        {
+          'border-b border-[#E5E7EB] bg-white': displayMode === "floating",
+        },
+      )}
       onMouseDown={!disabledDrag ? onMouseDown : undefined}
       onTouchStart={!disabledDrag ? onTouchStart : undefined}
     >
       <div className="flex items-center gap-2.5">
-        <div className="flex items-center justify-center h-8 w-8 rounded-full bg-gradient-to-br from-[#6366F1] to-[#8B5CF6]">
-          <MessageSquare className="h-4 w-4 text-white" strokeWidth={2} />
-        </div>
         <div className="flex flex-col">
           <span className="text-sm font-semibold text-[#111827]">
-            AI Assistant
+            {getText().assistantName}
           </span>
-          <div className="flex items-center gap-1.5">
-            <span className="h-1.5 w-1.5 rounded-full bg-[#10B981] animate-pulse" />
-            <span className="text-xs text-[#6B7280]">{getText().online}</span>
-          </div>
         </div>
       </div>
       <div className="flex items-center gap-1">

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

@@ -1,9 +1,15 @@
-import { ArrowUp, MessageCirclePlus } from "lucide-react";
+import {
+  ArrowUp,
+  LoaderCircle,
+  MessageCirclePlus,
+  RotateCw,
+  Square,
+} from "lucide-react";
 import type React from "react";
 import { Button } from "@/components/ui/button";
 import { getText } from "../i18n";
-import type { Conversation } from "../types";
-import { useState } from "react";
+import type { Conversation, IDisplayMode } from "../types";
+import { useMemo, useState } from "react";
 import { cn } from "@/lib/utils";
 import {
   Tooltip,
@@ -13,18 +19,19 @@ import {
 } from "@/components/ui/tooltip";
 import VoiceInputButton from "./voice-input";
 
-const ResetButton: React.FC<{ onReset?: () => void }> = ({ onReset }) => {
-  if (!onReset) return null;
+const NewConvButton: React.FC<{ onNew?: () => void; disabled?: boolean }> = ({ onNew, disabled }) => {
+  if (!onNew) return null;
   return (
     <TooltipProvider>
       <Tooltip delayDuration={0}>
-        <TooltipContent>{getText().resetConversation}</TooltipContent>
+        <TooltipContent>{getText().newConversation}</TooltipContent>
         <TooltipTrigger asChild>
           <Button
             type="button"
             variant="ghost"
             size="icon"
-            onClick={onReset}
+            onClick={onNew}
+            disabled={disabled}
             className="h-8 w-8 text-[#6B7280] hover:text-[#374151] hover:bg-[#F3F4F6] rounded-lg transition-colors duration-200 cursor-pointer"
           >
             <MessageCirclePlus className="size-5" />
@@ -35,29 +42,56 @@ const ResetButton: React.FC<{ onReset?: () => void }> = ({ onReset }) => {
   );
 };
 
-const SubmitButton: React.FC<{ disabled: boolean; onClick: () => void }> = ({
-  disabled,
+const SubmitButton: React.FC<{
+  disabled: boolean;
+  starting?: boolean;
+  onClick: () => void;
+}> = ({ disabled, starting, onClick }) => {
+  return (
+    <Button
+      type="button"
+      onClick={onClick}
+      disabled={disabled || starting}
+      size="icon"
+      className={cn(
+        "size-8 text-white rounded-xl transition-all duration-200 cursor-pointer shadow-[0_2px_8px_rgba(99,102,241,0.3)] hover:shadow-[0_4px_12px_rgba(99,102,241,0.4)]",
+        "bg-gradient-to-r from-primary to-primary/80",
+        "hover:from-primary/90 hover:to-primary/70",
+        "disabled:opacity-40 disabled:cursor-not-allowed",
+        starting && "bg-gray-600",
+      )}
+    >
+      {starting ? (
+        <LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2} />
+      ) : (
+        <ArrowUp className="h-4 w-4" strokeWidth={2} />
+      )}
+    </Button>
+  );
+};
+
+const StopButton: React.FC<{ onClick: () => void; disabled?: boolean }> = ({
   onClick,
+  disabled,
 }) => {
   return (
     <Button
       type="button"
       onClick={onClick}
-      disabled={disabled}
       size="icon"
+      disabled={disabled}
       className="
                 size-8
-                bg-gradient-to-r from-[#6366F1] to-[#8B5CF6]
-                hover:from-[#4F46E5] hover:to-[#7C3AED]
+                bg-foreground
+                hover:bg-foreground/50
                 text-white
                 rounded-xl
                 transition-all duration-200
                 cursor-pointer
-                disabled:opacity-40 disabled:cursor-not-allowed
-                shadow-[0_2px_8px_rgba(99,102,241,0.3)]
-                hover:shadow-[0_4px_12px_rgba(99,102,241,0.4)]"
+                shadow-[0_2px_8px_rgba(239,68,68,0.3)]
+                hover:shadow-[0_4px_12px_rgba(239,68,68,0.4)]"
     >
-      <ArrowUp className="h-4 w-4" strokeWidth={2} />
+      <Square className="h-3 w-3 fill-current" strokeWidth={2} />
     </Button>
   );
 };
@@ -68,7 +102,10 @@ interface ChatInputProps {
   inputValue: string;
   onInputChange: (value: string) => void;
   onSendMessage: () => void;
-  onReset?: () => void;
+  onNew?: () => void;
+  onCancel?: () => void;
+  starting?: boolean;
+  displayMode?: IDisplayMode;
 }
 
 const ChatInput: React.FC<ChatInputProps> = ({
@@ -77,9 +114,19 @@ const ChatInput: React.FC<ChatInputProps> = ({
   inputValue,
   onInputChange,
   onSendMessage,
-  onReset,
+  onNew,
+  onCancel,
+  starting,
+  displayMode
 }) => {
-  const hasConversations = conversations.length > 1;
+  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 [focus, setFocus] = useState(false);
   const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter" && !e.shiftKey) {
@@ -92,9 +139,9 @@ const ChatInput: React.FC<ChatInputProps> = ({
     <div className="py-3 px-4">
       <div
         className={cn(
-          "w-full rounded-xl bg-white transition-all duration-200 p-3 border border-[#6366F1]/80",
+          "w-full rounded-xl bg-white transition-all duration-200 p-3 border border-primary/80",
           {
-            "border-[#6366F1] ring-2 ring-[#6366F1]/20": focus
+            "border-primary ring-2 ring-primary/20": focus,
           },
         )}
       >
@@ -112,7 +159,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
         />
         <div className="flex items-center justify-between gap-2 mt-1">
           <div className="flex items-center gap-1">
-            <ResetButton onReset={hasConversations ? onReset : undefined} />
+            {onNew && <NewConvButton onNew={onNew} disabled={!hasConversations || lastIsDivider || starting || isLoading} />}
           </div>
           <div className="flex items-center gap-2">
             <VoiceInputButton
@@ -121,17 +168,22 @@ const ChatInput: React.FC<ChatInputProps> = ({
                 setFocus(true);
               }}
               value={inputValue}
-              disabled={isLoading}
-            />
-            <SubmitButton
-              onClick={() => onSendMessage()}
-              disabled={!inputValue.trim() || isLoading}
+              disabled={isLoading || starting}
             />
+            {isLoading ? (
+              <StopButton onClick={onCancel || (() => {})} />
+            ) : (
+              <SubmitButton
+                onClick={() => onSendMessage()}
+                disabled={!inputValue.trim() || isLoading}
+                starting={starting}
+              />
+            )}
           </div>
         </div>
       </div>
 
-      {conversations.length > 0 && (
+      {(conversations.length > 0 || displayMode !== "inline") && (
         <p className="text-[10px] text-[#9CA3AF] mt-2 text-center">
           {getText().footerAiWarning}
         </p>

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/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,
   };
 };