waib-rrg

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,
  }) => (
    <VehicleDetails
      vehicle={vehicle}
      message={message}
      onReserve={onReserve}
      onAddToCart={onAddToCart}
      onSubmit={onSubmit}
      onGoBack={onGoBack}
    />
  )}
  renderLeadForm={({ leadFormDetails, onSubmit }) => (
    <CarLeadForm leadFormDetails={leadFormDetails} onSubmit={onSubmit} />
  )}
  renderCarouselMobile={({ vehicles, onChangeComponent }) => (
    <CarListMobile vehicles={vehicles} onChangeComponent={onChangeComponent} />
  )}
  apiUrl={process.env.REACT_APP_API_URL}
  TypoComponent={({ children, ...rest }) => (
    <Typography {...rest}>{children}</Typography>
  )}
  userId={userId}
/>;

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)
apiUrl	URL de l’API backend pour le chatbot
TypoComponent	Composant React pour afficher le texte dans la conversation

🔁 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