VF Chatbot : Initial code for standalone chatbot sample app

package.json

@@ -15,30 +15,37 @@
     "@visual-framework/vf-box": "^2.4.0",
     "@visual-framework/vf-button": "3.0.2",
     "@visual-framework/vf-card": "2.7.2",
+    "@visual-framework/vf-chatbot-action-prompt": "^1.0.0-beta.1",
+    "@visual-framework/vf-chatbot-feedback": "^1.0.0-beta.1",
+    "@visual-framework/vf-chatbot-prompt": "^1.0.0-beta.1",
+    "@visual-framework/vf-chatbot-selector": "^1.0.0-beta.1",
+    "@visual-framework/vf-chatbot-sources": "^1.0.0-beta.1",
+    "@visual-framework/vf-chatbot-standalone": "^1.0.0-beta.1",
+    "@visual-framework/vf-chatbot-welcome": "^1.0.0-beta.1",
     "@visual-framework/vf-content": "1.6.16",
     "@visual-framework/vf-core": "2.2.47",
-    "@visual-framework/vf-font-plex-mono": "1.1.1",
-    "@visual-framework/vf-font-plex-sans": "1.1.1",
+    "@visual-framework/vf-extensions-react": "^0.0.8",
+    "@visual-framework/vf-font-plex-mono": "^1.1.3",
+    "@visual-framework/vf-font-plex-sans": "^1.1.3",
+    "@visual-framework/vf-footer": "^1.2.1",
+    "@visual-framework/vf-global-header": "^3.1.6",
     "@visual-framework/vf-grid": "^1.4.1",
     "@visual-framework/vf-hero": "^4.0.3",
-    "@visual-framework/vf-global-header": "^3.1.6",
-    "@visual-framework/vf-footer": "^1.2.1",
     "@visual-framework/vf-link": "^2.0.2",
-    "@visual-framework/vf-sass-config": "2.6.1",
-    "@visual-framework/vf-sass-starter": "^0.1.30",
-    "@visual-framework/vf-utility-classes": "2.0.0",
     "@visual-framework/vf-mega-menu": "^1.0.2",
     "@visual-framework/vf-profile": "^1.4.0",
+    "@visual-framework/vf-sass-config": "2.6.1",
+    "@visual-framework/vf-sass-starter": "^0.1.30",
     "@visual-framework/vf-search": "^1.0.0",
     "@visual-framework/vf-stack": "^3.0.0",
     "@visual-framework/vf-tabs": "^2.1.5",
     "@visual-framework/vf-text": "^1.1.1",
     "@visual-framework/vf-u-fullbleed": "^1.2.2",
-    "@visual-framework/vf-extensions-react": "^0.0.8",
+    "@visual-framework/vf-utility-classes": "2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "sass": "^1.69.5",
     "web-vitals": "^2.1.4"
   },

public/assets/chatbot/vf-chatbot-qa.json

@@ -0,0 +1,96 @@
+{
+  "predefinedQA": {
+    "What is Metabolights?": {
+      "answer": "<div>MetaboLights is an open access repository for metabolomics studies, including raw experimental data and associated metadata.</div>\n<div>To know more:</div>\n<ol>\n  <li class='vf-list__item'>\n    <a href='#'>Methods and resources for omics studies</a>: A curated collection of EMBL-EBI on-demand training.\n  </li>\n  <li class='vf-list__item'>\n    <a href='#'>MetaboLights</a>: Quick tour.\n  </li>\n  <li class='vf-list__item'>\n    <a href='#'>Chemical biology</a>: A curated set of EMBL-EBI online courses.\n  </li>\n</ol>"
+    },
+    "Learn how to apply bioinformatics tools in your academic work": {
+      "answer": "Our Tools and Services portal provides access to commonly used resources in genomics, proteomics, and more. We also offer tutorials and use cases to guide integration into your academic projects."
+    },
+    "Start a guided learning path in bioinformatics": {
+      "answer": "Great! You can begin with our structured courses and learning paths designed for beginners at the EMBL-EBI Training Portal. Perfect for students and early-stage researchers.",
+      "sources": [
+        {
+          "domain": "ebi.ac.uk",
+          "title": "EMBL-EBI Training",
+          "url": "https://www.ebi.ac.uk/training/",
+          "description": "Delivering world-class training in data-driven life sciences."
+        }
+      ]
+    },
+    "Find resources and tools for structural biology analysis": {
+      "answer": "Discover tools for structural biology, including protein modeling, domain analysis, and sequence alignment. Visit our Tools & Services portal to access popular resources.",
+      "sources": [
+        {
+          "domain": "github.com",
+          "title": "Structural Biology",
+          "url": "https://github.com/pengzhangzhi/Awesome-Computational-Structural-Biology?utm_source=chatgpt.com",
+          "description": "Awesome Computational Structural Biology (GitHub) – curated list of tools, tutorials, and courses"
+        },
+        {
+          "domain": "hwi.buffalo.edu",
+          "title": "Structural Biology Resource Page",
+          "url": "https://hwi.buffalo.edu/structural-biology-resources/?utm_source=chatgpt.com",
+          "description": "Structural Biology Resource Page – links to cryo-EM, crystallography, and X-ray data collection info from Hauptman-Woodward Institute"
+        },
+        {
+          "domain": "www.creative-biostructure.com",
+          "title": "Structural Biology Tools",
+          "url": "https://www.creative-biostructure.com/structural-biology-tools.htm?srsltid=AfmBOooqvJ0ksY6p6Pryq1diKVWPxNK0t68zKnuyMuTB0_k1IABozOXO&utm_source=chatgpt.com",
+          "description": "Creative Biostructure – lists structural resources and software across core techniques like crystallography and cryo-EM"
+        }
+      ]
+    },
+    "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"
+        }
+      ]
+    },
+    "Access documentation and developer tools": {
+      "answer": "Explore the databse, where you can find model predictions, usage documentation, API access, and links to related publications. Developers can also access integration guides through the EMBL-EBI API Hub.",
+      "sources": [
+        {
+          "domain": "ebi.ac.uk",
+          "title": "EMBL-EBI APIs and Tools",
+          "url": "https://www.ebi.ac.uk/services",
+          "description": "Browse services by domain (genomics, proteomics, etc.) and access APIs."
+        },
+        {
+          "domain": "ebi.ac.uk",
+          "title": "EMBL-EBI API Documentation",
+          "url": "https://www.ebi.ac.uk/about/api",
+          "description": "RESTful APIs for tools like BLAST, InterProScan, Clustal Omega, etc."
+        }
+      ]
+    },
+    "Discover upcoming bioinformatics workshops for beginners": {
+      "answer": "Start your learning journey with our Training Events Calendar, featuring upcoming live webinars, virtual workshops, and in-person courses. Many sessions are designed for beginners and cover topics like genomics, data standards, and tool usage."
+    }
+  },
+  "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/"
+        }
+      ]
+    }
+  ]
+}

