feat: demo page with navbar

.commitlintrc.js

@@ -1,8 +1,6 @@
 module.exports = {
-  extends: [
-    '@commitlint/config-conventional',
-  ],
+  extends: ['@commitlint/config-conventional'],
   rules: {
     'header-max-length': [0, 'always', 120],
-  }
+  },
 };

README.md

@@ -195,12 +195,12 @@ export class ChatModule {}
 
 The repository includes a library with an AI assistant as well as other useful parts:
 
-| Name                    | Type          | Description                                                                                                                     |
-| ----------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `@boldare/ai-assistant` | `library`     | A NestJS library based on the OpenAI Assistant for building efficient, scalable, and quick solutions for AI assistants/chatbots |
-| `@boldare/ai-embedded`  | `library`     | The code enables embedding the chatbot on various websites through JavaScript scripts.                                          |
-| `api`                   | `application` | Example usage of the `@boldare/ai-assistant` library.                                                                           |
-| `spa`                   | `application` | Example client application (SPA) with a chatbot.                                                                                |
+| Name                    | Description                                                                                                                     | More                                                                                                                   |
+|-------------------------|---------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------|
+| `@boldare/ai-assistant` | A NestJS library based on the OpenAI Assistant for building efficient, scalable, and quick solutions for AI assistants/chatbots | [Documentation](https://github.com/boldare/ai-assistant/wiki/%F0%9F%A4%96-AI-Assistant)                                |
+| `@boldare/ai-embedded`  | The code enables embedding the chatbot on various websites through JavaScript scripts.                                          | [Documentation](https://github.com/boldare/ai-assistant/wiki/%F0%9F%96%87-Integrating-Chatbot-into-Your-Website)       | 
+| `api`                   | Example usage of the `@boldare/ai-assistant` library.                                                                           | [Documentation](https://github.com/boldare/ai-assistant/wiki/%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB-Repository)             |
+| `spa`                   | Example client application (SPA) with a chatbot.                                                                                | [Documenation](https://github.com/boldare/ai-assistant/wiki/%F0%9F%92%AC-Chatbot-%E2%80%90-Client-application)         | 
 
 ## Getting started
 

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

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

apps/spa/src/app/components/chat/chat-iframe-wrapper/chat-iframe-wrapper.component.ts

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

apps/spa/src/app/modules/+chat/chat.routes.ts

@@ -1,16 +1,32 @@
 import { Routes } from '@angular/router';
+import { ChatComponent } from './containers/chat/chat.component';
 
 export const routes: Routes = [
   {
     path: '',
-    loadComponent: () =>
-      import('./containers/chat-example/chat-example.component').then(
-        mod => mod.ChatExampleComponent,
-      ),
+    component: ChatComponent,
+    children: [
+      {
+        path: '',
+        loadComponent: () =>
+          import('./containers/chat-home/chat-home.component').then(
+            mod => mod.ChatHomeComponent,
+          ),
+      },
+      {
+        path: 'integration',
+        loadComponent: () =>
+          import(
+            './containers/chat-integration/chat-integration.component'
+          ).then(mod => mod.ChatIntegrationComponent),
+      },
+    ],
   },
   {
     path: 'iframe',
     loadComponent: () =>
-      import('./containers/chat/chat.component').then(mod => mod.ChatComponent),
+      import('./containers/chat-iframe/chat-iframe.component').then(
+        mod => mod.ChatIframeComponent,
+      ),
   },
 ];

apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.html

@@ -0,0 +1,2 @@
+A NestJS library for building efficient, scalable, and quick solutions based on
+the OpenAI Assistant API (chatbots) 🤖 🚀

apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.scss

@@ -0,0 +1,10 @@
+:host {
+  max-width: 600px;
+  margin-top: 40px;
+  color: var(--color-grey-600);
+  font-size: 18px;
+  text-align: center;
+  letter-spacing: 0.03em;
+  line-height: 1.6;
+  font-weight: 300;
+}

apps/spa/src/app/modules/+chat/containers/chat-example/chat-example.component.spec.ts → apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.spec.ts

@@ -1,23 +1,23 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ChatExampleComponent } from './chat-example.component';
+import { ChatHomeComponent } from './chat-home.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MarkdownModule } from 'ngx-markdown';
 
-describe('ChatExampleComponent', () => {
-  let component: ChatExampleComponent;
-  let fixture: ComponentFixture<ChatExampleComponent>;
+describe('ChatHomeComponent', () => {
+  let component: ChatHomeComponent;
+  let fixture: ComponentFixture<ChatHomeComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        ChatExampleComponent,
+        ChatHomeComponent,
         HttpClientTestingModule,
         MarkdownModule.forRoot(),
       ],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ChatExampleComponent);
+    fixture = TestBed.createComponent(ChatHomeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

apps/spa/src/app/modules/+chat/containers/chat-home/chat-home.component.ts

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

apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.html

@@ -0,0 +1,26 @@
+<ai-card class="chat">
+  <ai-chat-header
+    [isRefreshEnabled]="isRefreshEnabled && !!threadId()"
+    [isConfigEnabled]="isConfigEnabled && !!threadId()"
+    (refresh$)="chatService.refresh()"
+    (close$)="chatService.toggle()"
+    (config$)="chatService.clear()"></ai-chat-header>
+
+  <ai-spinner [isActive]="isLoading()" />
+  @if (isConfigEnabled && !threadId()) {
+  <ai-configuration-form class="chat__content" />
+  } @else {
+  <ai-chat-messages
+    [messages]="messages()"
+    [isTyping]="isTyping()"
+    [tips]="tips"
+    (tipSelected$)="chatService.sendMessage($event)"
+    class="chat__content" />
+  <ai-chat-footer
+    [isDisabled]="isTyping()"
+    [isTranscriptionEnabled]="isTranscriptionEnabled"
+    [isAttachmentEnabled]="isAttachmentEnabled"
+    (sendMessage$)="chatService.sendMessage($event)"
+    (sendAudio$)="chatService.sendAudio($event)" />
+  }
+</ai-card>

apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.scss

@@ -0,0 +1,16 @@
+:host {
+  display: flex;
+  height: 100vh;
+  max-height: 600px;
+  background-color: var(--color-white);
+  border-radius: var(--border-radius-medium);
+}
+
+.chat {
+  display: flex;
+  flex-direction: column;
+}
+
+.chat__content {
+  flex: 1 1 100%;
+}

apps/spa/src/app/components/chat/chat-iframe/chat-iframe.component.spec.ts → apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.spec.ts

@@ -1,14 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ChatIframeComponent } from './chat-iframe.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ChatIframeComponent', () => {
   let component: ChatIframeComponent;
   let fixture: ComponentFixture<ChatIframeComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ChatIframeComponent],
+      imports: [
+        HttpClientTestingModule,
+        BrowserAnimationsModule,
+        ChatIframeComponent,
+        RouterTestingModule,
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ChatIframeComponent);

apps/spa/src/app/modules/+chat/containers/chat-iframe/chat-iframe.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { environment } from '../../../../../environments/environment';
+import { ChatService } from '../../shared/chat.service';
+import { ThreadService } from '../../shared/thread.service';
+import { CardComponent } from '../../../../components/cards';
+import { ChatHeaderComponent } from '../../../../components/chat/chat-header/chat-header.component';
+import { ChatMessagesComponent } from '../../../../components/chat/chat-messages/chat-messages.component';
+import { ChatFooterComponent } from '../../../../components/chat/chat-footer/chat-footer.component';
+import { ConfigurationFormComponent } from '../../../+configuration/components/configuration-form/configuration-form.component';
+import { take } from 'rxjs';
+import { SpinnerComponent } from '../../../../components/spinner/spinner.component';
+
+@Component({
+  selector: 'ai-chat-iframe',
+  standalone: true,
+  imports: [
+    CardComponent,
+    ChatHeaderComponent,
+    ChatMessagesComponent,
+    ChatFooterComponent,
+    ConfigurationFormComponent,
+    SpinnerComponent,
+  ],
+  templateUrl: './chat-iframe.component.html',
+  styleUrl: './chat-iframe.component.scss',
+})
+export class ChatIframeComponent implements OnInit {
+  messages = toSignal(this.chatService.messages$, { initialValue: [] });
+  isTyping = toSignal(this.chatService.isTyping$, { initialValue: false });
+  isLoading = toSignal(this.chatService.isLoading$, { initialValue: false });
+  threadId = toSignal(this.threadService.threadId$, { initialValue: '' });
+  isTranscriptionEnabled = environment.isTranscriptionEnabled;
+  isAttachmentEnabled = environment.isAttachmentEnabled;
+  isRefreshEnabled = environment.isRefreshEnabled;
+  isConfigEnabled = environment.isConfigEnabled;
+  tips = [
+    'Hello there! 👋',
+    'Could you please tell me your name?',
+    'Hello! How can you help me?',
+    'Hello! 👋 How are you?',
+  ];
+
+  constructor(
+    private readonly threadService: ThreadService,
+    public readonly chatService: ChatService,
+  ) {}
+
+  ngOnInit() {
+    if (!this.isConfigEnabled && !this.threadService.threadId$.value) {
+      this.threadService.start().pipe(take(1)).subscribe();
+    }
+  }
+}

apps/spa/src/app/modules/+chat/containers/chat-integration/chat-integration.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatIntegrationComponent } from './chat-integration.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MarkdownModule } from 'ngx-markdown';
+
+describe('ChatIntegrationComponent', () => {
+  let component: ChatIntegrationComponent;
+  let fixture: ComponentFixture<ChatIntegrationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        ChatIntegrationComponent,
+        HttpClientTestingModule,
+        MarkdownModule.forRoot(),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChatIntegrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/spa/src/app/modules/+chat/containers/chat-example/chat-example.component.ts → apps/spa/src/app/modules/+chat/containers/chat-integration/chat-integration.component.ts

@@ -1,18 +1,16 @@
 import { Component } from '@angular/core';
-import { AssistantIframe } from '@boldare/ai-embedded';
 import { AsyncPipe } from '@angular/common';
-import { ChatService } from '../../shared/chat.service';
 import { environment } from '../../../../../environments/environment';
 import { MarkdownComponent, MarkdownPipe } from 'ngx-markdown';
 
 @Component({
-  selector: 'ai-chat-example',
+  selector: 'ai-chat-integration',
   standalone: true,
-  templateUrl: './chat-example.component.html',
-  styleUrl: './chat-example.component.scss',
+  templateUrl: './chat-integration.component.html',
+  styleUrl: './chat-integration.component.scss',
   imports: [MarkdownComponent, MarkdownPipe, AsyncPipe],
 })
-export class ChatExampleComponent {
+export class ChatIntegrationComponent {
   scriptMarkdown = `\`\`\`html
 <script
   src="${environment.appUrl}/assets/js/ai-embedded.js"
@@ -30,12 +28,4 @@ new AssistantIframe({
   url: \`${environment.appUrl}/chat/iframe\`
 }).init();
 \`\`\``;
-
-  constructor(private readonly chatService: ChatService) {
-    if (environment.env === 'prod') {
-      this.chatService.loadScript();
-    } else {
-      new AssistantIframe().init();
-    }
-  }
 }