Visual Framework
Visual Framework
The vf-chatbot component enables conversational interaction between a user and an AI system. It is designed for flexibility and can be embedded in a page as a modal or accessed as a standalone solution.
While bots can be a solution to some business challenges, ensure that it is the right solution before implementing it. Consider the following:
The chatbot standalone and chatbot modal are two distinct variants for delivering conversational interfaces. Choose between them based on use case needs and task complexity.
| Element | Description |
|---|---|
| Title bar | Shows the chatbot name, minimise button and close button. The title bar may include a dropdown for selecting categories. |
| Dialogue section | Scrollable chat window showing the conversation log. |
| Intro message | A brief onboarding message explaining the purpose and capabilities of the chatbot. Shows the icon, title and short message. |
| Banner | Used to show optional disclaimers or alerts (Max. 3 lines of text). For cases that require user consent, use a blur overlay on the background or a pre-access popup instead, as banners may be missed. |
| Text input area | Open input field for typing and sending queries. Expands up to 5 lines, after which it becomes scrollable. |
| Flow | Details |
|---|---|
| Suggested prompts | Appear on the initial screen. Provide a quick start to users with clickable queries. They help to provide context on the type of questions the user can ask on the platform. (Max. 60 characters) |
| Closing the chat dialogue | Clicking on the close icon "X" triggers a confirmation prompt to prevent accidental loss of the chat log. |
| Error management | If the chatbot is unable to provide a response to the query, display a clear error message and provide an alternative way for them to get their answers. |
| Links | Displayed in a clear underlined style. They can be shown inline or as a list. |
| Source attribution | Chips are shown in relevant paragraphs which cite the sources. Links to the sources and more details can be accessed via a "View sources" button. |
| Feedback on a query level | Users can assess the AI responses with a thumbs up/thumbs down or optional close/open response fields to give more details. |
| Category selection | A dropdown in the title bar lets users switch focus areas (e.g LLM version or data source). Single or multi-selection variants can be used depending on the use case. |
The Chatbot branding elements follow EMBL brand guidelines but can be updated to suit your use case. For advice on branding updates please contact the EMBL Communications Team.
Texts shown in the examples are placeholder content. Please review and update all wording to fit your your project needs and ensure it meets legal, accessibility and organisational requirements.
The component targets WCAG 2.1 AA accessibility standard.
AI Assistant
AI Assistant
Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.
includeYou'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type" : "container",
"config" : [object Object],
}
%}
{% include "../path_to/vf-chatbot/vf-chatbot.njk" %}
renderThis approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.
{% render '@vf-chatbot', {
"component-type" : "container",
"config" : [object Object],
}
%}
import React, { useEffect, useRef } from "react";
import { initVFChatbotStandalone } from "@visual-framework/vf-chatbot-standalone/vf-chatbot-standalone.js";
function Chatbot() {
const chatbotRef = useRef(null);
// Define config outside the useEffect so it's accessible to JSX
const vfchatbotStandaloneConfig = {
type: "standalone",
title: "AI Assistant",
welcome_logo: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-64x64-dark-green.svg`,
welcome_message: "Hello! How can I help you today?",
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" 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" href="https://embl.service-now.com/esc?id=sc_cat_item&sys_id=5eeb8eb91b92e650b376da88b04bcbc1">Leave feedback</a>.',
icons: {
assistant_avatar: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-16x16-dark-green.svg`,
user_avatar: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--avatar-user.svg`,
send_button: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-send.svg`,
main_logo_url: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-32x32-dark-green.svg`,
selector_logo_url: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-24x24-dark-green.svg`,
},
api: {
chat_endpoint: false,//"/api/chat",
feedback_endpoint: "/api/feedback",
qa_data_url: `${process.env.PUBLIC_URL}/assets/chatbot/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: true,
// 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"
}
},
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",
}
};
useEffect(() => {
if (!chatbotRef.current) return;
// Create ALL templates programmatically to avoid React className issues
const createAllTemplates = () => {
// Get the chatbot standalone container
const chatbotContainer = chatbotRef.current.querySelector(
"[data-vf-js-chatbot-standalone]"
);
if (!chatbotContainer) {
console.error("Chatbot container not found");
return;
}
// Remove existing templates
const templateIds = [
"welcome-suggestion-template",
"feedback-positive-template",
"feedback-negative-template",
"user-message-template",
"assistant-message-template",
"loading-indicator-template",
"action-prompts-template",
"single-action-prompt-template",
];
templateIds.forEach((id) => {
const existing = document.getElementById(id);
if (existing) existing.remove();
});
// Create welcome suggestion template
const welcomeTemplate = document.createElement("template");
welcomeTemplate.id = "welcome-suggestion-template";
welcomeTemplate.innerHTML = `
<div class="vf-chatbot-action-prompt">
<a href="#" class="vf-chatbot-action-prompt__link vf-u-padding--200"></a>
</div>
`;
chatbotContainer.appendChild(welcomeTemplate);
// Create feedback positive template
const feedbackPosTemplate = document.createElement("template");
feedbackPosTemplate.id = "feedback-positive-template";
feedbackPosTemplate.innerHTML = `
<div class="vf-chatbot-feedback__form vf-u-margin__top--400">
<div class="vf-chatbot-feedback__form-content vf-u-padding--400">
<div class="vf-chatbot-feedback__form-content-header">
<div class="vf-chatbot-feedback__title">Tell us more (optional)</div>
<button role="button" class="vf-chatbot-feedback__form-close vf-button vf-button--icon vf-button--dismiss | vf-banner__button" type="button" aria-label="Close feedback form" data-vf-js-feedback-form-close>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
<div class="vf-chatbot-feedback__options">
<button class="vf-chatbot-feedback__option" data-feedback-option="accurate">Accurate answer</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="easy">Easy to understand</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="formatted">Well formatted</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="helpful">Helpful</button>
</div>
<div class="vf-chatbot-feedback__comment-title">Comments</div>
<textarea class="vf-chatbot-feedback__comment" rows="4" data-vf-js-feedback-comment></textarea>
<button type="button" class="vf-chatbot-feedback__submit vf-u-padding--200" data-vf-js-feedback-submit>Submit</button>
</div>
</div>
`;
chatbotContainer.appendChild(feedbackPosTemplate);
// Create feedback negative template
const feedbackNegTemplate = document.createElement("template");
feedbackNegTemplate.id = "feedback-negative-template";
feedbackNegTemplate.innerHTML = `
<div class="vf-chatbot-feedback__form vf-u-margin__top--400">
<div class="vf-chatbot-feedback__form-content vf-u-padding--400">
<div class="vf-chatbot-feedback__form-content-header">
<div class="vf-chatbot-feedback__title">Tell us more (optional)</div>
<button role="button" class="vf-chatbot-feedback__form-close vf-button vf-button--icon vf-button--dismiss | vf-banner__button" type="button" aria-label="Close feedback form" data-vf-js-feedback-form-close>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
<div class="vf-chatbot-feedback__options">
<button class="vf-chatbot-feedback__option" data-feedback-option="inaccurate">Inaccurate answer</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="nocontext">Did not use context</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="poorformat">Poorly formatted</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="nothelpful">Not helpful</button>
</div>
<div class="vf-chatbot-feedback__comment-title">Comments</div>
<textarea class="vf-chatbot-feedback__comment" rows="4" data-vf-js-feedback-comment></textarea>
<button type="button" class="vf-chatbot-feedback__submit vf-u-padding--200" data-vf-js-feedback-submit>Submit</button>
</div>
</div>
`;
chatbotContainer.appendChild(feedbackNegTemplate);
// Create user message template
const userTemplate = document.createElement("template");
userTemplate.id = "user-message-template";
userTemplate.innerHTML = `
<div class="vf-chatbot-message vf-chatbot-message--user vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<span class="vf-chatbot-message__avatar-name">You</span>
<img src="${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--avatar-user.svg" alt="You" />
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-prompt vf-u-padding__left--200 vf-u-padding__right--200">Hello!</div>
</div>
</div>
`;
chatbotContainer.appendChild(userTemplate);
// Create assistant message template
const assistantTemplate = document.createElement("template");
assistantTemplate.id = "assistant-message-template";
assistantTemplate.innerHTML = `
<div class="vf-chatbot-message vf-chatbot-message--assistant vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<img src="${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-16x16-dark-green.svg" alt="AI Assistant" />
<span class="vf-chatbot-message__avatar-name">AI Assistant</span>
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-prompt vf-u-padding__left--200 vf-u-padding__right--200">How can I help you?</div>
</div>
</div>
<div class="vf-chatbot-feedback vf-u-margin__top--200" data-vf-js-chatbot-feedback></div>
`;
chatbotContainer.appendChild(assistantTemplate);
// Create loading indicator template
const loadingTemplate = document.createElement("template");
loadingTemplate.id = "loading-indicator-template";
loadingTemplate.innerHTML = `
<div class="vf-chatbot-message vf-chatbot-message--assistant vf-chatbot-message--loading vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<img src="${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-16x16-dark-green.svg" alt="AI Assistant" />
<span class="vf-chatbot-message__avatar-name">AI Assistant</span>
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-loading-dots">...</div>
</div>
</div>
`;
chatbotContainer.appendChild(loadingTemplate);
// Create action prompts template
const actionPromptsTemplate = document.createElement("template");
actionPromptsTemplate.id = "action-prompts-template";
actionPromptsTemplate.innerHTML = `
<div class="vf-chatbot-action-prompts">
<div class="vf-chatbot-action-prompts__list" data-vf-js-action-prompts-list></div>
</div>
`;
chatbotContainer.appendChild(actionPromptsTemplate);
// Create single action prompt template
const singleActionTemplate = document.createElement("template");
singleActionTemplate.id = "single-action-prompt-template";
singleActionTemplate.innerHTML = `
<div class="vf-chatbot-action-prompt">
<a href="#" class="vf-chatbot-action-prompt__link vf-u-padding--200"></a>
</div>
`;
chatbotContainer.appendChild(singleActionTemplate);
console.log("All templates created and added to chatbot container");
};
// Create all templates first
createAllTemplates();
// Define ALL handler functions
let suggestionClickCount = 0;
let messageCount = 0;
window.handleMessageSend = function(eventData) {
messageCount++;
console.log(`Message sent (call #${messageCount}):`, eventData.message);
};
window.handleResponseReceive = function(eventData) {
console.log('Response received:', eventData.response);
};
window.handleFeedbackSubmit = function(eventData) {
console.log('Feedback submitted:', eventData);
};
window.handleSuggestionClick = function(eventData) {
suggestionClickCount++;
console.log(`Suggestion clicked (call #${suggestionClickCount}):`, eventData);
console.log('Event data:', JSON.stringify(eventData, null, 2));
};
window.handleError = function(eventData) {
console.log('Error occurred:', eventData);
};
window.handleConversationStart = function(eventData) {
console.log('Conversation started:', eventData);
};
window.handleConversationEnd = function(eventData) {
console.log('Conversation ended:', eventData);
};
// Initialize chatbot with proper cleanup check
setTimeout(() => {
// More thorough initialization check
if (window.vfChatbotInitialized) {
console.log('Global chatbot already initialized, skipping...');
return;
}
const existingInstance = chatbotRef.current?.querySelector('[data-vf-chatbot-initialized]');
if (existingInstance) {
console.log('Component chatbot already initialized, skipping...');
return;
}
if (typeof initVFChatbotStandalone === "function") {
console.log('Starting chatbot initialization...');
const chatbotInstances = initVFChatbotStandalone(vfchatbotStandaloneConfig);
// Mark as initialized globally and on component
window.vfChatbotInitialized = true;
if (chatbotRef.current) {
chatbotRef.current.setAttribute('data-vf-chatbot-initialized', 'true');
}
console.log("Chatbot initialized once:", chatbotInstances);
}
}, 200);
// Complete cleanup function - remove ALL handlers
return () => {
console.log('Cleaning up chatbot handlers...');
// Reset counters
suggestionClickCount = 0;
messageCount = 0;
// Remove all handler functions
delete window.handleMessageSend;
delete window.handleResponseReceive;
delete window.handleFeedbackSubmit;
delete window.handleSuggestionClick;
delete window.handleError;
delete window.handleConversationStart;
delete window.handleConversationEnd;
// Remove global initialization flag
delete window.vfChatbotInitialized;
// Remove initialization marker
if (chatbotRef.current) {
chatbotRef.current.removeAttribute('data-vf-chatbot-initialized');
}
console.log('Cleanup completed');
};
}, []); // Empty dependency array - runs only once!
// Update the return JSX to use config values:
return (
<>
<div
ref={chatbotRef}
className="vf-content vf-chatbot-standalone-container"
data-vf-js-chatbot-standalone-container
>
<div className="vf-chatbot-standalone__header">
<div className="vf-chatbot-standalone__header-left">
<div
className="vf-chatbot-selector"
data-vf-js-chatbot-selector
data-routes-path={`${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot-selector-services.json`}
data-multiselect="true"
data-max-multiselect="3"
data-show-search="true"
data-show-all-services="true"
data-show-all-services-selected="true"
>
<button
className="vf-chatbot-selector__title"
data-vf-js-selector-toggle
>
<img
src={vfchatbotStandaloneConfig.icons.selector_logo_url}
alt={vfchatbotStandaloneConfig.welcome_logo_alt}
/>
<div className="vf-chatbot-selector__title-content">
<span className="vf-chatbot-selector__main-text">
{vfchatbotStandaloneConfig.title}
</span>
<span className="vf-chatbot-selector__title-text">
Services
</span>
</div>
<span className="vf-chatbot-selector__chevron">
<svg
width="32"
height="31"
viewBox="0 0 32 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_3647_8230)">
<path
d="M15.999 19.0975C15.7378 19.098 15.479 19.0468 15.2377 18.9468C14.9963 18.8469 14.7771 18.7001 14.5926 18.5151L8.32863 11.9279C8.21951 11.8137 8.13399 11.6791 8.07698 11.5318C8.01998 11.3845 7.99261 11.2274 7.99645 11.0695C8.00028 10.9116 8.03525 10.756 8.09934 10.6117C8.16342 10.4673 8.25537 10.337 8.36992 10.2283C8.48446 10.1195 8.61934 10.0344 8.76683 9.97791C8.91432 9.92139 9.07152 9.89454 9.2294 9.89889C9.38729 9.90325 9.54277 9.93872 9.68692 10.0033C9.83107 10.0678 9.96106 10.1602 10.0694 10.2751L15.7094 16.2143C15.7467 16.2537 15.7916 16.2851 15.8414 16.3066C15.8912 16.3281 15.9448 16.3391 15.999 16.3391C16.0533 16.3391 16.1069 16.3281 16.1567 16.3066C16.2065 16.2851 16.2514 16.2537 16.2886 16.2143L21.9286 10.2751C22.037 10.1602 22.167 10.0678 22.3112 10.0033C22.4553 9.93872 22.6108 9.90325 22.7687 9.89889C22.9266 9.89454 23.0838 9.92139 23.2312 9.97791C23.3787 10.0344 23.5136 10.1195 23.6282 10.2283C23.7427 10.337 23.8347 10.4673 23.8987 10.6117C23.9628 10.756 23.9978 10.9116 24.0016 11.0695C24.0055 11.2274 23.9781 11.3845 23.9211 11.5318C23.8641 11.6791 23.7786 11.8137 23.6694 11.9279L17.439 18.4991C17.2503 18.6888 17.0259 18.8394 16.7788 18.9421C16.5316 19.0448 16.2667 19.0976 15.999 19.0975Z"
fill="#707372"
/>
</g>
<defs>
<clipPath id="clip0_3647_8230">
<rect
width="16"
height="16"
fill="white"
transform="translate(8 6.5)"
/>
</clipPath>
</defs>
</svg>
</span>
</button>
<div
className="vf-chatbot-selector__dropdown"
data-vf-js-selector-dropdown
>
<div className="vf-chatbot-selector__search">
<label
className="vf-u-sr-only"
id="vf-chatbot-selector-search-label"
htmlFor="vf-chatbot-selector-search"
>
Type to search
</label>
<input
type="text"
id="vf-chatbot-selector-search"
aria-labelledby="vf-chatbot-selector-search-label"
placeholder="Select services"
data-vf-js-selector-search
/>
</div>
<div className="vf-chatbot-selector__header">
<span data-max-select="3">Select up to 3 services</span>
<a
href="#"
className="vf-chatbot-selector__clear"
data-vf-js-selector-clear
>
Clear all
</a>
</div>
<ul
className="vf-chatbot-selector__list"
data-vf-js-chatbot-selector-list
></ul>
</div>
</div>
</div>
</div>
<div
className="vf-chatbot-standalone | vf-u-background-color-ui--grey--light vf-u-margin__bottom--400"
data-vf-js-chatbot-standalone
>
<div
className="vf-chatbot-standalone__content"
data-vf-js-chatbot-standalone-content
>
<div
className="vf-chatbot-welcome"
data-vf-js-chatbot-welcome
data-max-questions={vfchatbotStandaloneConfig.welcome_max_suggestions}
data-enable-qa-data-loading="true"
data-enable-predefined-qa="true"
data-enable-fallback-responses="true"
data-qa-data-url={vfchatbotStandaloneConfig.api.qa_data_url}
>
<div className="vf-chatbot-welcome__content">
<div className="vf-chatbot-welcome__logo">
<img
src={vfchatbotStandaloneConfig.welcome_logo}
alt={vfchatbotStandaloneConfig.welcome_logo_alt}
/>
</div>
<h1 className="vf-chatbot-welcome__title">{vfchatbotStandaloneConfig.title}</h1>
<div className="vf-chatbot-welcome__message">
{vfchatbotStandaloneConfig.welcome_message}
</div>
</div>
<div className="vf-chatbot-welcome__suggestions">
<p className="vf-chatbot-welcome__suggestions-title">
{vfchatbotStandaloneConfig.welcome_suggestions_title}
</p>
<div
className="vf-chatbot-welcome__suggestions-grid"
data-vf-js-chatbot-welcome-suggestions-grid
></div>
</div>
</div>
<div
className="vf-chatbot-standalone__messages"
data-vf-js-chatbot-standalone-messages
data-auto-scroll={vfchatbotStandaloneConfig.behavior.auto_scroll}
></div>
<div
className="vf-chatbot-standalone__disclaimer"
data-vf-js-chatbot-standalone-disclaimer
>
<div className="vf-banner vf-banner--alert vf-banner--info">
<div className="vf-banner__content">
<p className="vf-banner__text" dangerouslySetInnerHTML={{__html: vfchatbotStandaloneConfig.disclaimer}}>
</p>
<button
type="button"
role="button"
aria-label="close notification banner"
className="vf-button vf-button--icon vf-button--dismiss | vf-banner__button"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div className="vf-chatbot-standalone__input-container">
<div className="vf-chatbot-standalone__input-wrapper">
<label
className="vf-u-sr-only"
id="vf-chatbot-standalone-input-label"
htmlFor="vf-chatbot-standalone-input"
>
{vfchatbotStandaloneConfig.input_placeholder}
</label>
<textarea
id="vf-chatbot-standalone-input"
aria-labelledby="vf-chatbot-standalone-input-label"
className="vf-chatbot-standalone__input vf-form__textarea vf-u-padding__left--400"
placeholder={vfchatbotStandaloneConfig.input_placeholder}
rows="1"
data-vf-js-chatbot-standalone-input
></textarea>
<button
className="vf-chatbot-standalone__send-button"
aria-label="Send message"
data-vf-js-chatbot-standalone-send
>
<img
src={vfchatbotStandaloneConfig.icons.send_button}
alt="Send"
/>
</button>
</div>
<div
className="vf-chatbot-standalone__footnote vf-u-margin__top--200"
data-vf-js-chatbot-standalone-footnote
dangerouslySetInnerHTML={{__html: vfchatbotStandaloneConfig.footnote}}
>
</div>
</div>
</div>
</div>
</>
);
}
export default Chatbot;
<!-- Standalone Chatbot -->
<div class="vf-content vf-chatbot-standalone-container" data-vf-js-chatbot-standalone-container data-vf-chatbot-config="{"type":"standalone","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,"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","selector_logo_url":"../../assets/vf-chatbot/assets/vf-chatbot--icon-24x24-dark-green.svg"},"api":{"chat_endpoint":"/api/chat","feedback_endpoint":"/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":true,"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"}},"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"},"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>."}">
<div class="vf-chatbot-standalone__header">
<div class="vf-chatbot-standalone__header-left">
<div class="vf-chatbot-selector" data-vf-js-chatbot-selector data-routes-path="../../assets/vf-chatbot/assets/vf-chatbot-selector-services.json" data-multiselect="true" data-max-multiselect="3" data-show-search="true" data-show-all-services="true" data-show-all-services-selected="true">
<button class="vf-chatbot-selector__title" data-vf-js-selector-toggle>
<img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-24x24-dark-green.svg" alt="AI Assistant">
<div class="vf-chatbot-selector__title-content vf-u-margin__left--200">
<span class="vf-chatbot-selector__main-text">AI Assistant</span>
<span class="vf-chatbot-selector__title-text">Services</span>
</div>
<span class="vf-chatbot-selector__chevron">
<svg width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3647_8230)">
<path d="M15.999 19.0975C15.7378 19.098 15.479 19.0468 15.2377 18.9468C14.9963 18.8469 14.7771 18.7001 14.5926 18.5151L8.32863 11.9279C8.21951 11.8137 8.13399 11.6791 8.07698 11.5318C8.01998 11.3845 7.99261 11.2274 7.99645 11.0695C8.00028 10.9116 8.03525 10.756 8.09934 10.6117C8.16342 10.4673 8.25537 10.337 8.36992 10.2283C8.48446 10.1195 8.61934 10.0344 8.76683 9.97791C8.91432 9.92139 9.07152 9.89454 9.2294 9.89889C9.38729 9.90325 9.54277 9.93872 9.68692 10.0033C9.83107 10.0678 9.96106 10.1602 10.0694 10.2751L15.7094 16.2143C15.7467 16.2537 15.7916 16.2851 15.8414 16.3066C15.8912 16.3281 15.9448 16.3391 15.999 16.3391C16.0533 16.3391 16.1069 16.3281 16.1567 16.3066C16.2065 16.2851 16.2514 16.2537 16.2886 16.2143L21.9286 10.2751C22.037 10.1602 22.167 10.0678 22.3112 10.0033C22.4553 9.93872 22.6108 9.90325 22.7687 9.89889C22.9266 9.89454 23.0838 9.92139 23.2312 9.97791C23.3787 10.0344 23.5136 10.1195 23.6282 10.2283C23.7427 10.337 23.8347 10.4673 23.8987 10.6117C23.9628 10.756 23.9978 10.9116 24.0016 11.0695C24.0055 11.2274 23.9781 11.3845 23.9211 11.5318C23.8641 11.6791 23.7786 11.8137 23.6694 11.9279L17.439 18.4991C17.2503 18.6888 17.0259 18.8394 16.7788 18.9421C16.5316 19.0448 16.2667 19.0976 15.999 19.0975Z" fill="#707372" />
</g>
<defs>
<clipPath id="clip0_3647_8230">
<rect width="16" height="16" fill="white" transform="translate(8 6.5)" />
</clipPath>
</defs>
</svg>
</span>
</button>
<div class="vf-chatbot-selector__dropdown" data-vf-js-selector-dropdown>
<div class="vf-chatbot-selector__search">
<label class="vf-u-sr-only" id="vf-chatbot-selector-search-label" for="vf-chatbot-selector-search">Type to search</label>
<input type="text" id="vf-chatbot-selector-search" aria-labelledby="vf-chatbot-selector-search-label" placeholder="Select services" data-vf-js-selector-search>
</div>
<div class="vf-chatbot-selector__header">
<span data-max-select="3">Select up to 3 services</span>
<a href="#" class="vf-chatbot-selector__clear" role="button" data-vf-js-selector-clear>Clear all</a>
</div>
<ul class="vf-chatbot-selector__list" data-vf-js-chatbot-selector-list>
<!-- Routes will be populated dynamically via JavaScript -->
</ul>
</div>
</div>
</div>
</div>
<div class="vf-chatbot-standalone | vf-u-background-color-ui--grey--light vf-u-margin__bottom--400" data-vf-js-chatbot-standalone>
<div class="vf-chatbot-standalone__content" data-vf-js-chatbot-standalone-content>
<!-- Welcome Screen -->
<div class="vf-chatbot-welcome" data-vf-js-chatbot-welcome data-max-questions="4" data-enable-qa-data-loading="true" data-enable-predefined-qa="true" data-enable-fallback-responses="true" data-qa-data-url="">
<div class="vf-chatbot-welcome__content">
<div class="vf-chatbot-welcome__logo">
<img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-32x32-dark-green.svg" alt="AI Assistant">
</div>
<h1 class="vf-chatbot-welcome__title">AI Assistant</h1>
<div class="vf-chatbot-welcome__message">
Welcome! I'm here to help
</div>
</div>
<div class="vf-chatbot-welcome__suggestions">
<p class="vf-chatbot-welcome__suggestions-title vf-u-margin__bottom--200">Try asking me:</p>
<div class="vf-chatbot-welcome__suggestions-grid" data-vf-js-chatbot-welcome-suggestions-grid>
<!-- Suggestions will be populated dynamically from qa.json using the template below -->
</div>
</div>
<!-- Template for welcome suggestions using vf-chatbot-action-prompt -->
<template id="welcome-suggestion-template">
<div class="vf-chatbot-action-prompt">
<a href="#" class="vf-chatbot-action-prompt__link vf-u-padding--200" role="button">
</a>
</div>
</template>
</div>
<!-- Messages Container -->
<div class="vf-chatbot-standalone__messages-no-scrollbar" data-vf-js-chatbot-standalone-messages data-auto-scroll="true">
<!-- Messages will be added here dynamically -->
</div>
<!-- Disclaimer Banner -->
<div class="vf-chatbot-standalone__disclaimer" data-vf-js-chatbot-standalone-disclaimer>
<div class="vf-banner vf-banner--alert vf-banner--info">
<div class="vf-banner__content">
<p class="vf-banner__text">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>.</p>
<button role="button" aria-label="close notification banner" class="vf-button vf-button--icon vf-button--dismiss | vf-banner__button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Input Container -->
<div class="vf-chatbot-standalone__input-container">
<div class="vf-chatbot-standalone__input-wrapper">
<label class="vf-u-sr-only" id="vf-chatbot-standalone-input-label" for="vf-chatbot-standalone-input">Ask me</label>
<textarea id="vf-chatbot-standalone-input" aria-labelledby="vf-chatbot-standalone-input-label" class="vf-chatbot-standalone__input vf-form__textarea vf-u-padding__left--400" placeholder="Ask me ..." rows="1" data-vf-js-chatbot-standalone-input></textarea>
<button class="vf-chatbot-standalone__send-button" aria-label="Send message" data-vf-js-chatbot-standalone-send>
<img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-send.svg" alt="Send">
</button>
</div>
<div class="vf-chatbot-standalone__footnote vf-u-margin__top--200" data-vf-js-chatbot-standalone-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>.
</div>
</div>
<!-- Templates -->
<template id="feedback-positive-template">
<div class="vf-chatbot-feedback__form vf-u-margin__top--400">
<div class="vf-chatbot-feedback__form-content vf-u-padding--400">
<div class="vf-chatbot-feedback__form-content-header">
<div class="vf-chatbot-feedback__title">Tell us more (optional)</div>
<button role="button" class="vf-chatbot-feedback__form-close vf-button vf-button--icon vf-button--dismiss | vf-banner__button" type="button" aria-label="Close feedback form" data-vf-js-feedback-form-close>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
<div class="vf-chatbot-feedback__options">
<button class="vf-chatbot-feedback__option" data-feedback-option="accurate">
Accurate answer
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="easy">
Easy to understand
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="formatted">
Well formatted
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="helpful">
Helpful
</button>
</div>
<label id="vf-chatbot-feedback-comment-title" for=id="vf-chatbot-feedback-comment" class="vf-chatbot-feedback__comment-title">Comments</label>
<textarea id="vf-chatbot-feedback-comment" aria-labelledby="vf-chatbot-feedback-comment-title" class="vf-chatbot-feedback__comment" rows="4"></textarea>
<button type="submit" class="vf-chatbot-feedback__submit vf-u-padding--200" data-vf-js-feedback-submit>
Submit
</button>
</div>
</div>
</template>
<template id="feedback-negative-template">
<div class="vf-chatbot-feedback__form vf-u-margin__top--400">
<div class="vf-chatbot-feedback__form-content vf-u-padding--400">
<div class="vf-chatbot-feedback__form-content-header">
<div class="vf-chatbot-feedback__title">Tell us more (optional)</div>
<button role="button" class="vf-chatbot-feedback__form-close vf-button vf-button--icon vf-button--dismiss | vf-banner__button" type="button" aria-label="Close feedback form" data-vf-js-feedback-form-close>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
<div class="vf-chatbot-feedback__options">
<button class="vf-chatbot-feedback__option" data-feedback-option="inaccurate">
Inaccurate answer
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="nocontext">
Did not use context
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="poorformat">
Poorly formatted
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="nothelpful">
Not helpful
</button>
</div>
<label id="vf-chatbot-feedback-comment-title" for=id="vf-chatbot-feedback-comment" class="vf-chatbot-feedback__comment-title">Comments</label>
<textarea id="vf-chatbot-feedback-comment" aria-labelledby="vf-chatbot-feedback-comment-title" class="vf-chatbot-feedback__comment" rows="4"></textarea>
<button type="submit" class="vf-chatbot-feedback__submit vf-u-padding--200" data-vf-js-feedback-submit>
Submit
</button>
</div>
</div>
</template>
<template id="user-message-template">
<div class="vf-chatbot-message vf-chatbot-message--user vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<span class="vf-chatbot-message__avatar-name">You</span>
<img src="../../assets/vf-chatbot/assets/vf-chatbot--avatar-user.svg" alt="You">
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-prompt vf-u-padding__left--200 vf-u-padding__right--200">
Hello!
</div>
</div>
</div>
</template>
<template id="assistant-message-template">
<div class="vf-chatbot-message vf-chatbot-message--assistant vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg" alt="AI Assistant">
<span class="vf-chatbot-message__avatar-name">AI Assistant</span>
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-prompt vf-u-padding__left--200 vf-u-padding__right--200">
How can I help you?
</div>
</div>
</div>
<div class="vf-chatbot-feedback vf-u-margin__top--200" data-vf-js-chatbot-feedback></div>
</template>
<template id="loading-indicator-template">
<div class="vf-chatbot-message vf-chatbot-message--assistant vf-chatbot-message--loading vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg" alt="AI Assistant">
<span class="vf-chatbot-message__avatar-name">AI Assistant</span>
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-loading-dots">
...
</div>
</div>
</div>
</template>
<template id="action-prompts-template">
<div class="vf-chatbot-action-prompts">
<div class="vf-chatbot-action-prompts__list" data-vf-js-action-prompts-list>
<!-- Individual prompts will be populated here -->
</div>
</div>
</template>
<template id="single-action-prompt-template">
<div class="vf-chatbot-action-prompt">
<a href="#" class="vf-chatbot-action-prompt__link vf-u-padding--200" role="button">
</a>
</div>
</template>
</div>
</div>
Are you sure you want to close the chat?
Your current conversation history will be permanently deleted.
AI Assistant
AI Assistant
Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.
includeYou'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type" : "container",
"config" : [object Object],
}
%}
{% include "../path_to/vf-chatbot/vf-chatbot.njk" %}
renderThis approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.
{% render '@vf-chatbot', {
"component-type" : "container",
"config" : [object Object],
}
%}
import React, { useEffect, useRef } from "react";
import { initVFChatbotModal } from "@visual-framework/vf-chatbot-modal/vf-chatbot-modal.js";
function Chatbot() {
const chatbotRef = useRef(null);
// Define config outside the useEffect so it's accessible to JSX
const vfchatbotModalConfig = {
title: "AI Assistant",
welcome_logo: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-64x64-dark-green.svg`,
welcome_message: "Hello! How can I help you today?",
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" 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" href="https://embl.service-now.com/esc?id=sc_cat_item&sys_id=5eeb8eb91b92e650b376da88b04bcbc1">Leave feedback</a>.',
icons: {
assistant_avatar: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-16x16-dark-green.svg`,
user_avatar: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--avatar-user.svg`,
send_button: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-send.svg`,
main_logo_url: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-32x32-dark-green.svg`,,
selector_logo_url: `${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-24x24-dark-green.svg`,
},
api: {
chat_endpoint: false,//"/api/chat",
feedback_endpoint: "/api/feedback",
qa_data_url: `${process.env.PUBLIC_URL}/assets/chatbot/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: true,
// 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"
}
},
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",
}
};
useEffect(() => {
if (!chatbotRef.current) return;
// Create ALL templates programmatically to avoid React className issues
const createAllTemplates = () => {
// Get the chatbot modal container
const chatbotContainer = chatbotRef.current.querySelector(
"[data-vf-js-chatbot-modal]"
);
if (!chatbotContainer) {
console.error("Chatbot container not found");
return;
}
// Remove existing templates
const templateIds = [
"welcome-suggestion-template",
"feedback-positive-template",
"feedback-negative-template",
"user-message-template",
"assistant-message-template",
"loading-indicator-template",
"action-prompts-template",
"single-action-prompt-template",
];
templateIds.forEach((id) => {
const existing = document.getElementById(id);
if (existing) existing.remove();
});
// Create welcome suggestion template
const welcomeTemplate = document.createElement("template");
welcomeTemplate.id = "welcome-suggestion-template";
welcomeTemplate.innerHTML = `
<div class="vf-chatbot-action-prompt">
<a href="#" class="vf-chatbot-action-prompt__link vf-u-padding--200"></a>
</div>
`;
chatbotContainer.appendChild(welcomeTemplate);
// Create feedback positive template
const feedbackPosTemplate = document.createElement("template");
feedbackPosTemplate.id = "feedback-positive-template";
feedbackPosTemplate.innerHTML = `
<div class="vf-chatbot-feedback__form vf-u-margin__top--400">
<div class="vf-chatbot-feedback__form-content vf-u-padding--400">
<div class="vf-chatbot-feedback__form-content-header">
<div class="vf-chatbot-feedback__title">Tell us more (optional)</div>
<button role="button" class="vf-chatbot-feedback__form-close vf-button vf-button--icon vf-button--dismiss | vf-banner__button" type="button" aria-label="Close feedback form" data-vf-js-feedback-form-close>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
<div class="vf-chatbot-feedback__options">
<button class="vf-chatbot-feedback__option" data-feedback-option="accurate">Accurate answer</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="easy">Easy to understand</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="formatted">Well formatted</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="helpful">Helpful</button>
</div>
<div class="vf-chatbot-feedback__comment-title">Comments</div>
<textarea class="vf-chatbot-feedback__comment" rows="4" data-vf-js-feedback-comment></textarea>
<button type="button" class="vf-chatbot-feedback__submit vf-u-padding--200" data-vf-js-feedback-submit>Submit</button>
</div>
</div>
`;
chatbotContainer.appendChild(feedbackPosTemplate);
// Create feedback negative template
const feedbackNegTemplate = document.createElement("template");
feedbackNegTemplate.id = "feedback-negative-template";
feedbackNegTemplate.innerHTML = `
<div class="vf-chatbot-feedback__form vf-u-margin__top--400">
<div class="vf-chatbot-feedback__form-content vf-u-padding--400">
<div class="vf-chatbot-feedback__form-content-header">
<div class="vf-chatbot-feedback__title">Tell us more (optional)</div>
<button role="button" class="vf-chatbot-feedback__form-close vf-button vf-button--icon vf-button--dismiss | vf-banner__button" type="button" aria-label="Close feedback form" data-vf-js-feedback-form-close>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
<div class="vf-chatbot-feedback__options">
<button class="vf-chatbot-feedback__option" data-feedback-option="inaccurate">Inaccurate answer</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="nocontext">Did not use context</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="poorformat">Poorly formatted</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="nothelpful">Not helpful</button>
</div>
<div class="vf-chatbot-feedback__comment-title">Comments</div>
<textarea class="vf-chatbot-feedback__comment" rows="4" data-vf-js-feedback-comment></textarea>
<button type="button" class="vf-chatbot-feedback__submit vf-u-padding--200" data-vf-js-feedback-submit>Submit</button>
</div>
</div>
`;
chatbotContainer.appendChild(feedbackNegTemplate);
// Create user message template
const userTemplate = document.createElement("template");
userTemplate.id = "user-message-template";
userTemplate.innerHTML = `
<div class="vf-chatbot-message vf-chatbot-message--user vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<span class="vf-chatbot-message__avatar-name">You</span>
<img src="${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--avatar-user.svg" alt="You" />
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-prompt vf-u-padding__left--200 vf-u-padding__right--200">Hello!</div>
</div>
</div>
`;
chatbotContainer.appendChild(userTemplate);
// Create assistant message template
const assistantTemplate = document.createElement("template");
assistantTemplate.id = "assistant-message-template";
assistantTemplate.innerHTML = `
<div class="vf-chatbot-message vf-chatbot-message--assistant vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<img src="${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-16x16-dark-green.svg" alt="AI Assistant" />
<span class="vf-chatbot-message__avatar-name">AI Assistant</span>
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-prompt vf-u-padding__left--200 vf-u-padding__right--200">How can I help you?</div>
</div>
</div>
<div class="vf-chatbot-feedback vf-u-margin__top--200" data-vf-js-chatbot-feedback></div>
`;
chatbotContainer.appendChild(assistantTemplate);
// Create loading indicator template
const loadingTemplate = document.createElement("template");
loadingTemplate.id = "loading-indicator-template";
loadingTemplate.innerHTML = `
<div class="vf-chatbot-message vf-chatbot-message--assistant vf-chatbot-message--loading vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<img src="${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot--icon-16x16-dark-green.svg" alt="AI Assistant" />
<span class="vf-chatbot-message__avatar-name">AI Assistant</span>
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-loading-dots">...</div>
</div>
</div>
`;
chatbotContainer.appendChild(loadingTemplate);
// Create action prompts template
const actionPromptsTemplate = document.createElement("template");
actionPromptsTemplate.id = "action-prompts-template";
actionPromptsTemplate.innerHTML = `
<div class="vf-chatbot-action-prompts">
<div class="vf-chatbot-action-prompts__list" data-vf-js-action-prompts-list></div>
</div>
`;
chatbotContainer.appendChild(actionPromptsTemplate);
// Create single action prompt template
const singleActionTemplate = document.createElement("template");
singleActionTemplate.id = "single-action-prompt-template";
singleActionTemplate.innerHTML = `
<div class="vf-chatbot-action-prompt">
<a href="#" class="vf-chatbot-action-prompt__link vf-u-padding--200"></a>
</div>
`;
chatbotContainer.appendChild(singleActionTemplate);
console.log("All templates created and added to chatbot container");
};
// Create all templates first
createAllTemplates();
// Define ALL handler functions
let suggestionClickCount = 0;
let messageCount = 0;
window.handleMessageSend = function(eventData) {
messageCount++;
console.log(`Message sent (call #${messageCount}):`, eventData.message);
};
window.handleResponseReceive = function(eventData) {
console.log('Response received:', eventData.response);
};
window.handleFeedbackSubmit = function(eventData) {
console.log('Feedback submitted:', eventData);
};
window.handleSuggestionClick = function(eventData) {
suggestionClickCount++;
console.log(`Suggestion clicked (call #${suggestionClickCount}):`, eventData);
console.log('Event data:', JSON.stringify(eventData, null, 2));
};
window.handleError = function(eventData) {
console.log('Error occurred:', eventData);
};
window.handleConversationStart = function(eventData) {
console.log('Conversation started:', eventData);
};
window.handleConversationEnd = function(eventData) {
console.log('Conversation ended:', eventData);
};
// Initialize chatbot with proper cleanup check
setTimeout(() => {
// More thorough initialization check
if (window.vfChatbotInitialized) {
console.log('Global chatbot already initialized, skipping...');
return;
}
const existingInstance = chatbotRef.current?.querySelector('[data-vf-chatbot-initialized]');
if (existingInstance) {
console.log('Component chatbot already initialized, skipping...');
return;
}
if (typeof initVFChatbotModal === "function") {
console.log('Starting chatbot initialization...');
const chatbotInstances = initVFChatbotModal(vfchatbotModalConfig);
// Mark as initialized globally and on component
window.vfChatbotInitialized = true;
if (chatbotRef.current) {
chatbotRef.current.setAttribute('data-vf-chatbot-initialized', 'true');
}
console.log("Chatbot initialized once:", chatbotInstances);
}
}, 200);
// Complete cleanup function - remove ALL handlers
return () => {
console.log('Cleaning up chatbot handlers...');
// Reset counters
suggestionClickCount = 0;
messageCount = 0;
// Remove all handler functions
delete window.handleMessageSend;
delete window.handleResponseReceive;
delete window.handleFeedbackSubmit;
delete window.handleSuggestionClick;
delete window.handleError;
delete window.handleConversationStart;
delete window.handleConversationEnd;
// Remove global initialization flag
delete window.vfChatbotInitialized;
// Remove initialization marker
if (chatbotRef.current) {
chatbotRef.current.removeAttribute('data-vf-chatbot-initialized');
}
console.log('Cleanup completed');
};
}, []); // Empty dependency array - runs only once!
// Update the return JSX to use config values:
return (
<>
<div
ref={chatbotRef}
className="vf-content vf-chatbot-modal-container"
data-vf-js-chatbot-modal-container
>
<div className="vf-chatbot-modal__header">
<div className="vf-chatbot-modal__header-left">
<div
className="vf-chatbot-selector"
data-vf-js-chatbot-selector
data-routes-path={`${process.env.PUBLIC_URL}/assets/chatbot/vf-chatbot-selector-services.json`}
data-multiselect="true"
data-max-multiselect="3"
data-show-search="true"
data-show-all-services="true"
data-show-all-services-selected="true"
>
<button
className="vf-chatbot-selector__title"
data-vf-js-selector-toggle
>
<img
src={vfchatbotModalConfig.icons.selector_logo_url}
alt={vfchatbotModalConfig.welcome_logo_alt}
/>
<div className="vf-chatbot-selector__title-content">
<span className="vf-chatbot-selector__main-text">
{vfchatbotModalConfig.title}
</span>
<span className="vf-chatbot-selector__title-text">
Services
</span>
</div>
<span className="vf-chatbot-selector__chevron">
<svg
width="32"
height="31"
viewBox="0 0 32 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_3647_8230)">
<path
d="M15.999 19.0975C15.7378 19.098 15.479 19.0468 15.2377 18.9468C14.9963 18.8469 14.7771 18.7001 14.5926 18.5151L8.32863 11.9279C8.21951 11.8137 8.13399 11.6791 8.07698 11.5318C8.01998 11.3845 7.99261 11.2274 7.99645 11.0695C8.00028 10.9116 8.03525 10.756 8.09934 10.6117C8.16342 10.4673 8.25537 10.337 8.36992 10.2283C8.48446 10.1195 8.61934 10.0344 8.76683 9.97791C8.91432 9.92139 9.07152 9.89454 9.2294 9.89889C9.38729 9.90325 9.54277 9.93872 9.68692 10.0033C9.83107 10.0678 9.96106 10.1602 10.0694 10.2751L15.7094 16.2143C15.7467 16.2537 15.7916 16.2851 15.8414 16.3066C15.8912 16.3281 15.9448 16.3391 15.999 16.3391C16.0533 16.3391 16.1069 16.3281 16.1567 16.3066C16.2065 16.2851 16.2514 16.2537 16.2886 16.2143L21.9286 10.2751C22.037 10.1602 22.167 10.0678 22.3112 10.0033C22.4553 9.93872 22.6108 9.90325 22.7687 9.89889C22.9266 9.89454 23.0838 9.92139 23.2312 9.97791C23.3787 10.0344 23.5136 10.1195 23.6282 10.2283C23.7427 10.337 23.8347 10.4673 23.8987 10.6117C23.9628 10.756 23.9978 10.9116 24.0016 11.0695C24.0055 11.2274 23.9781 11.3845 23.9211 11.5318C23.8641 11.6791 23.7786 11.8137 23.6694 11.9279L17.439 18.4991C17.2503 18.6888 17.0259 18.8394 16.7788 18.9421C16.5316 19.0448 16.2667 19.0976 15.999 19.0975Z"
fill="#707372"
/>
</g>
<defs>
<clipPath id="clip0_3647_8230">
<rect
width="16"
height="16"
fill="white"
transform="translate(8 6.5)"
/>
</clipPath>
</defs>
</svg>
</span>
</button>
<div
className="vf-chatbot-selector__dropdown"
data-vf-js-selector-dropdown
>
<div className="vf-chatbot-selector__search">
<label
className="vf-u-sr-only"
id="vf-chatbot-selector-search-label"
htmlFor="vf-chatbot-selector-search"
>
Type to search
</label>
<input
type="text"
id="vf-chatbot-selector-search"
aria-labelledby="vf-chatbot-selector-search-label"
placeholder="Select services"
data-vf-js-selector-search
/>
</div>
<div className="vf-chatbot-selector__header">
<span data-max-select="3">Select up to 3 services</span>
<a
href="#"
className="vf-chatbot-selector__clear"
data-vf-js-selector-clear
>
Clear all
</a>
</div>
<ul
className="vf-chatbot-selector__list"
data-vf-js-chatbot-selector-list
></ul>
</div>
</div>
</div>
</div>
<div
className="vf-chatbot-modal | vf-u-background-color-ui--grey--light vf-u-margin__bottom--400"
data-vf-js-chatbot-modal
>
<div
className="vf-chatbot-modal__content"
data-vf-js-chatbot-modal-content
>
<div
className="vf-chatbot-welcome"
data-vf-js-chatbot-welcome
data-max-questions={vfchatbotModalConfig.welcome_max_suggestions}
data-enable-qa-data-loading="true"
data-enable-predefined-qa="true"
data-enable-fallback-responses="true"
data-qa-data-url={vfchatbotModalConfig.api.qa_data_url}
>
<div className="vf-chatbot-welcome__content">
<div className="vf-chatbot-welcome__logo">
<img
src={vfchatbotModalConfig.welcome_logo}
alt={vfchatbotModalConfig.welcome_logo_alt}
/>
</div>
<h1 className="vf-chatbot-welcome__title">{vfchatbotModalConfig.title}</h1>
<div className="vf-chatbot-welcome__message">
{vfchatbotModalConfig.welcome_message}
</div>
</div>
<div className="vf-chatbot-welcome__suggestions">
<p className="vf-chatbot-welcome__suggestions-title">
{vfchatbotModalConfig.welcome_suggestions_title}
</p>
<div
className="vf-chatbot-welcome__suggestions-grid"
data-vf-js-chatbot-welcome-suggestions-grid
></div>
</div>
</div>
<div
className="vf-chatbot-modal__messages"
data-vf-js-chatbot-modal-messages
data-auto-scroll={vfchatbotModalConfig.behavior.auto_scroll}
></div>
<div
className="vf-chatbot-modal__disclaimer"
data-vf-js-chatbot-modal-disclaimer
>
<div className="vf-banner vf-banner--alert vf-banner--info">
<div className="vf-banner__content">
<p className="vf-banner__text" dangerouslySetInnerHTML={{__html: vfchatbotModalConfig.disclaimer}}>
</p>
<button
type="button"
role="button"
aria-label="close notification banner"
className="vf-button vf-button--icon vf-button--dismiss | vf-banner__button"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div className="vf-chatbot-modal__input-container">
<div className="vf-chatbot-modal__input-wrapper">
<label
className="vf-u-sr-only"
id="vf-chatbot-modal-input-label"
htmlFor="vf-chatbot-modal-input"
>
{vfchatbotModalConfig.input_placeholder}
</label>
<textarea
id="vf-chatbot-modal-input"
aria-labelledby="vf-chatbot-modal-input-label"
className="vf-chatbot-modal__input vf-form__textarea vf-u-padding__left--400"
placeholder={vfchatbotModalConfig.input_placeholder}
rows="1"
data-vf-js-chatbot-modal-input
></textarea>
<button
className="vf-chatbot-modal__send-button"
aria-label="Send message"
data-vf-js-chatbot-modal-send
>
<img
src={vfchatbotModalConfig.icons.send_button}
alt="Send"
/>
</button>
</div>
<div
className="vf-chatbot-modal__footnote vf-u-margin__top--200"
data-vf-js-chatbot-modal-footnote
dangerouslySetInnerHTML={{__html: vfchatbotModalConfig.footnote}}
>
</div>
</div>
</div>
</div>
</>
);
}
export default Chatbot;
<div class="vf-chatbot" data-vf-js-chatbot>
<button class="vf-chatbot-fab" aria-label="Open chat" data-vf-js-chatbot-fab>
<svg class="vf-chatbot-fab__icon vf-chatbot-fab__icon--chat" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3256_34050)">
<path d="M4.23995 24.0191L4.25995 17.5491H2.85995C1.28995 17.5491 0.00994589 16.2691 0.00994589 14.6991V3.75906C-5.41061e-05 2.18906 1.27995 0.909058 2.84995 0.909058H21.1399C22.7099 0.909058 23.9899 2.18906 23.9899 3.75906V14.6891C23.9899 16.2591 22.7099 17.5391 21.1399 17.5391H10.7399L4.22995 24.0091L4.23995 24.0191ZM2.84995 1.97906C1.86995 1.97906 1.06995 2.77906 1.06995 3.75906V14.6891C1.06995 15.6691 1.86995 16.4691 2.84995 16.4691H5.32995V21.4191L10.2999 16.4691H21.1499C22.1299 16.4691 22.9299 15.6691 22.9299 14.6891V3.75906C22.9299 2.77906 22.1299 1.97906 21.1499 1.97906H2.84995Z" fill="white" />
<path d="M18.27 7.06906C18.76 7.55906 21.93 8.41906 21.93 8.41906C21.93 8.41906 18.75 9.28906 18.27 9.76906C17.79 10.2491 16.92 13.4291 16.92 13.4291C16.92 13.4291 16.04 10.2391 15.57 9.76906C15.1 9.29906 11.91 8.41906 11.91 8.41906C11.91 8.41906 15.02 7.61906 15.57 7.06906C16.12 6.51906 16.92 3.40906 16.92 3.40906C16.92 3.40906 17.78 6.57906 18.27 7.06906Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_3256_34050">
<rect width="24" height="23.11" fill="white" transform="translate(0 0.909058)" />
</clipPath>
</defs>
</svg>
</button>
<!-- Modal Chatbot -->
<div class="vf-content vf-chatbot-modal-container" data-vf-js-chatbot-modal-container data-vf-chatbot-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,"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","selector_logo_url":"../../assets/vf-chatbot/assets/vf-chatbot--icon-24x24-dark-green.svg"},"api":{"chat_endpoint":"/api/chat","feedback_endpoint":"/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":true,"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"}},"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"},"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>."}">
<div class="vf-chatbot-modal__header">
<div class="vf-chatbot-modal__header-left">
<div class="vf-chatbot-selector" data-vf-js-chatbot-selector data-routes-path="../../assets/vf-chatbot/assets/vf-chatbot-selector-services.json" data-multiselect="true" data-max-multiselect="3" data-show-search="true" data-show-all-services="true" data-show-all-services-selected="true">
<button class="vf-chatbot-selector__title" data-vf-js-selector-toggle>
<img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-24x24-dark-green.svg" alt="AI Assistant">
<div class="vf-chatbot-selector__title-content vf-u-margin__left--200">
<span class="vf-chatbot-selector__main-text">AI Assistant</span>
<span class="vf-chatbot-selector__title-text">Services</span>
</div>
<span class="vf-chatbot-selector__chevron">
<svg width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3647_8230)">
<path d="M15.999 19.0975C15.7378 19.098 15.479 19.0468 15.2377 18.9468C14.9963 18.8469 14.7771 18.7001 14.5926 18.5151L8.32863 11.9279C8.21951 11.8137 8.13399 11.6791 8.07698 11.5318C8.01998 11.3845 7.99261 11.2274 7.99645 11.0695C8.00028 10.9116 8.03525 10.756 8.09934 10.6117C8.16342 10.4673 8.25537 10.337 8.36992 10.2283C8.48446 10.1195 8.61934 10.0344 8.76683 9.97791C8.91432 9.92139 9.07152 9.89454 9.2294 9.89889C9.38729 9.90325 9.54277 9.93872 9.68692 10.0033C9.83107 10.0678 9.96106 10.1602 10.0694 10.2751L15.7094 16.2143C15.7467 16.2537 15.7916 16.2851 15.8414 16.3066C15.8912 16.3281 15.9448 16.3391 15.999 16.3391C16.0533 16.3391 16.1069 16.3281 16.1567 16.3066C16.2065 16.2851 16.2514 16.2537 16.2886 16.2143L21.9286 10.2751C22.037 10.1602 22.167 10.0678 22.3112 10.0033C22.4553 9.93872 22.6108 9.90325 22.7687 9.89889C22.9266 9.89454 23.0838 9.92139 23.2312 9.97791C23.3787 10.0344 23.5136 10.1195 23.6282 10.2283C23.7427 10.337 23.8347 10.4673 23.8987 10.6117C23.9628 10.756 23.9978 10.9116 24.0016 11.0695C24.0055 11.2274 23.9781 11.3845 23.9211 11.5318C23.8641 11.6791 23.7786 11.8137 23.6694 11.9279L17.439 18.4991C17.2503 18.6888 17.0259 18.8394 16.7788 18.9421C16.5316 19.0448 16.2667 19.0976 15.999 19.0975Z" fill="#707372" />
</g>
<defs>
<clipPath id="clip0_3647_8230">
<rect width="16" height="16" fill="white" transform="translate(8 6.5)" />
</clipPath>
</defs>
</svg>
</span>
</button>
<div class="vf-chatbot-selector__dropdown" data-vf-js-selector-dropdown>
<div class="vf-chatbot-selector__search">
<label class="vf-u-sr-only" id="vf-chatbot-selector-search-label" for="vf-chatbot-selector-search">Type to search</label>
<input type="text" id="vf-chatbot-selector-search" aria-labelledby="vf-chatbot-selector-search-label" placeholder="Select services" data-vf-js-selector-search>
</div>
<div class="vf-chatbot-selector__header">
<span data-max-select="3">Select up to 3 services</span>
<a href="#" class="vf-chatbot-selector__clear" role="button" data-vf-js-selector-clear>Clear all</a>
</div>
<ul class="vf-chatbot-selector__list" data-vf-js-chatbot-selector-list>
<!-- Routes will be populated dynamically via JavaScript -->
</ul>
</div>
</div>
</div>
<div class="vf-chatbot-modal__header-right">
<button class="vf-chatbot-modal__minimize" aria-label="Minimize" data-vf-js-chatbot-modal-minimize>
<img src="" alt="Minimize">
</button>
<button class="vf-chatbot-modal__close" aria-label="Close" data-vf-js-chatbot-modal-close>
<img src="" alt="Close">
</button>
</div>
</div>
<div class="vf-chatbot-modal | vf-u-background-color-ui--grey--light" data-vf-js-chatbot-modal>
<div class="vf-chatbot-modal__content" data-vf-js-chatbot-modal-content>
<!-- Welcome Screen -->
<div class="vf-chatbot-welcome" data-vf-js-chatbot-welcome data-max-questions="4" data-enable-qa-data-loading="true" data-enable-predefined-qa="true" data-enable-fallback-responses="true" data-qa-data-url="">
<div class="vf-chatbot-welcome__content">
<div class="vf-chatbot-welcome__logo">
<img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-32x32-dark-green.svg" alt="AI Assistant">
</div>
<h1 class="vf-chatbot-welcome__title">AI Assistant</h1>
<div class="vf-chatbot-welcome__message">
Welcome! I'm here to help
</div>
</div>
<div class="vf-chatbot-welcome__suggestions">
<p class="vf-chatbot-welcome__suggestions-title vf-u-margin__bottom--200">Try asking me:</p>
<div class="vf-chatbot-welcome__suggestions-grid" data-vf-js-chatbot-welcome-suggestions-grid>
<!-- Suggestions will be populated dynamically from qa.json using the template below -->
</div>
</div>
<!-- Template for welcome suggestions using vf-chatbot-action-prompt -->
<template id="welcome-suggestion-template">
<div class="vf-chatbot-action-prompt">
<a href="#" class="vf-chatbot-action-prompt__link vf-u-padding--200" role="button">
</a>
</div>
</template>
</div>
<!-- Messages Container -->
<div class="vf-chatbot-modal__messages-no-scrollbar" data-vf-js-chatbot-modal-messages data-auto-scroll="true">
<!-- Messages will be added here dynamically -->
</div>
<!-- Disclaimer Banner -->
<div class="vf-chatbot-modal__disclaimer" data-vf-js-chatbot-modal-disclaimer>
<div class="vf-banner vf-banner--alert vf-banner--info">
<div class="vf-banner__content">
<p class="vf-banner__text">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>.</p>
<button role="button" aria-label="close notification banner" class="vf-button vf-button--icon vf-button--dismiss | vf-banner__button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Input Container -->
<div class="vf-chatbot-modal__input-container vf-u-margin__top--400">
<div class="vf-chatbot-modal__input-wrapper">
<label class="vf-u-sr-only" id="vf-chatbot-modal-input-label" for="vf-chatbot-modal-input">Ask me</label>
<textarea id="vf-chatbot-modal-input" aria-labelledby="vf-chatbot-modal-input-label" class="vf-chatbot-modal__input vf-form__textarea vf-u-padding__left--400" placeholder="Ask me ..." rows="1" data-vf-js-chatbot-modal-input></textarea>
<button class="vf-chatbot-modal__send-button" aria-label="Send message" data-vf-js-chatbot-modal-send>
<img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-send.svg" alt="Send">
</button>
</div>
<div class="vf-chatbot-modal__footnote vf-u-margin__top--200" data-vf-js-chatbot-modal-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>.
</div>
</div>
<div class="vf-chatbot-dialog" data-vf-js-chatbot-dialog>
<div class="vf-chatbot-dialog__content">
<div class="vf-chatbot-dialog__header vf-u-margin__bottom--400">
<h2 class="vf-chatbot-dialog__title">Close chat and delete conversation?</h2>
<button class="vf-chatbot-dialog__close" data-vf-js-dialog-close aria-label="Close dialog">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg>
</button>
</div>
<div class="vf-chatbot-dialog__body vf-u-margin__bottom--800">
<p>Are you sure you want to close the chat? <br>Your current conversation history will be permanently deleted.</p>
</div>
<div class="vf-chatbot-dialog__actions">
<button class="vf-chatbot-dialog__button vf-chatbot-dialog__button--outline" data-vf-js-dialog-cancel>
Keep chat open
</button>
<button class="vf-chatbot-dialog__button vf-chatbot-dialog__button--primary" data-vf-js-dialog-confirm>
Close and delete
</button>
</div>
</div>
</div>
<!-- Templates -->
<template id="feedback-positive-template">
<div class="vf-chatbot-feedback__form vf-u-margin__top--400">
<div class="vf-chatbot-feedback__form-content vf-u-padding--400">
<div class="vf-chatbot-feedback__form-content-header">
<div class="vf-chatbot-feedback__title">Tell us more (optional)</div>
<button role="button" class="vf-chatbot-feedback__form-close vf-button vf-button--icon vf-button--dismiss | vf-banner__button" type="button" aria-label="Close feedback form" data-vf-js-feedback-form-close>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
<div class="vf-chatbot-feedback__options">
<button class="vf-chatbot-feedback__option" data-feedback-option="accurate">
Accurate answer
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="easy">
Easy to understand
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="formatted">
Well formatted
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="helpful">
Helpful
</button>
</div>
<label id="vf-chatbot-feedback-comment-title" for=id="vf-chatbot-feedback-comment" class="vf-chatbot-feedback__comment-title">Comments</label>
<textarea id="vf-chatbot-feedback-comment" aria-labelledby="vf-chatbot-feedback-comment-title" class="vf-chatbot-feedback__comment" rows="4"></textarea>
<button type="submit" class="vf-chatbot-feedback__submit vf-u-padding--200" data-vf-js-feedback-submit>
Submit
</button>
</div>
</div>
</template>
<template id="feedback-negative-template">
<div class="vf-chatbot-feedback__form vf-u-margin__top--400">
<div class="vf-chatbot-feedback__form-content vf-u-padding--400">
<div class="vf-chatbot-feedback__form-content-header">
<div class="vf-chatbot-feedback__title">Tell us more (optional)</div>
<button role="button" class="vf-chatbot-feedback__form-close vf-button vf-button--icon vf-button--dismiss | vf-banner__button" type="button" aria-label="Close feedback form" data-vf-js-feedback-form-close>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>dismiss banner</title>
<path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
</svg>
</button>
</div>
<div class="vf-chatbot-feedback__options">
<button class="vf-chatbot-feedback__option" data-feedback-option="inaccurate">
Inaccurate answer
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="nocontext">
Did not use context
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="poorformat">
Poorly formatted
</button>
<button class="vf-chatbot-feedback__option" data-feedback-option="nothelpful">
Not helpful
</button>
</div>
<label id="vf-chatbot-feedback-comment-title" for=id="vf-chatbot-feedback-comment" class="vf-chatbot-feedback__comment-title">Comments</label>
<textarea id="vf-chatbot-feedback-comment" aria-labelledby="vf-chatbot-feedback-comment-title" class="vf-chatbot-feedback__comment" rows="4"></textarea>
<button type="submit" class="vf-chatbot-feedback__submit vf-u-padding--200" data-vf-js-feedback-submit>
Submit
</button>
</div>
</div>
</template>
<template id="user-message-template">
<div class="vf-chatbot-message vf-chatbot-message--user vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<span class="vf-chatbot-message__avatar-name">You</span>
<img src="../../assets/vf-chatbot/assets/vf-chatbot--avatar-user.svg" alt="You">
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-prompt vf-u-padding__left--200 vf-u-padding__right--200">
Hello!
</div>
</div>
</div>
</template>
<template id="assistant-message-template">
<div class="vf-chatbot-message vf-chatbot-message--assistant vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg" alt="AI Assistant">
<span class="vf-chatbot-message__avatar-name">AI Assistant</span>
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-prompt vf-u-padding__left--200 vf-u-padding__right--200">
How can I help you?
</div>
</div>
</div>
<div class="vf-chatbot-feedback vf-u-margin__top--200" data-vf-js-chatbot-feedback></div>
</template>
<template id="loading-indicator-template">
<div class="vf-chatbot-message vf-chatbot-message--assistant vf-chatbot-message--loading vf-u-margin__top--400">
<div class="vf-chatbot-message__avatar vf-u-margin__bottom--200">
<img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg" alt="AI Assistant">
<span class="vf-chatbot-message__avatar-name">AI Assistant</span>
</div>
<div class="vf-chatbot-message__content vf-u-padding--200">
<div class="vf-chatbot-message__content-loading-dots">
...
</div>
</div>
</div>
</template>
<template id="action-prompts-template">
<div class="vf-chatbot-action-prompts">
<div class="vf-chatbot-action-prompts__list" data-vf-js-action-prompts-list>
<!-- Individual prompts will be populated here -->
</div>
</div>
</template>
<template id="single-action-prompt-template">
<div class="vf-chatbot-action-prompt">
<a href="#" class="vf-chatbot-action-prompt__link vf-u-padding--200" role="button">
</a>
</div>
</template>
</div>
</div>
</div>
File system location: components/vf-chatbot
Find an issue on this page? Propose a change or discuss it.
Are you sure you want to close the chat?
Your current conversation history will be permanently deleted.