@amaster.ai/components-templates 1.3.0

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

@@ -0,0 +1,70 @@
+import { Layers2, Maximize, Move, Sidebar } from "lucide-react";
+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";
+
+const ChatDisplayModeSwitcher: React.FC<{
+  displayMode: IDisplayMode;
+  onChange: (mode: IDisplayMode) => void;
+}> = ({ displayMode, onChange }) => {
+  const modes: {
+    mode: IDisplayMode;
+    icon: React.ReactNode;
+    title: string;
+  }[] = [
+    {
+      mode: "floating",
+      icon: <Layers2 className="h-4 w-4" strokeWidth={1.75} />,
+      title: getText().displayMode.floating,
+    },
+    {
+      mode: "side-right",
+      icon: <Sidebar className="h-4 w-4 rotate-180" strokeWidth={1.75} />,
+      title: getText().displayMode.sideRight,
+    },
+    {
+      mode: "side-left",
+      icon: <Sidebar className="h-4 w-4 " strokeWidth={1.75} />,
+      title: getText().displayMode.sideLeft,
+    },
+    {
+      mode: "fullscreen",
+      icon: <Maximize className="h-4 w-4" strokeWidth={1.75} />,
+      title: getText().displayMode.fullscreen,
+    },
+  ];
+
+  return (
+    <HoverCard openDelay={0}>
+      <HoverCardTrigger asChild>
+        <Button variant="ghost" size="icon" className="hover:bg-transparent text-black/50 hover:text-black">
+          {modes.find((m) => m.mode === displayMode)?.icon}
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardContent align="end" className="flex flex-col w-fit p-1">
+        {modes.map(({ mode, icon, title }) => (
+          <Button
+            key={mode}
+            variant="ghost"
+            className="justify-start hover:bg-gray-200 text-black/80 hover:text-black data-[state=open]:bg-transparent"
+            onClick={() => onChange(mode)}
+            size="sm"
+            disabled={mode === displayMode}
+          >
+            {icon}
+            {title}
+          </Button>
+        ))}
+      </HoverCardContent>
+    </HoverCard>
+  );
+};
+
+export default ChatDisplayModeSwitcher;

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

@@ -0,0 +1,56 @@
+import { MessageSquare } from "lucide-react";
+import type React from "react";
+import { Button } from "@/components/ui/button";
+
+interface ChatFloatingButtonProps {
+  onClick: () => void;
+  onMouseDown: (e: React.MouseEvent) => void;
+  onTouchStart: (e: React.TouchEvent) => void;
+  isDragging: boolean;
+  style: React.CSSProperties;
+}
+
+
+const ChatFloatingButton: React.FC<ChatFloatingButtonProps> = ({
+  onClick,
+  onMouseDown,
+  onTouchStart,
+  isDragging,
+  style,
+}) => {
+  return (
+    <div
+      className={`fixed z-50 flex items-center justify-center ${isDragging ? "cursor-grabbing" : "cursor-grab"}`}
+      style={style}
+    >
+      <Button
+        type="button"
+        onClick={() => !isDragging && onClick()}
+        onMouseDown={onMouseDown}
+        onTouchStart={onTouchStart}
+        size="lg"
+        className={`
+          group relative h-full w-full rounded-full
+          bg-gradient-to-br from-[#6366F1] to-[#8B5CF6]
+          text-white
+          border-0
+          transition-all duration-300 ease-out select-none
+          cursor-pointer
+          ${
+            isDragging
+              ? "shadow-[0_8px_30px_rgba(99,102,241,0.5)] scale-105"
+              : "shadow-[0_4px_20px_rgba(99,102,241,0.35)] hover:shadow-[0_8px_30px_rgba(99,102,241,0.5)] hover:scale-105"
+          }
+        `}
+      >
+        <span className="absolute inset-0 rounded-full bg-[#6366F1] animate-ping opacity-20" />
+        <MessageSquare
+          className="relative h-5 w-5 pointer-events-none"
+          strokeWidth={1.75}
+        />
+      </Button>
+    </div>
+  );
+};
+
+export default ChatFloatingButton;

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

