@amaster.ai/components-templates 1.5.0 → 1.6.0

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

@@ -0,0 +1,154 @@
+import { View } from "@tarojs/components";
+import { useState } from "react";
+import { useAiAssistantI18n } from "../i18n";
+import type {
+  MessagesItem,
+  TextMessage,
+  ThoughtMessage,
+  ToolMessage,
+} from "../types";
+import Markdown from "./markdown";
+
+interface MessageCommonProps {
+  isNewest?: boolean;
+  isLoading?: boolean;
+}
+
+export const ChatLoading: React.FC<
+  { className?: string } & MessageCommonProps
+> = ({ className }) => {
+  return (
+    <View className={`flex items-center gap-1 ${className}`}>
+      <View className="h-2 w-2 rounded-full bg-primary animate-pulse" />
+      <View
+        className="h-2 w-2 rounded-full bg-primary animate-pulse"
+        style={{ animationDelay: "150ms" }}
+      />
+      <View
+        className="h-2 w-2 rounded-full bg-primary animate-pulse"
+        style={{ animationDelay: "300ms" }}
+      />
+    </View>
+  );
+};
+
+const ChatTextMessage: React.FC<{ message: TextMessage }> = ({ message }) => {
+  if (!message.content) {
+    return <ChatLoading className="ml-2" />;
+  }
+
+  return (
+    <View className="whitespace-pre-wrap leading-relaxed break-words overflow-hidden min-w-0 max-w-full px-1">
+      <Markdown content={message.content} />
+    </View>
+  );
+};
+
+const ChatThoughtMessage: React.FC<
+  { message: ThoughtMessage } & MessageCommonProps
+> = ({ message, isNewest, isLoading }) => {
+  const [expanded, setExpanded] = useState(false);
+  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="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)}
+      >
+        {thinking ? (
+          <View className="i-lucide-loader-circle text-blue-600 animate-spin size-4" />
+        ) : !expanded ? (
+          <View className="i-lucide-chevron-down size-4" />
+        ) : (
+          <View className="i-lucide-chevron-up size-4" />
+        )}
+        <View>{thinking ? t.thinking : t.thinkResult}</View>
+      </View>
+      {(expanded || thinking) && (
+        <Markdown
+          content={message.thought || "..."}
+          className="font-normal opacity-55 pl-4 py-2 border-l-[2px] ml-4"
+        />
+      )}
+    </View>
+  );
+};
+
+const ChatToolMessage: React.FC<
+  { message: ToolMessage } & MessageCommonProps
+> = ({ message, isLoading }) => {
+  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">
+      {status === "success" ? (
+        <View className="i-lucide-badge-check size-4 text-green-600 fill-current shrink-0" />
+      ) : status === "failed" || status === "error" ? (
+        <View className="i-lucide-info size-4 text-red-600 shrink-0" />
+      ) : isLoading ? (
+        <View className="i-lucide-refresh-cw size-4 text-primary animate-spin  shrink-0 text-warning" />
+      ) : (
+        <View className="i-lucide-circle-x size-4 text-orange-600 shrink-0" />
+      )}
+      <View className="flex-1 truncate flex-shrink-0">
+        {message.toolName || t.unknownTool}
+      </View>
+    </View>
+  );
+};
+
+const ChatErrorMessage: React.FC<
+  { message: TextMessage } & MessageCommonProps
+> = ({ message }) => {
+  const { t } = useAiAssistantI18n();
+  return (
+    <View className="leading-relaxed whitespace-pre-wrap text-left break-words gap-1 border px-2 p-1 rounded-xl text-destructive text-lg max-w-full overflow-hidden">
+      {message.content || t.errorMessage}
+    </View>
+  );
+};
+
+const MessageContentRenderer: React.FC<
+  {
+    message: MessagesItem;
+  } & MessageCommonProps
+> = ({ message, ...rest }) => {
+  switch (message.kind) {
+    case "text-content":
+      return <ChatTextMessage message={message as TextMessage} {...rest} />;
+    case "thought":
+      return (
+        <ChatThoughtMessage message={message as ThoughtMessage} {...rest} />
+      );
+    case "tool":
+      return <ChatToolMessage message={message as ToolMessage} {...rest} />;
+    case "error":
+      return <ChatErrorMessage message={message as TextMessage} {...rest} />;
+    default:
+      return null;
+  }
+};
+
+export const ChatAssistantMessage: React.FC<
+  {
+    message: MessagesItem;
+    showAvatar?: boolean;
+  } & MessageCommonProps
+> = ({ message, showAvatar, ...rest }) => {
+  return (
+    <View className="flex gap-3 animate-in fade-in-0 slide-in-from-bottom-2 duration-300 overflow-hidden w-full chat-assistant-message">
+      <View
+        className={[
+          "flex-shrink-0 h-7 w-7 rounded-full bg-gradient-to-br from-primary to-primary/20 flex items-center justify-center text-left",
+          !showAvatar && "invisible",
+        ].join(" ")}
+      >
+        {showAvatar && (
+          <View className="i-lucide-message-square h-3.5 w-3.5 text-primary-foreground" />
+        )}
+      </View>
+      <MessageContentRenderer message={message} {...rest} />
+    </View>
+  );
+};

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

