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:T265b,"use client"; import * as React from "react"; import { IconCode, IconTerminal2, IconTextWrap } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { CopyCheck, useReceipt } from "@/components/ui/copy-check"; import { INK } from "@/components/ui/code-block"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { highlightCode, type CodeLanguage } from "@/lib/highlight-code"; import { cn } from "@/lib/utils"; /** Languages the block labels. `json` reuses the JS grammar; `text` is unhighlighted. */ export type AiCodeLanguage = CodeLanguage | "json" | "text"; const GRAMMAR: Record = { ts: "ts", tsx: "tsx", js: "js", jsx: "jsx", sh: "sh", json: "js", text: "sh", }; const LABEL: Record = { ts: "TypeScript", tsx: "TSX", js: "JavaScript", jsx: "JSX", sh: "Shell", json: "JSON", text: "Text", }; type Ctx = { code: string; language: AiCodeLanguage; filename?: string; wrap: boolean; setWrap: (next: boolean) => void; lineNumbers: boolean; maxHeight?: number; }; const AiCodeBlockContext = React.createContext(null); function useAiCodeBlock(part: string) { const ctx = React.useContext(AiCodeBlockContext); if (!ctx) throw new Error(`${part} must be used inside `); return ctx; } export type AiCodeBlockProps = Omit, "children"> & { code: string; language?: AiCodeLanguage; /** Shown in the header instead of the language label. */ filename?: string; lineNumbers?: boolean; /** Soft-wrap long lines. Controlled with `onWrapChange`, or uncontrolled with `defaultWrap`. */ wrap?: boolean; defaultWrap?: boolean; onWrapChange?: (wrap: boolean) => void; /** Render the wrap toggle in the header. */ wrapToggle?: boolean; /** `default` has a header bar; `bare` drops it and floats the copy action on hover or focus. */ variant?: "default" | "bare"; /** Cap the body height in px; it scrolls past that. */ maxHeight?: number; /** Compose your own parts; omit for the default header plus body. */ children?: React.ReactNode; }; function AiCodeBlock({ code, language = "ts", filename, lineNumbers = false, wrap: wrapProp, defaultWrap = false, onWrapChange, wrapToggle = false, variant = "default", maxHeight, children, className, ...props }: AiCodeBlockProps) { const [inner, setInner] = React.useState(defaultWrap); const wrap = wrapProp ?? inner; const setWrap = React.useCallback( (next: boolean) => { if (wrapProp === undefined) setInner(next); onWrapChange?.(next); }, [wrapProp, onWrapChange], ); const ctx = React.useMemo( () => ({ code, language, filename, wrap, setWrap, lineNumbers, maxHeight }), [code, language, filename, wrap, setWrap, lineNumbers, maxHeight], ); return (

{children ?? ( <> {variant === "default" ? ( {wrapToggle ? : null} ) : ( {wrapToggle ? : null} )} )} ); } function AiCodeBlockHeader({ className, ...props }: React.ComponentProps<"figcaption">) { return (

); } /** Language icon plus filename (or the language name when no filename is given). */ function AiCodeBlockLabel({ className, children, ...props }: React.ComponentProps<"span">) { const { language, filename } = useAiCodeBlock("AiCodeBlockLabel"); const Glyph = language === "sh" ? IconTerminal2 : IconCode; return ( {children ?? ( <> {filename ? {filename} : null} {LABEL[language]} )} ); } function AiCodeBlockActions({ floating = false, className, ...props }: React.ComponentProps<"div"> & { floating?: boolean }) { return (

); } function AiCodeBlockCopy({ className, ...props }: Omit, "children">) { const { code, filename } = useAiCodeBlock("AiCodeBlockCopy"); const [copied, showCopied] = useReceipt(); const copy = async () => { try { await navigator.clipboard.writeText(code); } catch { return; } showCopied(); }; return ( } /> {copied ? "Copied" : "Copy"} ); } function AiCodeBlockWrapToggle({ className, ...props }: Omit, "children">) { const { wrap, setWrap } = useAiCodeBlock("AiCodeBlockWrapToggle"); return ( setWrap(!wrap)} className={cn("text-muted-foreground hover:text-foreground aria-pressed:text-foreground aria-pressed:before:bg-foreground/7", className)} {...props} > } /> {wrap ? "Unwrap lines" : "Wrap lines"} ); } function AiCodeBlockContent({ className, ...props }: React.ComponentProps<"div">) { const { code, language, wrap, lineNumbers, maxHeight, filename } = useAiCodeBlock("AiCodeBlockContent"); const lines = React.useMemo(() => highlightCode(code.replace(/\n$/, ""), GRAMMAR[language]), [code, language]); const digits = String(lines.length).length; return (

        
          {lines.map((runs, number) => (
            
              {lineNumbers ? (
                
                  {number + 1}
                
              ) : (
                
              )}
              
                {runs.map((run, index) => (
                  
                    {run.text}
                  
                ))}
              
            
          ))}

); } export { AiCodeBlock, AiCodeBlockHeader, AiCodeBlockLabel, AiCodeBlockActions, AiCodeBlockCopy, AiCodeBlockWrapToggle, AiCodeBlockContent, }; 31:T7aa,"use client"; import { useState } from "react"; import { AiCodeBlock, AiCodeBlockActions, AiCodeBlockContent, AiCodeBlockCopy, AiCodeBlockHeader, AiCodeBlockLabel, AiCodeBlockWrapToggle, } from "./ai-code-block"; import { codeSamples } from "../_fixtures-b"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; export function AiCodeBlockDemo() { const [wrap, setWrap] = useState(true); return ( ); } export default AiCodeBlockDemo; 32:T6b4,import type { BlockMeta } from "../../../lib/block-meta"; export const aiCodeBlockMeta: BlockMeta = { slug: "ai-code-block", title: "AI code block", description: "Highlighted code for chat answers with a language or filename header, copy, optional line numbers and soft wrap, and a bare variant.", group: "ai", kobraDeps: ["button", "code-block", "copy-check", "tooltip"], files: ["blocks/ai/ai-code-block/ai-code-block.tsx"], props: [ { name: "code", type: "string", description: "Source text to render." }, { name: "language", type: "'ts' | 'tsx' | 'js' | 'jsx' | 'sh' | 'json' | 'text'", default: "'ts'", description: "Grammar and header label. json uses the JS grammar; text is plain." }, { name: "filename", type: "string", description: "Shown in the header instead of the language label." }, { name: "lineNumbers", type: "boolean", default: "false", description: "Gutter with tabular line numbers." }, { name: "wrap / defaultWrap / onWrapChange", type: "boolean", default: "false", description: "Soft-wrap long lines; controlled or uncontrolled." }, { name: "wrapToggle", type: "boolean", default: "false", description: "Render the wrap toggle in the header." }, { name: "variant", type: "'default' | 'bare'", default: "'default'", description: "Header bar, or no header with a floating copy action." }, { name: "maxHeight", type: "number", description: "Body height cap in px; scrolls beyond it." }, { name: "children", type: "ReactNode", description: "Compose AiCodeBlockHeader, AiCodeBlockLabel, AiCodeBlockActions, AiCodeBlockCopy, AiCodeBlockWrapToggle, AiCodeBlockContent yourself." }, ], tags: ["ai", "chat", "code", "copy"], 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":"AI code block"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"AI code block"}],["$","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":"Highlighted code for chat answers with a language or filename header, copy, optional line numbers and soft wrap, and a bare variant."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"ai-code-block","group":"ai","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/ai/ai-code-block/ai-code-block.tsx","code":"$30"},{"path":"blocks/ai/ai-code-block/demo.tsx","code":"$31"},{"path":"blocks/ai/ai-code-block/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]