2328 vf chatbot angular support

package.json

@@ -1,74 +1,79 @@
 {
-  "name": "visual-framework",
+  "name": "vf-angular-packages",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "build:ghpages": "ng build --configuration production --base-href /vf-angular/",
-    "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"
+    "test:all": "ng test --watch --browsers=ChromeHeadless --code-coverage"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.1.0",
-    "@angular/common": "^16.1.0",
-    "@angular/compiler": "^16.1.0",
-    "@angular/core": "^16.1.0",
-    "@angular/forms": "^16.1.0",
-    "@angular/platform-browser": "^16.1.0",
-    "@angular/platform-browser-dynamic": "^16.1.0",
-    "@angular/router": "^16.1.0",
+    "@angular/animations": "^15.2.0 || ^18.0.0",
+    "@angular/common": "^15.2.0 || ^18.0.0",
+    "@angular/compiler": "^15.2.0 || ^18.0.0",
+    "@angular/core": "^15.2.0 || ^18.0.0",
+    "@angular/forms": "^15.2.0 || ^18.0.0",
+    "@angular/platform-browser": "^15.2.0 || ^18.0.0",
+    "@angular/platform-browser-dynamic": "^15.2.0 || ^18.0.0",
+    "@angular/router": "^15.2.0 || ^18.0.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-button": "3.0.1",
+    "@visual-framework/vf-chatbot": "^1.0.0-beta.3",
+    "@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-beta.5",
+    "@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-beta.4",
+    "@visual-framework/vf-chatbot-welcome": "^1.0.0-beta.4",
+    "@visual-framework/vf-content": "^1.6.16",
     "@visual-framework/vf-grid": "^1.4.1",
     "@visual-framework/vf-hero": "^4.0.3",
     "@visual-framework/vf-link": "^2.0.2",
     "@visual-framework/vf-mega-menu": "^1.0.2",
     "@visual-framework/vf-profile": "^1.4.0",
-    "@visual-framework/vf-sass-starter": "^0.1.30",
-    "@visual-framework/vf-search": "^1.0.0",
     "@visual-framework/vf-stack": "^3.0.0",
     "@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",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.0"
+    "vf-badge.angular": "^0.0.1",
+    "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.1.0",
-    "@angular/cli": "~16.1.0",
-    "@angular/compiler-cli": "^16.1.0",
+    "@angular-devkit/build-angular": "^15.2.4 || ^18.0.0",
+    "@angular/cli": "~15.2.4 || ^18.0.0",
+    "@angular/compiler-cli": "^15.2.0 || ^18.0.0",
     "@types/jasmine": "~4.3.0",
-    "@types/node": "^18.19.124",
-    "@visual-framework/vf-config": "1.0.1-alpha.0",
-    "@visual-framework/vf-core": "2.2.47",
-    "glob": "^7.2.0",
-    "gulp": "^5.0.0",
+    "@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",
+    "jasmine-core": "~4.5.0",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "karma-junit-reporter": "^2.0.1",
-    "karma-sonarqube-unit-reporter": "^0.0.23",
-    "karma-spec-reporter": "^0.0.36",
-    "typescript": "~5.1.3"
-  }
+    "ng-packagr": "^15.2.2 || ^18.0.0",
+    "typescript": "~5.4.0"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ 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 { VfChatbotAngularComponent } from './components/vf-chatbot/vf-chatbot.angular.component';
 import { VfBackToTopComponent } from './components/vf-back-to-top/vf-back-to-top.component';
 import { HomeComponent } from './components/home/home.component';
 
@@ -18,6 +19,7 @@ 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: VfChatbotAngularComponent },
   { 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 = {
+      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

@@ -8,6 +8,7 @@ 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';
 @NgModule({
   declarations: [
     AppComponent
@@ -20,6 +21,7 @@ import { VfComponentsModule } from './components/vf-components.module';
     AppHeaderModule,
     AppFooterModule,
     VfComponentsModule,
+    HttpClientModule
   ],
   bootstrap: [AppComponent],
   schemas: [NO_ERRORS_SCHEMA]

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 { }

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

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