@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/ai/copilot-panel.js

@@ -0,0 +1,439 @@
+import { useDirection, useFormatter, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { Spinner } from "../ui/spinner.js";
+import { useCopilotState } from "./copilot.js";
+import { Textarea } from "../ui/textarea.js";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet.js";
+import { copilotBlocks } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, CircleAlertIcon, ExternalLinkIcon, HistoryIcon, InfoIcon, MessageSquarePlusIcon, SparklesIcon, SquareIcon, Trash2Icon, TriangleAlertIcon } from "lucide-react";
+//#region src/components/ai/copilot-panel.tsx
+function CopilotPanel({ controller }) {
+	const t = useT();
+	const direction = useDirection();
+	const format = useFormatter();
+	const state = useCopilotState(controller);
+	const end = useRef(null);
+	const input = useRef(null);
+	const totals = controller.totals();
+	const currency = controller.schema.currency;
+	useEffect(() => {
+		end.current?.scrollIntoView?.({ block: "end" });
+	}, [
+		state.messages.length,
+		state.sending,
+		state.streaming?.text
+	]);
+	useEffect(() => {
+		if (state.open && state.view === "chat") input.current?.focus();
+	}, [state.open, state.view]);
+	const onKeyDown = (event) => {
+		if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			controller.send();
+		}
+	};
+	const usage = (message) => message.usage ? [t("ai.tokens", { count: format.number(message.usage.inputTokens + message.usage.outputTokens) }, ":count tokens"), message.usage.cost !== void 0 && currency ? t("ai.cost", { cost: format.money(message.usage.cost, currency, { maximumFractionDigits: 4 }) }, "≈ :cost") : null].filter(Boolean).join(" · ") : null;
+	return /* @__PURE__ */ jsx(Sheet, {
+		open: state.open,
+		onOpenChange: (open) => controller.setOpen(open),
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: direction === "rtl" ? "left" : "right",
+			"data-slot": "ai-copilot-panel",
+			className: "flex w-full flex-col gap-0 p-0 sm:max-w-md",
+			children: [
+				/* @__PURE__ */ jsxs(SheetHeader, {
+					className: "border-b pe-12",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx(SparklesIcon, {
+								className: "text-primary size-4",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ jsx(SheetTitle, {
+								className: "flex-1 truncate",
+								children: state.view === "history" ? t("ai.history", {}, "Conversations") : state.conversation?.title || t("ai.title", {}, "Copilot")
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-sm",
+								"aria-label": state.view === "history" ? t("ai.back", {}, "Back to the conversation") : t("ai.history", {}, "Conversations"),
+								"aria-pressed": state.view === "history",
+								onClick: () => state.view === "history" ? controller.showChat() : void controller.showHistory(),
+								children: /* @__PURE__ */ jsx(HistoryIcon, { "aria-hidden": "true" })
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-sm",
+								"aria-label": t("ai.new", {}, "New conversation"),
+								onClick: () => controller.newConversation(),
+								children: /* @__PURE__ */ jsx(MessageSquarePlusIcon, { "aria-hidden": "true" })
+							})
+						]
+					}), /* @__PURE__ */ jsx(SheetDescription, {
+						className: "text-xs",
+						"data-slot": "ai-disclaimer",
+						children: t("ai.disclaimer", {}, "AI can make mistakes. Check important information.")
+					})]
+				}),
+				controller.schema.notice && /* @__PURE__ */ jsx(CopilotNotice, { notice: controller.schema.notice }),
+				state.view === "history" ? /* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-y-auto p-2",
+					"data-slot": "ai-history",
+					children: state.loading ? /* @__PURE__ */ jsxs("div", {
+						className: "flex justify-center p-6",
+						children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: t("ai.loading", {}, "Loading")
+						})]
+					}) : state.conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground p-6 text-center text-sm",
+						children: t("ai.no_conversations", {}, "No conversations yet.")
+					}) : /* @__PURE__ */ jsx("ul", {
+						className: "flex flex-col gap-1",
+						children: state.conversations.map((conversation) => /* @__PURE__ */ jsxs("li", {
+							className: "group flex items-center gap-1",
+							children: [/* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "hover:bg-accent focus-visible:ring-ring flex min-w-0 flex-1 flex-col items-start rounded-md px-3 py-2 text-start outline-none focus-visible:ring-2",
+								onClick: () => void controller.openConversation(conversation.id),
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "w-full truncate text-sm font-medium",
+									children: conversation.title || t("ai.title", {}, "Copilot")
+								}), conversation.updatedAt && /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-xs",
+									children: format.relative(conversation.updatedAt)
+								})]
+							}), /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-sm",
+								"aria-label": t("ai.delete", {}, "Delete conversation"),
+								onClick: () => void controller.deleteConversation(conversation.id),
+								children: /* @__PURE__ */ jsx(Trash2Icon, { "aria-hidden": "true" })
+							})]
+						}, conversation.id))
+					})
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex-1 overflow-y-auto px-4 py-4",
+					role: "log",
+					"aria-live": "polite",
+					"aria-label": t("ai.messages", {}, "Messages"),
+					"data-slot": "ai-messages",
+					children: [
+						state.loading && /* @__PURE__ */ jsxs("div", {
+							className: "flex justify-center p-6",
+							children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: t("ai.loading", {}, "Loading")
+							})]
+						}),
+						!state.loading && state.messages.length === 0 && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col items-center gap-2 px-6 py-12 text-center",
+							"data-slot": "ai-empty",
+							children: [
+								/* @__PURE__ */ jsx(SparklesIcon, {
+									className: "text-primary size-8",
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "font-medium",
+									children: t("ai.empty_title", {}, "How can I help?")
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground text-sm",
+									children: t("ai.empty_description", {}, "Ask me to find or explain records, open pages or run actions. I always ask before changing anything.")
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-4",
+							children: [
+								state.messages.map((message) => /* @__PURE__ */ jsx(CopilotMessage, {
+									message,
+									controller,
+									deciding: state.deciding[message.id],
+									usage: usage(message)
+								}, message.id)),
+								state.sending && state.streaming && state.streaming.text !== "" && /* @__PURE__ */ jsx("div", {
+									className: "bg-muted/60 rounded-lg px-3 py-2 text-sm leading-relaxed break-words whitespace-pre-wrap",
+									"data-slot": "ai-streaming",
+									"aria-busy": "true",
+									children: state.streaming.text
+								}),
+								state.sending && /* @__PURE__ */ jsxs("div", {
+									className: "text-muted-foreground flex items-center gap-2 text-sm",
+									"data-slot": "ai-thinking",
+									children: [
+										/* @__PURE__ */ jsx(Spinner, { className: "size-4" }),
+										state.streaming ? t("ai.stream.writing", {}, "Writing…") : t("ai.thinking", {}, "Thinking…"),
+										state.streaming && /* @__PURE__ */ jsxs(Button, {
+											type: "button",
+											variant: "ghost",
+											size: "sm",
+											className: "ms-auto",
+											"data-slot": "ai-stream-stop",
+											"aria-label": t("ai.stream.stop_label", {}, "Stop writing the answer"),
+											onClick: () => controller.cancel(),
+											children: [/* @__PURE__ */ jsx(SquareIcon, {
+												"aria-hidden": "true",
+												className: "size-3.5"
+											}), t("ai.stream.stop", {}, "Stop")]
+										})
+									]
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "sr-only",
+									"aria-live": "polite",
+									"aria-atomic": "true",
+									children: state.streaming?.announcement ?? ""
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", { ref: end })
+					]
+				}),
+				state.view === "chat" && /* @__PURE__ */ jsxs("form", {
+					className: "flex flex-col gap-2 border-t p-3",
+					"data-slot": "ai-composer",
+					onSubmit: (event) => {
+						event.preventDefault();
+						controller.send();
+					},
+					children: [
+						state.error && /* @__PURE__ */ jsxs("p", {
+							role: "alert",
+							className: "text-destructive flex items-start gap-2 text-sm",
+							children: [/* @__PURE__ */ jsx(CircleAlertIcon, {
+								className: "mt-0.5 size-4 shrink-0",
+								"aria-hidden": "true"
+							}), state.error.message ?? t("ai.error", {}, "Something went wrong. Try again.")]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-end gap-2",
+							children: [/* @__PURE__ */ jsx(Textarea, {
+								ref: input,
+								rows: 2,
+								value: state.draft,
+								maxLength: 4e3,
+								placeholder: t("ai.placeholder", {}, "Ask about your data…"),
+								"aria-label": t("ai.placeholder", {}, "Ask about your data…"),
+								className: "max-h-40 min-h-10 flex-1 resize-none",
+								onChange: (event) => controller.setDraft(event.target.value),
+								onKeyDown
+							}), /* @__PURE__ */ jsx(Button, {
+								type: "submit",
+								size: "icon",
+								disabled: state.sending || state.draft.trim() === "",
+								"aria-label": t("ai.send", {}, "Send"),
+								children: /* @__PURE__ */ jsx(ArrowUpIcon, { "aria-hidden": "true" })
+							})]
+						}),
+						totals && /* @__PURE__ */ jsxs("p", {
+							className: "text-muted-foreground text-end text-xs",
+							"data-slot": "ai-usage",
+							children: [t("ai.tokens", { count: format.number(totals.inputTokens + totals.outputTokens) }, ":count tokens"), totals.cost !== void 0 && currency ? ` · ${t("ai.cost", { cost: format.money(totals.cost, currency, { maximumFractionDigits: 4 }) }, "≈ :cost")}` : ""]
+						})
+					]
+				})
+			]
+		})
+	});
+}
+function CopilotMessage({ message, controller, deciding, usage }) {
+	const t = useT();
+	if (message.role === "user") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "ai-message",
+		"data-role": "user",
+		className: "flex justify-end",
+		children: /* @__PURE__ */ jsxs("p", {
+			className: "bg-primary text-primary-foreground max-w-[85%] rounded-2xl rounded-ee-sm px-3 py-2 text-sm whitespace-pre-wrap",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [t("ai.you", {}, "You"), ": "]
+			}), message.content]
+		})
+	});
+	if (message.role === "error") return /* @__PURE__ */ jsxs("p", {
+		"data-slot": "ai-message",
+		"data-role": "error",
+		role: "alert",
+		className: "text-destructive flex items-start gap-2 text-sm",
+		children: [/* @__PURE__ */ jsx(CircleAlertIcon, {
+			className: "mt-0.5 size-4 shrink-0",
+			"aria-hidden": "true"
+		}), message.content]
+	});
+	if (message.role === "navigation") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "ai-message",
+		"data-role": "navigation",
+		children: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			onClick: () => message.url && router.visit(message.url),
+			children: [
+				/* @__PURE__ */ jsx(ExternalLinkIcon, {
+					className: "rtl:-scale-x-100",
+					"aria-hidden": "true"
+				}),
+				t("ai.open_link", {}, "Open"),
+				": ",
+				message.content
+			]
+		})
+	});
+	if (message.role === "action" && message.action) {
+		const action = message.action;
+		const status = action.status;
+		return /* @__PURE__ */ jsxs("div", {
+			"data-slot": "ai-action-card",
+			"data-status": status,
+			className: "bg-card rounded-lg border p-3 text-sm shadow-xs",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs font-medium tracking-wide uppercase",
+					children: t("ai.proposed_action", {}, "Proposed action")
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "mt-1 font-medium",
+					children: [action.label, action.record && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground font-normal",
+						children: [" · ", action.record]
+					})]
+				}),
+				message.content && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mt-1",
+					children: message.content
+				}),
+				action.inputs && action.inputs.length > 0 && /* @__PURE__ */ jsx("dl", {
+					className: "mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs",
+					children: action.inputs.map((input, index) => /* @__PURE__ */ jsxs("div", {
+						className: "contents",
+						children: [/* @__PURE__ */ jsx("dt", {
+							className: "text-muted-foreground",
+							children: input.label
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "break-words",
+							children: String(input.value ?? "—")
+						})]
+					}, index))
+				}),
+				action.error && /* @__PURE__ */ jsx("p", {
+					className: "text-destructive mt-2 text-xs",
+					children: action.error
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-3 flex items-center gap-2",
+					children: status === "pending" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							size: "sm",
+							disabled: deciding !== void 0,
+							onClick: () => void controller.decide(message.id, "confirm"),
+							children: [deciding === "confirm" && /* @__PURE__ */ jsx(Spinner, { className: "size-3" }), t("ai.confirm", {}, "Confirm")]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							variant: "ghost",
+							disabled: deciding !== void 0,
+							onClick: () => void controller.decide(message.id, "reject"),
+							children: t("ai.cancel", {}, "Cancel")
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground ms-auto text-xs",
+							children: t("ai.pending", {}, "Waiting for your confirmation")
+						})
+					] }) : /* @__PURE__ */ jsx(Badge, {
+						variant: status === "confirmed" ? "default" : status === "failed" ? "destructive" : "secondary",
+						children: status === "confirmed" ? t("ai.confirmed", {}, "Done") : status === "failed" ? t("ai.failed", {}, "Failed") : t("ai.rejected", {}, "Cancelled")
+					})
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "ai-message",
+		"data-role": "assistant",
+		"data-demo": message.demo ? "" : void 0,
+		className: "flex flex-col gap-2",
+		children: [
+			message.demo && /* @__PURE__ */ jsx(Badge, {
+				variant: "outline",
+				className: "self-start font-normal",
+				"data-ai-sample": "",
+				children: t("ai.sample", {}, "Sample answer — AI isn't configured")
+			}),
+			message.activity && message.activity.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-1",
+				children: message.activity.map((item, index) => /* @__PURE__ */ jsx(Badge, {
+					variant: "secondary",
+					className: "font-normal",
+					children: item.label
+				}, index))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 text-sm leading-relaxed",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "sr-only",
+					children: [t("ai.assistant", {}, "Copilot"), ": "]
+				}), copilotBlocks(message.content).map((block, index) => block.type === "p" ? /* @__PURE__ */ jsx("p", {
+					className: "whitespace-pre-wrap",
+					children: block.lines.join("\n")
+				}, index) : /* @__PURE__ */ jsx(MessageList, {
+					ordered: block.type === "ol",
+					items: block.lines
+				}, index))]
+			}),
+			usage && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-xs",
+				children: usage
+			})
+		]
+	});
+}
+/** No provider key: sample answers (info) or "AI isn't available" (warning). */
+function CopilotNotice({ notice }) {
+	const Icon = notice.status === "warning" ? TriangleAlertIcon : InfoIcon;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"data-slot": "ai-notice",
+		"data-status": notice.status,
+		className: "bg-muted/50 flex items-start gap-2 border-b px-4 py-3 text-sm",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			className: cn("mt-0.5 size-4 shrink-0", notice.status === "warning" ? "text-destructive" : "text-primary"),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "font-medium",
+				children: notice.heading
+			}), notice.description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground break-words",
+				children: notice.description
+			})]
+		})]
+	});
+}
+function MessageList({ ordered, items }) {
+	const className = cn("flex flex-col gap-1 ps-5", ordered ? "list-decimal" : "list-disc");
+	return ordered ? /* @__PURE__ */ jsx("ol", {
+		className,
+		children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: item }, index))
+	}) : /* @__PURE__ */ jsx("ul", {
+		className,
+		children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: item }, index))
+	});
+}
+//#endregion
+export { CopilotPanel };
+
+//# sourceMappingURL=copilot-panel.js.map

