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/0cxdppusfso3e.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/0cxdppusfso3e.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/0cxdppusfso3e.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/0cxdppusfso3e.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:T3709,"use client"; import * as React from "react"; import { IconChevronDown, IconExternalLink } from "@tabler/icons-react"; import { avatarGradient } from "@/components/ui/avatar"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"; import type { CitationSource } from "@/components/ui/inline-citations"; import { cn } from "@/lib/utils"; /** The Kobra citation shape plus an optional id. `icon` may be an image URL or a node. */ export type ChatSourceData = CitationSource & { id?: string }; export type ChatSourceVariant = "chip" | "numbered" | "document"; type Ctx = { source: ChatSourceData; index?: number }; const SourceContext = React.createContext(null); function useSource(part: string) { const ctx = React.useContext(SourceContext); if (!ctx) throw new Error(`${part} must be used inside `); return ctx; } function hostOf(url: string) { try { return new URL(url).hostname.replace(/^www\./, ""); } catch { return url; } } /** Source mark: image when `icon` is a URL, a node when given, else the first letter. */ function ChatSourceIcon({ source: given, className, ...props }: Omit, "children"> & { source?: ChatSourceData }) { const ctx = React.useContext(SourceContext); const source = given ?? ctx?.source; const [failed, setFailed] = React.useState(false); if (!source) throw new Error("ChatSourceIcon needs a source or a parent"); const mark = source.icon; return ( {source.name.slice(0, 1).toUpperCase()} {mark ? ( {typeof mark === "string" ? ( failed ? ( source.name.slice(0, 1).toUpperCase() ) : ( // eslint-disable-next-line @next/next/no-img-element

