chore: Issue 2328 - VF Angular chatbot fixes and missing functionality

.gitignore

@@ -0,0 +1,3 @@
+.angular
+node_modules/
+dist/

angular.json

@@ -25,7 +25,8 @@
               "src/styles.scss"
             ],
             "scripts": [
-              "src/assets/vf-tabs/vf-tabs.js"
+              "node_modules/@visual-framework/vf-banner/vf-banner.js",
+              "node_modules/@visual-framework/vf-tabs/vf-tabs.js"
             ]
           },
           "configurations": {
@@ -37,6 +38,14 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
           }
         },
@@ -73,5 +82,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "visual-framework",
+  "name": "vf-angular",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -9,12 +9,12 @@
     "build:dev": "ng build --configuration development",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "test:all": "gulp test:all",
     "test:component": "gulp test:component",
     "test:watch": "gulp test:watch",
     "test:ci": "gulp test:ci",
     "test:coverage": "ng test --no-watch --code-coverage",
-    "sonar": "sonar-scanner"
+    "sonar": "sonar-scanner",
+    "test:all": "ng test --watch --browsers=ChromeHeadless --code-coverage"
   },
   "private": true,
   "dependencies": {
@@ -28,17 +28,28 @@
     "@angular/router": "^16.1.0",
     "@visual-framework/vf-back-to-top": "^1.0.1",
     "@visual-framework/vf-badge": "^3.0.3",
-    "@visual-framework/vf-banner": "2.0.3",
+    "@visual-framework/vf-banner": "^2.0.3",
     "@visual-framework/vf-blockquote": "^1.2.8",
     "@visual-framework/vf-body": "^1.2.0",
     "@visual-framework/vf-box": "^2.4.0",
     "@visual-framework/vf-button": "3.0.2",
-    "@visual-framework/vf-content": "1.6.16",
+    "@visual-framework/vf-chatbot": "^1.0.0",
+    "@visual-framework/vf-chatbot-action-prompt": "^1.0.0-beta.3",
+    "@visual-framework/vf-chatbot-dialog": "^1.0.0-beta.1",
+    "@visual-framework/vf-chatbot-fab": "^1.0.0-beta.3",
+    "@visual-framework/vf-chatbot-feedback": "^1.0.0-beta.4",
+    "@visual-framework/vf-chatbot-modal": "^1.0.0",
+    "@visual-framework/vf-chatbot-prompt": "^1.0.0-beta.3",
+    "@visual-framework/vf-chatbot-selector": "^1.0.0-beta.3",
+    "@visual-framework/vf-chatbot-sources": "^1.0.0-beta.3",
+    "@visual-framework/vf-chatbot-standalone": "^1.0.0",
+    "@visual-framework/vf-chatbot-welcome": "^1.0.0",
+    "@visual-framework/vf-content": "^1.6.16",
     "@visual-framework/vf-core": "2.2.47",
     "@visual-framework/vf-extensions-react": "^0.0.8",
     "@visual-framework/vf-font-plex-mono": "^1.1.3",
     "@visual-framework/vf-font-plex-sans": "^1.1.3",
-    "@visual-framework/vf-footer": "^1.2.1",
+    "@visual-framework/vf-footer": "^1.2.4",
     "@visual-framework/vf-global-header": "^3.1.6",
     "@visual-framework/vf-grid": "^1.4.1",
     "@visual-framework/vf-hero": "^4.0.3",
@@ -53,6 +64,7 @@
     "@visual-framework/vf-tabs": "^2.1.5",
     "@visual-framework/vf-text": "^1.1.1",
     "@visual-framework/vf-u-fullbleed": "^1.2.2",
+    "gulp": "^5.0.1",
     "@visual-framework/vf-utility-classes": "2.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -67,7 +79,14 @@
     "@visual-framework/vf-config": "1.0.1-alpha.0",
     "@visual-framework/vf-core": "2.2.47",
     "glob": "^7.2.0",
-    "gulp": "^5.0.0",
+    "gulp": "^5.0.1",
+    "@visual-framework/vf-design-tokens": "^3.6.3",
+    "@visual-framework/vf-font-plex-mono": "^1.1.1",
+    "@visual-framework/vf-font-plex-sans": "^1.1.1",
+    "@visual-framework/vf-sass-config": "^2.7.1",
+    "@visual-framework/vf-sass-starter": "^0.1.28",
+    "@visual-framework/vf-sass-utilities": "^1.0.1",
+    "@visual-framework/vf-utility-classes": "^2.0.0",
     "gulp-shell": "^0.8.0",
     "jasmine-core": "~4.6.0",
     "karma": "~6.4.4",
@@ -78,6 +97,6 @@
     "karma-junit-reporter": "^2.0.1",
     "karma-sonarqube-unit-reporter": "^0.0.23",
     "karma-spec-reporter": "^0.0.36",
-    "typescript": "~5.1.3"
+    "typescript": "~5.1.6"
   }
 }

