@actuate-media/cms-admin 0.72.2 → 0.73.0

package/src/views/post-editor/PostFieldsModal.tsx

@@ -1,13 +1,17 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Loader2, Sparkles } from 'lucide-react'
+import { toast } from 'sonner'
 import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
+import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { TagInput } from '../../components/TagInput.js'
-import { RichTextField } from '../../fields/RichTextField.js'
 import { SeoCharCount } from '../../components/seo/SeoCharCount.js'
+import { coauthorText } from '../../lib/coauthor-client.js'
+import { generateSeoField } from '../../lib/seo-service.js'
 import type { EditorPost } from '../../lib/post-editor-service.js'
 
 const SEO_TITLE_MIN = 30
@@ -37,12 +41,98 @@ interface PostFieldsModalProps {
 }
 
 const LABEL = 'text-foreground mb-1 block text-xs font-medium'
+/** Match TipTap body editor borders — `border-input` is transparent in theme.css. */
 const INPUT =
-  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+  'border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
 
 const slugify = normalizeSlug
 
-/** Edits post-level fields: title, slug, excerpt, featured image, category, tags, body, SEO. */
+type AiTarget = 'excerpt' | 'seoTitle' | 'seoDescription'
+
+type FormSnapshot = {
+  title: string
+  slug: string
+  excerpt: string
+  featuredImage: string
+  category: string
+  tags: string
+  seoTitle: string
+  seoDescription: string
+}
+
+function snapshotFromPost(post: EditorPost): FormSnapshot {
+  return {
+    title: post.title,
+    slug: post.slug,
+    excerpt: post.excerpt,
+    featuredImage: post.featuredImage,
+    category: post.category,
+    tags: [...post.tags].sort().join('\0'),
+    seoTitle: post.seoTitle,
+    seoDescription: post.seoDescription,
+  }
+}
+
+function snapshotFromFields(input: {
+  title: string
+  slug: string
+  excerpt: string
+  featuredImage: string
+  category: string
+  tags: string[]
+  seoTitle: string
+  seoDescription: string
+}): FormSnapshot {
+  return {
+    ...input,
+    tags: [...input.tags].sort().join('\0'),
+  }
+}
+
+function stripHtml(html: string): string {
+  return html
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function buildContentContext(title: string, body: string, excerpt: string): string {
+  const plain = stripHtml(body)
+  const parts = [title.trim(), excerpt.trim(), plain].filter(Boolean)
+  return parts.join('\n\n')
+}
+
+function AiFieldButton({
+  label,
+  busy,
+  disabled,
+  onClick,
+}: {
+  label: string
+  busy: boolean
+  disabled?: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      disabled={disabled || busy}
+      onClick={onClick}
+      className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-[var(--acc)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
+    >
+      {busy ? (
+        <Loader2 className="h-3 w-3 animate-spin" aria-hidden />
+      ) : (
+        <Sparkles className="h-3 w-3" aria-hidden />
+      )}
+      {busy ? 'Generating…' : 'AI'}
+    </button>
+  )
+}
+
+/** Edits post metadata: title, slug, excerpt, featured image, category, tags, SEO. */
 export function PostFieldsModal({
   open,
   post,
@@ -57,11 +147,13 @@ export function PostFieldsModal({
   const [featuredImage, setFeaturedImage] = useState(post.featuredImage)
   const [category, setCategory] = useState(post.category)
   const [tags, setTags] = useState<string[]>(post.tags)
-  const [body, setBody] = useState(post.body)
   const [seoTitle, setSeoTitle] = useState(post.seoTitle)
   const [seoDescription, setSeoDescription] = useState(post.seoDescription)
   const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
   const [mediaOpen, setMediaOpen] = useState(false)
+  const [aiBusy, setAiBusy] = useState<AiTarget | null>(null)
+  const [confirmDiscard, setConfirmDiscard] = useState(false)
+  const baselineRef = useRef<FormSnapshot | null>(null)
   // Land the user in the Title field (name-it-first flow for new posts).
   const titleRef = useRef<HTMLInputElement | null>(null)
 
@@ -74,19 +166,47 @@ export function PostFieldsModal({
   const hasTags = tagsField?.type === 'array'
 
   useEffect(() => {
-    if (!open) return
+    if (!open) {
+      baselineRef.current = null
+      setConfirmDiscard(false)
+      return
+    }
     setTitle(post.title)
     setSlug(post.slug)
     setExcerpt(post.excerpt)
     setFeaturedImage(post.featuredImage)
     setCategory(post.category)
     setTags(post.tags)
-    setBody(post.body)
     setSeoTitle(post.seoTitle)
     setSeoDescription(post.seoDescription)
     setSlugTouched(Boolean(post.slug))
+    setAiBusy(null)
+    baselineRef.current = snapshotFromPost(post)
   }, [open, post])
 
+  const isDirty = useMemo(() => {
+    if (!open || !baselineRef.current) return false
+    const current = snapshotFromFields({
+      title,
+      slug,
+      excerpt,
+      featuredImage,
+      category,
+      tags,
+      seoTitle,
+      seoDescription,
+    })
+    return JSON.stringify(current) !== JSON.stringify(baselineRef.current)
+  }, [open, title, slug, excerpt, featuredImage, category, tags, seoTitle, seoDescription])
+
+  function requestDismiss() {
+    if (isDirty) {
+      setConfirmDiscard(true)
+      return
+    }
+    onClose()
+  }
+
   function handleTitle(next: string) {
     setTitle(next)
     if (!slugTouched) setSlug(slugify(next))
@@ -94,201 +214,308 @@ export function PostFieldsModal({
 
   const slugError = validateSlug(slug)
 
+  async function handleAiGenerate(target: AiTarget) {
+    const context = buildContentContext(title, post.body, excerpt)
+    if (!context.trim()) {
+      toast.error(
+        'Add a title or write body content in the Article Body section before generating with AI.',
+      )
+      return
+    }
+
+    setAiBusy(target)
+    try {
+      if (target === 'excerpt') {
+        const outcome = await coauthorText('compress', context, {
+          instructions:
+            'Write a 1–2 sentence excerpt for blog listings and cards. Return only the excerpt text.',
+          targetLength: 45,
+        })
+        if (!outcome.ok) {
+          toast.error(outcome.error)
+          return
+        }
+        setExcerpt(outcome.result.text.trim())
+        toast.success('Excerpt generated — review before saving.')
+        return
+      }
+
+      if (post.id) {
+        const field = target === 'seoTitle' ? 'metaTitle' : 'metaDescription'
+        const result = await generateSeoField(field, {
+          entityType: post.postType,
+          entityId: post.id,
+        })
+        if (result.unavailable) {
+          toast.error('AI is not configured. Add an AI provider to enable suggestions.')
+          return
+        }
+        if (result.text) {
+          if (target === 'seoTitle') setSeoTitle(result.text)
+          else setSeoDescription(result.text)
+          toast.success('AI suggestion applied — review before saving.')
+        } else {
+          toast.error('No suggestion was returned.')
+        }
+        return
+      }
+
+      if (target === 'seoTitle') {
+        const outcome = await coauthorText('rewrite', context, {
+          style: 'seo-optimized',
+          instructions:
+            'Write a single SEO page title under 60 characters. Return only the title — no quotes.',
+        })
+        if (!outcome.ok) {
+          toast.error(outcome.error)
+          return
+        }
+        setSeoTitle(outcome.result.text.trim().slice(0, SEO_TITLE_MAX))
+      } else {
+        const outcome = await coauthorText('compress', context, {
+          instructions:
+            'Write a compelling SEO meta description of 120–160 characters for search results. Return only the description.',
+          targetLength: 155,
+        })
+        if (!outcome.ok) {
+          toast.error(outcome.error)
+          return
+        }
+        setSeoDescription(outcome.result.text.trim().slice(0, SEO_DESC_MAX))
+      }
+      toast.success('AI suggestion applied — review before saving.')
+    } catch {
+      toast.error('AI request failed.')
+    } finally {
+      setAiBusy(null)
+    }
+  }
+
   function handleSave() {
     if (slugError) return
-    onSave({ title, slug, excerpt, featuredImage, category, tags, body, seoTitle, seoDescription })
+    onSave({ title, slug, excerpt, featuredImage, category, tags, seoTitle, seoDescription })
     onClose()
   }
 
   return (
-    <Modal
-      open={open}
-      onClose={onClose}
-      title="Post details"
-      initialFocusRef={titleRef}
-      actions={
-        <>
-          <Button variant="ghost" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" onClick={handleSave} disabled={!canEdit || Boolean(slugError)}>
-            Done
-          </Button>
-        </>
-      }
-    >
-      <div className="space-y-3">
-        <div>
-          <label className={LABEL} htmlFor="pf-title">
-            Title <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="pf-title"
-            ref={titleRef}
-            className={INPUT}
-            value={title}
-            disabled={!canEdit}
-            placeholder="e.g. Announcing our new product"
-            onChange={(e) => handleTitle(e.target.value)}
-          />
-        </div>
-        <div className="grid grid-cols-2 gap-3">
+    <>
+      <Modal
+        open={open}
+        onClose={onClose}
+        onDismiss={requestDismiss}
+        title="Post details"
+        size="lg"
+        initialFocusRef={titleRef}
+        actions={
+          <>
+            <Button variant="ghost" onClick={requestDismiss}>
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleSave}
+              disabled={!canEdit || Boolean(slugError)}
+            >
+              Done
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-3">
           <div>
-            <label className={LABEL} htmlFor="pf-slug">
-              Slug <span className="text-destructive">*</span>
+            <label className={LABEL} htmlFor="pf-title">
+              Title <span className="text-destructive">*</span>
             </label>
             <input
-              id="pf-slug"
+              id="pf-title"
+              ref={titleRef}
               className={INPUT}
-              value={slug}
+              value={title}
               disabled={!canEdit}
-              aria-invalid={Boolean(slugError)}
-              aria-describedby={slugError ? 'pf-slug-error' : undefined}
-              onChange={(e) => {
-                setSlugTouched(true)
-                setSlug(slugify(e.target.value))
-              }}
+              placeholder="e.g. Announcing our new product"
+              onChange={(e) => handleTitle(e.target.value)}
             />
-            {slugError && (
-              <p id="pf-slug-error" className="text-destructive mt-1 text-xs">
-                {slugError}
-              </p>
-            )}
           </div>
-          <div>
-            <label className={LABEL} htmlFor="pf-category">
-              Category
-            </label>
-            {categoryOptions ? (
-              <select
-                id="pf-category"
-                className={INPUT}
-                value={category}
-                disabled={!canEdit}
-                onChange={(e) => setCategory(e.target.value)}
-              >
-                <option value="">No category</option>
-                {categoryOptions.map((o) => (
-                  <option key={o.value} value={o.value}>
-                    {o.label}
-                  </option>
-                ))}
-                {/* Keep a legacy free-text value selectable so opening the
-                    modal never silently discards it. */}
-                {category && !categoryOptions.some((o) => o.value === category) && (
-                  <option value={category}>{category}</option>
-                )}
-              </select>
-            ) : (
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className={LABEL} htmlFor="pf-slug">
+                Slug <span className="text-destructive">*</span>
+              </label>
               <input
-                id="pf-category"
+                id="pf-slug"
                 className={INPUT}
-                value={category}
+                value={slug}
                 disabled={!canEdit}
-                placeholder="e.g. Product"
-                onChange={(e) => setCategory(e.target.value)}
+                placeholder={slugTouched ? undefined : 'Generated from title…'}
+                aria-invalid={Boolean(slugError)}
+                aria-describedby={slugError ? 'pf-slug-error' : undefined}
+                onChange={(e) => {
+                  setSlugTouched(true)
+                  setSlug(slugify(e.target.value))
+                }}
               />
-            )}
+              {slugError && (
+                <p id="pf-slug-error" className="text-destructive mt-1 text-xs">
+                  {slugError}
+                </p>
+              )}
+            </div>
+
+            <div>
+              <label className={LABEL} htmlFor="pf-category">
+                Category
+              </label>
+              {categoryOptions ? (
+                <select
+                  id="pf-category"
+                  className={INPUT}
+                  value={category}
+                  disabled={!canEdit}
+                  onChange={(e) => setCategory(e.target.value)}
+                >
+                  <option value="">No category</option>
+                  {categoryOptions.map((o) => (
+                    <option key={o.value} value={o.value}>
+                      {o.label}
+                    </option>
+                  ))}
+                  {category && !categoryOptions.some((o) => o.value === category) && (
+                    <option value={category}>{category}</option>
+                  )}
+                </select>
+              ) : (
+                <input
+                  id="pf-category"
+                  className={INPUT}
+                  value={category}
+                  disabled={!canEdit}
+                  placeholder="e.g. Product"
+                  onChange={(e) => setCategory(e.target.value)}
+                />
+              )}
+            </div>
           </div>
-        </div>
-        {hasTags && (
+
+          {hasTags && (
+            <div>
+              <label className={LABEL} htmlFor="pf-tags">
+                Tags
+              </label>
+              <TagInput
+                id="pf-tags"
+                value={tags}
+                onChange={setTags}
+                collection={post.postType}
+                field="tags"
+                disabled={!canEdit}
+                maxTags={tagsField?.maxRows}
+              />
+            </div>
+          )}
+
           <div>
-            <label className={LABEL} htmlFor="pf-tags">
-              Tags
-            </label>
-            <TagInput
-              id="pf-tags"
-              value={tags}
-              onChange={setTags}
-              collection={post.postType}
-              field="tags"
+            <div className="mb-1 flex items-center justify-between gap-2">
+              <label className={`${LABEL} mb-0`} htmlFor="pf-excerpt">
+                Excerpt
+              </label>
+              <AiFieldButton
+                label="Generate excerpt from content"
+                busy={aiBusy === 'excerpt'}
+                disabled={!canEdit}
+                onClick={() => void handleAiGenerate('excerpt')}
+              />
+            </div>
+            <textarea
+              id="pf-excerpt"
+              className={`${INPUT} min-h-[72px] resize-y`}
+              value={excerpt}
               disabled={!canEdit}
-              maxTags={tagsField?.maxRows}
+              placeholder="A short summary shown in listings and the header."
+              onChange={(e) => setExcerpt(e.target.value)}
             />
           </div>
-        )}
-        <div>
-          <label className={LABEL} htmlFor="pf-excerpt">
-            Excerpt
-          </label>
-          <textarea
-            id="pf-excerpt"
-            className={`${INPUT} min-h-[60px] resize-y`}
-            value={excerpt}
-            disabled={!canEdit}
-            placeholder="A short summary shown in listings and the header."
-            onChange={(e) => setExcerpt(e.target.value)}
-          />
-        </div>
-        <div>
-          <label className={LABEL} htmlFor="pf-image">
-            Featured image
-          </label>
-          <div className="flex gap-2">
+
+          <div>
+            <label className={LABEL} htmlFor="pf-image">
+              Featured image
+            </label>
+            <div className="flex gap-2">
+              <input
+                id="pf-image"
+                className={`${INPUT} min-w-0 flex-1`}
+                value={featuredImage}
+                disabled={!canEdit}
+                placeholder="https://… or pick from the media library"
+                onChange={(e) => setFeaturedImage(e.target.value)}
+              />
+              <button
+                type="button"
+                disabled={!canEdit}
+                onClick={() => setMediaOpen(true)}
+                className="bg-accent text-foreground border-border hover:bg-accent/80 shrink-0 rounded-md border px-3 py-1.5 text-xs font-medium disabled:opacity-50"
+              >
+                Browse
+              </button>
+            </div>
+            {featuredImage && (
+              <div className="border-border bg-muted mt-2 overflow-hidden rounded-md border">
+                <img src={featuredImage} alt="" className="h-28 w-full object-cover" />
+              </div>
+            )}
+          </div>
+
+          <div>
+            <div className="mb-1 flex items-center justify-between gap-2">
+              <div className="flex min-w-0 items-center gap-2">
+                <label className={`${LABEL} mb-0`} htmlFor="pf-seo-title">
+                  SEO title
+                </label>
+                <AiFieldButton
+                  label="Generate SEO title from content"
+                  busy={aiBusy === 'seoTitle'}
+                  disabled={!canEdit}
+                  onClick={() => void handleAiGenerate('seoTitle')}
+                />
+              </div>
+              <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
+            </div>
             <input
-              id="pf-image"
-              className={`${INPUT} flex-1`}
-              value={featuredImage}
+              id="pf-seo-title"
+              className={INPUT}
+              value={seoTitle}
               disabled={!canEdit}
-              placeholder="https://… or pick from the media library"
-              onChange={(e) => setFeaturedImage(e.target.value)}
+              placeholder={title || 'Defaults to the post title'}
+              onChange={(e) => setSeoTitle(e.target.value)}
             />
-            <button
-              type="button"
-              disabled={!canEdit}
-              onClick={() => setMediaOpen(true)}
-              className="bg-accent text-foreground border-border hover:bg-accent/80 shrink-0 rounded-md border px-3 py-1.5 text-xs font-medium disabled:opacity-50"
-            >
-              Browse
-            </button>
           </div>
-          {featuredImage && (
-            <div className="border-border bg-muted mt-2 overflow-hidden rounded-md border">
-              <img src={featuredImage} alt="" className="h-28 w-full object-cover" />
+
+          <div>
+            <div className="mb-1 flex items-center justify-between gap-2">
+              <div className="flex min-w-0 items-center gap-2">
+                <label className={`${LABEL} mb-0`} htmlFor="pf-seo-desc">
+                  SEO description
+                </label>
+                <AiFieldButton
+                  label="Generate SEO description from content"
+                  busy={aiBusy === 'seoDescription'}
+                  disabled={!canEdit}
+                  onClick={() => void handleAiGenerate('seoDescription')}
+                />
+              </div>
+              <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
             </div>
-          )}
-        </div>
-        <div>
-          <RichTextField
-            label="Body"
-            value={body}
-            onChange={canEdit ? setBody : () => {}}
-            helpText="Rendered by the Article Body section when its source is set to the post Body field."
-          />
-        </div>
-        <div>
-          <div className="mb-1 flex items-center justify-between">
-            <label className={`${LABEL} mb-0`} htmlFor="pf-seo-title">
-              SEO title
-            </label>
-            <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
-          </div>
-          <input
-            id="pf-seo-title"
-            className={INPUT}
-            value={seoTitle}
-            disabled={!canEdit}
-            placeholder={title || 'Defaults to the post title'}
-            onChange={(e) => setSeoTitle(e.target.value)}
-          />
-        </div>
-        <div>
-          <div className="mb-1 flex items-center justify-between">
-            <label className={`${LABEL} mb-0`} htmlFor="pf-seo-desc">
-              SEO description
-            </label>
-            <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
+            <textarea
+              id="pf-seo-desc"
+              className={`${INPUT} min-h-[72px] resize-y`}
+              value={seoDescription}
+              disabled={!canEdit}
+              placeholder={excerpt || 'Summarize the post for search results (120–160 characters)'}
+              onChange={(e) => setSeoDescription(e.target.value)}
+            />
           </div>
-          <textarea
-            id="pf-seo-desc"
-            className={`${INPUT} min-h-[60px] resize-y`}
-            value={seoDescription}
-            disabled={!canEdit}
-            placeholder={excerpt || 'Summarize the post for search results (120–160 characters)'}
-            onChange={(e) => setSeoDescription(e.target.value)}
-          />
         </div>
-      </div>
+      </Modal>
 
       <MediaPickerModal
         open={mediaOpen}
@@ -299,6 +526,17 @@ export function PostFieldsModal({
         }}
         accept="image/*"
       />
-    </Modal>
+
+      <ConfirmDialog
+        open={confirmDiscard}
+        onClose={() => setConfirmDiscard(false)}
+        onConfirm={onClose}
+        title="Discard unsaved changes?"
+        description="You have unsaved post details. Closing now will discard them."
+        confirmLabel="Discard"
+        cancelLabel="Keep editing"
+        destructive
+      />
+    </>
   )
 }