# @m6d/cortex-client

Angular AI chat UI library. Provides a self-contained chat widget with streaming messages, tool call visualization, file capture, syntax highlighting, and i18n support.

## Usage

```ts
import { CortexChatWidgetComponent, CortexClientConfig } from '@m6d/cortex-client';

@Component({
  imports: [CortexChatWidgetComponent],
  template: `<cortex-chat-widget [config]="config" />`,
})
export class MyComponent {
  protected readonly config: CortexClientConfig = {
    locale: signal('en'),
    transport: {
      baseUrl: '/api/agents/assistant',
      getHeaders: () => ({ Authorization: `Bearer ${token}` }),
    },
    wsUrl: 'ws://localhost:3331/api/ws',
  };
}
```

No root-level providers needed — each widget instance is fully self-contained. You can render multiple widgets with different configs on the same page.

### Configuration

| Property               | Type                            | Description                                             |
| ---------------------- | ------------------------------- | ------------------------------------------------------- |
| `locale`               | `Signal<string>`                | Active locale (`"en"`, `"ar"`)                          |
| `transport.baseUrl`    | `string \| Signal<string>`      | Agent API base URL                                      |
| `transport.getHeaders` | `() => Record<string, string>`  | Request headers provider                                |
| `wsUrl`                | `string`                        | WebSocket URL for real-time events (optional)           |
| `theme`                | `CortexClientTheme`             | Custom colors and styling (optional)                    |
| `showDebugButton`      | `boolean`                       | Show/hide the debug toggle button (default: `false`)    |
| `toolComponents`       | `Record<string, Type<unknown>>` | Custom Angular components for tool rendering (optional) |
| `onToolCall`           | `(toolCall) => unknown`         | Client-side tool call handler (optional)                |

`transport.getHeaders` can return any request headers needed by the host app. WebSocket auth continues to derive the `token` query param from a bearer `Authorization` header when present.

## Requirements

- Angular >= 21.2.0