src/app/app-routing.module.ts

@@ -6,6 +6,8 @@ import { VfBlockquoteComponent } from './components/vf-blockquote/vf-blockquote.
 import { VfButtonComponent } from './components/vf-button/vf-button.component';
 import { VfHeroComponent } from './components/vf-hero/vf-hero.component';
 import { VfTabsComponent } from './components/vf-tabs/vf-tabs.component';
+import { VfChatbotComponent } from './components/vf-chatbot/vf-chatbot.component';
+import { VfChatbotStandalonePageComponent } from './components/vf-chatbot-standalone/vf-chatbot-standalone.angular.component';
 import { VfBackToTopComponent } from './components/vf-back-to-top/vf-back-to-top.component';
 import { HomeComponent } from './components/home/home.component';
 import { SearchComponent } from './components/search/search.component';
@@ -20,6 +22,8 @@ const routes: Routes = [
   { path: 'components/vf-button', component: VfButtonComponent },
   { path: 'components/vf-hero', component: VfHeroComponent },
   { path: 'components/vf-tabs', component: VfTabsComponent },
+  { path: 'components/vf-chatbot', component: VfChatbotComponent },
+  { path: 'components/vf-chatbot-standalone', component: VfChatbotStandalonePageComponent },
   { path: '**', redirectTo: '' }
 ];
 

src/app/app.component.ts

