@elizaos/ui 2.0.0-alpha.20 → 2.0.0-alpha.201

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

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef, useState, } from "react";
+import { cn } from "../../../lib/utils";
+import { Button } from "../../ui/button";
+import { Textarea } from "../../ui/textarea";
+import { ChatBubble } from "./chat-bubble";
+import { ChatMessageActions } from "./chat-message-actions";
+export function getChatMessageAnchorId(messageId) {
+    return `chat-message-${messageId}`;
+}
+const DISCORD_CUSTOM_EMOJI_RE = /^<(a?):([^:>]+):(\d+)>$/;
+function normalizeSenderHandle(handle) {
+    if (typeof handle !== "string")
+        return null;
+    const trimmed = handle.trim();
+    if (!trimmed)
+        return null;
+    return trimmed.startsWith("@") ? trimmed : `@${trimmed}`;
+}
+function resolveSenderDisplayName(message) {
+    const from = typeof message.from === "string" ? message.from.trim() : "";
+    if (from)
+        return from;
+    return normalizeSenderHandle(message.fromUserName);
+}
+function resolveSenderHandle(message, displayName) {
+    const handle = normalizeSenderHandle(message.fromUserName);
+    if (!handle)
+        return null;
+    if (displayName?.replace(/^@/, "").toLowerCase() ===
+        handle.slice(1).toLowerCase()) {
+        return null;
+    }
+    return handle;
+}
+function resolveReplySenderDisplayName(message, replyTarget) {
+    if (replyTarget) {
+        const targetDisplayName = resolveSenderDisplayName(replyTarget);
+        if (targetDisplayName)
+            return targetDisplayName;
+    }
+    const replyToSenderName = typeof message.replyToSenderName === "string"
+        ? message.replyToSenderName.trim()
+        : "";
+    if (replyToSenderName)
+        return replyToSenderName;
+    return normalizeSenderHandle(message.replyToSenderUserName);
+}
+function formatPossessiveLabel(label) {
+    return /s$/i.test(label) ? `${label}'` : `${label}'s`;
+}
+function normalizeMessageReactions(reactions) {
+    if (!Array.isArray(reactions)) {
+        return [];
+    }
+    return reactions.filter((reaction) => typeof reaction?.emoji === "string" &&
+        reaction.emoji.trim().length > 0 &&
+        typeof reaction.count === "number" &&
+        Number.isFinite(reaction.count) &&
+        reaction.count > 0);
+}
+function parseDiscordCustomEmoji(emoji) {
+    const match = emoji.match(DISCORD_CUSTOM_EMOJI_RE);
+    if (!match)
+        return null;
+    return {
+        animated: match[1] === "a",
+        name: match[2],
+        id: match[3],
+    };
+}
+function ReactionEmoji({ emoji }) {
+    const customEmoji = parseDiscordCustomEmoji(emoji);
+    if (!customEmoji) {
+        return _jsx("span", { className: "text-[15px] leading-none", children: emoji });
+    }
+    const extension = customEmoji.animated ? "gif" : "png";
+    const src = `https://cdn.discordapp.com/emojis/${customEmoji.id}.${extension}?size=64&quality=lossless`;
+    return (_jsx("img", { src: src, alt: `:${customEmoji.name}:`, className: "h-4 w-4 object-contain" }));
+}
+function ReactionStrip({ alignRight, reactions, }) {
+    if (reactions.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: cn("mt-2 flex flex-wrap gap-1.5", alignRight ? "justify-end" : "justify-start"), children: reactions.map((reaction) => {
+            const title = Array.isArray(reaction.users) && reaction.users.length > 0
+                ? reaction.users.join(", ")
+                : undefined;
+            return (_jsxs("span", { "data-testid": "chat-reaction-badge", title: title, className: "inline-flex items-center gap-1 rounded-full border border-border/28 bg-bg/70 px-2 py-1 text-xs-tight font-medium text-txt-strong shadow-[0_10px_18px_-16px_rgba(15,23,42,0.45)]", children: [_jsx(ReactionEmoji, { emoji: reaction.emoji }), reaction.count > 1 ? _jsx("span", { children: reaction.count }) : null] }, `${reaction.emoji}:${reaction.count}`));
+        }) }));
+}
+export const ChatMessage = memo(function ChatMessage({ message, isGrouped = false, agentName = "Agent", children, labels = {}, onCopy, onSpeak, onEdit, onDelete, replyTarget = null, userMessagesOnRight = true, }) {
+    const [copied, setCopied] = useState(false);
+    const copiedTimerRef = useRef(null);
+    const [showActions, setShowActions] = useState(false);
+    const [supportsHover, setSupportsHover] = useState(() => typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? window.matchMedia("(hover: hover) and (pointer: fine)").matches
+        : true);
+    const [isEditing, setIsEditing] = useState(false);
+    const [draftText, setDraftText] = useState(message.text);
+    const [savingEdit, setSavingEdit] = useState(false);
+    const articleRef = useRef(null);
+    const editTextareaRef = useRef(null);
+    const isUser = message.role === "user";
+    const isRightAligned = isUser ? userMessagesOnRight : !userMessagesOnRight;
+    const canEdit = isUser &&
+        typeof onEdit === "function" &&
+        message.source !== "local_command" &&
+        !message.id.startsWith("temp-");
+    const canPlay = Boolean(!isUser && typeof onSpeak === "function" && message.text.trim());
+    const normalizedSource = typeof message.source === "string" &&
+        message.source.trim().toLowerCase() !== "app"
+        ? message.source
+        : undefined;
+    const senderDisplayName = isUser ? resolveSenderDisplayName(message) : null;
+    const senderHandle = isUser
+        ? resolveSenderHandle(message, senderDisplayName)
+        : null;
+    const senderPrimaryLabel = senderDisplayName ?? senderHandle ?? "User";
+    const replyTargetId = typeof message.replyToMessageId === "string"
+        ? message.replyToMessageId.trim()
+        : "";
+    const replySenderLabel = resolveReplySenderDisplayName(message, replyTarget);
+    const replyReferenceLabel = replySenderLabel
+        ? `Reply to ${formatPossessiveLabel(replySenderLabel)} message`
+        : "Reply to an earlier message";
+    const showReplyReference = Boolean(!isEditing && replyTargetId && normalizedSource);
+    const showSenderHeader = isUser && !isGrouped && Boolean(senderDisplayName || senderHandle);
+    const visibleReactions = normalizeMessageReactions(message.reactions);
+    const handleCopy = useCallback(() => {
+        onCopy?.(message.text);
+        setCopied(true);
+        if (copiedTimerRef.current !== null) {
+            clearTimeout(copiedTimerRef.current);
+        }
+        copiedTimerRef.current = setTimeout(() => {
+            setCopied(false);
+            copiedTimerRef.current = null;
+        }, 2000);
+    }, [message.text, onCopy]);
+    useEffect(() => {
+        return () => {
+            if (copiedTimerRef.current !== null) {
+                clearTimeout(copiedTimerRef.current);
+            }
+        };
+    }, []);
+    const handleStartEditing = useCallback(() => {
+        if (!canEdit || savingEdit)
+            return;
+        setDraftText(message.text);
+        setIsEditing(true);
+    }, [canEdit, message.text, savingEdit]);
+    const handleCancelEditing = useCallback(() => {
+        if (savingEdit)
+            return;
+        setDraftText(message.text);
+        setIsEditing(false);
+    }, [message.text, savingEdit]);
+    const handleSaveEdit = useCallback(async () => {
+        if (!onEdit)
+            return;
+        const nextText = draftText.trim();
+        if (!nextText)
+            return;
+        if (nextText === message.text.trim()) {
+            setDraftText(message.text);
+            setIsEditing(false);
+            return;
+        }
+        setSavingEdit(true);
+        try {
+            const saved = await onEdit(message.id, nextText);
+            if (saved !== false) {
+                setIsEditing(false);
+            }
+        }
+        finally {
+            setSavingEdit(false);
+        }
+    }, [draftText, message.id, message.text, onEdit]);
+    const handleTapReveal = useCallback((event) => {
+        if (supportsHover || isEditing)
+            return;
+        const target = event.target;
+        if (target?.closest("button, a, textarea, input")) {
+            return;
+        }
+        setShowActions((prev) => !prev);
+    }, [isEditing, supportsHover]);
+    const handleEditKeyDown = useCallback((event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            handleCancelEditing();
+            return;
+        }
+        if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            void handleSaveEdit();
+        }
+    }, [handleCancelEditing, handleSaveEdit]);
+    useEffect(() => {
+        if (!isEditing) {
+            setDraftText(message.text);
+            return;
+        }
+        const textarea = editTextareaRef.current;
+        if (!textarea)
+            return;
+        textarea.focus();
+        textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+    }, [isEditing, message.text]);
+    useEffect(() => {
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
+            return;
+        }
+        const mediaQuery = window.matchMedia("(hover: hover) and (pointer: fine)");
+        const syncSupportsHover = () => {
+            setSupportsHover(mediaQuery.matches);
+            if (mediaQuery.matches) {
+                setShowActions(false);
+            }
+        };
+        syncSupportsHover();
+        if (typeof mediaQuery.addEventListener === "function") {
+            mediaQuery.addEventListener("change", syncSupportsHover);
+            return () => mediaQuery.removeEventListener("change", syncSupportsHover);
+        }
+        mediaQuery.addListener(syncSupportsHover);
+        return () => mediaQuery.removeListener(syncSupportsHover);
+    }, []);
+    useEffect(() => {
+        if (supportsHover || !showActions || typeof document === "undefined") {
+            return;
+        }
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node)) {
+                setShowActions(false);
+                return;
+            }
+            if (!articleRef.current?.contains(target)) {
+                setShowActions(false);
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [showActions, supportsHover]);
+    const actionsVisible = showActions;
+    const handleReplyReferenceClick = useCallback((event) => {
+        if (!replyTargetId || typeof document === "undefined")
+            return;
+        const target = document.getElementById(getChatMessageAnchorId(replyTargetId));
+        if (!target)
+            return;
+        event.preventDefault();
+        target.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, [replyTargetId]);
+    return (_jsx("article", { ref: articleRef, id: getChatMessageAnchorId(message.id), className: `flex items-start gap-2 sm:gap-3 ${isRightAligned ? "justify-end" : "justify-start"} ${isGrouped ? "mt-1" : "mt-4"}`, "data-testid": "chat-message", "data-role": message.role, onMouseEnter: supportsHover ? () => setShowActions(true) : undefined, onMouseLeave: supportsHover ? () => setShowActions(false) : undefined, onTouchEnd: handleTapReveal, "aria-label": `${isUser && showSenderHeader
+            ? senderPrimaryLabel
+            : isUser
+                ? userMessagesOnRight
+                    ? "Your"
+                    : senderPrimaryLabel
+                : agentName} message`, children: _jsxs("div", { className: `max-w-[88%] min-w-0 sm:max-w-[80%] ${isRightAligned ? "mr-1" : "ml-1"}`, children: [!isUser && !isGrouped ? (_jsx("div", { className: cn("mb-1 text-xs font-semibold text-accent", isRightAligned ? "text-right" : "text-left"), children: agentName })) : null, showSenderHeader ? (_jsx("div", { className: cn("mb-1 flex items-center gap-2", isRightAligned ? "justify-end" : "justify-start"), children: _jsxs("div", { className: cn("min-w-0", isRightAligned ? "text-right" : "text-left"), children: [_jsx("div", { className: "truncate text-xs font-semibold text-txt-strong", children: senderPrimaryLabel }), senderHandle ? (_jsx("div", { className: "truncate text-xs-tight text-muted", children: senderHandle })) : null] }) })) : null, _jsxs(ChatBubble, { tone: isUser ? "user" : "assistant", source: normalizedSource, className: `relative group rounded-2xl px-4 py-3 text-[15px] leading-[1.7] whitespace-pre-wrap break-words ${isRightAligned ? "rounded-br-sm" : "rounded-bl-sm"}`, style: { fontFamily: "var(--font-chat)" }, children: [showReplyReference ? (_jsx("a", { href: `#${getChatMessageAnchorId(replyTargetId)}`, onClick: handleReplyReferenceClick, className: "mb-2 block text-xs font-medium text-muted underline decoration-border/60 underline-offset-2 transition-colors hover:text-txt-strong", children: replyReferenceLabel })) : null, isEditing ? (_jsxs("div", { className: "space-y-3", children: [_jsx(Textarea, { ref: editTextareaRef, value: draftText, onChange: (event) => setDraftText(event.target.value), onKeyDown: handleEditKeyDown, className: "min-h-[110px] w-full rounded-xl border border-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_86%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] px-3 py-2.5 text-[15px] leading-[1.7] text-txt outline-none shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_14px_20px_-20px_rgba(15,23,42,0.1)] focus-visible:border-accent/28 focus-visible:ring-2 focus-visible:ring-accent/12", style: { fontFamily: "var(--font-chat)" }, "aria-label": labels.edit ?? "Edit message", disabled: savingEdit }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { variant: "surface", size: "sm", onClick: handleCancelEditing, disabled: savingEdit, className: "h-8 rounded-lg px-3 text-xs", children: labels.cancel ?? "Cancel" }), _jsx(Button, { variant: "surfaceAccent", size: "sm", onClick: () => void handleSaveEdit(), disabled: savingEdit ||
+                                                !draftText.trim() ||
+                                                draftText.trim() === message.text.trim(), className: "h-8 rounded-lg px-3 text-xs disabled:border-border/20 disabled:bg-bg-accent disabled:text-muted-strong", children: savingEdit
+                                                ? (labels.saving ?? "Saving...")
+                                                : (labels.saveAndResend ?? "Save and resend") })] })] })) : ((children ?? message.text)), !isUser && message.interrupted ? (_jsx("div", { className: "mt-2 border-t border-danger/30 pt-2", children: _jsx("span", { className: "inline-flex rounded-full border border-danger/30 bg-danger/10 px-2 py-0.5 text-xs font-medium text-danger", children: labels.responseInterrupted ?? "Response interrupted" }) })) : null, !isEditing ? (_jsx("div", { className: cn("absolute top-0 flex items-center gap-1 transition-opacity duration-200", isRightAligned
+                                ? "left-0 -translate-x-full"
+                                : "right-0 translate-x-full", actionsVisible
+                                ? "opacity-100"
+                                : "pointer-events-none opacity-0"), children: _jsx(ChatMessageActions, { canDelete: Boolean(onDelete), canEdit: canEdit, canPlay: canPlay, copied: copied, labels: labels, onCopy: handleCopy, onDelete: () => onDelete?.(message.id), onEdit: handleStartEditing, onPlay: () => onSpeak?.(message.id, message.text) }) })) : null] }), _jsx(ReactionStrip, { alignRight: isRightAligned, reactions: visibleReactions })] }) }));
+});

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

