create-snapify-app 0.0.0-stage → 1.1.0

package/template/modules/ai-chat/src/public.tsx

@@ -0,0 +1,198 @@
+/**
+ * Snapify — module Chat IA
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { ChevronRight, RefreshCw, Send, X } from 'lucide-react';
+import { definePublicModule, matchesPaths, type ModuleApiError, type PublicModuleProps } from '@snapify/sdk';
+
+interface Settings {
+  title: string;
+  subtitle: string;
+  avatar: string;
+  welcome: string;
+  quickQuestions: string;
+  placeholder: string;
+  contactLabel: string;
+  contactPath: string;
+  position: 'bottom-left' | 'bottom-right';
+  showOnPages: string[];
+}
+
+interface Message {
+  id: number;
+  sender: 'ai' | 'user';
+  text: string;
+  time: string;
+}
+
+const now = () => new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+
+function Avatar({ src, className }: { src: string; className: string }) {
+  return src ? <img src={src} alt="" aria-hidden="true" className={`rounded-full object-cover ${className}`} /> : <span className={`rounded-full bg-px-primary ${className}`} />;
+}
+
+function ChatWidget({ settings, path, isPreview, navigate, api }: PublicModuleProps<Settings>) {
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([{ id: 0, sender: 'ai', text: settings.welcome, time: 'Maintenant' }]);
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) endRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, open]);
+
+  if (isPreview || !matchesPaths(settings.showOnPages, path)) return null;
+
+  const side = settings.position === 'bottom-right' ? 'right-5' : 'left-5';
+  const questions = settings.quickQuestions
+    .split('\n')
+    .map((q) => q.trim())
+    .filter(Boolean)
+    .slice(0, 6);
+
+  const send = async (text?: string) => {
+    const question = (text ?? input).trim();
+    if (!question || loading) return;
+    const history = messages.slice(1).slice(-8).map((m) => ({ role: m.sender === 'user' ? 'user' : 'model', parts: [{ text: m.text }] }));
+    setMessages((prev) => [...prev, { id: Date.now(), sender: 'user', text: question, time: now() }]);
+    setInput('');
+    setLoading(true);
+    let reply: string;
+    try {
+      reply = (await api.post<{ reply: string }>('/chat', { prompt: question, history })).reply;
+    } catch (e) {
+      const err = e as ModuleApiError;
+      reply = err.status && err.status < 500 ? err.message : 'L’assistant est momentanément indisponible. Contactez-nous directement, nous vous répondrons rapidement.';
+    }
+    setMessages((prev) => [...prev, { id: Date.now() + 1, sender: 'ai', text: reply, time: now() }]);
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <div className={`fixed bottom-20 lg:bottom-6 ${side} z-40 flex items-center gap-2`}>
+        <button
+          type="button"
+          onClick={() => setOpen(!open)}
+          aria-label={`Ouvrir ${settings.title}`}
+          className="relative flex h-14 items-center gap-2.5 rounded-full border border-white/10 bg-px-navy pl-1.5 pr-4 text-white shadow-2xl transition-all duration-200 hover:scale-105 hover:bg-slate-900 active:scale-95"
+        >
+          <span className="relative shrink-0">
+            <Avatar src={settings.avatar} className="block h-11 w-11 border-2 border-px-primary/70" />
+            <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-px-navy bg-px-primary-light" />
+          </span>
+          <span className="hidden pr-1 text-left sm:block">
+            <span className="block text-xs font-semibold leading-tight text-white">{settings.title}</span>
+            <span className="mt-0.5 block text-[10px] font-medium leading-none text-px-primary-light">{settings.subtitle}</span>
+          </span>
+        </button>
+      </div>
+
+      {open ? (
+        <div className={`fixed bottom-24 ${side} z-50 flex h-[600px] max-h-[80vh] w-[92vw] flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-2xl sm:w-[420px]`}>
+          <div className="flex items-center justify-between border-b border-slate-800 bg-px-navy p-4 text-white">
+            <div className="flex items-center gap-3">
+              <span className="relative shrink-0">
+                <Avatar src={settings.avatar} className="block h-10 w-10 border border-white/20" />
+                <span className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-px-navy bg-px-primary-light" />
+              </span>
+              <div>
+                <div className="text-sm font-semibold text-white">{settings.title}</div>
+                <div className="text-[11px] text-slate-400">{settings.subtitle}</div>
+              </div>
+            </div>
+            <button type="button" onClick={() => setOpen(false)} aria-label="Fermer" className="rounded-full p-1.5 text-slate-400 transition-colors hover:bg-white/10 hover:text-white">
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+
+          {questions.length ? (
+            <div className="flex gap-2 overflow-x-auto whitespace-nowrap border-b border-slate-200 bg-px-surface px-4 py-2.5">
+              {questions.map((q) => (
+                <button
+                  key={q}
+                  type="button"
+                  onClick={() => void send(q)}
+                  className="shrink-0 rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] text-slate-700 shadow-2xs transition-colors hover:bg-slate-50"
+                >
+                  {q}
+                </button>
+              ))}
+            </div>
+          ) : null}
+
+          <div className="flex-1 space-y-3.5 overflow-y-auto bg-slate-50/50 p-4" aria-live="polite">
+            {messages.map((m) => (
+              <div key={m.id} className={`flex gap-2.5 ${m.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
+                {m.sender === 'ai' ? <Avatar src={settings.avatar} className="mt-0.5 h-7 w-7 shrink-0 shadow-2xs" /> : null}
+                <div
+                  className={`max-w-[85%] rounded-2xl px-3.5 py-2.5 text-xs leading-relaxed ${
+                    m.sender === 'user' ? 'rounded-tr-xs bg-px-navy text-white' : 'rounded-tl-xs border border-slate-200/80 bg-white text-slate-800 shadow-2xs'
+                  }`}
+                >
+                  <p className="whitespace-pre-wrap">{m.text}</p>
+                  <span className="mt-1 block text-right text-[10px] text-slate-400">{m.time}</span>
+                </div>
+              </div>
+            ))}
+            {loading ? (
+              <div className="flex items-center gap-2.5 p-2 text-xs italic text-slate-500">
+                <RefreshCw className="h-3.5 w-3.5 animate-spin text-px-primary-dark" />
+                <span>L’assistant rédige sa réponse…</span>
+              </div>
+            ) : null}
+            <div ref={endRef} />
+          </div>
+
+          <div className="space-y-2 border-t border-slate-200 bg-white p-3">
+            {settings.contactLabel && settings.contactPath ? (
+              <div className="flex justify-end px-1 text-[11px]">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setOpen(false);
+                    navigate(settings.contactPath);
+                  }}
+                  className="flex items-center gap-1 font-semibold text-px-primary-dark hover:underline"
+                >
+                  <span>{settings.contactLabel}</span>
+                  <ChevronRight className="h-3 w-3" />
+                </button>
+              </div>
+            ) : null}
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                void send();
+              }}
+              className="flex items-center gap-2"
+            >
+              <input
+                type="text"
+                placeholder={settings.placeholder}
+                value={input}
+                maxLength={2000}
+                onChange={(e) => setInput(e.target.value)}
+                className="flex-1 rounded-full border border-slate-200 bg-slate-50 px-3.5 py-2.5 text-xs text-slate-900 focus:border-px-primary focus:outline-hidden"
+              />
+              <button
+                type="submit"
+                aria-label="Envoyer"
+                disabled={!input.trim() || loading}
+                className="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full bg-px-navy text-white transition-colors hover:bg-px-primary hover:text-px-navy disabled:opacity-40"
+              >
+                <Send className="h-4 w-4" />
+              </button>
+            </form>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export default definePublicModule<Settings>({ slots: { floating: ChatWidget } });

package/template/modules/ai-chat/src/server.ts

@@ -0,0 +1,142 @@
+/**
+ * Snapify — module Chat IA
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { defineServerModule, type ServerContext } from '@snapify/sdk';
+
+interface Settings {
+  model: string;
+  temperature: number;
+  systemInstruction: string;
+  maxMessagesPerSession: number;
+  maxSessionsPerDayPerIp: number;
+  maxTokensPerDayGlobal: number;
+}
+
+interface Turn {
+  role?: string;
+  parts?: { text?: string }[];
+}
+
+const GEMINI = 'https://generativelanguage.googleapis.com/v1beta/models';
+const MAX_PROMPT = 2000;
+
+/** Compteurs journaliers en mémoire : remis à zéro au changement de date. */
+function createLimiter() {
+  let day = '';
+  let perIp = new Map<string, { sessions: number; messages: number }>();
+  let usage = { requests: 0, sessions: 0, tokens: 0, blocked: 0 };
+  const roll = () => {
+    const today = new Date().toISOString().slice(0, 10);
+    if (today !== day) {
+      day = today;
+      perIp = new Map();
+      usage = { requests: 0, sessions: 0, tokens: 0, blocked: 0 };
+    }
+  };
+  return {
+    check(ip: string, s: Settings, isNewSession: boolean): string | null {
+      roll();
+      if (s.maxTokensPerDayGlobal > 0 && usage.tokens >= s.maxTokensPerDayGlobal) {
+        usage.blocked++;
+        return 'L’assistant a atteint son quota du jour. Contactez-nous directement, nous vous répondrons rapidement.';
+      }
+      const row = perIp.get(ip) ?? { sessions: 0, messages: 0 };
+      if (isNewSession && row.sessions >= s.maxSessionsPerDayPerIp) {
+        usage.blocked++;
+        return 'Nombre maximal de conversations atteint pour aujourd’hui.';
+      }
+      if (row.messages >= s.maxSessionsPerDayPerIp * s.maxMessagesPerSession) {
+        usage.blocked++;
+        return 'Limite quotidienne de messages atteinte.';
+      }
+      if (isNewSession || row.sessions === 0) {
+        row.sessions++;
+        usage.sessions++;
+      }
+      row.messages++;
+      usage.requests++;
+      perIp.set(ip, row);
+      return null;
+    },
+    record(tokens: number) {
+      roll();
+      usage.tokens += Math.max(0, tokens || 0);
+    },
+    today() {
+      roll();
+      return { ...usage, uniqueIps: perIp.size };
+    },
+  };
+}
+
+export default defineServerModule<Settings>({
+  activate(ctx: ServerContext<Settings>) {
+    const limiter = createLimiter();
+
+    ctx.http.post('/chat', async (req) => {
+      const apiKey = ctx.env('GEMINI_API_KEY');
+      if (!apiKey) throw ctx.error(503, 'Assistant indisponible : clé GEMINI_API_KEY non configurée');
+
+      const body = (req.body ?? {}) as { prompt?: unknown; history?: unknown };
+      const prompt = typeof body.prompt === 'string' ? body.prompt.trim() : '';
+      if (!prompt) throw ctx.error(400, 'Message manquant');
+      if (prompt.length > MAX_PROMPT) throw ctx.error(400, `Message trop long (${MAX_PROMPT} caractères maximum)`);
+
+      const s = ctx.settings();
+      const turns: Turn[] = Array.isArray(body.history) ? (body.history as Turn[]).slice(-40) : [];
+      if (turns.filter((t) => t?.role === 'user').length >= s.maxMessagesPerSession) {
+        throw ctx.error(429, 'Limite de messages atteinte pour cette conversation. Contactez-nous directement.');
+      }
+      const refusal = limiter.check(req.ip, s, turns.length === 0);
+      if (refusal) throw ctx.error(429, refusal);
+
+      const contents = turns.map((t) => ({
+        role: t?.role === 'user' ? 'user' : 'model',
+        parts: [{ text: String(t?.parts?.[0]?.text ?? '').slice(0, 4000) }],
+      }));
+      contents.push({ role: 'user', parts: [{ text: prompt }] });
+
+      const res = await ctx.fetch(`${GEMINI}/${encodeURIComponent(s.model)}:generateContent`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'x-goog-api-key': apiKey },
+        body: JSON.stringify({
+          systemInstruction: { parts: [{ text: s.systemInstruction }] },
+          contents,
+          generationConfig: { temperature: s.temperature, maxOutputTokens: 1024 },
+        }),
+      });
+      const data = (await res.json().catch(() => null)) as {
+        candidates?: { content?: { parts?: { text?: string }[] } }[];
+        usageMetadata?: { totalTokenCount?: number };
+        error?: { message?: string };
+      } | null;
+      if (!res.ok || !data) {
+        ctx.log.error('Gemini', res.status, data?.error?.message);
+        throw ctx.error(502, 'L’assistant est momentanément indisponible.');
+      }
+      const reply = (data.candidates?.[0]?.content?.parts ?? []).map((p) => p.text ?? '').join('').trim();
+      limiter.record(data.usageMetadata?.totalTokenCount ?? Math.ceil((prompt.length + reply.length) / 4));
+      return { reply: reply || 'Je n’ai pas de réponse à cette question. Contactez-nous directement.' };
+    });
+
+    ctx.admin.status(() => {
+      const s = ctx.settings();
+      const u = limiter.today();
+      const quota = s.maxTokensPerDayGlobal > 0 ? `${Math.min(100, Math.round((u.tokens / s.maxTokensPerDayGlobal) * 100))} %` : 'Illimité';
+      return {
+        stats: [
+          { label: 'Conversations aujourd’hui', value: u.sessions },
+          { label: 'Messages aujourd’hui', value: u.requests },
+          { label: 'Visiteurs distincts', value: u.uniqueIps },
+          { label: 'Quota de tokens du jour', value: quota, hint: `${u.tokens.toLocaleString('fr-FR')} tokens${u.blocked ? ` · ${u.blocked} refus` : ''}` },
+        ],
+        alerts: ctx.env('GEMINI_API_KEY')
+          ? []
+          : [{ tone: 'danger', title: 'Clé API manquante', text: 'La variable GEMINI_API_KEY n’est pas définie sur le serveur : l’assistant ne peut pas répondre.' }],
+      };
+    });
+  },
+});