public/assets/chatbot/vf-chatbot-selector-llms.json

@@ -0,0 +1,45 @@
+{
+  "routes": [
+    {
+      "id": "gpt4-turbo",
+      "title": "GPT-4 Turbo",
+      "description": "Advanced language model with broader context window and improved capabilities",
+      "selected": true
+    },
+    {
+      "id": "claude3-opus",
+      "title": "Claude 3 Opus",
+      "description": "Anthropic's most powerful model with enhanced reasoning and analysis capabilities"
+    },
+    {
+      "id": "gemini-ultra",
+      "title": "Gemini Ultra",
+      "description": "Google's most capable model for complex tasks and multitask reasoning"
+    },
+    {
+      "id": "llama3",
+      "title": "LLaMA 3",
+      "description": "Meta's open foundation model with strong performance across various tasks"
+    },
+    {
+      "id": "mixtral",
+      "title": "Mixtral 8x7B",
+      "description": "Mistral AI's mixture-of-experts model combining multiple specialized networks"
+    },
+    {
+      "id": "palm3",
+      "title": "PaLM 3",
+      "description": "Google's latest PaLM model optimized for reasoning and multilingual tasks"
+    },
+    {
+      "id": "gpt4-vision",
+      "title": "GPT-4 Vision",
+      "description": "Specialized version of GPT-4 for multimodal tasks including image understanding"
+    },
+    {
+      "id": "claude3-sonnet",
+      "title": "Claude 3 Sonnet",
+      "description": "Balanced model offering strong performance with improved efficiency"
+    }
+  ]
+}

public/assets/chatbot/vf-chatbot-selector-services.json

@@ -0,0 +1,52 @@
+{
+  "routes": [
+    {
+      "id": "ensembl",
+      "title": "Ensembl"
+    },
+    {
+      "id": "uniprot",
+      "title": "UniProt"
+    },
+    {
+      "id": "pfam",
+      "title": "Pfam"
+    },
+    {
+      "id": "interpro",
+      "title": "InterPro"
+    },
+    {
+      "id": "chembl",
+      "title": "ChEMBL"
+    },
+    {
+      "id": "pdbe",
+      "title": "PDBe"
+    },
+    {
+      "id": "expression-atlas",
+      "title": "Expression Atlas"
+    },
+    {
+      "id": "pride",
+      "title": "PRIDE"
+    },
+    {
+      "id": "arrayexpress",
+      "title": "ArrayExpress"
+    },
+    {
+      "id": "intact",
+      "title": "IntAct"
+    },
+    {
+      "id": "reactome",
+      "title": "Reactome"
+    },
+    {
+      "id": "metabolights",
+      "title": "MetaboLights"
+    }
+  ]
+}

public/index.html

@@ -60,5 +60,7 @@
     <link href="https://stable.visual-framework.dev/feed.xml" type="application/rss+xml" rel="alternate" title="Visual Framework updates and announcements">
   </head>
   <body class="vf-body | vf-stack embl-content-hub-loaded">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
   </body>
 </html>

src/App.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
-import { HashRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import Home from './components/Home';
+import Chatbot from './components/Chatbot';
 import VFBadge from './components/VFBadge';
 import VFBackToTop from './components/VFBackToTop';
 import VFButton from './components/VFButton';
@@ -38,6 +39,7 @@ function App() {
         <Header />
         <Routes>
           <Route path="/" element={<Home />} />
+          <Route path="/chatbot" element={<Chatbot />} />
           <Route path="/components/vf-badge" element={<VFBadge />} />
           <Route path="/components/vf-back-to-top" element={<VFBackToTop />} />
           <Route path="/components/vf-button" element={<VFButton />} />