@amaster.ai/components-templates 1.8.0 → 1.10.0

package/components/ai-assistant/package.json

@@ -1,24 +1,24 @@
 {
   "name": "amaster-react-project",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "type": "module",
   "scripts": {
     "dev": "vite --force",
     "dev:local": "vite --config vite.config.local.ts",
-    "dev:restart": "bun scripts/dev-restart.mjs",
     "build": "vite build",
     "lint": "biome check .",
     "lint:fix": "biome check --write .",
-    "type-check": "bun scripts/type-check-filter.mjs",
-    "check:build": "bun scripts/check-build.mjs",
-    "check:ast": "bun scripts/ast-grep-scan.mjs",
-    "preview": "vite preview",
-    "prepare": "bun scripts/prepare.mjs || true"
+    "pre-commit-check": "amaster-cli check all --stack react-vite",
+    "type-check": "amaster-cli check type --stack react-vite",
+    "check:build": "amaster-cli check build --stack react-vite",
+    "check:ast": "amaster-cli check ast --stack react-vite",
+    "check:route": "amaster-cli check route --stack react-vite",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@a2a-js/sdk": "^0.3.7",
-    "@amaster.ai/client": "1.1.0-beta.61",
-    "@amaster.ai/vite-plugins": "1.1.0-beta.61",
+    "@amaster.ai/client": "1.1.0-beta.67",
+    "@amaster.ai/vite-plugins": "1.1.0-beta.67",
     "@fontsource-variable/inter": "^5.2.8",
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@hookform/resolvers": "^5.2.2",
@@ -91,9 +91,7 @@
     "zod": "^3.24.3"
   },
   "devDependencies": {
-    "@ast-grep/napi": "^0.40.5",
-    "@ast-grep/napi-linux-arm64-musl": "^0.40.5",
-    "@ast-grep/napi-linux-x64-musl": "^0.40.5",
+    "@amaster.ai/cli": "1.1.0-beta.67",
     "@biomejs/biome": "^2.3.4",
     "@types/glob": "^9.0.0",
     "@types/http-proxy": "^1.17.15",

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

@@ -9,15 +9,29 @@ import { getText } from "./i18n";
 import ChatDisplayModeSwitcher from "./components/chat-display-mode-switcher";
 import { useDisplayMode } from "./hooks/useDisplayMode";
 import InlineAIAssistant from "./inline-ai-assistant";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { useAssistantSize } from "./hooks/useAssistantSize";
 
 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;
-  const positionHook = usePosition(isOpen, isFullscreen);
+  const isMobile = useIsMobile();
+  const [displayMode, setDisplayMode] = useDisplayMode(isOpen, isMobile);
+  const isLockedLayoutMode =
+    displayMode === "fullscreen" ||
+    displayMode === "side-left" ||
+    displayMode === "side-right" ||
+    displayMode === "half-top" ||
+    displayMode === "half-bottom";
+  const isFullscreen = isLockedLayoutMode && isOpen;
+  const sizeHook = useAssistantSize(displayMode);
+  const positionHook = usePosition(
+    isOpen,
+    isFullscreen,
+    () => sizeHook.getElementDimensions(isOpen),
+  );
 
   const draggableHook = useDraggable({
     ...positionHook,
@@ -42,7 +56,30 @@ const AIAssistant: React.FC<{
     } else if (displayMode === "side-right") {
       positionHook.setPositionTo("right", "bottom");
     }
-  }, [displayMode]);
+  }, [displayMode, positionHook.setPositionTo]);
+
+  useEffect(() => {
+    const layoutRoot =
+      document.querySelector<HTMLElement>("[data-role='main-layout']") ||
+      document.querySelector<HTMLElement>("#root") ||
+      document.body;
+
+    if (!layoutRoot) return;
+
+    layoutRoot.style.setProperty(
+      "--ai-assistant-side-left-width",
+      `${sizeHook.sideLeftWidth}px`,
+    );
+    layoutRoot.style.setProperty(
+      "--ai-assistant-side-right-width",
+      `${sizeHook.sideRightWidth}px`,
+    );
+
+    return () => {
+      layoutRoot.style.removeProperty("--ai-assistant-side-left-width");
+      layoutRoot.style.removeProperty("--ai-assistant-side-right-width");
+    };
+  }, [sizeHook.sideLeftWidth, sizeHook.sideRightWidth]);
 
   const handleClose = () => {
     setIsOpen(false);
@@ -63,11 +100,14 @@ const AIAssistant: React.FC<{
       {isOpen && (
         <ChatFloatingCard
           displayMode={displayMode}
-          isDragging={isDragging}
-          style={positionHook.getPositionStyles()}
+          isDragging={isDragging || sizeHook.isResizing}
+          positionStyle={positionHook.getPositionStyles()}
+          cardStyle={sizeHook.cardStyle}
+          resizeType={sizeHook.resizeType}
+          onResizeStart={sizeHook.startResize}
         >
           <ChatHeader
-            disabledDrag={displayMode !== "floating"}
+            disabledDrag={isMobile || displayMode !== "floating"}
             isDragging={isDragging}
             displayMode={displayMode}
             onMouseDown={handleDragStart}
@@ -77,6 +117,7 @@ const AIAssistant: React.FC<{
             <ChatDisplayModeSwitcher
               displayMode={displayMode}
               onChange={setDisplayMode}
+              isMobile={isMobile}
             />
           </ChatHeader>
 

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

@@ -7,6 +7,7 @@ import type {
 } from "../types";
 import {
   Check,
+  ChevronRight,
   ChevronDown,
   ChevronUp,
   CircleX,
@@ -26,6 +27,10 @@ interface MessageCommonProps {
   isLoading?: boolean;
 }
 
+export const isCollapsibleAssistantMessage = (message: MessagesItem) =>
+  message.role === "assistant" &&
+  (message.kind === "thought" || message.kind === "tool");
+
 export const ChatLoading: React.FC<{ className?: string }> = ({
   className,
 }) => {
@@ -63,7 +68,7 @@ const ChatTextMessage: React.FC<
   );
 };
 
-const ChatThoughtMessage: React.FC<
+export const ChatThoughtContent: React.FC<
   { message: ThoughtMessage } & MessageCommonProps
 > = ({ message, isNewest, isLoading }) => {
   const [expanded, setExpanded] = useState(false);
@@ -97,12 +102,12 @@ const ChatThoughtMessage: React.FC<
   );
 };
 
-const ChatToolMessage: React.FC<
+export const ChatToolContent: React.FC<
   { message: ToolMessage } & MessageCommonProps
 > = ({ message, isLoading }) => {
   const status = message.toolStatus || "executing";
   return (
-    <div className="leading-relaxed whitespace-pre-wrap break-words flex items-center gap-1 border px-2 p-1 rounded-md bg-muted text-xs max-w-full overflow-hidden">
+    <div className="leading-relaxed whitespace-pre-wrap break-words inline-flex items-center gap-1 border px-2 p-1 rounded-md bg-muted text-xs max-w-full overflow-hidden">
       {status === "success" ? (
         <Check className="size-3.5 text-success shrink-0" />
       ) : status === "failed" || status === "error" ? (
@@ -149,7 +154,7 @@ const ChatUIRenderMessage: React.FC<{ message: UIRenderMessage }> = ({
   );
 };
 
-const MessageContentRenderer: React.FC<
+export const ChatMessageContentRenderer: React.FC<
   {
     message: MessagesItem;
   } & MessageCommonProps
@@ -159,10 +164,10 @@ const MessageContentRenderer: React.FC<
       return <ChatTextMessage message={message as TextMessage} {...rest} />;
     case "thought":
       return (
-        <ChatThoughtMessage message={message as ThoughtMessage} {...rest} />
+        <ChatThoughtContent message={message as ThoughtMessage} {...rest} />
       );
     case "tool":
-      return <ChatToolMessage message={message as ToolMessage} {...rest} />;
+      return <ChatToolContent message={message as ToolMessage} {...rest} />;
     case "error":
       return <ChatErrorMessage message={message as TextMessage} {...rest} />;
     case "ui-render":
@@ -198,7 +203,73 @@ const ChatAssistantMessage: React.FC<
           <MessageSquare className="h-3.5 w-3.5 text-primary-foreground" strokeWidth={2} />
         )}
       </div>
-      <MessageContentRenderer message={message} {...rest} />
+      <ChatMessageContentRenderer message={message} {...rest} />
+    </div>
+  );
+};
+
+export const ChatAssistantCollapsedGroup: React.FC<
+  {
+    messages: MessagesItem[];
+    showAvatar?: boolean;
+  } & MessageCommonProps
+> = ({ messages, showAvatar, isLoading, isNewest }) => {
+  const [expanded, setExpanded] = useState(false);
+  const thoughtCount = messages.filter((message) => message.kind === "thought").length;
+  const toolCount = messages.filter((message) => message.kind === "tool").length;
+  const isActive = !!isLoading && !!isNewest;
+
+  return (
+    <div
+      className={cn(
+        "flex gap-3 animate-in fade-in-0 slide-in-from-bottom-2 duration-300 overflow-hidden w-full chat-assistant-message group",
+      )}
+    >
+      <div
+        className={cn(
+          "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",
+        )}
+      >
+        {showAvatar && (
+          <MessageSquare className="h-3.5 w-3.5 text-primary-foreground" strokeWidth={2} />
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div
+          className="flex w-full items-center gap-3 px-1 py-2 text-left"
+          onClick={() => setExpanded((value) => !value)}
+        >
+          <div className="flex min-w-0 items-center gap-2">
+            {isActive ? (
+              <LoaderCircle className="size-4 shrink-0 animate-spin text-primary" />
+            ) : expanded ? (
+              <ChevronDown className="size-4 shrink-0" />
+            ) : (
+              <ChevronRight className="size-4 shrink-0" />
+            )}
+          </div>
+          <span className="shrink-0 text-xs text-muted-foreground">
+            {thoughtCount > 0 ? `${thoughtCount} ${getText().thoughtCountUnit}` : ""}
+            {thoughtCount > 0 && toolCount > 0 ? " · " : ""}
+            {toolCount > 0 ? `${toolCount} ${getText().toolCountUnit}` : ""}
+          </span>
+        </div>
+
+        {(expanded || isActive) && (
+          <div className="mt-2 flex flex-col gap-2 pl-2">
+            {messages.map((message, index) => (
+              <div key={message.messageId || `grouped-${index}`} className="min-w-0 text-left">
+                <ChatMessageContentRenderer
+                  message={message}
+                  isLoading={isLoading}
+                  isNewest={isNewest && index === messages.length - 1}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
 };

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

@@ -1,15 +1,21 @@
-import { Layers2, Maximize, Move, Sidebar } from "lucide-react";
+import {
+  Layers2,
+  Maximize,
+  PanelBottom,
+  PanelTop,
+  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";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import type { IDisplayMode } from "../types";
 
 const ChatDisplayModeSwitcher: React.FC<{
   displayMode: IDisplayMode;
   onChange: (mode: IDisplayMode) => void;
-}> = ({ displayMode, onChange }) => {
-  const modes: {
+  isMobile?: boolean;
+}> = ({ displayMode, onChange, isMobile }) => {
+  const desktopModes: {
     mode: IDisplayMode;
     icon: React.ReactNode;
     title: string;
@@ -35,15 +41,33 @@ const ChatDisplayModeSwitcher: React.FC<{
       title: getText().displayMode.fullscreen,
     },
   ];
+  const mobileModes: typeof desktopModes = [
+    {
+      mode: "fullscreen",
+      icon: <Maximize className="size-4" strokeWidth={1.75} />,
+      title: getText().displayMode.fullscreen,
+    },
+    {
+      mode: "half-top",
+      icon: <PanelTop className="size-4" strokeWidth={1.75} />,
+      title: getText().displayMode.halfTop,
+    },
+    {
+      mode: "half-bottom",
+      icon: <PanelBottom className="size-4" strokeWidth={1.75} />,
+      title: getText().displayMode.halfBottom,
+    },
+  ];
+  const modes = isMobile ? mobileModes : desktopModes;
 
   return (
-    <HoverCard openDelay={0}>
-      <HoverCardTrigger asChild>
+    <Popover>
+      <PopoverTrigger asChild>
         <Button variant="ghost" size="icon" className="size-8">
           {modes.find((m) => m.mode === displayMode)?.icon}
         </Button>
-      </HoverCardTrigger>
-      <HoverCardContent align="end" className="flex flex-col w-fit p-1">
+      </PopoverTrigger>
+      <PopoverContent align="end" className="flex w-fit flex-col p-1">
         {modes.map(({ mode, icon, title }) => (
           <Button
             key={mode}
@@ -57,8 +81,8 @@ const ChatDisplayModeSwitcher: React.FC<{
             {title}
           </Button>
         ))}
-      </HoverCardContent>
-    </HoverCard>
+      </PopoverContent>
+    </Popover>
   );
 };
 

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

@@ -19,7 +19,7 @@ const ChatFloatingButton: React.FC<ChatFloatingButtonProps> = ({
 }) => {
   return (
     <div
-      className={`fixed z-50 flex items-center justify-center ${isDragging ? "cursor-grabbing" : "cursor-grab"}`}
+      className={`fixed z-50 flex items-center justify-center touch-none ${isDragging ? "cursor-grabbing" : "cursor-grab"}`}
       style={style}
     >
       <Button
@@ -35,6 +35,7 @@ const ChatFloatingButton: React.FC<ChatFloatingButtonProps> = ({
           border-0
           transition-all duration-300 ease-out select-none
           cursor-pointer
+          touch-none
           ${
             isDragging
               ? "shadow-2xl scale-105"

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

@@ -7,14 +7,20 @@ import { cn } from "@/lib/utils";
 interface ChatFloatingCardProps {
   displayMode: IDisplayMode;
   isDragging: boolean;
-  style: React.CSSProperties;
+  positionStyle?: React.CSSProperties;
+  cardStyle?: React.CSSProperties;
+  resizeType?: "floating-corner" | "side-left" | "side-right" | "half-top" | "half-bottom" | null;
+  onResizeStart?: (type: NonNullable<ChatFloatingCardProps["resizeType"]>, event: React.PointerEvent) => void;
   children?: React.ReactNode;
 }
 
 const ChatFloatingCard: React.FC<ChatFloatingCardProps> = ({
   displayMode,
   isDragging,
-  style,
+  positionStyle,
+  cardStyle,
+  resizeType,
+  onResizeStart,
   children,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -26,6 +32,8 @@ const ChatFloatingCard: React.FC<ChatFloatingCardProps> = ({
         `flex flex-col overflow-hidden bg-card border border-border 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 inset-x-0 top-0 h-[50dvh] w-auto rounded-b-2xl rounded-t-none border-x-0 border-t-0": displayMode === "half-top",
+          "fixed inset-x-0 bottom-0 h-[50dvh] w-auto rounded-t-2xl rounded-b-none border-x-0 border-b-0": displayMode === "half-bottom",
           "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",
@@ -33,9 +41,47 @@ const ChatFloatingCard: React.FC<ChatFloatingCardProps> = ({
           "shadow-lg": displayMode === "floating" && !isDragging,
         }
       )}
-      style={displayMode !== "floating" ? {} : style}
+      style={displayMode === "floating" ? { ...positionStyle, ...cardStyle } : cardStyle}
     >
       {children}
+      {resizeType === "floating-corner" && onResizeStart && (
+        <button
+          type="button"
+          aria-label="Resize chat window"
+          className="absolute left-0 top-0 h-6 w-6 cursor-nwse-resize touch-none bg-transparent"
+          onPointerDown={(event) => onResizeStart("floating-corner", event)}
+        >
+          <span className="absolute left-1 top-1 block h-3.5 w-3.5 rounded-sm border-l-2 border-t-2 border-border/70" />
+        </button>
+      )}
+      {resizeType === "side-left" && onResizeStart && (
+        <div
+          className="absolute right-0 top-0 h-full w-2 cursor-e-resize touch-none"
+          onPointerDown={(event) => onResizeStart("side-left", event)}
+        />
+      )}
+      {resizeType === "side-right" && onResizeStart && (
+        <div
+          className="absolute left-0 top-0 h-full w-2 cursor-w-resize touch-none"
+          onPointerDown={(event) => onResizeStart("side-right", event)}
+        />
+      )}
+      {resizeType === "half-top" && onResizeStart && (
+        <div
+          className="absolute bottom-0 left-0 h-3 w-full cursor-ns-resize touch-none"
+          onPointerDown={(event) => onResizeStart("half-top", event)}
+        >
+          <span className="absolute left-1/2 top-1/2 h-1 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border" />
+        </div>
+      )}
+      {resizeType === "half-bottom" && onResizeStart && (
+        <div
+          className="absolute top-0 left-0 h-3 w-full cursor-ns-resize touch-none"
+          onPointerDown={(event) => onResizeStart("half-bottom", event)}
+        >
+          <span className="absolute left-1/2 top-1/2 h-1 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border" />
+        </div>
+      )}
     </Card>
   );
 };

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

@@ -34,7 +34,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
             : "cursor-grab"
           : "",
         {
-          'border-b border-border': displayMode === "floating",
+          "border-b border-border": displayMode !== "inline",
         },
       )}
       onMouseDown={!disabledDrag ? onMouseDown : undefined}

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

@@ -18,11 +18,13 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import VoiceInputButton from "./voice-input";
+import { useIsMobile } from "@/hooks/use-mobile";
 
-const NewConvButton: React.FC<{ onNew?: () => void; disabled?: boolean }> = ({
-  onNew,
-  disabled,
-}) => {
+const NewConvButton: React.FC<{
+  onNew?: () => void;
+  disabled?: boolean;
+  compact?: boolean;
+}> = ({ onNew, disabled, compact }) => {
   if (!onNew) return null;
   return (
     <TooltipProvider>
@@ -35,7 +37,7 @@ const NewConvButton: React.FC<{ onNew?: () => void; disabled?: boolean }> = ({
             size="icon"
             onClick={onNew}
             disabled={disabled}
-            className="h-8 w-8 cursor-pointer"
+            className={cn("cursor-pointer", compact ? "h-7 w-7" : "h-8 w-8")}
           >
             <MessageCirclePlus className="size-5" />
           </Button>
@@ -49,14 +51,16 @@ const SubmitButton: React.FC<{
   disabled: boolean;
   starting?: boolean;
   onClick: () => void;
-}> = ({ disabled, starting, onClick }) => {
+  compact?: boolean;
+}> = ({ disabled, starting, onClick, compact }) => {
   return (
     <Button
       onClick={onClick}
       disabled={disabled || starting}
       size="icon"
       className={cn(
-        "rounded-xl size-8 text-primary-foreground transition-all duration-200 cursor-pointer shadow-sm hover:shadow-2xl",
+        "rounded-xl text-primary-foreground transition-all duration-200 cursor-pointer shadow-sm hover:shadow-2xl",
+        compact ? "size-7 rounded-lg" : "size-8",
         "bg-gradient-to-r from-primary to-primary/80",
         "hover:from-primary/90 hover:to-primary/70",
         "disabled:opacity-40 disabled:cursor-not-allowed",
@@ -72,16 +76,20 @@ const SubmitButton: React.FC<{
   );
 };
 
-const StopButton: React.FC<{ onClick: () => void; disabled?: boolean }> = ({
-  onClick,
-  disabled,
-}) => {
+const StopButton: React.FC<{
+  onClick: () => void;
+  disabled?: boolean;
+  compact?: boolean;
+}> = ({ onClick, disabled, compact }) => {
   return (
     <Button
       onClick={onClick}
       size="icon"
       disabled={disabled}
-      className="size-8 bg-success hover:bg-success/50 text-success-foreground rounded-xl transition-all duration-200 cursor-pointer shadow-sm hover:shadow-2xl"
+      className={cn(
+        "bg-success hover:bg-success/50 text-success-foreground transition-all duration-200 cursor-pointer shadow-sm hover:shadow-2xl",
+        compact ? "size-7 rounded-lg" : "size-8 rounded-xl",
+      )}
     >
       <Square className="h-3 w-3 fill-current" strokeWidth={2} />
     </Button>
@@ -111,6 +119,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
   starting,
   displayMode,
 }) => {
+  const isMobile = useIsMobile();
   const hasConversations = conversations.length > 0;
   const lastConv =
     conversations.length > 0 ? conversations[conversations.length - 1] : null;
@@ -134,12 +143,18 @@ const ChatInput: React.FC<ChatInputProps> = ({
       textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
     }
   };
+  const isHalfScreenMode =
+    displayMode === "half-top" || displayMode === "half-bottom";
+  const isCompactControls = isMobile || isHalfScreenMode;
+  const inputRows = isHalfScreenMode ? 2 : isMobile ? 3 : 4;
 
   return (
-    <div className="py-3 px-4">
+    <div className={cn("px-4 py-3", isMobile && "px-3 py-2", isHalfScreenMode && "px-3 py-1.5")}>
       <div
         className={cn(
           "w-full rounded-xl bg-card transition-all duration-200 p-3 border border-primary/80",
+          isMobile && "p-2.5 rounded-lg",
+          isHalfScreenMode && "p-2",
           {
             "border-primary ring-2 ring-primary/20": focus,
           },
@@ -155,12 +170,16 @@ const ChatInput: React.FC<ChatInputProps> = ({
           placeholder={getText().typePlaceholder}
           onFocus={() => setFocus(true)}
           onBlur={() => setFocus(false)}
-          className="w-full text-sm text-foreground placeholder:text-muted-foreground outline-none resize-none leading-5 bg-card"
-          rows={4}
+          className={cn(
+            "w-full text-sm text-foreground placeholder:text-muted-foreground outline-none resize-none leading-5 bg-card",
+            isMobile && "text-[13px] leading-5",
+            isHalfScreenMode && "text-[13px] leading-4.5",
+          )}
+          rows={inputRows}
           disabled={speaking}
           readOnly={speaking}
         />
-        <div className="flex items-center justify-between gap-2 mt-1">
+        <div className={cn("mt-1 flex items-center justify-between gap-2", isHalfScreenMode && "mt-0.5")}>
           <div className="flex items-center gap-1">
             {onNew && (
               <NewConvButton
@@ -168,6 +187,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
                 disabled={
                   !hasConversations || lastIsDivider || starting || isLoading
                 }
+                compact={isCompactControls}
               />
             )}
           </div>
@@ -181,14 +201,16 @@ const ChatInput: React.FC<ChatInputProps> = ({
               value={inputValue}
               disabled={isLoading || starting}
               onRunningChange={setSpeaking}
+              compact={isCompactControls}
             />
             {isLoading ? (
-              <StopButton onClick={onCancel || (() => {})} />
+              <StopButton onClick={onCancel || (() => {})} compact={isCompactControls} />
             ) : (
               <SubmitButton
                 onClick={() => onSendMessage()}
                 disabled={!inputValue.trim() || isLoading || speaking}
                 starting={starting}
+                compact={isCompactControls}
               />
             )}
           </div>
@@ -196,7 +218,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
       </div>
 
       {(conversations.length > 0 || displayMode !== "inline") && (
-        <p className="text-[10px] text-muted-foreground/50 mt-2 text-center">
+        <p className="text-[10px] text-muted-foreground/50 mt-2 text-center leading-4">
           {getText().footerAiWarning}
         </p>
       )}