@@ -0,0 +1,43 @@
+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";
+
+interface ChatFloatingCardProps {
+  displayMode: IDisplayMode;
+  isDragging: boolean;
+  style: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+const ChatFloatingCard: React.FC<ChatFloatingCardProps> = ({
+  displayMode,
+  isDragging,
+  style,
+  children,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Card
+      ref={containerRef}
+      className={cn(
+        `flex flex-col overflow-hidden bg-[#F9FAFB] border border-[#E5E7EB] z-50`,
+        {
+          "fixed inset-0 w-auto h-auto animate-in fade-in-0 zoom-in-[0.98] duration-300 origin-top-left rounded-none": displayMode === "fullscreen",
+          "fixed top-0 right-0 w-[420px] h-full rounded-none": displayMode === "side-right",
+          "fixed top-0 left-0 w-[420px] h-full rounded-none": displayMode === "side-left",
+          "rounded-2xl": displayMode === "floating",
+          "shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)]": displayMode === "floating" && isDragging,
+          "shadow-[0_10px_40px_-10px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]": displayMode === "floating" && !isDragging,
+        }
+      )}
+      style={displayMode !== "floating" ? {} : style}
+    >
+      {children}
+    </Card>
+  );
+};
+
+export default ChatFloatingCard;

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

@@ -0,0 +1,66 @@
+import { MessageSquare, X } from "lucide-react";
+import type React from "react";
+import { Button } from "@/components/ui/button";
+import { getText } from "../i18n";
+
+interface ChatHeaderProps {
+  disabledDrag?: boolean;
+  isDragging?: boolean;
+  onMouseDown?: (e: React.MouseEvent) => void;
+  onTouchStart?: (e: React.TouchEvent) => void;
+  onClose?: () => void;
+  children?: React.ReactNode;
+}
+
+const ChatHeader: React.FC<ChatHeaderProps> = ({
+  disabledDrag,
+  isDragging,
+  onMouseDown,
+  onTouchStart,
+  onClose,
+  children,
+}) => {
+  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") : ""}
+      `}
+      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
+          </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">
+        {children}
+        {onClose && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            className="h-8 w-8 text-[#6B7280] hover:text-[#374151] hover:bg-[#F3F4F6] rounded-lg transition-colors duration-200 cursor-pointer"
+          >
+            <X className="h-4 w-4" strokeWidth={1.75} />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ChatHeader;

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

@@ -0,0 +1,143 @@
+import { ArrowUp, MessageCirclePlus } 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 { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import VoiceInputButton from "./voice-input";
+
+const ResetButton: React.FC<{ onReset?: () => void }> = ({ onReset }) => {
+  if (!onReset) return null;
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={0}>
+        <TooltipContent>{getText().resetConversation}</TooltipContent>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={onReset}
+            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" />
+          </Button>
+        </TooltipTrigger>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+const SubmitButton: React.FC<{ disabled: boolean; onClick: () => void }> = ({
+  disabled,
+  onClick,
+}) => {
+  return (
+    <Button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      size="icon"
+      className="
+                size-8
+                bg-gradient-to-r from-[#6366F1] to-[#8B5CF6]
+                hover:from-[#4F46E5] hover:to-[#7C3AED]
+                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)]"
+    >
+      <ArrowUp className="h-4 w-4" strokeWidth={2} />
+    </Button>
+  );
+};
+
+interface ChatInputProps {
+  conversations: Conversation[];
+  isLoading: boolean;
+  inputValue: string;
+  onInputChange: (value: string) => void;
+  onSendMessage: () => void;
+  onReset?: () => void;
+}
+
+const ChatInput: React.FC<ChatInputProps> = ({
+  conversations,
+  isLoading,
+  inputValue,
+  onInputChange,
+  onSendMessage,
+  onReset,
+}) => {
+  const hasConversations = conversations.length > 1;
+  const [focus, setFocus] = useState(false);
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSendMessage();
+    }
+  };
+
+  return (
+    <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",
+          {
+            "border-[#6366F1] ring-2 ring-[#6366F1]/20": focus
+          },
+        )}
+      >
+        <textarea
+          value={inputValue}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            onInputChange(e.target.value)
+          }
+          onKeyPress={isLoading ? undefined : handleKeyPress}
+          placeholder={getText().typePlaceholder}
+          onFocus={() => setFocus(true)}
+          onBlur={() => setFocus(false)}
+          className="w-full text-sm text-[#111827] placeholder:text-[#9CA3AF] outline-none resize-none leading-5 disabled:bg-transparent"
+          rows={4}
+        />
+        <div className="flex items-center justify-between gap-2 mt-1">
+          <div className="flex items-center gap-1">
+            <ResetButton onReset={hasConversations ? onReset : undefined} />
+          </div>
+          <div className="flex items-center gap-2">
+            <VoiceInputButton
+              onChange={(text) => {
+                onInputChange(text);
+                setFocus(true);
+              }}
+              value={inputValue}
+              disabled={isLoading}
+            />
+            <SubmitButton
+              onClick={() => onSendMessage()}
+              disabled={!inputValue.trim() || isLoading}
+            />
+          </div>
+        </div>
+      </div>
+
+      {conversations.length > 0 && (
+        <p className="text-[10px] text-[#9CA3AF] mt-2 text-center">
+          {getText().footerAiWarning}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default ChatInput;

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

@@ -0,0 +1,81 @@
+import type React from "react";
+import type { Conversation } from "../types";
+import ChatAssistantMessage from "./chat-assistant-message";
+import ChatUserMessage from "./chat-user-message";
+import { cn } from "@/lib/utils";
+
+interface ChatMessagesProps {
+  conversations: Conversation[];
+  isLoading: boolean;
+  scrollAreaRef: React.RefObject<HTMLDivElement>;
+  messagesEndRef: React.RefObject<HTMLDivElement>;
+  className?: string;
+}
+
+const ChatMessages: React.FC<ChatMessagesProps> = ({
+  conversations,
+  isLoading,
+  scrollAreaRef,
+  messagesEndRef,
+  className
+}) => {
+  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)}
+      data-role="chat-messages"
+    >
+      {conversations.map((conversation, index) => {
+        const len = conversation.messages.length;
+        return (
+          <div key={conversation.taskId} className="flex flex-col gap-4">
+            {conversation.messages.map((message, msgIndex) => {
+              const key = message.messageId || `${index}-${msgIndex}`;
+              const isNewest = msgIndex === len - 1;
+              if (message.role === "assistant") {
+                return (
+                  <ChatAssistantMessage
+                    key={key}
+                    message={message}
+                    isNewest={isNewest}
+                    isLoading={isLoading}
+                    showAvatar={
+                      msgIndex === 0 ||
+                      conversation.messages[msgIndex - 1].role !== "assistant"
+                    }
+                  />
+                );
+              }
+              return <ChatUserMessage key={key} message={message} />;
+            })}
+          </div>
+        );
+      })}
+
+      {isLoading && (
+        <div
+          key="loading"
+          className="flex flex-col gap-2 px-2 -mt-2 sticky bottom-2"
+        >
+          <ChatAssistantMessage
+            key="loading"
+            message={{
+              kind: "text-content",
+              messageId: "loading",
+              role: "assistant",
+              content: "",
+            }}
+            isLoading={true}
+            showAvatar={false}
+          />
+        </div>
+      )}
+
+      <div ref={messagesEndRef} className="mt-auto" />
+    </div>
+  );
+};
+
+export default ChatMessages;

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

@@ -0,0 +1,36 @@
+import { getText } from "../i18n";
+
+const ChatRecommends: React.FC<{
+  hidden?: boolean;
+  data?: string[];
+  onSend: (prompt: string) => void;
+}> = ({ hidden, data = getText().defaultRecommendedQuestions, onSend }) => {
+  if (hidden || !data || data.length === 0) return null;
+  return (
+    <div className="flex flex-wrap gap-2 pt-2 px-4">
+      {data.map((prompt, index) => (
+        <button
+          type="button"
+          key={prompt}
+          onClick={() => onSend(prompt)}
+          className="
+                    text-xs px-2 py-1.5
+                    bg-[#F3F4F6] hover:bg-[#E5E7EB]
+                    text-[#374151] hover:text-[#111827]
+                    rounded-full
+                    border border-[#D1D5DB]
+                    transition-all duration-200
+                    cursor-pointer
+                    animate-in fade-in-0 slide-in-from-bottom-1
+                    text-nowrap
+                  "
+          style={{ animationDelay: `${index * 50}ms` }}
+        >
+          {prompt}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default ChatRecommends;

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

@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/button";
+import { Volume2 } from "lucide-react";
+import { useSpeak } from "../hooks/useSpeak";
+import { cn } from "@/lib/utils";
+
+export default function TTSReader({
+  text,
+  className,
+}: {
+  text: string;
+  className?: string;
+}) {
+  const { speak, stop, speaking } = useSpeak();
+
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className={cn(
+        "hover:bg-transparent p-0  h-6 text-primary/50 hover:text-primary",
+        className,
+      )}
+      onClick={() => {
+        try {
+          if (speaking) {
+            stop();
+          } else {
+            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/chat-user-message.tsx

@@ -0,0 +1,26 @@
+import Markdown from "./Markdown";
+import type { MessagesItem, TextMessage } from "../types";
+
+const ChatUserMessage: React.FC<{
+  message: MessagesItem;
+}> = ({ message }) => {
+  return (
+    <div
+      className={`flex gap-3 animate-in fade-in-0 slide-in-from-bottom-2 duration-300 overflow-hidden w-full flex-row-reverse`}
+    >
+      <div
+        className={`
+        px-4 py-2.5 rounded-2xl
+        transition-all duration-200 min-w-0 overflow-hidden max-w-full
+        bg-[#E0E7FF] text-[#1E1B4B] rounded-br-md
+      `}
+      >
+        <div className="text-sm leading-relaxed whitespace-pre-wrap break-words">
+          <Markdown content={(message as TextMessage).content || "..."} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatUserMessage;