feat: demo page with navbar (#42)

Author: sebastianmusial

.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/chat-iframe.component.html renamed to apps/spa/src/app/components/chat/chat-iframe-wrapper/chat-iframe-wrapper.component.html

@@ -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/chat-iframe.component.scss renamed to apps/spa/src/app/components/chat/chat-iframe-wrapper/chat-iframe-wrapper.component.scss

@@ -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/components/chat/chat-iframe-wrapper/chat-iframe-wrapper.component.spec.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/components/chat/chat-iframe-wrapper/chat-iframe-wrapper.component.ts

@@ -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/components/chat/chat-iframe/chat-iframe.component.ts

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