feat(AI-130): added system notification when user added new files to …

…the conversation (#21)

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

@@ -4,5 +4,8 @@
 
 <div class="chat-message">
   <span markdown [data]="message.content"></span>
-  <ai-chat-audio [message]="message"></ai-chat-audio>
+
+  @if (message.role !== chatRole.System) {
+    <ai-chat-audio [message]="message"></ai-chat-audio>
+  }
 </div>

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

@@ -9,13 +9,25 @@
 
   &.is-user {
     justify-content: flex-end;
+
+    .chat-message {
+      border-bottom-left-radius: 0;
+      background: var(--color-primary-200);
+      border-bottom-right-radius: 0;
+      align-self: flex-end;
+    }
   }
 
-  &.is-user .chat-message {
-    border-bottom-left-radius: 0;
-    background: var(--color-primary-200);
-    border-bottom-right-radius: 0;
-    align-self: flex-end;
+  &.is-system {
+    justify-content: center;
+    font-size: 12px;
+
+    .chat-message {
+      background-color: var(--color-transparent);
+      color: var(--color-grey-400);
+      align-self: center;
+      text-align: center;
+    }
   }
 
   &.is-assistant .chat-message {

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

@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { Message } from '../../../modules/+chat/shared/chat.model';
+import { ChatRole, Message } from '../../../modules/+chat/shared/chat.model';
 import { MarkdownComponent } from 'ngx-markdown';
 import { ChatAudioComponent } from '../chat-audio/chat-audio.component';
 import { NgClass } from '@angular/common';
@@ -20,6 +20,7 @@ import { ChatAvatarComponent } from '../chat-avatar/chat-avatar.component';
 export class ChatMessageComponent {
   @Input() message!: Message;
   @Input() class = '';
+  chatRole = ChatRole;
 
   @HostBinding('class') get getClasses(): string {
     return `${this.class} is-${this.message?.role || 'none'}`;

apps/spa/src/app/modules/+chat/shared/chat-files.service.ts

@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 import { FilesService } from '../../../components/controls';
 import { ChatClientService } from './chat-client.service';
+import OpenAI from 'openai';
+import { OpenAiFile } from '@boldare/ai-assistant';
 
 @Injectable({ providedIn: 'root' })
 export class ChatFilesService {
@@ -10,7 +12,7 @@ export class ChatFilesService {
     private readonly filesService: FilesService,
   ) {}
 
-  async sendFiles(): Promise<string[]> {
+  async sendFiles(): Promise<OpenAiFile[]> {
     const files = this.filesService.files$.value;
 
     if (!files.length) {
@@ -20,6 +22,6 @@ export class ChatFilesService {
     const uploadedFiles = await this.chatClientService.uploadFiles({ files });
     this.filesService.clear();
 
-    return uploadedFiles?.map(file => file.id) || [];
+    return uploadedFiles || [];
   }
 }

apps/spa/src/app/modules/+chat/shared/chat.model.ts

@@ -7,6 +7,7 @@ export interface AudioResponse {
 export enum ChatRole {
   User = 'user',
   Assistant = 'assistant',
+  System = 'system',
 }
 
 export interface Message {

apps/spa/src/app/modules/+chat/shared/chat.service.ts

@@ -6,6 +6,7 @@ import { ChatClientService } from './chat-client.service';
 import { ThreadService } from './thread.service';
 import { ChatFilesService } from './chat-files.service';
 import { environment } from '../../../../environments/environment';
+import { OpenAiFile } from '@boldare/ai-assistant';
 
 @Injectable({ providedIn: 'root' })
 export class ChatService {
@@ -43,14 +44,28 @@ export class ChatService {
     this.messages$.next([...this.messages$.value, message]);
   }
 
+  addFileMessage(files: OpenAiFile[]): void {
+    if (!files?.length) {
+      return;
+    }
+
+    this.addMessage({
+      content: `The user has attached files to the message: ${files.map(file => file.filename).join(', ')}`,
+      role: ChatRole.System,
+    });
+  }
+
   async sendMessage(content: string, role = ChatRole.User): Promise<void> {
     this.isLoading$.next(true);
     this.addMessage({ content, role });
 
+    const files = await this.chatFilesService.sendFiles();
+    this.addFileMessage(files);
+
     this.chatGatewayService.sendMessage({
       content,
       threadId: this.threadService.threadId$.value,
-      file_ids: await this.chatFilesService.sendFiles(),
+      file_ids: files.map(file => file.id) || [],
     });
   }
 

apps/spa/src/styles/_settings/_colors.scss

@@ -6,6 +6,7 @@
   --color-grey-900: #2a2a2a;
   --color-grey-600: #464646;
   --color-grey-500: #656565;
+  --color-grey-400: #a1a09f;
   --color-grey-300: #e0e0e0;
   --color-grey-200: #f2f2f2;