@elizaos/ui 2.0.0-alpha.25 → 2.0.0-alpha.334

package/packages/ui/src/components/composites/chat/chat-bubble.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+import { normalizeChatSourceKey } from "./chat-source";
+export function ChatBubble({ tone = "assistant", source, className, ...props }) {
+    const normalizedSource = normalizeChatSourceKey(source) ?? undefined;
+    return (_jsx("div", { className: cn("relative whitespace-pre-wrap break-words", tone === "user" ? "text-txt-strong" : "text-txt", className), "data-chat-source": normalizedSource ?? undefined, ...props }));
+}

package/packages/ui/src/components/composites/chat/chat-composer-shell.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+import type { ChatVariant } from "./chat-types";
+type RefLike<T> = ((instance: T | null) => void) | {
+    current: T | null;
+} | null;
+export interface ChatComposerShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    before?: React.ReactNode;
+    children: React.ReactNode;
+    shellRef?: RefLike<HTMLDivElement>;
+    variant?: ChatVariant;
+}
+export declare function ChatComposerShell({ before, children, className, shellRef, style, variant, ...props }: ChatComposerShellProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=chat-composer-shell.d.ts.map

package/packages/ui/src/components/composites/chat/chat-composer-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-composer-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-composer-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG;IAAE,OAAO,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,CAAC;AAYhF,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,sBAAsB,2CA+CxB"}

package/packages/ui/src/components/composites/chat/chat-composer-shell.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+function assignRef(ref, value) {
+    if (typeof ref === "function") {
+        ref(value);
+        return;
+    }
+    if (ref) {
+        ref.current = value;
+    }
+}
+export function ChatComposerShell({ before, children, className, shellRef, style, variant = "default", ...props }) {
+    if (variant === "game-modal") {
+        return (_jsxs("div", { ref: (node) => assignRef(shellRef, node), className: cn("mt-auto pointer-events-auto px-1 max-[380px]:px-0.5", className), "data-no-camera-drag": "true", style: {
+                zIndex: 1,
+                paddingBottom: "calc(max(env(safe-area-inset-bottom, 0px), 0px) + var(--eliza-mobile-nav-offset, 0px) + 0.25rem)",
+                ...style,
+            }, ...props, children: [before, _jsx("div", { className: "relative flex items-center px-3 py-2 max-[380px]:min-h-[78px] max-[380px]:px-2.5 max-[380px]:py-1.5", children: _jsx("div", { className: "relative z-[1] flex w-full items-center", children: children }) })] }));
+    }
+    return (_jsxs("div", { ref: (node) => assignRef(shellRef, node), className: cn("relative bg-transparent px-14 pb-3 pt-3 sm:px-14 sm:pb-4 xl:px-14", className), style: {
+            zIndex: 1,
+            paddingBottom: "calc(var(--safe-area-bottom, 0px) + var(--eliza-mobile-nav-offset, 0px) + 0.75rem)",
+            ...style,
+        }, ...props, children: [before, children] }));
+}

package/packages/ui/src/components/composites/chat/chat-composer.d.ts

@@ -0,0 +1,45 @@
+import { type KeyboardEvent, type RefObject } from "react";
+import type { ChatVariant } from "./chat-types";
+export interface ChatComposerVoiceState {
+    assistantTtsQuality?: "enhanced" | "standard";
+    captureMode: "idle" | "compose" | "push-to-talk";
+    interimTranscript: string;
+    isListening: boolean;
+    isSpeaking: boolean;
+    startListening: (mode?: "compose" | "push-to-talk") => void | Promise<void>;
+    stopListening: (options?: {
+        submit?: boolean;
+    }) => void | Promise<void>;
+    supported: boolean;
+    toggleListening: () => void;
+}
+export interface ChatComposerProps {
+    agentVoiceEnabled: boolean;
+    chatInput: string;
+    chatPendingImagesCount: number;
+    chatSending: boolean;
+    isAgentStarting: boolean;
+    isComposerLocked: boolean;
+    layout?: "default" | "inline";
+    onAttachImage: () => void;
+    onChatInputChange: (value: string) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+    onSend: () => void;
+    onStop: () => void;
+    onStopSpeaking: () => void;
+    onToggleAgentVoice: () => void;
+    showAgentVoiceToggle?: boolean;
+    t: (key: string, options?: Record<string, unknown>) => string;
+    textareaAriaLabel?: string;
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
+    variant: ChatVariant;
+    voice: ChatComposerVoiceState;
+    codingAgentsAvailable?: boolean;
+    onCreateTask?: (description: string, agentType: string) => void;
+    /** Hide the attach-image button (used where outbound attachments aren't supported). */
+    hideAttachButton?: boolean;
+    /** Placeholder override for the textarea. */
+    placeholder?: string;
+}
+export declare function ChatComposer({ variant, layout, textareaRef, chatInput, chatPendingImagesCount, isComposerLocked, isAgentStarting, chatSending, voice, agentVoiceEnabled, showAgentVoiceToggle, t, onAttachImage, onChatInputChange, onKeyDown, onSend, onStop, onStopSpeaking, onToggleAgentVoice, codingAgentsAvailable, onCreateTask, hideAttachButton, placeholder, textareaAriaLabel, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chat-composer.d.ts.map

package/packages/ui/src/components/composites/chat/chat-composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-composer.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-composer.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,MAAM,WAAW,sBAAsB;IACrC,mBAAmB,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC9C,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,CAAC;IACjD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,aAAa,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC/D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,sBAAsB,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,uFAAuF;IACvF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAkB,EAClB,WAAW,EACX,SAAS,EACT,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,KAAK,EACL,iBAAiB,EACjB,oBAA2B,EAC3B,CAAC,EACD,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,qBAA6B,EAC7B,YAAY,EACZ,gBAAwB,EACxB,WAAW,EACX,iBAAiB,GAClB,EAAE,iBAAiB,2CA4jBnB"}

package/packages/ui/src/components/composites/chat/chat-composer.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowUp, Mic, Paperclip, Plus, Send, Square, Volume2, VolumeX, } from "lucide-react";
+import { useEffect, useRef, useState, } from "react";
+import { Button } from "../../ui/button";
+import { Textarea } from "../../ui/textarea";
+import { CreateTaskPopover } from "./create-task-popover";
+export function ChatComposer({ variant, layout = "default", textareaRef, chatInput, chatPendingImagesCount, isComposerLocked, isAgentStarting, chatSending, voice, agentVoiceEnabled, showAgentVoiceToggle = true, t, onAttachImage, onChatInputChange, onKeyDown, onSend, onStop, onStopSpeaking, onToggleAgentVoice, codingAgentsAvailable = false, onCreateTask, hideAttachButton = false, placeholder, textareaAriaLabel, }) {
+    const [isNarrow, setIsNarrow] = useState(() => typeof window !== "undefined" && window.innerWidth < 310);
+    const [isInlineMultiline, setIsInlineMultiline] = useState(false);
+    useEffect(() => {
+        if (typeof window === "undefined" || !window.matchMedia)
+            return;
+        const mq = window.matchMedia("(max-width: 309px)");
+        const sync = () => setIsNarrow(mq.matches);
+        sync();
+        mq.addEventListener("change", sync);
+        return () => mq.removeEventListener("change", sync);
+    }, []);
+    const isGameModal = variant === "game-modal";
+    const isInline = layout === "inline";
+    const showVoiceButton = isGameModal || voice.supported;
+    const holdTimerRef = useRef(null);
+    const pushToTalkActiveRef = useRef(false);
+    const suppressClickRef = useRef(false);
+    const hasDraft = chatInput.trim().length > 0 || chatPendingImagesCount > 0;
+    const shouldShowStopButton = chatSending && !hasDraft;
+    const actionButtonTitle = shouldShowStopButton
+        ? t("chat.stopGeneration")
+        : isGameModal || !voice.isSpeaking || hasDraft
+            ? isAgentStarting
+                ? t("chat.agentStarting")
+                : t("chat.send")
+            : t("chat.stopSpeaking");
+    const actionButtonLabel = isGameModal ? undefined : actionButtonTitle;
+    const inputPlaceholder = isNarrow
+        ? t("chat.inputPlaceholderNarrow")
+        : t("chat.inputPlaceholder");
+    const voiceButtonTitle = isAgentStarting
+        ? t("chat.agentStarting")
+        : voice.isListening
+            ? voice.captureMode === "push-to-talk"
+                ? t("chat.releaseToSend")
+                : t("chat.stopListening")
+            : voice.assistantTtsQuality === "enhanced"
+                ? t("chat.micTitleIdleEnhanced")
+                : t("chat.micTitleIdleStandard");
+    const defaultTextareaPlaceholder = isAgentStarting
+        ? t("chat.agentStarting")
+        : voice.isListening
+            ? voice.captureMode === "push-to-talk"
+                ? t("chat.releaseToSend")
+                : !chatInput.trim()
+                    ? t("chat.listening")
+                    : inputPlaceholder
+            : inputPlaceholder;
+    const inlineTextareaClass = isInlineMultiline
+        ? "block h-8 max-h-[128px] min-h-0 w-full min-w-0 resize-none overflow-y-hidden appearance-none rounded-none border-0 bg-transparent px-2 py-[6px] text-sm leading-5 text-txt shadow-none outline-none ring-0 placeholder:text-muted/60 focus:border-0 focus:outline-none focus:ring-0 focus-visible:border-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-none"
+        : "block h-8 max-h-[128px] min-h-0 w-full min-w-0 resize-none overflow-y-hidden appearance-none rounded-none border-0 bg-transparent px-1 py-[5px] text-sm leading-5 text-txt shadow-none outline-none ring-0 placeholder:text-muted/60 focus:border-0 focus:outline-none focus:ring-0 focus-visible:border-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-none";
+    useEffect(() => {
+        return () => {
+            if (holdTimerRef.current) {
+                clearTimeout(holdTimerRef.current);
+                holdTimerRef.current = null;
+            }
+        };
+    }, []);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: chatInput changes must rerun inline textarea autosizing.
+    useEffect(() => {
+        if (!isInline) {
+            setIsInlineMultiline(false);
+            return;
+        }
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        const minHeight = 32;
+        const maxHeight = 128;
+        textarea.style.height = "auto";
+        const nextHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+        textarea.style.height = `${nextHeight}px`;
+        textarea.style.overflowY =
+            textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+        setIsInlineMultiline(nextHeight > minHeight);
+    }, [chatInput, isInline, textareaRef]);
+    const startPushToTalk = () => {
+        if (isComposerLocked || voice.isListening)
+            return;
+        pushToTalkActiveRef.current = true;
+        suppressClickRef.current = true;
+        void voice.startListening("push-to-talk");
+    };
+    const clearHoldTimer = () => {
+        if (holdTimerRef.current) {
+            clearTimeout(holdTimerRef.current);
+            holdTimerRef.current = null;
+        }
+    };
+    const handleMicPointerDown = (_event) => {
+        if (isComposerLocked || voice.isListening)
+            return;
+        clearHoldTimer();
+        holdTimerRef.current = setTimeout(() => {
+            holdTimerRef.current = null;
+            startPushToTalk();
+        }, 180);
+    };
+    const handleMicPointerUp = () => {
+        clearHoldTimer();
+        if (!pushToTalkActiveRef.current)
+            return;
+        pushToTalkActiveRef.current = false;
+        void voice.stopListening({ submit: true });
+        window.setTimeout(() => {
+            suppressClickRef.current = false;
+        }, 0);
+    };
+    const handleMicPointerCancel = () => {
+        clearHoldTimer();
+        if (!pushToTalkActiveRef.current)
+            return;
+        pushToTalkActiveRef.current = false;
+        void voice.stopListening();
+        window.setTimeout(() => {
+            suppressClickRef.current = false;
+        }, 0);
+    };
+    const handleMicClick = () => {
+        if (suppressClickRef.current) {
+            suppressClickRef.current = false;
+            return;
+        }
+        if (isComposerLocked)
+            return;
+        if (voice.isListening && voice.captureMode === "compose") {
+            void voice.stopListening();
+            return;
+        }
+        if (voice.isListening)
+            return;
+        void voice.startListening("compose");
+    };
+    const renderCreateTaskButton = () => {
+        if (isGameModal || !codingAgentsAvailable || !onCreateTask) {
+            return null;
+        }
+        return (_jsx(CreateTaskPopover, { chatInput: chatInput, disabled: isComposerLocked, onCreateTask: onCreateTask, t: t, triggerVariant: isInline ? "ghost" : "surface", triggerClassName: isInline
+                ? "h-8 w-8 shrink-0 rounded-full bg-bg/60 p-0 text-muted shadow-none transition-colors hover:bg-bg/60 hover:text-txt focus-visible:ring-0 focus-visible:ring-offset-0"
+                : "h-[46px] w-[46px] shrink-0", triggerIconClassName: isInline ? "h-4.5 w-4.5" : "h-4 w-4" }));
+    };
+    if (isInline) {
+        const inlineAttachButton = !isGameModal && !hideAttachButton ? (_jsx(Button, { variant: "ghost", size: "icon", className: `h-8 w-8 shrink-0 rounded-full bg-bg/60 p-0 text-muted shadow-none transition-colors hover:bg-bg/60 hover:text-txt focus-visible:ring-0 focus-visible:ring-offset-0 ${chatPendingImagesCount > 0 ? "text-accent hover:text-accent" : ""}`, onClick: onAttachImage, "aria-label": t("aria.attachImage"), title: t("chatview.AttachImage"), disabled: isComposerLocked, children: _jsx(Plus, { className: "h-5 w-5" }) })) : null;
+        const inlineTextarea = (_jsxs("div", { className: isInlineMultiline
+                ? "relative min-w-0 w-full"
+                : "relative min-w-0 flex-1", children: [_jsx(Textarea, { ref: textareaRef, value: chatInput, onChange: (event) => onChatInputChange(event.target.value), onKeyDown: onKeyDown, "data-testid": "chat-composer-textarea", "aria-label": textareaAriaLabel, variant: null, density: null, className: inlineTextareaClass, placeholder: placeholder ?? defaultTextareaPlaceholder, rows: 1, disabled: isComposerLocked }), voice.isListening && voice.interimTranscript ? (_jsx("div", { className: isInlineMultiline
+                        ? "pointer-events-none absolute inset-x-3 bottom-2 truncate text-xs text-muted"
+                        : "pointer-events-none absolute inset-x-2 bottom-2 truncate text-xs text-muted", children: voice.interimTranscript })) : null] }));
+        const inlineMicButton = (_jsx(Button, { variant: "ghost", size: "icon", className: `h-8 w-8 shrink-0 rounded-full p-0 shadow-none transition-colors focus-visible:ring-0 focus-visible:ring-offset-0 active:scale-95 ${voice.isListening
+                ? "bg-accent text-bg hover:bg-accent/90 hover:text-bg"
+                : "bg-bg/60 text-muted hover:bg-bg/60 hover:text-txt"}`, onClick: handleMicClick, onPointerDown: handleMicPointerDown, onPointerUp: handleMicPointerUp, onPointerCancel: handleMicPointerCancel, onPointerLeave: handleMicPointerCancel, disabled: isComposerLocked || !voice.supported, title: voiceButtonTitle, "aria-label": voiceButtonTitle, "aria-pressed": voice.isListening, children: _jsx(Mic, { className: "h-4.5 w-4.5" }) }));
+        const inlineSendButton = (_jsx(Button, { variant: "ghost", "data-testid": "chat-composer-action", size: "icon", className: "h-8 w-8 shrink-0 rounded-full bg-txt p-0 text-bg shadow-none transition-transform focus-visible:ring-0 focus-visible:ring-offset-0 active:scale-95 disabled:opacity-40", onClick: onSend, disabled: isComposerLocked || !hasDraft, title: actionButtonLabel, "aria-label": actionButtonLabel, children: _jsx(ArrowUp, { className: "h-4.5 w-4.5" }) }));
+        const inlineStopButton = (_jsx(Button, { variant: "surfaceDestructive", "data-testid": "chat-composer-action", className: "h-8 w-8 shrink-0 rounded-full bg-danger/15 p-0 text-danger shadow-none transition-colors hover:bg-danger/25 focus-visible:ring-0 focus-visible:ring-offset-0", onClick: onStop, size: "icon", title: actionButtonLabel, "aria-label": actionButtonLabel, children: _jsx(Square, { className: "h-3.5 w-3.5 fill-current" }) }));
+        const inlineStopSpeakingButton = (_jsx(Button, { variant: "surfaceDestructive", "data-testid": "chat-composer-action", className: "h-8 w-8 shrink-0 rounded-full bg-danger/15 p-0 text-danger shadow-none transition-colors hover:bg-danger/25 focus-visible:ring-0 focus-visible:ring-offset-0", onClick: onStopSpeaking, size: "icon", title: actionButtonLabel, "aria-label": actionButtonLabel, children: _jsx(Square, { className: "h-3.5 w-3.5 fill-current" }) }));
+        const inlineTrailingActions = shouldShowStopButton ? (inlineStopButton) : !isGameModal && voice.isSpeaking && !hasDraft ? (inlineStopSpeakingButton) : isInlineMultiline ? (_jsxs(_Fragment, { children: [inlineMicButton, inlineSendButton] })) : hasDraft ? (inlineSendButton) : (inlineMicButton);
+        return (_jsx("div", { "data-inline-layout": isInlineMultiline ? "stacked" : "single-line", className: isInlineMultiline
+                ? "flex min-h-[64px] flex-col gap-1 rounded-[22px] border border-border/35 bg-card/45 px-1.5 py-1.5"
+                : "flex min-h-[40px] items-center gap-1 rounded-full border border-border/35 bg-card/45 px-1 py-1", children: isInlineMultiline ? (_jsxs(_Fragment, { children: [inlineTextarea, _jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [inlineAttachButton, renderCreateTaskButton(), _jsx("div", { className: "min-w-0 flex-1" }), inlineTrailingActions] })] })) : (_jsxs(_Fragment, { children: [inlineAttachButton, renderCreateTaskButton(), inlineTextarea, inlineTrailingActions] })) }));
+    }
+    return (_jsxs("div", { className: isGameModal
+            ? "relative flex w-full items-end gap-2 transition-all max-[380px]:gap-1.5"
+            : "flex items-center gap-1.5 sm:gap-2", children: [!isGameModal && !hideAttachButton ? (_jsx(Button, { variant: "ghost", size: "icon", className: isInline
+                    ? `h-8 w-8 shrink-0 rounded-full bg-bg/60 p-0 text-muted shadow-none transition-colors hover:bg-bg/60 hover:text-txt focus-visible:ring-0 focus-visible:ring-offset-0 ${chatPendingImagesCount > 0
+                        ? "text-accent hover:text-accent"
+                        : ""}`
+                    : `h-[38px] w-9 shrink-0 bg-transparent p-0 shadow-none border-0 text-muted hover:bg-transparent hover:text-txt ${chatPendingImagesCount > 0
+                        ? "text-accent hover:text-accent"
+                        : ""}`, onClick: onAttachImage, "aria-label": t("aria.attachImage"), title: t("chatview.AttachImage"), disabled: isComposerLocked, children: isInline ? (_jsx(Plus, { className: "h-5 w-5" })) : (_jsx(Paperclip, { className: "h-6 w-6" })) })) : null, renderCreateTaskButton(), !isInline && showVoiceButton ? (_jsx(Button, { variant: "ghost", size: "icon", className: isGameModal
+                    ? `flex items-center justify-center h-[46px] w-[46px] shrink-0 ${voice.isListening
+                        ? "animate-pulse select-none rounded-full border border-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_82%,transparent),color-mix(in_srgb,var(--bg)_66%,transparent))] text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_16px_26px_-24px_rgba(15,23,42,0.16)] ring-1 ring-inset ring-white/8 backdrop-blur-md transition-all duration-300 active:scale-95 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_18px_28px_-24px_rgba(0,0,0,0.3)]"
+                        : "select-none rounded-full border border-transparent bg-transparent text-muted-strong shadow-none ring-0 backdrop-blur-none transition-[border-color,background-color,color,transform,box-shadow] duration-300 hover:border-border/28 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_74%,transparent),color-mix(in_srgb,var(--bg)_58%,transparent))] hover:text-txt active:scale-95"} ${isComposerLocked ? "opacity-50" : ""}`
+                    : `h-[38px] w-9 shrink-0 bg-transparent p-0 shadow-none border-0 text-muted hover:bg-transparent hover:text-txt ${voice.isListening ? "text-accent hover:text-accent" : ""}`, onClick: handleMicClick, onPointerDown: handleMicPointerDown, onPointerUp: handleMicPointerUp, onPointerCancel: handleMicPointerCancel, onPointerLeave: handleMicPointerCancel, "aria-label": isAgentStarting
+                    ? t("chat.agentStarting")
+                    : voice.isListening
+                        ? voice.captureMode === "push-to-talk"
+                            ? t("chat.releaseToSend")
+                            : t("chat.stopListening")
+                        : t("chat.voiceInput"), "aria-pressed": isGameModal ? undefined : voice.isListening, title: voiceButtonTitle, disabled: isComposerLocked, children: _jsx(Mic, { className: "h-6 w-6" }) })) : null, _jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsx(Textarea, { ref: textareaRef, value: chatInput, onChange: (event) => onChatInputChange(event.target.value), onKeyDown: onKeyDown, "data-testid": "chat-composer-textarea", "aria-label": textareaAriaLabel, variant: isInline ? null : undefined, density: isInline ? null : undefined, className: isGameModal
+                            ? "w-full min-w-0 min-h-0 h-[46px] resize-none overflow-y-hidden max-h-[200px] outline-none ring-0 shadow-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 font-[var(--font-chat)] disabled:opacity-50 rounded-3xl border border-transparent bg-transparent px-4 pb-[13px] pt-[13px] text-[15px] leading-[1.55] text-txt-strong placeholder:text-muted"
+                            : isInline
+                                ? inlineTextareaClass
+                                : "w-full min-w-0 min-h-0 h-[38px] resize-none overflow-y-hidden max-h-[200px] outline-none ring-0 shadow-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 font-[var(--font-chat)] disabled:opacity-50 rounded-2xl border-0 bg-card/40 px-4 py-[8px] text-[15px] leading-[1.55] text-txt placeholder:text-muted", placeholder: placeholder ?? defaultTextareaPlaceholder, rows: 1, disabled: isComposerLocked }), voice.isListening && voice.interimTranscript ? (_jsx("div", { className: isInline
+                            ? "pointer-events-none absolute inset-x-2 bottom-2 truncate text-xs text-muted"
+                            : "pointer-events-none absolute inset-x-4 bottom-2.5 truncate text-xs-tight text-muted", children: voice.interimTranscript })) : null] }), !isInline && showAgentVoiceToggle ? (_jsx(Button, { variant: isGameModal
+                    ? "ghost"
+                    : agentVoiceEnabled
+                        ? "surfaceAccent"
+                        : "surface", size: "icon", className: isGameModal
+                    ? `flex items-center justify-center h-[46px] w-[46px] shrink-0 ${agentVoiceEnabled
+                        ? "select-none rounded-full border border-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_82%,transparent),color-mix(in_srgb,var(--bg)_66%,transparent))] text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_16px_26px_-24px_rgba(15,23,42,0.16)] ring-1 ring-inset ring-white/8 backdrop-blur-md transition-all duration-300 active:scale-95 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_18px_28px_-24px_rgba(0,0,0,0.3)]"
+                        : "select-none rounded-full border border-transparent bg-transparent text-muted-strong shadow-none ring-0 backdrop-blur-none transition-[border-color,background-color,color,transform,box-shadow] duration-300 hover:border-border/28 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_74%,transparent),color-mix(in_srgb,var(--bg)_58%,transparent))] hover:text-txt active:scale-95"}`
+                    : "h-[46px] w-[46px] shrink-0", onClick: onToggleAgentVoice, "aria-label": agentVoiceEnabled ? t("aria.agentVoiceOn") : t("aria.agentVoiceOff"), title: agentVoiceEnabled ? t("chat.agentVoiceOn") : t("chat.agentVoiceOff"), disabled: isComposerLocked, children: agentVoiceEnabled ? (_jsx(Volume2, { className: isGameModal ? "h-5 w-5" : "h-4 w-4" })) : (_jsx(VolumeX, { className: isGameModal ? "h-5 w-5" : "h-4 w-4" })) })) : null, shouldShowStopButton ? (_jsx(Button, { variant: "surfaceDestructive", "data-testid": "chat-composer-action", className: isInline
+                    ? "h-8 w-8 shrink-0 rounded-full bg-danger/15 p-0 text-danger shadow-none transition-colors hover:bg-danger/25 focus-visible:ring-0 focus-visible:ring-offset-0"
+                    : "ml-1 flex items-center justify-center rounded-full transition-all duration-300 select-none active:scale-95 h-[46px] w-[46px] shrink-0", onClick: onStop, size: "icon", title: actionButtonLabel, "aria-label": actionButtonLabel, children: _jsx(Square, { className: isInline
+                        ? "h-3.5 w-3.5 fill-current"
+                        : isGameModal
+                            ? "h-4.5 w-4.5"
+                            : "h-4 w-4" }) })) : !isGameModal && voice.isSpeaking && !hasDraft ? (_jsx(Button, { variant: "surfaceDestructive", "data-testid": "chat-composer-action", className: isInline
+                    ? "h-8 w-8 shrink-0 rounded-full bg-danger/15 p-0 text-danger shadow-none transition-colors hover:bg-danger/25 focus-visible:ring-0 focus-visible:ring-offset-0"
+                    : "ml-1 flex items-center justify-center rounded-full transition-all duration-300 select-none active:scale-95 h-[46px] w-[46px] shrink-0", onClick: onStopSpeaking, size: "icon", title: actionButtonLabel, "aria-label": actionButtonLabel, children: _jsx(Square, { className: isInline ? "h-3.5 w-3.5 fill-current" : "h-4 w-4" }) })) : isInline && !hasDraft ? (_jsx(Button, { variant: "ghost", "data-testid": "chat-composer-action", size: "icon", className: `h-8 w-8 shrink-0 rounded-full p-0 shadow-none transition-colors focus-visible:ring-0 focus-visible:ring-offset-0 active:scale-95 ${voice.isListening
+                    ? "bg-accent text-bg hover:bg-accent/90 hover:text-bg"
+                    : "bg-bg/60 text-muted hover:bg-bg/60 hover:text-txt"}`, onClick: handleMicClick, onPointerDown: handleMicPointerDown, onPointerUp: handleMicPointerUp, onPointerCancel: handleMicPointerCancel, onPointerLeave: handleMicPointerCancel, disabled: isComposerLocked || !voice.supported, title: voiceButtonTitle, "aria-label": voiceButtonTitle, "aria-pressed": voice.isListening, children: _jsx(Mic, { className: "h-4.5 w-4.5" }) })) : (_jsx(Button, { variant: isGameModal ? "default" : "ghost", "data-testid": "chat-composer-action", size: "icon", className: isGameModal
+                    ? `ml-1 flex items-center justify-center rounded-full transition-all duration-300 select-none active:scale-95 h-[46px] w-[46px] shrink-0 ${hasDraft
+                        ? "select-none rounded-full border border-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_82%,transparent),color-mix(in_srgb,var(--bg)_66%,transparent))] text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_16px_26px_-24px_rgba(15,23,42,0.16)] ring-1 ring-inset ring-white/8 backdrop-blur-md transition-all duration-300 active:scale-95 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_18px_28px_-24px_rgba(0,0,0,0.3)]"
+                        : "select-none rounded-full border border-transparent bg-transparent text-muted-strong shadow-none ring-0 backdrop-blur-none transition-[border-color,background-color,color,transform,box-shadow] duration-300 hover:border-border/28 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_74%,transparent),color-mix(in_srgb,var(--bg)_58%,transparent))] hover:text-txt active:scale-95 opacity-80"}`
+                    : isInline
+                        ? "h-8 w-8 shrink-0 rounded-full bg-txt p-0 text-bg shadow-none transition-transform focus-visible:ring-0 focus-visible:ring-offset-0 active:scale-95 disabled:opacity-40"
+                        : "ml-1 h-[38px] w-9 shrink-0 bg-transparent p-0 shadow-none border-0 text-muted hover:bg-transparent hover:text-txt transition-colors select-none active:scale-95 disabled:ring-0 disabled:opacity-40", onClick: onSend, disabled: isComposerLocked || !hasDraft, title: actionButtonLabel, "aria-label": actionButtonLabel, children: isInline ? (_jsx(ArrowUp, { className: "h-4.5 w-4.5" })) : (_jsx(Send, { className: isGameModal ? "h-4.5 w-4.5" : "h-6 w-6" })) }))] }));
+}

