ChatUI v0.7

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), Google Gemini e provedores personalizados compatíveis com a API OpenAI
• Provedor Personalizado: Conecte-se a qualquer API compatível com OpenAI informando apenas a URL do endpoint e (opcionalmente) a chave de API
• Formatação Markdown: Renderização completa de Markdown com syntax highlighting para código
• Cópia de Código: Botão "Copiar" em todos os blocos de código das respostas
• 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, renomear, editar, duplicar e excluir conversas
• Exportar Conversa: Exporte o chat ativo como .md, .txt ou .json diretamente do cabeçalho
• Histórico Persistente: Armazenamento local das conversas com backup/exportação completa
• Badge de Modelo: Exibe o provedor e modelo ativos no cabeçalho da conversa
• Temas: Modo claro e escuro
• Tamanho de Fonte: Cicle entre Normal, Grande e Pequeno nas opções gerais
• Interface Responsiva: Otimizada para desktop e mobile
• Scroll para o fim: Botão flutuante para rolar rapidamente ao final da conversa
• Contador de Caracteres: Exibe a contagem em tempo real no campo de mensagem
• Atalhos de Teclado: Ctrl+N nova conversa, / focar busca, Esc fechar modais
• Acessibilidade: Suporte a navegação por teclado e leitores de tela
• Configurações Avançadas: Prompt do sistema, temperatura e outras opções por conversa
• Mensagens de Erro Contextuais: Erros de API traduzidos com dicas de solução por provedor

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
• Personalizado: Qualquer endpoint compatível com a API OpenAI (Ollama, LM Studio, etc.)

Como Usar

1. Criar uma nova conversa:

   • Clique em "Nova conversa" na barra lateral.
   • Escolha o provedor, modelo e insira sua chave de API.
   • Para provedores personalizados, informe também a URL completa do endpoint.
   • Configure opções avançadas se necessário (prompt do sistema, temperatura).

2. Enviar mensagens:

   • Digite sua mensagem no campo de entrada.
   • Pressione Ctrl+Enter para enviar ou Enter para quebrar linha.

3. Opções da conversa ativa:

   • Use o menu (⋮) no cabeçalho para: configurar IA, renomear, exportar (.md/.txt/.json) e limpar mensagens.

4. Anexar arquivos:

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

5. Gerenciar conversas:

   • Use a barra lateral para navegar entre conversas.
   • Clique nas opções (⋮) ao lado de uma conversa para editar ou excluir.
   • Use o campo de busca ou o atalho / para filtrar rapidamente.

6. Opções gerais:

   • Acesse "Opções Gerais" na barra lateral para alternar tema, tela cheia, tamanho de fonte, importar/exportar backup e limpar tudo.

Atalhos de Teclado

Atalho	Ação
Ctrl+N	Nova conversa
/	Focar campo de busca
Ctrl+Enter	Enviar mensagem
Esc	Fechar modal aberto

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, Anthropic, Google, compatíveis com OpenAI)

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.