npm package: @seidor/ngx-chatix
Description: Componente Angular standalone para chat inteligente con soporte de markdown, audio y feedback.
Author: Cristian González
Latest version: 1.0.4

# 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

```bash
npm install @seidor/ngx-chatix
```

o usando yarn:

```bash
yarn add @seidor/ngx-chatix
```

## Configuración

### 1. Importar el proveedor en tu aplicación

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

```typescript
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

```html
<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

```typescript
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:

```css
: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**.*