package/packages/ui/src/components/composites/chat/chat-conversation-item.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+import type { ChatConversationLabels, ChatConversationSummary, ChatVariant } from "./chat-types";
+export interface ChatConversationItemProps {
+    conversation: ChatConversationSummary;
+    deleting?: boolean;
+    displayTitle?: string;
+    isActive: boolean;
+    isConfirmingDelete?: boolean;
+    isUnread?: boolean;
+    labels?: ChatConversationLabels;
+    mobile?: boolean;
+    onCancelDelete?: () => void;
+    onConfirmDelete?: () => void | Promise<void>;
+    onOpenActions?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | React.TouchEvent<HTMLButtonElement | HTMLDivElement>, conversation: ChatConversationSummary) => void;
+    onRequestDeleteConfirm?: () => void;
+    onRequestRename?: () => void;
+    onSelect: () => void;
+    variant?: ChatVariant;
+}
+export declare function ChatConversationItem({ conversation, deleting, displayTitle, isActive, isConfirmingDelete, isUnread, labels, mobile, onCancelDelete, onConfirmDelete, onOpenActions, onRequestDeleteConfirm, onRequestRename, onSelect, variant, }: ChatConversationItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chat-conversation-item.d.ts.map

package/packages/ui/src/components/composites/chat/chat-conversation-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-conversation-item.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-conversation-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EACV,sBAAsB,EACtB,uBAAuB,EACvB,WAAW,EACZ,MAAM,cAAc,CAAC;AAkFtB,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,uBAAuB,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,CACd,KAAK,EACD,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,cAAc,CAAC,GACpD,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,cAAc,CAAC,EACxD,YAAY,EAAE,uBAAuB,KAClC,IAAI,CAAC;IACV,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EACZ,QAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,kBAA0B,EAC1B,QAAgB,EAChB,MAAW,EACX,MAAc,EACd,cAAc,EACd,eAAe,EACf,aAAa,EACb,sBAAsB,EACtB,eAAe,EACf,QAAQ,EACR,OAAmB,GACpB,EAAE,yBAAyB,2CAgM3B"}

package/packages/ui/src/components/composites/chat/chat-conversation-item.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHorizontal, PencilLine, X } from "lucide-react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { Z_OVERLAY } from "../../../lib/floating-layers";
+import { cn } from "../../../lib/utils";
+import { Button } from "../../ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
+function TruncatingConversationTitle({ displayTitle, isActive, variant, }) {
+    const titleRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const measure = useCallback(() => {
+        const el = titleRef.current;
+        if (!el)
+            return;
+        setIsTruncated(el.scrollWidth > el.clientWidth + 1);
+    }, []);
+    useLayoutEffect(() => {
+        measure();
+        const el = titleRef.current;
+        if (!el)
+            return;
+        let ro;
+        if (typeof ResizeObserver !== "undefined") {
+            ro = new ResizeObserver(() => {
+                measure();
+            });
+            ro.observe(el);
+        }
+        window.addEventListener("resize", measure);
+        return () => {
+            ro?.disconnect();
+            window.removeEventListener("resize", measure);
+        };
+    }, [measure]);
+    const span = (_jsx("span", { ref: titleRef, className: variant === "game-modal"
+            ? `block w-full min-w-0 max-w-full truncate text-left text-sm font-medium leading-tight transition-colors ${isActive
+                ? "text-txt text-shadow-glow"
+                : "text-white/90 group-hover:text-white"}`
+            : `block min-w-0 max-w-full flex-1 truncate text-left text-sm font-normal leading-snug transition-colors ${isActive
+                ? "text-txt"
+                : "text-[color:color-mix(in_srgb,var(--text-strong)_80%,var(--text)_20%)] group-hover:text-txt"}`, ...(isTruncated ? { title: displayTitle } : {}), children: displayTitle }));
+    if (!isTruncated) {
+        return span;
+    }
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: span }), _jsx(TooltipContent, { side: "right", align: "start", sideOffset: 10, collisionPadding: 12, className: `z-[${Z_OVERLAY}] max-w-[min(90vw,22rem)] whitespace-normal break-words px-3 py-2 text-sm leading-snug`, children: displayTitle })] }));
+}
+export function ChatConversationItem({ conversation, deleting = false, displayTitle, isActive, isConfirmingDelete = false, isUnread = false, labels = {}, mobile = false, onCancelDelete, onConfirmDelete, onOpenActions, onRequestDeleteConfirm, onRequestRename, onSelect, variant = "default", }) {
+    const longPressTimerRef = useRef(null);
+    const suppressClickRef = useRef(false);
+    const isGameModal = variant === "game-modal";
+    const clearLongPressTimer = useCallback(() => {
+        if (longPressTimerRef.current !== null) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        return () => clearLongPressTimer();
+    }, [clearLongPressTimer]);
+    const handleTouchStart = (event) => {
+        if (!mobile || !onOpenActions)
+            return;
+        clearLongPressTimer();
+        longPressTimerRef.current = setTimeout(() => {
+            suppressClickRef.current = true;
+            onOpenActions(event, conversation);
+            clearLongPressTimer();
+        }, 450);
+    };
+    const handleTouchEnd = () => {
+        clearLongPressTimer();
+    };
+    const renderedTitle = displayTitle ?? conversation.title;
+    const showInlineActions = isGameModal;
+    return (_jsxs("div", { "data-testid": "conv-item", "data-active": isActive || undefined, className: isGameModal
+            ? `group relative flex w-full items-start gap-2 rounded-xl border p-2.5 transition-all sm:gap-3 ${isActive
+                ? "border-[color:var(--onboarding-accent-border)] bg-[color:var(--onboarding-accent-bg)] shadow-[0_14px_28px_rgba(0,0,0,0.2)]"
+                : "border-transparent bg-transparent hover:border-white/10 hover:bg-white/5"}`
+            : `group relative flex w-full items-center gap-2 px-2.5 py-1 text-left transition-colors duration-100 ${isActive
+                ? "text-txt"
+                : "text-[color:color-mix(in_srgb,var(--text-strong)_78%,var(--text)_22%)] hover:text-txt"}`, children: [_jsxs(Button, { variant: "ghost", size: "sm", "data-testid": "conv-select", className: isGameModal
+                    ? "flex h-auto w-full min-w-0 flex-1 cursor-pointer flex-col !items-start !justify-start overflow-hidden rounded-none border-none bg-transparent p-0 !text-left"
+                    : "m-0 flex h-auto w-full min-w-0 flex-1 cursor-pointer items-center gap-2 overflow-hidden rounded-none border-0 bg-transparent p-0 text-left hover:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0", onClick: () => {
+                    if (suppressClickRef.current) {
+                        suppressClickRef.current = false;
+                        return;
+                    }
+                    onSelect();
+                }, onContextMenu: (event) => {
+                    if (mobile || !onOpenActions)
+                        return;
+                    onOpenActions(event, conversation);
+                }, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, onTouchMove: handleTouchEnd, children: [isUnread ? (_jsx("span", { className: isGameModal
+                            ? "absolute left-3 top-3 z-[1] h-2 w-2 shrink-0 rounded-full bg-accent shadow-[0_0_10px_rgba(var(--accent-rgb),0.6)] animate-pulse"
+                            : "h-1.5 w-1.5 shrink-0 rounded-full bg-accent shadow-[0_0_6px_rgba(var(--accent-rgb),0.4)]" })) : null, _jsx("div", { className: "min-w-0 flex-1", children: _jsx(TruncatingConversationTitle, { displayTitle: renderedTitle, isActive: isActive, variant: variant }) })] }), !isGameModal && !isConfirmingDelete && onOpenActions ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", "data-testid": "conv-actions", "aria-label": labels.actions ?? "More actions", className: cn("h-6 w-6 shrink-0 rounded-[var(--radius-sm)] p-0 text-muted hover:bg-transparent hover:text-txt focus-visible:opacity-100", mobile
+                    ? "opacity-100"
+                    : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"), onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onOpenActions(event, conversation);
+                }, children: _jsx(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": true }) })) : null, showInlineActions && !isConfirmingDelete ? (_jsx(Button, { size: "icon", variant: isGameModal ? "ghost" : "surface", "data-testid": "conv-rename", "aria-label": labels.rename ?? "Rename conversation", className: cn(isGameModal
+                    ? "h-8 w-8 shrink-0 self-center rounded-lg border border-white/10 bg-black/20 text-[color:var(--onboarding-text-muted)] shadow-sm transition-[border-color,background-color,color,opacity] hover:border-[color:var(--onboarding-accent-border)] hover:bg-[color:var(--onboarding-accent-bg)] hover:text-[color:var(--onboarding-text-strong)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent"
+                    : "h-8 w-8 shrink-0 rounded-lg hover:text-accent", mobile
+                    ? "opacity-100"
+                    : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:pointer-events-auto"), onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onRequestRename?.();
+                }, children: _jsx(PencilLine, { className: "h-3.5 w-3.5", strokeWidth: 2.25, "aria-hidden": true }) })) : null, showInlineActions && !isConfirmingDelete ? (_jsx(Button, { size: "icon", variant: isGameModal ? "ghost" : "surfaceDestructive", "data-testid": "conv-delete", "aria-label": labels.delete ?? "Delete conversation", className: cn(isGameModal
+                    ? "h-8 w-8 shrink-0 self-center rounded-lg border border-white/10 bg-black/20 text-[color:var(--onboarding-text-muted)] shadow-sm transition-[border-color,background-color,color,opacity] hover:border-[color:var(--onboarding-accent-border)] hover:bg-[color:var(--onboarding-accent-bg)] hover:text-[color:var(--onboarding-text-strong)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent"
+                    : "h-8 w-8 shrink-0 rounded-lg", mobile
+                    ? "opacity-100"
+                    : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:pointer-events-auto", "hover:text-danger"), onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onRequestDeleteConfirm?.();
+                }, children: _jsx(X, { className: "h-3.5 w-3.5", strokeWidth: 2.25, "aria-hidden": true }) })) : null, isConfirmingDelete ? (_jsxs("div", { className: "flex flex-shrink-0 items-center gap-1.5 rounded-lg border border-danger/22 bg-[linear-gradient(180deg,rgba(239,68,68,0.1),rgba(239,68,68,0.04))] px-2 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_10px_16px_-16px_rgba(127,29,29,0.18)]", children: [_jsx("span", { className: "text-2xs font-medium text-danger", children: labels.deleteConfirm ?? "Delete?" }), _jsx(Button, { variant: "destructive", size: "sm", className: "h-7 rounded-md px-2 py-0.5 text-2xs shadow-sm disabled:opacity-50", onClick: () => void onConfirmDelete?.(), disabled: deleting, children: deleting ? "..." : (labels.deleteYes ?? "Yes") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 rounded-md px-2 py-0.5 text-2xs text-muted-strong shadow-sm hover:border-accent/40 hover:text-txt disabled:opacity-50", onClick: onCancelDelete, disabled: deleting, children: labels.deleteNo ?? "No" })] })) : null] }));
+}

package/packages/ui/src/components/composites/chat/chat-conversation-rename-dialog.d.ts

@@ -0,0 +1,22 @@
+export interface ChatConversationRenameDialogProps {
+    cancelLabel?: string;
+    description: string;
+    inputLabel: string;
+    onChange: (value: string) => void;
+    onClose: () => void;
+    onSave: () => void | Promise<void>;
+    onSuggest?: () => void | Promise<void>;
+    open: boolean;
+    saving?: boolean;
+    saveLabel: string;
+    saveDisabled?: boolean;
+    savePendingLabel?: string;
+    suggesting?: boolean;
+    suggestDisabled?: boolean;
+    suggestLabel?: string;
+    suggestPendingLabel?: string;
+    title: string;
+    value: string;
+}
+export declare function ChatConversationRenameDialog({ cancelLabel, description, inputLabel, onChange, onClose, onSave, onSuggest, open, saving, saveLabel, savePendingLabel, saveDisabled, suggesting, suggestDisabled, suggestLabel, suggestPendingLabel, title, value, }: ChatConversationRenameDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chat-conversation-rename-dialog.d.ts.map

package/packages/ui/src/components/composites/chat/chat-conversation-rename-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-conversation-rename-dialog.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-conversation-rename-dialog.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,iCAAiC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,WAAsB,EACtB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,IAAI,EACJ,MAAc,EACd,SAAS,EACT,gBAA4B,EAC5B,YAAoB,EACpB,UAAkB,EAClB,eAAuB,EACvB,YAAwB,EACxB,mBAAkC,EAClC,KAAK,EACL,KAAK,GACN,EAAE,iCAAiC,2CA4EnC"}

package/packages/ui/src/components/composites/chat/chat-conversation-rename-dialog.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sparkles } from "lucide-react";
+import { Button } from "../../ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../ui/dialog";
+import { Input } from "../../ui/input";
+import { Label } from "../../ui/label";
+export function ChatConversationRenameDialog({ cancelLabel = "Cancel", description, inputLabel, onChange, onClose, onSave, onSuggest, open, saving = false, saveLabel, savePendingLabel = saveLabel, saveDisabled = false, suggesting = false, suggestDisabled = false, suggestLabel = "Suggest", suggestPendingLabel = suggestLabel, title, value, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: (nextOpen) => !nextOpen && onClose(), children: _jsxs(DialogContent, { "data-testid": "conv-rename-dialog", className: "max-w-md", onPointerDownOutside: onClose, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsxs("div", { className: "grid gap-2 py-1", children: [_jsx(Label, { htmlFor: "conv-rename-title-input", children: inputLabel }), _jsx(Input, { id: "conv-rename-title-input", "data-testid": "conv-rename-input", value: value, onChange: (event) => onChange(event.target.value), onKeyDown: (event) => {
+                                if (event.key === "Enter") {
+                                    event.preventDefault();
+                                    void onSave();
+                                }
+                            }, disabled: saveDisabled || suggestDisabled, className: "text-txt" })] }), _jsxs(DialogFooter, { className: "flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-between", children: [onSuggest ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", "data-testid": "conv-rename-suggest", className: "gap-1.5 border-border", onClick: () => void onSuggest(), disabled: suggestDisabled || saveDisabled, children: [_jsx(Sparkles, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }), suggesting ? suggestPendingLabel : suggestLabel] })) : (_jsx("div", {})), _jsxs("div", { className: "flex w-full justify-end gap-2 sm:w-auto", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", "data-testid": "conv-rename-cancel", onClick: onClose, children: cancelLabel }), _jsx(Button, { type: "button", variant: "default", size: "sm", "data-testid": "conv-rename-save", onClick: () => void onSave(), disabled: saveDisabled, children: saving ? savePendingLabel : saveLabel })] })] })] }) }));
+}

