npm package: @mbubela/oaa-ai-assistant
Description: AI Assistant Web Components - Angular-based web components for OpenAsApp AI features
Latest version: 0.0.2

# OAA AI Assistant Web Components

Angular Web Components для интеграции AI ассистента в любой проект.

## Установка

```bash
npm install @your-org/oaa-ai-assistant
```

## Быстрый старт

### 1. Добавьте скрипт в angular.json

```json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/@your-org/oaa-ai-assistant/bundles/web-components.js"
            ]
          }
        }
      }
    }
  }
}
```

### 2. Перезапустите dev сервер

```bash
npm start
```

### 3. Используйте компоненты в HTML

#### Главный компонент - AI Ассистент

```html
<app-assistant
  title="AI Assistant"
  greeting="Привет!"
  welcomeText="Добро пожаловать"
  description="Ваш AI помощник"
  inputPlaceholder="Введите сообщение..."
  [messages]="messages"
  [isLoading]="isLoading"
  (messageSubmit)="onMessageSubmit($event)">
</app-assistant>
```

#### Другие доступные компоненты

```html
<!-- Хедер -->
<app-header
  title="My App"
  (menuClick)="onMenuClick()"
  (closeClick)="onCloseClick()">
</app-header>

<!-- Поле ввода -->
<app-input-field
  placeholder="Type a message..."
  [value]="inputValue"
  (submitMessage)="onSubmit($event)"
  (voiceClick)="onVoiceClick()">
</app-input-field>

<!-- История чата -->
<app-chat-history
  [messages]="messages">
</app-chat-history>

<!-- Сайдбар -->
<app-sidebar
  [isOpen]="sidebarOpen"
  [conversations]="conversations"
  (conversationClick)="onConversationClick($event)">
</app-sidebar>

<!-- Уведомления -->
<app-toast-container></app-toast-container>

<!-- Модальное окно подтверждения -->
<app-confirmation-modal></app-confirmation-modal>
```

## Настройка API

Компоненты используют встроенные сервисы для работы с API. По умолчанию используется `https://localhost:7592`.

Для настройки API endpoint'а создайте файл `config.json` в папке `public/`:

```json
{
  "apiUrl": "https://your-api-url.com",
  "apiTimeout": 30000,
  "environmentName": "production"
}
```

## Доступные сервисы

Компоненты автоматически используют следующие Angular сервисы:

- **ApiService** - HTTP клиент для работы с бэкендом
- **ChatService** - Управление чатом и сообщениями
- **ConfigService** - Конфигурация приложения
- **ToastService** - Уведомления
- **ConfirmationService** - Модальные окна подтверждения
- **VoiceRecognition** - Распознавание голоса

## Типы данных

```typescript
interface Message {
  id: string;
  text: string;
  sender: 'user' | 'assistant';
  timestamp: Date;
  isTyping?: boolean;
}

interface ConversationItem {
  id: string;
  title: string;
  date: string;
}

interface VoiceRecognitionStatus {
  state: 'idle' | 'listening' | 'processing' | 'error';
  transcript: string;
  interimTranscript: string;
  errorMessage?: string;
}
```

## Пример интеграции в Angular проект

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-assistant
      [messages]="messages"
      [isLoading]="isLoading"
      (messageSubmit)="onMessageSubmit($event)">
    </app-assistant>
  `
})
export class AppComponent {
  messages = [];
  isLoading = false;

  onMessageSubmit(message: string) {
    console.log('User message:', message);
    // Отправка на сервер
  }
}
```

## Совместимость

- Angular 15+
- AngularJS (через angular.json scripts)
- Любой HTML проект (через script tag)

## API Backend

Для работы с AI функциями необходим запущенный бэкенд со следующими endpoint'ами:

- `POST /conversations` - Создание нового разговора
- `GET /conversations` - Получение списка разговоров
- `GET /conversations/:id` - Получение конкретного разговора
- `POST /conversations/:id/messages` - Отправка сообщения
- `GET /conversations/:id/messages` - Получение истории сообщений
- `DELETE /conversations/:id` - Удаление разговора

## Разработка

### Сборка компонентов

```bash
npm run build:web-components
```

### Публикация в NPM

```bash
cd dist/web-components
npm version patch
npm publish --access public
```

## Лицензия

MIT