OAA AI Assistant Web Components

Angular Web Components для интеграции AI ассистента в любой проект.

Установка

npm install @your-org/oaa-ai-assistant

Быстрый старт

1. Добавьте скрипт в angular.json

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/@your-org/oaa-ai-assistant/bundles/web-components.js"
            ]
          }
        }
      }
    }
  }
}

2. Перезапустите dev сервер

npm start

3. Используйте компоненты в HTML

Главный компонент - AI Ассистент

<app-assistant
  title="AI Assistant"
  greeting="Привет!"
  welcomeText="Добро пожаловать"
  description="Ваш AI помощник"
  inputPlaceholder="Введите сообщение..."
  [messages]="messages"
  [isLoading]="isLoading"
  (messageSubmit)="onMessageSubmit($event)">
</app-assistant>

Другие доступные компоненты

<!-- Хедер -->
<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/:

{
  "apiUrl": "https://your-api-url.com",
  "apiTimeout": 30000,
  "environmentName": "production"
}

Доступные сервисы

Компоненты автоматически используют следующие Angular сервисы:

• ApiService - HTTP клиент для работы с бэкендом
• ChatService - Управление чатом и сообщениями
• ConfigService - Конфигурация приложения
• ToastService - Уведомления
• ConfirmationService - Модальные окна подтверждения
• VoiceRecognition - Распознавание голоса

Типы данных

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 проект

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 - Удаление разговора

Разработка

Сборка компонентов

npm run build:web-components

Публикация в NPM

cd dist/web-components
npm version patch
npm publish --access public

Лицензия

MIT