NgxChatix

NgxChatix es una librería de chat moderna y completa para Angular que proporciona una interfaz de usuario intuitiva con soporte para mensajes de texto, audio, imágenes y funcionalidades avanzadas como historial de conversaciones y retroalimentación de mensajes.

Características

• Interfaz moderna y responsive - diseño limpio y adaptable a diferentes dispositivos
• Mensajes de texto - soporte completo para markdown con renderizado de imágenes
• Grabación de audio - grabación y transcripción de mensajes de voz
• Text-to-Speech - reproducción de audio de los mensajes del agente
• Historial de conversaciones - gestión de múltiples hilos de conversación
• Sistema de feedback - like/dislike para mensajes del agente
• Modal de imágenes - visualización ampliada de imágenes en los mensajes
• Indicadores de estado - timeline de acciones y estados de carga
• Completamente personalizable - variables CSS para personalización completa

Versiones de Angular Soportadas

• Angular 20.x
• Angular 19.x (compatible)
• Angular 18.x (compatible)

Instalación

npm install @seidor/ngx-chatix

o usando yarn:

yarn add @seidor/ngx-chatix

Configuración

1. Importar el proveedor en tu aplicación

En tu archivo main.ts o app.config.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideChatix } from '@seidor/ngx-chatix';

bootstrapApplication(AppComponent, {
  providers: [
    provideChatix(),
    // otros providers...
  ]
});

2. Usar el componente en tu template

<ngx-chatix
  [messages]="messages"
  [threads]="threads"
  [loading]="isLoading"
  [status]="statusMessages"
  (messageSent)="onMessageSent($event)"
  (messageFeedback)="onMessageFeedback($event)"
  (threadSelectedChanged)="onThreadSelected($event)"
  (threadTitleChanged)="onThreadTitleChanged($event)"
  (threadDeleted)="onThreadDeleted($event)">
</ngx-chatix>

3. Configurar en tu componente

import { Component, signal } from '@angular/core';
import { NgxChatix, MessageModel, ThreadModel, FeedbackScoreEnum } from '@seidor/ngx-chatix';

@Component({
  selector: 'app-chat',
  imports: [NgxChatix],
  template: `
    <ngx-chatix
      [messages]="messages()"
      [threads]="threads()"
      [loading]="isLoading()"
      [status]="statusMessages()"
      (messageSent)="onMessageSent($event)"
      (messageFeedback)="onMessageFeedback($event)"
      (threadSelectedChanged)="onThreadSelected($event)"
      (threadTitleChanged)="onThreadTitleChanged($event)"
      (threadDeleted)="onThreadDeleted($event)">
    </ngx-chatix>
  `
})
export class ChatComponent {
  messages = signal<MessageModel[]>([]);
  threads = signal<ThreadModel[]>([]);
  isLoading = signal(false);
  statusMessages = signal<string[]>([]);

  onMessageSent(event: { content: string }) {
    // Manejar envío de mensaje
    console.log('Mensaje enviado:', event.content);
  }

  onMessageFeedback(event: { id: string; feedback: FeedbackScoreEnum }) {
    // Manejar feedback del mensaje
    console.log('Feedback:', event);
  }

  onThreadSelected(event: { id: string | null }) {
    // Manejar selección de hilo
    console.log('Hilo seleccionado:', event.id);
  }

  onThreadTitleChanged(event: { id: string; title: string }) {
    // Manejar cambio de título
    console.log('Título cambiado:', event);
  }

  onThreadDeleted(event: { id: string }) {
    // Manejar eliminación de hilo
    console.log('Hilo eliminado:', event.id);
  }
}

Personalización de Estilos

La librería utiliza variables CSS que puedes personalizar en tu archivo de estilos global:

:root {
  /* Colores principales */
  --primary-color: #0466c8;
  --danger-color: #ef4444;
  --success-color: #10b981;
  --primary-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Contenedor principal */
  --chat-container-bg: #ffffff;
  --chat-container-border: #e5e7eb;
  --chat-container-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

  /* Header del chat */
  --chat-header-bg: #f9fafb;
  --chat-header-border: #e5e7eb;
  --chat-header-text: #374151;

  /* Área de mensajes */
  --chat-messages-bg: #ffffff;

  /* Mensajes del agente (IA) */
  --chat-message-ai-bg: #f3f4f6;
  --chat-message-ai-text: #374151;

  /* Mensajes del usuario */
  --chat-message-user-bg: #0466c8;
  --chat-message-user-text: #ffffff;

  /* Área de input */
  --chat-input-container-bg: #f9fafb;
  --chat-input-container-border: #e5e7eb;
  --chat-input-bg: #ffffff;
  --chat-input-border: #d1d5db;
  --chat-input-focus: #0466c8;
  --chat-input-text: #374151;
  --chat-input-placeholder: #9ca3af;

  /* Botones */
  --chat-button-send-bg: #0466c8;
  --chat-button-send-hover: #0353a4;
  --chat-button-record-active: #ef4444;

  /* Dropdown */
  --chat-dropdown-bg: #ffffff;
  --chat-dropdown-border: #e5e7eb;
  --chat-dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --chat-dropdown-item-hover: #f3f4f6;

  /* Scrollbar */
  --chat-scrollbar-track: #f1f5f9;
  --chat-scrollbar-thumb: #cbd5e1;
}

/* Tema oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --chat-container-bg: #1f2937;
    --chat-container-border: #374151;
    --chat-header-bg: #111827;
    --chat-header-border: #374151;
    --chat-header-text: #f9fafb;
    --chat-messages-bg: #1f2937;
    --chat-message-ai-bg: #374151;
    --chat-message-ai-text: #f9fafb;
    --chat-input-container-bg: #111827;
    --chat-input-container-border: #374151;
    --chat-input-bg: #374151;
    --chat-input-border: #4b5563;
    --chat-input-text: #f9fafb;
    --chat-input-placeholder: #9ca3af;
    --chat-dropdown-bg: #374151;
    --chat-dropdown-border: #4b5563;
    --chat-dropdown-item-hover: #4b5563;
    --chat-scrollbar-track: #374151;
    --chat-scrollbar-thumb: #6b7280;
  }
}

Desarrollado por Cristian González de Seidor IA.