strapi-plugin-mcp-chat 0.3.1 → 0.6.0

package/README.md

@@ -294,11 +294,16 @@ The plugin follows the documented Strapi 5 plugin APIs:
   (`register` / `bootstrap` / `destroy` / `config` / `controllers` / `services` / `routes`).
   Routes are declared with `type: 'admin'`, so the chat/STT/TTS endpoints require an
   authenticated admin session.
-- **MCP** — tools are registered with `strapi.ai.mcp.registerTool` during `register()`
-  (the documented extension point), using `z` from `@strapi/utils` for the schemas and
-  `auth.policies` (content-manager read/update/publish) for RBAC. They're organized in a
-  modular `server/src/mcp/` (one file per tool in `tools/`, aggregated and looped) following
-  the structure from [Paul Bratslavsky's MCP tool-extension example](https://github.com/PaulBratslavsky/strapi-mcp-demo-and-tool-extension).
+- **MCP** — tools are **defined** as pure objects with a local typed `defineTool` helper
+  (`server/src/mcp/define.ts`) and **registered from an array** via
+  `strapi.ai.mcp.registerTool` during `register()`, using `z` from `@strapi/utils` for the
+  schemas and `auth.policies` (content-manager read/update/publish) for RBAC. The
+  `defineTool`/`defineResource`/`definePrompt` identity functions infer each handler's
+  `args` from its input schema (no `any`) and keep the definitions side-effect-free —
+  mirroring the direction of Strapi's [PR #26603](https://github.com/strapi/strapi/pull/26603)
+  (`ai.mcp.defineTool` + the `import { ai } from "@strapi/strapi"` namespace). When that API
+  ships stable, migrating is a one-line import swap; until then the plugin stays on the
+  released `registerTool` so it runs on any Strapi ≥ 5.47 (no experimental build required).
 - **Admin** — `register()` uses only documented APIs (`app.addMenuLink`, `app.registerPlugin`).
 
 One intentional deviation: the **global floating chat** is mounted via its own React root
@@ -316,6 +321,27 @@ single spot.
   token's permissions — scope the token to only what those clients should change.
 - The agent can edit and publish content — give the plugin only to trusted editors.
 
+## Reliability — never degrades or breaks the host Strapi
+
+This plugin is built to be a good citizen: installing it must never slow down or take
+down the host app. Concrete guarantees:
+
+- **Can't crash boot.** `register()` degrades gracefully if the native MCP server / i18n /
+  OpenAI key are absent (logs a warning, disables the feature). MCP tools register inside a
+  per-tool `try/catch`, so a single bad tool can never abort the others or the boot.
+  `destroy()` is best-effort.
+- **Can't blank the admin.** The global overlay (floating chat + preview) mounts inside a
+  React **error boundary** in its own root, after an SSR/double-mount guard; any render
+  error just hides the overlay, leaving the Strapi admin fully intact. Lingering preview
+  layout styles are reset on load, and screen/mic capture is stopped on unmount.
+- **Provisioning is fail-safe.** Generated schemas are **validated before any file is
+  written** (kind/attributes/known types/relation targets) and writes are **all-or-nothing**
+  — a malformed manifest can never leave Strapi with a broken, unbootable schema. Generation
+  stays additive (never touches existing types), dev-only, with hardened zip-slip protection.
+- **Won't become a bottleneck.** Every outbound call (OpenAI, MCP) has a **timeout** so a
+  slow upstream can't hold a request open; recursive content search has depth caps and a
+  result cap; tool outputs are size-capped before going back to the model.
+
 ## License
 
 [MIT](./LICENSE) © Raul Balestra

package/admin/src/components/AdminOverlays.tsx

@@ -197,26 +197,16 @@ export const AdminOverlays = () => {
       <FloatingChat
         previewOn={previewOn}
         previewUrl={liveHref}
+        draft={draftPreview}
         onTogglePreview={() => setPreviewOn((v) => !v)}
-        onReply={async (didWrite) => {
+        onReply={(didWrite) => {
           if (!previewOn) return;
-          // Houve edição no Strapi: re-sincroniza o snapshot do frontend para o
-          // preview refletir (a fonte da verdade é o Strapi). Se não for snapshot
-          // ou não houver provisão, o integrate é no-op e só recarregamos.
-          if (didWrite) {
-            try {
-              setRunError(false);
-              setRunText('Sincronizando alterações…');
-              setRunLoading(true);
-              const { post } = getFetchClient();
-              await post('/mcp-chat/frontend/integrate', {});
-            } catch {
-              /* sem integração: segue só com reload */
-            } finally {
-              setRunLoading(false);
-            }
-          }
-          reload();
+          // Modelo LIVE-FETCH: a Strapi é a fonte da verdade e o front SEMPRE
+          // busca dela. A edição do chat já foi gravada na Strapi (no campo
+          // exato, via editar_campo) — aqui só recarregamos o preview para o
+          // front re-buscar (em draft quando o toggle de rascunho está ligado).
+          // NÃO reescrevemos arquivos do frontend (nada de snapshot/integrate).
+          if (didWrite) reload();
         }}
       />
     </>

package/admin/src/components/ErrorBoundary.tsx

@@ -0,0 +1,29 @@
+/**
+ * Error boundary que ISOLA as sobreposições do plugin (chat + preview) do resto
+ * do admin do Strapi. Se algo dentro renderizar com erro, capturamos aqui e
+ * renderizamos `null` — o overlay some, mas o admin do Strapi continua intacto.
+ * Sem isto, um erro de render num root React próprio poderia quebrar a página.
+ */
+import { Component, type ReactNode } from 'react';
+
+type Props = { children: ReactNode };
+type State = { failed: boolean };
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { failed: false };
+
+  static getDerivedStateFromError(): State {
+    return { failed: true };
+  }
+
+  componentDidCatch(error: unknown) {
+    // Apenas loga; nunca propaga para o admin.
+    // eslint-disable-next-line no-console
+    console.error('[mcp-chat] overlay desativado após erro de render:', error);
+  }
+
+  render() {
+    if (this.state.failed) return null;
+    return this.props.children;
+  }
+}

package/admin/src/components/FloatingChat.tsx

@@ -13,6 +13,8 @@ type Pos = { x: number; y: number };
 type Props = {
   previewOn: boolean;
   previewUrl: string;
+  /** modo do preview: true = rascunho (draft), false = publicado (live). */
+  draft?: boolean;
   onTogglePreview: () => void;
   /** chamado após uma resposta; didWrite indica que houve edição no Strapi. */
   onReply: (didWrite: boolean) => void;
@@ -28,6 +30,7 @@ const STR: Record<Lang, Record<string, string>> = {
     rec: '🎤 Enviar áudio', recStop: '⏹ Parar áudio', recTitle: 'Gravar áudio e enviar (transcreve e manda)',
     previewOn: '🖼 Preview: ON', previewOff: '🖼 Preview: OFF', previewTitle: 'Abrir/fechar o preview do site ao lado da Strapi',
     voiceOn: '🔊 Voz: ON', voiceOff: '🔈 Voz: OFF', voiceTitle: 'Ler as respostas em voz alta (TTS)',
+    stopVoice: '⏹ Parar voz', stopVoiceTitle: 'Parar a voz que está tocando',
     pubOn: '🚀 Publicar: ON', pubOff: '📝 Rascunho', pubTitle: 'Auto-publicar OFF = a IA só salva rascunho (você revisa e publica). ON = publica direto no site.',
     shareOn: '🛑 Parar tela', shareOff: '🖥 Compart. tela', shareTitle: 'Compartilhar a tela com a IA',
     langTitle: 'Idioma do chat e da voz (PT-BR ↔ English)',
@@ -45,6 +48,7 @@ const STR: Record<Lang, Record<string, string>> = {
     rec: '🎤 Send audio', recStop: '⏹ Stop audio', recTitle: 'Record audio and send (transcribes and sends)',
     previewOn: '🖼 Preview: ON', previewOff: '🖼 Preview: OFF', previewTitle: 'Toggle the site preview next to Strapi',
     voiceOn: '🔊 Voice: ON', voiceOff: '🔈 Voice: OFF', voiceTitle: 'Read replies out loud (TTS)',
+    stopVoice: '⏹ Stop voice', stopVoiceTitle: 'Stop the voice currently playing',
     pubOn: '🚀 Publish: ON', pubOff: '📝 Draft', pubTitle: 'Auto-publish OFF = the AI only saves a draft (you review and publish). ON = publishes straight to the site.',
     shareOn: '🛑 Stop screen', shareOff: '🖥 Share screen', shareTitle: 'Share your screen with the AI',
     langTitle: 'Chat and voice language (PT-BR ↔ English)',
@@ -59,7 +63,7 @@ const STR: Record<Lang, Record<string, string>> = {
   },
 };
 
-export const FloatingChat = ({ previewOn, previewUrl, onTogglePreview, onReply }: Props) => {
+export const FloatingChat = ({ previewOn, previewUrl, draft = false, onTogglePreview, onReply }: Props) => {
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState<Pos | null>(null); // null = ancorado à direita
   const [messages, setMessages] = useState<Msg[]>([]);
@@ -67,6 +71,7 @@ export const FloatingChat = ({ previewOn, previewUrl, onTogglePreview, onReply }
   const [loading, setLoading] = useState(false);
   const [sharing, setSharing] = useState(false);
   const [voiceOn, setVoiceOn] = useState(false);
+  const [speaking, setSpeaking] = useState(false);
   const [recording, setRecording] = useState(false);
   const [autoPublish, setAutoPublish] = useState<boolean>(() => {
     try { return localStorage.getItem('mcp-chat-autopublish') === '1'; } catch { return false; }
@@ -87,6 +92,7 @@ export const FloatingChat = ({ previewOn, previewUrl, onTogglePreview, onReply }
   const chunksRef = useRef<Blob[]>([]);
   const bodyRef = useRef<HTMLDivElement | null>(null);
   const dragRef = useRef<{ dx: number; dy: number } | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
 
   // ── Drag ────────────────────────────────────────────────────────────────
   const onHeaderDown = (e: React.MouseEvent) => {
@@ -113,6 +119,46 @@ export const FloatingChat = ({ previewOn, previewUrl, onTogglePreview, onReply }
     if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
   }, [messages, loading]);
 
+  // ── Cleanup ao desmontar: encerra captura de tela / microfone (sem vazar) ──
+  useEffect(() => {
+    return () => {
+      try { streamRef.current?.getTracks().forEach((t) => t.stop()); } catch { /* noop */ }
+      try { recorderRef.current?.stop(); } catch { /* noop */ }
+    };
+  }, []);
+
+  // ── Logout: limpa a conversa e esconde o chat ──────────────────────────────
+  // O overlay vive num React root próprio (fora da árvore do admin), então não dá
+  // pra usar useAuth. Detectamos a sessão pela ROTA: a tela de login/logout do
+  // Strapi é /admin/auth/... Ao cair nela (logout), zeramos a conversa, encerramos
+  // áudio/gravação/compartilhamento e escondemos o FAB — o chat só existe logado.
+  const [loggedOut, setLoggedOut] = useState(() => /\/auth(\/|$)/.test(window.location.pathname));
+  useEffect(() => {
+    const check = () => {
+      const out = /\/auth(\/|$)/.test(window.location.pathname);
+      setLoggedOut((prev) => {
+        if (out && !prev) {
+          // acabou de deslogar → limpa tudo que é da sessão.
+          setMessages([]);
+          setInput('');
+          setError(null);
+          setOpen(false);
+          stopTTS();
+          try { streamRef.current?.getTracks().forEach((t) => t.stop()); } catch { /* noop */ }
+          try { recorderRef.current?.stop(); } catch { /* noop */ }
+          setSharing(false);
+          setRecording(false);
+        }
+        return out;
+      });
+    };
+    check();
+    const id = window.setInterval(check, 1000);
+    window.addEventListener('popstate', check);
+    return () => { window.clearInterval(id); window.removeEventListener('popstate', check); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // ── Screenshare ───────────────────────────────────────────────────────────
   const startShare = async () => {
     setError(null);
@@ -151,15 +197,34 @@ export const FloatingChat = ({ previewOn, previewUrl, onTogglePreview, onReply }
   };
 
   // ── TTS ────────────────────────────────────────────────────────────────────
+  // Para qualquer áudio em reprodução (botão ⏹ ou ao iniciar uma nova fala).
+  const stopTTS = () => {
+    const a = audioRef.current;
+    if (a) {
+      try { a.pause(); a.currentTime = 0; } catch { /* noop */ }
+      audioRef.current = null;
+    }
+    setSpeaking(false);
+  };
+
   const playTTS = async (text: string) => {
     try {
+      stopTTS(); // não sobrepõe falas
       const { post } = getFetchClient();
       const { data } = await post('/mcp-chat/tts', { text });
       const audio = new Audio(`data:${data.content_type};base64,${data.audio_base64}`);
-      await audio.play().catch(() => undefined);
-    } catch { /* voz é opcional */ }
+      audioRef.current = audio;
+      const done = () => { if (audioRef.current === audio) audioRef.current = null; setSpeaking(false); };
+      audio.addEventListener('ended', done);
+      audio.addEventListener('error', done);
+      setSpeaking(true);
+      await audio.play().catch(() => done());
+    } catch { setSpeaking(false); /* voz é opcional */ }
   };
 
+  // para a voz se o componente desmontar.
+  useEffect(() => () => stopTTS(), []);
+
   // ── Enviar ──────────────────────────────────────────────────────────────────
   const sendMessage = async (text: string) => {
     if (!text || loading) return;
@@ -177,6 +242,8 @@ export const FloatingChat = ({ previewOn, previewUrl, onTogglePreview, onReply }
         // Página que o usuário está olhando no preview (se aberto). Dá à IA o
         // contexto do "isso aqui" sem precisar varrer o site inteiro.
         previewUrl: previewOn ? previewUrl : null,
+        // A busca de texto segue o modo do preview: draft -> rascunhos, live -> publicado.
+        previewStatus: draft ? 'draft' : 'published',
         // Draft-first: por padrão a IA só salva rascunho; só publica com isto ON.
         autoPublish,
       });
@@ -254,6 +321,9 @@ export const FloatingChat = ({ previewOn, previewUrl, onTogglePreview, onReply }
     fontSize: 12, cursor: 'pointer', whiteSpace: 'nowrap',
   });
 
+  // deslogado: o chat não existe (já foi limpo no efeito acima).
+  if (loggedOut) return null;
+
   if (!open) {
     return (
       <button
@@ -329,6 +399,11 @@ export const FloatingChat = ({ previewOn, previewUrl, onTogglePreview, onReply }
           title={t.voiceTitle}>
           {voiceOn ? t.voiceOn : t.voiceOff}
         </button>
+        {speaking && (
+          <button style={btn(true)} onClick={stopTTS} title={t.stopVoiceTitle}>
+            {t.stopVoice}
+          </button>
+        )}
         <button style={btn(autoPublish)} onClick={() => setAutoPublish((v) => !v)}
           title={t.pubTitle}>
           {autoPublish ? t.pubOn : t.pubOff}

package/admin/src/index.tsx

@@ -1,6 +1,25 @@
 import { createRoot } from 'react-dom/client';
 import { PLUGIN_ID } from './pluginId';
 import { AdminOverlays } from './components/AdminOverlays';
+import { ErrorBoundary } from './components/ErrorBoundary';
+
+// Flag de módulo: trava extra contra duplo-mount (além do guard por id no DOM).
+let mounted = false;
+
+/** Limpa estilos inline que o PreviewPanel possa ter deixado no #strapi caso uma
+ *  sessão anterior tenha sido encerrada de forma abrupta — garante que o admin
+ *  nunca apareça encolhido/quebrado ao carregar. */
+const resetStrapiRootStyles = () => {
+  try {
+    const root = document.getElementById('strapi') as HTMLElement | null;
+    if (!root) return;
+    for (const p of ['width', 'maxWidth', 'transform', 'overflow'] as const) {
+      root.style[p] = '';
+    }
+  } catch {
+    /* noop */
+  }
+};
 
 const PluginIcon = () => (
   <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -39,11 +58,26 @@ export default {
     // tocar na árvore do admin). É o único desvio das APIs documentadas e está
     // contido a este único ponto. `register()` acima usa só APIs oficiais
     // (addMenuLink + registerPlugin).
+    // Guarda de ambiente: só roda no browser (nunca em SSR/headless sem DOM).
+    if (typeof document === 'undefined' || typeof window === 'undefined') return;
     const ID = 'mcp-chat-fab-root';
-    if (document.getElementById(ID)) return;
-    const el = document.createElement('div');
-    el.id = ID;
-    document.body.appendChild(el);
-    createRoot(el).render(<AdminOverlays />);
+    if (mounted || document.getElementById(ID)) return;
+    mounted = true;
+    try {
+      resetStrapiRootStyles();
+      const el = document.createElement('div');
+      el.id = ID;
+      document.body.appendChild(el);
+      // ErrorBoundary garante que um erro de render do overlay nunca derrube o admin.
+      createRoot(el).render(
+        <ErrorBoundary>
+          <AdminOverlays />
+        </ErrorBoundary>
+      );
+    } catch (e) {
+      // Em último caso, falhar em montar o overlay não pode quebrar o admin.
+      // eslint-disable-next-line no-console
+      console.error('[mcp-chat] falha ao montar overlays (admin segue normal):', e);
+    }
   },
 };