alpha

This version is in early development and is subject to change and therefore not ready for wide use. There may be other stable versions available.

Chatbot Modal element

The vf-chatbot-modal component appears as an overlay, typically in the bottom right corner of the screen. It is designed for contextual assistance, allowing users to receive support without navigating away from the current page.

github location npm version

Usage

When to use this component

Only use the chatbot modal if it truly enables it helps users:

  • Get quick, contextual help while staying focused on their main task
  • Access specific guidance (such as FAQs, form instructions or navigation tips) without leaving the current page
  • Complete short, task-oriented interactions with minimal disruption

For example, the modal works well during checkouts or while filling out complex forms, where users may need immediate support without losing their progress. Chatbot modals can also benefit users who are familiar with a service and want targeted help to speed up their work. Test with users to ensure the embedded assistance enhances rather than disrupts their workflow.

When not to use this component

The chatbot modal overlays the existing interface and may distract users or obscure important content. Not all users will notice the chatbot icon or understand when to interact with it.

Do not use the chatbot modal if the help content is essential for completing a task. Critical guidance should be directly visible in the interface.

Test your workflow without a chatbot first. Clear content, in-line guidance, and intuitive layout may negate the need for a modal.

It's usually better to:

  • Integrate support directly within the page or form
  • Display key information upfront, especially if it applies to all users
  • Use tooltips or inline help for very brief, contextual instructions
  • Direct users to a dedicated help page for complex support needs

Avoid putting the chatbot modal for help or multi-step interactions. These are better suited to a chatbot standalone experience or a well-structured support section.

Avoid placing modals over elements that users need to interact with, and never trigger the chatbot automatically without user intent.

Deciding between modal vs standalone

The chatbot modal and chatbot standalone are two distinct variants for delivering conversational interfaces. Choose between them based on use case needs and task complexity.

Modal

  • For in-context support (e.g. help with current page or workflow)
  • Access point is via a floating action button on the page
  • Supports simple tasks such as getting information

Standalone

  • Suitable for exploratory or focused workflows (e.g. discovering genetic variants)
  • Launched via a link (such as "Talk to our AI chat assistant")
  • Supports more complex tasks that benefit from sustained engagement

Anatomy

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 (Max. 2 lines of text).
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.

Flows

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.

Working example

You can access working example of modal version by clicking on the floating action button at the bottom right of this page.

Visual branding elements and content

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.

Accessibility

The component targets WCAG 2.1 AA accessibility standard.

Install

This repository is distributed with npm. After installing npm and yarn, you can install vf-chatbot-modal and other dependant components with this command.

yarn add @visual-framework/vf-chatbot @visual-framework/vf-chatbot-modal  @visual-framework/vf-chatbot-fab  @visual-framework/vf-chatbot-dialog @visual-framework/vf-chatbot-action-prompt @visual-framework/vf-chatbot-feedback @visual-framework/vf-chatbot-prompt @visual-framework/vf-chatbot-selector @visual-framework/vf-chatbot-sources @visual-framework/vf-chatbot-welcome

Sass/CSS

@import "@visual-framework/vf-chatbot-modal/index.scss";

JavaScript



import { initVFChatbot } from 'vf-chatbot/vf-chatbot.js';
import { initVFChatbotModal } from 'vf-chatbot-modal/vf-chatbot-modal.js';
import { initVFChatbotFab } from 'vf-chatbot-fab/vf-chatbot-fab.js';
window.addEventListener("load", () => {
  initVFChatbot(config);
});

where config is the configuration object with different options as described below

Core Configuration Options

