@elizaos/ui 2.0.0-alpha.17 → 2.0.0-alpha.171

package/package.json

@@ -1,51 +1,95 @@
 {
   "name": "@elizaos/ui",
-  "version": "2.0.0-alpha.17",
-  "description": "Reusable UI primitives and components for elizaOS applications.",
+  "version": "2.0.0-alpha.171",
+  "description": "Shared UI primitives, composites, and layout utilities for elizaOS apps.",
   "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "license": "MIT",
-  "homepage": "https://elizaos.ai",
+  "homepage": "https://github.com/elizaOS/eliza",
   "repository": {
     "type": "git",
-    "url": "https://github.com/elizaos/eliza.git",
+    "url": "https://github.com/elizaOS/eliza.git",
     "directory": "packages/ui"
   },
   "keywords": [
     "elizaos",
     "ui",
     "react",
-    "components"
+    "design-system"
   ],
-  "scripts": {
-    "clean": "rm -rf dist && find src -type f \\( -name '*.js' -o -name '*.d.ts' -o -name '*.d.ts.map' -o -name '*.js.map' \\) -delete",
-    "build": "bun run build:dist",
-    "build:dist": "find src -type f \\( -name '*.js' -o -name '*.d.ts' -o -name '*.d.ts.map' -o -name '*.js.map' \\) -delete && rm -rf dist && tsc -p tsconfig.build.json && find src -type f \\( -name '*.js' -o -name '*.d.ts' -o -name '*.d.ts.map' -o -name '*.js.map' \\) -delete && node ../../scripts/copy-package-assets.mjs packages/ui src/styles && node ../../scripts/prepare-package-dist.mjs packages/ui",
-    "typecheck": "tsc --noEmit -p tsconfig.json",
-    "lint": "bunx @biomejs/biome check --write ./src/index.ts ./src/lib ./src/components ./src/stories",
-    "lint:check": "bunx @biomejs/biome check ./src/index.ts ./src/lib ./src/components ./src/stories",
-    "pack:dry-run": "cd dist && npm pack --dry-run",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
+  "main": "./packages/ui/src/index.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./packages/ui/src/index.d.ts",
+      "import": "./packages/ui/src/index.js",
+      "default": "./packages/ui/src/index.js"
+    },
+    "./components/*": {
+      "types": "./packages/ui/src/components/*.d.ts",
+      "import": "./packages/ui/src/components/*.js",
+      "default": "./packages/ui/src/components/*.js"
+    },
+    "./components/*/*": {
+      "types": "./packages/ui/src/components/*/*.d.ts",
+      "import": "./packages/ui/src/components/*/*.js",
+      "default": "./packages/ui/src/components/*/*.js"
+    },
+    "./components/*/*/*": {
+      "types": "./packages/ui/src/components/*/*/*.d.ts",
+      "import": "./packages/ui/src/components/*/*/*.js",
+      "default": "./packages/ui/src/components/*/*/*.js"
+    },
+    "./components/ui/*": {
+      "types": "./packages/ui/src/components/ui/*.tsx.d.ts",
+      "import": "./packages/ui/src/components/ui/*.tsx.js",
+      "default": "./packages/ui/src/components/ui/*.tsx.js"
+    },
+    "./components/composites/page-panel": {
+      "types": "./packages/ui/src/components/composites/page-panel/index.d.ts",
+      "import": "./packages/ui/src/components/composites/page-panel/index.js",
+      "default": "./packages/ui/src/components/composites/page-panel/index.js"
+    },
+    "./components/composites/*": {
+      "types": "./packages/ui/src/components/composites/*.d.ts",
+      "import": "./packages/ui/src/components/composites/*.js",
+      "default": "./packages/ui/src/components/composites/*.js"
+    },
+    "./components/composites/*/*": {
+      "types": "./packages/ui/src/components/composites/*/*.tsx.d.ts",
+      "import": "./packages/ui/src/components/composites/*/*.tsx.js",
+      "default": "./packages/ui/src/components/composites/*/*.tsx.js"
     },
-    "./utils": {
-      "types": "./dist/lib/utils.d.ts",
-      "import": "./dist/lib/utils.js"
+    "./hooks": {
+      "types": "./packages/ui/src/hooks/index.d.ts",
+      "import": "./packages/ui/src/hooks/index.js",
+      "default": "./packages/ui/src/hooks/index.js"
+    },
+    "./hooks/*": {
+      "types": "./packages/ui/src/hooks/*.d.ts",
+      "import": "./packages/ui/src/hooks/*.js",
+      "default": "./packages/ui/src/hooks/*.js"
+    },
+    "./layouts": {
+      "types": "./packages/ui/src/layouts/index.d.ts",
+      "import": "./packages/ui/src/layouts/index.js",
+      "default": "./packages/ui/src/layouts/index.js"
+    },
+    "./layouts/*": {
+      "types": "./packages/ui/src/layouts/*.d.ts",
+      "import": "./packages/ui/src/layouts/*.js",
+      "default": "./packages/ui/src/layouts/*.js"
+    },
+    "./lib/*": {
+      "types": "./packages/ui/src/lib/*.d.ts",
+      "import": "./packages/ui/src/lib/*.js",
+      "default": "./packages/ui/src/lib/*.js"
+    },
+    "./styles/*": {
+      "types": "./packages/ui/src/styles/*.d.ts",
+      "import": "./packages/ui/src/styles/*.js",
+      "default": "./packages/ui/src/styles/*.js"
     },
-    "./styles/theme.css": "./src/styles/theme.css",
     "./package.json": "./package.json"
   },
-  "files": [
-    "dist",
-    "src/styles/theme.css",
-    "README.md"
-  ],
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -66,29 +110,12 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.575.0",
-    "next-themes": "^0.4.6",
     "sonner": "^2.0.7",
     "tailwind-merge": "^2.6.0"
   },
   "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/blocks": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-vite": "8.6.14",
