\n `,\n})\nexport class VfChatbotFeedbackAngularComponent implements AfterViewInit {\n @Input() feedback_options: FeedbackOption[] = [];\n @Input() type: string = '';\n @Input() comment: string = '';\n\n @Output() feedback = new EventEmitter<{ type: string; id: string }>();\n @Output() commentChange = new EventEmitter();\n @Output() close = new EventEmitter();\n @Output() submit = new EventEmitter();\n\n constructor(private el: ElementRef) {}\n\n ngAfterViewInit(): void {\n }\n\n onFeedbackClick(optionId: string) {\n this.feedback.emit({ type: this.type, id: optionId });\n }\n\n onCloseClick() {\n this.close.emit();\n }\n\n onSubmitClick() {\n this.submit.emit();\n }\n}\n\nexport * from './vf-chatbot-feedback.angular.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './vf-chatbot-feedback.angular.component';\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/index.d.ts b/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/index.d.ts
new file mode 100644
index 0000000000..5669c3ebe0
--- /dev/null
+++ b/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/index.d.ts
@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+///
+export * from './vf-chatbot-feedback.angular.component';
diff --git a/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/package.json b/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/package.json
new file mode 100644
index 0000000000..d3dc399493
--- /dev/null
+++ b/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "@visual-framework/vf-chatbot-feedback.angular",
+ "version": "0.0.1",
+ "peerDependencies": {
+ "@angular/common": "^19.2.0",
+ "@angular/core": "^19.2.0"
+ },
+ "dependencies": {
+ "tslib": "^2.3.0"
+ },
+ "sideEffects": false,
+ "module": "fesm2022/visual-framework-vf-chatbot-feedback.angular.mjs",
+ "typings": "index.d.ts",
+ "exports": {
+ "./package.json": {
+ "default": "./package.json"
+ },
+ ".": {
+ "types": "./index.d.ts",
+ "esm2022": "./esm2022/visual-framework-vf-chatbot-feedback.angular.mjs",
+ "esm": "./esm2022/visual-framework-vf-chatbot-feedback.angular.mjs",
+ "default": "./fesm2022/visual-framework-vf-chatbot-feedback.angular.mjs"
+ }
+ }
+}
\ No newline at end of file
diff --git a/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/vf-chatbot-feedback.angular.component.d.ts b/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/vf-chatbot-feedback.angular.component.d.ts
new file mode 100644
index 0000000000..228991e988
--- /dev/null
+++ b/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/vf-chatbot-feedback.angular.component.d.ts
@@ -0,0 +1,27 @@
+import { ElementRef, EventEmitter, AfterViewInit } from '@angular/core';
+import * as i0 from "@angular/core";
+interface FeedbackOption {
+ id: string;
+ label: string;
+}
+export declare class VfChatbotFeedbackAngularComponent implements AfterViewInit {
+ private el;
+ feedback_options: FeedbackOption[];
+ type: string;
+ comment: string;
+ feedback: EventEmitter<{
+ type: string;
+ id: string;
+ }>;
+ commentChange: EventEmitter;
+ close: EventEmitter;
+ submit: EventEmitter;
+ constructor(el: ElementRef);
+ ngAfterViewInit(): void;
+ onFeedbackClick(optionId: string): void;
+ onCloseClick(): void;
+ onSubmitClick(): void;
+ static ɵfac: i0.ɵɵFactoryDeclaration;
+ static ɵcmp: i0.ɵɵComponentDeclaration;
+}
+export * from './vf-chatbot-feedback.angular.module';
diff --git a/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/vf-chatbot-feedback.angular.module.d.ts b/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/vf-chatbot-feedback.angular.module.d.ts
new file mode 100644
index 0000000000..39af0bfc60
--- /dev/null
+++ b/components/vf-chatbot-feedback/vf-chatbot-feedback.angular/vf-chatbot-feedback.angular.module.d.ts
@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./vf-chatbot-feedback.angular.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+export declare class VfChatbotFeedbackAngularModule {
+ static ɵfac: i0.ɵɵFactoryDeclaration;
+ static ɵmod: i0.ɵɵNgModuleDeclaration;
+ static ɵinj: i0.ɵɵInjectorDeclaration;
+}
diff --git a/components/vf-chatbot-feedback/vf-chatbot-feedback.config.yml b/components/vf-chatbot-feedback/vf-chatbot-feedback.config.yml
index decc430a97..ed6f147454 100644
--- a/components/vf-chatbot-feedback/vf-chatbot-feedback.config.yml
+++ b/components/vf-chatbot-feedback/vf-chatbot-feedback.config.yml
@@ -1,6 +1,6 @@
title: Chatbot Feedback
label: Chatbot Feedback
-status: beta
+status: live
preview: '@preview'
hidden: true
context:
diff --git a/components/vf-chatbot-modal/CHANGELOG.md b/components/vf-chatbot-modal/CHANGELOG.md
index fb54544c38..be68873da4 100644
--- a/components/vf-chatbot-modal/CHANGELOG.md
+++ b/components/vf-chatbot-modal/CHANGELOG.md
@@ -1,5 +1,9 @@
# Changelog
+### 1.0.1
+
+* Added : Experimental React support for VF Chatbot component [Tracking issue](https://github.com/visual-framework/vf-core/issues/2328)
+
### 1.0.0
* Version bump
diff --git a/components/vf-chatbot-modal/README.md b/components/vf-chatbot-modal/README.md
index cb708064c2..61130c1f07 100644
--- a/components/vf-chatbot-modal/README.md
+++ b/components/vf-chatbot-modal/README.md
@@ -83,7 +83,7 @@ Texts shown in the examples are placeholder content. Please review and update al
### Adding the Floating Action Button (FAB)
-We recommend using only one Floating Action Button (FAB) per screen. If a page already includes a FAB, consider integrating its functionality into the chatbot or prioritising the most important action for the user’s journey on that page.
+We recommend using only one Floating Action Button (FAB) per screen. If a page already includes a FAB, consider integrating its functionality into the chatbot or prioritising the most important action for the user’s journey on that page.
Place the FAB 32 pixels from the bottom and 32 pixels from the right edge of the screen. This keeps the button in a consistent and expected position across different pages. If there’s a banner on the screen, position the FAB 32 pixels above the top edge of the banner instead. This helps keep the FAB visible and avoids overlap.
@@ -118,7 +118,7 @@ window.addEventListener("load", function() {
initVFChatbot(config);
});
```
-where config is the configuration object with different options as described below
+where config is the configuration object with different options as described below
#### Core Configuration Options
@@ -207,11 +207,17 @@ const config = {
{ id: "poorformat", label: "Poorly formatted" }
]
},
- enable_session_persistence: true, // If true, the chatbot will remember the conversation and state across page reloads or navigation (using sessionStorage)
+ enable_session_persistence: true, // If true, the chatbot will remember the conversation and state across page reloads or navigation
+ persistence_storage: "sessionStorage", // "sessionStorage" (tab-scoped) or "localStorage" (shared across tabs)
restore_minimized_state: true // If true, restore minimized state after navigation
};
```
+When `enable_session_persistence` is true, you can choose where state is stored:
+
+- `sessionStorage`: keeps chat state only for the current tab/window.
+- `localStorage`: shares chat state across tabs on the same origin.
+
#### Service Selector Configuration
The chatbot includes an integrated selector component which can be configured to present different selection options to user:
@@ -223,18 +229,18 @@ const selectorConfig = {
// Multi-selection settings
multiSelect: true,
maxMultiSelect: 3,
-
+
// Search functionality
showSearch: true,
showSearchThreshold: 5,
-
+
// "All Services" option
showAllServices: true,
showAllServicesSelected: true,
-
+
// Data source
routes: "assets/vf-chatbot-selector-services.json",
-
+
// UI labels and logo
placeholder: "Search",
title: "Available Services",
@@ -256,7 +262,7 @@ Please note that if you want to opt for a single selection option version of the
"title": "Model 1 title"
},
{
- "id": "model-2",
+ "id": "model-2",
"title": "Model 2 title"
}
]
@@ -267,14 +273,14 @@ Please note that if you want to opt for a single selection option version of the
#### Built-in Event Handlers
-Chatbot comes with a provision to allow custom event handlers. These handlers can be defined in your code to handle specific actions for different events triggered during interaction with chatbot.
+Chatbot comes with a provision to allow custom event handlers. These handlers can be defined in your code to handle specific actions for different events triggered during interaction with chatbot.
Configure custom handlers for chatbot events:
```javascript
const config = {
handlers: {
on_message_send: "handleMessageSend",
- on_response_receive: "handleResponseReceive",
+ on_response_receive: "handleResponseReceive",
on_feedback_submit: "handleFeedbackSubmit",
on_suggestion_click: "handleSuggestionClick",
on_error: "handleError",
@@ -504,7 +510,7 @@ const config = {
"response": "Here's the information...",
"sources": [
{
- "title": "Official Documentation",
+ "title": "Official Documentation",
"url": "https://docs.example.com",
"description": "Complete guide to the platform"
}
@@ -537,13 +543,55 @@ const config = {
"action_url": "https://example.com/tutorial"
},
{
- "action_text": "Contact Support",
+ "action_text": "Contact Support",
"action_url": "mailto:support@example.com"
}
]
}
```
+### Angular
+
+This component now has experimental Angular support.
+
+1. Install `yarn add @visual-framework/vf-chatbot @visual-framework/vf-chatbot-modal`
+2. Import in your app module
+ ```
+ import { VfChatbotAngularModule } from '@visual-framework/vf-chatbot/vf-chatbot.angular';
+
+ @NgModule({
+ imports: [VfChatbotAngularModule, YourOtherModules],
+ ...
+ })
+ ```
+3. JS assets inclusion
+ * Copy required JS files to your Angular `src/assets` folder, keeping these paths:
+ - `src/assets/vf-chatbot/vf-chatbot.js`
+ - `src/assets/vf-chatbot-modal/vf-chatbot-modal.js`
+ * In `angular.json`, add these file references in `scripts: []`.
+ * Rerun the project if already running.
+4. Can be used as
+ ```
+
+
+ // component.ts
+ chatbotConfig = {
+ type: 'modal'
+ // ...other options from the config examples above
+ };
+ ```
+5. Add below to your `styles.scss`
+ ```
+ $vf-font-plex-mono-prefix: '~@visual-framework/vf-font-plex-mono/assets';
+ $vf-font-plex-sans-prefix: '~@visual-framework/vf-font-plex-sans/assets';
+
+ @import '~@visual-framework/vf-sass-starter/index.scss';
+ @import '~@visual-framework/vf-link/vf-link.scss';
+ @import '~@visual-framework/vf-chatbot/vf-chatbot.scss';
+ @import '~@visual-framework/vf-chatbot-modal/index.scss';
+ ```
+ You should also install [vf-sass-starter](https://stable.visual-framework.dev/components/vf-sass-starter) for the styles.
+
### React
This component now has React support which has been tested on react version 18.2.0
diff --git a/components/vf-chatbot-modal/vf-chatbot-modal.angular/.npmignore b/components/vf-chatbot-modal/vf-chatbot-modal.angular/.npmignore
new file mode 100644
index 0000000000..c97ccf2941
--- /dev/null
+++ b/components/vf-chatbot-modal/vf-chatbot-modal.angular/.npmignore
@@ -0,0 +1,2 @@
+# Nested package.json's are only needed for development.
+**/package.json
\ No newline at end of file
diff --git a/components/vf-chatbot-modal/vf-chatbot-modal.angular/README.md b/components/vf-chatbot-modal/vf-chatbot-modal.angular/README.md
new file mode 100644
index 0000000000..2994d5157b
--- /dev/null
+++ b/components/vf-chatbot-modal/vf-chatbot-modal.angular/README.md
@@ -0,0 +1,63 @@
+# VfChatbotModalAngular
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build vf-chatbot-modal.angular
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+ ```bash
+ cd dist/vf-chatbot-modal.angular
+ ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+ ```bash
+ npm publish
+ ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
diff --git a/components/vf-chatbot-modal/vf-chatbot-modal.angular/esm2022/vf-chatbot-modal.angular.component.mjs b/components/vf-chatbot-modal/vf-chatbot-modal.angular/esm2022/vf-chatbot-modal.angular.component.mjs
new file mode 100644
index 0000000000..e7223eef08
--- /dev/null
+++ b/components/vf-chatbot-modal/vf-chatbot-modal.angular/esm2022/vf-chatbot-modal.angular.component.mjs
@@ -0,0 +1,376 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { VfChatbotDialogAngularModule } from 'vf-chatbot-dialog.angular';
+import { VfChatbotPromptAngularModule } from 'vf-chatbot-prompt.angular';
+import { VfChatbotSelectorAngularModule } from 'vf-chatbot-selector.angular';
+import { VfChatbotWelcomeAngularModule } from 'vf-chatbot-welcome.angular';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "vf-chatbot-dialog.angular";
+import * as i3 from "vf-chatbot-prompt.angular";
+import * as i4 from "vf-chatbot-selector.angular";
+import * as i5 from "vf-chatbot-welcome.angular";
+export class VfChatbotModalAngularComponent {
+ constructor() {
+ this.config = { type: 'modal' };
+ this.messages = [];
+ this.sources = [];
+ this.prompts = [];
+ this.qaData = [];
+ this.isOpen = false;
+ this.dialogTitle = 'Close chat and delete conversation?';
+ this.dialogMessage = 'Are you sure you want to close the chat? Your current conversation history will be permanently deleted.';
+ this.dialogCancelLabel = 'Keep chat open';
+ this.dialogConfirmLabel = 'Close and delete';
+ this.close = new EventEmitter();
+ this.minimize = new EventEmitter();
+ }
+ get configJson() {
+ return JSON.stringify(this.config || {});
+ }
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: VfChatbotModalAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: VfChatbotModalAngularComponent, isStandalone: true, selector: "vf-chatbot-modal", inputs: { config: "config", messages: "messages", sources: "sources", prompts: "prompts", qaData: "qaData", isOpen: "isOpen" }, outputs: { close: "close", minimize: "minimize" }, ngImport: i0, template: `
+
+