package/template/modules/ai-theme-studio/README.md

@@ -0,0 +1,15 @@
+# Atelier thème IA
+
+Générez une identité visuelle Snapify + une page d’accueil CMS à partir d’un brief, via OpenAI, Claude ou Gemini.
+
+## Compatibilité éditeur
+
+Le rendu s’appuie sur le thème **AI Canvas** (`hamdiayari.ai-canvas`) qui expose les **25 blocs** du constructeur. L’IA ne génère pas de React arbitraire : elle produit un JSON validé (couleurs, polices autorisées, blocs CMS), puis l’atelier applique :
+
+1. Identité visuelle (Apparence)
+2. Activation / réglages AI Canvas
+3. Blocs de la page d’accueil (toujours éditables ensuite)
+
+## Réglages
+
+Clé API + fournisseur dans les réglages du module (jamais exposés au public).

package/template/modules/ai-theme-studio/snapify.module.json

@@ -0,0 +1,175 @@
+{
+  "id": "hamdiayari.ai-theme-studio",
+  "name": "Atelier thème IA",
+  "version": "1.1.4",
+  "description": "Décrivez votre marque : l’IA génère identité, boutons, structure de page, images (IA ou stock) et blocs CMS prêts pour l’éditeur. OpenAI, Claude ou Gemini.",
+  "author": {
+    "name": "Hamdi Ayari",
+    "email": "hamdi.ayari@novalabs.tn",
+    "url": "https://novalabs.tn"
+  },
+  "pricing": "free",
+  "category": "Apparence",
+  "icon": "sparkles",
+  "screenshot": "screenshot.jpg",
+  "engines": {
+    "snapify": "^1.3.0"
+  },
+  "permissions": [
+    "admin:routes",
+    "database",
+    "storage",
+    "files",
+    "site:read",
+    "net:api.openai.com",
+    "net:api.anthropic.com",
+    "net:generativelanguage.googleapis.com"
+  ],
+  "slots": [],
+  "entries": {
+    "server": "src/server.ts",
+    "admin": "src/admin/index.tsx"
+  },
+  "adminPages": [
+    {
+      "id": "studio",
+      "label": "Atelier thème IA",
+      "icon": "sparkles"
+    },
+    {
+      "id": "history",
+      "label": "Générations",
+      "icon": "history"
+    }
+  ],
+  "settings": [
+    {
+      "key": "provider",
+      "type": "select",
+      "group": "Fournisseur IA",
+      "label": "Fournisseur",
+      "help": "Utilisé pour générer identité, style et page d’accueil.",
+      "default": "openai",
+      "options": [
+        {
+          "value": "openai",
+          "label": "ChatGPT (OpenAI)"
+        },
+        {
+          "value": "anthropic",
+          "label": "Claude (Anthropic)"
+        },
+        {
+          "value": "gemini",
+          "label": "Gemini (Google)"
+        }
+      ]
+    },
+    {
+      "key": "apiKey",
+      "type": "text",
+      "group": "Fournisseur IA",
+      "label": "Clé API",
+      "help": "Conservée uniquement sur le serveur. Jamais exposée aux visiteurs.",
+      "default": "",
+      "maxLength": 200,
+      "placeholder": "sk-… / AIza… / sk-ant-…"
+    },
+    {
+      "key": "openaiModel",
+      "type": "select",
+      "group": "Modèles",
+      "label": "Modèle OpenAI",
+      "default": "gpt-4o",
+      "options": [
+        {
+          "value": "gpt-4o-mini",
+          "label": "GPT-4o mini (économique)"
+        },
+        {
+          "value": "gpt-4o",
+          "label": "GPT-4o (recommandé)"
+        }
+      ]
+    },
+    {
+      "key": "anthropicModel",
+      "type": "select",
+      "group": "Modèles",
+      "label": "Modèle Claude",
+      "default": "claude-sonnet-5-5",
+      "options": [
+        {
+          "value": "claude-sonnet-5-5",
+          "label": "Claude Sonnet 5.5 (recommandé)"
+        },
+        {
+          "value": "claude-haiku-5-5",
+          "label": "Claude Haiku 5.5 (rapide)"
+        },
+        {
+          "value": "claude-sonnet-4-6",
+          "label": "Claude Sonnet 4.6"
+        }
+      ]
+    },
+    {
+      "key": "geminiModel",
+      "type": "select",
+      "group": "Modèles",
+      "label": "Modèle Gemini",
+      "default": "gemini-3.8-flash",
+      "options": [
+        {
+          "value": "gemini-3.8-flash",
+          "label": "Gemini 3.8 Flash (recommandé)"
+        },
+        {
+          "value": "gemini-3.5-flash-lite",
+          "label": "Gemini 3.5 Flash-Lite"
+        },
+        {
+          "value": "gemini-2.5-flash",
+          "label": "Gemini 2.5 Flash"
+        }
+      ]
+    },
+    {
+      "key": "defaultLang",
+      "type": "select",
+      "group": "Génération",
+      "label": "Langue des textes",
+      "default": "fr",
+      "options": [
+        {
+          "value": "fr",
+          "label": "Français"
+        },
+        {
+          "value": "ar",
+          "label": "Arabe"
+        },
+        {
+          "value": "en",
+          "label": "English"
+        }
+      ]
+    },
+    {
+      "key": "autoApplyHome",
+      "type": "boolean",
+      "group": "Génération",
+      "label": "Proposer la page d’accueil générée",
+      "help": "L’atelier prépare des blocs CMS compatibles avec l’éditeur visuel.",
+      "default": true
+    },
+    {
+      "key": "generateImages",
+      "type": "boolean",
+      "group": "Génération",
+      "label": "Générer des images (IA)",
+      "help": "OpenAI (DALL·E) ou Gemini (Imagen). Claude : images Unsplash adaptées au secteur. Désactiver = stock uniquement (plus rapide).",
+      "default": true
+    }
+  ]
+}

