fix(AI-130): eslint fixes and styles improvements (#22)

* feat(AI-130): added system notification when user added new files to the conversation

* fix(AI-130): eslint fixes and styles improvements

* feat(AI-130): format and unit test fixes

README.md

@@ -1,6 +1,7 @@
 # AI Assistant
 
 Install the dependencies:
+
 ```bash
 $ npm install
 ```
@@ -25,11 +26,11 @@ $ npm run start:spa
 ```
 
 Open your browser and navigate to:
-  * http://localhost:4200/ - spa
-  * http://localhost:3000/api/ - api
 
-Happy coding!
+- http://localhost:4200/ - spa
+- http://localhost:3000/api/ - api
 
+Happy coding!
 
 ## Ready to deploy?
 

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

@@ -5,10 +5,7 @@ import 'dotenv/config';
 export const assistantParams: AssistantCreateParams = {
   name: '@boldare/ai-assistant',
   instructions: `You are a chatbot assistant. Use the general knowledge to answer questions. Speak briefly and clearly.`,
-  tools: [
-    { type: 'code_interpreter' },
-    { type: 'retrieval' },
-  ],
+  tools: [{ type: 'code_interpreter' }, { type: 'retrieval' }],
   model: 'gpt-4-1106-preview',
   metadata: {},
 };

apps/spa/src/app/app.component.spec.ts

@@ -13,13 +13,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Hello, ai-spa-template'
-    );
-  });
 });

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

@@ -12,7 +12,7 @@ export const routes: Routes = [
       {
         path: 'chat',
         loadChildren: () =>
-          import('./modules/+chat/chat.routes').then((m) => m.routes),
+          import('./modules/+chat/chat.routes').then(m => m.routes),
       },
     ],
   },

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

@@ -1,12 +1,9 @@
 @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>
+<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.spec.ts

@@ -1,14 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ChatAudioComponent } from './chat-audio.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
-describe('ChatComponent', () => {
+describe('ChatAudioComponent', () => {
   let component: ChatAudioComponent;
   let fixture: ComponentFixture<ChatAudioComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ChatAudioComponent],
+      imports: [HttpClientTestingModule, ChatAudioComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ChatAudioComponent);

apps/spa/src/app/components/chat/chat-avatar/chat-avatar.component.ts

@@ -6,8 +6,6 @@ import { ChatStatusComponent } from '../chat-status/chat-status.component';
   standalone: true,
   templateUrl: './chat-avatar.component.html',
   styleUrl: './chat-avatar.component.scss',
-  imports: [
-    ChatStatusComponent,
-  ],
+  imports: [ChatStatusComponent],
 })
 export class ChatAvatarComponent {}

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

@@ -1,20 +1,11 @@
 <ai-card-footer>
-
   <ai-controls>
     @if (isTranscriptionEnabled) {
-      <ai-recorder
-        (send$)="sendAudio$.emit($event)"
-        matTooltip="Record audio"
-      />
-    }
-    @if (isAttachmentEnabled) {
-      <ai-files matTooltip="Add files" />
+    <ai-recorder (send$)="sendAudio$.emit($event)" matTooltip="Record audio" />
+    } @if (isAttachmentEnabled) {
+    <ai-files matTooltip="Add files" />
     }
   </ai-controls>
 
-  <ai-input
-    [isDisabled]="isDisabled"
-    (send$)="sendMessage$.emit($event)"
-  />
-
+  <ai-input [isDisabled]="isDisabled" (send$)="sendMessage$.emit($event)" />
 </ai-card-footer>

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

@@ -1,4 +1,4 @@
-@import "settings";
+@import 'settings';
 
 :host {
   display: block;

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

@@ -1,14 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ChatFooterComponent } from './chat-footer.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ChatFooterComponent', () => {
   let component: ChatFooterComponent;
   let fixture: ComponentFixture<ChatFooterComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ChatFooterComponent],
+      imports: [ChatFooterComponent, BrowserAnimationsModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ChatFooterComponent);

apps/spa/src/app/components/chat/chat-footer/chat-footer.component.ts

@@ -1,6 +1,11 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { CardFooterComponent } from '../../cards';
-import { ControlsComponent, FilesComponent, InputComponent, RecorderComponent } from '../../controls';
+import {
+  ControlsComponent,
+  FilesComponent,
+  InputComponent,
+  RecorderComponent,
+} from '../../controls';
 import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({

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

@@ -1,23 +1,22 @@
 <header class="chat-header">
   <div class="chat-header__logo">
-    <img
-      [src]="'/assets/boldare.svg'"
-      alt="logo"
-      class="chat-header__img"
-    />
+    <img [src]="'/assets/boldare.svg'" alt="logo" class="chat-header__img" />
   </div>
   <div class="chat-header__controls">
     @if (isConfigEnabled) {
-      <button mat-icon-button (click)="config$.emit()" matTooltip="Settings">
-        <mat-icon class="char-header__icon">settings</mat-icon>
-      </button>
-    }
-    @if (isRefreshEnabled) {
-      <button mat-icon-button (click)="refresh$.emit()" matTooltip="Refresh">
-        <mat-icon class="char-header__icon">refresh</mat-icon>
-      </button>
+    <button mat-icon-button (click)="config$.emit()" matTooltip="Settings">
+      <mat-icon class="char-header__icon">settings</mat-icon>
+    </button>
+    } @if (isRefreshEnabled) {
+    <button mat-icon-button (click)="refresh$.emit()" matTooltip="Refresh">
+      <mat-icon class="char-header__icon">refresh</mat-icon>
+    </button>
     }
-    <button class="ai-assistant-toggle" mat-icon-button (click)="close()" matTooltip="Close">
+    <button
+      class="ai-assistant-toggle"
+      mat-icon-button
+      (click)="close()"
+      matTooltip="Close">
       <mat-icon class="char-header__icon">close</mat-icon>
     </button>
   </div>

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

@@ -1,4 +1,4 @@
-@import "settings";
+@import 'settings';
 
 :host {
   position: relative;

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

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

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

@@ -1,4 +1,4 @@
-@import "settings";
+@import 'settings';
 
 :host {
   display: block;

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

@@ -1,11 +1,12 @@
-@if (message.role === 'assistant') {
-  <ai-chat-avatar></ai-chat-avatar>
+@if (message) { @if (message.role === 'assistant') {
+<ai-chat-avatar></ai-chat-avatar>
 }
 
 <div class="chat-message">
   <span markdown [data]="message.content"></span>
 
   @if (message.role !== chatRole.System) {
-    <ai-chat-audio [message]="message"></ai-chat-audio>
+  <ai-chat-audio [message]="message"></ai-chat-audio>
   }
 </div>
+}

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

@@ -1,14 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ChatMessageComponent } from './chat-message.component';
+import { MarkdownModule } from 'ngx-markdown';
 
-describe('CardContentComponent', () => {
+describe('ChatMessageComponent', () => {
   let component: ChatMessageComponent;
   let fixture: ComponentFixture<ChatMessageComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ChatMessageComponent],
+      imports: [ChatMessageComponent, MarkdownModule.forRoot()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ChatMessageComponent);

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

@@ -1,13 +1,10 @@
 <div class="messages">
   @for (message of messages; track message) {
-    <span #item>
-      <ai-chat-message [message]="message"></ai-chat-message>
-    </span>
+  <span #item>
+    <ai-chat-message [message]="message"></ai-chat-message>
+  </span>
   } @empty {
-    <ai-chat-tips
-      [tips]="tips"
-      (tipSelected$)="tipSelected$.emit($event)"
-    />
+  <ai-chat-tips [tips]="tips" (tipSelected$)="tipSelected$.emit($event)" />
   }
   <ai-chat-typing [isLoading]="isLoading"></ai-chat-typing>
 </div>

apps/spa/src/app/components/chat/chat-messages/chat-messages.component.ts

@@ -1,9 +1,11 @@
 import {
   AfterViewInit,
   Component,
-  ElementRef, EventEmitter,
+  ElementRef,
+  EventEmitter,
   Input,
-  OnChanges, Output,
+  OnChanges,
+  Output,
   QueryList,
   SimpleChanges,
   ViewChildren,

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

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

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

@@ -1,4 +1,4 @@
-@import "settings";
+@import 'settings';
 
 :host {
   padding: $size-2 $size-4;

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

@@ -1,5 +1,5 @@
 @for (tip of tips; track tip) {
- <ai-chat-tip (click)="tipSelected$.emit(tip)">
-   {{ tip }}
- </ai-chat-tip>
+<ai-chat-tip (click)="tipSelected$.emit(tip)">
+  {{ tip }}
+</ai-chat-tip>
 }

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

@@ -1,4 +1,4 @@
-@import "settings";
+@import 'settings';
 
 :host {
   display: flex;

apps/spa/src/app/components/chat/chat-tips/chat-tips.component.ts

@@ -6,9 +6,7 @@ import { ChatTipComponent } from '../chat-tip/chat-tip.component';
   standalone: true,
   templateUrl: './chat-tips.component.html',
   styleUrl: './chat-tips.component.scss',
-  imports: [
-    ChatTipComponent,
-  ],
+  imports: [ChatTipComponent],
 })
 export class ChatTipsComponent {
   @Input() tips: string[] = [];

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

@@ -1,4 +1,4 @@
-@import "settings";
+@import 'settings';
 
 :host {
   position: fixed;
@@ -39,4 +39,3 @@
     transform: scale(1);
   }
 }
-

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

@@ -1,9 +1,9 @@
 @if (isLoading) {
-  <div class="chat-typing">
-    <div class="chat-typing__dots">
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
+<div class="chat-typing">
+  <div class="chat-typing__dots">
+    <span></span>
+    <span></span>
+    <span></span>
   </div>
+</div>
 }

apps/spa/src/app/components/controls/files/files.component.html

@@ -2,26 +2,22 @@
   aiFiles
   (click)="input.click()"
   (drop$)="addFiles($event)"
-  [files]="files()"
->
+  [files]="files()">
   <ai-control-icon>attach_file</ai-control-icon>
 
   @if (files().length) {
-    <span class="files__counter" (click)="clear($event)">
-      <span class="files__number">
-        {{ files().length }}
-      </span>
-      <mat-icon class="files__clear">
-        close
-      </mat-icon>
+  <span class="files__counter" (click)="clear($event)">
+    <span class="files__number">
+      {{ files().length }}
     </span>
+    <mat-icon class="files__clear"> close </mat-icon>
+  </span>
   }
 
   <input
     class="files__input"
     type="file"
     (change)="onFileChange($event)"
     multiple
-    #input
-  >
+    #input />
 </ai-control-item>