@elizaos/ui 2.0.0-alpha.13 → 2.0.0-alpha.140

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

@@ -0,0 +1,127 @@
+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",
+    },
+};
+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 }), footerStack, composer] }));
+});

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"}

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { ChatBubble } from "./chat-bubble";
+import { ChatMessage } from "./chat-message";
+function renderTranscriptMessageContent(message, renderMessageContent) {
+    return renderMessageContent?.(message) ?? message.text;
+}
+const LEGACY_REPLY_REFERENCE_RE = /^Referencing MessageID ([0-9a-f-]{36})(?: \([^)]+\))?(?: in channel .*)?(?: in guild .*)?$/i;
+function normalizeTranscriptMessage(message) {
+    const rawText = typeof message.text === "string" ? message.text : "";
+    const lines = rawText.split(/\r?\n/);
+    let extractedReplyToMessageId = typeof message.replyToMessageId === "string" &&
+        message.replyToMessageId.trim().length > 0
+        ? message.replyToMessageId.trim()
+        : "";
+    let removedLegacyReference = false;
+    const cleanedLines = lines.filter((line) => {
+        const match = line.trim().match(LEGACY_REPLY_REFERENCE_RE);
+        if (!match) {
+            return true;
+        }
+        if (!extractedReplyToMessageId) {
+            extractedReplyToMessageId = match[1];
+        }
+        removedLegacyReference = true;
+        return false;
+    });
+    const cleanedText = removedLegacyReference
+        ? cleanedLines
+            .join("\n")
+            .replace(/\n{3,}/g, "\n\n")
+            .trimEnd()
+        : rawText;
+    if (cleanedText === rawText &&
+        extractedReplyToMessageId === (message.replyToMessageId ?? "")) {
+        return message;
+    }
+    return {
+        ...message,
+        text: cleanedText,
+        ...(extractedReplyToMessageId
+            ? { replyToMessageId: extractedReplyToMessageId }
+            : {}),
+    };
+}
+function getMessageGroupingKey(message) {
+    if (message.role !== "user") {
+        return message.role;
+    }
+    const source = message.source?.trim().toLowerCase() ?? "";
+    const senderName = message.from?.trim().toLowerCase() ?? "";
+    const senderHandle = message.fromUserName?.trim().toLowerCase() ?? "";
+    const avatarUrl = message.avatarUrl?.trim() ?? "";
+    if (!source && !senderName && !senderHandle && !avatarUrl) {
+        return "user";
+    }
+    return `user:${source}|${senderName}|${senderHandle}|${avatarUrl}`;
+}
+export const ChatTranscript = memo(function ChatTranscript({ agentName = "Agent", carryoverMessages = [], carryoverOpacity = 1, labels, messages, onCopy, onDelete, onEdit, onSpeak, renderMessageContent, typingIndicator, userMessagesOnRight = true, variant = "default", }) {
+    const normalizedMessages = messages.map(normalizeTranscriptMessage);
+    if (variant === "game-modal") {
+        return (_jsxs("div", { className: "flex min-h-full w-full flex-col justify-end gap-4 px-1 py-4", children: [carryoverMessages.map((message) => {
+                    const isUser = message.role === "user";
+                    return (_jsx("div", { "data-testid": "companion-message-row", "data-companion-carryover": "true", className: `flex w-full ${isUser ? "justify-end" : "justify-start"}`, style: { opacity: carryoverOpacity }, children: _jsx(ChatBubble, { tone: isUser ? "user" : "assistant", className: `max-w-[min(85%,24rem)] rounded-2xl px-4 py-3 text-[15px] leading-relaxed backdrop-blur-md ${isUser ? "rounded-br-sm" : "rounded-bl-sm"}`, children: _jsx("div", { className: "break-words", style: { fontFamily: "var(--font-chat)" }, children: renderTranscriptMessageContent(message, renderMessageContent) }) }) }, `carryover-${message.id}`));
+                }), normalizedMessages.map((message) => {
+                    const isUser = message.role === "user";
+                    return (_jsx("div", { "data-testid": "companion-message-row", className: `flex w-full ${isUser ? "justify-end" : "justify-start"}`, children: _jsx(ChatBubble, { tone: isUser ? "user" : "assistant", className: `max-w-[min(85%,24rem)] rounded-2xl px-4 py-3 text-[15px] leading-relaxed backdrop-blur-md ${isUser ? "rounded-br-sm" : "rounded-bl-sm"}`, children: _jsx("div", { className: "break-words", style: { fontFamily: "var(--font-chat)" }, children: renderTranscriptMessageContent(message, renderMessageContent) }) }) }, message.id));
+                }), typingIndicator] }));
+    }
+    return (_jsxs("div", { className: "w-full space-y-1.5", children: [normalizedMessages.map((message, index) => {
+                const replyTarget = typeof message.replyToMessageId === "string" &&
+                    message.replyToMessageId.length > 0
+                    ? (normalizedMessages.find((candidate) => candidate.id === message.replyToMessageId) ?? null)
+                    : null;
+                const previousMessage = index > 0 ? normalizedMessages[index - 1] : null;
+                const isGrouped = previousMessage?.role === message.role &&
+                    previousMessage != null &&
+                    getMessageGroupingKey(previousMessage) ===
+                        getMessageGroupingKey(message);
+                return (_jsx(ChatMessage, { message: message, isGrouped: isGrouped, agentName: agentName, labels: labels, onCopy: onCopy, onDelete: onDelete, onEdit: onEdit, onSpeak: onSpeak, replyTarget: replyTarget, userMessagesOnRight: userMessagesOnRight, children: renderTranscriptMessageContent(message, renderMessageContent) }, message.id));
+            }), typingIndicator] }));
+});

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

