Requisitos

• Node.js (v14 o superior)
• npm o Yarn

Instalación

Para instalar minerva-plexus, puedes usar npm o Yarn.

NOTA: seguir estos pasos al pie de la letra es súmamente importante

npm install minerva-plexus

//o bien

yarn add minerva-plexus

Configuración de .npmrc

Para poder usar minerva-components-library, que viene implícito en minerva-plexus, debes crear un archivo .npmrc en la raíz de tu proyecto y agregar lo siguiente:

@building_blocks:registry=https://repo.plexus.services/api/v4/projects/2724/packages/npm/
# Token de autenticación para el registro de npm
//repo.plexus.services/api/v4/projects/2724/packages/npm/:_authToken=Xf1tnBtyUApWN7cXP1Tn

Implementación en tu Aplicación

A continuación, se muestra un ejemplo de cómo configurar minerva-plexus en una aplicación React:

import React from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import {
  AuthProvider,
  ConversationProvider,
  ChatBoard,
  Login,
  ApiConfigProvider,
  useAuth,
} from "minerva-plexus"; //estos componentes son necesarios
import "minerva-plexus/dist/style.css";

const LogoutButton: React.FC = () => {
  const { logout } = useAuth(); // función logout desde el contexto de autenticación

  const handleLogout = async () => {
    await logout(); // Llama a la función de logout
  };

  return <button onClick={handleLogout}>Logout</button>;
};

const App: React.FC = () => {

  // Estas variables se pueden obtener de un archivo .env o de otra fuente
  const apiUrl = "http://vm-cv-chatbot.westeurope.cloudapp.azure.com:8311"; // URL de la API
  const apiKey = "ai"; // API Key

  return (
    <BrowserRouter>
      <ApiConfigProvider value={{ apiUrl, apiKey }}>
        <AuthProvider>
          <ConversationProvider>
            <div style={{ padding: "20px" }}>
              <h1>Chat integrado con Minerva</h1>
              <LogoutButton />
              <Routes>
                <Route path="/login" element={<Login />} />
                <Route path="/" element={<ChatBoard theme="default" />} />
                <Route path="*" element={<Navigate to="/login" />} />
              </Routes>
            </div>
          </ConversationProvider>
        </AuthProvider>
      </ApiConfigProvider>
    </BrowserRouter>
  );
};

export default App;

## Uso Una vez que hayas configurado minerva-plexus y la API, puedes iniciar tu aplicación y empezar a utilizar las funcionalidades de chat y autenticación que ofrece.

Propiedades

| Property | Applicable to | Description | Usage | | -------------------- | :-----------: | --------------------------------------------------------------------: | --------------------------------: | | createWhenLogin | ChatBoard | Allows the feature of creating conversations after making a new login | createWhenLogin={true} | | showHeader | ChatBoard | Shows the header and conversations selector | showHeader={true} | | theme | ChatBoard | Determines the theme or agent to use in the chat suite | theme={THEME_HELPER.ONE_HELPER} | | customLogo | Login | Replaces the default logo with a custom logo component | customLogo={<CustomLogo />} | | showControlButtons | ChatBoard | Show read, clone and edit buttons | showControlButtons={false} |