feat(assistant): updated to the newest OpenAI version (4.42.0)

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

@@ -5,14 +5,21 @@ import 'dotenv/config';
 export const assistantParams: AssistantCreateParams = {
   name: '@boldare/openai-assistant',
   instructions: `You are a chatbot assistant. Use the general knowledge to answer questions. Speak briefly and clearly.`,
-  tools: [{ type: 'code_interpreter' }, { type: 'retrieval' }],
-  model: 'gpt-4-1106-preview',
-  metadata: {},
+  tools: [{ type: 'code_interpreter' }, { type: 'file_search' }],
+  model: 'gpt-4-turbo',
+  temperature: 0.05,
 };
 
 export const assistantConfig: AssistantConfigParams = {
   id: process.env['ASSISTANT_ID'] || '',
   params: assistantParams,
   filesDir: './apps/api/src/app/knowledge',
-  files: ['33-things-to-ask-your-digital-product-development-partner.md'],
+  toolResources: {
+    fileSearch: {
+      boldare: ['33-things-to-ask-your-digital-product-development-partner.md'],
+    },
+    codeInterpreter: {
+      fileNames: [],
+    },
+  },
 };

apps/api/src/main.ts

@@ -9,7 +9,7 @@ async function bootstrap() {
   const globalPrefix = 'api';
   const config = new DocumentBuilder()
     .setTitle('@boldare/openai-assistant')
-    .setVersion('1.0.2')
+    .setVersion('1.1.0')
     .build();
   const document = SwaggerModule.createDocument(app, config);
 

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: '/',
   },
 ];

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

@@ -1,11 +1,19 @@
 <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)"
+        [isDisabled]="isDisabled"
+        [matTooltip]="!isDisabled ? 'Record audio' : ''" />
+    }
+    @if (isAttachmentEnabled) {
+      <ai-files
+        [matTooltip]="!isDisabled ? 'Add files' : ''"
+        [isDisabled]="isDisabled" />
     }
   </ai-controls>
 
-  <ai-input [isDisabled]="isDisabled" (send$)="sendMessage$.emit($event)" />
+  <ai-input
+    (send$)="!isDisabled && sendMessage$.emit($event)"
+    [isDisabled]="isDisabled" />
 </ai-card-footer>

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

@@ -1,16 +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 (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
+      mat-icon-button
+      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"

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 {

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

@@ -2,18 +2,21 @@ 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;
 

apps/spa/src/app/components/controls/control-item/control-item.component.scss

@@ -22,4 +22,9 @@
     background-color: var(--color-grey-300);
     color: var(--color-grey-900);
   }
+
+  &.is-disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 }

apps/spa/src/app/components/controls/control-item/control-item.component.ts

@@ -1,9 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'ai-control-item',
   standalone: true,
   templateUrl: './control-item.component.html',
   styleUrl: './control-item.component.scss',
 })
-export class ControlItemComponent {}
+export class ControlItemComponent {
+  @HostBinding('class.is-disabled') @Input() isDisabled = false;
+}

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

@@ -2,16 +2,17 @@
   aiFiles
   (click)="input.click()"
   (drop$)="addFiles($event)"
-  [files]="files()">
+  [files]="files()"
+  [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

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

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { AiFilesDirective } from './files.directive';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -20,6 +20,7 @@ import { ControlIconComponent } from '../control-icon/control-icon.component';
 })
 export class FilesComponent {
   @ViewChild('input') input!: HTMLInputElement;
+  @Input() isDisabled = false;
   files = toSignal(this.fileService.files$, { initialValue: [] });
 
   constructor(private readonly fileService: FilesService) {}

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

@@ -4,8 +4,7 @@
     placeholder="Aa"
     autocomplete="off"
     [(ngModel)]="content"
-    [disabled]="isDisabled"
-    (keydown.enter)="send(content)" />
+    (keydown.enter)="!isDisabled && send(content)" />
   <button
     class="input__suffix"
     mat-icon-button

apps/spa/src/app/components/controls/input/input.component.scss

@@ -5,4 +5,8 @@
 
 .input__suffix {
   margin-right: 4px;
+
+  &.mat-mdc-button-disabled {
+    opacity: 0.5;
+  }
 }

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

@@ -1,4 +1,7 @@
-<ai-control-item [ngClass]="{ 'is-active': recording }" (click)="onRecord()">
+<ai-control-item
+  (click)="onRecord()"
+  [ngClass]="{ 'is-active': recording }"
+  [isDisabled]="isDisabled">
   <ai-control-icon class="recorder__icon">mic</ai-control-icon>
   <div class="recorder__circle"></div>
 </ai-control-item>

apps/spa/src/app/components/controls/recorder/recorder.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { NgClass, NgIf } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import * as RecordRTC from 'recordrtc';
@@ -14,6 +14,7 @@ import { ControlItemComponent } from '../control-item/control-item.component';
 })
 export class RecorderComponent {
   @Output() send$ = new EventEmitter<Blob>();
+  @Input() isDisabled = false;
   record: RecordRTC.StereoAudioRecorder | null = null;
   recording = false;
   url!: string;

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;

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,

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>

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;
+  }
+}

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();
+  });
+});

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();
+    }
+  }
+}

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" />