setFailed(true)} className="size-[78%] object-contain" /> ) ) : ( mark )} ) : null} ); } function ChatSourceName({ className, ...props }: React.ComponentProps<"span">) { const { source } = useSource("ChatSourceName"); return ( {props.children ?? source.name} ); } function ChatSourceTitle({ className, ...props }: React.ComponentProps<"span">) { const { source } = useSource("ChatSourceTitle"); return ( {props.children ?? source.title} ); } function ChatSourceDescription({ className, ...props }: React.ComponentProps<"span">) { const { source } = useSource("ChatSourceDescription"); if (!source.description && !props.children) return null; return ( {props.children ?? source.description} ); } function ChatSourceDate({ className, ...props }: React.ComponentProps<"span">) { const { source } = useSource("ChatSourceDate"); if (!source.date && !props.children) return null; return ( {props.children ?? source.date} ); } function ChatSourceHost({ className, ...props }: React.ComponentProps<"span">) { const { source } = useSource("ChatSourceHost"); return ( {props.children ?? hostOf(source.url)} ); } const LINK_FOCUS = "outline-none transition-ring focus-visible:ring-3 focus-visible:ring-ring/50"; /** Rich card shown on hover or focus. Exported so you can reuse it in your own trigger. */ function ChatSourcePreview({ source }: { source: ChatSourceData }) { return (

{source.title}

); } export type ChatSourceProps = Omit, "href" | "children"> & { source: ChatSourceData; variant?: ChatSourceVariant; /** 1-based number for the `numbered` variant. */ index?: number; /** Open a Kobra HoverCard with the source details on hover or focus. */ enablePreview?: boolean; /** Hover delay in ms before the preview opens. */ previewDelay?: number; /** Compose ChatSourceIcon, ChatSourceName, ChatSourceTitle, ChatSourceDescription, ChatSourceDate, ChatSourceHost yourself. */ children?: React.ReactNode; }; function ChatSource({ source, variant = "chip", index, enablePreview = false, previewDelay = 250, children, className, ...props }: ChatSourceProps) { const link = { href: source.url, target: "_blank", rel: "noreferrer noopener", "data-slot": "chat-source", "data-variant": variant, ...props, } as const; let body: React.ReactNode; let cls: string; if (variant === "document") { cls = cn( "group/source flex min-w-0 items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-muted/60 focus-visible:bg-muted/60", LINK_FOCUS, className, ); body = children ?? ( <> {source.date ? ( <> · ) : null} ); } else if (variant === "numbered") { cls = cn( "mx-0.5 inline-flex size-[1.125rem] items-center justify-center rounded-full bg-muted align-baseline text-[11px] leading-none font-semibold text-muted-foreground tabular-nums transition-colors duration-150 ease-out hover:bg-foreground hover:text-background motion-reduce:transition-none data-popup-open:bg-foreground data-popup-open:text-background", LINK_FOCUS, className, ); body = children ?? {index}; } else { cls = cn( "group/source inline-flex h-6 max-w-48 min-w-0 items-center gap-1.5 rounded-full border bg-card ps-1 pe-2 align-middle text-xs text-muted-foreground transition-[color,background-color,box-shadow] duration-150 ease-out hover:bg-muted hover:text-foreground motion-reduce:transition-none data-popup-open:bg-muted data-popup-open:text-foreground", LINK_FOCUS, className, ); body = children ?? ( <> ); } const ctx = { source, index }; if (!enablePreview) { return ( {body} ); } return ( }> {body} ); } /** Overlapping favicons, one per source up to `max`, with an overflow count. */ function ChatSourceStack({ sources, max = 4, className, ...props }: Omit, "children"> & { sources: ChatSourceData[]; max?: number }) { const shown = sources.slice(0, max); const more = sources.length - shown.length; return ( {shown.map((source, i) => ( ))} {more > 0 ? ( +{more} ) : null} ); } export type ChatSourceGroupProps = Omit, "children"> & { sources: ChatSourceData[]; /** Heading over the list; pass null to hide the header. */ heading?: string | null; /** Rows shown before a "Show more" row appears. */ limit?: number; enablePreview?: boolean; /** Drop the card border, for use inside another surface. */ bare?: boolean; }; /** Grouped list of source rows with an optional header and overflow. */ function ChatSourceGroup({ sources, heading = "Sources", limit, enablePreview = false, bare = false, className, ...props }: ChatSourceGroupProps) { const [all, setAll] = React.useState(false); const capped = limit !== undefined && sources.length > limit && !all; const rows = capped ? sources.slice(0, limit) : sources; return (

{heading !== null ? (

{heading} {sources.length}

) : null}

{limit !== undefined && sources.length > limit ? ( ) : null}

); } export type ChatSourceDisclosureProps = Omit, "children"> & { sources: ChatSourceData[]; /** Trigger label, e.g. "6 sources". */ label?: string; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; enablePreview?: boolean; }; /** Stacked favicons as a trigger that expands the grouped list below. */ function ChatSourceDisclosure({ sources, label, open, defaultOpen = false, onOpenChange, enablePreview = false, className, ...props }: ChatSourceDisclosureProps) { return (

{label ?? `${sources.length} sources`}

); } export { ChatSource, ChatSourceIcon, ChatSourceName, ChatSourceTitle, ChatSourceDescription, ChatSourceDate, ChatSourceHost, ChatSourcePreview, ChatSourceStack, ChatSourceGroup, ChatSourceDisclosure, }; 31:Tdec,"use client"; import { useState } from "react"; import { ChatSource, ChatSourceDate, ChatSourceDescription, ChatSourceDisclosure, ChatSourceGroup, ChatSourceHost, ChatSourceIcon, ChatSourceName, ChatSourceStack, ChatSourceTitle, } from "./chat-source"; import { sources } from "../_fixtures-b"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; const SURFACE = "min-w-0 rounded-xl bg-card p-4 text-card-foreground ring-1 ring-foreground/10"; export function ChatSourceDemo() { const [open, setOpen] = useState(false); return (

Edge caches suit read-heavy feeds while in-memory caches suit a single region and stale data is often fine .

Hover to preview or tab to it{" "} .

A short claim and another , then a third .

); } export default ChatSourceDemo; 32:T753,import type { BlockMeta } from "../../../lib/block-meta"; export const chatSourceMeta: BlockMeta = { slug: "chat-source", title: "Chat source", description: "Sources for a chat answer as inline chips, document rows, grouped lists or stacked favicons, with an optional hover preview.", group: "ai", kobraDeps: ["avatar", "collapsible", "hover-card", "inline-citations"], files: ["blocks/ai/chat-source/chat-source.tsx"], props: [ { name: "source", type: "ChatSourceData", description: "Kobra CitationSource ({ name, title, url, description?, date?, icon? }) plus optional id. icon is an image URL or a node; no favicon is fetched by default." }, { name: "variant", type: "'chip' | 'numbered' | 'document'", default: "'chip'", description: "Inline pill, small numbered marker, or full row." }, { name: "index", type: "number", description: "Number shown by the numbered variant." }, { name: "enablePreview", type: "boolean", default: "false", description: "HoverCard with icon, title, description, date and host on hover or focus." }, { name: "previewDelay", type: "number", default: "250", description: "Hover delay in ms." }, { name: "children", type: "ReactNode", description: "Compose ChatSourceIcon, ChatSourceName, ChatSourceTitle, ChatSourceDescription, ChatSourceDate, ChatSourceHost." }, { name: "ChatSourceGroup", type: "{ sources, heading?, limit?, enablePreview?, bare? }", description: "Grouped document rows with a count header and a Show more row past limit." }, { name: "ChatSourceStack", type: "{ sources, max? }", description: "Overlapping favicons with a +N overflow." }, { name: "ChatSourceDisclosure", type: "{ sources, label?, open?, defaultOpen?, onOpenChange? }", description: "Stack trigger that expands the grouped list." }, ], tags: ["ai", "chat", "sources", "citations"], 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 source"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Chat source"}],["$","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":"Sources for a chat answer as inline chips, document rows, grouped lists or stacked favicons, with an optional hover preview."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chat-source","group":"ai","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/ai/chat-source/chat-source.tsx","code":"$30"},{"path":"blocks/ai/chat-source/demo.tsx","code":"$31"},{"path":"blocks/ai/chat-source/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]