@actuate-media/cms-admin 0.12.0 → 0.12.1

package/src/components/AICoauthorBubbleMenu.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import { BubbleMenu, type Editor } from '@tiptap/react'
+import { Loader2, Maximize2, Minimize2, Sparkles, SpellCheck, Wand2 } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  COAUTHOR_ACTIONS,
+  coauthorActionLabel,
+  coauthorText,
+  type CoauthorAction,
+  type ProofreadChange,
+} from '../lib/coauthor-client.js'
+import { CoauthorResultPopover } from './CoauthorResultPopover.js'
+
+export interface AICoauthorBubbleMenuProps {
+  editor: Editor | null
+}
+
+const ACTION_ICONS: Record<CoauthorAction, typeof Sparkles> = {
+  rewrite: Wand2,
+  expand: Maximize2,
+  compress: Minimize2,
+  proofread: SpellCheck,
+}
+
+interface ResultState {
+  open: boolean
+  loading: boolean
+  action: CoauthorAction
+  before: string
+  after: string
+  error?: string
+  changes?: ProofreadChange[]
+  from: number
+  to: number
+}
+
+const INITIAL: ResultState = {
+  open: false,
+  loading: false,
+  action: 'rewrite',
+  before: '',
+  after: '',
+  from: 0,
+  to: 0,
+}
+
+/**
+ * Floating menu that appears above the current text selection inside the
+ * TipTap editor. Renders four AI co-author actions
+ * (rewrite / expand / compress / proofread) and hands the selected text to
+ * `/ai/coauthor`. When the server returns, opens the shared
+ * `CoauthorResultPopover` with a before/after diff and Apply / Copy /
+ * Discard actions.
+ *
+ * The popover, not the bubble itself, holds the result — by design — so
+ * the user can scroll the editor, see the source of truth, and explicitly
+ * choose what to do with the AI output.
+ */
+export function AICoauthorBubbleMenu({ editor }: AICoauthorBubbleMenuProps) {
+  const [state, setState] = useState<ResultState>(INITIAL)
+  const [pendingAction, setPendingAction] = useState<CoauthorAction | null>(null)
+
+  const runAction = useCallback(
+    async (action: CoauthorAction) => {
+      if (!editor) return
+      const { from, to, empty } = editor.state.selection
+      if (empty) return
+      const before = editor.state.doc.textBetween(from, to, '\n', '\n')
+      if (!before.trim()) {
+        toast.error('Select text to use the AI co-author.')
+        return
+      }
+
+      setPendingAction(action)
+      setState({
+        open: true,
+        loading: true,
+        action,
+        before,
+        after: '',
+        from,
+        to,
+      })
+
+      const outcome = await coauthorText(action, before)
+      if (!outcome.ok) {
+        setState((prev) => ({ ...prev, loading: false, error: outcome.error }))
+        toast.error(outcome.error)
+        setPendingAction(null)
+        return
+      }
+
+      setState((prev) => ({
+        ...prev,
+        loading: false,
+        after: outcome.result.text,
+        changes: outcome.result.changes,
+        error: undefined,
+      }))
+      setPendingAction(null)
+    },
+    [editor],
+  )
+
+  const handleApply = useCallback(() => {
+    if (!editor) return
+    editor.chain().focus().insertContentAt({ from: state.from, to: state.to }, state.after).run()
+    toast.success(`${coauthorActionLabel(state.action)} applied.`)
+    setState(INITIAL)
+  }, [editor, state.action, state.from, state.to, state.after])
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(state.after)
+      toast.success('Copied to clipboard.')
+    } catch {
+      toast.error('Clipboard unavailable — copy the text manually.')
+    }
+  }, [state.after])
+
+  const handleDiscard = useCallback(() => {
+    setState(INITIAL)
+    setPendingAction(null)
+  }, [])
+
+  if (!editor) return null
+
+  return (
+    <>
+      <BubbleMenu
+        editor={editor}
+        shouldShow={({ editor: ed, from, to }) => {
+          if (state.open) return false
+          if (from === to) return false
+          if (!ed.isEditable) return false
+          return true
+        }}
+        tippyOptions={{ duration: 100, placement: 'top' }}
+        className="flex items-center gap-0.5 rounded-md border border-gray-200 bg-white p-1 shadow-md"
+      >
+        <span className="flex items-center gap-1 px-1.5 text-xs font-medium text-gray-500">
+          <Sparkles className="h-3 w-3" aria-hidden />
+          AI
+        </span>
+        <span className="mx-0.5 h-4 w-px bg-gray-200" />
+        {COAUTHOR_ACTIONS.map((id) => {
+          const Icon = ACTION_ICONS[id]
+          const isPending = pendingAction === id
+          const anyPending = pendingAction !== null
+          return (
+            <button
+              key={id}
+              type="button"
+              onClick={() => runAction(id)}
+              disabled={anyPending}
+              className="flex items-center gap-1 rounded px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+              title={`AI ${coauthorActionLabel(id)}`}
+            >
+              {isPending ? (
+                <Loader2 className="h-3 w-3 animate-spin" aria-hidden />
+              ) : (
+                <Icon className="h-3 w-3" aria-hidden />
+              )}
+              {coauthorActionLabel(id)}
+            </button>
+          )
+        })}
+      </BubbleMenu>
+
+      <CoauthorResultPopover
+        open={state.open}
+        loading={state.loading}
+        action={state.action}
+        before={state.before}
+        after={state.after}
+        error={state.error}
+        changes={state.changes}
+        applyLabel="Replace selection"
+        onApply={handleApply}
+        onCopy={handleCopy}
+        onDiscard={handleDiscard}
+      />
+    </>
+  )
+}