@@ -5,12 +5,116 @@ import { Component } from '@angular/core';
   template: `
     <app-header></app-header>
     <router-outlet  (activate)="changeOfRoutes()"></router-outlet> <!-- This will display routed components -->
+    <vf-chatbot [config]="config"></vf-chatbot>
     <app-footer></app-footer>
   `
 })
 export class AppComponent {
   title = 'visual-framework';
+  config: any = {
+      type: "modal",
+      title: "AI Assistant",
+      welcome_logo: true,
+      welcome_message: "Welcome! I'm here to help",
+      welcome_logo_alt: "AI Assistant",
+      welcome_suggestions_title: "Try asking me:",
+      input_placeholder: "Ask me ...",
+      welcome_max_suggestions: 4,
+      disclaimer:
+        'Disclaimer: This chatbot is designed to assist you with general information and basic inquiries. See our <a class="vf-banner__link" target="_blank" rel="noopener noreferrer" aria-label="disclaimer notes (opens in new tab)" href="https://www.ebi.ac.uk/data-protection/privacy-notice/embl-ebi-public-website/">disclaimer notes</a>.',
+      footnote:
+        'Review AI generated content for accuracy. <a class="vf-link" target="_blank" rel="noopener noreferrer" aria-label="Leave feedback (opens in new tab)" href="https://embl.service-now.com/esc?id=sc_cat_item&sys_id=5eeb8eb91b92e650b376da88b04bcbc1">Leave feedback</a>.',
+      icons: {
+        assistant_avatar:
+            "./assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg",
+        user_avatar:
+            "./assets/vf-chatbot/assets/vf-chatbot--avatar-user.svg",
+          send_button: "./assets/vf-chatbot/assets/vf-chatbot--icon-send.svg",
+        main_logo_url:
+            "./assets/vf-chatbot/assets/vf-chatbot--icon-32x32-dark-green.svg",
+        minimize:
+            "./assets/vf-chatbot/assets/vf-chatbot--icon-minimize.svg",
+          close: "./assets/vf-chatbot/assets/vf-chatbot--icon-close.svg"
+      },
 
+      api: {
+        chat_endpoint: false, //"/api/chat", // Disabled to use fallback responses
+        feedback_endpoint: false, //"/api/feedback",
+        qa_data_url: "../../assets/vf-chatbot/assets/vf-chatbot-qa.json",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Bearer your-token"
+        },
+        timeout: 10000
+      },
+
+      features: {
+        enable_welcome: true,
+        enable_feedback: true,
+        enable_sources: true,
+        enable_sources_custom_format: false,
+        enable_welcome_suggestions: true,
+        enable_typing_indicator: true,
+        enable_disclaimer: true,
+        enable_predefined_qa: true,
+        enable_fallback_responses: true,
+        enable_qa_data_loading: true,
+        enable_instant_feedback: false
+      },
+
+      behavior: {
+        auto_scroll: true,
+        typing_delay: 800,
+        show_scrollbar: false
+      },
+
+      selectorContext: {
+        chatbotRoutes: {
+          multiSelect: true,
+          maxMultiSelect: 3,
+          showSearch: true,
+          showSearchThreshold: 5,
+          showAllServices: true,
+          showAllServicesSelected: true,
+          routes:
+            "../../assets/vf-chatbot/assets/vf-chatbot-selector-services.json",
+          placeholder: "Select services",
+          title: "Services",
+          selector_logo_url:
+            "../../assets/vf-chatbot/assets/vf-chatbot--icon-24x24-dark-green.svg",
+          selector_logo_title: "AI Assistant"
+        }
+      },
+
+      handlers: {
+        on_message_send: "handleMessageSend",
+        on_response_receive: "handleResponseReceive",
+        on_feedback_submit: "handleFeedbackSubmit",
+        on_suggestion_click: "handleSuggestionClick",
+        on_error: "handleError",
+        on_conversation_start: "handleConversationStart",
+        on_conversation_end: "handleConversationEnd",
+        on_fab_click: "handleFabClick",
+        on_dialog_confirm: "handleDialogConfirm",
+        on_dialog_cancel: "handleDialogCancel",
+        on_minimize: "handleMinimize"
+      },
+
+      feedback_options: {
+        positive: [
+          { id: "accurate", label: "Accurate" },
+          { id: "easy", label: "Easy to understand" },
+          { id: "formatted", label: "Well formatted" }
+        ],
+        negative: [
+          { id: "inaccurate", label: "Inaccurate answer" },
+          { id: "nocontext", label: "Did not use context" },
+          { id: "poorformat", label: "Poorly formatted" }
+        ]
+      },
+      enable_session_persistence: true,
+      restore_minimized_state: true // If true, restore minimized state after navigation
+    };
   changeOfRoutes() {
     // Remove vf-mega-menu element when route changes
     const vfMegaMenuContent = document.querySelector('.vf-mega-menu__content');

src/app/app.module.ts

@@ -1,13 +1,13 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-
 import { AppComponent } from './app.component';
 import { HomeModule } from './components/home/home.module';
 import { AppRoutingModule } from './app-routing.module';
 import { AppHeaderModule } from './components/header/header.module';
 import { AppFooterModule } from './components/footer/footer.module';
 import { VfComponentsModule } from './components/vf-components.module';
+import { HttpClientModule } from '@angular/common/http';
 import { SearchModule } from './components/search/search.module';
 @NgModule({
   declarations: [
@@ -21,7 +21,8 @@ import { SearchModule } from './components/search/search.module';
     AppHeaderModule,
     AppFooterModule,
     VfComponentsModule,
-    SearchModule,
+    HttpClientModule,
+    SearchModule
   ],
   bootstrap: [AppComponent],
   schemas: [NO_ERRORS_SCHEMA]

src/app/components/header/header.component.html

@@ -124,6 +124,9 @@ <h2 class="vf-section-header__heading"> Container</h2>
               <li class="vf-navigation__item">
                 <a class="vf-navigation__link" [routerLink]="['/components/vf-hero']">Hero</a>
               </li>
+              <li class="vf-navigation__item">
+                <a class="vf-navigation__link" [routerLink]="['components/vf-chatbot']">Chatbot</a>
+              </li>
             </ul>
           </article>
 

src/app/components/vf-chatbot-action-prompt/vf-chatbot-action-prompt.angular.component.spec.ts

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

src/app/components/vf-chatbot-action-prompt/vf-chatbot-action-prompt.angular.component.ts

@@ -0,0 +1,47 @@
+// vf-chatbot-action-prompt.angular
+
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'vf-chatbot-action-prompt',
+  template: `
+    <a
+    *ngIf="actionUrl; else buttonTemplate"
+    [href]="actionUrl"
+    class="vf-chatbot-action-prompt__link"
+    role="button"
+    [attr.target]="actionTarget || null"
+  >
+    {{ actionText }}
+  </a>
+
+  <ng-template #buttonTemplate>
+    <button
+      class="vf-chatbot-action-prompt__link"
+    >
+      {{ actionText }}
+    </button>
+  </ng-template>
+  `
+})
+export class VfChatbotActionPromptAngularComponent {
+  /** Equivalent to action_url */
+  @Input({ alias: 'action_url' }) actionUrl?: string;
+
+  /** Equivalent to action_text */
+  @Input({ alias: 'action_text' }) actionText!: string;
+
+  /** Equivalent to action_target */
+  @Input({ alias: 'action_target' }) actionTarget?: string;
+
+  /** Emits when the link/button is clicked (maps to onClick) */
+  @Output() actionClick = new EventEmitter<MouseEvent>();
+
+  onClick(ev: MouseEvent) {
+    this.actionClick.emit(ev);
+  }
+
+  get isExternal(): boolean {
+    return this.actionTarget === '_blank';
+  }
+}

src/app/components/vf-chatbot-action-prompt/vf-chatbot-action-prompt.angular.module.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { VfChatbotActionPromptAngularComponent } from './vf-chatbot-action-prompt.angular.component';
+
+
+
+@NgModule({
+  declarations: [
+    VfChatbotActionPromptAngularComponent
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    VfChatbotActionPromptAngularComponent
+  ]
+})
+export class VfChatbotActionPromptAngularModule { }