const config = {
  // Basic Settings
  type: "modal",
  chatbotBottomMargin: 100, //This is optional and is used to apply bottom margin in pixels
  title: "AI Assistant",
  welcome_message: "Welcome! I'm here to help",
  input_placeholder: "Ask me anything...",
  welcome_max_suggestions: 4,

  // Content & Branding
  disclaimer: 'Custom disclaimer with <a href="/privacy">privacy policy</a>',
  footnote: 'Custom footnote with <a href="/feedback">feedback link</a>',

  // Icons & Assets
  icons: {
    assistant_avatar: "path/to/assistant-icon.svg",
    user_avatar: "path/to/user-icon.svg",
    send_button: "path/to/send-icon.svg",
    main_logo_url: "path/to/logo.svg",
    selector_logo_url: "path/to/selector-logo.svg",
  },

  // API Configuration
  api: {
    chat_endpoint: "/api/chat",
    feedback_endpoint: "/api/feedback",
    qa_data_url: "path/to/qa-data.json",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer your-token"
    },
    timeout: 10000
  },

  // Feature Toggles
  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
  },

  // New options
  behavior: {
    auto_scroll: true,
    typing_delay: 800,
    show_scrollbar: false // or false to hide scrollbar
  },
  selectorContext: {
    chatbotRoutes: {
      multiSelect: false,
      showSearch: true,
      showSearchThreshold: 5,
      routes: "assets/vf-chatbot-selector-services.json",
      placeholder: "Search",
      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"
  }
};

Service Selector Configuration

The chatbot includes an integrated selector component which can be configured to present different selection options to user:

const selectorConfig = {
  selectorContext: {
    chatbotRoutes: {
      // 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
      placeholder: "Search",
      title: "Available Services"
    }
  }
};

Selector Data Format (JSON):

{
  "routes": [
    {
      "id": "service-1",
      "title": "Service 1 title"
    },
    {
      "id": "service-2", 
      "title": "Service 2 title"
    }
  ]
}

Event Handling

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. Configure custom handlers for chatbot events:

const config = {
  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"
  }
};

// Implement handler functions
function handleMessageSend(message, conversationId) {
  console.log('User sent:', message);
  // Track analytics, log conversations, etc.
}

function handleResponseReceive(response, sources, prompts) {
  console.log('Assistant responded:', response);
  // Process response, update UI, etc.
}

function handleFeedbackSubmit(feedbackData) {
  console.log('Feedback received:', feedbackData);
  // Send to analytics, update models, etc.
}

Custom Event Listeners

Likewise you can also listen to events emitted by the chatbot for specific interactions:

// Listen for specific chatbot events
document.addEventListener('vf-chatbot:message-send', (event) => {
  const { message, conversationId } = event.detail;
  // Handle message send
});

document.addEventListener('vf-chatbot:message-receive', (event) => {
  const { message, conversationId } = event.detail;
  // Handle message send
});

document.addEventListener('vf-chatbot-feedback:submit', (event) => {
  const { messageId, feedbackType, feedbackText, feedbackComment } = event.detail;
  // Handle feedback submission
});

document.addEventListener('vf-chatbot-welcome:suggestion-click', (event) => {
  const { question } = event.detail;
  // Handle suggestion clicks
});

document.addEventListener('vf-chatbot:assistant-change', (obj) => {
  const { selectedRoutes } = obj.selectedAssistants;
  const { conversationId } = obj.conversationId;
  // Handle service selection
});

document.addEventListener('vf-chatbot:error', (event) => {
  const { message, conversationId } = event.detail;
  // Handle message send
});

document.addEventListener('vf-chatbot:conversation-start', (event) => {
  const { message, conversationId } = event.detail;
  // Handle conversation start
});

document.addEventListener('vf-chatbot:conversation-end', (event) => {
  const { message, conversationId } = event.detail;
  // Handle conversation end
});

Feedback System Configuration

Feedback (with form)

const config = {
  features: {
    enable_feedback: true,
    enable_instant_feedback: false // Default
  }
};

Instant Feedback (one-click)

const config = {
  features: {
    enable_feedback: true,
    enable_instant_feedback: true // Thumbs up/down only
  }
};

Q&A Data Configuration

Load predefined questions and answers:

const config = {
  features: {
    enable_predefined_qa: true,
    enable_qa_data_loading: true
  },
  api: {
    qa_data_url: "path/to/qa-data.json"
  }
};

Q&A Data Format:

{
  "predefinedQA": {
    "How can I submit genomic data to EMBL-EBI?": {
      "answer": "To submit genomic data, visit the EMBL-EBI submission portal, where you’ll find step-by-step guides and tools for submitting sequencing data, assemblies, annotations, and more.",
      "sources": [
        {
          "domain": "ebi.ac.uk",
          "title": "EMBL's European Bioinformatics Institute",
          "url": "https://www.ebi.ac.uk/",
          "description": "Run BLAST searches against comprehensive sequence databases at EMBL-EBI."
        },
        {
          "domain": "ena-docs.readthedocs.io",
          "title": "ENA Documentation",
          "url": "https://ena-docs.readthedocs.io/en/latest/",
          "description": "ENA Documentation"
        }
      ]
    }
  },
  "fallbackResponses": [
    {
      "answer": "I'm sorry, I'm having trouble connecting to my knowledge base right now. Could you try again in a moment?",
      "prompts": [
        {
          "action_text": "Contact support team",
          "action_url": "tel:+44 1223 494 444"
        },
        {
          "action_text": "Submit a support request",
          "action_url": "https://www.ebi.ac.uk/about/contact/support/"
        }
      ]
    }
  ]
}

API Integration

Chat Endpoint

Your chat API should accept POST requests:

// Request format
{
  "message": "User's question",
  "conversationId": "unique-id",
  "context": {
    "selectedServices": ["service-1", "service-2"]
  }
}

// Response format
{
  "response": "Assistant's answer",
  "sources": [
    {
      "title": "Documentation Link",
      "url": "https://example.com/docs"
    }
  ],
  "prompts": [
    {
      "action_text": "Learn More",
      "action_url": "https://example.com/learn"
    }
  ]
}

Custom Welcome Screen

const config = {
  features: {
    enable_welcome: true,
    enable_welcome_suggestions: true
  },
  welcome_logo: true,
  welcome_message: "Welcome to our AI assistant!",
  welcome_suggestions_title: "Popular questions:",
  welcome_max_suggestions: 6
};

Source Citations

const config = {
  features: {
    enable_sources: true
    enable_sources_custom_format: true,
  }
};

// Sources in API response
{
  "response": "Here's the information...",
  "sources": [
    {
      "title": "Official Documentation", 
      "url": "https://docs.example.com",
      "description": "Complete guide to the platform"
    }
  ]
}

Action Prompts

// Action prompts in API response
{
  "response": "I can help you with that...",
  "prompts": [
    {
      "action_text": "Start Tutorial",
      "action_url": "https://example.com/tutorial"
    },
    {
      "action_text": "Contact Support", 
      "action_url": "mailto:support@example.com"
    }
  ]
}

React Integration

The HTML template can be adapted for React applications. See the React syntax section below for implementation details on using the HTML template for the chatbot in JSX components.

Variants

Select up to 3 services Clear all

AI Assistant

Welcome! I'm here to help

Try asking me:

Disclaimer: This chatbot is designed to assist you with general information and basic inquiries. See our disclaimer notes.

Review AI generated content for accuracy. Leave feedback.

Close chat and delete conversation?

Are you sure you want to close the chat?
Your current conversation history will be permanently deleted.

Nunjucks syntax

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.

Using include

You'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" : "element",
"hide-from-sitemenu" : true,
"config" : [object Object],

 }
%}
{% include "../path_to/vf-chatbot-modal/vf-chatbot-modal.njk" %}

Using render

This 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-modal', {
  "component-type" : "element",
  "hide-from-sitemenu" : true,
  "config" : [object Object],
  }