package/dist/components/ai/copilot-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copilot-panel.js","names":[],"sources":["../../../src/components/ai/copilot-panel.tsx"],"sourcesContent":["import {\n  type AiMessageSchema,\n  type AiSetupNoticeSchema,\n  type CopilotController,\n  copilotBlocks,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport {\n  ArrowUpIcon,\n  CircleAlertIcon,\n  ExternalLinkIcon,\n  HistoryIcon,\n  InfoIcon,\n  MessageSquarePlusIcon,\n  SparklesIcon,\n  SquareIcon,\n  Trash2Icon,\n  TriangleAlertIcon,\n} from 'lucide-react'\nimport { type KeyboardEvent, useEffect, useRef } from 'react'\nimport { useDirection, useFormatter, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet'\nimport { Spinner } from '../ui/spinner'\nimport { Textarea } from '../ui/textarea'\nimport { useCopilotState } from './copilot'\n\nexport function CopilotPanel({ controller }: { controller: CopilotController }) {\n  const t = useT()\n  const direction = useDirection()\n  const format = useFormatter()\n  const state = useCopilotState(controller)\n  const end = useRef<HTMLDivElement>(null)\n  const input = useRef<HTMLTextAreaElement>(null)\n  const totals = controller.totals()\n  const currency = controller.schema.currency\n\n  useEffect(() => {\n    end.current?.scrollIntoView?.({ block: 'end' })\n  }, [state.messages.length, state.sending, state.streaming?.text])\n\n  useEffect(() => {\n    if (state.open && state.view === 'chat') input.current?.focus()\n  }, [state.open, state.view])\n\n  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {\n      event.preventDefault()\n      void controller.send()\n    }\n  }\n\n  const usage = (message: AiMessageSchema) =>\n    message.usage\n      ? [\n          t(\n            'ai.tokens',\n            { count: format.number(message.usage.inputTokens + message.usage.outputTokens) },\n            ':count tokens',\n          ),\n          message.usage.cost !== undefined && currency\n            ? t(\n                'ai.cost',\n                { cost: format.money(message.usage.cost, currency, { maximumFractionDigits: 4 }) },\n                '≈ :cost',\n              )\n            : null,\n        ]\n          .filter(Boolean)\n          .join(' · ')\n      : null\n\n  return (\n    <Sheet open={state.open} onOpenChange={(open) => controller.setOpen(open)}>\n      <SheetContent\n        side={direction === 'rtl' ? 'left' : 'right'}\n        data-slot=\"ai-copilot-panel\"\n        className=\"flex w-full flex-col gap-0 p-0 sm:max-w-md\"\n      >\n        <SheetHeader className=\"border-b pe-12\">\n          <div className=\"flex items-center gap-2\">\n            <SparklesIcon className=\"text-primary size-4\" aria-hidden=\"true\" />\n            <SheetTitle className=\"flex-1 truncate\">\n              {state.view === 'history'\n                ? t('ai.history', {}, 'Conversations')\n                : state.conversation?.title || t('ai.title', {}, 'Copilot')}\n            </SheetTitle>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              aria-label={\n                state.view === 'history'\n                  ? t('ai.back', {}, 'Back to the conversation')\n                  : t('ai.history', {}, 'Conversations')\n              }\n              aria-pressed={state.view === 'history'}\n              onClick={() =>\n                state.view === 'history' ? controller.showChat() : void controller.showHistory()\n              }\n            >\n              <HistoryIcon aria-hidden=\"true\" />\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              aria-label={t('ai.new', {}, 'New conversation')}\n              onClick={() => controller.newConversation()}\n            >\n              <MessageSquarePlusIcon aria-hidden=\"true\" />\n            </Button>\n          </div>\n          <SheetDescription className=\"text-xs\" data-slot=\"ai-disclaimer\">\n            {t('ai.disclaimer', {}, 'AI can make mistakes. Check important information.')}\n          </SheetDescription>\n        </SheetHeader>\n\n        {controller.schema.notice && <CopilotNotice notice={controller.schema.notice} />}\n\n        {state.view === 'history' ? (\n          <div className=\"flex-1 overflow-y-auto p-2\" data-slot=\"ai-history\">\n            {state.loading ? (\n              <div className=\"flex justify-center p-6\">\n                <Spinner />\n                <span className=\"sr-only\">{t('ai.loading', {}, 'Loading')}</span>\n              </div>\n            ) : state.conversations.length === 0 ? (\n              <p className=\"text-muted-foreground p-6 text-center text-sm\">\n                {t('ai.no_conversations', {}, 'No conversations yet.')}\n              </p>\n            ) : (\n              <ul className=\"flex flex-col gap-1\">\n                {state.conversations.map((conversation) => (\n                  <li key={conversation.id} className=\"group flex items-center gap-1\">\n                    <button\n                      type=\"button\"\n                      className=\"hover:bg-accent focus-visible:ring-ring flex min-w-0 flex-1 flex-col items-start rounded-md px-3 py-2 text-start outline-none focus-visible:ring-2\"\n                      onClick={() => void controller.openConversation(conversation.id)}\n                    >\n                      <span className=\"w-full truncate text-sm font-medium\">\n                        {conversation.title || t('ai.title', {}, 'Copilot')}\n                      </span>\n                      {conversation.updatedAt && (\n                        <span className=\"text-muted-foreground text-xs\">\n                          {format.relative(conversation.updatedAt)}\n                        </span>\n                      )}\n                    </button>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      aria-label={t('ai.delete', {}, 'Delete conversation')}\n                      onClick={() => void controller.deleteConversation(conversation.id)}\n                    >\n                      <Trash2Icon aria-hidden=\"true\" />\n                    </Button>\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n        ) : (\n          <div\n            className=\"flex-1 overflow-y-auto px-4 py-4\"\n            role=\"log\"\n            aria-live=\"polite\"\n            aria-label={t('ai.messages', {}, 'Messages')}\n            data-slot=\"ai-messages\"\n          >\n            {state.loading && (\n              <div className=\"flex justify-center p-6\">\n                <Spinner />\n                <span className=\"sr-only\">{t('ai.loading', {}, 'Loading')}</span>\n              </div>\n            )}\n            {!state.loading && state.messages.length === 0 && (\n              <div\n                className=\"flex flex-col items-center gap-2 px-6 py-12 text-center\"\n                data-slot=\"ai-empty\"\n              >\n                <SparklesIcon className=\"text-primary size-8\" aria-hidden=\"true\" />\n                <p className=\"font-medium\">{t('ai.empty_title', {}, 'How can I help?')}</p>\n                <p className=\"text-muted-foreground text-sm\">\n                  {t(\n                    'ai.empty_description',\n                    {},\n                    'Ask me to find or explain records, open pages or run actions. I always ask before changing anything.',\n                  )}\n                </p>\n              </div>\n            )}\n            <div className=\"flex flex-col gap-4\">\n              {state.messages.map((message) => (\n                <CopilotMessage\n                  key={message.id}\n                  message={message}\n                  controller={controller}\n                  deciding={state.deciding[message.id]}\n                  usage={usage(message)}\n                />\n              ))}\n              {state.sending && state.streaming && state.streaming.text !== '' && (\n                <div\n                  className=\"bg-muted/60 rounded-lg px-3 py-2 text-sm leading-relaxed break-words whitespace-pre-wrap\"\n                  data-slot=\"ai-streaming\"\n                  aria-busy=\"true\"\n                >\n                  {state.streaming.text}\n                </div>\n              )}\n              {state.sending && (\n                <div\n                  className=\"text-muted-foreground flex items-center gap-2 text-sm\"\n                  data-slot=\"ai-thinking\"\n                >\n                  <Spinner className=\"size-4\" />\n                  {state.streaming\n                    ? t('ai.stream.writing', {}, 'Writing…')\n                    : t('ai.thinking', {}, 'Thinking…')}\n                  {state.streaming && (\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"ms-auto\"\n                      data-slot=\"ai-stream-stop\"\n                      aria-label={t('ai.stream.stop_label', {}, 'Stop writing the answer')}\n                      onClick={() => controller.cancel()}\n                    >\n                      <SquareIcon aria-hidden=\"true\" className=\"size-3.5\" />\n                      {t('ai.stream.stop', {}, 'Stop')}\n                    </Button>\n                  )}\n                </div>\n              )}\n              <div className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n                {state.streaming?.announcement ?? ''}\n              </div>\n            </div>\n            <div ref={end} />\n          </div>\n        )}\n\n        {state.view === 'chat' && (\n          <form\n            className=\"flex flex-col gap-2 border-t p-3\"\n            data-slot=\"ai-composer\"\n            onSubmit={(event) => {\n              event.preventDefault()\n              void controller.send()\n            }}\n          >\n            {state.error && (\n              <p role=\"alert\" className=\"text-destructive flex items-start gap-2 text-sm\">\n                <CircleAlertIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                {state.error.message ?? t('ai.error', {}, 'Something went wrong. Try again.')}\n              </p>\n            )}\n            <div className=\"flex items-end gap-2\">\n              <Textarea\n                ref={input}\n                rows={2}\n                value={state.draft}\n                maxLength={4000}\n                placeholder={t('ai.placeholder', {}, 'Ask about your data…')}\n                aria-label={t('ai.placeholder', {}, 'Ask about your data…')}\n                className=\"max-h-40 min-h-10 flex-1 resize-none\"\n                onChange={(event) => controller.setDraft(event.target.value)}\n                onKeyDown={onKeyDown}\n              />\n              <Button\n                type=\"submit\"\n                size=\"icon\"\n                disabled={state.sending || state.draft.trim() === ''}\n                aria-label={t('ai.send', {}, 'Send')}\n              >\n                <ArrowUpIcon aria-hidden=\"true\" />\n              </Button>\n            </div>\n            {totals && (\n              <p className=\"text-muted-foreground text-end text-xs\" data-slot=\"ai-usage\">\n                {t(\n                  'ai.tokens',\n                  { count: format.number(totals.inputTokens + totals.outputTokens) },\n                  ':count tokens',\n                )}\n                {totals.cost !== undefined && currency\n                  ? ` · ${t('ai.cost', { cost: format.money(totals.cost, currency, { maximumFractionDigits: 4 }) }, '≈ :cost')}`\n                  : ''}\n              </p>\n            )}\n          </form>\n        )}\n      </SheetContent>\n    </Sheet>\n  )\n}\n\nfunction CopilotMessage({\n  message,\n  controller,\n  deciding,\n  usage,\n}: {\n  message: AiMessageSchema\n  controller: CopilotController\n  deciding?: 'confirm' | 'reject'\n  usage: string | null\n}) {\n  const t = useT()\n\n  if (message.role === 'user') {\n    return (\n      <div data-slot=\"ai-message\" data-role=\"user\" className=\"flex justify-end\">\n        <p className=\"bg-primary text-primary-foreground max-w-[85%] rounded-2xl rounded-ee-sm px-3 py-2 text-sm whitespace-pre-wrap\">\n          <span className=\"sr-only\">{t('ai.you', {}, 'You')}: </span>\n          {message.content}\n        </p>\n      </div>\n    )\n  }\n\n  if (message.role === 'error') {\n    return (\n      <p\n        data-slot=\"ai-message\"\n        data-role=\"error\"\n        role=\"alert\"\n        className=\"text-destructive flex items-start gap-2 text-sm\"\n      >\n        <CircleAlertIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n        {message.content}\n      </p>\n    )\n  }\n\n  if (message.role === 'navigation') {\n    return (\n      <div data-slot=\"ai-message\" data-role=\"navigation\">\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => message.url && router.visit(message.url)}\n        >\n          <ExternalLinkIcon className=\"rtl:-scale-x-100\" aria-hidden=\"true\" />\n          {t('ai.open_link', {}, 'Open')}: {message.content}\n        </Button>\n      </div>\n    )\n  }\n\n  if (message.role === 'action' && message.action) {\n    const action = message.action\n    const status = action.status\n\n    return (\n      <div\n        data-slot=\"ai-action-card\"\n        data-status={status}\n        className=\"bg-card rounded-lg border p-3 text-sm shadow-xs\"\n      >\n        <p className=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">\n          {t('ai.proposed_action', {}, 'Proposed action')}\n        </p>\n        <p className=\"mt-1 font-medium\">\n          {action.label}\n          {action.record && (\n            <span className=\"text-muted-foreground font-normal\"> · {action.record}</span>\n          )}\n        </p>\n        {message.content && <p className=\"text-muted-foreground mt-1\">{message.content}</p>}\n        {action.inputs && action.inputs.length > 0 && (\n          <dl className=\"mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs\">\n            {action.inputs.map((input, index) => (\n              <div key={index} className=\"contents\">\n                <dt className=\"text-muted-foreground\">{input.label}</dt>\n                <dd className=\"break-words\">{String(input.value ?? '—')}</dd>\n              </div>\n            ))}\n          </dl>\n        )}\n        {action.error && <p className=\"text-destructive mt-2 text-xs\">{action.error}</p>}\n        <div className=\"mt-3 flex items-center gap-2\">\n          {status === 'pending' ? (\n            <>\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                disabled={deciding !== undefined}\n                onClick={() => void controller.decide(message.id, 'confirm')}\n              >\n                {deciding === 'confirm' && <Spinner className=\"size-3\" />}\n                {t('ai.confirm', {}, 'Confirm')}\n              </Button>\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                variant=\"ghost\"\n                disabled={deciding !== undefined}\n                onClick={() => void controller.decide(message.id, 'reject')}\n              >\n                {t('ai.cancel', {}, 'Cancel')}\n              </Button>\n              <span className=\"text-muted-foreground ms-auto text-xs\">\n                {t('ai.pending', {}, 'Waiting for your confirmation')}\n              </span>\n            </>\n          ) : (\n            <Badge\n              variant={\n                status === 'confirmed'\n                  ? 'default'\n                  : status === 'failed'\n                    ? 'destructive'\n                    : 'secondary'\n              }\n            >\n              {status === 'confirmed'\n                ? t('ai.confirmed', {}, 'Done')\n                : status === 'failed'\n                  ? t('ai.failed', {}, 'Failed')\n                  : t('ai.rejected', {}, 'Cancelled')}\n            </Badge>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"ai-message\"\n      data-role=\"assistant\"\n      data-demo={message.demo ? '' : undefined}\n      className=\"flex flex-col gap-2\"\n    >\n      {message.demo && (\n        <Badge variant=\"outline\" className=\"self-start font-normal\" data-ai-sample=\"\">\n          {t('ai.sample', {}, \"Sample answer — AI isn't configured\")}\n        </Badge>\n      )}\n      {message.activity && message.activity.length > 0 && (\n        <div className=\"flex flex-wrap gap-1\">\n          {message.activity.map((item, index) => (\n            <Badge key={index} variant=\"secondary\" className=\"font-normal\">\n              {item.label}\n            </Badge>\n          ))}\n        </div>\n      )}\n      <div className=\"flex flex-col gap-2 text-sm leading-relaxed\">\n        <span className=\"sr-only\">{t('ai.assistant', {}, 'Copilot')}: </span>\n        {copilotBlocks(message.content).map((block, index) =>\n          block.type === 'p' ? (\n            <p key={index} className=\"whitespace-pre-wrap\">\n              {block.lines.join('\\n')}\n            </p>\n          ) : (\n            <MessageList key={index} ordered={block.type === 'ol'} items={block.lines} />\n          ),\n        )}\n      </div>\n      {usage && <p className=\"text-muted-foreground text-xs\">{usage}</p>}\n    </div>\n  )\n}\n\n/** No provider key: sample answers (info) or \"AI isn't available\" (warning). */\nfunction CopilotNotice({ notice }: { notice: AiSetupNoticeSchema }) {\n  const Icon = notice.status === 'warning' ? TriangleAlertIcon : InfoIcon\n\n  return (\n    <div\n      role=\"status\"\n      data-slot=\"ai-notice\"\n      data-status={notice.status}\n      className=\"bg-muted/50 flex items-start gap-2 border-b px-4 py-3 text-sm\"\n    >\n      <Icon\n        className={cn(\n          'mt-0.5 size-4 shrink-0',\n          notice.status === 'warning' ? 'text-destructive' : 'text-primary',\n        )}\n        aria-hidden=\"true\"\n      />\n      <div className=\"flex min-w-0 flex-col gap-0.5\">\n        <p className=\"font-medium\">{notice.heading}</p>\n        {notice.description && (\n          <p className=\"text-muted-foreground break-words\">{notice.description}</p>\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction MessageList({ ordered, items }: { ordered: boolean; items: string[] }) {\n  const className = cn('flex flex-col gap-1 ps-5', ordered ? 'list-decimal' : 'list-disc')\n\n  return ordered ? (\n    <ol className={className}>\n      {items.map((item, index) => (\n        <li key={index}>{item}</li>\n      ))}\n    </ol>\n  ) : (\n    <ul className={className}>\n      {items.map((item, index) => (\n        <li key={index}>{item}</li>\n      ))}\n    </ul>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ai/copilot.d.ts

@@ -0,0 +1,12 @@
+import { AiCopilotSchema, CopilotController } from "@alfakit/core";
+//#region src/components/ai/copilot.d.ts
+/**
+ * The copilot of alfasix/alfakit-ai (`ai:copilot`): a topbar button (and `mod+j`) opening
+ * a chat slide-over. Questions, tools and actions run on the server; proposed actions
+ * run only when the user confirms them in the chat.
+ */
+export declare function AiCopilot({ component }: {
+  component: AiCopilotSchema;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=copilot.d.ts.map

package/dist/components/ai/copilot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copilot.d.ts","names":[],"sources":["../../../src/components/ai/copilot.tsx"],"mappings":";;;;;;;wBA+BgB,YAAY;EAAe,WAAW;oBAAiB,IAAA"}

package/dist/components/ai/copilot.js

@@ -0,0 +1,66 @@
+import { useT } from "../../context.js";
+import { Button } from "../ui/button.js";
+import { lazyComponent } from "../../lib/lazy.js";
+import { CopilotController, shortcuts } from "@alfakit/core";
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SparklesIcon } from "lucide-react";
+//#region src/components/ai/copilot.tsx
+/** The chat slide-over; its code loads the first time the copilot opens. */
+const CopilotPanel = lazyComponent(() => import("./copilot-panel.js").then((module) => module.CopilotPanel), () => null);
+function useCopilotState(controller) {
+	return useSyncExternalStore((listener) => controller.subscribe(listener), () => controller.state, () => controller.state);
+}
+/**
+* The copilot of alfasix/alfakit-ai (`ai:copilot`): a topbar button (and `mod+j`) opening
+* a chat slide-over. Questions, tools and actions run on the server; proposed actions
+* run only when the user confirms them in the chat.
+*/
+function AiCopilot({ component }) {
+	const t = useT();
+	const controller = useMemo(() => new CopilotController(component), [component.endpoints.send]);
+	const state = useCopilotState(controller);
+	const [mounted, setMounted] = useState(false);
+	const keys = JSON.stringify(component.keyBindings ?? []);
+	const label = t("ai.open", {}, "Open AI copilot");
+	useEffect(() => controller.subscribe((next) => next.open && setMounted(true)), [controller]);
+	useEffect(() => {
+		const bindings = JSON.parse(keys);
+		if (bindings.length === 0) return;
+		return shortcuts.register({
+			id: "ai.copilot",
+			keys: bindings,
+			label,
+			group: "general",
+			allowInInputs: true,
+			handler: () => controller.toggle()
+		});
+	}, [
+		controller,
+		keys,
+		label
+	]);
+	if (component.canUse === false) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "ai-copilot",
+		className: "contents",
+		children: [/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			"data-slot": "ai-copilot-trigger",
+			"aria-label": label,
+			"aria-expanded": state.open,
+			"aria-haspopup": "dialog",
+			title: label,
+			onClick: () => controller.open(),
+			onPointerEnter: () => void CopilotPanel.preload(),
+			onFocus: () => void CopilotPanel.preload(),
+			children: /* @__PURE__ */ jsx(SparklesIcon, { "aria-hidden": "true" })
+		}), mounted && /* @__PURE__ */ jsx(CopilotPanel, { controller })]
+	});
+}
+//#endregion
+export { AiCopilot, useCopilotState };
+
+//# sourceMappingURL=copilot.js.map

