waib-rrg

waib-rrg est un widget React de chatbot intelligent à intégrer sur votre site.
Il fournit la logique de chat et vous permet de brancher vos propres composants UI.

⚙️ Installation

npm install waib-rrg
# ou
yarn add waib-rrg

🧩 Utilisation

Voici un exemple d’intégration du composant WaibChat dans une application React :

import { WaibChat } from "waib-rrg";

<WaibChat
  renderProductCard={({ vehicles, onChangeComponent }) => (
    <CarList vehicles={vehicles} onChangeComponent={onChangeComponent} />
  )}
  renderCarDetailsInformation={({
    vehicle,
    message,
    onReserve,
    onAddToCart,
    onSubmit,
    onGoBack,
    showGoBackButton,
  }) => (
    <VehicleDetails
      vehicle={vehicle}
      message={message}
      onReserve={onReserve}
      onAddToCart={onAddToCart}
      onSubmit={onSubmit}
      onGoBack={onGoBack}
      showGoBackButton={showGoBackButton}
    />
  )}
  renderLeadForm={({ leadFormDetails, onSubmit }) => (
    <CarLeadForm leadFormDetails={leadFormDetails} onSubmit={onSubmit} />
  )}
  renderCarouselMobile={({ vehicles, onChangeComponent }) => (
    <CarListMobile vehicles={vehicles} onChangeComponent={onChangeComponent} />
  )}
  hostEnv={hostEnv}
  // Ici si vous fournissez l'apiUrl, hostEnv sera ignoré
  // apiUrl={process.env.REACT_APP_API_URL}
  TypoComponent={({ children, ...rest }) => (
    <Typography {...rest}>{children}</Typography>
  )}
  getRecaptchaScore={getRecaptchaScore}
/>;

Exemple d’un composant CarList pour gérer plusieurs véhicules :

import Card from "../Card";
import { Box } from "@mui/material";

export default function CarList({ vehicles = [], onChangeComponent }) {
  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        justifyContent: "space-around",
        alignItems: "center",
        width: "100%",
        height: "100%",
        overflowX: "hidden",
        backgroundColor: "#F0F0F0",
        gap: "10px",
        padding: "20px",
      }}
    >
      {vehicles.map((el, i) => (
        <Card vehicle={el} onChangeComponent={() => onChangeComponent(el)} />
      ))}
    </Box>
  );
}

Exemple d’appel de la fonction onSubmit (formulaire):

const handleSubmit = (e) => {
  e.preventDefault();
  onSubmit({ user: formData, vehicle: leadFormDetails.vehicle }, true);
  setIsSubmitted(true);
};

🧱 Props principales

| Prop | Description | | ----------------------------- | ------------------------------------------------------------------------ | | renderProductCard | Fonction de rendu personnalisée pour les fiches produit | | renderCarDetailsInformation | Fonction de rendu pour les détails du véhicule | | renderLeadForm | Fonction de rendu du formulaire de lead personnalisé (CarLeadForm) | | renderCarouselMobile | Fonction de rendu du carrousel des véhicules (version mobile uniquement) | | hostEnv | Environement choisi pour lancer le WAIB | | apiUrl | URL de l’API backend pour le chatbot (ignoré si hostEnv) | | TypoComponent | Composant React pour afficher le texte dans la conversation | | getRecaptchaScore | Fonction de résolution de CAPTCHA v3 |

🔁 Gestion des interactions

Certaines fonctions utilitaires sont exposées par les props pour gérer les interactions avec l'utilisateur :

• onGoBack: permet de revenir à la liste des véhicules
• onChangeComponent: permet de changer dynamiquement le composant affiché en passant le véhicule sélectionné
• onReserve, onAddToCart, onSubmit: callbacks métiers pour chaque interaction utilisateur

📦 Exigences

• Une API backend compatible pour alimenter le chatbot