2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T2020,"use client"; import { createContext, useContext, useEffect, useId, useRef, type ComponentProps, type KeyboardEvent, type ReactNode } from "react"; import { Item, ItemContent, ItemDescription, ItemGroup, ItemTitle } from "@/components/ui/item"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; type Density = "default" | "compact"; type ListContext = { value?: string; onValueChange?: (value: string) => void; density: Density; }; const Ctx = createContext({ density: "default" }); export type ChatListThread = { id: string; title: string; snippet?: string; time?: string; unread?: boolean; /** Group heading, for example "Today". Threads sharing a heading are listed together. */ group?: string; }; export type ChatListProps = Omit, "children" | "onChange"> & { /** Id of the active thread. */ value?: string; onValueChange?: (value: string) => void; density?: Density; /** Data-driven rows; grouped by `group` in order of first appearance. */ threads?: ChatListThread[]; /** Skeleton rows instead of content while the list loads. */ loading?: boolean; /** Replaces the default empty state when there are no threads. */ empty?: ReactNode; children?: ReactNode; }; /** Move focus between rows with the arrow keys; only one row is a tab stop. */ function rows(root: HTMLElement) { return [...root.querySelectorAll('[data-slot="chat-list-item"]')]; } /** * A list of conversation threads on Kobra's Item. Arrow keys, Home and End move between rows, * Enter or Space opens one, and the active row is marked with `aria-current`. */ export function ChatList({ value, onValueChange, density = "default", threads, loading = false, empty, children, className, "aria-label": ariaLabel = "Conversations", ...props }: ChatListProps) { const root = useRef(null); // Roving tab stop: the focused row, else the active row, else the first. useEffect(() => { const el = root.current; if (!el) return; const all = rows(el); const focused = all.find((r) => r === document.activeElement); const stop = focused ?? all.find((r) => r.getAttribute("aria-current") === "true") ?? all[0]; for (const r of all) r.tabIndex = r === stop ? 0 : -1; }); const onKeyDown = (event: KeyboardEvent) => { const all = rows(event.currentTarget); const at = all.indexOf(document.activeElement as HTMLElement); if (at < 0) return; const last = all.length - 1; const next = event.key === "ArrowDown" ? Math.min(last, at + 1) : event.key === "ArrowUp" ? Math.max(0, at - 1) : event.key === "Home" ? 0 : event.key === "End" ? last : -1; if (next < 0) return; event.preventDefault(); for (const r of all) r.tabIndex = r === all[next] ? 0 : -1; all[next]?.focus(); }; const groups: { label?: string; items: ChatListThread[] }[] = []; for (const t of threads ?? []) { const g = groups.find((x) => x.label === t.group); if (g) g.items.push(t); else groups.push({ label: t.group, items: [t] }); } const isEmpty = !loading && !children && (threads?.length ?? 0) === 0; return ( ); } export function ChatListGroup({ label, children, className }: { label?: string; children: ReactNode; className?: string }) { const id = useId(); return (

{label ? (

{label}

) : null} {children}

); } export type ChatListItemProps = Omit, "title" | "value"> & { /** Thread id; compared with the list's `value` for the active state. */ value: string; title: ReactNode; snippet?: ReactNode; time?: ReactNode; unread?: boolean; }; export function ChatListItem({ value, title, snippet, time, unread = false, className, onClick, ...props }: ChatListItemProps) { const ctx = useContext(Ctx); const active = ctx.value === value; const compact = ctx.density === "compact"; return (

{ onClick?.(event); if (!event.defaultPrevented) ctx.onValueChange?.(value); }} {...props} /> } className={cn( "flex-nowrap items-start gap-2.5 text-start hover:bg-muted/60 active:scale-[0.99] data-active:bg-muted data-active:hover:bg-muted motion-reduce:active:scale-100", "transition-[background-color,box-shadow,scale] duration-150 ease-out motion-reduce:transition-none", compact && "items-center", className, )} > {title} {time ? {time} : null} {snippet && !compact ? {snippet} : null} {unread ? ( Unread ) : null}

); } function ChatListSkeleton({ density }: { density: Density }) { return (

{Array.from({ length: 6 }, (_, i) => (

{density === "default" ? : null}

))}

); } export function ChatListEmpty({ title = "No conversations yet", description = "Start one from the composer and it will show up here.", action }: { title?: string; description?: string; action?: ReactNode }) { return (

{title}

{description}

{action ?

{action}

: null}

); } 31:T9af,"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { aiThreads } from "../_fixtures"; import { ChatList } from "./chat-list"; function Pane({ children, className }: { children: React.ReactNode; className?: string }) { return

{children}

; } export function ChatListDemo() { const [active, setActive] = useState("th-2"); const [read, setRead] = useState>(new Set()); const [loading, setLoading] = useState(false); const threads = aiThreads.map((t) => ({ ...t, unread: t.unread && !read.has(t.id) })); const open = (id: string) => { setActive(id); setRead((r) => new Set(r).add(id)); }; return (

Arrow keys move, Enter opens. Unread clears when a thread opens.

); } 32:T552,import type { BlockMeta } from "../../../lib/block-meta"; export const chatListMeta: BlockMeta = { slug: "chat-list", title: "Chat list", description: "Conversation thread rows on Kobra's Item: title, snippet, time, unread dot and an active state, grouped by day, in default or compact density. Arrow-key navigation with a roving tab stop, skeleton and empty states.", group: "ai", kobraDeps: ["item", "skeleton"], files: ["blocks/ai/chat-list/chat-list.tsx"], props: [ { name: "threads", type: "{ id, title, snippet?, time?, unread?, group? }[]", description: "Data-driven rows, grouped by `group`." }, { name: "value", type: "string", description: "Id of the active thread." }, { name: "onValueChange", type: "(value: string) => void", description: "Called when a row is opened." }, { name: "density", type: "'default' | 'compact'", default: "'default'", description: "Compact drops the snippet and tightens rows." }, { name: "loading", type: "boolean", default: "false", description: "Skeleton rows; sets aria-busy." }, { name: "empty", type: "ReactNode", description: "Replaces the built-in empty state." }, { name: "ChatListGroup / ChatListItem", type: "parts", description: "Compose rows by hand instead of passing threads." }, ], tags: ["ai", "chat", "list", "threads", "sidebar"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#ai","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"AI"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Chat list"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Chat list"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Conversation thread rows on Kobra's Item: title, snippet, time, unread dot and an active state, grouped by day, in default or compact density. Arrow-key navigation with a roving tab stop, skeleton and empty states."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chat-list","group":"ai","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/ai/chat-list/chat-list.tsx","code":"$30"},{"path":"blocks/ai/chat-list/demo.tsx","code":"$31"},{"path":"blocks/ai/chat-list/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]