feat(AI-141): code refactor, TTS and STT support, attachment features…

… and iframe (#13)

* feat(AI-95): voice assistant features

* feat(AI-87): SPA - added smaller components

* feat(AI-87): changed paths for uploaded files

* feat(AI-87): added heroku configuration

* feat(AI-87): added heroku configuration

* Heroku update

* Purge cache

* feat(AI-110): working on the Blobs instead of saved files and extended chat configuration

* feat(AI-129): upload files to the assistant message

* feat: library refactor

* feat(AI-141): SPA refactor and styles improvements

* feat(AI-141): SPA - styles improvements

* feat(AI-141): displaying chatbot as an iframe element

* feat(AI-141): removed wrong part of code

* feat(AI-141): added iframe scripts

* feat(AI-141): renamed modules

.github/workflows/main.yml

@@ -15,4 +15,4 @@ jobs:
         with:
           heroku_api_key: ${{secrets.HEROKU_API_KEY}}
           heroku_app_name: ${{secrets.HEROKU_APP_NAME}}
-          heroku_email: ${{secrets.HEROKU_EMAIL}
+          heroku_email: ${{secrets.HEROKU_EMAIL}}

.gitignore

@@ -44,3 +44,4 @@ Thumbs.db
 .env
 .env.*
 !.env.dist
+/apps/spa/src/assets/uploads

README.md

@@ -1,4 +1,4 @@
-# Assistant AI
+# AI Assistant
 
 Install the dependencies:
 ```bash

apps/api/src/app/chat/chat.config.ts

@@ -1,21 +1,18 @@
-import { registerAs } from '@nestjs/config';
 import { AssistantCreateParams } from 'openai/resources/beta';
-import { AssistantConfig } from '@boldare/assistant-ai';
+import { AssistantConfigParams } from '@boldare/ai-assistant';
+import 'dotenv/config';
 
 export const assistantParams: AssistantCreateParams = {
   name: '@boldare/assistant-ai',
-  instructions: `You are a chatbot assistant.`,
-  tools: [{ type: 'retrieval' }],
-  model: 'gpt-3.5-turbo-1106',
+  instructions: `You are a chatbot assistant. Use the general knowledge to answer questions. Speak briefly and clearly.`,
+  tools: [],
+  model: 'gpt-3.5-turbo',
   metadata: {},
 };
 
-export const chatConfig = registerAs(
-  'assistant',
-  (): AssistantConfig => ({
-    id: process.env.ASSISTANT_ID || '',
-    params: assistantParams,
-    filesDir: './apps/api/src/app/knowledge',
-    files: [],
-  }),
-);
+export const assistantConfig: AssistantConfigParams = {
+  id: process.env.ASSISTANT_ID || '',
+  params: assistantParams,
+  filesDir: './apps/api/src/app/knowledge',
+  files: [],
+};

apps/api/src/app/chat/chat.module.ts

@@ -1,19 +1,8 @@
 import { Module } from '@nestjs/common';
-import { ConfigModule } from '@nestjs/config';
-import { ChatController } from './chat.controller';
-import { ChatService } from './chat.service';
-import { chatConfig } from './chat.config';
-import { AgentsModule } from './agents/agents.module';
-import { ChatGateway } from './chat.gateway';
-import { AssistantModule } from '@boldare/assistant-ai';
+import { AssistantModule } from '@boldare/ai-assistant';
+import { assistantConfig } from './chat.config';
 
 @Module({
-  imports: [
-    ConfigModule.forRoot({ load: [chatConfig] }),
-    AssistantModule.forRoot(chatConfig()),
-    AgentsModule,
-  ],
-  controllers: [ChatController],
-  providers: [ChatService, ChatGateway],
+  imports: [AssistantModule.forRoot(assistantConfig)],
 })
 export class ChatModule {}

apps/spa/project.json

@@ -19,9 +19,13 @@
         "assets": ["apps/spa/src/assets"],
         "styles": [
           "@angular/material/prebuilt-themes/indigo-pink.css",
-          "apps/spa/src/styles.scss"
+          "apps/spa/src/styles/styles.scss"
         ],
-        "scripts": []
+        "stylePreprocessorOptions": {
+          "includePaths": ["apps/spa/src/styles"]
+        },
+        "scripts": [],
+        "allowedCommonJsDependencies": ["recordrtc"]
       },
       "configurations": {
         "production": {

apps/spa/src/app/app.routes.ts

@@ -1,4 +1,5 @@
 import { Routes } from '@angular/router';
+
 export const routes: Routes = [
   {
     path: '',
@@ -11,7 +12,7 @@ export const routes: Routes = [
       {
         path: 'chat',
         loadChildren: () =>
-          import('./modules/+chat/chat.routes').then((mod) => mod.routes),
+          import('./modules/+chat/chat.routes').then((m) => m.routes),
       },
     ],
   },

apps/spa/src/app/components/cards/card-footer/card-footer.component.html

@@ -0,0 +1 @@
+<ng-content />

apps/spa/src/app/components/cards/card-footer/card-footer.component.scss

@@ -0,0 +1,11 @@
+@import 'settings';
+
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $size-2;
+  min-height: 72px;
+  padding: $size-3;
+  box-sizing: border-box;
+}

apps/spa/src/app/modules/+chat/components/message-typing/message-typing.component.spec.ts → apps/spa/src/app/components/cards/card-footer/card-footer.component.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MessageTypingComponent } from './message-typing.component';
+import { CardFooterComponent } from './card-footer.component';
 
-describe('MessageTyping', () => {
-  let component: MessageTypingComponent;
-  let fixture: ComponentFixture<MessageTypingComponent>;
+describe('CardFooterComponent', () => {
+  let component: CardFooterComponent;
+  let fixture: ComponentFixture<CardFooterComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MessageTypingComponent],
+      imports: [CardFooterComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(MessageTypingComponent);
+    fixture = TestBed.createComponent(CardFooterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

apps/spa/src/app/components/cards/card-footer/card-footer.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ai-card-footer',
+  standalone: true,
+  templateUrl: './card-footer.component.html',
+  styleUrl: './card-footer.component.scss',
+})
+export class CardFooterComponent {}

apps/spa/src/app/components/cards/card/card.component.html

@@ -0,0 +1 @@
+<ng-content />

apps/spa/src/app/components/cards/card/card.component.scss

@@ -0,0 +1,8 @@
+@import 'settings';
+
+:host {
+  width: 100%;
+  background-color: var(--color-white);
+  box-shadow: var(--shadow-default);
+  border-radius: var(--border-radius-medium);
+}

apps/spa/src/app/components/cards/card/card.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/spa/src/app/components/cards/card/card.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ai-card',
+  standalone: true,
+  templateUrl: './card.component.html',
+  styleUrl: './card.component.scss',
+})
+export class CardComponent {}

apps/spa/src/app/components/cards/index.ts

@@ -0,0 +1,3 @@
+export * from './card/card.component';
+export * from '../chat/chat-content/chat-content.component';
+export * from './card-footer/card-footer.component';

apps/spa/src/app/components/chat/chat-audio/chat-audio.component.html

@@ -0,0 +1,12 @@
+@if (isAudioEnabled) {
+  <span
+    class="chat-audio"
+    [ngClass]="'chat-audio--' + message.role"
+  >
+    @if(!isStarted) {
+      <mat-icon (click)="speech()">play_circle</mat-icon>
+    } @else {
+      <mat-icon (click)="pause()">pause_circle</mat-icon>
+    }
+  </span>
+}

apps/spa/src/app/components/chat/chat-audio/chat-audio.component.scss

@@ -0,0 +1,22 @@
+.chat-audio {
+  position: absolute;
+  top: 100%;
+  right: -8px;
+  margin-top: -16px;
+
+  mat-icon {
+    color: var(--color-grey-500);
+    transition: var(--animation-fast);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-grey-900);
+    }
+  }
+}
+
+.chat-audio--user {
+  margin-top: -16px;
+  left: -8px;
+  right: auto;
+}

apps/spa/src/app/components/chat/chat-audio/chat-audio.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatAudioComponent } from './chat-audio.component';
+
+describe('ChatComponent', () => {
+  let component: ChatAudioComponent;
+  let fixture: ComponentFixture<ChatAudioComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChatAudioComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChatAudioComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});