@@ -0,0 +1,27 @@
+import { Text, View } from "@tarojs/components";
+import type React from "react";
+import { useSafeArea } from "../hooks/useSafeArea";
+import { useAiAssistantI18n } from "../i18n";
+
+export const ChatHeader: React.FC = () => {
+  const { t } = useAiAssistantI18n();
+  const safeAreaInsets = useSafeArea();
+
+  return (
+    <View
+      className="flex items-center px-4 py-3 border-b border-primary/40 bg-background/80 backdrop-blur-sm"
+      style={{ paddingTop: `${12 + safeAreaInsets.top}px` }}
+    >
+      <View className="flex items-center gap-2.5">
+        <View className="flex items-center justify-center h-9 w-9 rounded-full bg-gradient-to-br from-primary to-primary/80 shadow-sm">
+          <View className="i-lucide-bot text-primary-foreground text-lg" />
+        </View>
+        <View className="flex flex-col">
+          <Text className="text-lg font-semibold text-foreground">
+            {t.title}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};

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

@@ -0,0 +1,204 @@
+import { Text, Textarea, View } from "@tarojs/components";
+import type React from "react";
+import { useMemo, useState } from "react";
+import { useSafeArea } from "../hooks/useSafeArea";
+import { useAiAssistantI18n } from "../i18n";
+import type { Conversation } from "../types";
+import { VoiceInput } from "./VoiceInput";
+
+interface ChatInputProps {
+  conversations: Conversation[];
+  isLoading: boolean;
+  starting?: boolean;
+  inputValue: string;
+  onInputChange: (value: string) => void;
+  onInputAppend?: (value: string) => void;
+  onSendMessage: () => void;
+  onNewConversation?: () => void;
+  onCancel: () => void;
+  recommendedQuestions?: string[];
+  onQuestionClick?: (question: string) => void;
+}
+
+const SubmitButton: React.FC<{
+  disabled: boolean;
+  starting?: boolean;
+  onClick: () => void;
+}> = ({ disabled, starting, onClick }) => {
+  const { t } = useAiAssistantI18n();
+  return (
+    <View
+      onClick={onClick}
+      className={`flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl transition-all duration-200 shadow-sm text-primary-foreground bg-gradient-to-r from-primary to-primary/80 active:opacity-80 ${
+        disabled ? "opacity-50 active:opacity-50 cursor-not-allowed" : ""
+      }`}
+      hoverClass={disabled ? "" : "opacity-90"}
+    >
+      <View className={`i-lucide-send text-sm`} />
+      <Text className={`text-sm font-medium`}>
+        {starting ? t.loading : t.send}
+      </Text>
+    </View>
+  );
+};
+
+const StopButton: React.FC<{ onClick: () => void }> = ({ onClick }) => {
+  const { t } = useAiAssistantI18n();
+  return (
+    <View
+      onClick={onClick}
+      className="flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl active:opacity-80 transition-all duration-200 shadow-sm text-primary-foreground bg-primary"
+      hoverClass="opacity-90"
+    >
+      <View className="i-lucide-square text-sm" />
+      <Text className="text-sm  font-medium">{t.stopGenerating}</Text>
+    </View>
+  );
+};
+
+const NewConversationButton: React.FC<{
+  disabled: boolean;
+  onClick: () => void;
+}> = ({ disabled, onClick }) => {
+  const { t } = useAiAssistantI18n();
+  return (
+    <View className="flex items-center gap-2">
+      <View
+        onClick={disabled ? undefined : onClick}
+        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-all duration-200 ${
+          disabled ? "opacity-40" : "active:bg-primary/40"
+        }`}
+        hoverClass={disabled ? "" : "bg-primary/20"}
+      >
+        <View className="i-lucide-message-circle-plus text-primary text-base" />
+        <Text className="text-sm text-primary">{t.newConversation}</Text>
+      </View>
+    </View>
+  );
+};
+
+export const ChatInput: React.FC<ChatInputProps> = ({
+  conversations,
+  isLoading,
+  starting,
+  inputValue,
+  onInputChange,
+  onInputAppend,
+  onSendMessage,
+  onNewConversation,
+  onCancel,
+  recommendedQuestions = [],
+  onQuestionClick,
+}) => {
+  const safeAreaInsets = useSafeArea();
+  const { t } = useAiAssistantI18n();
+  const [isFocused, setIsFocused] = useState(false);
+
+  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 disabledNewConversation =
+    !hasConversations || lastIsDivider || starting || isLoading;
+
+  const handleInput = (e: { detail: { value: string } }) => {
+    onInputChange(e.detail.value);
+  };
+
+  const handleConfirm = () => {
+    if (!isLoading && inputValue.trim()) {
+      onSendMessage();
+    }
+  };
+
+  const handleVoiceResult = (text: string) => {
+    if (text) {
+      if (onInputAppend) {
+        onInputAppend(text);
+      } else {
+        onInputChange(inputValue + text);
+      }
+    }
+  };
+
+  return (
+    <View
+      className="px-4 py-3 border-t border-primary/40 bg-background"
+      style={{ paddingBottom: `${8 + safeAreaInsets.bottom}px` }}
+    >
+      {!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>
+        </View>
+      )}
+
+      <View
+        className={`w-full rounded-xl bg-primary/10 transition-all duration-200 p-3 border ${
+          isFocused ? "border-primary shadow-sm" : "border-primary/40"
+        }`}
+        data-role="chat-input"
+      >
+        <Textarea
+          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"
+          data-role="chat-textarea"
+        />
+
+        <View
+          className="flex items-center justify-between mt-3 pt-2"
+          data-role="chat-tools"
+        >
+          <View className="flex items-center gap-2">
+            <NewConversationButton
+              disabled={disabledNewConversation}
+              onClick={onNewConversation!}
+            />
+          </View>
+
+          <View className="flex items-center gap-2">
+            <VoiceInput
+              onResult={handleVoiceResult}
+              disabled={starting}
+            />
+            {isLoading ? (
+              <StopButton onClick={onCancel} />
+            ) : (
+              <SubmitButton
+                disabled={starting || isLoading || !inputValue.trim()}
+                starting={starting}
+                onClick={handleConfirm}
+              />
+            )}
+          </View>
+        </View>
+      </View>
+
+      <View className="text-[10px] text-muted mt-2 text-center">
+        {t.sendHint}
+      </View>
+    </View>
+  );
+};

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

@@ -0,0 +1,126 @@
+import { ScrollView, Text, View } from "@tarojs/components";
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
+import { useAiAssistantI18n } from "../i18n";
+import type { Conversation } from "../types";
+import { ChatAssistantMessage, ChatLoading } from "./ChatAssistantMessage";
+import { ChatUserMessage } from "./ChatUserMessage";
+
+interface ChatMessagesProps {
+  conversations: Conversation[];
+  isLoading: boolean;
+  isLoadingHistory?: boolean;
+  hasMoreHistory?: boolean;
+  onLoadMore?: () => void;
+}
+
+export const ChatMessages: React.FC<ChatMessagesProps> = ({
+  conversations,
+  isLoading,
+  isLoadingHistory,
+  hasMoreHistory,
+  onLoadMore,
+}) => {
+  const [scrollTop, setScrollTop] = useState(0);
+  const { t } = useAiAssistantI18n();
+
+  const scrollToBottom = useCallback(() => {
+    setScrollTop((prev) => prev + 10000);
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [conversations, scrollToBottom]);
+
+  const handleScrollToUpper = useCallback(() => {
+    if (onLoadMore && hasMoreHistory && !isLoadingHistory) {
+      onLoadMore();
+    }
+  }, [onLoadMore, hasMoreHistory, isLoadingHistory]);
+
+  return (
+    <ScrollView
+      scrollY
+      scrollTop={scrollTop}
+      scrollWithAnimation
+      className="flex-1 overflow-hidden"
+      onScrollToLower={scrollToBottom}
+      onScrollToUpper={handleScrollToUpper}
+      upperThreshold={50}
+    >
+      <View className="flex flex-col min-h-full">
+        {isLoadingHistory && (
+          <View className="flex justify-center items-center py-4">
+            <Text className="text-sm text-gray-400">{t.loadingHistory}</Text>
+          </View>
+        )}
+        {!isLoadingHistory && hasMoreHistory && (
+          <View className="flex justify-center items-center py-4">
+            <Text className="text-sm text-gray-400">{t.loadMore}</Text>
+          </View>
+        )}
+        {conversations.map((conversation, index) => {
+          const len = conversation.messages.length;
+          const historyId = conversation.historyId || "";
+          const lastHistoryId = conversations[index - 1]?.historyId || "";
+          const showDivider =
+            index > 0 &&
+            (historyId !== lastHistoryId ||
+              conversation.system?.level === "newConversation");
+
+          return (
+            <View key={conversation.taskId} className="flex flex-col">
+              {showDivider && (
+                <View className="flex items-center justify-center py-4">
+                  <View className="flex-1 h-px bg-gray-200" />
+                  <Text className="px-4 text-xs text-gray-400">
+                    {t.conversationDivider}
+                  </Text>
+                  <View className="flex-1 h-px bg-gray-200" />
+                </View>
+              )}
+              <View className="flex flex-col gap-2 px-4 pt-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} />;
+                })}
+              </View>
+            </View>
+          );
+        })}
+        {isLoading && (
+          <View key="loading" className="flex flex-col gap-2 px-4 pt-2">
+            <ChatAssistantMessage
+              key="loading"
+              message={{
+                kind: "text-content",
+                messageId: "loading",
+                role: "assistant",
+                content: "",
+              }}
+              isLoading={true}
+              showAvatar={false}
+            />
+          </View>
+        )}
+        <View className="w-full mt-auto sticky bottom-0 flex items-center justify-center py-2" />
+      </View>
+    </ScrollView>
+  );
+};

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

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