strapi-plugin-mcp-chat 0.1.0 → 0.3.1

package/admin/src/i18n.ts

@@ -0,0 +1,214 @@
+/**
+ * i18n leve para as PÁGINAS DO PLUGIN no menu esquerdo (Home + Provisionar).
+ *
+ * Não usa o sistema de traduções do admin de propósito: estas páginas são
+ * autossuficientes e o idioma é escolhido por um seletor próprio, persistido em
+ * `localStorage` sob a MESMA chave do chat flutuante (`mcp-chat-lang`), para que
+ * o plugin inteiro siga um único idioma. Default: inglês.
+ */
+import { useEffect, useState } from 'react';
+
+export type Lang = 'pt' | 'en';
+
+const LS_KEY = 'mcp-chat-lang';
+
+export const getLang = (): Lang => {
+  try {
+    return (localStorage.getItem(LS_KEY) as Lang) === 'pt' ? 'pt' : 'en';
+  } catch {
+    return 'en';
+  }
+};
+
+/** Hook: idioma atual + setter persistido + sincronização entre abas/componentes. */
+export const useLang = (): [Lang, (l: Lang) => void] => {
+  const [lang, setLangState] = useState<Lang>(getLang);
+
+  useEffect(() => {
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === LS_KEY) setLangState(getLang());
+    };
+    // evento custom para sincronizar componentes na MESMA aba
+    const onLocal = () => setLangState(getLang());
+    window.addEventListener('storage', onStorage);
+    window.addEventListener('mcp-chat-lang-change', onLocal);
+    return () => {
+      window.removeEventListener('storage', onStorage);
+      window.removeEventListener('mcp-chat-lang-change', onLocal);
+    };
+  }, []);
+
+  const setLang = (l: Lang) => {
+    try { localStorage.setItem(LS_KEY, l); } catch { /* noop */ }
+    setLangState(l);
+    try { window.dispatchEvent(new Event('mcp-chat-lang-change')); } catch { /* noop */ }
+  };
+
+  return [lang, setLang];
+};
+
+type Dict = Record<string, string>;
+
+export const STRINGS: Record<Lang, Dict> = {
+  en: {
+    // Home
+    'home.title': 'MCP Chat',
+    'home.subtitle': 'AI via MCP',
+    'home.seeingScreen': '• seeing your screen',
+    'home.voiceOn': '• voice ON',
+    'home.voiceBtnOn': 'Voice: ON',
+    'home.voiceBtnOff': 'Voice: OFF',
+    'home.pubOn': '🚀 Publish: ON',
+    'home.pubOff': '📝 Draft mode',
+    'home.pubTitle': 'Auto-publish OFF = the AI only saves a draft (you review and publish). ON = publishes straight to the site.',
+    'home.shareStop': 'Stop screen',
+    'home.shareStart': 'Share screen',
+    'home.provision': 'Provision frontend',
+    'home.previewOn': 'Live Preview: ON',
+    'home.previewOff': 'Live Preview: OFF',
+    'home.empty': 'Type, speak (🎤) or share your screen. E.g.: “Which content-types exist?”.',
+    'home.you': 'You',
+    'home.ai': 'AI',
+    'home.processing': 'Processing…',
+    'home.rec': '🎤 Speak',
+    'home.recStop': '⏹ Stop',
+    'home.placeholder': 'Type… (Cmd/Ctrl+Enter sends)',
+    'home.send': 'Send',
+    'home.reload': 'Reload',
+    'home.previewUrlLabel': 'Preview URL',
+    'home.errShare': 'Could not start screen sharing.',
+    'home.errMic': 'Could not access the microphone.',
+    'home.errStt': 'Transcription error.',
+    'home.errAudioEmpty': 'I could not understand the audio.',
+    'home.errChat': 'Error talking to the AI.',
+    'home.noReply': '(no reply)',
+    'home.tour': '❓ Tour',
+    'common.lang': '🌐 English',
+
+    // Provision
+    'prov.title': 'Provision frontend',
+    'prov.subtitle': 'Upload your frontend .zip (Figma/Lovable, Next or TanStack) — the AI infers the content model, you review it, and the plugin creates everything in Strapi.',
+    'prov.back': '← Back to chat',
+    'prov.supported': 'Supported stacks',
+    'prov.step1': '1. Choose the frontend .zip',
+    'prov.step1desc': 'No strapi.manifest.json needed: if it is missing, the AI creates one by analyzing the code (e.g. src/data/*.ts).',
+    'prov.selectFile': 'Select file…',
+    'prov.noFile': 'No file selected',
+    'prov.analyze': 'Analyze project',
+    'prov.analyzing': 'Analyzing…',
+    'prov.analyzingDesc': 'Reading the code and inferring the content model (content-types + seed)…',
+    'prov.step2': '2. Review the content model',
+    'prov.inferred': '🤖 Inferred by the AI',
+    'prov.fromManifest': '✓ Project manifest',
+    'prov.framework': 'framework',
+    'prov.analyzed': 'Analyzed',
+    'prov.editJson': 'Edit the JSON to adjust names, types or seeded content before creating.',
+    'prov.provision': 'Provision',
+    'prov.restart': 'Restart',
+    'prov.provisioning': 'Provisioning…',
+    'prov.provisioningTitle': 'Setting everything up — this takes a few seconds',
+    'prov.provisioningDesc': 'Strapi is restarting to recognize the content-types, then it seeds content, opens public read access and wires the preview. Do not close this page.',
+    'prov.invalidJson': 'The manifest is not valid JSON. Fix the syntax.',
+    'prov.analyzeFail': 'Failed to analyze the project.',
+    'prov.provisionFail': 'Provisioning failed.',
+    'prov.analyzeWarn': 'Analysis warning:',
+    'prov.doneTitle': '✅ All set! You can see the preview now.',
+    'prov.typesCreated': 'Content-types created:',
+    'prov.seeded': 'Seeded content:',
+    'prov.frontendAt': 'Frontend at:',
+    'prov.runFrontend': 'To see the preview, run the frontend (once):',
+    'prov.relinkDesc': 'Relink the frontend to Strapi (snapshot): swaps the hardcoded data for Strapi data, keeping the images. Components do not change.',
+    'prov.relink': 'Relink data to Strapi',
+    'prov.relinking': 'Relinking…',
+    'prov.open': 'Open',
+    'prov.provisionAnother': 'Provision another',
+    'prov.relinkOk': '✅ Relinked! Files updated: {files}. Reload the preview to see Strapi data. (Original saved as .bak.)',
+    'prov.relinkFail': '⚠️ Could not relink: {err}.',
+    'prov.relinkErr': 'Failed to relink.',
+    'prov.noData': 'no data file',
+  },
+  pt: {
+    // Home
+    'home.title': 'MCP Chat',
+    'home.subtitle': 'IA via MCP',
+    'home.seeingScreen': '• vendo sua tela',
+    'home.voiceOn': '• voz ON',
+    'home.voiceBtnOn': 'Voz: ON',
+    'home.voiceBtnOff': 'Voz: OFF',
+    'home.pubOn': '🚀 Publicar: ON',
+    'home.pubOff': '📝 Rascunho',
+    'home.pubTitle': 'Auto-publicar OFF = a IA só salva rascunho (você revisa e publica). ON = publica direto no site.',
+    'home.shareStop': 'Parar tela',
+    'home.shareStart': 'Compartilhar tela',
+    'home.provision': 'Provisionar frontend',
+    'home.previewOn': 'Live Preview: ON',
+    'home.previewOff': 'Live Preview: OFF',
+    'home.empty': 'Escreva, fale (🎤) ou compartilhe a tela. Ex.: “Quais content-types existem?”.',
+    'home.you': 'Você',
+    'home.ai': 'IA',
+    'home.processing': 'Processando…',
+    'home.rec': '🎤 Falar',
+    'home.recStop': '⏹ Parar',
+    'home.placeholder': 'Escreva… (Cmd/Ctrl+Enter envia)',
+    'home.send': 'Enviar',
+    'home.reload': 'Recarregar',
+    'home.previewUrlLabel': 'URL do preview',
+    'home.errShare': 'Não foi possível iniciar o compartilhamento de tela.',
+    'home.errMic': 'Não foi possível acessar o microfone.',
+    'home.errStt': 'Erro na transcrição.',
+    'home.errAudioEmpty': 'Não consegui entender o áudio.',
+    'home.errChat': 'Erro ao falar com a IA.',
+    'home.noReply': '(sem resposta)',
+    'home.tour': '❓ Tour',
+    'common.lang': '🌐 PT-BR',
+
+    // Provision
+    'prov.title': 'Provisionar frontend',
+    'prov.subtitle': 'Suba o .zip do seu frontend (Figma/Lovable, Next ou TanStack) — a IA infere o modelo de conteúdo, você revisa, e o plugin cria tudo no Strapi.',
+    'prov.back': '← Voltar ao chat',
+    'prov.supported': 'Stacks suportados',
+    'prov.step1': '1. Escolha o .zip do frontend',
+    'prov.step1desc': 'Não precisa de strapi.manifest.json: se ele não existir, a IA cria um analisando os dados do código (ex.: src/data/*.ts).',
+    'prov.selectFile': 'Selecionar arquivo…',
+    'prov.noFile': 'Nenhum arquivo selecionado',
+    'prov.analyze': 'Analisar projeto',
+    'prov.analyzing': 'Analisando…',
+    'prov.analyzingDesc': 'Lendo o código e inferindo o modelo de conteúdo (content-types + seed)…',
+    'prov.step2': '2. Revise o modelo de conteúdo',
+    'prov.inferred': '🤖 Inferido pela IA',
+    'prov.fromManifest': '✓ Manifest do projeto',
+    'prov.framework': 'framework',
+    'prov.analyzed': 'Analisou',
+    'prov.editJson': 'Edite o JSON se quiser ajustar nomes, tipos ou o conteúdo semeado antes de criar.',
+    'prov.provision': 'Provisionar',
+    'prov.restart': 'Recomeçar',
+    'prov.provisioning': 'Provisionando…',
+    'prov.provisioningTitle': 'Configurando tudo — isso leva alguns segundos',
+    'prov.provisioningDesc': 'A Strapi está reiniciando para reconhecer as content-types, depois semeia o conteúdo, libera leitura pública e liga o preview. Não feche esta página.',
+    'prov.invalidJson': 'O manifest não é um JSON válido. Corrija a sintaxe.',
+    'prov.analyzeFail': 'Falha ao analisar o projeto.',
+    'prov.provisionFail': 'Falha na provisão.',
+    'prov.analyzeWarn': 'Aviso da análise:',
+    'prov.doneTitle': '✅ Tudo pronto! Você já pode ver o preview.',
+    'prov.typesCreated': 'Content-types criadas:',
+    'prov.seeded': 'Conteúdo semeado:',
+    'prov.frontendAt': 'Frontend em:',
+    'prov.runFrontend': 'Para ver o preview, rode o frontend (uma vez):',
+    'prov.relinkDesc': 'Religar o frontend ao Strapi (snapshot): troca os dados hardcoded pelos do Strapi, mantendo as imagens. Os componentes não mudam.',
+    'prov.relink': 'Religar dados ao Strapi',
+    'prov.relinking': 'Religando…',
+    'prov.open': 'Abrir',
+    'prov.provisionAnother': 'Provisionar outro',
+    'prov.relinkOk': '✅ Religado! Arquivos atualizados: {files}. Recarregue o preview para ver os dados do Strapi. (Original salvo como .bak.)',
+    'prov.relinkFail': '⚠️ Não consegui religar: {err}.',
+    'prov.relinkErr': 'Falha ao religar.',
+    'prov.noData': 'sem arquivo de dados',
+  },
+};
+
+/** Tradutor com interpolação simples de {chaves}. */
+export const makeT = (lang: Lang) => (key: string, vars?: Record<string, string>) => {
+  let s = STRINGS[lang][key] ?? STRINGS.en[key] ?? key;
+  if (vars) for (const k of Object.keys(vars)) s = s.replace(`{${k}}`, vars[k]);
+  return s;
+};

