@saena-io/create 0.1.0 → 0.2.0

package/template/base/src/components/ui/rich-text/ai-copilot.tsx

@@ -0,0 +1,67 @@
+import { CopilotPlugin } from '@platejs/ai/react';
+import { stripMarkdown } from '@platejs/markdown';
+import type { RichTextExtension } from './extension';
+import { GhostText } from './ghost-text';
+
+// The AI copilot — the EDITOR half of the AI feature (ADR-0010). A RichTextExtension that wires @platejs/ai's
+// ghost-text autocomplete to a SAENA endpoint: as you type (debounced) or on Ctrl+Space, it requests a short
+// continuation, shows it as muted ghost text, and Tab accepts. The endpoint resolves the shared 'ai'
+// capability (@saena-io/ai) — the SAME integration the translation plugin uses — and returns { text };
+// @platejs/ai POSTs { prompt, system } and reads { text } back (non-streaming). Authored against @saena-io/ui
+// only (the host injects the endpoint path), so neither @saena-io/ai nor platejs leaks across the plugin boundary.
+
+const DEFAULT_SYSTEM = `You are an inline writing copilot that predicts and continues the user's text.
+Rules:
+- Continue the text naturally up to the next punctuation mark (. , ; : ? or !).
+- Match the existing style and tone; never repeat the given text.
+- Stay in the same block — do NOT start a new block or use block formatting (>, #, 1., -, etc.).
+- Always end with a punctuation mark.
+- If there is no useful continuation, reply with exactly "0" and nothing else.`;
+
+export interface AiCopilotOptions {
+  /** Endpoint the copilot POSTs { prompt, system } to and reads { text } from.
+   *  Default: the @saena-io/ai capability via the plugin dispatch. */
+  api?: string;
+  /** Override the system instruction sent with each completion. */
+  system?: string;
+}
+
+/**
+ * Build the AI copilot extension. Pass it to `useRichTextEditor({ extensions })` (and, if you later add AI
+ * toolbar controls, to `RichTextToolbar`). The endpoint defaults to the shared `@saena-io/ai` capability; a
+ * failure (no key configured, provider error) degrades silently to "no suggestion".
+ */
+export function createAiCopilotExtension(options: AiCopilotOptions = {}): RichTextExtension {
+  const endpoint = options.api ?? '/api/plugin/ai.complete';
+  const system = options.system ?? DEFAULT_SYSTEM;
+  return {
+    id: 'ai',
+    platePlugins: [
+      CopilotPlugin.configure(({ api }) => ({
+        options: {
+          completeOptions: {
+            api: endpoint,
+            // `feature: 'copilot'` routes server-side model selection to the copilot's configured model
+            // (Settings → AI), so it can run on a fast model (e.g. MiMo) independently of translation.
+            body: { system, feature: 'copilot' },
+            onError: () => {
+              // No key / provider error → leave no suggestion (graceful degradation).
+            },
+            onFinish: (_prompt, completion) => {
+              if (completion === '0' || completion.trim().length === 0) return;
+              api.copilot.setBlockSuggestion({ text: stripMarkdown(completion) });
+            },
+          },
+          debounceDelay: 500,
+          renderGhostText: GhostText,
+        },
+        shortcuts: {
+          accept: { keys: 'tab' },
+          acceptNextWord: { keys: 'mod+right' },
+          reject: { keys: 'escape' },
+          triggerSuggestion: { keys: 'ctrl+space' },
+        },
+      })),
+    ],
+  };
+}

package/template/base/src/components/ui/rich-text/ai-menu.tsx