package/src/components/CoauthorResultPopover.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { Check, Copy, Loader2, Sparkles, X } from 'lucide-react'
+import type { CoauthorAction, ProofreadChange } from '../lib/coauthor-client.js'
+import { coauthorActionLabel } from '../lib/coauthor-client.js'
+
+export interface CoauthorResultPopoverProps {
+  open: boolean
+  loading: boolean
+  action: CoauthorAction
+  before: string
+  after: string
+  error?: string
+  changes?: ProofreadChange[]
+  /** Label for the apply target, e.g. "Apply to editor" or "Replace selection". */
+  applyLabel?: string
+  onApply: () => void
+  onCopy: () => void
+  onDiscard: () => void
+}
+
+/**
+ * Universal AI-result panel rendered by both the TipTap bubble menu and the
+ * Cmd+K slash-command palette. Shows a before/after diff plus three actions:
+ *
+ *   - Apply (write the result back to the active target)
+ *   - Copy (copy the result to the clipboard)
+ *   - Discard (close without changing anything)
+ *
+ * The popover takes the same `{ open, loading, action, before, after, error }`
+ * state shape regardless of caller so the UX stays identical across surfaces.
+ */
+export function CoauthorResultPopover({
+  open,
+  loading,
+  action,
+  before,
+  after,
+  error,
+  changes,
+  applyLabel,
+  onApply,
+  onCopy,
+  onDiscard,
+}: CoauthorResultPopoverProps) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        onDiscard()
+      }
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, onDiscard])
+
+  useEffect(() => {
+    if (!open) return
+    dialogRef.current?.focus()
+  }, [open])
+
+  if (!open) return null
+
+  const applyDisabled = loading || !!error || after.length === 0
+  const copyDisabled = loading || !!error || after.length === 0
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
+      role="presentation"
+      onClick={onDiscard}
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={`AI ${coauthorActionLabel(action)} result`}
+        tabIndex={-1}
+        onClick={(e) => e.stopPropagation()}
+        className="w-full max-w-2xl rounded-lg bg-white shadow-2xl outline-none"
+      >
+        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
+          <div className="flex items-center gap-2 text-sm font-semibold text-gray-900">
+            <Sparkles className="h-4 w-4 text-blue-600" aria-hidden />
+            <span>AI {coauthorActionLabel(action)}</span>
+            {loading && (
+              <Loader2 className="ml-1 h-4 w-4 animate-spin text-gray-400" aria-label="Loading" />
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={onDiscard}
+            className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+            aria-label="Close"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 p-4">
+          <section aria-labelledby="coauthor-before">
+            <h3
+              id="coauthor-before"
+              className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase"
+            >
+              Before
+            </h3>
+            <pre className="max-h-72 overflow-auto rounded border border-gray-200 bg-gray-50 p-3 text-sm whitespace-pre-wrap text-gray-700">
+              {before}
+            </pre>
+          </section>
+          <section aria-labelledby="coauthor-after">
+            <h3
+              id="coauthor-after"
+              className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase"
+            >
+              After
+            </h3>
+            {loading ? (
+              <div
+                className="flex h-72 items-center justify-center rounded border border-dashed border-gray-200 bg-gray-50 text-sm text-gray-400"
+                role="status"
+              >
+                Thinking…
+              </div>
+            ) : error ? (
+              <div className="flex h-72 items-center justify-center rounded border border-dashed border-red-200 bg-red-50 p-3 text-sm text-red-600">
+                {error}
+              </div>
+            ) : (
+              <pre className="max-h-72 overflow-auto rounded border border-blue-200 bg-blue-50 p-3 text-sm whitespace-pre-wrap text-gray-900">
+                {after}
+              </pre>
+            )}
+          </section>
+        </div>
+
+        {changes && changes.length > 0 && !loading && !error && (
+          <div className="border-t border-gray-200 px-4 py-3">
+            <h3 className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase">
+              Changes ({changes.length})
+            </h3>
+            <ul className="max-h-32 space-y-1 overflow-auto text-xs">
+              {changes.map((change, i) => (
+                <li key={i} className="flex items-start gap-2 rounded bg-gray-50 px-2 py-1">
+                  <span className="text-red-600 line-through">{change.original}</span>
+                  <span className="text-gray-400">→</span>
+                  <span className="text-green-700">{change.corrected}</span>
+                  {change.reason && (
+                    <span className="ml-auto text-gray-500 italic">{change.reason}</span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <div className="flex items-center justify-end gap-2 border-t border-gray-200 bg-gray-50 px-4 py-3">
+          <button
+            type="button"
+            onClick={onDiscard}
+            className="rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+          >
+            <X className="mr-1.5 inline h-3.5 w-3.5" aria-hidden />
+            Discard
+          </button>
+          <button
+            type="button"
+            onClick={onCopy}
+            disabled={copyDisabled}
+            className="rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Copy className="mr-1.5 inline h-3.5 w-3.5" aria-hidden />
+            Copy
+          </button>
+          <button
+            type="button"
+            onClick={onApply}
+            disabled={applyDisabled}
+            className="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Check className="mr-1.5 inline h-3.5 w-3.5" aria-hidden />
+            {applyLabel ?? 'Apply'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}