package/admin/src/pages/HomePage.tsx

@@ -1,7 +1,10 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Box, Flex, Typography, Button, Textarea, TextInput } from '@strapi/design-system';
 import { useFetchClient } from '@strapi/strapi/admin';
 import { Link } from 'react-router-dom';
+import { useLang, makeT } from '../i18n';
+import { LangSwitcher } from '../components/LangSwitcher';
+import { Onboarding, tourWasSeen } from '../components/Onboarding';
 
 type Msg = { role: 'user' | 'assistant'; content: string; image?: string | null };
 
@@ -16,6 +19,8 @@ const DEFAULT_PREVIEW_URL = (() => {
 
 const HomePage = () => {
   const { post } = useFetchClient();
+  const [lang] = useLang();
+  const t = makeT(lang);
 
   const [messages, setMessages] = useState<Msg[]>([]);
   const [input, setInput] = useState('');
@@ -23,6 +28,10 @@ const HomePage = () => {
   const [sharing, setSharing] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Onboarding (mini-curso): abre na 1ª vez; reabrível pelo botão Tour.
+  const [tourOpen, setTourOpen] = useState(false);
+  useEffect(() => { if (!tourWasSeen()) setTourOpen(true); }, []);
+
   // Live preview
   const [previewOn, setPreviewOn] = useState(false);
   const [previewUrl, setPreviewUrl] = useState(DEFAULT_PREVIEW_URL);
@@ -32,6 +41,14 @@ const HomePage = () => {
   const [voiceOn, setVoiceOn] = useState(false);
   const [recording, setRecording] = useState(false);
 
+  // Draft-first: a IA só salva rascunho por padrão; publica só com isto ON.
+  const [autoPublish, setAutoPublish] = useState<boolean>(() => {
+    try { return localStorage.getItem('mcp-chat-autopublish') === '1'; } catch { return false; }
+  });
+  useEffect(() => {
+    try { localStorage.setItem('mcp-chat-autopublish', autoPublish ? '1' : '0'); } catch { /* noop */ }
+  }, [autoPublish]);
+
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const recorderRef = useRef<MediaRecorder | null>(null);
@@ -50,7 +67,7 @@ const HomePage = () => {
       stream.getVideoTracks()[0].addEventListener('ended', stopShare);
       setSharing(true);
     } catch {
-      setError('Não foi possível iniciar o compartilhamento de tela.');
+      setError(t('home.errShare'));
     }
   };
   const stopShare = () => {
@@ -98,15 +115,18 @@ const HomePage = () => {
       const payload = {
         messages: next.map((m) => ({ role: m.role, content: m.content })),
         image,
+        lang,
+        previewUrl: previewOn ? previewUrl : null,
+        autoPublish,
       };
       const { data } = await post('/mcp-chat/message', payload);
-      const reply = data?.reply || '(sem resposta)';
+      const reply = data?.reply || t('home.noReply');
       setMessages((cur) => [...cur, { role: 'assistant', content: reply }]);
       if (previewOn) setIframeKey((k) => k + 1);
       if (voiceOn) playTTS(reply);
     } catch (e: any) {
       const detail =
-        e?.response?.data?.error?.message || e?.message || 'Erro ao falar com a IA.';
+        e?.response?.data?.error?.message || e?.message || t('home.errChat');
       setError(detail);
     } finally {
       setLoading(false);
@@ -144,7 +164,7 @@ const HomePage = () => {
       recorder.start();
       setRecording(true);
     } catch {
-      setError('Não foi possível acessar o microfone.');
+      setError(t('home.errMic'));
     }
   };
   const stopRecording = () => {
@@ -157,14 +177,15 @@ const HomePage = () => {
       const ext = blob.type.includes('mp4') ? 'mp4' : 'webm';
       const form = new FormData();
       form.append('audio', blob, `audio.${ext}`);
-      const { data } = await post('/mcp-chat/stt', form);
+      form.append('language', lang);
+      const { data } = await post(`/mcp-chat/stt?language=${lang}`, form);
       const text = (data?.text || '').trim();
       setLoading(false);
       if (text) sendMessage(text);
-      else setError('Não consegui entender o áudio.');
+      else setError(t('home.errAudioEmpty'));
     } catch (e: any) {
       setLoading(false);
-      setError(e?.response?.data?.error?.message || 'Erro na transcrição.');
+      setError(e?.response?.data?.error?.message || t('home.errStt'));
     }
   };
 
@@ -173,9 +194,9 @@ const HomePage = () => {
     <Flex direction="column" alignItems="stretch" gap={4} height="100%">
       <Flex justifyContent="space-between" alignItems="center">
         <Box>
-          <Typography variant="beta" tag="h1">MCP Chat</Typography>
+          <Typography variant="beta" tag="h1">{t('home.title')}</Typography>
           <Typography variant="pi" textColor="neutral600">
-            IA via MCP {sharing ? '• vendo sua tela' : ''} {voiceOn ? '• voz ON' : ''}
+            {t('home.subtitle')} {sharing ? t('home.seeingScreen') : ''} {voiceOn ? t('home.voiceOn') : ''}
           </Typography>
         </Box>
         <Flex gap={1}>
@@ -184,14 +205,22 @@ const HomePage = () => {
             variant={voiceOn ? 'success-light' : 'tertiary'}
             onClick={() => setVoiceOn((v) => !v)}
           >
-            {voiceOn ? 'Voz: ON' : 'Voz: OFF'}
+            {voiceOn ? t('home.voiceBtnOn') : t('home.voiceBtnOff')}
+          </Button>
+          <Button
+            size="S"
+            variant={autoPublish ? 'danger-light' : 'tertiary'}
+            onClick={() => setAutoPublish((v) => !v)}
+            title={t('home.pubTitle')}
+          >
+            {autoPublish ? t('home.pubOn') : t('home.pubOff')}
           </Button>
           <Button
             size="S"
             variant={sharing ? 'danger-light' : 'secondary'}
             onClick={sharing ? stopShare : startShare}
           >
-            {sharing ? 'Parar tela' : 'Compartilhar tela'}
+            {sharing ? t('home.shareStop') : t('home.shareStart')}
           </Button>
         </Flex>
       </Flex>
@@ -205,9 +234,7 @@ const HomePage = () => {
         style={{ overflowY: 'auto', minHeight: 240 }}
       >
         {messages.length === 0 && (
-          <Typography textColor="neutral500">
-            Escreva, fale (🎤) ou compartilhe a tela. Ex.: “Quais content-types existem?”.
-          </Typography>
+          <Typography textColor="neutral500">{t('home.empty')}</Typography>
         )}
         <Flex direction="column" alignItems="stretch" gap={3}>
           {messages.map((m, i) => (
@@ -218,7 +245,7 @@ const HomePage = () => {
               background={m.role === 'user' ? 'primary100' : 'neutral100'}
             >
               <Typography variant="sigma" textColor={m.role === 'user' ? 'primary600' : 'neutral600'}>
-                {m.role === 'user' ? 'Você' : 'IA'}
+                {m.role === 'user' ? t('home.you') : t('home.ai')}
               </Typography>
               <Box paddingTop={1}>
                 <Typography style={{ whiteSpace: 'pre-wrap' }}>{m.content}</Typography>
@@ -234,7 +261,7 @@ const HomePage = () => {
               )}
             </Box>
           ))}
-          {loading && <Typography textColor="neutral500">Processando…</Typography>}
+          {loading && <Typography textColor="neutral500">{t('home.processing')}</Typography>}
         </Flex>
       </Box>
 
@@ -249,12 +276,12 @@ const HomePage = () => {
           variant={recording ? 'danger-light' : 'tertiary'}
           onClick={recording ? stopRecording : startRecording}
         >
-          {recording ? '⏹ Parar' : '🎤 Falar'}
+          {recording ? t('home.recStop') : t('home.rec')}
         </Button>
         <Box grow={1}>
           <Textarea
             name="message"
-            placeholder="Escreva… (Cmd/Ctrl+Enter envia)"
+            placeholder={t('home.placeholder')}
             value={input}
             onChange={(e: any) => setInput(e.target.value)}
             onKeyDown={(e: any) => {
@@ -263,7 +290,7 @@ const HomePage = () => {
           />
         </Box>
         <Button onClick={send} loading={loading} disabled={!input.trim()}>
-          Enviar
+          {t('home.send')}
         </Button>
       </Flex>
     </Flex>
@@ -274,13 +301,13 @@ const HomePage = () => {
       <Flex gap={2} alignItems="center">
         <Box grow={1}>
           <TextInput
-            aria-label="URL do preview"
+            aria-label={t('home.previewUrlLabel')}
             value={previewUrl}
             onChange={(e: any) => setPreviewUrl(e.target.value)}
           />
         </Box>
         <Button size="S" variant="tertiary" onClick={() => setIframeKey((k) => k + 1)}>
-          Recarregar
+          {t('home.reload')}
         </Button>
       </Flex>
       <Box
@@ -304,15 +331,19 @@ const HomePage = () => {
     <Box padding={6} background="neutral100" style={{ minHeight: '100vh' }}>
       <video ref={videoRef} autoPlay muted style={{ display: 'none' }} />
 
+      <Onboarding lang={lang} open={tourOpen} onClose={() => setTourOpen(false)} />
+
       <Flex justifyContent="flex-end" gap={2} paddingBottom={4}>
+        <Button variant="tertiary" onClick={() => setTourOpen(true)}>{t('home.tour')}</Button>
+        <LangSwitcher />
         <Link to="provision">
-          <Button variant="secondary">Provisionar frontend</Button>
+          <Button variant="secondary">{t('home.provision')}</Button>
         </Link>
         <Button
           variant={previewOn ? 'success-light' : 'default'}
           onClick={() => setPreviewOn((v) => !v)}
         >
-          {previewOn ? 'Live Preview: ON' : 'Live Preview: OFF'}
+          {previewOn ? t('home.previewOn') : t('home.previewOff')}
         </Button>
       </Flex>