@ecsplico/editor 0.0.0-stage → 2.0.0

package/dist/features/ai/react/AiSidebar.js

@@ -0,0 +1,339 @@
+import { conversionsOf } from "../../../core/pipeline.js";
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { cn } from "../../../react/ui/utils.js";
+import { Icon } from "../../../react/Icon.js";
+import { useStore } from "../../../react/use-store.js";
+import { Button } from "../../../react/ui/button.js";
+import { CHAT_LIMITS } from "../protocol/chat.js";
+import { AI_LIMITS, blockTasks, withTaskHeading } from "../protocol/tasks.js";
+import { selectionScope } from "../agent-ops.js";
+import { createAiSidebarFlow } from "../sidebar-flow.js";
+import { useNotifier } from "../../../react/use-notifier.js";
+import { Alert, AlertTitle } from "../../../react/ui/alert.js";
+import { Input } from "../../../react/ui/input.js";
+import { Textarea } from "../../../react/ui/textarea.js";
+import { ModelQuickSwitch } from "./ModelQuickSwitch.js";
+import { useAiAssistant } from "./use-ai-assistant.js";
+import { Badge } from "../../../react/ui/badge.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../react/ui/tooltip.js";
+import { DocumentChatAnswer } from "./DocumentChatAnswer.js";
+import { DocumentChatOps } from "./DocumentChatOps.js";
+import { useDocumentChat } from "./use-document-chat.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useEditorState } from "@tiptap/react";
+//#region src/features/ai/react/AiSidebar.tsx
+const quickActions = blockTasks().filter((task) => !task.caretMenu);
+/**
+* Docked AI sidebar „KI“: a plain `aside` the host places beside the editor (no overlay, no focus trap), so text can be
+* selected and changes reviewed next to it. Document chat: questions about the open document, answers stream in with
+* quote links; edit requests come back as operations shown in the in-document review, limited to the selected blocks
+* while text is selected. Block generation: quick actions (`blockTasks()`) stream their result into the conversation,
+* where „Übernehmen“ inserts it after the caret's block (or at the document's end) and „Verwerfen“ drops it.
+* Unmounting ends both: hosts hide it with `open={false}` (or a class) so the conversation survives closing.
+*/
+function AiSidebar({ editor, open, onOpenChange, className }) {
+	const notify = useNotifier(editor);
+	const { t } = useEditorI18n();
+	const chat = useDocumentChat(editor);
+	const assistant = useAiAssistant(editor);
+	const { messages, ops, streaming, error } = chat;
+	const { status: generationStatus, output, error: generationError } = assistant;
+	const [question, setQuestion] = useState("");
+	const scroller = useRef(null);
+	const scope = useEditorState({
+		editor: editor ?? null,
+		selector: ({ editor: current }) => current && !current.isDestroyed ? selectionScope(current.state) : null
+	});
+	const providers = useMemo(() => editor ? conversionsOf(editor) : [], [editor]);
+	const latestEditor = useRef(editor);
+	latestEditor.current = editor;
+	const flow = useMemo(() => createAiSidebarFlow({
+		chat: chat.model,
+		assistant: assistant.model,
+		notify,
+		t,
+		editor: () => latestEditor.current
+	}), [
+		chat.model,
+		assistant.model,
+		notify,
+		t
+	]);
+	/** The task whose inline prompt field is open (tasks with `needsPrompt`, i.e. `generate`); null while closed. */
+	const [promptTask, setPromptTask] = useState(null);
+	const [prompt, setPrompt] = useState("");
+	/** The generation streaming right now (a turn in `messages`); null while none runs. */
+	const running = useStore(flow.running);
+	const busy = streaming || generationStatus === "streaming";
+	async function send() {
+		const text = question.trim();
+		if (!text || !flow.canRun()) return;
+		setQuestion("");
+		if (!await flow.send(text)) setQuestion((current) => current || text);
+	}
+	function clearSelection() {
+		if (editor) editor.commands.setTextSelection(editor.state.selection.to);
+	}
+	function onReveal(op) {
+		if (editor && !chat.reveal(editor, op)) notify({
+			title: t("ai.sidebar.revealMissing"),
+			kind: "warning",
+			icon: "i-lucide-search-x"
+		});
+	}
+	function onKeydown(event) {
+		if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		send();
+	}
+	/** Quick action chip: a task with a prompt opens (or closes) its inline prompt field, the others run right away. */
+	function pick(task) {
+		if (task.needsPrompt) setPromptTask((current) => current === task ? null : task);
+		else flow.generate(task);
+	}
+	async function submitPrompt() {
+		const task = promptTask;
+		const text = prompt.trim();
+		if (!task || !text || !flow.canRun()) return;
+		setPrompt("");
+		setPromptTask(null);
+		if (!await flow.generate(task, text)) {
+			setPrompt((current) => current || text);
+			setPromptTask((current) => current ?? task);
+		}
+	}
+	function onPromptKeydown(event) {
+		if (event.nativeEvent.isComposing) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			setPromptTask(null);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			submitPrompt();
+		}
+	}
+	/** The streamed result while `generation` runs, else its final Markdown. */
+	function generationMarkdown(generation) {
+		return generation === running ? output : generation.markdown;
+	}
+	const last = messages.at(-1);
+	const lastOps = last?.role === "assistant" ? last.ops?.length : void 0;
+	useEffect(() => {
+		scroller.current?.scrollTo({ top: scroller.current.scrollHeight });
+	}, [
+		messages.length,
+		last?.content,
+		lastOps,
+		output
+	]);
+	useEffect(() => () => flow.end(), [flow]);
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("aside", {
+		className: cn("flex min-h-0 flex-col", className, open === false && "hidden"),
+		"aria-label": t("ai.sidebar.label"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 border-b border-border p-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							className: "font-semibold text-foreground",
+							children: t("ai.sidebar.title")
+						}),
+						/* @__PURE__ */ jsx(ModelQuickSwitch, {
+							slot: "generate",
+							size: "xs",
+							...editor && { editor },
+							className: "min-w-0 flex-1"
+						}),
+						/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								size: "icon-sm",
+								variant: "ghost",
+								"aria-label": t("ai.sidebar.newConversation"),
+								disabled: !messages.length && !error && !generationError,
+								onClick: () => flow.newConversation(),
+								children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-message-square-plus" })
+							})
+						}), /* @__PURE__ */ jsx(TooltipContent, { children: t("ai.sidebar.newConversation") })] }),
+						/* @__PURE__ */ jsx(Button, {
+							size: "icon-sm",
+							variant: "ghost",
+							"aria-label": t("ai.sidebar.close"),
+							onClick: () => onOpenChange?.(false),
+							children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-x" })
+						})
+					]
+				}), scope && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsxs(Badge, {
+						variant: "secondary",
+						className: "h-auto bg-primary/10 py-0.5 text-primary",
+						title: t("ai.sidebar.selection.title"),
+						children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-text-select" }), t(scope.blocks === 1 ? "ai.sidebar.selection.one" : "ai.sidebar.selection.other", { n: scope.blocks })]
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "icon-xs",
+						variant: "ghost",
+						"aria-label": t("ai.sidebar.selection.clear"),
+						onClick: clearSelection,
+						children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-x" })
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: scroller,
+				className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4",
+				children: [
+					!messages.length && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: t("ai.sidebar.intro")
+					}),
+					messages.map((message, index) => {
+						if (message.role === "user") return /* @__PURE__ */ jsx("div", {
+							className: "max-w-[85%] self-end whitespace-pre-wrap rounded-lg bg-muted px-3 py-2 text-sm",
+							children: message.content
+						}, index);
+						const { generation } = message;
+						if (generation) {
+							const markdown = generationMarkdown(generation);
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2 rounded-lg border border-border p-3 text-sm",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-1.5 text-xs font-medium text-muted-foreground",
+										children: [/* @__PURE__ */ jsx(Icon, { name: generation.task.icon }), /* @__PURE__ */ jsx("span", {
+											className: "truncate",
+											children: t(generation.task.labelKey)
+										})]
+									}),
+									generation.prompt && /* @__PURE__ */ jsx("p", {
+										className: "whitespace-pre-wrap text-xs text-muted-foreground",
+										children: generation.prompt
+									}),
+									markdown ? /* @__PURE__ */ jsx(DocumentChatAnswer, {
+										markdown: withTaskHeading(generation.task, markdown, t),
+										editor
+									}) : /* @__PURE__ */ jsx(Icon, {
+										name: "i-lucide-loader-circle",
+										className: "animate-spin text-muted-foreground"
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "flex justify-end gap-2",
+										children: generation === running ? /* @__PURE__ */ jsxs(Button, {
+											size: "xs",
+											variant: "outline",
+											onClick: () => assistant.abort(),
+											children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-square" }), t("ai.sidebar.stop")]
+										}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+											size: "xs",
+											variant: "ghost",
+											onClick: () => flow.drop(generation),
+											children: t("ai.sidebar.discard")
+										}), /* @__PURE__ */ jsx(Button, {
+											size: "xs",
+											disabled: !editor || !generation.done,
+											onClick: () => flow.apply(generation),
+											children: t("ai.sidebar.apply")
+										})] })
+									})
+								]
+							}, index);
+						}
+						return /* @__PURE__ */ jsxs("div", {
+							className: "text-sm",
+							children: [message.content && /* @__PURE__ */ jsx(DocumentChatAnswer, {
+								markdown: message.content,
+								editor
+							}), message.ops?.length || message.problems?.length ? /* @__PURE__ */ jsx(DocumentChatOps, {
+								ops: message.ops ?? [],
+								states: ops,
+								...message.problems && { problems: message.problems },
+								providers,
+								onDecide: (id, accept) => {
+									if (editor) chat.decide(editor, id, accept);
+								},
+								onReveal
+							}) : !message.content && /* @__PURE__ */ jsx(Icon, {
+								name: "i-lucide-loader-circle",
+								className: "animate-spin text-muted-foreground"
+							})]
+						}, index);
+					}),
+					error && /* @__PURE__ */ jsx(Alert, {
+						variant: "destructive",
+						children: /* @__PURE__ */ jsx(AlertTitle, { children: error })
+					}),
+					generationError && /* @__PURE__ */ jsx(Alert, {
+						variant: "destructive",
+						children: /* @__PURE__ */ jsx(AlertTitle, { children: generationError })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 border-t border-border p-3",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-1",
+						role: "group",
+						"aria-label": t("ai.sidebar.generateGroup"),
+						children: quickActions.map((task) => /* @__PURE__ */ jsxs(Button, {
+							size: "xs",
+							variant: "secondary",
+							className: cn(promptTask === task && "text-primary ring-1 ring-primary/40"),
+							"aria-pressed": promptTask === task,
+							disabled: !editor || busy,
+							onClick: () => pick(task),
+							children: [/* @__PURE__ */ jsx(Icon, { name: task.icon }), t(task.labelKey)]
+						}, task.id))
+					}),
+					promptTask && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(Input, {
+							value: prompt,
+							autoFocus: true,
+							placeholder: promptTask.promptLabelKey && t(promptTask.promptLabelKey),
+							maxLength: AI_LIMITS.prompt,
+							"aria-label": promptTask.promptLabelKey && t(promptTask.promptLabelKey),
+							className: "min-w-0 flex-1",
+							onChange: (event) => setPrompt(event.target.value),
+							onKeyDown: onPromptKeydown
+						}), /* @__PURE__ */ jsxs(Button, {
+							size: "sm",
+							disabled: !editor || busy || !prompt.trim(),
+							onClick: () => void submitPrompt(),
+							children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-sparkles" }), t("ai.sidebar.generate")]
+						})]
+					}),
+					/* @__PURE__ */ jsx(Textarea, {
+						value: question,
+						placeholder: t("ai.sidebar.placeholder"),
+						rows: 2,
+						maxLength: CHAT_LIMITS.message,
+						className: "max-h-36 min-h-0 w-full",
+						"aria-label": t("ai.sidebar.messageLabel"),
+						onChange: (event) => setQuestion(event.target.value),
+						onKeyDown: onKeydown
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex justify-end gap-2",
+						children: streaming ? /* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							onClick: () => chat.abort(),
+							children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-square" }), t("ai.sidebar.stop")]
+						}) : /* @__PURE__ */ jsxs(Button, {
+							disabled: !editor || busy || !question.trim(),
+							onClick: () => void send(),
+							children: [/* @__PURE__ */ jsx(Icon, { name: "i-lucide-send" }), t("ai.sidebar.send")]
+						})
+					})
+				]
+			})
+		]
+	}) });
+}
+//#endregion
+export { AiSidebar };
+
+//# sourceMappingURL=AiSidebar.js.map