-    "@storybook/test": "8.6.14",
-    "@tailwindcss/vite": "^4.2.1",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "storybook": "8.6.17",
-    "tailwindcss": "^4.1.18",
-    "typescript": "^5.9.3"
-  },
-  "author": "elizaOS Team",
-  "engines": {
-    "node": ">=18.0.0"
+    "access": "public",
+    "directory": "dist"
   },
-  "gitHead": "b4c4389e588bb5d3c8671e2527056e2375718cb1"
+  "types": "./packages/ui/src/index.d.ts"
 }

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

@@ -0,0 +1,9 @@
+import type { ChatAttachmentItem, ChatVariant } from "./chat-types";
+export interface ChatAttachmentStripProps {
+    items: ChatAttachmentItem[];
+    onRemove: (id: string, index: number) => void;
+    removeLabel?: (item: ChatAttachmentItem) => string;
+    variant?: ChatVariant;
+}
+export declare function ChatAttachmentStrip({ items, onRemove, removeLabel, variant, }: ChatAttachmentStripProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=chat-attachment-strip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-attachment-strip.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-attachment-strip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,MAAM,CAAC;IACnD,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,WAAmD,EACnD,OAAmB,GACpB,EAAE,wBAAwB,kDAoC1B"}

package/packages/ui/src/components/composites/chat/chat-attachment-strip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../ui/button";
+export function ChatAttachmentStrip({ items, onRemove, removeLabel = (item) => `Remove image ${item.name}`, variant = "default", }) {
+    if (items.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: `relative flex flex-wrap gap-2 py-1 ${variant === "game-modal" ? "pointer-events-auto" : ""}`, "data-no-camera-drag": variant === "game-modal" || undefined, style: { zIndex: 1 }, children: items.map((item, index) => (_jsxs("div", { className: "relative h-16 w-16 shrink-0 group", children: [_jsx("img", { src: item.src, alt: item.alt, className: "h-16 w-16 rounded border border-border object-cover" }), _jsx(Button, { variant: variant === "game-modal" ? "surfaceDestructive" : "destructive", size: "icon", title: removeLabel(item), "aria-label": removeLabel(item), onClick: () => onRemove(item.id, index), className: "absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full text-2xs opacity-100 transition-opacity focus-visible:opacity-100 sm:opacity-0 sm:group-hover:opacity-100", children: "\u00D7" })] }, item.id))) }));
+}

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

