rm-copilot-chat

Widget de chat com IA para Angular. Exibe um botão flutuante (FAB) arrastável que abre um painel de conversa conectado à API do RM Copilot via streaming.

Requisitos

• Angular 21+
• @angular/common, @angular/core, @angular/forms

Instalação

npm install rm-copilot-chat

Configuração

1. Importar o módulo

Em um NgModule:

import { RmCopilotModule } from 'rm-copilot-chat';

@NgModule({
  imports: [RmCopilotModule],
})
export class AppModule {}

Em um componente standalone:

import { RmCopilotModule } from 'rm-copilot-chat';

@Component({
  standalone: true,
  imports: [RmCopilotModule],
})
export class AppComponent {}

2. Usar o componente no template

<rm-copilot [config]="copilotConfig" />

3. Definir a configuração no componente

import { RmCopilotConfig } from 'rm-copilot-chat';

@Component({ ... })
export class AppComponent {
  copilotConfig: RmCopilotConfig = {
    baseUrl: 'https://meu-erp.dominio.com',
    agentKey: 'meu-agente',
    user: 'joao.silva',
  };
}

Interface RmCopilotConfig

| Propriedade | Tipo | Obrigatório | Descrição | |-------------------|-----------------------------|:-----------:|--------------------------------------------------------------| | baseUrl | string | ✅ | URL base da API (ex: https://meu-erp.dominio.com) | | agentKey | string | ✅ | Chave do agente de IA configurado no back-end | | user | string | ✅ | Identificador do usuário logado | | context | Record<string, unknown> | ❌ | Contexto adicional enviado junto a cada mensagem | | temperature | number | ❌ | Temperatura do modelo (0–2). Padrão: 0.2 | | maxOutputTokens | number | ❌ | Máximo de tokens na resposta. Padrão: 500 | | typeAI | string | ❌ | Tipo de modelo de IA (ex: 'GPT4_o_ha') | | projectKey | string | ❌ | Chave do projeto | | authToken | RmCopilotAuthToken | ❌ | Token OAuth/JWT para o header Authorization |

Interface RmCopilotAuthToken

interface RmCopilotAuthToken {
  access_token: string;
  token_type?: string; // Padrão: 'Bearer'
}

Exemplos

Configuração mínima

copilotConfig: RmCopilotConfig = {
  baseUrl: 'https://meu-erp.dominio.com',
  agentKey: 'financeiro',
  user: 'joao.silva',
};

Com autenticação JWT

copilotConfig: RmCopilotConfig = {
  baseUrl: 'https://meu-erp.dominio.com',
  agentKey: 'financeiro',
  user: 'joao.silva',
  authToken: {
    access_token: 'eyJhbGciOiJSUzI1NiIs...',
    token_type: 'Bearer',
  },
};

Com contexto e parâmetros do modelo

copilotConfig: RmCopilotConfig = {
  baseUrl: 'https://meu-erp.dominio.com',
  agentKey: 'rh',
  user: 'maria.souza',
  temperature: 0.5,
  maxOutputTokens: 1000,
  typeAI: 'GPT4_o_ha',
  context: {
    empresa: '001',
    filial: '01',
    perfil: 'gerente',
  },
};

Trocar de agente dinamicamente

Ao alterar agentKey dentro de config, o componente reinicia automaticamente a sessão:

mudarAgente(novaChave: string) {
  this.copilotConfig = { ...this.copilotConfig, agentKey: novaChave };
}

Comportamento do widget

• FAB arrastável — o botão flutuante pode ser reposicionado arrastando-o pela tela.
• Painel redimensionável — o painel de chat pode ter seu tamanho ajustado pelo canto superior esquerdo.
• Streaming de respostas — as respostas do agente aparecem progressivamente, token a token.
• Histórico de sessão — a sessão é preservada via localStorage e restaurada ao reabrir o painel.
• Aprovação de ações — quando o agente solicita aprovação para executar uma função, o usuário recebe um prompt de confirmação antes do processamento continuar.
• Suporte a gráficos — o painel renderiza gráficos Chart.js e diagramas Mermaid quando as bibliotecas estiverem disponíveis globalmente.

API pública exportada

export { RmCopilotModule }      // NgModule da biblioteca
export { RmCopilotComponent }   // Componente <rm-copilot>
export { RmCopilotService }     // Serviço de comunicação com a API
export { RmCopilotConfig }      // Interface de configuração
export { RmCopilotAuthToken }   // Interface do token de autenticação
export { ChatMessage }          // Interface de mensagem exibida no chat
export { ChatHistoryItem }      // Interface de item do histórico da API
export { ChatHistoryMessage }   // Interface de mensagem normalizada do histórico
export { PendingFunction }      // Interface de função pendente de aprovação

Building

To build the library, run:

ng build rm-copilot-chat

This command will compile your project, and the build artifacts will be placed in the dist/ directory.

Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the dist directory:

   cd dist/rm-copilot-chat

2. Run the npm publish command to publish your library to the npm registry:

   npm publish

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.