@@ -0,0 +1,456 @@
+'use client';
+
+import {
+  AiMagicIcon,
+  ArrowDown01Icon,
+  ArrowExpandIcon,
+  ArrowReloadHorizontalIcon,
+  BubbleChatIcon,
+  Cancel01Icon,
+  Loading03Icon,
+  MagicWand01Icon,
+  QuillWrite01Icon,
+  SparklesIcon,
+  TextAlignLeftIcon,
+  Tick02Icon,
+  TickDouble01Icon,
+} from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { replacePlaceholders } from '@platejs/ai';
+import { AIChatPlugin, AIPlugin, useEditorChat, useLastAssistantMessage } from '@platejs/ai/react';
+import { useIsSelecting } from '@platejs/selection/react';
+import { Button } from '@saena-io/ui/components/button';
+import { Command, CommandGroup, CommandItem, CommandList } from '@saena-io/ui/components/command';
+import { Popover, PopoverContent } from '@saena-io/ui/components/popover';
+import { cn } from '@saena-io/ui/lib/utils';
+import { Command as CommandPrimitive } from 'cmdk';
+import { type NodeEntry, type SlateEditor, isHotkey } from 'platejs';
+import {
+  type PlateEditor,
+  useEditorPlugin,
+  useEditorRef,
+  useFocusedLast,
+  useHotkeys,
+  usePluginOption,
+} from 'platejs/react';
+import * as React from 'react';
+import { AiChatEditor } from './ai-chat-editor';
+
+// The AI command menu (ADR-0010), vendored from @platejs/ai's example and adapted to SAENA: pinned to the
+// installed 53.2.2 `chat`-injection model (the chat instance is owned by use-ai-chat + injected via the
+// plugin's useHooks, not a `chatOptions` config), built on SAENA's cmdk `command` + base-ui `popover`
+// primitives (no Radix PopoverAnchor — the popover anchors via the Positioner `anchor` prop), and scoped to
+// generate-mode only (no @platejs/suggestion diff machinery, which SAENA doesn't ship). The menu opens on
+// space-in-empty-block, mod+J, or the toolbar button; on a collapsed cursor it streams a generated draft into
+// the document (accept/discard); on a selection it previews a result to replace / insert-below.
+
+// ── Command catalog ──────────────────────────────────────────────────────────────────────────────────────
+// Prompts are resolved CLIENT-side with replacePlaceholders ({editor}/{block}/{blockSelection}/{prompt}) and
+// passed to aiChat.submit as a plain prompt — the SAENA route maps messages → model and does NOT expand
+// placeholders or rebuild the document (unlike the plate-ui example's heavier server).
+
+type MenuItemContext = { aiEditor: SlateEditor; editor: PlateEditor; input: string };
+type MenuItem = {
+  icon: typeof SparklesIcon;
+  label: string;
+  value: string;
+  onSelect: (ctx: MenuItemContext) => void;
+};
+
+function submitGenerate(
+  editor: PlateEditor,
+  input: string,
+  template: string,
+  mode?: 'insert' | 'chat',
+) {
+  const prompt = replacePlaceholders(editor, template, { prompt: input });
+  void editor.getApi(AIChatPlugin).aiChat.submit(input, { prompt, toolName: 'generate', mode });
+}
+
+const aiChatItems = {
+  continueWrite: {
+    icon: QuillWrite01Icon,
+    label: 'Continue writing',
+    value: 'continueWrite',
+    onSelect: ({ editor, input }) =>
+      submitGenerate(
+        editor,
+        input,
+        'Continue writing the document naturally from where it ends. Return ONLY the continuation (a sentence or short paragraph), no preamble:\n\n{editor}',
+        'insert',
+      ),
+  },
+  brainstorm: {
+    icon: AiMagicIcon,
+    label: 'Brainstorm ideas',
+    value: 'brainstorm',
+    onSelect: ({ editor, input }) =>
+      submitGenerate(
+        editor,
+        input,
+        input.trim().length > 0
+          ? 'Brainstorm a short, useful list of ideas about: {prompt}'
+          : 'Brainstorm a short, useful list of ideas relevant to this document:\n\n{editor}',
+        'insert',
+      ),
+  },
+  summarize: {
+    icon: TextAlignLeftIcon,
+    label: 'Summarize',
+    value: 'summarize',
+    onSelect: ({ editor, input }) =>
+      submitGenerate(
+        editor,
+        input,
+        'Write a concise summary of the document:\n\n{editor}',
+        'insert',
+      ),
+  },
+  improveWriting: {
+    icon: MagicWand01Icon,
+    label: 'Improve writing',
+    value: 'improveWriting',
+    onSelect: ({ editor, input }) =>
+      submitGenerate(
+        editor,
+        input,
+        'Improve the writing for clarity and flow without changing the meaning. Return ONLY the improved text:\n\n{blockSelection}',
+      ),
+  },
+  fixSpelling: {
+    icon: Tick02Icon,
+    label: 'Fix spelling & grammar',
+    value: 'fixSpelling',
+    onSelect: ({ editor, input }) =>
+      submitGenerate(
+        editor,
+        input,
+        'Fix spelling, grammar, and punctuation without changing meaning or tone. Return ONLY the corrected text:\n\n{blockSelection}',
+      ),
+  },
+  makeShorter: {
+    icon: ArrowDown01Icon,
+    label: 'Make shorter',
+    value: 'makeShorter',
+    onSelect: ({ editor, input }) =>
+      submitGenerate(
+        editor,
+        input,
+        'Make the following text shorter and more concise without losing essential meaning. Return ONLY the shortened text:\n\n{blockSelection}',
+      ),
+  },
+  makeLonger: {
+    icon: ArrowExpandIcon,
+    label: 'Make longer',
+    value: 'makeLonger',
+    onSelect: ({ editor, input }) =>
+      submitGenerate(
+        editor,
+        input,
+        'Expand and elaborate on the following text without changing its meaning. Return ONLY the expanded text:\n\n{blockSelection}',
+      ),
+  },
+  simplify: {
+    icon: SparklesIcon,
+    label: 'Simplify language',
+    value: 'simplify',
+    onSelect: ({ editor, input }) =>
+      submitGenerate(
+        editor,
+        input,
+        'Simplify the language of the following text using clearer, plainer wording without changing meaning. Return ONLY the simplified text:\n\n{blockSelection}',
+      ),
+  },
+  explain: {
+    icon: BubbleChatIcon,
+    label: 'Explain',
+    value: 'explain',
+    onSelect: ({ editor, input }) =>
+      submitGenerate(editor, input, 'Explain the following text clearly:\n\n{blockSelection}'),
+  },
+  // ── Suggestion actions (after a result exists) ──
+  accept: {
+    icon: TickDouble01Icon,
+    label: 'Accept',
+    value: 'accept',
+    onSelect: ({ editor }) => {
+      editor.getTransforms(AIChatPlugin).aiChat.accept();
+      editor.tf.focus({ edge: 'end' });
+    },
+  },
+  replace: {
+    icon: TickDouble01Icon,
+    label: 'Replace selection',
+    value: 'replace',
+    onSelect: ({ aiEditor, editor }) => {
+      void editor.getTransforms(AIChatPlugin).aiChat.replaceSelection(aiEditor);
+    },
+  },
+  insertBelow: {
+    icon: ArrowDown01Icon,
+    label: 'Insert below',
+    value: 'insertBelow',
+    onSelect: ({ aiEditor, editor }) => {
+      void editor.getTransforms(AIChatPlugin).aiChat.insertBelow(aiEditor, { format: 'none' });
+    },
+  },
+  tryAgain: {
+    icon: ArrowReloadHorizontalIcon,
+    label: 'Try again',
+    value: 'tryAgain',
+    onSelect: ({ editor }) => {
+      void editor.getApi(AIChatPlugin).aiChat.reload();
+    },
+  },
+  discard: {
+    icon: Cancel01Icon,
+    label: 'Discard',
+    value: 'discard',
+    onSelect: ({ editor }) => {
+      editor.getTransforms(AIPlugin).ai.undo();
+      editor.getApi(AIChatPlugin).aiChat.hide();
+    },
+  },
+} satisfies Record<string, MenuItem>;
+
+type MenuState = 'cursorCommand' | 'cursorSuggestion' | 'selectionCommand' | 'selectionSuggestion';
+
+const menuStateItems: Record<MenuState, MenuItem[]> = {
+  cursorCommand: [aiChatItems.continueWrite, aiChatItems.summarize, aiChatItems.brainstorm],
+  cursorSuggestion: [aiChatItems.accept, aiChatItems.discard, aiChatItems.tryAgain],
+  selectionCommand: [
+    aiChatItems.improveWriting,
+    aiChatItems.fixSpelling,
+    aiChatItems.makeShorter,
+    aiChatItems.makeLonger,
+    aiChatItems.simplify,
+    aiChatItems.explain,
+  ],
+  selectionSuggestion: [
+    aiChatItems.replace,
+    aiChatItems.insertBelow,
+    aiChatItems.discard,
+    aiChatItems.tryAgain,
+  ],
+};
+
+// ── Menu ─────────────────────────────────────────────────────────────────────────────────────────────────
+export function AiMenu() {
+  const { api, editor } = useEditorPlugin(AIChatPlugin);
+  const mode = usePluginOption(AIChatPlugin, 'mode');
+  const streaming = usePluginOption(AIChatPlugin, 'streaming');
+  const isSelecting = useIsSelecting();
+  const isFocusedLast = useFocusedLast();
+  const open = usePluginOption(AIChatPlugin, 'open') && isFocusedLast;
+  const [value, setValue] = React.useState('');
+  const [input, setInput] = React.useState('');
+  const chat = usePluginOption(AIChatPlugin, 'chat');
+  const { messages, status } = chat;
+  const [anchorElement, setAnchorElement] = React.useState<HTMLElement | null>(null);
+  const content = useLastAssistantMessage()?.parts.find((part) => part.type === 'text')?.text;
+
+  // Key on `streaming` only (api/editor are re-derived each render and would over-run this) — matches the
+  // upstream @platejs/ai example. Re-anchors the popover at the live AI anchor node while a stream is active.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: api/editor are stable editor refs, intentionally omitted.
+  React.useEffect(() => {
+    if (!streaming) return;
+    const anchorEntry = api.aiChat.node({ anchor: true });
+    if (!anchorEntry) return;
+    const dom = editor.api.toDOMNode(anchorEntry[0]);
+    if (dom) setAnchorElement(dom);
+  }, [streaming]);
+
+  const setOpen = (next: boolean) => {
+    if (next) api.aiChat.show();
+    else api.aiChat.hide();
+  };
+  const show = (el: HTMLElement) => {
+    setAnchorElement(el);
+    setOpen(true);
+  };
+
+  useEditorChat({
+    onOpenChange: (next) => {
+      if (!next) {
+        setAnchorElement(null);
+        setInput('');
+      }
+    },
+    onOpenCursor: () => {
+      const ancestor = editor.api.block({ highest: true });
+      const dom = ancestor && editor.api.toDOMNode(ancestor[0]);
+      if (dom) show(dom);
+    },
+    onOpenSelection: () => {
+      const last = editor.api.blocks().at(-1);
+      const dom = last && editor.api.toDOMNode(last[0]);
+      if (dom) show(dom);
+    },
+    onOpenBlockSelection: (blocks: NodeEntry[]) => {
+      const last = blocks.at(-1);
+      const dom = last && editor.api.toDOMNode(last[0]);
+      if (dom) show(dom);
+    },
+  });
+
+  const isLoading = status === 'streaming' || status === 'submitted';
+
+  useHotkeys(
+    'escape',
+    () => {
+      if (isLoading) api.aiChat.stop();
+      else api.aiChat.hide();
+    },
+    { enableOnContentEditable: true, enableOnFormTags: true },
+  );
+
+  // 53.2.2's AIChatPlugin has no built-in `show` shortcut — wire mod+J to open the menu at the cursor.
+  useHotkeys(
+    'mod+j',
+    (e) => {
+      e.preventDefault();
+      api.aiChat.show();
+    },
+    { enableOnContentEditable: true },
+  );
+
+  // In insert mode the result streams into the document, so the menu UI itself stays hidden while loading.
+  if (isLoading && mode === 'insert') return null;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverContent
+        anchor={anchorElement ?? undefined}
+        className="w-[440px] max-w-[85vw] overflow-hidden p-0 ring-1 ring-foreground/10"
+        side="bottom"
+        align="start"
+      >
+        <Command value={value} onValueChange={setValue} shouldFilter={false} className="bg-popover">
+          {mode === 'chat' && content && (
+            <div className="border-b">
+              <AiChatEditor content={content} />
+            </div>
+          )}
+
+          {isLoading ? (
+            <div className="flex items-center gap-2 p-3 text-muted-foreground text-xs">
+              <HugeiconsIcon icon={Loading03Icon} className="size-4 animate-spin" />
+              {messages.length > 1 ? 'Editing…' : 'Thinking…'}
+            </div>
+          ) : (
+            <CommandPrimitive.Input
+              className={cn(
+                'flex h-9 w-full min-w-0 border-b bg-transparent px-3 py-1 text-sm outline-none',
+                'placeholder:text-muted-foreground',
+              )}
+              value={input}
+              onValueChange={setInput}
+              onKeyDown={(e) => {
+                if (isHotkey('backspace')(e) && input.length === 0) {
+                  e.preventDefault();
+                  api.aiChat.hide();
+                }
+                if (isHotkey('enter')(e) && !e.shiftKey && !value) {
+                  e.preventDefault();
+                  if (input.trim().length === 0) return;
+                  if (isSelecting) {
+                    submitGenerate(
+                      editor,
+                      input,
+                      '{prompt}\n\nApply the instruction above to the following text and return ONLY the result:\n\n{blockSelection}',
+                    );
+                  } else {
+                    void editor.getApi(AIChatPlugin).aiChat.submit(input, { toolName: 'generate' });
+                  }
+                  setInput('');
+                }
+              }}
+              placeholder="Ask AI to write or edit…"
+              autoFocus
+            />
+          )}
+
+          {!isLoading && (
+            <CommandList>
+              <AiMenuItems input={input} setInput={setInput} setValue={setValue} />
+            </CommandList>
+          )}
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function AiMenuItems({
+  input,
+  setInput,
+  setValue,
+}: {
+  input: string;
+  setInput: (v: string) => void;
+  setValue: (v: string) => void;
+}) {
+  const editor = useEditorRef();
+  const { messages } = usePluginOption(AIChatPlugin, 'chat');
+  const aiEditor = usePluginOption(AIChatPlugin, 'aiEditor');
+  const isSelecting = useIsSelecting();
+
+  const menuState: MenuState = React.useMemo(() => {
+    if (messages && messages.length > 0) {
+      return isSelecting ? 'selectionSuggestion' : 'cursorSuggestion';
+    }
+    return isSelecting ? 'selectionCommand' : 'cursorCommand';
+  }, [isSelecting, messages]);
+
+  const items = menuStateItems[menuState];
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-seed the highlighted value when the set changes.
+  React.useEffect(() => {
+    const first = items[0];
+    if (first) setValue(first.value);
+  }, [menuState, setValue]);
+
+  return (
+    <CommandGroup>
+      {items.map((item) => (
+        <CommandItem
+          key={item.value}
+          className="gap-2 [&_svg]:text-muted-foreground"
+          value={item.value}
+          onSelect={() => {
+            item.onSelect({ aiEditor: aiEditor as SlateEditor, editor, input });
+            setInput('');
+          }}
+        >
+          <HugeiconsIcon icon={item.icon} className="size-4" strokeWidth={2} />
+          <span>{item.label}</span>
+        </CommandItem>
+      ))}
+    </CommandGroup>
+  );
+}
+
+// ── Loading bar (afterContainer) ─────────────────────────────────────────────────────────────────────────
+export function AiLoadingBar() {
+  const { api } = useEditorPlugin(AIChatPlugin);
+  const chat = usePluginOption(AIChatPlugin, 'chat');
+  const mode = usePluginOption(AIChatPlugin, 'mode');
+  const isLoading = chat.status === 'streaming' || chat.status === 'submitted';
+
+  if (!isLoading || mode !== 'insert') return null;
+
+  return (
+    <div className="-translate-x-1/2 absolute bottom-4 left-1/2 z-20 flex items-center gap-2 rounded-md border bg-popover px-3 py-1.5 text-muted-foreground text-xs shadow-md">
+      <HugeiconsIcon icon={Loading03Icon} className="size-3.5 animate-spin" />
+      <span>{chat.status === 'submitted' ? 'Thinking…' : 'Writing…'}</span>
+      <Button
+        size="sm"
+        variant="ghost"
+        className="h-6 gap-1 text-xs"
+        onClick={() => api.aiChat.stop()}
+      >
+        Stop
+      </Button>
+    </div>
+  );
+}

package/template/base/src/components/ui/rich-text/ai-node.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { AIChatPlugin } from '@platejs/ai/react';
+import { cn } from '@saena-io/ui/lib/utils';
+import {
+  PlateElement,
+  type PlateElementProps,
+  PlateText,
+  type PlateTextProps,
+  usePluginOption,
+} from 'platejs/react';
+
+// AI node renderers for the command menu (ADR-0010), vendored from @platejs/ai's example and adapted to
+// SAENA's theme tokens. `AILeaf` styles text that the AI is actively streaming into the document (insert
+// mode) with a subtle highlight + a pulsing caret on the last node. `AIAnchorElement` is a zero-height
+// invisible block the floating menu popover anchors to while a cursor-mode stream is in flight.
+
+export function AILeaf(props: PlateTextProps) {
+  const streaming = usePluginOption(AIChatPlugin, 'streaming');
+  const streamingLeaf = props.editor.getApi(AIChatPlugin).aiChat.node({ streaming: true });
+  const isLast = streamingLeaf?.[0] === props.text;
+
+  return (
+    <PlateText
+      className={cn(
+        'bg-primary/10 text-foreground/90 transition-colors duration-150',
+        isLast &&
+          streaming &&
+          'after:ml-0.5 after:inline-block after:h-3 after:w-[2px] after:animate-pulse after:bg-primary after:align-middle after:content-[""]',
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AIAnchorElement(props: PlateElementProps) {
+  return (
+    <PlateElement {...props}>
+      <div className="h-[0.1px]" />
+    </PlateElement>
+  );
+}

package/template/base/src/components/ui/rich-text/ai-toolbar-button.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { SparklesIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { AIChatPlugin } from '@platejs/ai/react';
+import { Button } from '@saena-io/ui/components/button';
+import { useActiveEditor } from './toolbar';
+
+// Toolbar trigger for the AI command menu, placed in the reserved 'ai' toolbar slot. SAENA's toolbar exposes
+// no ToolbarButton, so this is a plain @saena-io/ui Button. useActiveEditor() (not useEditorPlugin) resolves the
+// last-focused editor — opening the menu blurs the editor, so we must not depend on live focus. onMouseDown
+// preventDefault keeps the editor selection intact when the button is pressed.
+export function AiToolbarButton() {
+  const editor = useActiveEditor();
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      className="gap-1.5 text-muted-foreground"
+      disabled={!editor}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => editor?.getApi(AIChatPlugin).aiChat.show()}
+    >
+      <HugeiconsIcon icon={SparklesIcon} className="size-3.5" strokeWidth={2} />
+      Ask AI
+    </Button>
+  );
+}