package/packages/ui/src/components/composites/chat/chat-empty-state.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import type { ChatVariant } from "./chat-types";
+export interface ChatEmptyStateProps {
+    action?: React.ReactNode;
+    agentName: string;
+    className?: string;
+    hint?: React.ReactNode;
+    labels?: {
+        chatIconLabel?: string;
+        sendMessageTo?: string;
+        startConversation?: string;
+        toBeginChatting?: string;
+    };
+    onSuggestionClick?: (suggestion: string) => void;
+    suggestions?: string[];
+    variant?: ChatVariant;
+}
+export declare function ChatEmptyState({ action, agentName, className, hint, labels, onSuggestionClick, suggestions, variant, }: ChatEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chat-empty-state.d.ts.map

package/packages/ui/src/components/composites/chat/chat-empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE;QACP,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,EACT,SAAS,EACT,IAAI,EACJ,MAAW,EACX,iBAAiB,EACjB,WAA6E,EAC7E,OAAmB,GACpB,EAAE,mBAAmB,2CAgErB"}

package/packages/ui/src/components/composites/chat/chat-empty-state.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+import { Button } from "../../ui/button";
+export function ChatEmptyState({ action, agentName, className, hint, labels = {}, onSuggestionClick, suggestions = ["Hello!", "How are you?", "Tell me a joke", "Help me with..."], variant = "default", }) {
+    return (_jsxs("div", { className: cn("flex flex-1 flex-col items-center justify-center p-6 text-center", variant === "game-modal" &&
+            "min-h-full justify-end gap-4 px-2 py-4 text-left", className), children: [variant === "default" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-accent-subtle", children: _jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-accent", "aria-label": labels.chatIconLabel ?? "Chat icon", children: [_jsx("title", { children: labels.chatIconLabel ?? "Chat" }), _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })] }) }), _jsx("h3", { className: "mb-2 text-lg font-semibold text-txt-strong", children: labels.startConversation ?? "Start a Conversation" }), _jsxs("p", { className: "mb-6 max-w-sm font-[var(--font-chat)] text-sm text-muted", children: [labels.sendMessageTo ?? "Send a message to", " ", agentName, " ", labels.toBeginChatting ?? "to begin chatting."] })] })) : null, action ? _jsx("div", { className: "mb-4 flex justify-center", children: action }) : null, _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: suggestions.map((suggestion) => (_jsx(Button, { variant: variant === "game-modal" ? "surface" : "outline", size: "sm", className: cn("h-7 rounded-full px-3 py-1.5 text-xs transition-colors", variant === "default" &&
+                        "border-border bg-bg text-muted hover:border-accent hover:text-accent"), onClick: () => onSuggestionClick?.(suggestion), children: suggestion }, suggestion))) }), hint ? (_jsx("div", { className: "mt-4 max-w-sm text-xs-tight uppercase tracking-[0.16em] text-muted/74", children: hint })) : null] }));
+}

