@agent-native/toolkit 0.6.0 → 0.8.0

package/README.md

@@ -25,6 +25,7 @@ and docs. Dispatch is a separate product rather than a Toolkit module.
 
 ```tsx
 import { ToolkitProvider } from "@agent-native/toolkit/provider";
+import { ChatHistoryList } from "@agent-native/toolkit/chat-history";
 import { PresenceBar } from "@agent-native/toolkit/collab-ui";
 import { ContextMeterView } from "@agent-native/toolkit/context-ui";
 import { VisualTweakControl } from "@agent-native/toolkit/design-tweaks";
@@ -38,7 +39,22 @@ import { useSetHeaderActions } from "@agent-native/toolkit/app-shell";
 
 Import `@agent-native/toolkit/styles.css` after Tailwind to include Toolkit's
 source scanning. If an app renders `SharedRichEditor`, also import
-`@agent-native/toolkit/editor.css`.
+`@agent-native/toolkit/editor.css`. If an app renders `ChatHistoryList`, also
+import `@agent-native/toolkit/chat-history.css`.
 
 Inside template apps, prefer local adapters such as `@/components/ui/button` so
 apps can replace their primitives without changing every callsite.
+
+## Customize Or Take Ownership
+
+Use public props, slots, callbacks, stable classes, and local adapters first.
+If a product needs a deeper override, the published package includes readable
+TypeScript under `node_modules/@agent-native/toolkit/src/`. Treat it as a
+read-only reference: copy the smallest component or helper into app-owned
+source, change the app import, and customize that copy. Do not edit
+`node_modules` or deep-import private `src` files at runtime.
+
+Keep Core runtime contracts intact when taking ownership of Toolkit UI. Actions,
+application state, auth/access, persistence, agent execution, chat transport,
+and page-to-sidebar thread handoff remain on their public Core APIs. Copied UI
+is an app-owned snapshot and will not receive upstream fixes automatically.

package/agent-native.eject.json

@@ -0,0 +1,411 @@
+{
+  "manifestVersion": 1,
+  "package": "@agent-native/toolkit",
+  "catalogs": ["toolkit-ui", "setup-readiness-ui"],
+  "units": [
+    {
+      "id": "toolkit/root",
+      "label": "Complete Toolkit source",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["root"],
+      "entrypoints": ["."],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/index.ts"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [
+        "@assistant-ui/react",
+        "@radix-ui/react-accordion",
+        "@radix-ui/react-alert-dialog",
+        "@radix-ui/react-aspect-ratio",
+        "@radix-ui/react-avatar",
+        "@radix-ui/react-checkbox",
+        "@radix-ui/react-collapsible",
+        "@radix-ui/react-context-menu",
+        "@radix-ui/react-dialog",
+        "@radix-ui/react-dropdown-menu",
+        "@radix-ui/react-hover-card",
+        "@radix-ui/react-label",
+        "@radix-ui/react-menubar",
+        "@radix-ui/react-navigation-menu",
+        "@radix-ui/react-popover",
+        "@radix-ui/react-progress",
+        "@radix-ui/react-radio-group",
+        "@radix-ui/react-scroll-area",
+        "@radix-ui/react-select",
+        "@radix-ui/react-separator",
+        "@radix-ui/react-slider",
+        "@radix-ui/react-slot",
+        "@radix-ui/react-switch",
+        "@radix-ui/react-tabs",
+        "@radix-ui/react-toast",
+        "@radix-ui/react-toggle",
+        "@radix-ui/react-toggle-group",
+        "@radix-ui/react-tooltip",
+        "@tabler/icons-react",
+        "@tiptap/core",
+        "@tiptap/extension-code-block-lowlight",
+        "@tiptap/extension-collaboration",
+        "@tiptap/extension-collaboration-caret",
+        "@tiptap/extension-image",
+        "@tiptap/extension-link",
+        "@tiptap/extension-placeholder",
+        "@tiptap/extension-table",
+        "@tiptap/extension-table-cell",
+        "@tiptap/extension-table-header",
+        "@tiptap/extension-table-row",
+        "@tiptap/extension-task-item",
+        "@tiptap/extension-task-list",
+        "@tiptap/pm",
+        "@tiptap/react",
+        "@tiptap/starter-kit",
+        "@tiptap/y-tiptap",
+        "class-variance-authority",
+        "clsx",
+        "cmdk",
+        "date-fns",
+        "embla-carousel-react",
+        "highlight.js",
+        "input-otp",
+        "lowlight",
+        "next-themes",
+        "react",
+        "react-day-picker",
+        "react-dom",
+        "react-hook-form",
+        "react-resizable-panels",
+        "recharts",
+        "sonner",
+        "tailwind-merge",
+        "tiptap-markdown",
+        "vaul",
+        "y-protocols",
+        "yjs"
+      ],
+      "protectedImports": ["@agent-native/core/client"],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/app-shell",
+      "label": "Application shell",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["app-shell"],
+      "entrypoints": ["./app-shell", "./app-shell/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/app-shell"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": ["react"],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/collab-ui",
+      "label": "Collaboration UI",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["collab-ui"],
+      "entrypoints": ["./collab-ui", "./collab-ui/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/collab-ui"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [
+        "@radix-ui/react-tooltip",
+        "clsx",
+        "react",
+        "tailwind-merge",
+        "y-protocols"
+      ],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/chat-history",
+      "label": "Chat history",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["chat-history"],
+      "entrypoints": ["./chat-history", "./chat-history/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/chat-history"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "styles": [
+        {
+          "entrypoint": "./chat-history.css",
+          "source": "src/chat-history.css"
+        }
+      ],
+      "dependencies": [
+        "@tabler/icons-react",
+        "clsx",
+        "react",
+        "tailwind-merge"
+      ],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/composer",
+      "label": "Agent composer",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["composer"],
+      "entrypoints": ["./composer", "./composer/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/composer"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [
+        "@assistant-ui/react",
+        "@radix-ui/react-popover",
+        "@radix-ui/react-tooltip",
+        "@tabler/icons-react",
+        "@tiptap/core",
+        "@tiptap/extension-placeholder",
+        "@tiptap/pm",
+        "@tiptap/react",
+        "@tiptap/starter-kit",
+        "clsx",
+        "react",
+        "react-dom",
+        "tailwind-merge"
+      ],
+      "protectedImports": [
+        "@agent-native/toolkit/ui/button",
+        "@agent-native/toolkit/ui/select",
+        "@agent-native/toolkit/ui/skeleton"
+      ],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/context-ui",
+      "label": "Context inspection UI",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["context-ui"],
+      "entrypoints": ["./context-ui"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/context-ui"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [
+        "@radix-ui/react-popover",
+        "@radix-ui/react-tooltip",
+        "@tabler/icons-react",
+        "clsx",
+        "react",
+        "recharts",
+        "tailwind-merge"
+      ],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/design-tweaks",
+      "label": "Design tweak controls",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["design-tweaks"],
+      "entrypoints": ["./design-tweaks"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/design-tweaks"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [
+        "@radix-ui/react-popover",
+        "@tabler/icons-react",
+        "clsx",
+        "react",
+        "tailwind-merge"
+      ],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/editor",
+      "label": "Rich editor",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["editor"],
+      "entrypoints": ["./editor", "./editor/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/editor"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "styles": [
+        {
+          "entrypoint": "./editor.css",
+          "source": "src/editor.css"
+        }
+      ],
+      "dependencies": [
+        "@tabler/icons-react",
+        "@radix-ui/react-popover",
+        "@radix-ui/react-tooltip",
+        "@tiptap/core",
+        "@tiptap/extension-code-block-lowlight",
+        "@tiptap/extension-collaboration",
+        "@tiptap/extension-collaboration-caret",
+        "@tiptap/extension-image",
+        "@tiptap/extension-link",
+        "@tiptap/extension-placeholder",
+        "@tiptap/extension-table",
+        "@tiptap/extension-table-cell",
+        "@tiptap/extension-table-header",
+        "@tiptap/extension-table-row",
+        "@tiptap/extension-task-item",
+        "@tiptap/extension-task-list",
+        "@tiptap/pm",
+        "@tiptap/react",
+        "@tiptap/starter-kit",
+        "clsx",
+        "highlight.js",
+        "lowlight",
+        "react",
+        "tailwind-merge",
+        "tiptap-markdown",
+        "y-protocols",
+        "yjs"
+      ],
+      "protectedImports": ["@agent-native/core/client"],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/hooks",
+      "label": "Frontend hooks",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["hooks"],
+      "entrypoints": ["./hooks", "./hooks/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/hooks"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [
+        "@radix-ui/react-toast",
+        "@tabler/icons-react",
+        "class-variance-authority",
+        "clsx",
+        "react",
+        "tailwind-merge"
+      ],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/onboarding",
+      "label": "Onboarding UI",
+      "catalog": "setup-readiness-ui",
+      "catalogItems": ["onboarding"],
+      "entrypoints": ["./onboarding", "./onboarding/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/onboarding"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/provider",
+      "label": "Toolkit provider",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["provider"],
+      "entrypoints": ["./provider"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/provider.tsx"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [
+        "@radix-ui/react-slot",
+        "class-variance-authority",
+        "clsx",
+        "react",
+        "tailwind-merge"
+      ],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/sharing",
+      "label": "Sharing UI",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["sharing"],
+      "entrypoints": ["./sharing", "./sharing/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/sharing"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": ["@tabler/icons-react"],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/ui",
+      "label": "UI primitives",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["ui"],
+      "entrypoints": ["./ui", "./ui/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/ui"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [
+        "@radix-ui/react-accordion",
+        "@radix-ui/react-alert-dialog",
+        "@radix-ui/react-aspect-ratio",
+        "@radix-ui/react-avatar",
+        "@radix-ui/react-checkbox",
+        "@radix-ui/react-collapsible",
+        "@radix-ui/react-context-menu",
+        "@radix-ui/react-dialog",
+        "@radix-ui/react-dropdown-menu",
+        "@radix-ui/react-hover-card",
+        "@radix-ui/react-label",
+        "@radix-ui/react-menubar",
+        "@radix-ui/react-navigation-menu",
+        "@radix-ui/react-popover",
+        "@radix-ui/react-progress",
+        "@radix-ui/react-radio-group",
+        "@radix-ui/react-scroll-area",
+        "@radix-ui/react-select",
+        "@radix-ui/react-separator",
+        "@radix-ui/react-slider",
+        "@radix-ui/react-slot",
+        "@radix-ui/react-switch",
+        "@radix-ui/react-tabs",
+        "@radix-ui/react-toast",
+        "@radix-ui/react-toggle",
+        "@radix-ui/react-toggle-group",
+        "@radix-ui/react-tooltip",
+        "@tabler/icons-react",
+        "class-variance-authority",
+        "clsx",
+        "cmdk",
+        "date-fns",
+        "embla-carousel-react",
+        "input-otp",
+        "next-themes",
+        "react",
+        "react-day-picker",
+        "react-hook-form",
+        "react-resizable-panels",
+        "recharts",
+        "sonner",
+        "tailwind-merge",
+        "vaul"
+      ],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/utils",
+      "label": "Class name utilities",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["utils"],
+      "entrypoints": ["./utils"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/utils.ts"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": ["clsx", "tailwind-merge"],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/styles",
+      "label": "Toolkit Tailwind source styles",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["styles"],
+      "entrypoints": [],
+      "strategy": "source-copy",
+      "targetRoot": "app/components/agent-native/toolkit",
+      "styles": [
+        {
+          "entrypoint": "./styles.css",
+          "source": "src/styles.css"
+        }
+      ],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/migration-metadata",
+      "label": "Toolkit migration metadata",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["migration-manifest"],
+      "entrypoints": ["./migration-manifest.json"],
+      "strategy": "protected-seam",
+      "seam": "@agent-native/toolkit/migration-manifest.json",
+      "protectedImports": ["@agent-native/toolkit/migration-manifest.json"]
+    }
+  ]
+}

package/dist/chat-history/ChatHistoryList.d.ts

@@ -0,0 +1,103 @@
+import React from "react";
+/** A single row in a chat history list. Purely data — no fetching, no
+ * assistant-ui context. Formatting (relative time, "Active"/"Open" labels,
+ * status spinners) is the caller's responsibility; hand in the already
+ * rendered node via `timestamp`. */
+export interface ChatHistoryItem {
+    id: string;
+    title: React.ReactNode;
+    /** Plain-text form of `title`, used to seed the inline rename input.
+     * Only needed when `onRename` is supplied. */
+    titleText?: string;
+    /** Secondary line — e.g. a message preview. */
+    subtitle?: React.ReactNode;
+    /** Tertiary line — e.g. a scope/folder label. */
+    detail?: React.ReactNode;
+    /** Pre-formatted trailing value: a relative time, "Active"/"Open", or a
+     * status node (spinner, unread dot). This component does not format
+     * dates or compute status itself. */
+    timestamp?: React.ReactNode;
+    pinned?: boolean;
+    disabled?: boolean;
+}
+export interface ChatHistorySection {
+    id: string;
+    label?: React.ReactNode;
+    items: ChatHistoryItem[];
+}
+export interface ChatHistoryListLabels {
+    options: string | ((item: ChatHistoryItem) => string);
+    renameInput: string | ((item: ChatHistoryItem) => string);
+    rename: string;
+    pin: string;
+    unpin: string;
+    delete: string;
+}
+export interface ChatHistoryListProps {
+    /** Flat item list. Ignored when `sections` is provided. */
+    items?: ChatHistoryItem[];
+    /** Grouped item list (e.g. "This deck" / "All chats", or pinned/recent). */
+    sections?: ChatHistorySection[];
+    /** Id of the currently active/selected item — highlighted in the list. */
+    activeId?: string | null;
+    onSelect: (id: string) => void;
+    /** Fired on double-click / explicit "open" gesture, distinct from select. */
+    onOpen?: (id: string) => void;
+    /** Presence enables the pin/unpin row action. */
+    onTogglePin?: (id: string) => void;
+    /** Presence enables the inline "Rename" row action. */
+    onRename?: (id: string, nextTitle: string) => void;
+    /** Optional character limit for the inline rename input. */
+    renameMaxLength?: number;
+    /** Presence enables the "Delete" row action. */
+    onDelete?: (id: string) => void;
+    /** Escape hatch: fully custom row action menu content, replacing the
+     * built-in rename/pin/delete items. Still gated by the trigger button,
+     * which shows whenever this or any of the on* callbacks above is set. */
+    renderRowActions?: (item: ChatHistoryItem) => React.ReactNode;
+    /** App-specific actions inserted after pin and before delete. Call
+     * `closeMenu` before starting the action. */
+    renderAdditionalRowActions?: (item: ChatHistoryItem, closeMenu: () => void) => React.ReactNode;
+    /** Controlled search input. Omit `onSearchChange` to hide the search box
+     * entirely and let the host render its own (results are always supplied
+     * by the caller via `items`/`sections` either way). */
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    searchInputRef?: React.Ref<HTMLInputElement>;
+    /** True while results are being fetched — shows `loadingLabel` instead of
+     * the list. */
+    loading?: boolean;
+    loadingLabel?: React.ReactNode;
+    /** Shown instead of the list when set (takes priority over `loading`). */
+    error?: React.ReactNode;
+    emptyLabel?: React.ReactNode;
+    /** Shown instead of `emptyLabel` when `searchValue` is non-empty. */
+    emptySearchLabel?: React.ReactNode;
+    /** Optional localized labels for row actions and their accessible controls. */
+    labels?: Partial<ChatHistoryListLabels>;
+    /** Rendered after the list, inside the scroll container (e.g. a
+     * "Load older chats" button). */
+    footer?: React.ReactNode;
+    /** "popover" (default) matches core's compact HistoryPopover list.
+     * "rail" is a denser variant with a solid active background, closer to
+     * a sidebar run rail. */
+    variant?: "popover" | "rail";
+    className?: string;
+    listClassName?: string;
+}
+/**
+ * Presentational chat history list shared by the Core `HistoryPopover`
+ * and Agent-Native Code's run rail
+ * (code-agents-ui). Styling is driven by stable `an-chat-history*` class
+ * names (see `@agent-native/toolkit/chat-history.css`) rather than Tailwind utilities
+ * so the same component renders correctly in a Tailwind host and in
+ * code-agents-ui's plain-CSS host.
+ *
+ * This component owns no data: search filtering, pin/rename persistence,
+ * and time formatting all stay with the caller. It only renders whatever
+ * `items`/`sections` it is given, plus the optional search box and
+ * loading/empty/error states.
+ */
+export declare function ChatHistoryList({ items, sections, activeId, onSelect, onOpen, onTogglePin, onRename, renameMaxLength, onDelete, renderRowActions, renderAdditionalRowActions, searchValue, onSearchChange, searchPlaceholder, searchInputRef, loading, loadingLabel, error, emptyLabel, emptySearchLabel, labels, footer, variant, className, listClassName, }: ChatHistoryListProps): React.JSX.Element;
+//# sourceMappingURL=ChatHistoryList.d.ts.map

package/dist/chat-history/ChatHistoryList.d.ts.map

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

package/dist/chat-history/ChatHistoryList.js

@@ -0,0 +1,109 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconDots, IconPencil, IconPinned, IconPinnedOff, IconSearch, IconTrash, } from "@tabler/icons-react";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../utils.js";
+const DEFAULT_LABELS = {
+    options: "Chat options",
+    renameInput: "Rename chat",
+    rename: "Rename",
+    pin: "Pin to top",
+    unpin: "Unpin from top",
+    delete: "Delete",
+};
+/**
+ * Presentational chat history list shared by the Core `HistoryPopover`
+ * and Agent-Native Code's run rail
+ * (code-agents-ui). Styling is driven by stable `an-chat-history*` class
+ * names (see `@agent-native/toolkit/chat-history.css`) rather than Tailwind utilities
+ * so the same component renders correctly in a Tailwind host and in
+ * code-agents-ui's plain-CSS host.
+ *
+ * This component owns no data: search filtering, pin/rename persistence,
+ * and time formatting all stay with the caller. It only renders whatever
+ * `items`/`sections` it is given, plus the optional search box and
+ * loading/empty/error states.
+ */
+export function ChatHistoryList({ items, sections, activeId = null, onSelect, onOpen, onTogglePin, onRename, renameMaxLength, onDelete, renderRowActions, renderAdditionalRowActions, searchValue, onSearchChange, searchPlaceholder = "Search chats...", searchInputRef, loading = false, loadingLabel = "Searching...", error, emptyLabel = "No chats yet", emptySearchLabel = "No matching chats", labels, footer, variant = "popover", className, listClassName, }) {
+    const resolvedLabels = {
+        options: labels?.options ?? DEFAULT_LABELS.options,
+        renameInput: labels?.renameInput ?? DEFAULT_LABELS.renameInput,
+        rename: labels?.rename ?? DEFAULT_LABELS.rename,
+        pin: labels?.pin ?? DEFAULT_LABELS.pin,
+        unpin: labels?.unpin ?? DEFAULT_LABELS.unpin,
+        delete: labels?.delete ?? DEFAULT_LABELS.delete,
+    };
+    const resolvedSections = sections ?? (items ? [{ id: "default", items }] : []);
+    const totalCount = resolvedSections.reduce((sum, section) => sum + section.items.length, 0);
+    const hasSearchValue = Boolean(searchValue?.trim());
+    return (_jsxs("div", { className: cn("an-chat-history", variant === "rail" && "an-chat-history--rail", className), "data-agent-native": "chat-history-list", children: [onSearchChange && (_jsxs("div", { className: "an-chat-history__search", children: [_jsx(IconSearch, { size: 13, className: "an-chat-history__search-icon" }), _jsx("input", { ref: searchInputRef, type: "text", value: searchValue ?? "", onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: "an-chat-history__search-input" })] })), _jsxs("div", { className: cn("an-chat-history__list", listClassName), children: [error ? (_jsx("div", { className: "an-chat-history__state an-chat-history__state--error", children: error })) : loading ? (_jsx("div", { className: "an-chat-history__state", children: loadingLabel })) : totalCount === 0 ? (_jsx("div", { className: "an-chat-history__state", children: hasSearchValue ? emptySearchLabel : emptyLabel })) : (resolvedSections.map((section) => section.items.length > 0 && (_jsxs("div", { className: "an-chat-history__section", children: [section.label && (_jsx("div", { className: "an-chat-history__section-label", children: section.label })), section.items.map((item) => (_jsx(ChatHistoryRow, { item: item, active: item.id === activeId, onSelect: onSelect, onOpen: onOpen, onTogglePin: onTogglePin, onRename: onRename, renameMaxLength: renameMaxLength, onDelete: onDelete, renderRowActions: renderRowActions, renderAdditionalRowActions: renderAdditionalRowActions, labels: resolvedLabels }, item.id)))] }, section.id)))), footer] })] }));
+}
+function ChatHistoryRow({ item, active, onSelect, onOpen, onTogglePin, onRename, renameMaxLength, onDelete, renderRowActions, renderAdditionalRowActions, labels, }) {
+    const [isRenaming, setIsRenaming] = useState(false);
+    const [draftTitle, setDraftTitle] = useState("");
+    const [menuOpen, setMenuOpen] = useState(false);
+    const renameInputRef = useRef(null);
+    const menuRef = useRef(null);
+    const hasMenu = Boolean(onTogglePin ||
+        onRename ||
+        onDelete ||
+        renderRowActions ||
+        renderAdditionalRowActions);
+    useEffect(() => {
+        if (!menuOpen)
+            return;
+        function handlePointerDown(event) {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setMenuOpen(false);
+            }
+        }
+        function handleKeyDown(event) {
+            if (event.key === "Escape")
+                setMenuOpen(false);
+        }
+        document.addEventListener("pointerdown", handlePointerDown);
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("pointerdown", handlePointerDown);
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [menuOpen]);
+    function startRename() {
+        setDraftTitle(item.titleText ?? "");
+        setIsRenaming(true);
+        setMenuOpen(false);
+        window.requestAnimationFrame(() => {
+            renameInputRef.current?.select();
+        });
+    }
+    function commitRename() {
+        const trimmed = draftTitle.trim();
+        setIsRenaming(false);
+        if (trimmed && trimmed !== item.titleText) {
+            onRename?.(item.id, trimmed);
+        }
+    }
+    function handleRenameKeyDown(event) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            commitRename();
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            setIsRenaming(false);
+        }
+    }
+    const optionsLabel = typeof labels.options === "function"
+        ? labels.options(item)
+        : labels.options;
+    const renameInputLabel = typeof labels.renameInput === "function"
+        ? labels.renameInput(item)
+        : labels.renameInput;
+    return (_jsxs("div", { className: cn("an-chat-history-row", active && "an-chat-history-row--active", item.pinned && "an-chat-history-row--pinned", isRenaming && "an-chat-history-row--renaming", item.disabled && "an-chat-history-row--disabled"), children: [isRenaming ? (_jsx("div", { className: "an-chat-history-row__rename", children: _jsx("input", { ref: renameInputRef, className: "an-chat-history-row__rename-input", value: draftTitle, maxLength: renameMaxLength, onChange: (event) => setDraftTitle(event.target.value), onKeyDown: handleRenameKeyDown, onBlur: commitRename, autoFocus: true, "aria-label": renameInputLabel }) })) : (_jsxs("button", { type: "button", className: "an-chat-history-row__button", onClick: () => !item.disabled && onSelect(item.id), onDoubleClick: () => !item.disabled && onOpen?.(item.id), disabled: item.disabled, children: [_jsxs("div", { className: "an-chat-history-row__topline", children: [_jsx("span", { className: "an-chat-history-row__title", children: item.title }), item.timestamp != null && (_jsx("span", { className: "an-chat-history-row__timestamp", children: item.timestamp }))] }), item.subtitle != null && (_jsx("div", { className: "an-chat-history-row__subtitle", children: item.subtitle })), item.detail != null && (_jsx("div", { className: "an-chat-history-row__detail", children: item.detail }))] })), !isRenaming && hasMenu && (_jsxs("div", { className: "an-chat-history-row__menu", ref: menuRef, children: [_jsx("button", { type: "button", className: cn("an-chat-history-row__menu-trigger", item.pinned && "an-chat-history-row__menu-trigger--pinned"), "aria-label": optionsLabel, "aria-haspopup": "menu", "aria-expanded": menuOpen, onClick: () => setMenuOpen((open) => !open), children: item.pinned ? (_jsx(IconPinned, { size: 13, strokeWidth: 1.8 })) : (_jsx(IconDots, { size: 14, strokeWidth: 1.8 })) }), menuOpen && (_jsx("div", { className: "an-chat-history-row__menu-content", role: "menu", children: renderRowActions ? (renderRowActions(item)) : (_jsxs(_Fragment, { children: [onRename && (_jsxs("button", { type: "button", role: "menuitem", className: "an-chat-history-row__menu-item", onClick: startRename, children: [_jsx(IconPencil, { size: 13, strokeWidth: 1.8 }), _jsx("span", { children: labels.rename })] })), onTogglePin && (_jsxs("button", { type: "button", role: "menuitem", className: "an-chat-history-row__menu-item", onClick: () => {
+                                        setMenuOpen(false);
+                                        onTogglePin(item.id);
+                                    }, children: [item.pinned ? (_jsx(IconPinnedOff, { size: 13, strokeWidth: 1.8 })) : (_jsx(IconPinned, { size: 13, strokeWidth: 1.8 })), _jsx("span", { children: item.pinned ? labels.unpin : labels.pin })] })), renderAdditionalRowActions?.(item, () => setMenuOpen(false)), onDelete && (_jsxs("button", { type: "button", role: "menuitem", className: "an-chat-history-row__menu-item an-chat-history-row__menu-item--danger", onClick: () => {
+                                        setMenuOpen(false);
+                                        onDelete(item.id);
+                                    }, children: [_jsx(IconTrash, { size: 13, strokeWidth: 1.8 }), _jsx("span", { children: labels.delete })] }))] })) }))] }))] }));
+}
+//# sourceMappingURL=ChatHistoryList.js.map