@desenv/react-va

@desenv/react-va é uma biblioteca de componentes React para criar um widget de chat com assistente virtual. Este pacote oferece um componente fácil de usar que integra uma janela de chat com temas personalizáveis, como tema escuro e tema claro.

Instalação

Você pode instalar o pacote via npm ou yarn:

Via npm:

npm install @desenv/react-va

Via yarn:

yarn add @desenv/react-va

Uso

Aqui está um exemplo básico de como usar o componente ReactVA. O widget de chat pode ser facilmente integrado em sua aplicação com opções de personalização tanto para o tema escuro quanto para o tema claro.

Exemplo Básico

import React from 'react';
import ReactDOM from 'react-dom/client';
import ReactVA from '@desenv/react-va';

const darkThemeStyles = {
  backgroundHeader: '#333', // Cor de fundo do cabeçalho no tema escuro
  background: '#222', // Cor de fundo do corpo no tema escuro
  userMessageBackground: '#444', // Cor de fundo das mensagens do usuário no tema escuro
  assistantMessageBackground: '#555', // Cor de fundo das mensagens do assistente no tema escuro
  textColor: '#fff', // Cor do texto no tema escuro
};

const lightThemeStyles = {
  backgroundHeader: '#fff', // Cor de fundo do cabeçalho no tema claro
  background: '#f7f7f7', // Cor de fundo do corpo no tema claro
  userMessageBackground: '#e0e0e0', // Cor de fundo das mensagens do usuário no tema claro
  assistantMessageBackground: '#fafafa', // Cor de fundo das mensagens do assistente no tema claro
  textColor: '#333', // Cor do texto no tema claro
};

const floatButtonStyles = {
  backgroundColor: 'red', // Cor do botão flutuante
  bottom: '20px', // Posição do botão a partir da parte inferior
  right: '20px', // Posição do botão a partir da parte direita
  padding: '10px', // Espaçamento dentro do botão
};

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <ReactVA
      api_key='8b6bd58f-9d3a-497c-8176-f334827f1d68' 
      theme="dark" 
      darkThemeStyles={darkThemeStyles} 
      lightThemeStyles={lightThemeStyles} 
      floatButtonStyles={floatButtonStyles}
    />
  </React.StrictMode>
);

Propriedades do Componente

O componente ReactVA aceita várias propriedades para personalização de temas e estilo do botão flutuante.

api_key (obrigatório)

Chave da API necessária para autenticação.

• Tipo: string
• Exemplo: '8b6bd58f-9d3a-497c-8176-f334827f1d68'

theme (opcional)

Define o tema padrão do widget de chat.

• Tipo: 'light' | 'dark'
• Padrão: 'dark'

<ReactVA api_key="sua-api-key" theme="dark" />

darkThemeStyles (opcional)

Estilos personalizados para o tema escuro.

• Tipo: Objeto
• Atributos:
  • backgroundHeader: Cor de fundo do cabeçalho.
  • background: Cor de fundo do corpo.
  • userMessageBackground: Cor de fundo das mensagens do usuário.
  • assistantMessageBackground: Cor de fundo das mensagens do assistente.
  • textColor: Cor do texto.

<ReactVA 
  api_key="sua-api-key"
  theme="dark"
  darkThemeStyles={{
    backgroundHeader: '#333',
    background: '#222',
    userMessageBackground: '#444',
    assistantMessageBackground: '#555',
    textColor: '#fff',
  }}
/>

lightThemeStyles (opcional)

Estilos personalizados para o tema claro.

• Tipo: Objeto
• Atributos:
  • backgroundHeader: Cor de fundo do cabeçalho.
  • background: Cor de fundo do corpo.
  • userMessageBackground: Cor de fundo das mensagens do usuário.
  • assistantMessageBackground: Cor de fundo das mensagens do assistente.
  • textColor: Cor do texto.

<ReactVA 
  api_key="sua-api-key"
  theme="light"
  lightThemeStyles={{
    backgroundHeader: '#fff',
    background: '#f7f7f7',
    userMessageBackground: '#e0e0e0',
    assistantMessageBackground: '#fafafa',
    textColor: '#333',
  }}
/>

floatButtonStyles (opcional)

Estilos personalizados para o botão flutuante que abre o chat.

• Tipo: Objeto
• Atributos:
  • backgroundColor: Cor de fundo do botão.
  • bottom: Posição do botão em relação à parte inferior da janela.
  • right: Posição do botão em relação à parte direita da janela.
  • padding: Espaçamento dentro do botão.

<ReactVA 
  api_key="sua-api-key"
  floatButtonStyles={{
    backgroundColor: 'red',
    bottom: '20px',
    right: '20px',
    padding: '10px',
  }}
/>

Exemplo Completo com Tema Escuro e Claro

Aqui está um exemplo de como alternar entre os temas escuro e claro, utilizando os estilos personalizados para cada tema:

import React, { useState } from 'react';
import ReactVA from '@desenv/react-va';

const darkThemeStyles = {
  backgroundHeader: '#333',
  background: '#222',
  userMessageBackground: '#444',
  assistantMessageBackground: '#555',
  textColor: '#fff',
};

const lightThemeStyles = {
  backgroundHeader: '#fff',
  background: '#f7f7f7',
  userMessageBackground: '#e0e0e0',
  assistantMessageBackground: '#fafafa',
  textColor: '#333',
};

const floatButtonStyles = {
  backgroundColor: 'red',
  bottom: '20px',
  right: '20px',
  padding: '10px',
};

function App() {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark');

  return (
    <div>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Alternar Tema
      </button>
      <ReactVA 
        api_key='8b6bd58f-9d3a-497c-8176-f334827f1d68' 
        theme={theme} 
        darkThemeStyles={darkThemeStyles}
        lightThemeStyles={lightThemeStyles}
        floatButtonStyles={floatButtonStyles}
      />
    </div>
  );
}

export default App;