package/template/modules/ai-theme-studio/src/admin/HistoryPage.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from 'react';
+import { History } from 'lucide-react';
+import { Alert, Button, Card, EmptyState, PageHeader, errorMessage, toast, type AdminPageProps } from '@snapify/sdk/admin';
+import type { GenerationRecord, Settings } from '../types';
+
+export function HistoryPage({ api }: AdminPageProps<Settings>) {
+  const [rows, setRows] = useState<GenerationRecord[]>([]);
+  const [busy, setBusy] = useState(false);
+
+  const load = async () => {
+    setBusy(true);
+    try {
+      const r = await api.get<{ generations: GenerationRecord[] }>('/generations');
+      setRows(r.generations || []);
+    } catch (e) {
+      toast.error(errorMessage(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  const remove = async (id: string) => {
+    try {
+      await api.delete(`/generations/${id}`);
+      setRows((xs) => xs.filter((x) => x.id !== id));
+      toast.message('Supprimé');
+    } catch (e) {
+      toast.error(errorMessage(e));
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-6">
+      <PageHeader
+        title="Générations"
+        description="Historique des thèmes proposés par l’IA."
+        actions={
+          <Button variant="ghost" loading={busy} onClick={() => void load()}>
+            Actualiser
+          </Button>
+        }
+      />
+      {!rows.length ? (
+        <EmptyState icon={History} title="Aucune génération" description="Lancez une création depuis Atelier thème IA." />
+      ) : (
+        <div className="space-y-3">
+          {rows.map((g) => (
+            <Card key={g.id} className="space-y-2 p-4">
+              <div className="flex flex-wrap items-start justify-between gap-2">
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-semibold text-slate-900">
+                    {g.spec?.siteName || (g.status === 'pending' ? 'Génération en cours…' : 'Sans nom')}
+                  </p>
+                  <p className="mt-1 line-clamp-2 text-sm text-slate-600">{g.prompt}</p>
+                  <p className="mt-2 text-xs text-slate-500">
+                    {new Date(g.createdAt).toLocaleString('fr-FR')} · {g.provider} · {g.model || '—'} · {g.status}
+                  </p>
+                </div>
+                <Button size="sm" variant="ghost" onClick={() => void remove(g.id)}>
+                  Supprimer
+                </Button>
+              </div>
+              {g.status === 'pending' ? (
+                <Alert tone="info" title="En cours">
+                  <p className="text-sm">L’IA prépare encore cette proposition — actualisez dans un instant.</p>
+                </Alert>
+              ) : null}
+              {g.status === 'failed' && g.error ? (
+                <Alert tone="danger" title="Échec">
+                  <p className="text-sm">{g.error}</p>
+                </Alert>
+              ) : null}
+              {g.applied ? (
+                <p className="text-xs font-medium text-emerald-700">
+                  Appliqué {new Date(g.applied.at).toLocaleString('fr-FR')}
+                  {g.applied.branding ? ' · identité' : ''}
+                  {g.applied.theme ? ' · thème' : ''}
+                  {g.applied.home ? ' · accueil' : ''}
+                </p>
+              ) : null}
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}