@@ -0,0 +1,90 @@
+export type ChatVariant = "default" | "game-modal";
+export interface ChatLabelSet {
+    agentStarting?: string;
+    agentVoiceOff?: string;
+    agentVoiceOn?: string;
+    attachImage?: string;
+    cancel?: string;
+    clearSearch?: string;
+    chatIconLabel?: string;
+    chats?: string;
+    closePanel?: string;
+    copied?: string;
+    copiedAria?: string;
+    copy?: string;
+    delete?: string;
+    deleteConfirm?: string;
+    deleteNo?: string;
+    deleteYes?: string;
+    edit?: string;
+    expandChatsPanel?: string;
+    inputPlaceholder?: string;
+    inputPlaceholderNarrow?: string;
+    listening?: string;
+    micTitleIdleEnhanced?: string;
+    micTitleIdleStandard?: string;
+    newChat?: string;
+    none?: string;
+    noMatchingChats?: string;
+    play?: string;
+    releaseToSend?: string;
+    rename?: string;
+    responseInterrupted?: string;
+    saveAndResend?: string;
+    searchChats?: string;
+    saving?: string;
+    send?: string;
+    sendMessageTo?: string;
+    startConversation?: string;
+    stopGeneration?: string;
+    stopListening?: string;
+    stopSpeaking?: string;
+    toBeginChatting?: string;
+    voiceInput?: string;
+}
+export interface ChatAttachmentItem {
+    alt: string;
+    id: string;
+    name: string;
+    src: string;
+}
+export interface ChatMessageReaction {
+    emoji: string;
+    count: number;
+    users?: string[];
+}
+export interface ChatMessageData {
+    avatarUrl?: string;
+    from?: string;
+    fromUserName?: string;
+    id: string;
+    interrupted?: boolean;
+    reactions?: ChatMessageReaction[];
+    replyToMessageId?: string;
+    replyToSenderName?: string;
+    replyToSenderUserName?: string;
+    role: string;
+    source?: string;
+    text: string;
+}
+export interface ChatMessageLabels extends ChatLabelSet {
+}
+export interface ChatConversationSummary {
+    avatarUrl?: string;
+    id: string;
+    title: string;
+    updatedAtLabel?: string;
+    /**
+     * Optional connector source tag (e.g. "imessage", "telegram",
+     * "discord", "whatsapp"). When set, the conversation item renders
+     * a brand-colored channel pill next to the title so cross-channel
+     * threads in a unified sidebar are visually distinct from the
+     * agent's own dashboard conversations. Unknown sources fall back
+     * to a neutral accent pill; dashboard conversations leave this
+     * unset and get no pill at all.
+     */
+    source?: string;
+}
+export interface ChatConversationLabels extends ChatLabelSet {
+}
+//# sourceMappingURL=chat-types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-types.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import type { ChatVariant } from "./chat-types";
+export interface TypingIndicatorProps {
+    agentAvatarSrc?: string | null;
+    agentName: string;
+    className?: string;
+    dotClassName?: string;
+    variant?: ChatVariant;
+}
+export declare function TypingIndicator({ agentAvatarSrc, agentName, className, dotClassName, variant, }: TypingIndicatorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chat-typing-indicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-typing-indicator.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-typing-indicator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,WAAW,oBAAoB;IACnC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,SAAS,EACT,SAAS,EACT,YAAY,EACZ,OAAmB,GACpB,EAAE,oBAAoB,2CA8DtB"}

package/packages/ui/src/components/composites/chat/chat-typing-indicator.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatBubble } from "./chat-bubble";
+export function TypingIndicator({ agentAvatarSrc, agentName, className, dotClassName, variant = "default", }) {
+    if (variant === "game-modal") {
+        return (_jsx("div", { className: className ?? "flex w-full justify-start", children: _jsx(ChatBubble, { tone: "assistant", className: "flex max-w-[min(85%,24rem)] items-center gap-1 rounded-2xl rounded-bl-sm px-4 py-3 backdrop-blur-md", children: [0, 150, 300].map((delay) => (_jsx("span", { className: dotClassName ??
+                        "h-1.5 w-1.5 rounded-full bg-[color:color-mix(in_srgb,var(--muted)_82%,transparent)] animate-bounce", style: { animationDelay: `${delay}ms` } }, delay))) }) }));
+    }
+    const agentInitial = agentName.trim().charAt(0).toUpperCase() || "A";
+    return (_jsxs("div", { className: className ?? "mt-4 flex items-start gap-2 sm:gap-3", children: [_jsx("div", { className: "h-8 w-8 shrink-0 overflow-hidden rounded-full border border-border bg-bg-hover shadow-sm", children: agentAvatarSrc ? (_jsx("img", { src: agentAvatarSrc, alt: `${agentName} avatar`, className: "h-full w-full object-cover" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-accent-subtle text-xs-tight font-bold text-accent", children: agentInitial })) }), _jsxs("div", { className: "min-w-0 max-w-[88%] sm:max-w-[80%]", children: [_jsx("div", { className: "mb-1 text-xs font-semibold text-accent", children: agentName }), _jsx("div", { className: "rounded-2xl rounded-bl-md border border-border bg-bg-accent px-4 py-3", children: _jsx("div", { className: "flex gap-1", children: [0, 200, 400].map((delay) => (_jsx("span", { className: dotClassName ??
+                                    "h-2 w-2 rounded-full bg-muted-strong animate-[typing-bounce_1.2s_ease-in-out_infinite]", style: { animationDelay: `${delay}ms` } }, delay))) }) })] })] }));
+}

