feat(AI-130): changed model and added missing tools (#14)

* feat(AI-130): changed model and added missing tools

* feat(AI-130): bot as an external script

.gitignore

@@ -45,3 +45,4 @@ Thumbs.db
 .env.*
 !.env.dist
 /apps/spa/src/assets/uploads
+/apps/spa/src/assets/js

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

@@ -3,10 +3,13 @@ import { AssistantConfigParams } from '@boldare/ai-assistant';
 import 'dotenv/config';
 
 export const assistantParams: AssistantCreateParams = {
-  name: '@boldare/assistant-ai',
+  name: '@boldare/ai-assistant',
   instructions: `You are a chatbot assistant. Use the general knowledge to answer questions. Speak briefly and clearly.`,
-  tools: [],
-  model: 'gpt-3.5-turbo',
+  tools: [
+    { type: 'code_interpreter' },
+    { type: 'retrieval' },
+  ],
+  model: 'gpt-4-1106-preview',
   metadata: {},
 };
 

apps/spa/project.json

@@ -19,12 +19,16 @@
         "assets": ["apps/spa/src/assets"],
         "styles": [
           "@angular/material/prebuilt-themes/indigo-pink.css",
+          "node_modules/prismjs/themes/prism-tomorrow.css",
           "apps/spa/src/styles/styles.scss"
         ],
         "stylePreprocessorOptions": {
           "includePaths": ["apps/spa/src/styles"]
         },
-        "scripts": [],
+        "scripts": [
+          "node_modules/prismjs/prism.js",
+          "node_modules/prismjs/components/prism-javascript.min.js"
+        ],
         "allowedCommonJsDependencies": ["recordrtc"]
       },
       "configurations": {

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

@@ -0,0 +1,7 @@
+<h1>
+  How to add a chatbot to the website?
+</h1>
+
+Please copy the code provided below and paste it into your HTML file.
+
+<markdown [data]="markdown"></markdown>

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

@@ -0,0 +1,12 @@
+@import 'settings';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: $size-2;
+  max-width: 600px;
+  font-size: 16px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  color: var(--color-grey-600);
+}

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

@@ -1,13 +1,30 @@
 import { Component } from '@angular/core';
-import { AssistantIframe } from '@boldare/ai-iframe';
+import { ChatService } from '../../shared/chat.service';
 import { environment } from '../../../../../environments/environment';
+import { MarkdownComponent, MarkdownPipe } from 'ngx-markdown';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
   selector: 'ai-chat-example',
   standalone: true,
   templateUrl: './chat-example.component.html',
   styleUrl: './chat-example.component.scss',
+  imports: [
+    MarkdownComponent,
+    MarkdownPipe,
+    AsyncPipe,
+  ],
 })
 export class ChatExampleComponent {
-  iframe = new AssistantIframe({ url: `${environment.appUrl}/chat/iframe` });
+  markdown = `\`\`\`html
+<script
+  src="${environment.appUrl}/assets/js/ai-embedded.js"
+  type="module"
+  defer
+></script>
+\`\`\``;
+
+  constructor(private readonly chatService: ChatService,) {
+    this.chatService.loadScript();
+  }
 }

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

@@ -86,4 +86,16 @@ export class ChatService {
       }
     });
   }
+
+  loadScript(): void {
+    const body: HTMLDivElement = document.body as HTMLDivElement;
+    const script = document.createElement('script') as HTMLScriptElement;
+
+    script.innerHTML = '';
+    script.src = '/assets/js/ai-embedded.js';
+    script.async = true;
+    script.defer = true;
+    script.type = 'module';
+    body.appendChild(script);
+  }
 }

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

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

libs/ai-embedded/README.md

@@ -0,0 +1,11 @@
+# ai-embedded
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build ai-embedded` to build the library.
+
+## Running unit tests
+
+Run `nx test ai-embedded` to execute the unit tests via [Jest](https://jestjs.io).

libs/ai-iframe/jest.config.ts → libs/ai-embedded/jest.config.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
 export default {
-  displayName: 'ai-iframe',
+  displayName: 'ai-embedded',
   preset: '../../jest.preset.js',
   testEnvironment: 'node',
   transform: {
     '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
-  coverageDirectory: '../../coverage/libs/ai-iframe',
+  coverageDirectory: '../../coverage/libs/ai-embedded',
 };

libs/ai-iframe/package.json → libs/ai-embedded/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@boldare/ai-iframe",
+  "name": "@boldare/ai-embedded",
   "version": "0.0.1",
   "dependencies": {},
   "type": "commonjs",
-  "main": "./index.cjs"
+  "main": "./index.js"
 }

libs/ai-embedded/project.json

@@ -0,0 +1,32 @@
+{
+  "name": "ai-embedded",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ai-embedded/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/esbuild:esbuild",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/ai-embedded",
+        "main": "libs/ai-embedded/src/index.ts",
+        "tsConfig": "libs/ai-embedded/tsconfig.lib.json",
+        "assets": ["libs/ai-embedded/*.md"],
+        "generatePackageJson": false,
+        "format": ["esm"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/ai-embedded/jest.config.ts"
+      }
+    }
+  },
+  "tags": []
+}

libs/ai-embedded/src/index.ts

@@ -0,0 +1,8 @@
+import { AssistantIframe } from './lib/assistant-iframe';
+
+export * from './lib/assistant-iframe';
+export * from './lib/assistant-iframe.model';
+
+(function () {
+  new AssistantIframe();
+})();

libs/ai-iframe/src/lib/assistant-iframe.ts → libs/ai-embedded/src/lib/assistant-iframe.ts

@@ -7,16 +7,18 @@ export class AssistantIframe {
   trigger!: HTMLElement;
 
   constructor(config: Partial<AssistantIframeConfig> = {}) {
+    // @TODO: set URL as an env variable
+    const url = 'https://ai-assistant-c8b469d88808.herokuapp.com';
+
     this.config = {
-      url: config.url || '',
+      url: `${url}/chat/iframe`,
       elementId: config.elementId || '',
       iframeId: config.elementId || 'ai-assistant-iframe',
       iframeClass: 'ai-assistant-iframe',
       toggleClass: 'ai-assistant-toggle',
       bodyOpenClass: 'ai-assistant-open',
       toggleIsAnimated: config.toggleIsAnimated || true,
     };
-
     this.init();
   }
 
@@ -56,14 +58,15 @@ export class AssistantIframe {
     const iframe = document.createElement('iframe');
     iframe.src = this.config.url;
     iframe.classList.add(this.config.iframeClass);
-    iframe.id = this.config.elementId;
+    iframe.id = this.config.iframeId;
 
     return iframe;
   }
 
   appendElement(element: HTMLElement): void {
     if (!this.config.elementId) {
       document.body.appendChild(element);
+      return;
     }
 
     const wrapper = document.getElementById(this.config.elementId);
@@ -84,6 +87,7 @@ export class AssistantIframe {
         this.iframe?.contentDocument?.body.classList.contains(
           this.config.bodyOpenClass,
         );
+
       this.toggleModal(!currentState);
       this.watchToggleButton();
     });

libs/ai-iframe/tsconfig.lib.json → libs/ai-embedded/tsconfig.lib.json

@@ -3,13 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "declaration": true,
-    "types": ["node"],
-    "target": "es2021",
-    "strictNullChecks": true,
-    "noImplicitAny": true,
-    "strictBindCallApply": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true
+    "types": ["node"]
   },
   "include": ["src/**/*.ts"],
   "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]