%}
HTML 
<!-- Modal Chatbot -->
<div class="vf-content vf-chatbot-modal-container" data-vf-js-chatbot-modal-container data-vf-chatbot-config="{&quot;type&quot;:&quot;modal&quot;,&quot;title&quot;:&quot;AI Assistant&quot;,&quot;welcome_logo&quot;:true,&quot;welcome_message&quot;:&quot;Welcome! I&#39;m here to help&quot;,&quot;welcome_logo_alt&quot;:&quot;AI Assistant&quot;,&quot;welcome_suggestions_title&quot;:&quot;Try asking me:&quot;,&quot;input_placeholder&quot;:&quot;Ask me ...&quot;,&quot;welcome_max_suggestions&quot;:4,&quot;icons&quot;:{&quot;assistant_avatar&quot;:&quot;../../assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg&quot;,&quot;user_avatar&quot;:&quot;../../assets/vf-chatbot/assets/vf-chatbot--avatar-user.svg&quot;,&quot;send_button&quot;:&quot;../../assets/vf-chatbot/assets/vf-chatbot--icon-send.svg&quot;,&quot;main_logo_url&quot;:&quot;../../assets/vf-chatbot/assets/vf-chatbot--icon-32x32-dark-green.svg&quot;,&quot;minimize&quot;:&quot;../../assets/vf-chatbot/assets/vf-chatbot--icon-minimize.svg&quot;,&quot;close&quot;:&quot;../../assets/vf-chatbot/assets/vf-chatbot--icon-close.svg&quot;,&quot;selector_logo_url&quot;:&quot;../../assets/vf-chatbot/assets/vf-chatbot--icon-24x24-dark-green.svg&quot;},&quot;api&quot;:{&quot;chat_endpoint&quot;:&quot;/api/chat&quot;,&quot;feedback_endpoint&quot;:&quot;/api/feedback&quot;,&quot;qa_data_url&quot;:&quot;../../assets/vf-chatbot/assets/vf-chatbot-qa.json&quot;,&quot;headers&quot;:{&quot;Content-Type&quot;:&quot;application/json&quot;,&quot;Authorization&quot;:&quot;Bearer your-token&quot;},&quot;timeout&quot;:10000},&quot;features&quot;:{&quot;enable_welcome&quot;:true,&quot;enable_feedback&quot;:true,&quot;enable_sources&quot;:true,&quot;enable_sources_custom_format&quot;:true,&quot;enable_welcome_suggestions&quot;:true,&quot;enable_typing_indicator&quot;:true,&quot;enable_disclaimer&quot;:true,&quot;enable_predefined_qa&quot;:true,&quot;enable_fallback_responses&quot;:true,&quot;enable_qa_data_loading&quot;:true,&quot;enable_instant_feedback&quot;:false},&quot;behavior&quot;:{&quot;auto_scroll&quot;:true,&quot;typing_delay&quot;:800,&quot;show_scrollbar&quot;:false},&quot;selectorContext&quot;:{&quot;chatbotRoutes&quot;:{&quot;multiSelect&quot;:true,&quot;maxMultiSelect&quot;:3,&quot;showSearch&quot;:true,&quot;showSearchThreshold&quot;:5,&quot;showAllServices&quot;:true,&quot;showAllServicesSelected&quot;:true,&quot;routes&quot;:&quot;../../assets/vf-chatbot/assets/vf-chatbot-selector-services.json&quot;,&quot;placeholder&quot;:&quot;Select services&quot;,&quot;title&quot;:&quot;Services&quot;}},&quot;handlers&quot;:{&quot;on_message_send&quot;:&quot;handleMessageSend&quot;,&quot;on_response_receive&quot;:&quot;handleResponseReceive&quot;,&quot;on_feedback_submit&quot;:&quot;handleFeedbackSubmit&quot;,&quot;on_suggestion_click&quot;:&quot;handleSuggestionClick&quot;,&quot;on_error&quot;:&quot;handleError&quot;,&quot;on_conversation_start&quot;:&quot;handleConversationStart&quot;,&quot;on_conversation_end&quot;:&quot;handleConversationEnd&quot;},&quot;disclaimer&quot;:&quot;Disclaimer: This chatbot is designed to assist you with general information and basic inquiries. See our &lt;a class=&#92;&quot;vf-banner__link&#92;&quot; target=&#92;&quot;_blank&#92;&quot; rel=&#92;&quot;noopener noreferrer&#92;&quot; aria-label=&#92;&quot;disclaimer notes (opens in new tab)&#92;&quot; href=&#92;&quot;https://www.ebi.ac.uk/data-protection/privacy-notice/embl-ebi-public-website/&#92;&quot;&gt;disclaimer notes&lt;/a&gt;.&quot;,&quot;footnote&quot;:&quot;Review AI generated content for accuracy. &lt;a class=&#92;&quot;vf-link&#92;&quot; target=&#92;&quot;_blank&#92;&quot; rel=&#92;&quot;noopener noreferrer&#92;&quot; aria-label=&#92;&quot;Leave feedback (opens in new tab)&#92;&quot; href=&#92;&quot;https://embl.service-now.com/esc?id=sc_cat_item&amp;sys_id=5eeb8eb91b92e650b376da88b04bcbc1&#92;&quot;&gt;Leave feedback&lt;/a&gt;.&quot;}">

  <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="../../assets/vf-chatbot/assets/vf-chatbot--icon-minimize.svg" alt="Minimize">
      </button>
      <button class="vf-chatbot-modal__close" aria-label="Close" data-vf-js-chatbot-modal-close>
        <img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-close.svg" 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>