@@ -0,0 +1,54 @@
+import type * as React from "react";
+import { SidebarPanel, SidebarScrollRegion } from "../sidebar";
+import { ChatConversationItem } from "./chat-conversation-item";
+import { ChatConversationRenameDialog } from "./chat-conversation-rename-dialog";
+import type { ChatConversationLabels, ChatConversationSummary, ChatVariant } from "./chat-types";
+export interface ChatSidebarProps {
+    activeConversationId: string | null;
+    confirmDeleteId?: string | null;
+    conversations: ChatConversationSummary[];
+    deletingId?: string | null;
+    labels?: ChatConversationLabels;
+    mobile?: boolean;
+    onCancelDelete?: () => void;
+    onClose?: () => void;
+    onConfirmDelete?: (id: string) => void | Promise<void>;
+    onCreate: () => void;
+    onOpenActions?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | React.TouchEvent<HTMLButtonElement | HTMLDivElement>, conversation: ChatConversationSummary) => void;
+    onRequestDeleteConfirm?: (id: string) => void;
+    onRequestRename?: (conversation: ChatConversationSummary) => void;
+    onSearchChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onSearchClear?: () => void;
+    onSelect: (id: string) => void;
+    searchValue?: string;
+    testId?: string;
+    unreadConversations?: Set<string>;
+    variant?: ChatVariant;
+}
+declare function ChatSidebarRoot({ activeConversationId, confirmDeleteId, conversations, deletingId, labels, mobile, onCancelDelete, onClose, onConfirmDelete, onCreate, onOpenActions, onRequestDeleteConfirm, onRequestRename, onSearchChange, onSearchClear, onSelect, searchValue, testId, unreadConversations, variant, }: ChatSidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare const ChatSidebar: typeof ChatSidebarRoot & {
+    Content: {
+        EmptyState: typeof import("@elizaos/app-core").SidebarEmptyState;
+        ItemBody: typeof import("@elizaos/app-core").SidebarItemBody;
+        ItemDescription: typeof import("@elizaos/app-core").SidebarItemDescription;
+        ItemIcon: typeof import("@elizaos/app-core").SidebarItemIcon;
+        ItemAction: typeof import("@elizaos/app-core").SidebarItemAction;
+        ItemButton: React.ForwardRefExoticComponent<import("@elizaos/app-core").SidebarItemButtonProps & React.RefAttributes<HTMLButtonElement>>;
+        ItemTitle: typeof import("@elizaos/app-core").SidebarItemTitle;
+        Toolbar: typeof import("@elizaos/app-core").SidebarToolbar;
+        ToolbarPrimary: typeof import("@elizaos/app-core").SidebarToolbarPrimary;
+        ToolbarActions: typeof import("@elizaos/app-core").SidebarToolbarActions;
+        SectionLabel: typeof import("@elizaos/app-core").SidebarSectionLabel;
+        SectionHeader: typeof import("@elizaos/app-core").SidebarSectionHeader;
+        Notice: typeof import("@elizaos/app-core").SidebarNotice;
+        Item: React.ForwardRefExoticComponent<import("@elizaos/app-core").SidebarItemProps & React.RefAttributes<HTMLElement>>;
+        RailMedia: typeof import("@elizaos/app-core").SidebarRailMedia;
+        RailItem: React.ForwardRefExoticComponent<import("@elizaos/app-core").SidebarRailItemProps & React.RefAttributes<HTMLButtonElement>>;
+    };
+    Item: typeof ChatConversationItem;
+    Panel: typeof SidebarPanel;
+    RenameDialog: typeof ChatConversationRenameDialog;
+    ScrollRegion: typeof SidebarScrollRegion;
+};
+export {};
+//# sourceMappingURL=chat-sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAKL,YAAY,EACZ,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAEjF,OAAO,KAAK,EACV,sBAAsB,EACtB,uBAAuB,EACvB,WAAW,EACZ,MAAM,cAAc,CAAC;AAsBtB,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,aAAa,EAAE,uBAAuB,EAAE,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,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,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,iBAAS,eAAe,CAAC,EACvB,oBAAoB,EACpB,eAAsB,EACtB,aAAa,EACb,UAAiB,EACjB,MAAW,EACX,MAAc,EACd,cAAc,EACd,OAAO,EACP,eAAe,EACf,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,eAAe,EACf,cAAc,EACd,aAAa,EACb,QAAQ,EACR,WAAgB,EAChB,MAAgC,EAChC,mBAAuC,EACvC,OAAmB,GACpB,EAAE,gBAAgB,2CA0IlB;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;CAMtB,CAAC"}

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus } from "lucide-react";
+import { Button } from "../../ui/button";
+import { NewActionButton } from "../../ui/new-action-button";
+import { Sidebar, SidebarCollapsedActionButton, SidebarContent, SidebarHeader, SidebarPanel, SidebarScrollRegion, } from "../sidebar";
+import { ChatConversationItem } from "./chat-conversation-item";
+import { ChatConversationRenameDialog } from "./chat-conversation-rename-dialog";
+import { ChatSourceIcon } from "./chat-source";
+function railMonogram(label) {
+    const words = label.trim().split(/\s+/).filter(Boolean);
+    const initials = words
+        .slice(0, 2)
+        .map((word) => word[0]?.toUpperCase() ?? "")
+        .join("");
+    return (initials || label.slice(0, 1).toUpperCase() || "?").slice(0, 2);
+}
+function renderRailIdentity(conversation) {
+    if (typeof conversation.source === "string" &&
+        conversation.source.trim().length > 0) {
+        return _jsx(ChatSourceIcon, { source: conversation.source, className: "h-4 w-4" });
+    }
+    return railMonogram(conversation.title);
+}
+function ChatSidebarRoot({ activeConversationId, confirmDeleteId = null, conversations, deletingId = null, labels = {}, mobile = false, onCancelDelete, onClose, onConfirmDelete, onCreate, onOpenActions, onRequestDeleteConfirm, onRequestRename, onSearchChange, onSearchClear, onSelect, searchValue = "", testId = "conversations-sidebar", unreadConversations = new Set(), variant = "default", }) {
+    const isGameModal = variant === "game-modal";
+    const canCollapse = !mobile && !isGameModal;
+    const hasSearch = typeof onSearchChange === "function";
+    const searchLabel = labels.searchChats ?? "Search chats";
+    const newChatAction = isGameModal ? (_jsx(Button, { variant: "outline", className: "h-11 w-full rounded-xl border-[color:var(--onboarding-accent-border)] bg-[color:var(--onboarding-accent-bg)] px-3 py-2 text-sm font-medium text-[color:var(--onboarding-text-strong)] shadow-[0_12px_28px_rgba(0,0,0,0.18)] hover:border-[color:var(--onboarding-accent-border-hover)] hover:bg-[color:var(--onboarding-accent-bg-hover)] active:scale-[0.98]", onClick: () => {
+            onCreate();
+            onClose?.();
+        }, children: labels.newChat ?? "New chat" })) : (_jsx(NewActionButton, { onClick: () => {
+            onCreate();
+            onClose?.();
+        }, children: labels.newChat ?? "New chat" }));
+    return (_jsx(Sidebar, { testId: testId, variant: mobile ? "mobile" : isGameModal ? "game-modal" : "default", collapsible: canCollapse, contentIdentity: mobile ? "chat-mobile" : isGameModal ? "chat-modal" : "chat", collapseButtonTestId: "chat-sidebar-collapse-toggle", expandButtonTestId: "chat-sidebar-expand-toggle", collapseButtonAriaLabel: labels.closePanel ?? "Close panel", expandButtonAriaLabel: labels.expandChatsPanel ?? "Expand chats panel", header: hasSearch ? (_jsx(SidebarHeader, { search: {
+                value: searchValue,
+                onChange: onSearchChange,
+                onClear: onSearchClear,
+                placeholder: searchLabel,
+                "aria-label": searchLabel,
+                clearLabel: labels.clearSearch ?? "Clear search",
+                autoComplete: "off",
+                spellCheck: false,
+            } })) : undefined, collapsedRailAction: _jsx(SidebarCollapsedActionButton, { "aria-label": labels.newChat ?? "New chat", onClick: () => {
+                onCreate();
+                onClose?.();
+            }, children: _jsx(Plus, { className: "h-4 w-4" }) }), collapsedRailItems: conversations.map((conversation) => (_jsx(SidebarContent.RailItem, { "aria-label": conversation.title, title: conversation.title, active: conversation.id === activeConversationId, indicatorTone: unreadConversations.has(conversation.id) ? "accent" : undefined, onClick: () => {
+                onSelect(conversation.id);
+                onClose?.();
+            }, children: renderRailIdentity(conversation) }, conversation.id))), onMobileClose: mobile ? onClose : undefined, mobileCloseLabel: labels.closePanel ?? "Close panel", mobileTitle: mobile ? (_jsx(SidebarContent.SectionLabel, { children: labels.chats ?? "Chats" })) : undefined, mobileMeta: mobile ? String(conversations.length) : undefined, "data-no-window-drag": "", "aria-label": labels.chats ?? "Chats", children: _jsx(SidebarScrollRegion, { variant: isGameModal ? "game-modal" : "default", children: _jsxs(SidebarPanel, { variant: isGameModal ? "game-modal" : "default", children: [_jsx("div", { className: "mb-3", children: newChatAction }), conversations.length === 0 ? (_jsx(SidebarContent.EmptyState, { variant: isGameModal ? "game-modal" : "default", className: !isGameModal ? "border-border/50 bg-bg/35" : undefined, children: searchValue.trim()
+                            ? (labels.noMatchingChats ?? "No matching chats")
+                            : (labels.none ?? "No conversations yet") })) : (conversations.map((conversation) => (_jsx(ChatConversationItem, { conversation: conversation, deleting: deletingId === conversation.id, isActive: conversation.id === activeConversationId, isConfirmingDelete: confirmDeleteId === conversation.id, isUnread: unreadConversations.has(conversation.id), labels: labels, mobile: mobile, onCancelDelete: onCancelDelete, onConfirmDelete: () => onConfirmDelete?.(conversation.id), onOpenActions: onOpenActions, onRequestDeleteConfirm: () => onRequestDeleteConfirm?.(conversation.id), onRequestRename: () => onRequestRename?.(conversation), onSelect: () => {
+                            onSelect(conversation.id);
+                            onClose?.();
+                        }, variant: variant }, conversation.id))))] }) }) }));
+}
+export const ChatSidebar = Object.assign(ChatSidebarRoot, {
+    Content: SidebarContent,
+    Item: ChatConversationItem,
+    Panel: SidebarPanel,
+    RenameDialog: ChatConversationRenameDialog,
+    ScrollRegion: SidebarScrollRegion,
+});

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

