AgroInnova Components

Biblioteca de componentes React para aplicaciones agrícolas, con un chatbot inteligente especializado en productos agrícolas.

Identidad Visual

Paleta de Colores

La biblioteca utiliza la siguiente paleta de colores corporativos:

• Primary: #202124 - Color principal para textos y elementos principales
• Secondary: #03ff94 (con transparencia 00 para variantes) - Color de acento para destacados y elementos interactivos

Para utilizar estos colores en tu aplicación con Tailwind CSS, puedes extender tu configuración:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#202124',
        secondary: '#03ff94',
      },
    },
  },
};

Instalación

npm install agroinnova-components
# o
yarn add agroinnova-components

Uso

Chatbot de Productos Agrícolas

El componente AgriChatbot es un chatbot inteligente especializado en productos agrícolas que puede mostrar información detallada sobre productos, incluyendo imágenes, precios, descripciones y detalles técnicos.

import { AgriChatbot } from 'agroinnova-components';
import 'agroinnova-components/style.css';

function App() {
  return (
    <div className='App'>
      <h1>Mi Aplicación Agrícola</h1>
      <AgriChatbot apiKey='tu-api-key-aquí' />
    </div>
  );
}

export default App;

Propiedades

| Propiedad | Tipo | Descripción | | --------- | ------ | ----------------------------------------------------- | | apiKey | string | Clave API para autenticar las solicitudes al servicio |

Características

• Interfaz de usuario moderna y atractiva: Diseño limpio y profesional con gradientes y animaciones suaves.
• Visualización de productos: Muestra información detallada de productos con imágenes, precios y detalles técnicos.
• Mantenimiento de contexto: El chatbot mantiene el contexto de la conversación para proporcionar respuestas coherentes.
• Diseño responsivo: Se adapta a diferentes tamaños de pantalla.
• Personalizable: Fácil de integrar en cualquier aplicación React.

Ejemplo de uso

import React from 'react';
import { AgriChatbot } from 'agroinnova-components';
import 'agroinnova-components/style.css';

function App() {
  return (
    <div className='App'>
      <header>
        <h1>AgroInnova - Asistente Virtual</h1>
      </header>
      <main>
        <p>
          Bienvenido a nuestra plataforma. Utiliza el asistente virtual para
          obtener información sobre nuestros productos agrícolas.
        </p>
        <AgriChatbot apiKey='tu-api-key-aquí' />
      </main>
    </div>
  );
}

export default App;

API Endpoints

El servicio de backend proporciona los siguientes endpoints para gestionar productos y consultar eventos:

Carga de un producto

POST /chatbot/products

Headers:

• x-api-key: Clave API proporcionada por el equipo de AgroInnova

Body:

{
  "clientId": "string", // Otorgado por el equipo de AgroInnova
  "name": "string",
  "category": "string",
  "description": "string",
  "benefits": ["string"], // ej: ["Siembra simultánea", "Precisión", "Reducción de costos"]
  "usageInstructions": "string",
  "technicalDetails": "string",
  "price": number,
  "picture": "string"
}

Carga de múltiples productos

POST /chatbot/products/bulk

Headers:

• x-api-key: Clave API proporcionada por el equipo de AgroInnova

Body:

[
  {
    "clientId": "string", // Otorgado por el equipo de AgroInnova
    "name": "string",
    "category": "string",
    "description": "string",
    "benefits": ["string"], // ej: ["Siembra simultánea", "Precisión", "Reducción de costos"]
    "usageInstructions": "string",
    "technicalDetails": "string",
    "price": number,
    "picture": "string"
  }
]

Consulta de peticiones

GET /chatbot/events

Headers:

• x-api-key: Clave API proporcionada por el equipo de AgroInnova

Requisitos

• React 19.0.0 o superior
• React DOM 19.0.0 o superior

Dependencias

Este paquete utiliza las siguientes dependencias:

• React
• React DOM
• Lucide React (para iconos)
• Radix UI (para componentes de UI)

Soporte

Para soporte, por favor contactanos al correo o visita nuestra página web.

Licencia

MIT