diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 65c0ac6..72b735e 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -44,7 +44,7 @@ jobs:
- name: Install Packages
run: yarn install
- name: Build page
- run: yarn build
+ run: CI='' yarn build
env:
PUBLIC_URL: /vf-react
- name: Deploy to gh-pages
diff --git a/craco.config.js b/craco.config.js
new file mode 100644
index 0000000..cfae699
--- /dev/null
+++ b/craco.config.js
@@ -0,0 +1,49 @@
+const path = require("path");
+
+module.exports = {
+ webpack: {
+ configure: (webpackConfig) => {
+ const oneOfRule = webpackConfig.module.rules.find(rule => Array.isArray(rule.oneOf));
+ if (oneOfRule) {
+ oneOfRule.oneOf.forEach(rule => {
+ if (
+ rule.loader &&
+ rule.loader.includes("babel-loader") &&
+ rule.exclude
+ ) {
+ const originalExclude = rule.exclude;
+ rule.exclude = (input) => {
+ if (
+ typeof input === "string" &&
+ input.replace(/\\/g, "/").includes("node_modules/@visual-framework/vf-chatbot")
+ ) {
+ return false;
+ }
+ if (typeof originalExclude === "function") {
+ return originalExclude(input);
+ }
+ if (Array.isArray(originalExclude)) {
+ return originalExclude.some(ex => input.includes(ex));
+ }
+ return false;
+ };
+
+ // Add this: force automatic runtime for our package
+ if (!rule.options) rule.options = {};
+ if (!rule.options.overrides) rule.options.overrides = [];
+ rule.options.overrides.push({
+ test: /@visual-framework[\\\/]vf-chatbot/,
+ presets: [
+ [
+ "@babel/preset-react",
+ { runtime: "automatic" }
+ ]
+ ]
+ });
+ }
+ });
+ }
+ return webpackConfig;
+ }
+ }
+};
\ No newline at end of file
diff --git a/package.json b/package.json
index c2aa339..5c1dae6 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,9 @@
"name": "vf-react",
"version": "0.1.0",
"private": true,
- "homepage": "https://visual-framework.github.io/vf-react/",
+ "homepage": "/vf-react/",
"dependencies": {
+ "@craco/craco": "^7.1.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@@ -15,38 +16,49 @@
"@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": "latest",
+ "@visual-framework/vf-chatbot-action-prompt": "latest",
+ "@visual-framework/vf-chatbot-dialog": "latest",
+ "@visual-framework/vf-chatbot-fab": "latest",
+ "@visual-framework/vf-chatbot-feedback": "latest",
+ "@visual-framework/vf-chatbot-modal": "latest",
+ "@visual-framework/vf-chatbot-prompt": "latest",
+ "@visual-framework/vf-chatbot-selector": "latest",
+ "@visual-framework/vf-chatbot-sources": "latest",
+ "@visual-framework/vf-chatbot-standalone": "latest",
+ "@visual-framework/vf-chatbot-welcome": "latest",
"@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"
},
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
+ "eject": "craco eject"
},
"browserslist": {
"production": [
@@ -59,5 +71,9 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "@babel/plugin-syntax-jsx": "^7.27.1",
+ "@babel/preset-react": "^7.27.1"
}
}
diff --git a/public/assets/vf-chatbot/assets/vf-chatbot--avatar-user.svg b/public/assets/vf-chatbot/assets/vf-chatbot--avatar-user.svg
new file mode 100644
index 0000000..d9e9a53
--- /dev/null
+++ b/public/assets/vf-chatbot/assets/vf-chatbot--avatar-user.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg b/public/assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg
new file mode 100644
index 0000000..1bd078f
--- /dev/null
+++ b/public/assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/assets/vf-chatbot/assets/vf-chatbot--icon-24x24-dark-green.svg b/public/assets/vf-chatbot/assets/vf-chatbot--icon-24x24-dark-green.svg
new file mode 100644
index 0000000..0bb0697
--- /dev/null
+++ b/public/assets/vf-chatbot/assets/vf-chatbot--icon-24x24-dark-green.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/assets/vf-chatbot/assets/vf-chatbot--icon-32x32-dark-green.svg b/public/assets/vf-chatbot/assets/vf-chatbot--icon-32x32-dark-green.svg
new file mode 100644
index 0000000..6388d34
--- /dev/null
+++ b/public/assets/vf-chatbot/assets/vf-chatbot--icon-32x32-dark-green.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/assets/vf-chatbot/assets/vf-chatbot--icon-close.svg b/public/assets/vf-chatbot/assets/vf-chatbot--icon-close.svg
new file mode 100644
index 0000000..3b0417b
--- /dev/null
+++ b/public/assets/vf-chatbot/assets/vf-chatbot--icon-close.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/assets/vf-chatbot/assets/vf-chatbot--icon-minimize.svg b/public/assets/vf-chatbot/assets/vf-chatbot--icon-minimize.svg
new file mode 100644
index 0000000..a0ec4fc
--- /dev/null
+++ b/public/assets/vf-chatbot/assets/vf-chatbot--icon-minimize.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/assets/vf-chatbot/assets/vf-chatbot--icon-send.svg b/public/assets/vf-chatbot/assets/vf-chatbot--icon-send.svg
new file mode 100644
index 0000000..0849ecc
--- /dev/null
+++ b/public/assets/vf-chatbot/assets/vf-chatbot--icon-send.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/assets/vf-chatbot/assets/vf-chatbot-qa.json b/public/assets/vf-chatbot/assets/vf-chatbot-qa.json
new file mode 100644
index 0000000..9a001e3
--- /dev/null
+++ b/public/assets/vf-chatbot/assets/vf-chatbot-qa.json
@@ -0,0 +1,96 @@
+{
+ "predefinedQA": {
+ "What is Metabolights?": {
+ "answer": "MetaboLights is an open access repository for metabolomics studies, including raw experimental data and associated metadata.
\nTo know more:
\n\n - \n Methods and resources for omics studies: A curated collection of EMBL-EBI on-demand training.\n
\n - \n MetaboLights: Quick tour.\n
\n - \n Chemical biology: A curated set of EMBL-EBI online courses.\n
\n
"
+ },
+ "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/"
+ }
+ ]
+ }
+ ]
+}
diff --git a/public/assets/vf-chatbot/assets/vf-chatbot-selector-llms.json b/public/assets/vf-chatbot/assets/vf-chatbot-selector-llms.json
new file mode 100644
index 0000000..f803d2b
--- /dev/null
+++ b/public/assets/vf-chatbot/assets/vf-chatbot-selector-llms.json
@@ -0,0 +1,37 @@
+{
+ "routes": [
+ {
+ "id": "gpt4-turbo",
+ "title": "GPT-4 Turbo",
+ "selected": true
+ },
+ {
+ "id": "claude3-opus",
+ "title": "Claude 3 Opus"
+ },
+ {
+ "id": "gemini-ultra",
+ "title": "Gemini Ultra"
+ },
+ {
+ "id": "llama3",
+ "title": "LLaMA 3"
+ },
+ {
+ "id": "mixtral",
+ "title": "Mixtral 8x7B"
+ },
+ {
+ "id": "palm3",
+ "title": "PaLM 3"
+ },
+ {
+ "id": "gpt4-vision",
+ "title": "GPT-4 Vision"
+ },
+ {
+ "id": "claude3-sonnet",
+ "title": "Claude 3 Sonnet"
+ }
+ ]
+}
diff --git a/public/assets/vf-chatbot/assets/vf-chatbot-selector-services.json b/public/assets/vf-chatbot/assets/vf-chatbot-selector-services.json
new file mode 100644
index 0000000..9c00673
--- /dev/null
+++ b/public/assets/vf-chatbot/assets/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"
+ }
+ ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
index a11777c..6ad4759 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 8020c52..de3e033 100644
--- a/public/index.html
+++ b/public/index.html
@@ -60,5 +60,7 @@
+
+