Examples

Installation info

This repository is distributed with npm. After installing npm and yarn, you can install vf-chatbot-modal and other dependant components with this command.

yarn add @visual-framework/vf-chatbot @visual-framework/vf-chatbot-modal  @visual-framework/vf-chatbot-fab  @visual-framework/vf-chatbot-dialog @visual-framework/vf-chatbot-action-prompt @visual-framework/vf-chatbot-feedback @visual-framework/vf-chatbot-prompt @visual-framework/vf-chatbot-selector @visual-framework/vf-chatbot-sources @visual-framework/vf-chatbot-welcome

Sass/CSS

@import "@visual-framework/vf-chatbot-modal/index.scss";

JavaScript



import { initVFChatbot } from 'vf-chatbot/vf-chatbot.js';
import { initVFChatbotModal } from 'vf-chatbot-modal/vf-chatbot-modal.js';
import { initVFChatbotFab } from 'vf-chatbot-fab/vf-chatbot-fab.js';
window.addEventListener("load", () => {
initVFChatbot(config);
});

where config is the configuration object with different options as described below

Core Configuration Options

const config = {
// Basic Settings
type: "modal",
chatbotBottomMargin: 100, //This is optional and is used to apply bottom margin in pixels
title: "AI Assistant",
welcome_message: "Welcome! I'm here to help",
input_placeholder: "Ask me anything...",
welcome_max_suggestions: 4,

// Content & Branding
disclaimer: 'Custom disclaimer with <a href="/privacy">privacy policy</a>',
footnote: 'Custom footnote with <a href="/feedback">feedback link</a>',


// Icons & Assets
icons: {
assistant_avatar: "path/to/assistant-icon.svg",
user_avatar: "path/to/user-icon.svg",
send_button: "path/to/send-icon.svg",
main_logo_url: "path/to/logo.svg",
selector_logo_url: "path/to/selector-logo.svg",
},


// API Configuration
api: {
chat_endpoint: "/api/chat",
feedback_endpoint: "/api/feedback",
qa_data_url: "path/to/qa-data.json",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer your-token"
},
timeout: 10000
},


// Feature Toggles
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
},


// New options
behavior: {
auto_scroll: true,
typing_delay: 800,
show_scrollbar: false // or false to hide scrollbar
},
selectorContext: {
chatbotRoutes: {
multiSelect: false,
showSearch: true,
showSearchThreshold: 5,
routes: "assets/vf-chatbot-selector-services.json",
placeholder: "Search",
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"
}
};

Service Selector Configuration

The chatbot includes an integrated selector component which can be configured to present different selection options to user:

const selectorConfig = {
selectorContext: {
chatbotRoutes: {
// 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
placeholder: "Search",
title: "Available Services"
}
}
};

Selector Data Format (JSON):

{
"routes": [
{
"id": "service-1",
"title": "Service 1 title"
},
{
"id": "service-2", 
"title": "Service 2 title"
}
]
}

Event Handling

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. Configure custom handlers for chatbot events:

const config = {
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"
}
};

// Implement handler functions
function handleMessageSend(message, conversationId) {
console.log('User sent:', message);
// Track analytics, log conversations, etc.
}


function handleResponseReceive(response, sources, prompts) {
console.log('Assistant responded:', response);
// Process response, update UI, etc.
}


function handleFeedbackSubmit(feedbackData) {
console.log('Feedback received:', feedbackData);
// Send to analytics, update models, etc.
}

Custom Event Listeners

Likewise you can also listen to events emitted by the chatbot for specific interactions:

// Listen for specific chatbot events
document.addEventListener('vf-chatbot:message-send', (event) => {
const { message, conversationId } = event.detail;
// Handle message send
});

document.addEventListener('vf-chatbot:message-receive', (event) => {
const { message, conversationId } = event.detail;
// Handle message send
});


document.addEventListener('vf-chatbot-feedback:submit', (event) => {
const { messageId, feedbackType, feedbackText, feedbackComment } = event.detail;
// Handle feedback submission
});


document.addEventListener('vf-chatbot-welcome:suggestion-click', (event) => {
const { question } = event.detail;
// Handle suggestion clicks
});