package/packages/ui/src/components/composites/chat/chat-message-actions.d.ts

@@ -0,0 +1,14 @@
+import type { ChatMessageLabels } from "./chat-types";
+export interface ChatMessageActionsProps {
+    canDelete?: boolean;
+    canEdit?: boolean;
+    canPlay?: boolean;
+    copied?: boolean;
+    labels?: ChatMessageLabels;
+    onCopy?: () => void;
+    onDelete?: () => void;
+    onEdit?: () => void;
+    onPlay?: () => void;
+}
+export declare function ChatMessageActions({ canDelete, canEdit, canPlay, copied, labels, onCopy, onDelete, onEdit, onPlay, }: ChatMessageActionsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chat-message-actions.d.ts.map

package/packages/ui/src/components/composites/chat/chat-message-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message-actions.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-message-actions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAiB,EACjB,OAAe,EACf,OAAe,EACf,MAAc,EACd,MAAW,EACX,MAAM,EACN,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE,uBAAuB,2CA8DzB"}

package/packages/ui/src/components/composites/chat/chat-message-actions.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy, Pencil, Trash2, Volume2 } from "lucide-react";
+import { Button } from "../../ui/button";
+import { PagePanel } from "../page-panel";
+export function ChatMessageActions({ canDelete = false, canEdit = false, canPlay = false, copied = false, labels = {}, onCopy, onDelete, onEdit, onPlay, }) {
+    const copyLabel = labels.copy ?? "Copy message";
+    const copiedLabel = labels.copied ?? "Copied!";
+    const copiedAriaLabel = labels.copiedAria ?? "Copied to clipboard";
+    return (_jsxs(PagePanel.ActionRail, { className: "top-1 rounded-lg p-1", children: [_jsx(Button, { variant: "surface", size: "icon", onClick: onCopy, className: "h-8 w-8 rounded-lg", title: copied ? copiedLabel : copyLabel, "aria-label": copied ? copiedAriaLabel : copyLabel, children: copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-ok" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) }), canPlay ? (_jsx(Button, { variant: "surface", size: "icon", onClick: onPlay, className: "h-8 w-8 rounded-lg", title: labels.play ?? "Play message", "aria-label": labels.play ?? "Play message", children: _jsx(Volume2, { className: "h-3.5 w-3.5" }) })) : null, canEdit ? (_jsx(Button, { variant: "surface", size: "icon", onClick: onEdit, className: "h-8 w-8 rounded-lg", title: labels.edit ?? "Edit message", "aria-label": labels.edit ?? "Edit message", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) })) : null, canDelete ? (_jsx(Button, { variant: "surfaceDestructive", size: "icon", onClick: onDelete, className: "h-8 w-8 rounded-lg", title: labels.delete ?? "Delete message", "aria-label": labels.delete ?? "Delete message", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })) : null] }));
+}