@@ -0,0 +1,14 @@
+import type * as React from "react";
+export type ChatBubbleTone = "assistant" | "user";
+export interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
+    tone?: ChatBubbleTone;
+    /**
+     * Source channel the message came from (e.g. "imessage", "telegram",
+     * "discord", "whatsapp"). When set, the bubble renders a connector-
+     * colored outline so cross-channel messages stay visually distinct
+     * without adding a repeated text badge above every message.
+     */
+    source?: string;
+}
+export declare function ChatBubble({ tone, source, className, ...props }: ChatBubbleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chat-bubble.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-bubble.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/chat/chat-bubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAkB,EAClB,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,2CAsBjB"}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+import { getChatSourceMeta } from "./chat-source";
+export function ChatBubble({ tone = "assistant", source, className, ...props }) {
+    const normalizedSource = typeof source === "string" && source.trim().toLowerCase() !== "app"
+        ? source
+        : undefined;
+    const sourceBorderClass = normalizedSource
+        ? getChatSourceMeta(normalizedSource).borderClassName
+        : null;
+    return (_jsx("div", { className: cn("relative border whitespace-pre-wrap break-words", tone === "user"
+            ? "border border-accent/24 bg-[linear-gradient(180deg,rgba(var(--accent-rgb),0.14),rgba(var(--accent-rgb),0.05))] text-txt-strong shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_18px_26px_-24px_rgba(var(--accent-rgb),0.18)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_20px_28px_-24px_rgba(0,0,0,0.22)]"
+            : "border border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_18px_26px_-24px_rgba(15,23,42,0.1)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_20px_28px_-24px_rgba(0,0,0,0.22)]", sourceBorderClass ? `border-2 ${sourceBorderClass}` : null, className), "data-chat-source": normalizedSource ?? undefined, ...props }));
+}

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

@@ -0,0 +1,10 @@
+import type * as React from "react";
+import type { ChatVariant } from "./chat-types";
+export interface ChatComposerShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    before?: React.ReactNode;
+    children: React.ReactNode;
+    shellRef?: React.Ref<HTMLDivElement>;
+    variant?: ChatVariant;
+}
+export declare function ChatComposerShell({ before, children, className, shellRef, style, variant, ...props }: ChatComposerShellProps): import("react/jsx-runtime").JSX.Element;
+//# 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,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,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC,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,2CAkDxB"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+export function ChatComposerShell({ before, children, className, shellRef, style, variant = "default", ...props }) {
+    if (variant === "game-modal") {
+        return (_jsxs("div", { ref: shellRef, 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) + 0.25rem)",
+                ...style,
+            }, ...props, children: [before, _jsxs("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", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 rounded-full border border-border/26 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_72%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_20px_52px_rgba(15,23,42,0.18)] ring-1 ring-inset ring-white/8 backdrop-blur-[22px] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_24px_58px_rgba(0,0,0,0.36)]" }), _jsx("div", { className: "relative z-[1] flex w-full items-center", children: children })] })] }));
+    }
+    return (_jsxs("div", { ref: shellRef, className: cn("relative bg-transparent px-3 pb-3 pt-3 sm:px-4 sm:pb-4 xl:px-5", className), style: {
+            zIndex: 1,
+            paddingBottom: "calc(var(--safe-area-bottom, 0px) + 0.75rem)",
+            ...style,
+        }, ...props, children: [before, children] }));
+}

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