@@ -0,0 +1,20 @@
+import type * as React from "react";
+type SourceIconProps = {
+    className?: string;
+};
+export type ChatSourceMeta = {
+    badgeClassName: string;
+    borderClassName: string;
+    iconClassName: string;
+    Icon: React.ComponentType<SourceIconProps>;
+    label: string;
+};
+export declare function registerChatSourceMetaEntries(entries: Record<string, ChatSourceMeta>): void;
+export declare function getChatSourceMeta(source: string): ChatSourceMeta;
+export declare function ChatSourceIcon({ source, className, decorative, }: {
+    className?: string;
+    decorative?: boolean;
+    source: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=chat-source.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-source.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-source.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,KAAK,eAAe,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA6GF,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,GACtC,IAAI,CAIN;AAWD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,cAAc,CAWhE;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,EACT,UAAkB,GACnB,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB,2CAmBA"}

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

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Hash, MessageCircleMore, MessageSquareText, MessagesSquare, Phone, Send, Shield, TerminalSquare, } from "lucide-react";
+import { cn } from "../../../lib/utils";
+function DiscordIcon({ className }) {
+    return (_jsx("svg", { "aria-hidden": "true", className: cn("h-4 w-4", className), viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.947 2.418-2.157 2.418z" }) }));
+}
+const SOURCE_META = {
+    eliza: {
+        badgeClassName: "border-accent/30 bg-accent/10 text-accent",
+        borderClassName: "border-accent/60",
+        iconClassName: "text-accent",
+        Icon: TerminalSquare,
+        label: "Terminal",
+    },
+    app: {
+        badgeClassName: "border-accent/30 bg-accent/10 text-accent",
+        borderClassName: "border-accent/60",
+        iconClassName: "text-accent",
+        Icon: TerminalSquare,
+        label: "Terminal",
+    },
+    discord: {
+        badgeClassName: "border-[#5865F2]/30 bg-[#5865F2]/10 text-[#c7cdff]",
+        borderClassName: "border-[#5865F2]/60",
+        iconClassName: "text-[#8ea1ff]",
+        Icon: DiscordIcon,
+        label: "Discord",
+    },
+    "discord-local": {
+        badgeClassName: "border-[#5865F2]/30 bg-[#5865F2]/10 text-[#c7cdff]",
+        borderClassName: "border-[#5865F2]/60",
+        iconClassName: "text-[#8ea1ff]",
+        Icon: DiscordIcon,
+        label: "Discord",
+    },
+    bluebubbles: {
+        badgeClassName: "border-[#34c759]/30 bg-[#34c759]/10 text-[#b6f2c7]",
+        borderClassName: "border-[#34c759]/60",
+        iconClassName: "text-[#34c759]",
+        Icon: MessageCircleMore,
+        label: "iMessage",
+    },
+    imessage: {
+        badgeClassName: "border-[#34c759]/30 bg-[#34c759]/10 text-[#b6f2c7]",
+        borderClassName: "border-[#34c759]/60",
+        iconClassName: "text-[#34c759]",
+        Icon: MessageCircleMore,
+        label: "iMessage",
+    },
+    signal: {
+        badgeClassName: "border-[#3A76F0]/30 bg-[#3A76F0]/10 text-[#bed2ff]",
+        borderClassName: "border-[#3A76F0]/60",
+        iconClassName: "text-[#73a0ff]",
+        Icon: Shield,
+        label: "Signal",
+    },
+    slack: {
+        badgeClassName: "border-[#4A154B]/30 bg-[#4A154B]/10 text-[#dfb9df]",
+        borderClassName: "border-[#4A154B]/60",
+        iconClassName: "text-[#c78bc8]",
+        Icon: Hash,
+        label: "Slack",
+    },
+    sms: {
+        badgeClassName: "border-[#8E8E93]/30 bg-[#8E8E93]/10 text-[#d7d7da]",
+        borderClassName: "border-[#8E8E93]/60",
+        iconClassName: "text-[#c8c8cc]",
+        Icon: MessageSquareText,
+        label: "SMS",
+    },
+    telegram: {
+        badgeClassName: "border-[#229ED9]/30 bg-[#229ED9]/10 text-[#b3e6ff]",
+        borderClassName: "border-[#229ED9]/60",
+        iconClassName: "text-[#63c5ff]",
+        Icon: Send,
+        label: "Telegram",
+    },
+    "telegram-account": {
+        badgeClassName: "border-[#229ED9]/30 bg-[#229ED9]/10 text-[#b3e6ff]",
+        borderClassName: "border-[#229ED9]/60",
+        iconClassName: "text-[#63c5ff]",
+        Icon: Send,
+        label: "Telegram",
+    },
+    wechat: {
+        badgeClassName: "border-[#07C160]/30 bg-[#07C160]/10 text-[#acf0c8]",
+        borderClassName: "border-[#07C160]/60",
+        iconClassName: "text-[#4ed58f]",
+        Icon: MessagesSquare,
+        label: "WeChat",
+    },
+    whatsapp: {
+        badgeClassName: "border-[#25D366]/30 bg-[#25D366]/10 text-[#b3f1c6]",
+        borderClassName: "border-[#25D366]/60",
+        iconClassName: "text-[#4fdf85]",
+        Icon: Phone,
+        label: "WhatsApp",
+    },
+};
+export function registerChatSourceMetaEntries(entries) {
+    for (const [source, meta] of Object.entries(entries)) {
+        SOURCE_META[source.trim().toLowerCase()] = meta;
+    }
+}
+function toTitleCase(source) {
+    return source
+        .trim()
+        .split(/[\s_-]+/)
+        .filter(Boolean)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(" ");
+}
+export function getChatSourceMeta(source) {
+    const normalized = source.trim().toLowerCase();
+    const known = SOURCE_META[normalized];
+    if (known)
+        return known;
+    return {
+        badgeClassName: "border-accent/25 bg-accent/8 text-muted-strong",
+        borderClassName: "border-accent/40",
+        iconClassName: "text-accent/85",
+        Icon: MessageSquareText,
+        label: toTitleCase(source),
+    };
+}
+export function ChatSourceIcon({ source, className, decorative = false, }) {
+    const meta = getChatSourceMeta(source);
+    const Icon = meta.Icon;
+    return (_jsx("span", { "data-testid": "chat-source-icon", "data-source": source.trim().toLowerCase(), className: cn("inline-flex shrink-0 items-center justify-center", meta.iconClassName), ...(decorative
+            ? { "aria-hidden": true }
+            : { "aria-label": meta.label, role: "img", title: meta.label }), children: _jsx(Icon, { className: className }) }));
+}

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { ChatVariant } from "./chat-types";
+export interface ChatThreadLayoutProps extends React.HTMLAttributes<HTMLElement> {
+    composerHeight?: number;
+    composer?: React.ReactNode;
+    footerStack?: React.ReactNode;
+    gameModalComposerGapPx?: number;
+    gameModalMessageBottomFallback?: string;
+    gameModalMessageTop?: string;
+    imageDragOver?: boolean;
+    messagesClassName?: string;
+    messagesRef?: React.Ref<HTMLDivElement>;
+    messagesStyle?: React.CSSProperties;
+    messagesTestId?: string;
+    variant?: ChatVariant;
+}
+export declare const ChatThreadLayout: React.ForwardRefExoticComponent<ChatThreadLayoutProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=chat-thread-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-thread-layout.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-thread-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,2FA+E3B,CAAC"}

package/packages/ui/src/components/composites/chat/chat-thread-layout.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils";
+export const ChatThreadLayout = React.forwardRef(function ChatThreadLayout({ children, className, composerHeight = 0, composer, footerStack, gameModalComposerGapPx = 18, gameModalMessageBottomFallback = "5.25rem", gameModalMessageTop = "calc(-100% + 1.5rem)", imageDragOver = false, messagesClassName, messagesRef, messagesStyle, messagesTestId = "chat-messages-scroll", variant = "default", ...props }, ref) {
+    const isGameModal = variant === "game-modal";
+    const resolvedMessagesStyle = isGameModal
+        ? {
+            zIndex: 1,
+            top: gameModalMessageTop,
+            bottom: composerHeight > 0
+                ? `${composerHeight + gameModalComposerGapPx}px`
+                : gameModalMessageBottomFallback,
+            overscrollBehavior: "contain",
+            touchAction: "pan-y",
+            userSelect: "text",
+            WebkitUserSelect: "text",
+            maskImage: "linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.82) 12%, black 17%, black 100%)",
+            WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.82) 12%, black 17%, black 100%)",
+            ...messagesStyle,
+        }
+        : {
+            zIndex: 1,
+            ...messagesStyle,
+        };
+    return (_jsxs("section", { ref: ref, "aria-label": "Chat workspace", className: cn("relative flex min-h-0 flex-1 flex-col", isGameModal ? "overflow-visible pointer-events-none" : "bg-transparent", imageDragOver && "ring-2 ring-inset ring-accent", className), ...props, children: [_jsx("div", { ref: messagesRef, "data-testid": messagesTestId, "data-no-window-drag": false, "data-no-camera-drag": false, "data-no-camera-zoom": false, className: cn(isGameModal
+                    ? "chat-native-scrollbar absolute inset-x-0 overflow-x-hidden overflow-y-auto pointer-events-auto"
+                    : "chat-native-scrollbar relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto px-3 py-3 sm:px-4 sm:py-4 xl:px-5", messagesClassName), style: resolvedMessagesStyle, children: children }), composer, footerStack] }));
+});

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

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import type { ChatMessageData, ChatMessageLabels, ChatVariant } from "./chat-types";
+export interface ChatTranscriptProps {
+    agentName?: string;
+    carryoverMessages?: ChatMessageData[];
+    carryoverOpacity?: number;
+    labels?: ChatMessageLabels;
+    messages: ChatMessageData[];
+    onCopy?: (text: string) => void;
+    onDelete?: (messageId: string) => void;
+    onEdit?: (messageId: string, text: string) => Promise<boolean> | boolean;
+    onSpeak?: (messageId: string, text: string) => void;
+    renderMessageContent?: (message: ChatMessageData) => React.ReactNode;
+    typingIndicator?: React.ReactNode;
+    userMessagesOnRight?: boolean;
+    variant?: ChatVariant;
+}
+export declare const ChatTranscript: React.NamedExoticComponent<ChatTranscriptProps>;
+//# sourceMappingURL=chat-transcript.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-transcript.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-transcript.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,OAAO,KAAK,EACV,eAAe,EACf,iBAAiB,EACjB,WAAW,EACZ,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,eAAe,EAAE,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACzE,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IACrE,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA0ED,eAAO,MAAM,cAAc,iDAwHzB,CAAC"}