@wakastellar/ui 3.3.3 → 3.5.0

package/src/components/editor/waka-ai-writer.tsx

@@ -0,0 +1,434 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Label } from "../label"
+import { Textarea } from "../textarea"
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SlateNode = any
+
+/** Predefined AI action available in the AI menu */
+export interface AIAction {
+  /** Unique key */
+  key: string
+  /** Display label */
+  label: string
+  /** Icon name from lucide-react (optional) */
+  icon?: string
+  /** Prompt template. Use {{selection}} for the selected text placeholder. */
+  prompt: string
+  /** Group name for the menu */
+  group?: string
+}
+
+/** Default AI actions available in the WakaAIWriter menu */
+export const DEFAULT_AI_ACTIONS: AIAction[] = [
+  // Generation
+  { key: "continue", label: "Continuer la redaction", prompt: "Continue writing the following text naturally:\n\n{{selection}}", group: "Generer" },
+  { key: "summarize", label: "Resumer", prompt: "Summarize the following text concisely:\n\n{{selection}}", group: "Generer" },
+  { key: "explain", label: "Expliquer", prompt: "Explain the following text in simple terms:\n\n{{selection}}", group: "Generer" },
+  { key: "outline", label: "Creer un plan", prompt: "Create a structured outline from the following text:\n\n{{selection}}", group: "Generer" },
+  // Editing
+  { key: "improve", label: "Ameliorer le style", prompt: "Improve the writing quality of the following text while keeping the same meaning:\n\n{{selection}}", group: "Editer" },
+  { key: "shorter", label: "Raccourcir", prompt: "Make the following text shorter while keeping the key information:\n\n{{selection}}", group: "Editer" },
+  { key: "longer", label: "Developper", prompt: "Expand and elaborate on the following text:\n\n{{selection}}", group: "Editer" },
+  { key: "fix-grammar", label: "Corriger l'orthographe", prompt: "Fix all spelling and grammar errors in the following text:\n\n{{selection}}", group: "Editer" },
+  { key: "simplify", label: "Simplifier", prompt: "Simplify the language of the following text to make it easier to understand:\n\n{{selection}}", group: "Editer" },
+  // Translation
+  { key: "translate-en", label: "Traduire en anglais", prompt: "Translate the following text to English:\n\n{{selection}}", group: "Traduire" },
+  { key: "translate-fr", label: "Traduire en francais", prompt: "Translate the following text to French:\n\n{{selection}}", group: "Traduire" },
+  { key: "translate-es", label: "Traduire en espagnol", prompt: "Translate the following text to Spanish:\n\n{{selection}}", group: "Traduire" },
+  { key: "translate-de", label: "Traduire en allemand", prompt: "Translate the following text to German:\n\n{{selection}}", group: "Traduire" },
+]
+
+export interface WakaAIWriterProps {
+  /** Initial Slate content */
+  value?: SlateNode[]
+  /** Change callback */
+  onChange?: (value: SlateNode[]) => void
+  /** API endpoint for AI completions (POST) */
+  aiEndpoint: string
+  /**
+   * System prompt sent to the AI API alongside the user prompt.
+   * Allows per-tenant/per-app customization of the AI behavior.
+   */
+  systemPrompt?: string
+  /** AI actions available in the slash menu and AI menu */
+  aiActions?: AIAction[]
+  /** Enable ghost text copilot (inline AI suggestions) */
+  enableCopilot?: boolean
+  /** Debounce delay for copilot suggestions in ms (default: 500) */
+  copilotDebounceMs?: number
+  /** Headers to send with AI requests (e.g. Authorization) */
+  aiHeaders?: Record<string, string>
+  /** Read-only mode */
+  readOnly?: boolean
+  /** Placeholder text */
+  placeholder?: string
+  /** CSS class */
+  className?: string
+  /** Editor area CSS class */
+  editorClassName?: string
+  /** Minimum height in px */
+  minHeight?: number
+  /** Label */
+  label?: string
+  /** Description */
+  description?: string
+  /** Error */
+  error?: string
+  /** Extra Plate plugins */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extraPlugins?: any[]
+  /** Ref to the Plate editor instance */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editorRef?: React.MutableRefObject<any>
+}
+
+// ─── Plate types (loaded dynamically) ────────────────────────────────────────
+
+interface PlateBundle {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Plate: React.ComponentType<any>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  PlateContent: React.ComponentType<any>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  usePlateEditor: (config: any) => any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  plugins: any[]
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * WakaAIWriter — AI-powered rich text editor.
+ *
+ * Wraps Plate.js with `@platejs/ai` for:
+ * - Copilot ghost text (inline suggestions while typing)
+ * - AI menu (Cmd+J or `/ai`) with customizable actions
+ * - Configurable system prompt per tenant / app
+ *
+ * Requires peer dependencies: `platejs`, `@platejs/ai`, `@platejs/markdown`,
+ * `@platejs/basic-nodes`, `@platejs/selection`.
+ *
+ * @example
+ * ```tsx
+ * <WakaAIWriter
+ *   aiEndpoint="/api/ai/completion"
+ *   systemPrompt="You are a helpful writing assistant for healthcare documentation."
+ *   enableCopilot
+ * />
+ * ```
+ */
+export const WakaAIWriter = React.forwardRef<HTMLDivElement, WakaAIWriterProps>(
+  (
+    {
+      value,
+      onChange,
+      aiEndpoint,
+      systemPrompt = "You are an advanced AI writing assistant. Help the user write, edit, and improve their content.",
+      aiActions = DEFAULT_AI_ACTIONS,
+      enableCopilot = true,
+      copilotDebounceMs = 500,
+      aiHeaders,
+      readOnly = false,
+      placeholder = "Tapez / pour les commandes, ou commencez a ecrire...",
+      className,
+      editorClassName,
+      minHeight = 300,
+      label,
+      description,
+      error,
+      extraPlugins,
+      editorRef,
+    },
+    ref
+  ) => {
+    const [bundle, setBundle] = React.useState<PlateBundle | null>(null)
+    const [loadError, setLoadError] = React.useState(false)
+
+    // Stable refs for config values used in plugin setup
+    const configRef = React.useRef({ aiEndpoint, systemPrompt, aiActions, enableCopilot, copilotDebounceMs, aiHeaders })
+    configRef.current = { aiEndpoint, systemPrompt, aiActions, enableCopilot, copilotDebounceMs, aiHeaders }
+
+    React.useEffect(() => {
+      let cancelled = false
+
+      const load = async () => {
+        try {
+          const [
+            plateReact,
+            basicNodes,
+            table,
+            layout,
+            callout,
+            aiModule,
+            markdownModule,
+            selectionModule,
+            linkModule,
+            indentModule,
+          ] = await Promise.all([
+            import("platejs/react"),
+            import("@platejs/basic-nodes/react"),
+            import("@platejs/table/react"),
+            import("@platejs/layout/react"),
+            import("@platejs/callout/react"),
+            import("@platejs/ai/react"),
+            import("@platejs/markdown"),
+            import("@platejs/selection/react"),
+            import("@platejs/link/react"),
+            import("@platejs/indent/react"),
+          ])
+
+          const cfg = configRef.current
+
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const plugins: any[] = [
+            // Core marks
+            basicNodes.BoldPlugin,
+            basicNodes.ItalicPlugin,
+            basicNodes.UnderlinePlugin,
+            basicNodes.StrikethroughPlugin,
+            basicNodes.CodePlugin,
+            basicNodes.HighlightPlugin,
+            // Headings
+            basicNodes.H1Plugin,
+            basicNodes.H2Plugin,
+            basicNodes.H3Plugin,
+            basicNodes.H4Plugin,
+            basicNodes.BlockquotePlugin,
+            // Table
+            table.TablePlugin,
+            table.TableRowPlugin,
+            table.TableCellPlugin,
+            table.TableCellHeaderPlugin,
+            // Layout
+            layout.ColumnPlugin,
+            layout.ColumnItemPlugin,
+            // Callout
+            callout.CalloutPlugin,
+            // Link
+            linkModule.LinkPlugin.configure({
+              options: { allowedSchemes: ["http", "https", "mailto", "tel"] },
+            }),
+            // Indent
+            indentModule.IndentPlugin,
+            // Selection (required by AI)
+            selectionModule.BlockSelectionPlugin,
+            // Markdown (required by AI)
+            markdownModule.MarkdownPlugin,
+            // AI plugins
+            aiModule.AIPlugin,
+            aiModule.AIChatPlugin.configure({
+              options: {
+                chat: {
+                  api: cfg.aiEndpoint,
+                  body: {
+                    system: cfg.systemPrompt,
+                  },
+                  headers: cfg.aiHeaders,
+                },
+              },
+            }),
+          ]
+
+          // Copilot plugin
+          if (cfg.enableCopilot && aiModule.CopilotPlugin) {
+            plugins.push(
+              aiModule.CopilotPlugin.configure(({ api }: { api: { copilot: { setBlockSuggestion: (o: { text: string }) => void } } }) => ({
+                options: {
+                  completeOptions: {
+                    api: cfg.aiEndpoint,
+                    body: {
+                      system: cfg.systemPrompt,
+                    },
+                    headers: cfg.aiHeaders,
+                    onFinish: (_: unknown, completion: string) => {
+                      if (completion === "0") return
+                      api.copilot.setBlockSuggestion({ text: completion })
+                    },
+                  },
+                  debounceDelay: cfg.copilotDebounceMs,
+                },
+                shortcuts: {
+                  accept: { keys: "tab" },
+                  acceptNextWord: { keys: "mod+right" },
+                  reject: { keys: "escape" },
+                  triggerSuggestion: { keys: "ctrl+space" },
+                },
+              }))
+            )
+          }
+
+          if (!cancelled) {
+            setBundle({
+              Plate: plateReact.Plate,
+              PlateContent: plateReact.PlateContent,
+              usePlateEditor: plateReact.usePlateEditor,
+              plugins,
+            })
+          }
+        } catch (err) {
+          console.error("[WakaAIWriter] Failed to load plugins:", err)
+          if (!cancelled) setLoadError(true)
+        }
+      }
+
+      load()
+      return () => { cancelled = true }
+    }, []) // Load once; config changes read from ref
+
+    if (bundle) {
+      return (
+        <AIWriterInner
+          ref={ref}
+          bundle={bundle}
+          value={value}
+          onChange={onChange}
+          readOnly={readOnly}
+          placeholder={placeholder}
+          className={className}
+          editorClassName={editorClassName}
+          minHeight={minHeight}
+          label={label}
+          description={description}
+          error={error}
+          extraPlugins={extraPlugins}
+          editorRef={editorRef}
+        />
+      )
+    }
+
+    // Fallback
+    return (
+      <div ref={ref} className={cn("space-y-1.5", className)}>
+        {label && <Label>{label}</Label>}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+        <div className="relative">
+          <Textarea
+            placeholder={placeholder}
+            disabled
+            style={{ minHeight }}
+            className={cn(error && "border-destructive")}
+          />
+          <div className="absolute inset-0 flex items-center justify-center bg-background/50 rounded-lg">
+            <span className="text-sm text-muted-foreground animate-pulse">
+              {loadError ? "Erreur de chargement de l'editeur IA" : "Chargement de l'editeur IA..."}
+            </span>
+          </div>
+        </div>
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+WakaAIWriter.displayName = "WakaAIWriter"
+
+// ─── Inner Plate component ──────────────────────────────────────────────────
+
+interface AIWriterInnerProps {
+  bundle: PlateBundle
+  value?: SlateNode[]
+  onChange?: (value: SlateNode[]) => void
+  readOnly?: boolean
+  placeholder?: string
+  className?: string
+  editorClassName?: string
+  minHeight?: number
+  label?: string
+  description?: string
+  error?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extraPlugins?: any[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editorRef?: React.MutableRefObject<any>
+}
+
+const AIWriterInner = React.forwardRef<HTMLDivElement, AIWriterInnerProps>(
+  (
+    {
+      bundle: { Plate, PlateContent, usePlateEditor, plugins },
+      value,
+      onChange,
+      readOnly,
+      placeholder,
+      className,
+      editorClassName,
+      minHeight,
+      label,
+      description,
+      error,
+      extraPlugins,
+      editorRef,
+    },
+    ref
+  ) => {
+    const allPlugins = React.useMemo(
+      () => [...plugins, ...(extraPlugins ?? [])],
+      [plugins, extraPlugins]
+    )
+
+    const editor = usePlateEditor({
+      plugins: allPlugins,
+      value: value ?? [{ type: "p", children: [{ text: "" }] }],
+    })
+
+    React.useEffect(() => {
+      if (editorRef) editorRef.current = editor
+    }, [editor, editorRef])
+
+    return (
+      <div ref={ref} className={cn("space-y-1.5", className)}>
+        {label && <Label>{label}</Label>}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+
+        <Plate
+          editor={editor}
+          onChange={onChange ? ({ value: v }: { value: SlateNode[] }) => onChange(v) : undefined}
+          readOnly={readOnly}
+        >
+          <div className={cn(
+            "border rounded-lg overflow-hidden",
+            error && "border-destructive",
+            readOnly && "opacity-80",
+          )}>
+            {/* AI toolbar hint */}
+            {!readOnly && (
+              <div className="flex items-center gap-2 px-3 py-1.5 border-b bg-muted/30 text-xs text-muted-foreground">
+                <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-[10px]">Ctrl+J</kbd>
+                <span>Ouvrir le menu IA</span>
+                <span className="mx-1">|</span>
+                <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-[10px]">/</kbd>
+                <span>Commandes</span>
+                <span className="mx-1">|</span>
+                <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-[10px]">Ctrl+Espace</kbd>
+                <span>Copilot</span>
+              </div>
+            )}
+
+            <div style={{ minHeight }}>
+              <PlateContent
+                placeholder={placeholder}
+                readOnly={readOnly}
+                className={cn(
+                  "prose prose-sm max-w-none p-4",
+                  "focus-within:outline-none",
+                  "[&_[data-slate-editor]]:outline-none [&_[data-slate-editor]]:min-h-[inherit]",
+                  editorClassName
+                )}
+              />
+            </div>
+          </div>
+        </Plate>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+AIWriterInner.displayName = "AIWriterInner"