feat(assistant): additional view and handled error message for files

sebastianmusial · sebastianmusial · commit e22b504015de · 2024-05-13T12:50:19.000+02:00
diff --git a/apps/spa/src/app/app.routes.ts b/apps/spa/src/app/app.routes.ts
@@ -6,18 +6,13 @@ export const routes: Routes = [
     children: [
       {
         path: '',
-        pathMatch: 'full',
-        redirectTo: '/chat',
-      },
-      {
-        path: 'chat',
         loadChildren: () =>
           import('./modules/+chat/chat.routes').then(m => m.routes),
       },
     ],
   },
   {
     path: '**',
-    redirectTo: '/chat',
+    redirectTo: '/',
   },
 ];
diff --git a/apps/spa/src/app/components/chat/chat-footer/chat-footer.component.html b/apps/spa/src/app/components/chat/chat-footer/chat-footer.component.html
@@ -1,21 +1,19 @@
 <ai-card-footer>
   <ai-controls>
     @if (isTranscriptionEnabled) {
-    <ai-recorder
-      (send$)="sendAudio$.emit($event)"
-      [isDisabled]="isDisabled"
-      [matTooltip]="!isDisabled ? 'Record audio' : ''"
-    />
-    } @if (isAttachmentEnabled) {
-    <ai-files
-      [matTooltip]="!isDisabled ? 'Add files' : ''"
-      [isDisabled]="isDisabled"
-    />
+      <ai-recorder
+        (send$)="sendAudio$.emit($event)"
+        [isDisabled]="isDisabled"
+        [matTooltip]="!isDisabled ? 'Record audio' : ''" />
+    }
+    @if (isAttachmentEnabled) {
+      <ai-files
+        [matTooltip]="!isDisabled ? 'Add files' : ''"
+        [isDisabled]="isDisabled" />
     }
   </ai-controls>
 
   <ai-input
     (send$)="!isDisabled && sendMessage$.emit($event)"
-    [isDisabled]="isDisabled"
-  />
+    [isDisabled]="isDisabled" />
 </ai-card-footer>
diff --git a/apps/spa/src/app/components/chat/chat-header/chat-header.component.html b/apps/spa/src/app/components/chat/chat-header/chat-header.component.html
@@ -1,25 +1,30 @@
 <header class="chat-header">
   <div class="chat-header__logo">
-    <img [src]="'/assets/ai-assistant-v2.svg'" alt="logo" class="chat-header__img" />
+    <img
+      [src]="'/assets/ai-assistant-v2.svg'"
+      alt="logo"
+      class="chat-header__img" />
   </div>
   <div class="chat-header__controls">
-    @if (isConfigEnabled) {
-    <button
-      mat-icon-button
-      matTooltip="Settings"
-      (click)="config$.emit()"
-    >
-      <mat-icon class="char-header__icon">settings</mat-icon>
-    </button>
-    } @if (isRefreshEnabled) {
     <button
       mat-icon-button
-      matTooltip="Refresh"
-      (click)="refresh$.emit()"
-      [disabled]="isResponding"
-    >
-      <mat-icon class="char-header__icon">refresh</mat-icon>
+      matTooltip="Change view"
+      (click)="changeView$.emit()">
+      <mat-icon class="char-header__icon">fullscreen</mat-icon>
     </button>
+    @if (isConfigEnabled) {
+      <button mat-icon-button matTooltip="Settings" (click)="config$.emit()">
+        <mat-icon class="char-header__icon">settings</mat-icon>
+      </button>
+    }
+    @if (isRefreshEnabled) {
+      <button
+        mat-icon-button
+        matTooltip="Refresh"
+        (click)="refresh$.emit()"
+        [disabled]="isResponding">
+        <mat-icon class="char-header__icon">refresh</mat-icon>
+      </button>
     }
     <button
       class="ai-assistant-toggle"
diff --git a/apps/spa/src/app/components/chat/chat-header/chat-header.component.scss b/apps/spa/src/app/components/chat/chat-header/chat-header.component.scss
@@ -23,7 +23,7 @@
 .chat-header__img {
   display: block;
   max-height: 100px;
-  height: 18px;
+  height: 16px;
 }
 
 .char-header__icon {
diff --git a/apps/spa/src/app/components/chat/chat-header/chat-header.component.ts b/apps/spa/src/app/components/chat/chat-header/chat-header.component.ts
@@ -2,18 +2,20 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { MatIconButton } from '@angular/material/button';
 import { MatTooltip } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'ai-chat-header',
   standalone: true,
-  imports: [MatIcon, MatIconButton, MatTooltip],
+  imports: [MatIcon, MatIconButton, MatTooltip, RouterLink],
   templateUrl: './chat-header.component.html',
   styleUrl: './chat-header.component.scss',
 })
 export class ChatHeaderComponent {
   @Output() close$ = new EventEmitter();
   @Output() refresh$ = new EventEmitter();
   @Output() config$ = new EventEmitter();
+  @Output() changeView$ = new EventEmitter();
   @Input() isResponding = false;
   @Input() isRefreshEnabled = true;
   @Input() isConfigEnabled = true;
diff --git a/apps/spa/src/app/components/controls/files/files.component.html b/apps/spa/src/app/components/controls/files/files.component.html
@@ -3,17 +3,16 @@
   (click)="input.click()"
   (drop$)="addFiles($event)"
   [files]="files()"
-  [isDisabled]="isDisabled"
->
+  [isDisabled]="isDisabled">
   <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 class="files__counter" (click)="clear($event)">
+      <span class="files__number">
+        {{ files().length }}
+      </span>
+      <mat-icon class="files__clear"> close </mat-icon>
     </span>
-    <mat-icon class="files__clear"> close </mat-icon>
-  </span>
   }
 
   <input
