ChatUI v0.5

Interface avançada de chatbot com suporte a múltiplos provedores de IA, formatação Markdown e anexos de arquivos. Converse com modelos como GPT, Claude e Gemini e tenha controle do seu histórico.

Funcionalidades

• Suporte a Múltiplos Provedores: Integração com OpenRouter, OpenAI, Claude (Anthropic) e Google Gemini
• Formatação Markdown: Renderização completa de Markdown com syntax highlighting para código
• Anexos de Arquivos: Suporte para anexar arquivos de texto e código (txt, md, html, css, js, json, py, java, c, cpp, h, csv, xml, ts, tsx, jsx)
• Gerenciamento de Conversas: Criar, editar, duplicar e excluir conversas
• Histórico Persistente: Armazenamento local das conversas com backup/export
• Temas: Modo claro e escuro
• Interface Responsiva: Otimizada para desktop e mobile
• Acessibilidade: Suporte a navegação por teclado e leitores de tela
• Configurações Avançadas: Prompt do sistema, temperatura e outras opções

Instalação

Passos de Instalação

1. Clone o repositório:

   git clone https://github.com/gmasson/chatui.git
   cd chatui

2. Configure um servidor web:

   • Se usar XAMPP: Coloque a pasta chatui em htdocs e inicie o Apache.
   • Ou use qualquer servidor web apontando para a pasta raiz do projeto.

3. Abra no navegador:

   • Acesse http://localhost/chatui ou a sua URL (ajuste conforme sua configuração).

Configuração de API

Para usar o ChatUI, você precisa de uma chave de API de um provedor suportado:

• OpenRouter (recomendado para acesso gratuito a múltiplos modelos): Obter chave
• OpenAI: Obter chave
• Claude (Anthropic): Obter chave
• Google Gemini: Obter chave

Como Usar

1. Criar uma nova conversa:

   • Clique em "Nova conversa" na barra lateral.
   • Escolha o provedor, modelo e insira sua chave de API.
   • Configure opções avançadas se necessário (prompt do sistema, temperatura).

2. Enviar mensagens:

   • Digite sua mensagem no campo de entrada.
   • Pressione Enter ou clique no botão de envio.
   • Use Ctrl+Enter para quebra de linha.

3. Anexar arquivos:

   • Clique no ícone de clipe para anexar arquivos de texto/código.
   • Os arquivos serão incluídos no contexto da conversa.

4. Gerenciar conversas:

   • Use a barra lateral para navegar entre conversas.
   • Clique nas opções (três pontos) para editar ou excluir uma conversa.
   • Use a busca para encontrar conversas rapidamente.

5. Backup e restauração:

   • Acesse "Opções Gerais" > "Exportar backup" para salvar dados.
   • Use "Importar backup" para restaurar conversas.

Tecnologias Utilizadas

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Bibliotecas:
  • Marked - Parser Markdown
  • DOMPurify - Sanitização HTML
  • Highlight.js - Syntax highlighting
• Armazenamento: LocalStorage do navegador
• APIs: Integração com APIs de IA (OpenRouter, OpenAI, etc.)

Desenvolvimento

Para contribuir com o desenvolvimento:

1. Fork o repositório
2. Crie uma branch para sua feature (git checkout -b feature/nova-funcionalidade)
3. Commit suas mudanças (git commit -am 'Adiciona nova funcionalidade')
4. Push para a branch (git push origin feature/nova-funcionalidade)
5. Abra um Pull Request

Configuração de Desenvolvimento

• O projeto usa JavaScript puro, sem frameworks.
• Estilos seguem variáveis CSS para temas.
• Código é modular e comentado.

Problemas Conhecidos

• Dados são armazenados localmente; perda de dados pode ocorrer se o cache do navegador for limpo.
• Limitação de 30 mensagens por conversa para otimização de performance.
• Conteúdo de mensagens é truncado em 10.000 caracteres.

Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.