luria

v1.0.16

Published

6 months ago

Luria - Componente React para integração de chat inteligente com IA

Downloads

0High
0Medium
0Low

pxdata-team

luria embedded chat ai react typescript intelligence assistant pxdata

Luria Embedded - Componente de Chat Inteligente

🚀 Sobre o Luria Embedded

Luria Embedded é um componente React leve e flexível que permite integrar chat inteligente com IA em qualquer aplicação web. Desenvolvido pela PXData, oferece uma experiência de conversação natural e personalizável.

✨ Características Principais

🤖 Chat Inteligente: IA conversacional com contexto e memória
🎨 Totalmente Customizável: Design adaptável ao seu projeto
🔒 Autenticação Integrada: Sistema de login e refresh token automático
🌐 Multi-idioma: Suporte para português, inglês e espanhol
⚡ Performance Otimizada: Bundle otimizado e carregamento rápido
📱 Responsivo: Funciona perfeitamente em desktop e mobile
🔌 Fácil Integração: Instalação simples via npm ou CDN

📦 Instalação

Via NPM

npm install luria

Via CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luria@latest/dist/embedded/luria.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/luria@latest/dist/embedded/luria.umd.js"></script>

🚀 Uso Rápido

React

import { LuriaEmbedded } from 'luria';

function App() {
  return (
    <div>
      <h1>Minha Aplicação</h1>
      <LuriaEmbedded 
        apiUrl="https://api.luria.ai"
        theme="light"
        language="pt-BR"
      />
    </div>
  );
}

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luria@latest/dist/embedded/luria.css">
</head>
<body>
  <div id="luria-chat"></div>
  
  <script src="https://cdn.jsdelivr.net/npm/luria@latest/dist/embedded/luria.umd.js"></script>
  <script>
    const { LuriaEmbedded } = window.LuriaEmbedded;
    
    ReactDOM.render(
      React.createElement(LuriaEmbedded, {
        apiUrl: 'https://api.luria.ai',
        theme: 'light',
        language: 'pt-BR'
      }),
      document.getElementById('luria-chat')
    );
  </script>
</body>
</html>

⚙️ Configuração

Props Disponíveis

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | apiUrl | string | - | URL da API do Luria (obrigatório) | | theme | 'light' | 'dark' | 'light' | Tema do componente | | language | 'pt-BR' | 'en' | 'es' | 'pt-BR' | Idioma da interface | | position | 'bottom-right' | 'bottom-left' | 'bottom-right' | Posição do chat | | initialMessage | string | - | Mensagem inicial | | onMessage | function | - | Callback para novas mensagens | | onError | function | - | Callback para erros |

Exemplo Completo

import { LuriaEmbedded } from 'luria';

function App() {
  const handleMessage = (message) => {
    console.log('Nova mensagem:', message);
  };

  const handleError = (error) => {
    console.error('Erro no chat:', error);
  };

  return (
    <LuriaEmbedded 
      apiUrl="https://api.luria.ai"
      theme="dark"
      language="en"
      position="bottom-left"
      initialMessage="Olá! Como posso ajudar?"
      onMessage={handleMessage}
      onError={handleError}
    />
  );
}

🎨 Personalização

CSS Customizado

/* Personalizar cores */
.luria-embedded {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #ffffff;
  --text-color: #333333;
}

/* Personalizar tamanho */
.luria-chat-container {
  width: 400px;
  height: 600px;
}

Temas

O componente suporta temas claro e escuro, e pode ser facilmente customizado através de CSS variables.

🔒 Autenticação

O componente gerencia automaticamente a autenticação e refresh de tokens. Para usar:

Configure a apiUrl correta
O componente fará login automático ou redirecionará para login
Tokens são gerenciados automaticamente

📱 Responsividade

O componente é totalmente responsivo e se adapta automaticamente a diferentes tamanhos de tela:

Desktop: Chat em janela flutuante
Mobile: Chat em tela cheia
Tablet: Layout adaptativo

🚀 Performance

Bundle otimizado: Apenas 4.2MB (1.3MB gzipped)
Tree shaking: Apenas código necessário incluído
Lazy loading: Componentes carregados sob demanda
Caching: Assets otimizados para cache

🔧 Desenvolvimento

Instalação Local

git clone https://github.com/pxcreativelab/luria-embedded.git
cd luria-embedded
npm install
npm run dev

Build

npm run build:embedded

Scripts Disponíveis

npm run dev              # Desenvolvimento
npm run build:embedded   # Build do componente
npm run lint             # Linting
npm run type-check       # Verificação de tipos

📚 Exemplos

Veja exemplos práticos na pasta examples/:

🤝 Suporte

Documentação: docs.luria.ai
Issues: GitHub Issues
Email: [email protected]

📄 Licença

MIT License - veja o arquivo LICENSE para detalhes.

🏢 Sobre a PXData

PXData é uma empresa especializada em inteligência artificial e inteligência competitiva. A Luria Embedded é parte do ecossistema Luria, nossa plataforma completa de IA conversacional.