diff --git a/apps/spa/src/app/components/controls/recorder/recorder.component.html b/apps/spa/src/app/components/controls/recorder/recorder.component.html
@@ -1,8 +1,7 @@
 <ai-control-item
   (click)="onRecord()"
   [ngClass]="{ 'is-active': recording }"
-  [isDisabled]="isDisabled"
->
+  [isDisabled]="isDisabled">
   <ai-control-icon class="recorder__icon">mic</ai-control-icon>
   <div class="recorder__circle"></div>
 </ai-control-item>
diff --git a/apps/spa/src/app/components/spinner/spinner.component.scss b/apps/spa/src/app/components/spinner/spinner.component.scss
@@ -14,6 +14,7 @@
   opacity: 0;
   transition: ease-out opacity 0.3s;
   pointer-events: none;
+  border-radius: var(--border-radius-medium);
 
   &.is-active {
     opacity: 1;
diff --git a/apps/spa/src/app/modules/+chat/chat.routes.ts b/apps/spa/src/app/modules/+chat/chat.routes.ts
@@ -13,6 +13,13 @@ export const routes: Routes = [
             mod => mod.ChatHomeComponent,
           ),
       },
+      {
+        path: 'chat',
+        loadComponent: () =>
+          import('./containers/chat-cloud/chat-cloud.component').then(
+            mod => mod.ChatCloudComponent,
+          ),
+      },
       {
         path: 'integration',
         loadComponent: () =>
@@ -23,7 +30,7 @@ export const routes: Routes = [
     ],
   },
   {
-    path: 'iframe',
+    path: 'chat/iframe',
     loadComponent: () =>
       import('./containers/chat-iframe/chat-iframe.component').then(
         mod => mod.ChatIframeComponent,
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-cloud/chat-cloud.component.html b/apps/spa/src/app/modules/+chat/containers/chat-cloud/chat-cloud.component.html
@@ -0,0 +1,11 @@
+<section class="chat-home__examples">
+  The following are some examples of what you can do with the demo:
+
+  <ul class="chat-home__list">
+    <li>Speak about the weather (eg. What's the weather in London?)</li>
+    <li>
+      Speak about the exchange rate (eg. What's the exchange rate for USD?)
+    </li>
+    <li>Speak about the Pokemon (eg. Show me the stats of Pikachu)</li>
+  </ul>
+</section>
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-cloud/chat-cloud.component.scss b/apps/spa/src/app/modules/+chat/containers/chat-cloud/chat-cloud.component.scss
@@ -0,0 +1,25 @@
+:host {
+  max-width: 600px;
+  margin-top: 10px;
+  color: var(--color-grey-600);
+  font-size: 15px;
+  letter-spacing: 0.03em;
+  text-align: center;
+  line-height: 1.6;
+  font-weight: 300;
+}
+
+.chat-home__examples {
+  margin-top: 10px;
+  font-size: 15px;
+  text-align: left;
+}
+
+.chat-home__list {
+  text-align: left;
+  margin-left: 12px;
+
+  > li {
+    padding-left: 8px;
+  }
+}
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-cloud/chat-cloud.component.spec.ts b/apps/spa/src/app/modules/+chat/containers/chat-cloud/chat-cloud.component.spec.ts
@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatCloudComponent } from './chat-cloud.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MarkdownModule } from 'ngx-markdown';
+
+describe('ChatHomeComponent', () => {
+  let component: ChatCloudComponent;
+  let fixture: ComponentFixture<ChatCloudComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        ChatCloudComponent,
+        HttpClientTestingModule,
+        MarkdownModule.forRoot(),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChatCloudComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-cloud/chat-cloud.component.ts b/apps/spa/src/app/modules/+chat/containers/chat-cloud/chat-cloud.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { ChatService } from '../../shared/chat.service';
+import { environment } from '../../../../../environments/environment';
+import { AssistantIframe } from '@boldare/ai-embedded';
+
+@Component({
+  selector: 'ai-chat-home',
+  standalone: true,
+  templateUrl: './chat-cloud.component.html',
+  styleUrl: './chat-cloud.component.scss',
+})
+export class ChatCloudComponent {
+  constructor(private readonly chatService: ChatService) {
+    if (environment.env === 'prod') {
+      this.chatService.loadScript();
+    } else {
+      new AssistantIframe().init();
+    }
+  }
+}
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.html b/apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.html
@@ -1,16 +1 @@
-<section>
-  A NestJS library for building efficient, scalable, and quick solutions based
-  on the OpenAI Assistant API (chatbots) 🤖 🚀
-</section>
-
-<section class="chat-home__examples">
-  The following are some examples of what you can do with the demo:
-
-  <ul class="chat-home__list">
-    <li>Speak about the weather (eg. What's the weather in London?)</li>
-    <li>
-      Speak about the exchange rate (eg. What's the exchange rate for USD?)
-    </li>
-    <li>Speak about the Pokemon (eg. Show me the stats of Pikachu)</li>
-  </ul>
-</section>
+<ai-chat-iframe class="chat-home__iframe" />
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.scss b/apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.scss
@@ -1,25 +1,14 @@
 :host {
-  max-width: 600px;
-  margin-top: 40px;
-  color: var(--color-grey-600);
-  font-size: 18px;
-  letter-spacing: 0.03em;
-  text-align: center;
-  line-height: 1.6;
-  font-weight: 300;
+  display: block;
+  position: relative;
+  max-width: 800px;
+  width: 100%;
+  font-size: 14px;
+  z-index: 1;
 }
 
-.chat-home__examples {
-  margin-top: 40px;
-  font-size: 15px;
-  text-align: left;
-}
-
-.chat-home__list {
-  text-align: left;
-  margin-left: 12px;
-
-  > li {
-    padding-left: 8px;
-  }
+.chat-home__iframe {
+  display: block;
+  height: auto;
+  max-height: inherit;
 }
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.spec.ts b/apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChatHomeComponent } from './chat-home.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MarkdownModule } from 'ngx-markdown';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ChatHomeComponent', () => {
   let component: ChatHomeComponent;
@@ -13,6 +14,7 @@ describe('ChatHomeComponent', () => {
       imports: [
         ChatHomeComponent,
         HttpClientTestingModule,
+        BrowserAnimationsModule,
         MarkdownModule.forRoot(),
       ],
     }).compileComponents();
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.ts b/apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { ChatIframeComponent } from '../chat-iframe/chat-iframe.component';
 
 @Component({
   selector: 'ai-chat-home',
   standalone: true,
   templateUrl: './chat-home.component.html',
   styleUrl: './chat-home.component.scss',
+  imports: [ChatIframeComponent],
 })
 export class ChatHomeComponent {}
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.html b/apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.html
@@ -5,7 +5,8 @@
     [isResponding]="isResponding()"
     (refresh$)="chatService.refresh()"
     (close$)="chatService.toggle()"
-    (config$)="chatService.clear()"></ai-chat-header>
+    (config$)="chatService.clear()"
+    (changeView$)="chatService.changeView()"></ai-chat-header>
 
   <ai-spinner [isActive]="isLoading()" />
   @if (isConfigEnabled && !threadId()) {
diff --git a/apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.scss b/apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.scss
@@ -4,6 +4,13 @@
   max-height: 600px;
   background-color: var(--color-white);
   border-radius: var(--border-radius-medium);
+
+  &.chat-home__iframe .chat__content,
+  &.chat-home__iframe ::ng-deep .messages {
+    min-height: 280px;
+    height: calc(100vh - 350px);
+    overflow: auto;
+  }
 }
 
 .chat {
diff --git a/apps/spa/src/app/modules/+chat/containers/chat/chat.component.html b/apps/spa/src/app/modules/+chat/containers/chat/chat.component.html
diff --git a/apps/spa/src/app/modules/+chat/containers/chat/chat.component.scss b/apps/spa/src/app/modules/+chat/containers/chat/chat.component.scss
diff --git a/apps/spa/src/app/modules/+chat/containers/chat/chat.component.ts b/apps/spa/src/app/modules/+chat/containers/chat/chat.component.ts
diff --git a/apps/spa/src/app/modules/+chat/shared/chat.service.ts b/apps/spa/src/app/modules/+chat/shared/chat.service.ts
diff --git a/apps/spa/src/index.html b/apps/spa/src/index.html
diff --git a/apps/spa/src/styles/_settings/_colors.scss b/apps/spa/src/styles/_settings/_colors.scss
diff --git a/apps/spa/src/styles/styles.scss b/apps/spa/src/styles/styles.scss
diff --git a/libs/openai-assistant/src/lib/assistant/assistant-files.service.ts b/libs/openai-assistant/src/lib/assistant/assistant-files.service.ts

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`.chat-header__img {`
`24`	`24`	`display: block;`
`25`	`25`	`max-height: 100px;`
`26`		`- height: 18px;`
	`26`	`+ height: 16px;`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.char-header__icon {`