@amaster.ai/components-templates 1.6.0 → 1.10.0

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

@@ -1,7 +1,11 @@
 import type React from "react";
-import { useEffect, useRef, useCallback } from "react";
-import type { Conversation } from "../types";
-import ChatAssistantMessage, { ChatDivider } from "./chat-assistant-message";
+import { useEffect, useRef, useCallback, useMemo } from "react";
+import type { Conversation, MessagesItem } from "../types";
+import ChatAssistantMessage, {
+  ChatAssistantCollapsedGroup,
+  ChatDivider,
+  isCollapsibleAssistantMessage,
+} from "./chat-assistant-message";
 import ChatUserMessage from "./chat-user-message";
 import { cn } from "@/lib/utils";
 import { LoaderCircle } from "lucide-react";
@@ -18,6 +22,77 @@ interface ChatMessagesProps {
   onLoadMore?: () => void;
 }
 
+type RenderableMessageItem =
+  | {
+      type: "message";
+      message: MessagesItem;
+      key: string;
+      isNewest: boolean;
+      showAvatar: boolean;
+    }
+  | {
+      type: "group";
+      messages: MessagesItem[];
+      key: string;
+      isNewest: boolean;
+      showAvatar: boolean;
+    };
+
+interface RenderableConversation {
+  taskId: string;
+  addDivider: boolean | undefined;
+  items: RenderableMessageItem[];
+}
+
+const buildRenderableMessages = (messages: MessagesItem[]): RenderableMessageItem[] => {
+  const items: RenderableMessageItem[] = [];
+
+  for (let index = 0; index < messages.length; index += 1) {
+    const message = messages[index];
+    const key = message.messageId || `message-${index}`;
+
+    if (!isCollapsibleAssistantMessage(message)) {
+      items.push({
+        type: "message",
+        message,
+        key,
+        isNewest: index === messages.length - 1,
+        showAvatar: index === 0 || messages[index - 1].role !== "assistant",
+      });
+      continue;
+    }
+
+    const startIndex = index;
+    const groupedMessages: MessagesItem[] = [message];
+
+    while (
+      index + 1 < messages.length &&
+      isCollapsibleAssistantMessage(messages[index + 1])
+    ) {
+      groupedMessages.push(messages[index + 1]);
+      index += 1;
+    }
+
+    items.push({
+      ...(groupedMessages.length > 1
+        ? {
+            type: "group" as const,
+            messages: groupedMessages,
+          }
+        : {
+            type: "message" as const,
+            message: groupedMessages[0],
+          }),
+      key,
+      isNewest: index === messages.length - 1,
+      showAvatar:
+        startIndex === 0 || messages[startIndex - 1].role !== "assistant",
+    });
+  }
+
+  return items;
+};
+
 const ChatMessages: React.FC<ChatMessagesProps> = ({
   conversations,
   isLoading,
@@ -60,6 +135,23 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
   }, [handleScroll, scrollAreaRef]);
 
   const convLength = conversations.length;
