Feat/ai 130 iframe readme & changed build config for "ai-embedded" lib (

#18)

* feat(AI-130): chatbot readme update

* feat(AI-130): changed build configuration for "ai-embedded"

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

@@ -2,33 +2,45 @@ <h1>
   Integrating Chatbot into Your Website
 </h1>
 
-<p class="paragraph">
+<section class="section">
   Enhance your website's interactivity and user engagement by seamlessly integrating our chatbot. Follow the simple steps below to implement the chatbot into your website:
-</p>
-
-<h2>
-  Step 1: Locate Your HTML File
-</h2>
-
-<p class="paragraph">
-Identify the HTML file where you wish to add the chatbot. This will typically be in the root directory of your website or within a specific subdirectory if you aim to integrate the chatbot on a particular page.
-</p>
-
-<h2>
-  Step 2: Copy the Chatbot Integration Code
-</h2>
-
-<p class="paragraph">
-  Below is the chatbot integration code snippet. This piece of code is designed to be lightweight and compatible with most web environments, ensuring a smooth integration process.
-  <markdown [data]="markdown"></markdown>
-</p>
-
-
-<h2>
-  Step 3: Paste the Code into Your HTML File
-</h2>
-<p class="paragraph">
-  Open your HTML file using a text editor of your choice. Scroll to the part of the file where you want the chatbot to appear. It's recommended to place the code just before the closing body tag to ensure the chatbot loads after all other content on your page, improving the page load time.<br><br>
-  Paste the copied code snippet into the file at the chosen location.
-</p>
-
+</section>
+
+<section class="section">
+  <h2>
+    Step 1: Locate Your HTML File
+  </h2>
+
+  <p class="paragraph">
+  Identify the HTML file where you wish to add the chatbot. This will typically be in the root directory of your website or within a specific subdirectory if you aim to integrate the chatbot on a particular page.
+  </p>
+</section>
+
+<section class="section">
+  <h2>
+    Step 2 (a): Copy the Chatbot Integration Code
+  </h2>
+
+  <p class="paragraph">
+    Below is the chatbot integration code snippet. This piece of code is designed to be lightweight and compatible with most web environments, ensuring a smooth integration process.
+    <markdown [data]="scriptMarkdown"></markdown>
+    We highly recommend inserting the code snippet just before the closing body tag of your HTML file. This placement ensures that the chatbot will load only after all other content on your page has fully loaded, optimizing your page's load time for a better user experience.
+  </p>
+</section>
+
+<section class="section">
+  <h2>
+    Step 2 (b): Customizing Chatbot Initialization
+  </h2>
+  <p class="paragraph">
+    For a tailored interaction experience, you may prefer to manually initialize the chatbot rather than opting for automatic activation. This approach gives you greater control over the chatbot's initialization timing and its configuration, ensuring the chatbot seamlessly integrates with the flow of your website.
+    <br><br>
+    To prevent the chatbot from automatically initializing, locate and remove the following attribute from the chatbot integration code snippet:
+    <markdown [data]="scriptDataAttrMarkdown"></markdown>
+  </p>
+
+  <p class="paragraph">
+    For manual chatbot initialization, incorporate the following JavaScript code snippet into your website's JavaScript file. This script lets you dictate exactly when and how the chatbot becomes active on your site, offering the opportunity to customize its configuration further.
+    <markdown [data]="manualInitialization"></markdown>
+  </p>
+</section>

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

@@ -4,17 +4,25 @@
   display: flex;
   flex-direction: column;
   gap: $size-2;
-  max-width: 650px;
+  max-width: 680px;
   font-size: 15px;
   margin: 0 auto;
-  padding: 40px 20px;
+  padding: 40px 10px;
   color: var(--color-grey-500);
 }
 
-p.paragraph {
+.section {
   margin-bottom: 20px;
 }
 
+p.paragraph {
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
 h1 {
   color: var(--color-grey-600);
 }

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

@@ -17,20 +17,31 @@ import { AssistantIframe } from '@boldare/ai-embedded';
   ],
 })
 export class ChatExampleComponent {
-  markdown = `\`\`\`html
+  scriptMarkdown = `\`\`\`html
 <script
   src="${environment.appUrl}/assets/js/ai-embedded.js"
   data-chat-initial="true"
-  type="module"
   defer
 ></script>
+\`\`\``;
+
+  scriptDataAttrMarkdown = `\`\`\`javascript
+data-chat-initial="true"
+\`\`\``;
+
+  manualInitialization = `\`\`\`javascript
+new AssistantIframe({
+  url: \`${environment.appUrl}/chat/iframe\`
+}).init();
 \`\`\``;
 
   constructor(private readonly chatService: ChatService) {
+    this.chatService.loadScript();
+
     if (environment.env === 'prod') {
       this.chatService.loadScript();
     } else {
-      new AssistantIframe({ url: `${environment.appUrl}/chat/iframe` }).init();
+      new AssistantIframe().init();
     }
   }
 }

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

@@ -95,7 +95,6 @@ export class ChatService {
     script.src = '/assets/js/ai-embedded.js';
     script.async = true;
     script.defer = true;
-    script.type = 'module';
     script.dataset['chatInitial'] = 'true';
     body.appendChild(script);
   }