document.addEventListener('vf-chatbot:assistant-change', (obj) => {
const { selectedRoutes } = obj.selectedAssistants;
const { conversationId } = obj.conversationId;
// Handle service selection
});


document.addEventListener('vf-chatbot:error', (event) => {
const { message, conversationId } = event.detail;
// Handle message send
});


document.addEventListener('vf-chatbot:conversation-start', (event) => {
const { message, conversationId } = event.detail;
// Handle conversation start
});


document.addEventListener('vf-chatbot:conversation-end', (event) => {
const { message, conversationId } = event.detail;
// Handle conversation end
});

Feedback System Configuration

Feedback (with form)

const config = {
features: {
enable_feedback: true,
enable_instant_feedback: false // Default
}
};

Instant Feedback (one-click)

const config = {
features: {
enable_feedback: true,
enable_instant_feedback: true // Thumbs up/down only
}
};

Q&A Data Configuration

Load predefined questions and answers:

const config = {
features: {
enable_predefined_qa: true,
enable_qa_data_loading: true
},
api: {
qa_data_url: "path/to/qa-data.json"
}
};

Q&A Data Format:

{
"predefinedQA": {
"How can I submit genomic data to EMBL-EBI?": {
"answer": "To submit genomic data, visit the EMBL-EBI submission portal, where you’ll find step-by-step guides and tools for submitting sequencing data, assemblies, annotations, and more.",
"sources": [
{
  "domain": "ebi.ac.uk",
  "title": "EMBL's European Bioinformatics Institute",
  "url": "https://www.ebi.ac.uk/",
  "description": "Run BLAST searches against comprehensive sequence databases at EMBL-EBI."
},
{
  "domain": "ena-docs.readthedocs.io",
  "title": "ENA Documentation",
  "url": "https://ena-docs.readthedocs.io/en/latest/",
  "description": "ENA Documentation"
}
]
}
},
"fallbackResponses": [
{
"answer": "I'm sorry, I'm having trouble connecting to my knowledge base right now. Could you try again in a moment?",
"prompts": [
{
  "action_text": "Contact support team",
  "action_url": "tel:+44 1223 494 444"
},
{
  "action_text": "Submit a support request",
  "action_url": "https://www.ebi.ac.uk/about/contact/support/"
}
]
}
]
}

API Integration

Chat Endpoint

Your chat API should accept POST requests:

// Request format
{
"message": "User's question",
"conversationId": "unique-id",
"context": {
"selectedServices": ["service-1", "service-2"]
}
}

// Response format
{
"response": "Assistant's answer",
"sources": [
{
"title": "Documentation Link",
"url": "https://example.com/docs"
}
],
"prompts": [
{
"action_text": "Learn More",
"action_url": "https://example.com/learn"
}
]
}

Custom Welcome Screen

const config = {
features: {
enable_welcome: true,
enable_welcome_suggestions: true
},
welcome_logo: true,
welcome_message: "Welcome to our AI assistant!",
welcome_suggestions_title: "Popular questions:",
welcome_max_suggestions: 6
};

Source Citations

const config = {
features: {
enable_sources: true
enable_sources_custom_format: true,
}
};

// Sources in API response
{
"response": "Here's the information...",
"sources": [
{
"title": "Official Documentation",
"url": "https://docs.example.com",
"description": "Complete guide to the platform"
}
]
}

Action Prompts

// Action prompts in API response
{
"response": "I can help you with that...",
"prompts": [
{
"action_text": "Start Tutorial",
"action_url": "https://example.com/tutorial"
},
{
"action_text": "Contact Support", 
"action_url": "mailto:support@example.com"
}
]
}

React Integration

The HTML template can be adapted for React applications. See the React syntax section below for implementation details on using the HTML template for the chatbot in JSX components.

Changelog

Changelog

Changelog

1.0.0-beta.2

  • Updated package.json with correct settings

1.0.0-beta.1

  • Initial version

Assets


File system location: components/vf-chatbot-modal

Find an issue on this page? Propose a change or discuss it.

AI Assistant

Welcome! I'm here to help

Try asking me:

Disclaimer: This chatbot is designed to assist you with general information and basic inquiries. See our disclaimer notes.

Review AI generated content for accuracy. Leave feedback.

Close chat and delete conversation?

Are you sure you want to close the chat?
Your current conversation history will be permanently deleted.