package/dist/features/ai/react/AiSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiSidebar.js","names":[],"sources":["../../../../src/features/ai/react/AiSidebar.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEditorState } from '@tiptap/react'\nimport { type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react'\nimport { conversionsOf } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { useStore } from '../../../react/use-store'\nimport { Alert, AlertTitle } from '../../../react/ui/alert'\nimport { Badge } from '../../../react/ui/badge'\nimport { Button } from '../../../react/ui/button'\nimport { Input } from '../../../react/ui/input'\nimport { Textarea } from '../../../react/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../react/ui/tooltip'\nimport { cn } from '../../../react/ui/utils'\nimport { selectionScope } from '../agent-ops'\nimport type { DocumentChatGeneration } from '../document-chat-model'\nimport { type AgentOp, AI_LIMITS, type AiTask, blockTasks, CHAT_LIMITS, withTaskHeading } from '../protocol'\nimport { createAiSidebarFlow } from '../sidebar-flow'\nimport { DocumentChatAnswer } from './DocumentChatAnswer'\nimport { DocumentChatOps } from './DocumentChatOps'\nimport { ModelQuickSwitch } from './ModelQuickSwitch'\nimport { useAiAssistant } from './use-ai-assistant'\nimport { useDocumentChat } from './use-document-chat'\nimport { useNotifier } from '../../../react/use-notifier'\n\n// Caret-only tasks (`continue`) stay in the AI menu at the caret, which knows where the text ends.\nconst quickActions = blockTasks().filter(task => !task.caretMenu)\n\n/**\n * Docked AI sidebar „KI“: a plain `aside` the host places beside the editor (no overlay, no focus trap), so text can be\n * selected and changes reviewed next to it. Document chat: questions about the open document, answers stream in with\n * quote links; edit requests come back as operations shown in the in-document review, limited to the selected blocks\n * while text is selected. Block generation: quick actions (`blockTasks()`) stream their result into the conversation,\n * where „Übernehmen“ inserts it after the caret's block (or at the document's end) and „Verwerfen“ drops it.\n * Unmounting ends both: hosts hide it with `open={false}` (or a class) so the conversation survives closing.\n */\nexport function AiSidebar({ editor, open, onOpenChange, className }: {\n  editor: Editor | undefined\n  /** Hides the sidebar (it stays mounted, so the conversation survives) while false. */\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  className?: string\n}) {\n  const notify = useNotifier(editor)\n  const { t } = useEditorI18n()\n  const chat = useDocumentChat(editor)\n  const assistant = useAiAssistant(editor)\n  const { messages, ops, streaming, error } = chat\n  const { status: generationStatus, output, error: generationError } = assistant\n  const [question, setQuestion] = useState('')\n  const scroller = useRef<HTMLDivElement>(null)\n  // The scope follows every selection change of the editor.\n  const scope = useEditorState({\n    editor: editor ?? null,\n    selector: ({ editor: current }) => current && !current.isDestroyed ? selectionScope(current.state) : null,\n  })\n  const providers = useMemo(() => editor ? conversionsOf(editor) : [], [editor])\n  // The latest editor, for the flow's steps that continue after an await.\n  const latestEditor = useRef(editor)\n  latestEditor.current = editor\n  const flow = useMemo(\n    () => createAiSidebarFlow({ chat: chat.model, assistant: assistant.model, notify, t, editor: () => latestEditor.current }),\n    [chat.model, assistant.model, notify, t],\n  )\n\n  /** The task whose inline prompt field is open (tasks with `needsPrompt`, i.e. `generate`); null while closed. */\n  const [promptTask, setPromptTask] = useState<AiTask | null>(null)\n  const [prompt, setPrompt] = useState('')\n  /** The generation streaming right now (a turn in `messages`); null while none runs. */\n  const running = useStore(flow.running)\n  // One request at a time: a failed chat answer removes the last two turns, which must still be its own.\n  const busy = streaming || generationStatus === 'streaming'\n\n  async function send() {\n    const text = question.trim()\n    if (!text || !flow.canRun()) return\n    setQuestion('')\n    const answered = await flow.send(text)\n    if (!answered) setQuestion(current => current || text)\n  }\n\n  function clearSelection() {\n    if (editor) editor.commands.setTextSelection(editor.state.selection.to)\n  }\n\n  function onReveal(op: AgentOp) {\n    if (editor && !chat.reveal(editor, op)) {\n      notify({ title: t('ai.sidebar.revealMissing'), kind: 'warning', icon: 'i-lucide-search-x' })\n    }\n  }\n\n  function onKeydown(event: KeyboardEvent) {\n    if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) return\n    event.preventDefault()\n    void send()\n  }\n\n  /** Quick action chip: a task with a prompt opens (or closes) its inline prompt field, the others run right away. */\n  function pick(task: AiTask) {\n    if (task.needsPrompt) setPromptTask(current => current === task ? null : task)\n    else void flow.generate(task)\n  }\n\n  async function submitPrompt() {\n    const task = promptTask\n    const text = prompt.trim()\n    if (!task || !text || !flow.canRun()) return\n    setPrompt('')\n    setPromptTask(null)\n    const kept = await flow.generate(task, text)\n    if (!kept) {\n      setPrompt(current => current || text)\n      setPromptTask(current => current ?? task)\n    }\n  }\n\n  function onPromptKeydown(event: KeyboardEvent) {\n    if (event.nativeEvent.isComposing) return\n    if (event.key === 'Escape') {\n      event.preventDefault()\n      setPromptTask(null)\n    }\n    else if (event.key === 'Enter') {\n      event.preventDefault()\n      void submitPrompt()\n    }\n  }\n\n  /** The streamed result while `generation` runs, else its final Markdown. */\n  function generationMarkdown(generation: DocumentChatGeneration): string {\n    return generation === running ? output : generation.markdown\n  }\n\n  // Follow the conversation while it grows (new messages, streamed answers and generations, proposed edits).\n  const last = messages.at(-1)\n  const lastOps = last?.role === 'assistant' ? last.ops?.length : undefined\n  useEffect(() => {\n    scroller.current?.scrollTo({ top: scroller.current.scrollHeight })\n  }, [messages.length, last?.content, lastOps, output])\n\n  // Unmounting ends both the generation and the chat request (the hooks abort theirs; this also releases the targets).\n  useEffect(() => () => flow.end(), [flow])\n\n  return (\n    <TooltipProvider>\n      <aside className={cn('flex min-h-0 flex-col', className, open === false && 'hidden')} aria-label={t('ai.sidebar.label')}>\n        <div className=\"flex flex-col gap-2 border-b border-border p-3\">\n          <div className=\"flex items-center gap-2\">\n            <h2 className=\"font-semibold text-foreground\">{t('ai.sidebar.title')}</h2>\n            <ModelQuickSwitch slot=\"generate\" size=\"xs\" {...(editor && { editor })} className=\"min-w-0 flex-1\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                  aria-label={t('ai.sidebar.newConversation')}\n                  disabled={!messages.length && !error && !generationError}\n                  onClick={() => flow.newConversation()}\n                >\n                  <Icon name=\"i-lucide-message-square-plus\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>{t('ai.sidebar.newConversation')}</TooltipContent>\n            </Tooltip>\n            <Button size=\"icon-sm\" variant=\"ghost\" aria-label={t('ai.sidebar.close')} onClick={() => onOpenChange?.(false)}>\n              <Icon name=\"i-lucide-x\" />\n            </Button>\n          </div>\n          {scope && (\n            <div className=\"flex items-center gap-1\">\n              <Badge variant=\"secondary\" className=\"h-auto bg-primary/10 py-0.5 text-primary\" title={t('ai.sidebar.selection.title')}>\n                <Icon name=\"i-lucide-text-select\" />\n                {t(scope.blocks === 1 ? 'ai.sidebar.selection.one' : 'ai.sidebar.selection.other', { n: scope.blocks })}\n              </Badge>\n              <Button size=\"icon-xs\" variant=\"ghost\" aria-label={t('ai.sidebar.selection.clear')} onClick={clearSelection}>\n                <Icon name=\"i-lucide-x\" />\n              </Button>\n            </div>\n          )}\n        </div>\n\n        <div ref={scroller} className=\"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4\">\n          {!messages.length && (\n            <p className=\"text-sm text-muted-foreground\">\n              {t('ai.sidebar.intro')}\n            </p>\n          )}\n          {messages.map((message, index) => {\n            if (message.role === 'user') {\n              return (\n                <div key={index} className=\"max-w-[85%] self-end whitespace-pre-wrap rounded-lg bg-muted px-3 py-2 text-sm\">\n                  {message.content}\n                </div>\n              )\n            }\n            const { generation } = message\n            if (generation) {\n              const markdown = generationMarkdown(generation)\n              return (\n                <div key={index} className=\"flex flex-col gap-2 rounded-lg border border-border p-3 text-sm\">\n                  <div className=\"flex items-center gap-1.5 text-xs font-medium text-muted-foreground\">\n                    <Icon name={generation.task.icon} />\n                    <span className=\"truncate\">{t(generation.task.labelKey)}</span>\n                  </div>\n                  {generation.prompt && <p className=\"whitespace-pre-wrap text-xs text-muted-foreground\">{generation.prompt}</p>}\n                  {markdown\n                    ? <DocumentChatAnswer markdown={withTaskHeading(generation.task, markdown, t)} editor={editor} />\n                    : <Icon name=\"i-lucide-loader-circle\" className=\"animate-spin text-muted-foreground\" />}\n                  <div className=\"flex justify-end gap-2\">\n                    {generation === running\n                      ? (\n                          <Button size=\"xs\" variant=\"outline\" onClick={() => assistant.abort()}>\n                            <Icon name=\"i-lucide-square\" />\n                            {t('ai.sidebar.stop')}\n                          </Button>\n                        )\n                      : (\n                          <>\n                            <Button size=\"xs\" variant=\"ghost\" onClick={() => flow.drop(generation)}>{t('ai.sidebar.discard')}</Button>\n                            <Button size=\"xs\" disabled={!editor || !generation.done} onClick={() => flow.apply(generation)}>{t('ai.sidebar.apply')}</Button>\n                          </>\n                        )}\n                  </div>\n                </div>\n              )\n            }\n            return (\n              <div key={index} className=\"text-sm\">\n                {message.content && <DocumentChatAnswer markdown={message.content} editor={editor} />}\n                {message.ops?.length || message.problems?.length\n                  ? (\n                      <DocumentChatOps\n                        ops={message.ops ?? []}\n                        states={ops}\n                        {...(message.problems && { problems: message.problems })}\n                        providers={providers}\n                        onDecide={(id, accept) => { if (editor) chat.decide(editor, id, accept) }}\n                        onReveal={onReveal}\n                      />\n                    )\n                  : !message.content && <Icon name=\"i-lucide-loader-circle\" className=\"animate-spin text-muted-foreground\" />}\n              </div>\n            )\n          })}\n          {error && <Alert variant=\"destructive\"><AlertTitle>{error}</AlertTitle></Alert>}\n          {generationError && <Alert variant=\"destructive\"><AlertTitle>{generationError}</AlertTitle></Alert>}\n        </div>\n\n        <div className=\"flex flex-col gap-2 border-t border-border p-3\">\n          <div className=\"flex flex-wrap gap-1\" role=\"group\" aria-label={t('ai.sidebar.generateGroup')}>\n            {quickActions.map(task => (\n              <Button\n                key={task.id}\n                size=\"xs\"\n                variant=\"secondary\"\n                className={cn(promptTask === task && 'text-primary ring-1 ring-primary/40')}\n                aria-pressed={promptTask === task}\n                disabled={!editor || busy}\n                onClick={() => pick(task)}\n              >\n                <Icon name={task.icon} />\n                {t(task.labelKey)}\n              </Button>\n            ))}\n          </div>\n          {promptTask && (\n            <div className=\"flex items-center gap-1\">\n              <Input\n                value={prompt}\n                autoFocus\n                placeholder={promptTask.promptLabelKey && t(promptTask.promptLabelKey)}\n                maxLength={AI_LIMITS.prompt}\n                aria-label={promptTask.promptLabelKey && t(promptTask.promptLabelKey)}\n                className=\"min-w-0 flex-1\"\n                onChange={event => setPrompt(event.target.value)}\n                onKeyDown={onPromptKeydown}\n              />\n              <Button size=\"sm\" disabled={!editor || busy || !prompt.trim()} onClick={() => void submitPrompt()}>\n                <Icon name=\"i-lucide-sparkles\" />\n                {t('ai.sidebar.generate')}\n              </Button>\n            </div>\n          )}\n          <Textarea\n            value={question}\n            placeholder={t('ai.sidebar.placeholder')}\n            rows={2}\n            maxLength={CHAT_LIMITS.message}\n            className=\"max-h-36 min-h-0 w-full\"\n            aria-label={t('ai.sidebar.messageLabel')}\n            onChange={event => setQuestion(event.target.value)}\n            onKeyDown={onKeydown}\n          />\n          <div className=\"flex justify-end gap-2\">\n            {streaming\n              ? (\n                  <Button variant=\"outline\" onClick={() => chat.abort()}>\n                    <Icon name=\"i-lucide-square\" />\n                    {t('ai.sidebar.stop')}\n                  </Button>\n                )\n              : (\n                  <Button disabled={!editor || busy || !question.trim()} onClick={() => void send()}>\n                    <Icon name=\"i-lucide-send\" />\n                    {t('ai.sidebar.send')}\n                  </Button>\n                )}\n          </div>\n        </div>\n      </aside>\n    </TooltipProvider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,eAAe,WAAW,CAAC,CAAC,QAAO,SAAQ,CAAC,KAAK,SAAS;;;;;;;;;AAUhE,SAAgB,UAAU,EAAE,QAAQ,MAAM,cAAc,aAMrD;CACD,MAAM,SAAS,YAAY,MAAM;CACjC,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,OAAO,gBAAgB,MAAM;CACnC,MAAM,YAAY,eAAe,MAAM;CACvC,MAAM,EAAE,UAAU,KAAK,WAAW,UAAU;CAC5C,MAAM,EAAE,QAAQ,kBAAkB,QAAQ,OAAO,oBAAoB;CACrE,MAAM,CAAC,UAAU,eAAe,SAAS,EAAE;CAC3C,MAAM,WAAW,OAAuB,IAAI;CAE5C,MAAM,QAAQ,eAAe;EAC3B,QAAQ,UAAU;EAClB,WAAW,EAAE,QAAQ,cAAc,WAAW,CAAC,QAAQ,cAAc,eAAe,QAAQ,KAAK,IAAI;CACvG,CAAC;CACD,MAAM,YAAY,cAAc,SAAS,cAAc,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;CAE7E,MAAM,eAAe,OAAO,MAAM;CAClC,aAAa,UAAU;CACvB,MAAM,OAAO,cACL,oBAAoB;EAAE,MAAM,KAAK;EAAO,WAAW,UAAU;EAAO;EAAQ;EAAG,cAAc,aAAa;CAAQ,CAAC,GACzH;EAAC,KAAK;EAAO,UAAU;EAAO;EAAQ;CAAC,CACzC;;CAGA,MAAM,CAAC,YAAY,iBAAiB,SAAwB,IAAI;CAChE,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;;CAEvC,MAAM,UAAU,SAAS,KAAK,OAAO;CAErC,MAAM,OAAO,aAAa,qBAAqB;CAE/C,eAAe,OAAO;EACpB,MAAM,OAAO,SAAS,KAAK;EAC3B,IAAI,CAAC,QAAQ,CAAC,KAAK,OAAO,GAAG;EAC7B,YAAY,EAAE;EAEd,IAAI,CAAC,MADkB,KAAK,KAAK,IAAI,GACtB,aAAY,YAAW,WAAW,IAAI;CACvD;CAEA,SAAS,iBAAiB;EACxB,IAAI,QAAQ,OAAO,SAAS,iBAAiB,OAAO,MAAM,UAAU,EAAE;CACxE;CAEA,SAAS,SAAS,IAAa;EAC7B,IAAI,UAAU,CAAC,KAAK,OAAO,QAAQ,EAAE,GACnC,OAAO;GAAE,OAAO,EAAE,0BAA0B;GAAG,MAAM;GAAW,MAAM;EAAoB,CAAC;CAE/F;CAEA,SAAS,UAAU,OAAsB;EACvC,IAAI,MAAM,QAAQ,WAAW,MAAM,YAAY,MAAM,YAAY,aAAa;EAC9E,MAAM,eAAe;EACrB,KAAU;CACZ;;CAGA,SAAS,KAAK,MAAc;EAC1B,IAAI,KAAK,aAAa,eAAc,YAAW,YAAY,OAAO,OAAO,IAAI;OACxE,KAAU,SAAS,IAAI;CAC9B;CAEA,eAAe,eAAe;EAC5B,MAAM,OAAO;EACb,MAAM,OAAO,OAAO,KAAK;EACzB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,OAAO,GAAG;EACtC,UAAU,EAAE;EACZ,cAAc,IAAI;EAElB,IAAI,CAAC,MADc,KAAK,SAAS,MAAM,IAAI,GAChC;GACT,WAAU,YAAW,WAAW,IAAI;GACpC,eAAc,YAAW,WAAW,IAAI;EAC1C;CACF;CAEA,SAAS,gBAAgB,OAAsB;EAC7C,IAAI,MAAM,YAAY,aAAa;EACnC,IAAI,MAAM,QAAQ,UAAU;GAC1B,MAAM,eAAe;GACrB,cAAc,IAAI;EACpB,OACK,IAAI,MAAM,QAAQ,SAAS;GAC9B,MAAM,eAAe;GACrB,aAAkB;EACpB;CACF;;CAGA,SAAS,mBAAmB,YAA4C;EACtE,OAAO,eAAe,UAAU,SAAS,WAAW;CACtD;CAGA,MAAM,OAAO,SAAS,GAAG,EAAE;CAC3B,MAAM,UAAU,MAAM,SAAS,cAAc,KAAK,KAAK,SAAS,KAAA;CAChE,gBAAgB;EACd,SAAS,SAAS,SAAS,EAAE,KAAK,SAAS,QAAQ,aAAa,CAAC;CACnE,GAAG;EAAC,SAAS;EAAQ,MAAM;EAAS;EAAS;CAAM,CAAC;CAGpD,sBAAsB,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC;CAExC,OACE,oBAAC,iBAAD,EAAA,UACE,qBAAC,SAAD;EAAO,WAAW,GAAG,yBAAyB,WAAW,SAAS,SAAS,QAAQ;EAAG,cAAY,EAAE,kBAAkB;EAAtH,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,oBAAC,MAAD;OAAI,WAAU;OAAiC,UAAA,EAAE,kBAAkB;MAAM,CAAA;MACzE,oBAAC,kBAAD;OAAkB,MAAK;OAAW,MAAK;OAAK,GAAK,UAAU,EAAE,OAAO;OAAI,WAAU;MAAkB,CAAA;MACpG,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;OAAgB,SAAA;OACd,UAAA,oBAAC,QAAD;QACE,MAAK;QACL,SAAQ;QACR,cAAY,EAAE,4BAA4B;QAC1C,UAAU,CAAC,SAAS,UAAU,CAAC,SAAS,CAAC;QACzC,eAAe,KAAK,gBAAgB;QAEpC,UAAA,oBAAC,MAAD,EAAM,MAAK,+BAAgC,CAAA;OACrC,CAAA;MACM,CAAA,GAChB,oBAAC,gBAAD,EAAA,UAAiB,EAAE,4BAA4B,EAAkB,CAAA,CAC1D,EAAA,CAAA;MACT,oBAAC,QAAD;OAAQ,MAAK;OAAU,SAAQ;OAAQ,cAAY,EAAE,kBAAkB;OAAG,eAAe,eAAe,KAAK;OAC3G,UAAA,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;MACnB,CAAA;KACL;IACJ,CAAA,GAAA,SACC,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,qBAAC,OAAD;MAAO,SAAQ;MAAY,WAAU;MAA2C,OAAO,EAAE,4BAA4B;MAArH,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,uBAAwB,CAAA,GAClC,EAAE,MAAM,WAAW,IAAI,6BAA6B,8BAA8B,EAAE,GAAG,MAAM,OAAO,CAAC,CACjG;KACP,CAAA,GAAA,oBAAC,QAAD;MAAQ,MAAK;MAAU,SAAQ;MAAQ,cAAY,EAAE,4BAA4B;MAAG,SAAS;MAC3F,UAAA,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;KACnB,CAAA,CACL;IAEJ,CAAA,CAAA;;GAEL,qBAAC,OAAD;IAAK,KAAK;IAAU,WAAU;IAA9B,UAAA;KACG,CAAC,SAAS,UACT,oBAAC,KAAD;MAAG,WAAU;MACV,UAAA,EAAE,kBAAkB;KACpB,CAAA;KAEJ,SAAS,KAAK,SAAS,UAAU;MAChC,IAAI,QAAQ,SAAS,QACnB,OACE,oBAAC,OAAD;OAAiB,WAAU;OACxB,UAAA,QAAQ;MACN,GAFK,KAEL;MAGT,MAAM,EAAE,eAAe;MACvB,IAAI,YAAY;OACd,MAAM,WAAW,mBAAmB,UAAU;OAC9C,OACE,qBAAC,OAAD;QAAiB,WAAU;QAA3B,UAAA;SACE,qBAAC,OAAD;UAAK,WAAU;UAAf,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,WAAW,KAAK,KAAO,CAAA,GACnC,oBAAC,QAAD;WAAM,WAAU;WAAY,UAAA,EAAE,WAAW,KAAK,QAAQ;UAAQ,CAAA,CAC3D;;SACJ,WAAW,UAAU,oBAAC,KAAD;UAAG,WAAU;UAAqD,UAAA,WAAW;SAAU,CAAA;SAC5G,WACG,oBAAC,oBAAD;UAAoB,UAAU,gBAAgB,WAAW,MAAM,UAAU,CAAC;UAAW;SAAS,CAAA,IAC9F,oBAAC,MAAD;UAAM,MAAK;UAAyB,WAAU;SAAsC,CAAA;SACxF,oBAAC,OAAD;UAAK,WAAU;UACZ,UAAA,eAAe,UAEV,qBAAC,QAAD;WAAQ,MAAK;WAAK,SAAQ;WAAU,eAAe,UAAU,MAAM;WAAnE,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,kBAAmB,CAAA,GAC7B,EAAE,iBAAiB,CACd;UAGR,CAAA,IAAA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;WAAQ,MAAK;WAAK,SAAQ;WAAQ,eAAe,KAAK,KAAK,UAAU;WAAI,UAAA,EAAE,oBAAoB;UAAU,CAAA,GACzG,oBAAC,QAAD;WAAQ,MAAK;WAAK,UAAU,CAAC,UAAU,CAAC,WAAW;WAAM,eAAe,KAAK,MAAM,UAAU;WAAI,UAAA,EAAE,kBAAkB;UAAU,CAAA,CAC/H,EAAA,CAAA;SAEL,CAAA;QACF;OAxBK,GAAA,KAwBL;MAET;MACA,OACE,qBAAC,OAAD;OAAiB,WAAU;OAA3B,UAAA,CACG,QAAQ,WAAW,oBAAC,oBAAD;QAAoB,UAAU,QAAQ;QAAiB;OAAS,CAAA,GACnF,QAAQ,KAAK,UAAU,QAAQ,UAAU,SAEpC,oBAAC,iBAAD;QACE,KAAK,QAAQ,OAAO,CAAC;QACrB,QAAQ;QACR,GAAK,QAAQ,YAAY,EAAE,UAAU,QAAQ,SAAS;QAC3C;QACX,WAAW,IAAI,WAAW;SAAE,IAAI,QAAQ,KAAK,OAAO,QAAQ,IAAI,MAAM;QAAE;QAC9D;OACX,CAAA,IAEH,CAAC,QAAQ,WAAW,oBAAC,MAAD;QAAM,MAAK;QAAyB,WAAU;OAAsC,CAAA,CACzG;MAdK,GAAA,KAcL;KAET,CAAC;KACA,SAAS,oBAAC,OAAD;MAAO,SAAQ;MAAc,UAAA,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA;KAAQ,CAAA;KAC7E,mBAAmB,oBAAC,OAAD;MAAO,SAAQ;MAAc,UAAA,oBAAC,YAAD,EAAA,UAAa,gBAA4B,CAAA;KAAQ,CAAA;IAC/F;;GAEL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,OAAD;MAAK,WAAU;MAAuB,MAAK;MAAQ,cAAY,EAAE,0BAA0B;MACxF,UAAA,aAAa,KAAI,SAChB,qBAAC,QAAD;OAEE,MAAK;OACL,SAAQ;OACR,WAAW,GAAG,eAAe,QAAQ,qCAAqC;OAC1E,gBAAc,eAAe;OAC7B,UAAU,CAAC,UAAU;OACrB,eAAe,KAAK,IAAI;OAP1B,UAAA,CASE,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACvB,EAAE,KAAK,QAAQ,CACV;MAVD,GAAA,KAAK,EAUJ,CACT;KACE,CAAA;KACJ,cACC,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,OAAD;OACE,OAAO;OACP,WAAA;OACA,aAAa,WAAW,kBAAkB,EAAE,WAAW,cAAc;OACrE,WAAW,UAAU;OACrB,cAAY,WAAW,kBAAkB,EAAE,WAAW,cAAc;OACpE,WAAU;OACV,WAAU,UAAS,UAAU,MAAM,OAAO,KAAK;OAC/C,WAAW;MACZ,CAAA,GACD,qBAAC,QAAD;OAAQ,MAAK;OAAK,UAAU,CAAC,UAAU,QAAQ,CAAC,OAAO,KAAK;OAAG,eAAe,KAAK,aAAa;OAAhG,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,oBAAqB,CAAA,GAC/B,EAAE,qBAAqB,CAClB;MACL,CAAA,CAAA;;KAEP,oBAAC,UAAD;MACE,OAAO;MACP,aAAa,EAAE,wBAAwB;MACvC,MAAM;MACN,WAAW,YAAY;MACvB,WAAU;MACV,cAAY,EAAE,yBAAyB;MACvC,WAAU,UAAS,YAAY,MAAM,OAAO,KAAK;MACjD,WAAW;KACZ,CAAA;KACD,oBAAC,OAAD;MAAK,WAAU;MACZ,UAAA,YAEK,qBAAC,QAAD;OAAQ,SAAQ;OAAU,eAAe,KAAK,MAAM;OAApD,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,kBAAmB,CAAA,GAC7B,EAAE,iBAAiB,CACd;MAGR,CAAA,IAAA,qBAAC,QAAD;OAAQ,UAAU,CAAC,UAAU,QAAQ,CAAC,SAAS,KAAK;OAAG,eAAe,KAAK,KAAK;OAAhF,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,gBAAiB,CAAA,GAC3B,EAAE,iBAAiB,CACd;;KAEX,CAAA;IACF;;EACA;CACQ,CAAA,EAAA,CAAA;AAErB"}

package/dist/features/ai/react/DocumentChatAnswer.d.ts

@@ -0,0 +1,10 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/ai/react/DocumentChatAnswer.d.ts
+/** One chat answer, rendered read-only from Markdown; quote links reveal their block in `editor`. */
+export declare function DocumentChatAnswer({ markdown, editor }: {
+  markdown: string;
+  /** The document editor the quotes link into. */
+  editor: Editor | undefined;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=DocumentChatAnswer.d.ts.map

package/dist/features/ai/react/DocumentChatAnswer.js

@@ -0,0 +1,70 @@
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { citationBlockId } from "../protocol/chat.js";
+import { documentChatAnswerContent } from "../document-chat.js";
+import { useNotifier } from "../../../react/use-notifier.js";
+import { previewExtensions } from "../preview-extensions.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { EditorContent, useEditor } from "@tiptap/react";
+//#region src/features/ai/react/DocumentChatAnswer.tsx
+/** One chat answer, rendered read-only from Markdown; quote links reveal their block in `editor`. */
+function DocumentChatAnswer({ markdown, editor }) {
+	const notify = useNotifier(editor);
+	const { t } = useEditorI18n();
+	const [extensions] = useState(() => previewExtensions(editor));
+	const view = useEditor({
+		editable: false,
+		extensions,
+		immediatelyRender: true,
+		shouldRerenderOnTransaction: false,
+		editorProps: { attributes: { class: "tiptap" } }
+	});
+	const latest = useRef({
+		view,
+		editor,
+		markdown
+	});
+	latest.current = {
+		view,
+		editor,
+		markdown
+	};
+	const timer = useRef(void 0);
+	function render() {
+		const { view: instance, editor: source, markdown: text } = latest.current;
+		if (!instance || instance.isDestroyed) return;
+		instance.commands.setContent(documentChatAnswerContent(source ?? instance, text, source?.state.doc), { emitUpdate: false });
+	}
+	useEffect(() => {
+		if (timer.current) return;
+		timer.current = window.setTimeout(() => {
+			timer.current = void 0;
+			render();
+		}, 80);
+	}, [markdown]);
+	useEffect(render, [view]);
+	useEffect(() => () => {
+		clearTimeout(timer.current);
+		timer.current = void 0;
+	}, []);
+	function onClick(event) {
+		const link = event.target.closest("a");
+		const id = citationBlockId(link?.getAttribute("href"));
+		if (id === null) return;
+		event.preventDefault();
+		if (!editor?.commands.revealBlock(id)) notify({
+			title: t("ai.sidebar.revealMissing"),
+			kind: "warning",
+			icon: "i-lucide-search-x"
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "document-chat-answer",
+		onClick,
+		children: view && /* @__PURE__ */ jsx(EditorContent, { editor: view })
+	});
+}
+//#endregion
+export { DocumentChatAnswer };
+
+//# sourceMappingURL=DocumentChatAnswer.js.map

package/dist/features/ai/react/DocumentChatAnswer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentChatAnswer.js","names":[],"sources":["../../../../src/features/ai/react/DocumentChatAnswer.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport { type MouseEvent, useEffect, useRef, useState } from 'react'\nimport { documentChatAnswerContent } from '../document-chat'\nimport { previewExtensions } from '../preview-extensions'\nimport { citationBlockId } from '../protocol'\nimport { useNotifier } from '../../../react/use-notifier'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\n\n/** One chat answer, rendered read-only from Markdown; quote links reveal their block in `editor`. */\nexport function DocumentChatAnswer({ markdown, editor }: {\n  markdown: string\n  /** The document editor the quotes link into. */\n  editor: Editor | undefined\n}) {\n  const notify = useNotifier(editor)\n  const { t } = useEditorI18n()\n  const [extensions] = useState(() => previewExtensions(editor))\n  const view = useEditor({\n    editable: false,\n    extensions,\n    immediatelyRender: true,\n    shouldRerenderOnTransaction: false,\n    editorProps: { attributes: { class: 'tiptap' } },\n  })\n\n  const latest = useRef({ view, editor, markdown })\n  latest.current = { view, editor, markdown }\n  const timer = useRef<number | undefined>(undefined)\n\n  function render() {\n    const { view: instance, editor: source, markdown: text } = latest.current\n    if (!instance || instance.isDestroyed) return\n    instance.commands.setContent(documentChatAnswerContent(source ?? instance, text, source?.state.doc), { emitUpdate: false })\n  }\n\n  // Streamed deltas: re-parse at most every 80 ms.\n  useEffect(() => {\n    if (timer.current) return\n    timer.current = window.setTimeout(() => {\n      timer.current = undefined\n      render()\n    }, 80)\n  }, [markdown])\n  useEffect(render, [view])\n  useEffect(() => () => {\n    clearTimeout(timer.current)\n    // StrictMode runs the cleanup once right after mount; a stale id would block every later render.\n    timer.current = undefined\n  }, [])\n\n  function onClick(event: MouseEvent) {\n    const link = (event.target as HTMLElement).closest('a')\n    const id = citationBlockId(link?.getAttribute('href'))\n    if (id === null) return\n    event.preventDefault()\n    if (!editor?.commands.revealBlock(id)) {\n      notify({ title: t('ai.sidebar.revealMissing'), kind: 'warning', icon: 'i-lucide-search-x' })\n    }\n  }\n\n  return (\n    <div className=\"document-chat-answer\" onClick={onClick}>\n      {view && <EditorContent editor={view} />}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,mBAAmB,EAAE,UAAU,UAI5C;CACD,MAAM,SAAS,YAAY,MAAM;CACjC,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,CAAC,cAAc,eAAe,kBAAkB,MAAM,CAAC;CAC7D,MAAM,OAAO,UAAU;EACrB,UAAU;EACV;EACA,mBAAmB;EACnB,6BAA6B;EAC7B,aAAa,EAAE,YAAY,EAAE,OAAO,SAAS,EAAE;CACjD,CAAC;CAED,MAAM,SAAS,OAAO;EAAE;EAAM;EAAQ;CAAS,CAAC;CAChD,OAAO,UAAU;EAAE;EAAM;EAAQ;CAAS;CAC1C,MAAM,QAAQ,OAA2B,KAAA,CAAS;CAElD,SAAS,SAAS;EAChB,MAAM,EAAE,MAAM,UAAU,QAAQ,QAAQ,UAAU,SAAS,OAAO;EAClE,IAAI,CAAC,YAAY,SAAS,aAAa;EACvC,SAAS,SAAS,WAAW,0BAA0B,UAAU,UAAU,MAAM,QAAQ,MAAM,GAAG,GAAG,EAAE,YAAY,MAAM,CAAC;CAC5H;CAGA,gBAAgB;EACd,IAAI,MAAM,SAAS;EACnB,MAAM,UAAU,OAAO,iBAAiB;GACtC,MAAM,UAAU,KAAA;GAChB,OAAO;EACT,GAAG,EAAE;CACP,GAAG,CAAC,QAAQ,CAAC;CACb,UAAU,QAAQ,CAAC,IAAI,CAAC;CACxB,sBAAsB;EACpB,aAAa,MAAM,OAAO;EAE1B,MAAM,UAAU,KAAA;CAClB,GAAG,CAAC,CAAC;CAEL,SAAS,QAAQ,OAAmB;EAClC,MAAM,OAAQ,MAAM,OAAuB,QAAQ,GAAG;EACtD,MAAM,KAAK,gBAAgB,MAAM,aAAa,MAAM,CAAC;EACrD,IAAI,OAAO,MAAM;EACjB,MAAM,eAAe;EACrB,IAAI,CAAC,QAAQ,SAAS,YAAY,EAAE,GAClC,OAAO;GAAE,OAAO,EAAE,0BAA0B;GAAG,MAAM;GAAW,MAAM;EAAoB,CAAC;CAE/F;CAEA,OACE,oBAAC,OAAD;EAAK,WAAU;EAAgC;EAC5C,UAAA,QAAQ,oBAAC,eAAD,EAAe,QAAQ,KAAO,CAAA;CACpC,CAAA;AAET"}

package/dist/features/ai/react/DocumentChatOps.d.ts

@@ -0,0 +1,19 @@
+import { ConversionProvider } from "../../../core/feature.js";
+import "../../../core/index.js";
+import { AgentOp, AgentOpProblem } from "../protocol/agent-ops.js";
+import "../protocol/index.js";
+import { AgentOpState } from "../agent-op-review.js";
+//#region src/features/ai/react/DocumentChatOps.d.ts
+/** The edit operations of one chat answer with their review state; open ones can be decided right here. */
+export declare function DocumentChatOps({ ops, states, problems, providers, onDecide, onReveal }: {
+  ops: AgentOp[];
+  states: Readonly<Record<string, AgentOpState>>;
+  /** Operations the server dropped (invalid block IDs after the retries). */
+  problems?: AgentOpProblem[];
+  /** The editor's conversion providers, to name `convert` targets. */
+  providers: readonly ConversionProvider[];
+  onDecide: (id: string, accept: boolean) => void;
+  onReveal: (op: AgentOp) => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=DocumentChatOps.d.ts.map

package/dist/features/ai/react/DocumentChatOps.js

@@ -0,0 +1,111 @@
+import { conversionLabel, parseConversionTarget } from "../../../core/block-convert.js";
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { cn } from "../../../react/ui/utils.js";
+import { Icon } from "../../../react/Icon.js";
+import { Button } from "../../../react/ui/button.js";
+import { AGENT_OP_OUTCOME_KEYS } from "../agent-ops.js";
+import { Alert, AlertDescription, AlertTitle } from "../../../react/ui/alert.js";
+import { Badge } from "../../../react/ui/badge.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/ai/react/DocumentChatOps.tsx
+const ICONS = {
+	add: "i-lucide-plus",
+	update: "i-lucide-pencil",
+	delete: "i-lucide-trash-2",
+	convert: "i-lucide-replace"
+};
+const BADGE_TONES = {
+	pending: "primary",
+	accepted: "success",
+	rejected: "neutral",
+	partial: "info",
+	invalid: "warning",
+	unchanged: "neutral",
+	missing: "warning",
+	overlap: "warning",
+	empty: "warning",
+	blocked: "warning"
+};
+/** The „subtle“ look of Nuxt UI's badge per color, on the vendored badge. */
+const TONE_CLASS = {
+	primary: "bg-primary/10 text-primary",
+	success: "bg-green-500/10 text-green-600 dark:text-green-400",
+	neutral: "bg-muted text-muted-foreground",
+	warning: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+	info: "bg-sky-500/10 text-sky-600 dark:text-sky-400"
+};
+/** The edit operations of one chat answer with their review state; open ones can be decided right here. */
+function DocumentChatOps({ ops, states, problems, providers, onDecide, onReveal }) {
+	const { t } = useEditorI18n();
+	function label(op, snippet) {
+		if (op.type === "add") return op.afterId === null ? t("ai.op.addAtStart") : t("ai.op.addAfter", { snippet });
+		if (op.type === "convert") {
+			const target = parseConversionTarget(providers, op.to);
+			return t("ai.op.convert", {
+				target: target ? conversionLabel(providers, target, t).label : op.to,
+				snippet
+			});
+		}
+		return t(op.type === "update" ? "ai.op.update" : "ai.op.delete", { snippet });
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-2 flex flex-col gap-1",
+		children: [ops.map((op) => {
+			const state = states[op.op];
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 rounded-md border border-border px-2 py-1",
+				"data-agent-op": op.op,
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: ICONS[op.type],
+						className: "text-muted-foreground"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "min-w-0 flex-1 truncate text-left text-xs hover:underline",
+						title: "markdown" in op ? op.markdown : void 0,
+						onClick: () => onReveal(op),
+						children: label(op, state?.snippet ?? "")
+					}),
+					state && /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: cn("h-auto py-px", TONE_CLASS[BADGE_TONES[state.outcome]]),
+						title: t(AGENT_OP_OUTCOME_KEYS[state.outcome].hover),
+						children: t(AGENT_OP_OUTCOME_KEYS[state.outcome].badge)
+					}),
+					state?.outcome === "pending" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+						size: "icon-xs",
+						variant: "ghost",
+						"aria-label": t("ai.op.discard"),
+						onClick: () => onDecide(op.op, false),
+						children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-x" })
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "icon-xs",
+						variant: "ghost",
+						className: "text-green-600 dark:text-green-400",
+						"aria-label": t("ai.op.accept"),
+						onClick: () => onDecide(op.op, true),
+						children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-check" })
+					})] })
+				]
+			}, op.op);
+		}), problems?.length ? /* @__PURE__ */ jsxs(Alert, {
+			className: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+			children: [
+				/* @__PURE__ */ jsx(Icon, { name: "i-lucide-triangle-alert" }),
+				/* @__PURE__ */ jsx(AlertTitle, {
+					className: "text-xs",
+					children: problems.length === 1 ? t("ai.op.problems.one") : t("ai.op.problems.other", { n: problems.length })
+				}),
+				/* @__PURE__ */ jsx(AlertDescription, {
+					className: "text-xs",
+					children: t("ai.op.problems.description")
+				})
+			]
+		}) : null]
+	});
+}
+//#endregion
+export { DocumentChatOps };
+
+//# sourceMappingURL=DocumentChatOps.js.map