apps/spa/src/styles/_extends/_material.scss

@@ -14,6 +14,9 @@
   --mat-select-focused-arrow-color: var(--color-primary-500);
   --mdc-filled-text-field-label-text-size: 14px;
 
+  line-height: 1.5;
+
+
   .mat-primary {
     --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--color-primary-500);
   }

libs/ai-embedded/.eslintrc.json

@@ -13,18 +13,6 @@
     {
       "files": ["*.js", "*.jsx"],
       "rules": {}
-    },
-    {
-      "files": ["*.json"],
-      "parser": "jsonc-eslint-parser",
-      "rules": {
-        "@nx/dependency-checks": [
-          "error",
-          {
-            "ignoredFiles": ["{projectRoot}/esbuild.config.{js,ts,mjs,mts}"]
-          }
-        ]
-      }
     }
   ]
 }

libs/ai-embedded/.swcrc

@@ -0,0 +1,8 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript"
+    },
+    "target": "es2016"
+  }
+}

libs/ai-embedded/jest.config.ts

@@ -2,9 +2,9 @@
 export default {
   displayName: 'ai-embedded',
   preset: '../../jest.preset.js',
-  testEnvironment: 'node',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   transform: {
-    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+    '^.+\\.[tj]s$': '@swc/jest',
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/libs/ai-embedded',

libs/ai-embedded/project.json

@@ -1,19 +1,38 @@
 {
   "name": "ai-embedded",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
   "sourceRoot": "libs/ai-embedded/src",
-  "projectType": "library",
+  "tags": [],
   "targets": {
     "build": {
-      "executor": "@nx/esbuild:esbuild",
+      "executor": "@nx/webpack:webpack",
       "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
       "options": {
+        "target": "web",
         "outputPath": "dist/libs/ai-embedded",
+        "compiler": "swc",
         "main": "libs/ai-embedded/src/index.ts",
-        "tsConfig": "libs/ai-embedded/tsconfig.lib.json",
-        "assets": ["libs/ai-embedded/*.md"],
-        "generatePackageJson": false,
-        "format": ["esm"]
+        "tsConfig": "libs/ai-embedded/tsconfig.app.json",
+        "webpackConfig": "libs/ai-embedded/webpack.config.js",
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "optimization": true,
+          "outputHashing": "none",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": false,
+          "vendorChunk": false,
+          "fileReplacements": [
+            {
+              "replace": "libs/ai-embedded/src/environments/environment.ts",
+              "with": "libs/ai-embedded/src/environments/environment.prod.ts"
+            }
+          ]
+        }
       }
     },
     "lint": {
@@ -27,6 +46,5 @@
         "jestConfig": "libs/ai-embedded/jest.config.ts"
       }
     }
-  },
-  "tags": []
+  }
 }

libs/ai-embedded/src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  env: 'prod',
+  appUrl: 'https://ai-assistant-c8b469d88808.herokuapp.com',
+};

libs/ai-embedded/src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  env: 'dev',
+  appUrl: 'http://localhost:4200',
+};

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

@@ -1,13 +1,14 @@
 import { AssistantIframeConfig } from './assistant-iframe.model';
 import { addIframeClass, addTriggerClass } from './assistant-iframe.styles';
+import { environment } from '../environments/environment';
 
 export class AssistantIframe {
   config: AssistantIframeConfig;
   iframe!: HTMLIFrameElement;
   trigger!: HTMLElement;
 
   constructor(config: Partial<AssistantIframeConfig> = {}) {
-    const url = 'https://ai-assistant-c8b469d88808.herokuapp.com/chat/iframe';
+    const url = `${environment.appUrl}/chat/iframe`;
 
     this.config = {
       url: config.url || url,

libs/ai-embedded/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ]
+}

libs/ai-embedded/tsconfig.json

@@ -1,19 +1,10 @@
 {
   "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "module": "commonjs",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
   "files": [],
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.lib.json"
+      "path": "./tsconfig.app.json"
     },
     {
       "path": "./tsconfig.spec.json"

libs/ai-embedded/tsconfig.spec.json

@@ -5,6 +5,9 @@
     "module": "commonjs",
     "types": ["jest", "node"]
   },
+  "files": [
+    "src/test-setup.ts"
+  ],
   "include": [
     "jest.config.ts",
     "src/**/*.test.ts",

libs/ai-embedded/webpack.config.js

@@ -0,0 +1,8 @@
+const { composePlugins, withNx } = require('@nx/webpack');
+
+// Nx plugins for webpack.
+module.exports = composePlugins(withNx(), config => {
+  // Update the webpack config as needed here.
+  // e.g. `config.plugins.push(new MyPlugin())`
+  return config;
+});

nx.json

@@ -57,6 +57,12 @@
     },
     "@nx/angular:component": {
       "style": "scss"
+    },
+    "@nx/web:application": {
+      "style": "css",
+      "linter": "eslint",
+      "unitTestRunner": "jest",
+      "e2eTestRunner": "none"
     }
   }
 }