@@ -0,0 +1,39 @@
+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;
+    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;
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
+    variant: ChatVariant;
+    voice: ChatComposerVoiceState;
+    codingAgentsAvailable?: boolean;
+    onCreateTask?: (description: string, agentType: string) => void;
+}
+export declare function ChatComposer({ variant, textareaRef, chatInput, chatPendingImagesCount, isComposerLocked, isAgentStarting, chatSending, voice, agentVoiceEnabled, showAgentVoiceToggle, t, onAttachImage, onChatInputChange, onKeyDown, onSend, onStop, onStopSpeaking, onToggleAgentVoice, codingAgentsAvailable, onCreateTask, }: 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":"AACA,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,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,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;CACjE;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,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,GACb,EAAE,iBAAiB,2CAwSnB"}

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

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, Paperclip, 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, textareaRef, chatInput, chatPendingImagesCount, isComposerLocked, isAgentStarting, chatSending, voice, agentVoiceEnabled, showAgentVoiceToggle = true, t, onAttachImage, onChatInputChange, onKeyDown, onSend, onStop, onStopSpeaking, onToggleAgentVoice, codingAgentsAvailable = false, onCreateTask, }) {
+    const [isNarrow, setIsNarrow] = useState(() => typeof window !== "undefined" && window.innerWidth < 310);
+    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 showVoiceButton = isGameModal || voice.supported;
+    const defaultMicButtonVariant = voice.isListening
+        ? "surfaceAccent"
+        : "surface";
+    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 defaultTextareaPlaceholder = isAgentStarting
+        ? t("chat.agentStarting")
+        : voice.isListening
+            ? voice.captureMode === "push-to-talk"
+                ? t("chat.releaseToSend")
+                : !chatInput.trim()
+                    ? t("chat.listening")
+                    : inputPlaceholder
+            : inputPlaceholder;
+    useEffect(() => {
+        return () => {
+            if (holdTimerRef.current) {
+                clearTimeout(holdTimerRef.current);
+                holdTimerRef.current = null;
+            }
+        };
+    }, []);
+    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");
+    };
+    return (_jsxs("div", { className: isGameModal
+            ? "relative flex w-full items-end gap-2 transition-all max-[380px]:gap-1.5"
+            : "flex items-end gap-1.5 sm:gap-2", children: [!isGameModal ? (_jsx(Button, { variant: chatPendingImagesCount > 0 ? "surfaceAccent" : "surface", size: "icon", className: `h-[46px] w-[46px] shrink-0 ${chatPendingImagesCount > 0 ? "ring-1 ring-inset ring-accent/25" : ""}`, onClick: onAttachImage, "aria-label": t("aria.attachImage"), title: t("chatview.AttachImage"), disabled: isComposerLocked, children: _jsx(Paperclip, { className: "h-4 w-4" }) })) : null, !isGameModal && codingAgentsAvailable && onCreateTask && (_jsx(CreateTaskPopover, { chatInput: chatInput, disabled: isComposerLocked, onCreateTask: onCreateTask, t: t })), showVoiceButton ? (_jsx(Button, { variant: isGameModal ? "ghost" : defaultMicButtonVariant, 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-[46px] w-[46px] shrink-0", 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: 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"), disabled: isComposerLocked, children: _jsx(Mic, { className: isGameModal ? "h-5 w-5" : "h-4 w-4" }) })) : 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", 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"
+                            : "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-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_82%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] px-4 py-[13px] text-[15px] leading-[1.55] text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_18px_24px_-22px_rgba(15,23,42,0.12)] placeholder:text-muted", placeholder: defaultTextareaPlaceholder, rows: 1, disabled: isComposerLocked }), voice.isListening && voice.interimTranscript ? (_jsx("div", { className: "pointer-events-none absolute inset-x-4 bottom-2.5 truncate text-xs-tight text-muted", children: voice.interimTranscript })) : null] }), 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: "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: 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: "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: "h-4 w-4" }) })) : (_jsx(Button, { variant: isGameModal ? "default" : "surfaceAccent", "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"}`
+                    : "ml-1 flex items-center justify-center rounded-full transition-all duration-300 select-none active:scale-95 h-[46px] w-[46px] shrink-0 border-accent/26 disabled:ring-0", onClick: onSend, disabled: isComposerLocked || (!hasDraft && !chatSending), title: actionButtonLabel, "aria-label": actionButtonLabel, children: _jsx(Send, { className: isGameModal ? "h-4.5 w-4.5" : "h-4 w-4" }) }))] }));
+}

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;AAc/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,2CAqM3B"}

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

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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";
+import { PagePanel } from "../page-panel";
+import { ChatSourceIcon } from "./chat-source";
+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-semibold leading-[1.2] tracking-[-0.01em] transition-colors ${isActive
+                ? "text-txt"
+                : "text-[color:color-mix(in_srgb,var(--text-strong)_88%,var(--text)_12%)] 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 conversationSource = typeof conversation.source === "string" && conversation.source.trim()
+        ? conversation.source
+        : null;
+    const showInlineActions = isGameModal;
+    const showSourceBadge = !isGameModal &&
+        conversationSource !== null &&
+        conversationSource.trim().toLowerCase() !== "app";
+    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-start justify-start gap-3 rounded-2xl border px-3.5 py-3.5 text-left transition-[border-color,background-color,color,box-shadow,transform] duration-150 focus-within:ring-2 focus-within:ring-accent/35 ${isActive
+                ? "border-accent/26 bg-[linear-gradient(180deg,rgba(var(--accent-rgb),0.18),rgba(var(--accent-rgb),0.08))] text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_18px_24px_-22px_rgba(var(--accent-rgb),0.22)] ring-1 ring-inset ring-accent/10 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.05),0_18px_28px_-22px_rgba(0,0,0,0.26),0_0_0_1px_rgba(var(--accent-rgb),0.12)]"
+                : "border-border/10 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_18%,transparent),transparent)] text-muted shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:border-border/28 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_28%,transparent),transparent)] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_14px_20px_-22px_rgba(15,23,42,0.12)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.02)] dark:hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_14px_22px_-22px_rgba(0,0,0,0.22)]"}`, 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-start gap-3 overflow-hidden rounded-none border-0 bg-transparent p-0 text-left hover:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 ${showSourceBadge ? "pr-8" : ""}`, 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"
+                            : "mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-accent shadow-[0_0_8px_rgba(var(--accent-rgb),0.35)]" })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(TruncatingConversationTitle, { displayTitle: renderedTitle, isActive: isActive, variant: variant }), !isGameModal ? (_jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5 text-xs-tight font-medium leading-none text-muted/72 [font-variant-numeric:tabular-nums]", children: [conversation.updatedAtLabel ? (_jsx("span", { children: conversation.updatedAtLabel })) : null, isUnread ? (_jsx(PagePanel.Meta, { compact: true, tone: "accent", children: "New" })) : null] })) : null] })] }), showSourceBadge && conversationSource !== null ? (_jsx("div", { className: "pointer-events-none absolute right-3.5 top-3.5", children: _jsx(ChatSourceIcon, { source: conversationSource, className: "h-4 w-4" }) })) : 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] }));
+}