Chatbot Intersot

Un componente de chatbot para React con soporte para respuestas en texto, visualización de gráficos y tablas.

Requisitos

• React ^18.3.1 (versión específica requerida)

Instalación

npm install @juliancodina/chatbot-intersoft

Uso

import { useState } from 'react';
import { Chatbot } from '@juliancodina/chatbot-intersoft';
import '@juliancodina/chatbot-intersoft/dist/chatbot.css';

function App() {
  const historial = [
    //{ id: 1, text: 'Consulta anterior 1', value: 'Consulta anterior 1'},
    //{ id: 2, text: 'Consulta anterior 2', value: 'Consulta anterior 2'}
  ];
  const [genericas, setGenericas] = useState([]); // Exactamente igual que el historial

  const [respuesta, setRespuesta] = useState({
    respuesta: '',
    grafico: '',
    tabla: '',
    columnas: [],
  });
  const [progreso, setProgreso] = useState(0);
  const [dataTable, setDataTable] = useState([
    //{id_art:'ID articulo', _id_: 1}, {titulo_art:'Título articulo', _id_: 2,
  ]);

  function onConsulta() {
    // Tu handler
  }
  function onAyuda() {
    // Tu handler
  }

  return (
    <Chatbot
      idioma={'POR' | 'ESP'}
      historial={historial}
      genericas={genericas}
      onConsulta={onConsulta}
      reply={respuesta}
      progreso={progreso}
      onAyuda={onAyuda}
      onDataTable={dataTable}
    />
  );
}

Props

• historial: Array de objetos que contiene el historial de consultas

  • id: Identificador único para la consulta
  • text: Texto que se muestra para la consulta
  • value: Valor real de la consulta

• respuesta: Formato de respuesta de la IA que debera recibir el chatbot

  • respuesta: Respuesta html,
  • grafico: Url de la imagen del grafico,
  • tabla: Booleano para definir si se renderiza una tabla o no.
  • columnas[]: Datos sobre las columnas de la tabla.

• columnas[]: Formato de cada indice.

  • id: Titulo usado en los datos,
  • label: Titulo a renderizar en la web,
  • type: Tipo del dato. ej: 'int(11)',

Características

• Interfaz de chat basada en texto
• Soporte para gráficos y tablas en las respuestas
• Barra lateral con historial de consultas
• Capacidades de descarga, impresión y compartir para gráficos
• Diseño responsivo