Come costruire un chatbot in React JS

Definire il flusso

Indipendentemente da ciò che fa, il bot avrà bisogno di un flusso. Si tratta della logica che determina il comportamento del bot. 

Nello studio, selezionare Flussi di lavoro nel pannello di sinistra.

Non deve essere complicato. Un singolo nodo autonomo con accesso ai documenti (cioè il bot predefinito) può essere estremamente efficace.

È importante fornire al bot delle istruzioni. Queste includono:

• Il personaggio che si desidera che assuma, ad esempio educato, amichevole o che rispecchi il tono dell'utente.
• Modi per iniziare o terminare il messaggio
• Come rispondere a domande particolari
• Quali documenti consultare quando

Aggiungere la Knowledge Base

Si tratta delle informazioni a cui il bot attingerà per la RAG (retrieval-augmented generation), ovvero per il catering delle sue risposte ai dati. Si tratta di un'operazione relativamente semplice, ma vale la pena di imparare a ottimizzare i file per ottenere il miglior RAG possibile.

Wynona, il mio sommelier(-ère?) digitale ha accesso a una carta dei vini. È solo un sottoinsieme del dataset Wine Reviews: un elenco di vini con le loro regioni e le note di degustazione.

Distribuire

Una volta soddisfatti del bot, premere Pubblica nello studio e il bot sarà attivo.

Questo lo rende disponibile per l'integrazione in tutti i tipi di canali di comunicazione, come ad esempio WhatsAppe Telegram, e nelle applicazioni web, come quella che stiamo costruendo.

Correre crea-next-app

Correre:

npx create-next-app@14

Noterete che sto usando Next.js 14. Il motivo è che abbiamo bisogno di React 18 per rendere compatibile la nostra app chatbot. Il motivo è che abbiamo bisogno di React 18 per rendere la nostra applicazione compatibile con i chatbot. Eseguendo il comando @latest si costruirà con Next.js 15 e React 19. L'esecuzione del comando precedente è il modo più semplice per assicurarsi di eseguire la versione corretta di React e che Next sia compatibile.

Impostare le configurazioni dell'app

Vi verranno poste una serie di domande. Personalmente, mi attengo alle impostazioni predefinite, come farò in questa esercitazione.

Se tutto va bene, si vedrà il registro di successo.

Ottenere il boilerplate Botpress React

Per integrare il chatbot nella nostra applicazione, avremo bisogno di:

• Il nostro cliente ID
• I componenti precostituiti della webchat React.

Botpress ha un codice boilerplate che include entrambi. Per ottenerlo:

• Passare allo studio e fare clic su Condividi nell'angolo in alto a destra.
• In basso a destra del pop-up, fare clic su Configura.

• Fare clic sulla scheda React in alto a destra.
• Qui si trova il boilerplate di Botpress , compreso il comando di installazione di un ID cliente

A proposito, se avete bisogno di un accesso rapido al vostro ID cliente:

• Accedere alla dashboard di Botpress
• Selezionare Webchat nel pannello laterale
• Fare clic su Impostazioni avanzate

È consigliabile memorizzarla in una variabile d'ambiente, ma per ora la terremo nel componente.

Creare un componente di Chat nella propria applicazione

Nella cartella del progetto, creerò un file chat.tsx.

Quindi inserire il codice del client chatbot:

"use client"
import { useState } from 'react';


import {
   Webchat,
   WebchatProvider,
   Fab,
   getClient,
   Configuration,
} from '@botpress/webchat';


const clientId = "";


const configuration: Configuration = {
   color: '#000',
};


export default function Chat() {
   const client = getClient({
       clientId,
   });


   const [isWebchatOpen, setIsWebchatOpen] = useState(false);


   const toggleWebchat = () => {
       setIsWebchatOpen((prevState) => !prevState);
   };


   return (
       <div
           style={{
               position: 'fixed',
               display: 'flex',
               flexDirection: 'column',
               bottom: 0,
               right: 0,
               alignItems: 'flex-end',
               gap: '12px',
               padding: '24px', // give some breathing room
               zIndex: 9999,
           }}
       >
           <WebchatProvider client={client} configuration={configuration}>


               <div
                   style={{
                       // position: '',
                       marginTop: '12px',
                       marginBottom: '72px',
                       width: '350px',
                       maxHeight: '500px',
                       overflow: 'scroll',
                       borderRadius: '16px',
                       backgroundColor: '#fff',
                       transform: isWebchatOpen ? 'scale(1)' : 'scale(0)',
                       transformOrigin: 'bottom right',
                       transition: 'transform 0.3s ease-in-out',
                   }}
               >
                   <Webchat />
               </div>
               <Fab onClick={toggleWebchat} style={{ position: 'absolute', bottom: '24px', right: '24px' }} />
           </WebchatProvider>
       </div>
   );
}

Questo è il codice di botpress con alcune modifiche degne di nota:

• "usa il cliente" in alto, per i componenti che si occupano della gestione degli stati
• Rinominare la funzione da App a Chat
• Alcuni stili

Ora andate su app/pagina.tsx e importarlo appena sopra il piè di pagina:

import Image from "next/image";
import styles from "./page.module.css";
import Chat from "./chat";


export default function Home() {
 return (
   <div className={styles.page}>
     <main className={styles.main}>
      
       <Image
         className={styles.logo}
         src="https://nextjs.org/icons/next.svg"
         alt="Next.js logo"
         width={180}
         height={38}
         priority
       />
       <ol>
         <li>
           Get started by editing <code>app/page.tsx</code>.
         </li>
         <li>Save and see your changes instantly.</li>
       </ol>


       <div className={styles.ctas}>
         <a
           className={styles.primary}
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
           <Image
             className={styles.logo}
             src="https://nextjs.org/icons/vercel.svg"
             alt="Vercel logomark"
             width={20}
             height={20}
           />
           Deploy now
         </a>
         <a
           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
           className={styles.secondary}
         >
           Read our docs
         </a>
       </div>
      
     </main>
     <Chat/>
     <footer className={styles.footer}>
       <a
         href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/file.svg"
           alt="File icon"
           width={16}
           height={16}
         />
         Learn
       </a>
       <a
         href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/window.svg"
           alt="Window icon"
           width={16}
           height={16}
         />
         Examples
       </a>
       <a
         href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/globe.svg"
           alt="Globe icon"
           width={16}
           height={16}
         />
         Go to nextjs.org →
       </a>
     </footer>
   </div>
 );
}

Ora è possibile eseguire npm run dev in un terminale nella directory del progetto per eseguirlo su un server locale.