my-africhat

Widget embeddable pour integrer un assistant IA My AfriChat sur un site web.

Guide rapide

1. Creer et configurer ton site sur la plateforme

1. Va sur https://my-africhat.vercel.app et connecte-toi.
2. Cree un site (nom + slug).
3. Dans Configuration, publie une version active.
4. Dans Domaines, ajoute le domaine exact de ton site deploye.
5. Dans Cles, genere une siteKey.

Important pour les domaines:

• utilise seulement le host (afri-test.netlify.app, rebcdr07.github.io)
• pas de https://
• pas de chemin (/app, /portfolio)

2. Installer le package

npm install my-africhat

3. Ajouter la config (sans hardcoder la siteKey)

Ne stocke pas la siteKey en dur dans un JSON commite.

1. Cree un fichier .env (ou .env.local) dans ton projet:

VITE_AFRICHAT_SITE_KEY=afc_live_xxxxxxxxxxxx.yyyyyyyyyyyyyyyy

2. Cree africhat.config.js:

export const afriChatConfig = {
  version: 1,
  site: {
    name: "Portfolio",
    defaultLanguage: "fr",
    supportedLanguages: ["fr", "en"],
  },
  branding: {
    name: "Elton",
    welcomeMessage: "Salut! Je suis l'assistant du portfolio.",
    accentColor: "#3b82f6",
    launcherLabel: "Me contacter",
    iconPreset: "afri-duo",
    iconSize: "medium",
  },
  assistant: {
    voice: "alloy",
    audioEnabled: true,
  },
  integration: {
    mode: "fullscreen",
    position: "bottom-right",
    zIndex: 999999,
  },
  api: {
    chatEndpoint: "https://YOUR_PROJECT.supabase.co/functions/v1/widget-chat",
    ttsEndpoint: "https://YOUR_PROJECT.supabase.co/functions/v1/widget-tts",
    realtimeTokenEndpoint: "https://YOUR_PROJECT.supabase.co/functions/v1/widget-realtime-token",
    siteKey: import.meta.env.VITE_AFRICHAT_SITE_KEY,
  },
};

4. Monter le widget

import { createMyAfriChat } from "my-africhat";
import { afriChatConfig } from "./africhat.config";

createMyAfriChat(afriChatConfig).mount();

Fichier main.js avec placeholders: obligatoire ?

Non.

Tu n'as pas besoin d'un fichier special avec:

• https://YOUR_PROJECT...
• afc_live_xxx...

Ce pattern etait juste un garde-fou dans un projet de test pour eviter de lancer le widget avec une config vide. En production, le montage minimal ci-dessus suffit.

API disponible

createMyAfriChat(config) retourne:

• mount(target?)
• unmount()
• destroy()
• open()
• close()
• send(message)
• updateConfig(nextConfig)

Options UI ajoutees

• integration.mode: "fullscreen" (par defaut) ou "floating"
• branding.iconPreset: "afri-duo" | "afri-link" | "afri-orbit" | "afri-spark" | "afri-classic" | "afri-classic-soft" | "afri-classic-outline" | "afri-benin-green" | "afri-benin-yellow" | "afri-benin-red" | "afri-pan-africa" | "afri-kente" | "afri-sankofa" | "afri-sahel" | "afri-nile" | "afri-bronze" | "afri-baobab"
• branding.iconSize: "small" | "medium" | "large" (par defaut: "medium")

Le mode fullscreen ouvre le chat en plein ecran (desktop + mobile) avec layout responsive. Le mode floating garde l'ancien comportement en fenetre flottante.

Icones disponibles

• afri-duo
• afri-link
• afri-orbit
• afri-spark
• afri-classic (palette plateforme)
• afri-classic-soft (palette plateforme)
• afri-classic-outline (palette plateforme)
• afri-benin-green (vert drapeau Benin)
• afri-benin-yellow (jaune drapeau Benin)
• afri-benin-red (rouge drapeau Benin)
• afri-pan-africa (rouge/noir/vert/or)
• afri-kente (inspire des palettes textile ouest-africaines)
• afri-sankofa (or/terre)
• afri-sahel (bleu nuit/sable)
• afri-nile (bleu nil)
• afri-bronze (bronze/terre)
• afri-baobab (vert terre/bois)

Les SVG sources sont dans packages/my-africhat/src/icons/.

Replay audio des reponses

Chaque message assistant affiche un bouton Replay (si assistant.audioEnabled !== false).

• Si la reponse contient deja un audio, il est rejoue.
• Sinon, le widget appelle api.ttsEndpoint pour generer l'audio a la demande.

Checklist de validation

1. Le launcher apparait en bas a droite/gauche.
2. Le clic ouvre le chat.
3. Un message utilisateur renvoie une reponse.
4. Audio OK si audioEnabled: true.

Troubleshooting rapide

Origin <domain> not allowed

Le domaine n'est pas autorise dans la plateforme.

Origin required

La requete n'est pas envoyee depuis une vraie page web avec Origin.

Edge Function returned a non-2xx status code

Verifier api.*, siteKey, domaine autorise, et configuration active publiee.

Launcher trop large sur mobile

Mettre a jour au minimum en 0.1.1:

npm install my-africhat@latest