2d: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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e: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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f: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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30: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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T1d02,"use client"; import * as React from "react"; import { IconRefresh, IconThumbDown, IconThumbDownFilled, IconThumbUp, IconThumbUpFilled, } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { CopyCheck, useReceipt } from "@/components/ui/copy-check"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; export type ChatFeedback = "like" | "dislike" | null; type Ctx = { variant: "default" | "minimal"; feedback: ChatFeedback; setFeedback: (next: ChatFeedback) => void; }; const ActionsContext = React.createContext(null); function useActions(part: string) { const ctx = React.useContext(ActionsContext); if (!ctx) throw new Error(`${part} must be used inside `); return ctx; } export type ChatMessageActionsProps = Omit, "defaultValue" | "onChange"> & { /** `minimal` drops the hover surface: bare icons that only change color. */ variant?: "default" | "minimal"; /** When the row shows: on hover or focus-within (always on touch), or always. */ reveal?: "hover" | "always"; /** Feedback value: like, dislike or null. Controlled with `onValueChange`. */ value?: ChatFeedback; defaultValue?: ChatFeedback; onValueChange?: (value: ChatFeedback) => void; /** Text copied by the default copy action. */ copyText?: string; onCopy?: () => void; onRetry?: () => void; /** Which built-in actions the default composition shows. */ actions?: Array<"copy" | "retry" | "like" | "dislike">; disabled?: boolean; /** Compose parts yourself; omit for the default row. */ children?: React.ReactNode; }; function ChatMessageActions({ variant = "default", reveal = "hover", value, defaultValue = null, onValueChange, copyText = "", onCopy, onRetry, actions = ["copy", "retry", "like", "dislike"], disabled, children, className, ...props }: ChatMessageActionsProps) { const [inner, setInner] = React.useState(defaultValue); const feedback = value === undefined ? inner : value; const setFeedback = React.useCallback( (next: ChatFeedback) => { if (value === undefined) setInner(next); onValueChange?.(next); }, [value, onValueChange], ); const ctx = React.useMemo(() => ({ variant, feedback, setFeedback }), [variant, feedback, setFeedback]); return ( ); } type ActionProps = Omit, "children" | "variant" | "size"> & { /** Tooltip and accessible name. */ label: string; icon: React.ReactNode; /** Sets aria-pressed for toggles. */ pressed?: boolean; }; /** One icon action with a tooltip. Use it for custom actions beside the built-ins. */ function ChatMessageAction({ label, icon, pressed, ...props }: ActionProps) { return ( {icon} } /> {label} ); } type PartProps = Omit & { /** Replace the default icon. */ icon?: React.ReactNode; label?: string; }; function ChatMessageCopy({ text, onCopy, icon, label, ...props }: PartProps & { text: string; onCopy?: () => void }) { const [copied, showCopied] = useReceipt(); const copy = async () => { try { await navigator.clipboard.writeText(text); } catch { return; } showCopied(); onCopy?.(); }; return ( {icon ?? } } /> {copied ? "Copied" : (label ?? "Copy")} ); } /** Internal: the bare button (no tooltip) so a part can own its Tooltip. */ function ChatActionButton({ label, className, children, ...props }: Omit, "variant" | "size"> & { label: string }) { const { variant } = useActions("ChatMessageAction"); return ( ); } function ChatMessageRetry({ icon, label = "Retry", ...props }: PartProps) { return } {...props} />; } function ChatMessageLike({ icon, label = "Good response", onClick, ...props }: PartProps) { const { feedback, setFeedback } = useActions("ChatMessageLike"); const on = feedback === "like"; return ( : )} onClick={(event) => { setFeedback(on ? null : "like"); onClick?.(event); }} {...props} /> ); } function ChatMessageDislike({ icon, label = "Bad response", onClick, ...props }: PartProps) { const { feedback, setFeedback } = useActions("ChatMessageDislike"); const on = feedback === "dislike"; return ( : )} onClick={(event) => { setFeedback(on ? null : "dislike"); onClick?.(event); }} {...props} /> ); } export { ChatMessageActions, ChatMessageAction, ChatMessageCopy, ChatMessageRetry, ChatMessageLike, ChatMessageDislike, }; 32:Ta84,"use client"; import { useState } from "react"; import { IconBookmark, IconRotateClockwise2, IconShare3 } from "@tabler/icons-react"; import { Message, MessageContent, MessageFooter } from "@/components/ui/message"; import { ChatMessageAction, ChatMessageActions, ChatMessageCopy, ChatMessageDislike, ChatMessageLike, ChatMessageRetry, type ChatFeedback, } from "./chat-message-actions"; import { shortAnswer } from "../_fixtures-b"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; function Host({ children }: { children: React.ReactNode }) { return (

{shortAnswer}

{children} ); } export function ChatMessageActionsDemo() { const [value, setValue] = useState("like"); return ( } label="Regenerate" /> } /> } /> ); } export default ChatMessageActionsDemo; 33:T5fc,import type { BlockMeta } from "../../../lib/block-meta"; export const chatMessageActionsMeta: BlockMeta = { slug: "chat-message-actions", title: "Chat message actions", description: "Copy, retry, like and dislike actions for a chat message with tooltips, a minimal variant and a slot for custom icons.", group: "ai", kobraDeps: ["button", "copy-check", "tooltip"], files: ["blocks/ai/chat-message-actions/chat-message-actions.tsx"], props: [ { name: "variant", type: "'default' | 'minimal'", default: "'default'", description: "Hover surface on each button, or bare icons." }, { name: "reveal", type: "'hover' | 'always'", default: "'hover'", description: "Show on message hover or focus-within (always on touch), or always." }, { name: "value / defaultValue / onValueChange", type: "'like' | 'dislike' | null", default: "null", description: "Feedback state; pressing the active one clears it." }, { name: "copyText", type: "string", description: "Text the default copy action writes to the clipboard." }, { name: "onCopy / onRetry", type: "() => void", description: "Action callbacks." }, { name: "actions", type: "Array<'copy' | 'retry' | 'like' | 'dislike'>", default: "all four", description: "Built-ins in the default row." }, { name: "children", type: "ReactNode", description: "Compose ChatMessageCopy, ChatMessageRetry, ChatMessageLike, ChatMessageDislike and ChatMessageAction (label, icon) yourself." }, ], tags: ["ai", "chat", "actions", "feedback"], status: "ready", }; 24:["$","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":["$","$L2d",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":["$","$L2d",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 message actions"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Chat message actions"}],["$","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":"Copy, retry, like and dislike actions for a chat message with tooltips, a minimal variant and a slot for custom icons."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"chat-message-actions","group":"ai","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/ai/chat-message-actions/chat-message-actions.tsx","code":"$31"},{"path":"blocks/ai/chat-message-actions/demo.tsx","code":"$32"},{"path":"blocks/ai/chat-message-actions/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]