Integración de un agente de Dialogflow en una aplicación React

 

 

 

  • SmashingConf Freiburg 2024

  • Índice
    1. 1. Configurar un agente de Dialogflow
    2. Integración de un agente de Dialogflow
    3. Configurar una aplicación Node Express
      1. Autenticación con Dialogflow
      2. ¿Qué son las cuentas de servicio?
      3. Manejo de entradas de voz
    4. Integración en una aplicación web
      1. Crear una interfaz de chat

    Cuando se trata de crear un asistente de chat conversacional que pueda usarse a nivel pequeño o empresarial, lo más probable es que Dialogflow sea una de las primeras opciones que aparezca en su lista de búsqueda, ¿y por qué no aparecería? Ofrece varias funciones, como la capacidad de procesar entradas de audio y texto, proporcionar respuestas dinámicas mediante webhooks personalizados, conectarse a millones de dispositivos habilitados para Google mediante el asistente de Google y mucho más. Pero además de la consola que se proporciona para diseñar y administrar un Agente, ¿cómo podemos crear un asistente de chat que también pueda usarse dentro de nuestras aplicaciones web creadas?

     

    Dialogflow es una plataforma que simplifica el proceso de creación y diseño de un asistente de chat conversacional con procesamiento de lenguaje natural que puede procesar entradas de voz o texto cuando se utiliza desde la consola de Dialogflow o desde una aplicación web integrada.

    Aunque el Agente de Dialogflow integrado se explica brevemente en este artículo, se espera que comprenda Node.js y Dialogflow. Si está aprendiendo sobre Dialogflow por primera vez, este artículo brinda una explicación clara de qué es Dialogflow y sus conceptos.

    Este artículo es una guía sobre cómo crear un agente de Dialogflow con soporte de voz y chat que se puede integrar en una aplicación web con la ayuda de una aplicación back-end Express.js como enlace entre una aplicación web React.js y el Agente. en el propio Dialogflow. Al final del artículo, debería poder conectar su propio agente de Dialogflow a su aplicación web preferida.

    Para que esta guía sea fácil de seguir, puede saltar a la parte del tutorial que más le interese o seguirla en el siguiente orden tal como aparecen:

    • Configurar un agente de Dialogflow
    • Integración de un agente de Dialogflow
    • Configurar una aplicación Node Express
      • Autenticación con Dialogflow
      • ¿Qué son las cuentas de servicio?
      • Manejo de entradas de voz
    • Integración en una aplicación web
      • Crear una interfaz de chat
      • Grabación de entrada de voz del usuario
    • Conclusión
    • Referencias

    1. Configurar un agente de Dialogflow

    Como se explica en este artículo, un asistente de chat en Dialogflow se llama Agente y se compone de componentes más pequeños como intenciones , cumplimiento , base de conocimientos y mucho más. Dialogflow proporciona una consola para que los usuarios creen, capaciten y diseñen el flujo de conversación de un Agente. En nuestro caso de uso, restauraremos un agente que se exportó a una carpeta ZIP después de recibir capacitación, utilizando la función Exportar e Importar del agente .

     

    Antes de realizar la importación, necesitamos crear un nuevo agente que se fusionará con el agente que está a punto de restaurarse. Para crear un nuevo Agente desde la consola, se necesita un nombre único y también un proyecto en Google Cloud para vincular el agente. Si no hay ningún proyecto existente en Google Cloud con el que vincularse, se puede crear uno nuevo aquí .

    Previamente se ha creado y formado un agente para recomendar productos vitivinícolas a un usuario en función de su presupuesto. Este agente ha sido exportado a un ZIP; Puede descargar la carpeta aquí y restaurarla en nuestro agente recién creado desde la pestaña Exportar e Importar que se encuentra en la página de Configuración del agente.

    Restaurar un agente previamente exportado desde una carpeta ZIP. ( Vista previa grande )

    El agente importado ha sido previamente capacitado para recomendar un producto vitivinícola al usuario en función del presupuesto del usuario para la compra de una botella de vino.

    Al revisar el agente importado, veremos que tiene tres intents creados desde la página de intents. Uno es un intent alternativo, que se usa cuando el Agente no reconoce la entrada de un usuario, el otro es un intent de Bienvenida que se usa cuando se inicia una conversación con el Agente, y el último intent se usa para recomendar un vino al usuario según el parámetro de cantidad dentro de la oración. Nos preocupa la get-wine-recommendationintención

    Este intent tiene un contexto de entrada único que wine-recommendationproviene del intent de bienvenida predeterminado para vincular la conversación a este intent.

    "Un contexto es un sistema dentro de un agente que se utiliza para controlar el flujo de una conversación de una intención a otra".

    Debajo de los contextos se encuentran las frases de capacitación , que son oraciones que se utilizan para capacitar a un agente sobre qué tipo de declaraciones esperar de un usuario. A través de una gran variedad de frases de entrenamiento dentro de una intención, un agente puede reconocer la oración de un usuario y la intención en la que se encuentra.

    Las frases de capacitación dentro de get-wine-recommendationla intención de nuestros agentes (como se muestra a continuación) indican la elección del vino y la categoría de precio:

    Página de intención de obtener recomendación de vino que muestra las frases de capacitación disponibles. ( Vista previa grande )

     

    Al mirar la imagen de arriba, podemos ver las frases de entrenamiento disponibles enumeradas y la cifra de moneda está resaltada en color amarillo para cada una de ellas. Este resaltado se conoce como anotación en Dialogflow y se realiza automáticamente para extraer los tipos de datos reconocidos conocidos como entidad de la oración de un usuario.

    Después de que esta intención haya coincidido en una conversación con el agente, se realizará una solicitud HTTP a un servicio externo para obtener el vino recomendado en función del precio extraído como parámetro de la oración de un usuario, mediante el uso del webhook habilitado que se encuentra dentro la sección Cumplimiento en la parte inferior de esta página de intención.

    Podemos probar el agente usando el emulador de Dialogflow ubicado en la sección derecha de la consola de Dialogflow. Para probar, iniciamos la conversación con un mensaje " Hola " y continuamos con la cantidad deseada de vino. Se llamará inmediatamente al webhook y el agente mostrará una respuesta enriquecida similar a la siguiente.

    Probar el webhook de cumplimiento del agente importado utilizando el emulador del agente en la consola. ( Vista previa grande )

    En la imagen de arriba podemos ver la URL del webhook generada usando Ngrok y la respuesta del agente en el lado derecho que muestra un vino dentro del rango de precio de $20 ingresado por el usuario.

    En este punto, el agente de Dialogflow se ha configurado completamente. Ahora podemos comenzar a integrar este agente en una aplicación web para permitir que otros usuarios accedan e interactúen con el agente sin acceso a nuestra consola Dialogflow .

    Integración de un agente de Dialogflow

    Si bien existen otros medios para conectarse a un Agente de Dialogflow, como realizar solicitudes HTTP a sus puntos finales REST , la forma recomendada de conectarse a Dialogflow es mediante el uso de su biblioteca cliente oficial disponible en varios lenguajes de programación. Para JavaScript, el paquete @google-cloud/dialogflow está disponible para su instalación desde NPM .

    Internamente, el paquete @google-cloud/dialogflow usa gRPC para sus conexiones de red y esto hace que el paquete no sea compatible dentro de un entorno de navegador, excepto cuando se parchea usando webpack ; la forma recomendada de usar este paquete es desde un entorno de Nodo. Podemos hacer esto configurando una aplicación back-end Express.js para usar este paquete y luego enviar datos a la aplicación web a través de sus puntos finales API y esto es lo que haremos a continuación.

    Configurar una aplicación Node Express

    Para configurar una aplicación rápida, creamos un nuevo directorio de proyecto y luego tomamos las dependencias necesarias yarndesde una terminal de línea de comando abierta.

     

    # create a new directory and ( ) move into directorymkdir dialogflow-server cd dialogflow-server# create a new Node projectyarn init -y# Install needed packagesyarn add express cors dotenv uuid

    Con las dependencias necesarias instaladas, podemos proceder a configurar un servidor Express.js muy sencillo que maneje conexiones en un puerto específico con soporte CORS habilitado para la aplicación web.

    // index.jsconst express = require("express")const dotenv = require("dotenv")const cors = require("cors")dotenv.config();const app = express();const PORT = process.env.PORT || 5000;app.use(cors());app.listen(PORT, () = console.log(` server running on port ${PORT}`));

    Cuando se ejecuta, el código del fragmento anterior inicia un servidor HTTP que escucha las conexiones en un PORT Express.js específico. También tiene habilitado el uso compartido de recursos entre orígenes (CORS) en todas las solicitudes que utilizan el paquete cors como middleware Express . Por ahora, este servidor solo escucha conexiones, no puede responder a una solicitud porque no tiene una ruta creada , así que creemos esto.

    Ahora necesitamos agregar dos nuevas rutas: una para enviar datos de texto y la otra para enviar una entrada de voz grabada. Ambos aceptarán una POSTsolicitud y enviarán los datos contenidos en el cuerpo de la solicitud al agente de Dialogflow más adelante.

    const express = require("express") const app = express()app.post("/text-input", (req, res) = { res.status(200).send({ data : "TEXT ENDPOINT CONNECTION SUCCESSFUL" })});app.post("/voice-input", (req, res) = { res.status(200).send({ data : "VOICE ENDPOINT CONNECTION SUCCESSFUL" })});module.exports = app

    Arriba creamos una instancia de enrutador separada para las dos POSTrutas creadas que, por ahora, solo responden con un 200código de estado y una respuesta ficticia codificada. Cuando hayamos terminado de autenticarnos con Dialogflow, podremos volver a implementar una conexión real a Dialogflow dentro de estos puntos finales.

    Para el último paso en la configuración de nuestra aplicación backend, montamos la instancia de enrutador creada previamente en la aplicación Express usando app.use y una ruta base para la ruta.

    // agentRoutes.jsconst express = require("express")const dotenv = require("dotenv")const cors = require("cors")const Routes = require("./routes")dotenv.config();const app = express();const PORT = process.env.PORT || 5000;app.use(cors());app.use("/api/agent", Routes);app.listen(PORT, () = console.log(` server running on port ${PORT}`));

    Arriba, hemos agregado una ruta base a las dos rutas. Dos podemos probar cualquiera de ellas mediante una POSTsolicitud usando cURL desde una línea de comando como se hace a continuación con un cuerpo de solicitud vacío;

    curl -X https://localhost:5000/api/agent/text-response

    Después de completar exitosamente la solicitud anterior, podemos esperar ver una respuesta que contenga datos del objeto impresos en la consola.

    Ahora nos queda hacer una conexión real con Dialogflow que incluye manejar la autenticación, enviar y recibir datos del Agente en Dialogflow usando el paquete @google-cloud/dialogflow .

     

    Autenticación con Dialogflow

    Cada agente de Dialogflow creado está vinculado a un proyecto en Google Cloud . Para conectarnos externamente al agente de Dialogflow, nos autenticamos con el proyecto en la nube de Google y utilizamos Dialogflow como uno de los recursos del proyecto. De las seis formas disponibles para conectarse a un proyecto en la nube de Google, usar la opción Cuentas de servicio es la más conveniente cuando se conecta a un servicio particular en la nube de Google a través de su biblioteca cliente.

    Nota : Para aplicaciones listas para producción, se recomienda el uso de claves API de corta duración en lugar de claves de cuenta de servicio para reducir el riesgo de que una clave de cuenta de servicio llegue a las manos equivocadas.

    ¿Qué son las cuentas de servicio?

    Las cuentas de servicio son un tipo especial de cuenta en Google Cloud , creada para la interacción no humana, principalmente a través de API externas. En nuestra aplicación, se accederá a la cuenta de servicio a través de una clave generada por la biblioteca cliente de Dialogflow para autenticarse con Google Cloud.

    La documentación en la nube sobre la creación y administración de cuentas de servicio proporciona una guía excelente para crear una cuenta de servicio. Al crear la cuenta de servicio, se debe asignar la función de administrador de API de Dialogflow a la cuenta de servicio creada como se muestra en el último paso. Esta función le otorga a la cuenta de servicio control administrativo sobre el agente de Dialogflow vinculado.

    Para usar la cuenta de servicio, necesitamos crear una clave de cuenta de servicio . Los siguientes pasos a continuación describen cómo crear uno en formato JSON:

    1. Haga clic en la cuenta de servicio recién creada para navegar a la página de la cuenta de servicio.
    2. Desplácese hasta la sección Claves y haga clic en el menú desplegable Agregar clave y haga clic en la opción Crear nueva clave que abre un modal.
    3. Seleccione un formato de archivo JSON y haga clic en el botón Crear en la parte inferior derecha del modal.

    Nota: Se recomienda mantener privada la clave de la cuenta de servicio y no enviarla a ningún sistema de control de versiones , ya que contiene datos muy confidenciales sobre un proyecto en Google Cloud. Esto se puede hacer agregando el archivo al .gitignorearchivo. Korean Beauty

    Con una cuenta de servicio creada y una clave de cuenta de servicio disponible dentro del directorio de nuestro proyecto, podemos usar la biblioteca cliente de Dialogflow para enviar y recibir datos del agente de Dialogflow.

    // agentRoute.jsrequire("dotenv").config();const express = require("express")const Dialogflow = require("@google-cloud/dialogflow")const { v4 as uuid } = require("uuid")const Path = require("path") const app = express();app.post("/text-input", async (req, res) = { const { message } = req.body; // Create a new session const sessionClient = new Dialogflow.SessionsClient({ keyFilename: Path.join(__dirname, "./key.json"), }); const sessionPath = sessionClient.projectAgentSessionPath( process.env.PROJECT_ID, uuid() ); // The dialogflow request object const request = { session: sessionPath, queryInput: { text: { // The query to send to the dialogflow agent text: message, }, }, }; // Sends data from the agent as a response try { const responses = await sessionClient.detectIntent(request); res.status(200).send({ data: responses }); } catch (e) { console.log(e); res.status(422).send({ e }); }});module.exports = app;

    La ruta completa anterior envía datos al agente de Dialogflow y recibe una respuesta a través de los siguientes pasos.

     

    • Primero
      se autentica en la nube de Google, luego crea una sesión con Dialogflow utilizando el ID del proyecto de la nube de Google vinculado al agente de Dialogflow y también una ID aleatoria para identificar la sesión creada. En nuestra aplicación, estamos creando un identificador UUID en cada sesión creada utilizando el paquete UUID de JavaScript . Esto es muy útil al registrar o rastrear todas las conversaciones manejadas por un agente de Dialogflow.
    • Segundo
      Creamos un objeto de solicitud de datos siguiendo el formato especificado en la documentación de Dialogflow. Este objeto de solicitud contiene la sesión creada y los datos del mensaje obtenidos del cuerpo de la solicitud que se pasará al agente de Dialogflow.
    • Tercero,
      usando el detectIntentmétodo de la sesión de Dialogflow, enviamos el objeto de solicitud de forma asincrónica y esperamos la respuesta del Agente usando la sintaxis async/awaitdetectIntent de ES6 en un bloque try-catch. Si el método devuelve una excepción, podemos detectar el error y devolverlo, en lugar de bloquear toda la aplicación. En la documentación de Dialogflow se proporciona una muestra del objeto de respuesta devuelto por el Agente y se puede inspeccionar para saber cómo extraer los datos del objeto.

    Podemos hacer uso de Postman para probar la conexión de Dialogflow implementada anteriormente en la dialogflow-responseruta. Postman es una plataforma de colaboración para el desarrollo de API con funciones para probar las API creadas en las etapas de desarrollo o producción.

    Nota: Si aún no está instalada, la aplicación de escritorio Postman no es necesaria para probar una API. A partir de septiembre de 2020, el cliente web de Postman pasó a un estado de disponibilidad general (GA) y se puede utilizar directamente desde un navegador.

    Usando el cliente web Postman, podemos crear un nuevo espacio de trabajo o usar uno existente para crear una POSTsolicitud a nuestro punto final API https://localhost:5000/api/agent/text-inputy agregar datos con una clave messagey un valor de " Hola " en los parámetros de consulta.

    Al hacer clic en el botón Enviar , POSTse realizará una solicitud al servidor Express en ejecución, con una respuesta similar a la que se muestra en la imagen a continuación:

    Prueba del punto final de la API de entrada de texto mediante Postman. ( Vista previa grande )

    En la imagen de arriba, podemos ver los datos de respuesta embellecidos del agente Dialogflow a través del servidor Express. Los datos devueltos tienen el formato de acuerdo con la definición de respuesta de ejemplo proporcionada en la documentación del Webhook de Dialogflow .

     

    Manejo de entradas de voz

    De forma predeterminada, todos los agentes de Dialogflow están habilitados para procesar datos de texto y audio y también devolver una respuesta en formato de texto o audio. Sin embargo, trabajar con datos de entrada o salida de audio puede ser un poco más complejo que con datos de texto.

    Para manejar y procesar entradas de voz, comenzaremos la implementación del /voice-inputendpoint que hemos creado previamente para recibir archivos de audio y enviarlos a Dialogflow a cambio de una respuesta del Agente:

    // agentRoutes.jsimport { pipeline, Transform } from "stream";import busboy from "connect-busboy";import util from "promisfy"import Dialogflow from "@google-cloud/dialogflow"const app = express();app.use( busboy({ immediate: true, }));app.post("/voice-input", (req, res) = { const sessionClient = new Dialogflow.SessionsClient({ keyFilename: Path.join(__dirname, "./recommender-key.json"), }); const sessionPath = sessionClient.projectAgentSessionPath( process.env.PROJECT_ID, uuid() ); // transform into a promise const pump = util.promisify(pipeline); const audioRequest = { session: sessionPath, queryInput: { audioConfig: { audioEncoding: "AUDIO_ENCODING_OGG_OPUS", sampleRateHertz: "16000", languageCode: "en-US", }, singleUtterance: true, }, }; const streamData = null; const detectStream = sessionClient .streamingDetectIntent() .on("error", (error) = console.log(error)) .on("data", (data) = { streamData = data.queryResult }) .on("end", (data) = { res.status(200).send({ data : streamData.fulfillmentText }} }) detectStream.write(audioRequest); try { req.busboy.on("file", (_, file, filename) = { pump( file, new Transform({ objectMode: true, transform: (obj, _, next) = { next(null, { inputAudio: obj }); }, }), detectStream ); }); } catch (e) { console.log(`error : ${e}`); }});

    En una descripción general alta, la /voice-inputruta anterior recibe la entrada de voz de un usuario como un archivo que contiene el mensaje que se le dice al asistente de chat y lo envía al agente de Dialogflow. Para comprender mejor este proceso, podemos dividirlo en los siguientes pasos más pequeños:

    • Primero, agregamos y utilizamos connect-busboy como middleware Express para analizar los datos del formulario que se envían en la solicitud desde la aplicación web. Luego de lo cual nos autenticamos con Dialogflow usando la Clave de Servicio y creamos una sesión, de la misma manera que hicimos en la ruta anterior.
      Luego, utilizando el método promisify del módulo de utilidad integrado de Node.js , obtenemos y guardamos una promesa equivalente al método de canalización Stream para usarla más adelante para canalizar múltiples transmisiones y también realizar una limpieza una vez completadas las transmisiones.
    • A continuación, creamos un objeto de solicitud que contiene la sesión de autenticación de Dialogflow y una configuración para el archivo de audio que está a punto de enviarse a Dialogflow. El objeto de configuración de audio anidado permite al agente de Dialogflow realizar una conversión de voz a texto en el archivo de audio enviado.
    • A continuación, utilizando la sesión creada y el objeto de solicitud, detectamos la intención de un usuario a partir del archivo de audio mediante detectStreamingIntentun método que abre un nuevo flujo de datos desde el agente de Dialogflow a la aplicación backend. Los datos se enviarán en pequeños bits a través de este flujo y, utilizando el " evento " de datos del flujo legible, almacenamos los datos en streamDatauna variable para su uso posterior. Una vez cerrada la transmisión, se activa el evento " fin " y enviamos la respuesta del agente de Dialogflow almacenado en la streamDatavariable a la aplicación web.
    • Por último, utilizando el evento de flujo de archivos de connect-busboy , recibimos el flujo del archivo de audio enviado en el cuerpo de la solicitud y lo pasamos al equivalente de promesa de Pipeline que creamos anteriormente. La función de esto es canalizar la secuencia del archivo de audio que llega desde la solicitud a la secuencia de Dialogflow; canalizamos la secuencia del archivo de audio a la secuencia abierta mediante el detectStreamingIntentmétodo anterior.

    Para probar y confirmar que los pasos anteriores funcionan según lo establecido, podemos realizar una solicitud de prueba que contenga un archivo de audio en el cuerpo de la solicitud al /voice-inputpunto final utilizando Postman.

     

    Prueba del punto final de la API de entrada de voz mediante cartero con un archivo de voz grabado. ( Vista previa grande )

    El resultado de Postman anterior muestra la respuesta obtenida después de realizar una solicitud POST con los datos del formulario de un mensaje de nota de voz grabado que dice " Hola " incluido en el cuerpo de la solicitud.

    En este punto, ahora tenemos una aplicación Express.js funcional que envía y recibe datos de Dialogflow; las dos partes de este artículo están terminadas. ¿Dónde nos queda ahora integrar este Agente en una aplicación web consumiendo las API creadas aquí desde una aplicación Reactjs ?

    Integración en una aplicación web

    Para consumir nuestra API REST construida, expandiremos esta aplicación React.js existente que ya tiene una página de inicio que muestra una lista de vinos obtenidos de una API y soporte para decoradores que utilizan el complemento de decoradores de propuesta de Babel . Lo refactorizaremos un poco introduciendo Mobx para la gestión del estado y también una nueva función para recomendar un vino desde un componente de chat utilizando los puntos finales de API REST agregados desde la aplicación Express.js.

    Para comenzar, comenzamos a administrar el estado de la aplicación usando MobX mientras creamos una tienda Mobx con algunos valores observables y algunos métodos como acciones .

    // store.jsimport Axios from "axios";import { action, observable, makeObservable, configure } from "mobx";const ENDPOINT = process.env.REACT_APP_DATA_API_URL;class ApplicationStore { constructor() { makeObservable(this); } @observable isChatWindowOpen = false; @observable isLoadingChatMessages = false; @observable agentMessages = []; @action setChatWindow = (state) = { this.isChatWindowOpen = state; }; @action handleConversation = (message) = { this.isLoadingChatMessages = true; this.agentMessages.push({ userMessage: message }); Axios.post(`${ENDPOINT}/dialogflow-response`, { message: message || "Hi", }) .then((res) = { this.agentMessages.push(res.data.data[0].queryResult); this.isLoadingChatMessages = false; }) .catch((e) = { this.isLoadingChatMessages = false; console.log(e); }); };}export const store = new ApplicationStore();

    Arriba creamos una tienda para la función del componente de chat dentro de la aplicación con los siguientes valores:

     

    • isChatWindowOpen
      El valor almacenado aquí controla la visibilidad del componente de chat donde se muestran los mensajes de Dialogflow.
    • isLoadingChatMessages
      Esto se utiliza para mostrar un indicador de carga cuando se realiza una solicitud para obtener una respuesta del agente de Dialogflow.
    • agentMessages
      Esta matriz almacena todas las respuestas provenientes de las solicitudes realizadas para obtener una respuesta del agente de Dialogflow. Los datos de la matriz se muestran posteriormente en el componente.
    • handleConversation
      Este método decorado como una acción agrega datos a la agentMessagesmatriz. Primero, agrega el mensaje del usuario pasado como argumento y luego realiza una solicitud utilizando Axios a la aplicación backend para obtener una respuesta de Dialogflow. Una vez resuelta la solicitud, agrega la respuesta de la solicitud a la agentMessagesmatriz.

    Nota: En ausencia de soporte para decoradores en una aplicación, MobX proporciona makeObservable que puede usarse en el constructor de la clase de tienda de destino. Vea un ejemplo aquí .

    Con la configuración de la tienda, necesitamos envolver todo el árbol de aplicaciones con el componente de orden superior del proveedor MobX comenzando desde el componente raíz del index.jsarchivo.

    import React from "react";import { Provider } from "mobx-react";import { store } from "./state/";import Home from "./pages/home";function App() { return ( Provider ApplicationStore={store} div className="App" Home / /div /Provider );}export default App;

    Arriba envolvemos el componente raíz de la aplicación con el proveedor MobX y pasamos la tienda creada previamente como uno de los valores del proveedor. Ahora podemos proceder a leer desde la tienda dentro de los componentes conectados a la tienda.

    Crear una interfaz de chat

    Para mostrar los mensajes enviados o recibidos de las solicitudes de API, necesitamos un nuevo componente con alguna interfaz de chat que muestre los mensajes enumerados. Para hacer esto, creamos un nuevo componente para mostrar algunos mensajes codificados primero y luego mostramos los mensajes en una lista ordenada.

    // ./chatComponent.jsimport React, { useState } from "react";import { FiSend, FiX } from "react-icons/fi";import "../styles/chat-window.css";const center = { display: "flex", jusitfyContent: "center", alignItems: "center",};const ChatComponent = (props) = { const { closeChatwindow, isOpen } = props; const [Message, setMessage] = useState(""); return ( div className="chat-container" div className="chat-head" div style={{ ...center }} h5 Zara /h5 /div div style={{ ...center }} className="hover" FiX onClick={() = closeChatwindow()} / /div /div div className="chat-body" ul className="chat-window" li div className="chat-card" pHi there, welcome to our Agent/p /div /li /ul hr style={{ background: "#fff" }} / form onSubmit={(e) = {}} className="input-container" input className="input" type="text" onChange={(e) = setMessage(e.target.value)} value={Message} placeholder="Begin a conversation with our agent" / div className="send-btn-ctn" div className="hover" onClick={() = {}} FiSend style={{ transform: "rotate(50deg)" }} / /div /div 




    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Integración de un agente de Dialogflow en una aplicación React

    Integración de un agente de Dialogflow en una aplicación React

    SmashingConf Freiburg 2024 Índice 1. Configurar un agente de Dialogflow

    programar

    es

    https://pseint.es/static/images/programar-integracion-de-un-agente-de-dialogflow-en-una-aplicacion-react-1081-0.jpg

    2024-04-04

     

    Integración de un agente de Dialogflow en una aplicación React
    Integración de un agente de Dialogflow en una aplicación React

     

     

    Top 20