package/packages/ui/src/components/composites/chat/create-task-popover.d.ts

@@ -0,0 +1,8 @@
+export interface CreateTaskPopoverProps {
+    chatInput: string;
+    disabled: boolean;
+    onCreateTask: (description: string, agentType: string) => void;
+    t: (key: string, options?: Record<string, unknown>) => string;
+}
+export declare function CreateTaskPopover({ chatInput, disabled, onCreateTask, t, }: CreateTaskPopoverProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=create-task-popover.d.ts.map

package/packages/ui/src/components/composites/chat/create-task-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-task-popover.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/create-task-popover.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;CAC/D;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,CAAC,GACF,EAAE,sBAAsB,2CAgHxB"}

package/packages/ui/src/components/composites/chat/create-task-popover.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code2, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "../../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../ui/select";
+import { Textarea } from "../../ui/textarea";
+const DEFAULT_AGENT_TYPES = ["claude", "gemini", "codex", "aider"];
+export function CreateTaskPopover({ chatInput, disabled, onCreateTask, t, }) {
+    const [open, setOpen] = useState(false);
+    const [description, setDescription] = useState("");
+    const [agentType, setAgentType] = useState("claude");
+    const previouslyOpenRef = useRef(false);
+    useEffect(() => {
+        if (open && !previouslyOpenRef.current && chatInput.trim()) {
+            setDescription(chatInput.trim());
+        }
+        previouslyOpenRef.current = open;
+    }, [chatInput, open]);
+    const handleCreate = useCallback(() => {
+        const trimmedDescription = description.trim();
+        if (!trimmedDescription) {
+            return;
+        }
+        onCreateTask(trimmedDescription, agentType);
+        setDescription("");
+        setAgentType("claude");
+        setOpen(false);
+    }, [agentType, description, onCreateTask]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "surface", size: "icon", className: "h-[46px] w-[46px] shrink-0", disabled: disabled, "aria-label": t("chat.createTask", {
+                        defaultValue: "Create coding task",
+                    }), title: t("chat.createTask", {
+                        defaultValue: "Create coding task",
+                    }), children: _jsx(Code2, { className: "h-4 w-4" }) }) }), _jsx(PopoverContent, { side: "top", align: "end", sideOffset: 8, className: "w-80 p-0", children: _jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-medium text-txt-strong", children: t("chat.createTaskTitle", {
+                                        defaultValue: "Create Coding Task",
+                                    }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => setOpen(false), "aria-label": t("common.close", { defaultValue: "Close" }), children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }), _jsx(Textarea, { value: description, onChange: (event) => setDescription(event.target.value), placeholder: t("chat.taskDescriptionPlaceholder", {
+                                defaultValue: "Describe what to build...",
+                            }), className: "min-h-[80px] resize-none text-sm", onKeyDown: (event) => {
+                                if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                                    event.preventDefault();
+                                    handleCreate();
+                                }
+                            } }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "chat-task-agent-type", className: "text-xs text-muted-foreground", children: t("chat.agentType", { defaultValue: "Agent" }) }), _jsxs(Select, { value: agentType, onValueChange: (value) => setAgentType(value), children: [_jsx(SelectTrigger, { id: "chat-task-agent-type", className: "h-9 text-sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: DEFAULT_AGENT_TYPES.map((type) => (_jsx(SelectItem, { value: type, children: type.charAt(0).toUpperCase() + type.slice(1) }, type))) })] })] }), _jsx(Button, { onClick: handleCreate, disabled: !description.trim(), children: t("chat.createTaskButton", { defaultValue: "Create" }) })] }) })] }));
+}

package/packages/ui/src/components/composites/chat/index.d.ts

@@ -0,0 +1,17 @@
+export * from "./chat-attachment-strip";
+export * from "./chat-bubble";
+export * from "./chat-composer";
+export * from "./chat-composer-shell";
+export * from "./chat-conversation-item";
+export * from "./chat-conversation-rename-dialog";
+export * from "./chat-empty-state";
+export * from "./chat-message";
+export * from "./chat-message-actions";
+export * from "./chat-sidebar";
+export * from "./chat-source";
+export * from "./chat-thread-layout";
+export * from "./chat-transcript";
+export * from "./chat-types";
+export * from "./chat-typing-indicator";
+export * from "./create-task-popover";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}

package/packages/ui/src/components/composites/chat/index.js

@@ -0,0 +1,16 @@
+export * from "./chat-attachment-strip";
+export * from "./chat-bubble";
+export * from "./chat-composer";
+export * from "./chat-composer-shell";
+export * from "./chat-conversation-item";
+export * from "./chat-conversation-rename-dialog";
+export * from "./chat-empty-state";
+export * from "./chat-message";
+export * from "./chat-message-actions";
+export * from "./chat-sidebar";
+export * from "./chat-source";
+export * from "./chat-thread-layout";
+export * from "./chat-transcript";
+export * from "./chat-types";
+export * from "./chat-typing-indicator";
+export * from "./create-task-popover";

package/packages/ui/src/components/composites/form-field/form-field.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Label text shown above the field. */
+    label?: React.ReactNode;
+    /** Optional description below the label. */
+    description?: React.ReactNode;
+    /** Validation error messages. */
+    errors?: readonly string[];
+    /** Density controls spacing and text size. */
+    density?: "default" | "compact" | "relaxed";
+}
+declare function FormField({ label, description, errors, density, className, children, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export { FormField };
+//# sourceMappingURL=form-field.d.ts.map

package/packages/ui/src/components/composites/form-field/form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/form-field/form-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AASpC,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iCAAiC;IACjC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;CAC7C;AAED,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAmB,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CA6BhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/packages/ui/src/components/composites/form-field/form-field.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+import { Field, FieldDescription, FieldLabel, FieldMessage, } from "../../ui/field";
+function FormField({ label, description, errors, density = "default", className, children, ...props }) {
+    const isCompact = density === "compact";
+    return (_jsxs(Field, { className: cn(isCompact ? "gap-1.5" : "space-y-2", className), ...props, children: [label && (_jsx(FieldLabel, { className: cn(isCompact && "text-xs font-semibold text-txt"), children: label })), description && (_jsx(FieldDescription, { className: cn(isCompact && "text-xs-tight text-muted"), children: description })), children, errors?.map((err) => (_jsx(FieldMessage, { tone: "danger", children: err }, err)))] }));
+}
+export { FormField };

package/packages/ui/src/components/composites/form-field/index.d.ts

@@ -0,0 +1,2 @@
+export { FormField, type FormFieldProps } from "./form-field";
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/src/components/composites/form-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/form-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/packages/ui/src/components/composites/form-field/index.js

@@ -0,0 +1 @@
+export { FormField } from "./form-field";

package/packages/ui/src/components/composites/index.d.ts

@@ -0,0 +1,27 @@
+export * from "../ui/admin-dialog";
+export * from "../ui/banner";
+export * from "../ui/confirm-delete";
+export * from "../ui/confirm-dialog";
+export * from "../ui/connection-status";
+export * from "../ui/copy-button";
+export * from "../ui/empty-state";
+export * from "../ui/error-boundary";
+export * from "../ui/field";
+export * from "../ui/field-switch";
+export * from "../ui/form-select";
+export * from "../ui/new-action-button";
+export * from "../ui/save-footer";
+export * from "../ui/section-card";
+export * from "../ui/segmented-control";
+export * from "../ui/settings-controls";
+export * from "../ui/status-badge";
+export * from "../ui/themed-select";
+export * from "../ui/tooltip-extended";
+export * from "./chat";
+export * from "./form-field";
+export * from "./page-panel";
+export * from "./search";
+export * from "./sidebar";
+export * from "./skills";
+export * from "./trajectories";
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/src/components/composites/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/composites/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/packages/ui/src/components/composites/index.js

@@ -0,0 +1,26 @@
+export * from "../ui/admin-dialog";
+export * from "../ui/banner";
+export * from "../ui/confirm-delete";
+export * from "../ui/confirm-dialog";
+export * from "../ui/connection-status";
+export * from "../ui/copy-button";
+export * from "../ui/empty-state";
+export * from "../ui/error-boundary";
+export * from "../ui/field";
+export * from "../ui/field-switch";
+export * from "../ui/form-select";
+export * from "../ui/new-action-button";
+export * from "../ui/save-footer";
+export * from "../ui/section-card";
+export * from "../ui/segmented-control";
+export * from "../ui/settings-controls";
+export * from "../ui/status-badge";
+export * from "../ui/themed-select";
+export * from "../ui/tooltip-extended";
+export * from "./chat";
+export * from "./form-field";
+export * from "./page-panel";
+export * from "./search";
+export * from "./sidebar";
+export * from "./skills";
+export * from "./trajectories";