package/dist/components/ai/copilot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copilot.js","names":[],"sources":["../../../src/components/ai/copilot.tsx"],"sourcesContent":["import {\n  type AiCopilotSchema,\n  CopilotController,\n  type CopilotState,\n  shortcuts,\n} from '@alfakit/core'\nimport { SparklesIcon } from 'lucide-react'\nimport { useEffect, useMemo, useState, useSyncExternalStore } from 'react'\nimport { useT } from '../../context'\nimport { lazyComponent } from '../../lib/lazy'\nimport { Button } from '../ui/button'\n\n/** The chat slide-over; its code loads the first time the copilot opens. */\nconst CopilotPanel = lazyComponent<{ controller: CopilotController }>(\n  () => import('./copilot-panel').then((module) => module.CopilotPanel),\n  () => null,\n)\n\nexport function useCopilotState(controller: CopilotController): CopilotState {\n  return useSyncExternalStore(\n    (listener) => controller.subscribe(listener),\n    () => controller.state,\n    () => controller.state,\n  )\n}\n\n/**\n * The copilot of alfasix/alfakit-ai (`ai:copilot`): a topbar button (and `mod+j`) opening\n * a chat slide-over. Questions, tools and actions run on the server; proposed actions\n * run only when the user confirms them in the chat.\n */\nexport function AiCopilot({ component }: { component: AiCopilotSchema }) {\n  const t = useT()\n  // One controller per panel: Inertia visits pass new props objects.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const controller = useMemo(() => new CopilotController(component), [component.endpoints.send])\n  const state = useCopilotState(controller)\n  const [mounted, setMounted] = useState(false)\n  const keys = JSON.stringify(component.keyBindings ?? [])\n  const label = t('ai.open', {}, 'Open AI copilot')\n\n  // The panel mounts the first time the copilot opens (button or shortcut), then stays.\n  useEffect(() => controller.subscribe((next) => next.open && setMounted(true)), [controller])\n\n  useEffect(() => {\n    const bindings = JSON.parse(keys) as string[]\n\n    if (bindings.length === 0) return\n\n    return shortcuts.register({\n      id: 'ai.copilot',\n      keys: bindings,\n      label,\n      group: 'general',\n      allowInInputs: true,\n      handler: () => controller.toggle(),\n    })\n  }, [controller, keys, label])\n\n  if (component.canUse === false) return null\n\n  return (\n    <div data-slot=\"ai-copilot\" className=\"contents\">\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        data-slot=\"ai-copilot-trigger\"\n        aria-label={label}\n        aria-expanded={state.open}\n        aria-haspopup=\"dialog\"\n        title={label}\n        onClick={() => controller.open()}\n        onPointerEnter={() => void CopilotPanel.preload()}\n        onFocus={() => void CopilotPanel.preload()}\n      >\n        <SparklesIcon aria-hidden=\"true\" />\n      </Button>\n      {mounted && <CopilotPanel controller={controller} />}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAaA,MAAM,eAAe,oBACb,OAAO,qBAAkB,CAAC,MAAM,WAAW,OAAO,YAAY,SAC9D,IACR;AAEA,SAAgB,gBAAgB,YAA6C;CAC3E,OAAO,sBACJ,aAAa,WAAW,UAAU,QAAQ,SACrC,WAAW,aACX,WAAW,KACnB;AACF;;;;;;AAOA,SAAgB,UAAU,EAAE,aAA6C;CACvE,MAAM,IAAI,KAAK;CAGf,MAAM,aAAa,cAAc,IAAI,kBAAkB,SAAS,GAAG,CAAC,UAAU,UAAU,IAAI,CAAC;CAC7F,MAAM,QAAQ,gBAAgB,UAAU;CACxC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,OAAO,KAAK,UAAU,UAAU,eAAe,CAAC,CAAC;CACvD,MAAM,QAAQ,EAAE,WAAW,CAAC,GAAG,iBAAiB;CAGhD,gBAAgB,WAAW,WAAW,SAAS,KAAK,QAAQ,WAAW,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC;CAE3F,gBAAgB;EACd,MAAM,WAAW,KAAK,MAAM,IAAI;EAEhC,IAAI,SAAS,WAAW,GAAG;EAE3B,OAAO,UAAU,SAAS;GACxB,IAAI;GACJ,MAAM;GACN;GACA,OAAO;GACP,eAAe;GACf,eAAe,WAAW,OAAO;EACnC,CAAC;CACH,GAAG;EAAC;EAAY;EAAM;CAAK,CAAC;CAE5B,IAAI,UAAU,WAAW,OAAO,OAAO;CAEvC,OACE,qBAAC,OAAD;EAAK,aAAU;EAAa,WAAU;EAAtC,UAAA,CACE,oBAAC,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,aAAU;GACV,cAAY;GACZ,iBAAe,MAAM;GACrB,iBAAc;GACd,OAAO;GACP,eAAe,WAAW,KAAK;GAC/B,sBAAsB,KAAK,aAAa,QAAQ;GAChD,eAAe,KAAK,aAAa,QAAQ;GAEzC,UAAA,oBAAC,cAAD,EAAc,eAAY,OAAQ,CAAA;EAC5B,CAAA,GACP,WAAW,oBAAC,cAAD,EAA0B,WAAa,CAAA,CAChD;;AAET"}

package/dist/components/ai/index.d.ts

@@ -0,0 +1,3 @@
+import { AiCopilot } from "./copilot.js";
+import { AiStream } from "./stream-lazy.js";
+export { AiCopilot, AiStream };

package/dist/components/ai/index.js

@@ -0,0 +1,3 @@
+import { AiCopilot } from "./copilot.js";
+import { AiStream } from "./stream-lazy.js";
+export { AiCopilot, AiStream };

package/dist/components/ai/stream-lazy.d.ts

@@ -0,0 +1,9 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { AiStreamSchema } from "@alfakit/core";
+//#region src/components/ai/stream-lazy.d.ts
+/** A streamed AI answer; its code loads the first time an answer streams. */
+export declare const AiStream: LazyComponent<{
+  component: AiStreamSchema;
+}>;
+//#endregion
+//# sourceMappingURL=stream-lazy.d.ts.map

package/dist/components/ai/stream-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stream-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/ai/stream-lazy.tsx"],"mappings":";;;;qBAIa,UAAsCA;EAAA,WAAA"}

package/dist/components/ai/stream-lazy.js

@@ -0,0 +1,13 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai/stream-lazy.tsx
+/** A streamed AI answer; its code loads the first time an answer streams. */
+const AiStream = lazyComponent(() => import("./stream.js").then((module) => module.AiStream), () => /* @__PURE__ */ jsx("div", {
+	"data-slot": "ai-stream",
+	className: "h-12",
+	"aria-busy": "true"
+}));
+//#endregion
+export { AiStream };
+
+//# sourceMappingURL=stream-lazy.js.map

package/dist/components/ai/stream-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stream-lazy.js","names":[],"sources":["../../../src/components/ai/stream-lazy.tsx"],"sourcesContent":["import type { AiStreamSchema } from '@alfakit/core'\nimport { lazyComponent } from '../../lib/lazy'\n\n/** A streamed AI answer; its code loads the first time an answer streams. */\nexport const AiStream = lazyComponent<{ component: AiStreamSchema }>(\n  () => import('./stream').then((module) => module.AiStream),\n  () => <div data-slot=\"ai-stream\" className=\"h-12\" aria-busy=\"true\" />,\n)\n"],"mappings":";;;;AAIA,MAAa,WAAW,oBAChB,OAAO,cAAW,CAAC,MAAM,WAAW,OAAO,QAAQ,SACnD,oBAAC,OAAD;CAAK,aAAU;CAAY,WAAU;CAAO,aAAU;AAAQ,CAAA,CACtE"}