Chat IA

Assistente de inteligencia artificial integrado como React Island com suporte a streaming de respostas token-a-token.

Extensao: src/extensions/chat-ia.css + islands/src/islands/ChatIA/

Uso

O Chat IA e uma React Island (Tier 3) que roda como componente React isolado dentro do monolito PHP. Suporta:

• Streaming de respostas via SSE/ReadableStream (token-a-token)
• Formato OpenAI (choices[0].delta.content) e formatos customizados
• Sugestoes iniciais como chips clicaveis
• Auto-scroll com botao "ir ao final"
• Retry de mensagens com erro
• Indicador de digitacao animado
• Dark mode automatico

O Chat IA requer o bundle arenito-islands.js carregado na pagina. Sem o bundle, apenas o CSS e aplicado (fallback estatico).

Exemplos

Demonstracoes interativas do componente.

Carregando exemplo...

Anatomia

Parte	Elemento	Descricao
Container	.ia-chat-island	Wrapper principal da React Island
Header	.ia-chat-header	Cabecalho com titulo e status
Status	.status-dot	Indicador verde de conexao
Messages	.ia-chat-messages	Area scrollavel de mensagens
Msg User	.msg.msg-user	Bolha de mensagem do usuario
Msg IA	.msg.msg-ia	Bolha de mensagem do assistente
Avatar	.msg-avatar	Icone do remetente
Bubble	.msg-bubble	Conteudo da mensagem
Cursor	.msg-cursor	Cursor piscante durante streaming
Typing	.typing-dots	Indicador de digitacao (3 pontos)
Suggestions	.ia-chat-suggestions	Container dos chips de sugestao
Chip	.ia-chat-suggestion	Chip de sugestao individual
Input	.ia-chat-input	Area de input com textarea e botao
Textarea	.ia-chat-textarea	Campo de texto com auto-resize
Send	.ia-chat-send	Botao circular de enviar
Scroll	.ia-chat-scroll-btn	Botao para voltar ao final

Propriedades

Propriedade	Tipo	Default	Descrição
title	string	"Assistente IA"
subtitle	string	"Online"
placeholder	string	"Digite sua mensagem..."
apiEndpoint	string	—
apiHeaders	object	{}
apiMessageField	string	"message"
apiResponseField	string	"content"
streaming	boolean	true
suggestions	SuggestionChip[]	[]
welcomeMessage	string	—
onSend	function	—
onResponse	function	—

Tipo SuggestionChip

interface SuggestionChip {
  label: string;   // Texto exibido no chip
  prompt: string;  // Texto inserido no input ao clicar
}

Codigo

Via data-attributes (auto-init)

<div data-island="chat-ia" data-props='{
  "title": "Assistente SIDASP",
  "subtitle": "Online",
  "apiEndpoint": "/api/ia/chat",
  "welcomeMessage": "Ola! Como posso ajudar?",
  "suggestions": [
    {"label": "Cadastrar produtor", "prompt": "Como cadastrar um produtor?"},
    {"label": "Emitir GTA", "prompt": "Como emitir uma GTA?"}
  ]
}'></div>
<script defer src="arenito-islands.js"></script>

Via JavaScript programatico

window.ArenitoIslands.mount(element, 'chat-ia', {
  title: 'Assistente SIDASP',
  apiEndpoint: '/api/ia/chat',
  apiHeaders: { 'Authorization': 'Bearer token' },
  streaming: true,
  welcomeMessage: 'Ola! Como posso ajudar?',
  suggestions: [
    { label: 'Cadastrar produtor', prompt: 'Como cadastrar um produtor?' }
  ],
  onSend: (msg) => console.log('Enviado:', msg),
  onResponse: (msg) => console.log('Resposta:', msg)
});

Via Factory (definicao de dominio)

ArenitoFactory.create('chat-ia', element, {
  datasource: {
    endpoint: '/api/ia/chat',
    headers: { 'Authorization': 'Bearer token' },
    streaming: true,
    messageField: 'message',
    responseField: 'content'
  },
  display: {
    title: 'Assistente SIDASP',
    subtitle: 'Online',
    welcomeMessage: 'Ola! Como posso ajudar?',
    suggestions: [
      { label: 'Cadastrar produtor', prompt: 'Como cadastrar um produtor?' }
    ]
  }
});

Streaming

O Chat IA suporta streaming de respostas em dois formatos:

SSE (Server-Sent Events)

data: {"content": "Ola"}
data: {"content": ", como"}
data: {"content": " posso"}
data: {"content": " ajudar?"}
data: [DONE]

Formato OpenAI

data: {"choices": [{"delta": {"content": "Ola"}}]}
data: {"choices": [{"delta": {"content": ", como"}}]}
data: [DONE]

Sem streaming

Se streaming: false, a resposta e esperada como JSON completo:

{ "content": "Ola, como posso ajudar?" }

O campo de resposta e configuravel via apiResponseField. Fallbacks automaticos: content → text → message → response.

Eventos Customizados

Evento	Detalhe	Descricao
arenito:chat:message-sent	{ message: string }	Disparado quando o usuario envia mensagem
arenito:chat:response-complete	{ message: string }	Disparado quando a resposta do IA finaliza

document.addEventListener('arenito:chat:message-sent', (e) => {
  console.log('Usuario perguntou:', e.detail.message);
});

document.addEventListener('arenito:chat:response-complete', (e) => {
  console.log('IA respondeu:', e.detail.message);
});

Integracao com Navbar

O CSS inclui estilos para o botao trigger (.ia-chat-btn) e dropdown (.ia-chat-dropdown) para integracao na navbar do SIDASP:

<!-- Botao na navbar -->
<button class="ia-chat-btn" onclick="toggleChat()">
  <svg class="ia-chat-icon">...</svg>
  <span class="ia-label">IA</span>
</button>

<!-- Dropdown com a Island dentro -->
<div class="ia-chat-dropdown" id="chatDropdown">
  <div data-island="chat-ia" data-props='...'></div>
</div>

<script>
function toggleChat() {
  document.getElementById('chatDropdown').classList.toggle('active');
}
</script>

Dark Mode

Elemento	Light	Dark
Header	--accent-300 (azul)	--accent-400 (azul escuro)
Messages bg	--surface-base-neutral-page-default	Invertido automaticamente
Bubble IA	Container default + borda	Invertido automaticamente
Bubble User	--accent-300	Mantido
Input	Container default	Invertido automaticamente

Versão1.1.0

Última atualização15 mar 2026

Caminhoextensions/chat-ia.css + islands/src/islands/ChatIA/