+  const renderableConversations = useMemo<RenderableConversation[]>(
+    () =>
+      conversations.map((conversation, index) => {
+        const historyId = conversation.historyId || "";
+        const lastHistoryId = conversations[index - 1]?.historyId || "";
+        const addDivider =
+          (index > 0 && historyId !== lastHistoryId) ||
+          conversation.system?.level === "newConversation";
+
+        return {
+          taskId: conversation.taskId,
+          addDivider,
+          items: buildRenderableMessages(conversation.messages),
+        };
+      }),
+    [conversations],
+  );
 
   return (
     <div
@@ -80,7 +172,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"
@@ -96,37 +188,38 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
         </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";
-
+      {renderableConversations.map((conversation) => {
         return (
           <div key={conversation.taskId} className="flex flex-col gap-4">
-            {addDivider && (
+            {conversation.addDivider && (
               <ChatDivider key={`${conversation.taskId}-divider`} />
             )}
-            {conversation.messages.map((message, msgIndex) => {
-              const key = message.messageId || `${index}-${msgIndex}`;
-              const isNewest = msgIndex === len - 1;
-              if (message.role === "assistant") {
+            {conversation.items.map((item) => {
+              if (item.type === "group") {
+                return (
+                  <ChatAssistantCollapsedGroup
+                    key={item.key}
+                    messages={item.messages}
+                    isNewest={item.isNewest}
+                    isLoading={isLoading}
+                    showAvatar={item.showAvatar}
+                  />
+                );
+              }
+
+              if (item.message.role === "assistant") {
                 return (
                   <ChatAssistantMessage
-                    key={key}
-                    message={message}
-                    isNewest={isNewest}
+                    key={item.key}
+                    message={item.message}
+                    isNewest={item.isNewest}
                     isLoading={isLoading}
-                    showAvatar={
-                      msgIndex === 0 ||
-                      conversation.messages[msgIndex - 1].role !== "assistant"
-                    }
+                    showAvatar={item.showAvatar}
                   />
                 );
               }
-              return <ChatUserMessage key={key} message={message} />;
+
+              return <ChatUserMessage key={item.key} message={item.message} />;
             })}
           </div>
         );

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

@@ -1,3 +1,4 @@
+import { useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { getText } from "../i18n";
 
@@ -12,23 +13,86 @@ const ChatRecommends: React.FC<{
   onSend,
   disabled,
 }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const dragStateRef = useRef<{
+    pointerId: number;
+    startX: number;
+    startScrollLeft: number;
+  } | null>(null);
+  const [isDraggingScroll, setIsDraggingScroll] = useState(false);
+
   if (hidden || !data || data.length === 0) return null;
+
+  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+
+    const container = scrollRef.current;
+    if (!container) return;
+
+    dragStateRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startScrollLeft: container.scrollLeft,
+    };
+    setIsDraggingScroll(false);
+    container.setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const container = scrollRef.current;
+    const dragState = dragStateRef.current;
+    if (!container || !dragState || dragState.pointerId !== e.pointerId) return;
+
+    const deltaX = e.clientX - dragState.startX;
+    if (Math.abs(deltaX) > 4) {
+      setIsDraggingScroll(true);
+    }
+    container.scrollLeft = dragState.startScrollLeft - deltaX;
+  };
+
+  const handlePointerEnd = (e: React.PointerEvent<HTMLDivElement>) => {
+    const container = scrollRef.current;
+    const dragState = dragStateRef.current;
+    if (!container || !dragState || dragState.pointerId !== e.pointerId) return;
+
+    if (container.hasPointerCapture(e.pointerId)) {
+      container.releasePointerCapture(e.pointerId);
+    }
+
+    window.requestAnimationFrame(() => {
+      setIsDraggingScroll(false);
+    });
+    dragStateRef.current = null;
+  };
+
   return (
-    <div className="flex flex-wrap gap-2 pt-2 px-4">
-      {data.map((prompt, index) => (
-        <Button
-          key={prompt}
-          variant="outline"
-          onClick={() => onSend(prompt)}
-          disabled={disabled}
-          className="
-              text-xs px-2 py-1 h-auto rounded-full cursor-pointer text-nowrap
-              transition-all duration-200 animate-in fade-in-0 slide-in-from-bottom-1"
-          style={{ animationDelay: `${index * 50}ms` }}
-        >
-          {prompt}
-        </Button>
-      ))}
+    <div
+      ref={scrollRef}
+      className="overflow-x-auto overflow-y-hidden px-4 pt-2 pb-1 cursor-grab active:cursor-grabbing [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      style={{ touchAction: "pan-x" }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerEnd}
+      onPointerCancel={handlePointerEnd}
+    >
+      <div className="flex w-max min-w-full gap-2">
+        {data.map((prompt, index) => (
+          <Button
+            key={prompt}
+            variant="outline"
+            onClick={() => {
+              if (!isDraggingScroll) {
+                onSend(prompt);
+              }
+            }}
+            disabled={disabled}
+            className="h-auto shrink-0 rounded-full px-2 py-1 text-xs text-nowrap transition-all duration-200 animate-in fade-in-0 slide-in-from-bottom-1"
+            style={{ animationDelay: `${index * 50}ms` }}
+          >
+            {prompt}
+          </Button>
+        ))}
+      </div>
     </div>
   );
 };

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

@@ -3,12 +3,15 @@ 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;
+  compact?: boolean;
+}> = ({ onChange, disabled, value, onRunningChange, compact }) => {
   const {
     start,
     stop,
@@ -23,12 +26,18 @@ const VoiceInputButton: React.FC<{
     value,
   });
 
+  useEffect(() => {
+    if (onRunningChange) {
+      onRunningChange(running);
+    }
+  }, [running, onRunningChange]);
+
   return (
     <Button
       variant="ghost"
       onClick={stoppable ? stop : status === "idle" ? start : undefined}
       disabled={finalDisabled}
-      className={cn("h-8 w-8 rounded-lg cursor-pointer text-xs ", {
+      className={cn("cursor-pointer text-xs", compact ? "h-7 w-7 rounded-md" : "h-8 w-8 rounded-lg", {
         "bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground animate-pulse":
           running,
         "w-auto": statusText,

package/components/ai-assistant/template/hooks/useAssistantSize.ts

@@ -0,0 +1,360 @@
+import type React from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { IDisplayMode } from "../types";
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+interface AssistantSizeState {
+  floating: Size;
+  sideLeftWidth: number;
+  sideRightWidth: number;
+  halfTopHeight: number;
+  halfBottomHeight: number;
+}
+
+type ResizeType =
+  | "floating-corner"
+  | "side-left"
+  | "side-right"
+  | "half-top"
+  | "half-bottom";
+
+const STORAGE_KEY = `${location.hostname}-ai-assistant-sizes`;
+const BUTTON_SIZE = 56;
+const EDGE_GAP = 16;
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const getViewportBounds = () => {
+  const maxFloatingWidth = Math.max(360, window.innerWidth - EDGE_GAP * 2);
+  const maxFloatingHeight = Math.max(320, window.innerHeight - EDGE_GAP * 2);
+  const maxSideWidth = Math.max(320, Math.min(720, window.innerWidth - 96));
+  const maxHalfHeight = Math.max(280, window.innerHeight - 96);
+
+  return {
+    floating: {
+      minWidth: 360,
+      maxWidth: maxFloatingWidth,
+      minHeight: 360,
+      maxHeight: maxFloatingHeight,
+    },
+    side: {
+      minWidth: 320,
+      maxWidth: maxSideWidth,
+    },
+    half: {
+      minHeight: 280,
+      maxHeight: maxHalfHeight,
+    },
+  };
+};
+
+const getDefaultState = (): AssistantSizeState => {
+  const bounds = getViewportBounds();
+  const defaultFloatingWidth = clamp(420, bounds.floating.minWidth, bounds.floating.maxWidth);
+  const defaultFloatingHeight = clamp(
+    window.innerHeight < 600 ? window.innerHeight - 32 : window.innerHeight - 200,
+    bounds.floating.minHeight,
+    bounds.floating.maxHeight,
+  );
+  const defaultSideWidth = clamp(420, bounds.side.minWidth, bounds.side.maxWidth);
+  const defaultHalfHeight = clamp(
+    Math.round(window.innerHeight * 0.5),
+    bounds.half.minHeight,
+    bounds.half.maxHeight,
+  );
+
+  return {
+    floating: {
+      width: defaultFloatingWidth,
+      height: defaultFloatingHeight,
+    },
+    sideLeftWidth: defaultSideWidth,
+    sideRightWidth: defaultSideWidth,
+    halfTopHeight: defaultHalfHeight,
+    halfBottomHeight: defaultHalfHeight,
+  };
+};
+
+const normalizeState = (state: AssistantSizeState): AssistantSizeState => {
+  const bounds = getViewportBounds();
+
+  return {
+    floating: {
+      width: clamp(
+        state.floating.width,
+        bounds.floating.minWidth,
+        bounds.floating.maxWidth,
+      ),
+      height: clamp(
+        state.floating.height,
+        bounds.floating.minHeight,
+        bounds.floating.maxHeight,
+      ),
+    },
+    sideLeftWidth: clamp(
+      state.sideLeftWidth,
+      bounds.side.minWidth,
+      bounds.side.maxWidth,
+    ),
+    sideRightWidth: clamp(
+      state.sideRightWidth,
+      bounds.side.minWidth,
+      bounds.side.maxWidth,
+    ),
+    halfTopHeight: clamp(
+      state.halfTopHeight,
+      bounds.half.minHeight,
+      bounds.half.maxHeight,
+    ),
+    halfBottomHeight: clamp(
+      state.halfBottomHeight,
+      bounds.half.minHeight,
+      bounds.half.maxHeight,
+    ),
+  };
+};
+
+const getSavedState = (): AssistantSizeState => {
+  const fallback = getDefaultState();
+
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (!saved) return fallback;
+    const parsed = JSON.parse(saved) as Partial<AssistantSizeState>;
+    return normalizeState({
+      floating: {
+        width: parsed.floating?.width ?? fallback.floating.width,
+        height: parsed.floating?.height ?? fallback.floating.height,
+      },
+      sideLeftWidth: parsed.sideLeftWidth ?? fallback.sideLeftWidth,
+      sideRightWidth: parsed.sideRightWidth ?? fallback.sideRightWidth,
+      halfTopHeight: parsed.halfTopHeight ?? fallback.halfTopHeight,
+      halfBottomHeight: parsed.halfBottomHeight ?? fallback.halfBottomHeight,
+    });
+  } catch {
+    return fallback;
+  }
+};
+
+export const useAssistantSize = (displayMode: IDisplayMode) => {
+  const [sizes, setSizes] = useState<AssistantSizeState>(getSavedState);
+  const [isResizing, setIsResizing] = useState(false);
+  const resizeRef = useRef<{
+    type: ResizeType;
+    startX: number;
+    startY: number;
+    sizes: AssistantSizeState;
+  } | null>(null);
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(sizes));
+  }, [sizes]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSizes((prev) => {
+        const normalized = normalizeState(prev);
+        return JSON.stringify(normalized) === JSON.stringify(prev)
+          ? prev
+          : normalized;
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const previousUserSelect = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const activeResize = resizeRef.current;
+      if (!activeResize) return;
+
+      const deltaX = event.clientX - activeResize.startX;
+      const deltaY = event.clientY - activeResize.startY;
+      const bounds = getViewportBounds();
+
+      setSizes((prev) => {
+        const next = { ...prev, floating: { ...prev.floating } };
+
+        switch (activeResize.type) {
+          case "floating-corner":
+            next.floating.width = clamp(
+              activeResize.sizes.floating.width - deltaX,
+              bounds.floating.minWidth,
+              bounds.floating.maxWidth,
+            );
+            next.floating.height = clamp(
+              activeResize.sizes.floating.height - deltaY,
+              bounds.floating.minHeight,
+              bounds.floating.maxHeight,
+            );
+            break;
+          case "side-left":
+            next.sideLeftWidth = clamp(
+              activeResize.sizes.sideLeftWidth + deltaX,
+              bounds.side.minWidth,
+              bounds.side.maxWidth,
+            );
+            break;
+          case "side-right":
+            next.sideRightWidth = clamp(
+              activeResize.sizes.sideRightWidth - deltaX,
+              bounds.side.minWidth,
+              bounds.side.maxWidth,
+            );
+            break;
+          case "half-top":
+            next.halfTopHeight = clamp(
+              activeResize.sizes.halfTopHeight + deltaY,
+              bounds.half.minHeight,
+              bounds.half.maxHeight,
+            );
+            break;
+          case "half-bottom":
+            next.halfBottomHeight = clamp(
+              activeResize.sizes.halfBottomHeight - deltaY,
+              bounds.half.minHeight,
+              bounds.half.maxHeight,
+            );
+            break;
+        }
+
+        return next;
+      });
+    };
+
+    const handlePointerUp = () => {
+      resizeRef.current = null;
+      setIsResizing(false);
+    };
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+
+    return () => {
+      document.body.style.userSelect = previousUserSelect;
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [isResizing]);
+
+  const getElementDimensions = useCallback(
+    (isOpen: boolean) => {
+      if (!isOpen) {
+        return {
+          width: BUTTON_SIZE,
+          height: BUTTON_SIZE,
+        };
+      }
+
+      switch (displayMode) {
+        case "floating":
+          return sizes.floating;
+        case "side-left":
+          return {
+            width: sizes.sideLeftWidth,
+            height: window.innerHeight,
+          };
+        case "side-right":
+          return {
+            width: sizes.sideRightWidth,
+            height: window.innerHeight,
+          };
+        case "half-top":
+          return {
+            width: window.innerWidth,
+            height: sizes.halfTopHeight,
+          };
+        case "half-bottom":
+          return {
+            width: window.innerWidth,
+            height: sizes.halfBottomHeight,
+          };
+        case "fullscreen":
+          return {
+            width: window.innerWidth,
+            height: window.innerHeight,
+          };
+        default:
+          return sizes.floating;
+      }
+    },
+    [displayMode, sizes],
+  );
+
+  const cardStyle = useMemo<React.CSSProperties | undefined>(() => {
+    switch (displayMode) {
+      case "floating":
+        return {
+          width: sizes.floating.width,
+          height: sizes.floating.height,
+        };
+      case "side-left":
+        return {
+          width: sizes.sideLeftWidth,
+        };
+      case "side-right":
+        return {
+          width: sizes.sideRightWidth,
+        };
+      case "half-top":
+        return {
+          height: sizes.halfTopHeight,
+        };
+      case "half-bottom":
+        return {
+          height: sizes.halfBottomHeight,
+        };
+      default:
+        return undefined;
+    }
+  }, [displayMode, sizes]);
+
+  const startResize = useCallback(
+    (type: ResizeType, event: React.PointerEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      resizeRef.current = {
+        type,
+        startX: event.clientX,
+        startY: event.clientY,
+        sizes,
+      };
+      setIsResizing(true);
+    },
+    [sizes],
+  );
+
+  const resizeType: ResizeType | null =
+    displayMode === "floating"
+      ? "floating-corner"
+      : displayMode === "side-left"
+        ? "side-left"
+        : displayMode === "side-right"
+          ? "side-right"
+          : displayMode === "half-top"
+            ? "half-top"
+            : displayMode === "half-bottom"
+              ? "half-bottom"
+              : null;
+
+  return {
+    cardStyle,
+    getElementDimensions,
+    isResizing,
+    resizeType,
+    sideLeftWidth: sizes.sideLeftWidth,
+    sideRightWidth: sizes.sideRightWidth,
+    startResize,
+  };
+};