@actuate-media/cms-admin 0.12.0 → 0.13.0

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>
+  )
+}