package/dist/features/ai/react/DocumentChatOps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentChatOps.js","names":[],"sources":["../../../../src/features/ai/react/DocumentChatOps.tsx"],"sourcesContent":["import { type ConversionProvider, conversionLabel, parseConversionTarget } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { Alert, AlertDescription, AlertTitle } from '../../../react/ui/alert'\nimport { Badge } from '../../../react/ui/badge'\nimport { Button } from '../../../react/ui/button'\nimport { cn } from '../../../react/ui/utils'\nimport type { AgentOpState } from '../agent-op-review'\nimport { AGENT_OP_OUTCOME_KEYS } from '../agent-ops'\nimport type { AgentOp, AgentOpOutcome, AgentOpProblem } from '../protocol'\n\nconst ICONS: Record<AgentOp['type'], string> = { add: 'i-lucide-plus', update: 'i-lucide-pencil', delete: 'i-lucide-trash-2', convert: 'i-lucide-replace' }\n\ntype BadgeTone = 'primary' | 'success' | 'neutral' | 'warning' | 'info'\n\nconst BADGE_TONES: Record<AgentOpOutcome, BadgeTone> = {\n  pending: 'primary',\n  accepted: 'success',\n  rejected: 'neutral',\n  partial: 'info',\n  invalid: 'warning',\n  unchanged: 'neutral',\n  missing: 'warning',\n  overlap: 'warning',\n  empty: 'warning',\n  blocked: 'warning',\n}\n\n/** The „subtle“ look of Nuxt UI's badge per color, on the vendored badge. */\nconst TONE_CLASS: Record<BadgeTone, string> = {\n  primary: 'bg-primary/10 text-primary',\n  success: 'bg-green-500/10 text-green-600 dark:text-green-400',\n  neutral: 'bg-muted text-muted-foreground',\n  warning: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',\n  info: 'bg-sky-500/10 text-sky-600 dark:text-sky-400',\n}\n\n/** The edit operations of one chat answer with their review state; open ones can be decided right here. */\nexport function DocumentChatOps({ ops, states, problems, providers, onDecide, onReveal }: {\n  ops: AgentOp[]\n  states: Readonly<Record<string, AgentOpState>>\n  /** Operations the server dropped (invalid block IDs after the retries). */\n  problems?: AgentOpProblem[]\n  /** The editor's conversion providers, to name `convert` targets. */\n  providers: readonly ConversionProvider[]\n  onDecide: (id: string, accept: boolean) => void\n  onReveal: (op: AgentOp) => void\n}) {\n  const { t } = useEditorI18n()\n\n  function label(op: AgentOp, snippet: string): string {\n    if (op.type === 'add') return op.afterId === null ? t('ai.op.addAtStart') : t('ai.op.addAfter', { snippet })\n    if (op.type === 'convert') {\n      const target = parseConversionTarget(providers, op.to)\n      return t('ai.op.convert', { target: target ? conversionLabel(providers, target, t).label : op.to, snippet })\n    }\n    return t(op.type === 'update' ? 'ai.op.update' : 'ai.op.delete', { snippet })\n  }\n\n  return (\n    <div className=\"mt-2 flex flex-col gap-1\">\n      {ops.map((op) => {\n        const state = states[op.op]\n        return (\n          <div key={op.op} className=\"flex items-center gap-2 rounded-md border border-border px-2 py-1\" data-agent-op={op.op}>\n            <Icon name={ICONS[op.type]} className=\"text-muted-foreground\" />\n            <button\n              type=\"button\"\n              className=\"min-w-0 flex-1 truncate text-left text-xs hover:underline\"\n              title={'markdown' in op ? op.markdown : undefined}\n              onClick={() => onReveal(op)}\n            >\n              {label(op, state?.snippet ?? '')}\n            </button>\n            {state && (\n              <Badge variant=\"secondary\" className={cn('h-auto py-px', TONE_CLASS[BADGE_TONES[state.outcome]])} title={t(AGENT_OP_OUTCOME_KEYS[state.outcome].hover)}>\n                {t(AGENT_OP_OUTCOME_KEYS[state.outcome].badge)}\n              </Badge>\n            )}\n            {state?.outcome === 'pending' && (\n              <>\n                <Button size=\"icon-xs\" variant=\"ghost\" aria-label={t('ai.op.discard')} onClick={() => onDecide(op.op, false)}>\n                  <Icon name=\"i-lucide-x\" />\n                </Button>\n                <Button size=\"icon-xs\" variant=\"ghost\" className=\"text-green-600 dark:text-green-400\" aria-label={t('ai.op.accept')} onClick={() => onDecide(op.op, true)}>\n                  <Icon name=\"i-lucide-check\" />\n                </Button>\n              </>\n            )}\n          </div>\n        )\n      })}\n      {problems?.length\n        ? (\n            <Alert className=\"border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300\">\n              <Icon name=\"i-lucide-triangle-alert\" />\n              <AlertTitle className=\"text-xs\">{problems.length === 1 ? t('ai.op.problems.one') : t('ai.op.problems.other', { n: problems.length })}</AlertTitle>\n              <AlertDescription className=\"text-xs\">{t('ai.op.problems.description')}</AlertDescription>\n            </Alert>\n          )\n        : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAM,QAAyC;CAAE,KAAK;CAAiB,QAAQ;CAAmB,QAAQ;CAAoB,SAAS;AAAmB;AAI1J,MAAM,cAAiD;CACrD,SAAS;CACT,UAAU;CACV,UAAU;CACV,SAAS;CACT,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;AACX;;AAGA,MAAM,aAAwC;CAC5C,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,MAAM;AACR;;AAGA,SAAgB,gBAAgB,EAAE,KAAK,QAAQ,UAAU,WAAW,UAAU,YAS3E;CACD,MAAM,EAAE,MAAM,cAAc;CAE5B,SAAS,MAAM,IAAa,SAAyB;EACnD,IAAI,GAAG,SAAS,OAAO,OAAO,GAAG,YAAY,OAAO,EAAE,kBAAkB,IAAI,EAAE,kBAAkB,EAAE,QAAQ,CAAC;EAC3G,IAAI,GAAG,SAAS,WAAW;GACzB,MAAM,SAAS,sBAAsB,WAAW,GAAG,EAAE;GACrD,OAAO,EAAE,iBAAiB;IAAE,QAAQ,SAAS,gBAAgB,WAAW,QAAQ,CAAC,CAAC,CAAC,QAAQ,GAAG;IAAI;GAAQ,CAAC;EAC7G;EACA,OAAO,EAAE,GAAG,SAAS,WAAW,iBAAiB,gBAAgB,EAAE,QAAQ,CAAC;CAC9E;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,IAAI,KAAK,OAAO;GACf,MAAM,QAAQ,OAAO,GAAG;GACxB,OACE,qBAAC,OAAD;IAAiB,WAAU;IAAoE,iBAAe,GAAG;IAAjH,UAAA;KACE,oBAAC,MAAD;MAAM,MAAM,MAAM,GAAG;MAAO,WAAU;KAAyB,CAAA;KAC/D,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,OAAO,cAAc,KAAK,GAAG,WAAW,KAAA;MACxC,eAAe,SAAS,EAAE;MAEzB,UAAA,MAAM,IAAI,OAAO,WAAW,EAAE;KACzB,CAAA;KACP,SACC,oBAAC,OAAD;MAAO,SAAQ;MAAY,WAAW,GAAG,gBAAgB,WAAW,YAAY,MAAM,SAAS;MAAG,OAAO,EAAE,sBAAsB,MAAM,QAAQ,CAAC,KAAK;MAClJ,UAAA,EAAE,sBAAsB,MAAM,QAAQ,CAAC,KAAK;KACxC,CAAA;KAER,OAAO,YAAY,aAClB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;MAAQ,MAAK;MAAU,SAAQ;MAAQ,cAAY,EAAE,eAAe;MAAG,eAAe,SAAS,GAAG,IAAI,KAAK;MACzG,UAAA,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;KACnB,CAAA,GACR,oBAAC,QAAD;MAAQ,MAAK;MAAU,SAAQ;MAAQ,WAAU;MAAqC,cAAY,EAAE,cAAc;MAAG,eAAe,SAAS,GAAG,IAAI,IAAI;MACtJ,UAAA,oBAAC,MAAD,EAAM,MAAK,iBAAkB,CAAA;KACvB,CAAA,CACR,EAAA,CAAA;IAED;GAzBK,GAAA,GAAG,EAyBR;EAET,CAAC,GACA,UAAU,SAEL,qBAAC,OAAD;GAAO,WAAU;GAAjB,UAAA;IACE,oBAAC,MAAD,EAAM,MAAK,0BAA2B,CAAA;IACtC,oBAAC,YAAD;KAAY,WAAU;KAAW,UAAA,SAAS,WAAW,IAAI,EAAE,oBAAoB,IAAI,EAAE,wBAAwB,EAAE,GAAG,SAAS,OAAO,CAAC;IAAc,CAAA;IACjJ,oBAAC,kBAAD;KAAkB,WAAU;KAAW,UAAA,EAAE,4BAA4B;IAAoB,CAAA;GACpF;EAET,CAAA,IAAA,IACD;;AAET"}

package/dist/features/ai/react/ModelQuickSwitch.d.ts

@@ -0,0 +1,19 @@
+import { ModelSlot } from "../../../settings/values.js";
+import "../../../settings/index.js";
+import { Editor } from "@tiptap/core";
+//#region src/features/ai/react/ModelQuickSwitch.d.ts
+/**
+ * Model profile an AI slot runs on. A quick switch *is* the slot setting (`settings.ai.slots[slot]`): the choice applies
+ * to every feature of the slot, not just to the surrounding dialog. The trailing „Modelle verwalten…“ opens the
+ * settings on the „KI“ tab. Inside an editor surface the chrome comes from its context; mounted beside one, pass its
+ * `editor`.
+ */
+export declare function ModelQuickSwitch({ slot, size, editor, className }: {
+  slot: ModelSlot;
+  size?: 'xs' | 'sm';
+  /** The editor whose settings modal „Modelle verwalten…“ opens, when not mounted inside its editor surface. */
+  editor?: Editor;
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=ModelQuickSwitch.d.ts.map