improve new web component (tailwind now properly scoped)

sib-swiss · Dec 12, 2024 · a79c4d5 · a79c4d5
1 parent 43c159a
commit a79c4d5
Show file tree

Hide file tree

Showing 17 changed files with 3,261 additions and 866 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,5 @@ notebooks/*.csv
 notebooks/*.txt
 entities_embeddings*.csv
 uv.lock
+
+src/sparql_llm/webapp
diff --git a/README.md b/README.md
@@ -174,6 +174,15 @@ EXPASY_API_KEY=NOT_SO_SECRET_API_KEY_USED_BY_FRONTEND_TO_AVOID_SPAM_FROM_CRAWLER
 LOGS_API_KEY=SECRET_PASSWORD_TO_EASILY_ACCESS_LOGS_THROUGH_THE_API
 ```
 
+Build the chat webpage (will be better integrated in the workflow in the future):
+
+```bash
+cd chat-with-context
+npm i
+npm run build
+cd ..
+```
+
 Start the web UI, API, and similarity search engine in production (you might need to make some changes to the `compose.yml` file to adapt it to your server/proxy setup):
 
 ```bash

diff --git a/chat-with-context/demo/index.html b/chat-with-context/demo/index.html
@@ -3,109 +3,62 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Expasy Chat</title>
-    <meta name="description" content="Chat with SIB endpoints" />
+    <title>Chat Expasy</title>
+    <meta name="description" content="Assistant to navigate resources from the Swiss Institute of Bioinformatics (SIB)." />
     <link rel="icon" type="image/png" href="./sib-logo.png" />
-    <!-- <link href="./style.css" rel="stylesheet"> -->
-    <!-- <link href="../node_modules/tailwindcss/index.css" rel="stylesheet"> -->
-    <!-- <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.tailwindcss.com?plugins=typography"></script> -->
-    <!-- <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css"
-    /> -->
+
+    <link href="./style.css" rel="stylesheet">
     <script type="module" src="../src/chat-with-context.tsx"></script>
-    <!-- <script type="module" src="../dist/chat-with-context.js"></script> -->
 
-    <!-- <script type="module" src="https://unpkg.com/@sib-swiss/chat-with-context/dist/chat-with-context.js"></script> -->
-    <link href="https://unpkg.com/@sib-swiss/chat-with-context/dist/style.css" rel="stylesheet" />
+    <!-- <link href="https://unpkg.com/@sib-swiss/chat-with-context/dist/style.css" rel="stylesheet" />
+    <script type="module" src="https://unpkg.com/@sib-swiss/chat-with-context/dist/chat-with-context.js"></script> -->
   </head>
 
-  <!-- <script type="module">
-    tailwind.config = {
-      darkMode: "selector",
-      theme: {
-        extend: {
-          // Remove backticks from inline code
-          typography: {
-            DEFAULT: {
-              css: {
-                // Fix <code> rendering
-                "code::before": {
-                  content: '""',
-                },
-                "code::after": {
-                  content: '""',
-                },
-                code: {
-                  "border-radius": "0.375rem",
-                  padding: "0.35em",
-                  color: "var(--tw-prose-pre-code)",
-                  "background-color": "var(--tw-prose-pre-bg)",
-                  "font-weight": "normal",
-                },
-              },
-            },
-          }
-        },
-      },
-    };
-  </script> -->
+  <!-- Demo chat webpage served by the SIB Expasy API -->
 
   <!-- <body class="bg-gray-100 dark:bg-gray-800 text-black dark:text-white"> -->
-  <body class="bg-gray-100 text-black">
-    <!-- <body> -->
-    <!-- <nav>
-      <div class="absolute top-2 right-8">
-        <button
-          title="Switch theme"
-          id="theme-switch-btn"
-          class="px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500"
+  <body>
+    <div class="flex flex-col h-screen w-full">
+      <nav class="flex justify-end">
+        <a
+          href="https://github.com/sib-swiss/sparql-llm"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-black hover:text-black dark:text-white align-middle"
         >
-          <span id="sun-icon">☀️</span>
-          <span id="moon-icon" class="hidden">🌙</span>
-        </button>
+          <button title="Source code on GitHub" class="px-4 py-2 m-1 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500">
+            <i data-feather="github"></i>
+          </button>
+        </a>
+      </nav>
+
+      <div class="text-center mb-5 prose max-w-6xl mx-auto pb-5 border-b">
+        <h2 class="text-xl font-semibold ">
+          Ask Expasy
+          <div
+            class="inline-block ml-3 px-3 py-1 bg-red-600 text-white text-sm font-semibold rounded-full justify-center items-center"
+          >
+            Beta
+          </div>
+        </h2>
+        <p class="border-t pt-5">
+          Assistant to navigate resources from the Swiss Institute of Bioinformatics. Particularly knowledgeable about
+          UniProt, OMA, Bgee, RheaDB, and SwissLipids. But still learning.
+        </p>
+        <p>
+          Contact [email protected] if you have any feedback or suggestions. Questions asked here are stored for research
+          purposes, see the <a href="https://www.sib.swiss/privacy-policy">SIB privacy policy</a> for more information.
+        </p>
       </div>
-    </nav> -->
 
-    <div>
-      <chat-with-context
-        api="https://chat.expasy.org/"
-        api-key="{{ expasy_key }}"
-        examples="Which resources are available at the SIB?,How can I get the HGNC symbol for the protein P68871?,What are the rat orthologs of the human TP53?,Where is expressed the gene ACE2 in human?,Anatomical entities where the INS zebrafish gene is expressed and its gene GO annotations,List the genes in primates orthologous to genes expressed in the fruit fly eye"
-      ></chat-with-context>
+      <div class="flex-grow mx-5">
+        <chat-with-context
+          api="https://chat.expasy.org/"
+          api-key="{{ expasy_key }}"
+          examples="Which resources are available at the SIB?,How can I get the HGNC symbol for the protein P68871?,What are the rat orthologs of the human TP53?,Where is expressed the gene ACE2 in human?,Anatomical entities where the INS zebrafish gene is expressed and its gene GO annotations,List the genes in primates orthologous to genes expressed in the fruit fly eye"
+        ></chat-with-context>
+      </div>
     </div>
   </body>
 
-  <!-- <script>
-    // TODO: dark mode in tailwind seems broken, it does not respect anything
-    // The dark: classes set on body will always just use the system pref. While docs says otherwise https://tailwindcss.com/docs/dark-mode
-    // And I am not even talking about the dark: classes set inside the light DOM custom element
-    // We properly set the <html class="dark">, but nothing else behave as described
-
-    // Light/dark theme setup, default to dark if nothing found
-    const sunIcon = document.getElementById("sun-icon");
-    const moonIcon = document.getElementById("moon-icon");
-    function toggleIcons() {
-      if (document.documentElement.classList.contains("dark")) {
-        sunIcon.classList.remove("hidden");
-        moonIcon.classList.add("hidden");
-      } else {
-        sunIcon.classList.add("hidden");
-        moonIcon.classList.remove("hidden");
-      }
-    }
-    toggleIcons();
-    const themeSwitchBtn = document.getElementById("theme-switch-btn");
-    function toggleDarkMode() {
-      const doc = document.documentElement;
-      doc.classList.toggle("dark");
-      toggleIcons();
-    }
-    themeSwitchBtn.addEventListener("click", toggleDarkMode);
-    let prefersDark = true;
-    if (window.matchMedia) prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    // if (prefersDark) document.documentElement.classList.toggle('dark', prefersDark);
-    // if (prefersDark) toggleDarkMode();
-  </script> -->
 </html>
diff --git a/chat-with-context/demo/postcss.config.js b/chat-with-context/demo/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/chat-with-context/demo/style.css b/chat-with-context/demo/style.css
@@ -1 +1,5 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* @import "tailwindcss"; */
diff --git a/chat-with-context/demo/tailwind.config.js b/chat-with-context/demo/tailwind.config.js
@@ -0,0 +1,35 @@
+/** @type {import('tailwindcss').Config} */
+import tailwindTypography from "@tailwindcss/typography";
+
+export default {
+  darkMode: "selector",
+  content: [
+    "./index.html",
+  ],
+  theme: {
+    extend: {
+      // Remove backticks from inline code
+      typography: {
+        DEFAULT: {
+          css: {
+            // Fix <code> rendering
+            "code::before": {
+              content: '""',
+            },
+            "code::after": {
+              content: '""',
+            },
+            code: {
+              "border-radius": "0.375rem",
+              padding: "0.35em",
+              color: "var(--tw-prose-pre-code)",
+              "background-color": "var(--tw-prose-pre-bg)",
+              "font-weight": "normal",
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [tailwindTypography()],
+};
diff --git a/chat-with-context/index.html b/chat-with-context/index.html
@@ -15,46 +15,87 @@
     /> -->
 
     <script type="module" src="./src/chat-with-context.tsx"></script>
+    <link href="./demo/style.css" rel="stylesheet" />
   </head>
 
   <body>
-    <div>
-      <chat-with-context
-        api="https://chat.expasy.org/"
-        api-key="%EXPASY_API_KEY%"
-        examples="How can I get the HGNC symbol for the protein P68871?,What are the rat orthologs of the human TP53?"
-      ></chat-with-context>
+    <div class="flex flex-col h-screen w-full">
+      <nav class="flex justify-end">
+        <!-- <button
+          title="Switch theme"
+          id="theme-switch-btn"
+          class="px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500 align-middle"
+            >
+          <span id="sun-icon">☀️</span>
+          <span id="moon-icon" class="hidden">🌙</span>
+        </button> -->
+        <a
+          href="https://github.com/sib-swiss/sparql-llm"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-black hover:text-black dark:text-white align-middle"
+        >
+          <button title="Source code on GitHub" class="px-4 py-2 m-1 rounded-lg hover:bg-gray-300 dark:hover:bg-slate-500">
+            <i data-feather="github"></i>
+          </button>
+        </a>
+      </nav>
+
+      <div class="text-center mb-5 prose max-w-6xl mx-auto pb-5 border-b">
+        <h2 class="text-xl font-semibold ">
+          Ask Expasy
+          <div
+            class="inline-block ml-3 px-3 py-1 bg-red-600 text-white text-sm font-semibold rounded-full justify-center items-center"
+          >
+            Beta
+          </div>
+        </h2>
+        <p class="border-t pt-5">
+          Assistant to navigate resources from the Swiss Institute of Bioinformatics. Particularly knowledgeable about
+          UniProt, OMA, Bgee, RheaDB, and SwissLipids. But still learning.
+        </p>
+        <p>
+          Contact [email protected] if you have any feedback or suggestions. Questions asked here are stored for research
+          purposes, see the <a href="https://www.sib.swiss/privacy-policy">SIB privacy policy</a> for more information.
+        </p>
+      </div>
+
+      <div class="flex-grow mx-5">
+        <chat-with-context
+          api="https://chat.expasy.org/"
+          api-key="%EXPASY_API_KEY%"
+          examples="Which resources are available at the SIB?,How can I get the HGNC symbol for the protein P68871?,What are the rat orthologs of the human TP53?,Where is expressed the gene ACE2 in human?,Anatomical entities where the INS zebrafish gene is expressed and its gene GO annotations,List the genes in primates orthologous to genes expressed in the fruit fly eye"
+        ></chat-with-context>
+      </div>
     </div>
   </body>
 
-  <!-- <script type="module">
-    tailwind.config = {
-      darkMode: "class",
-      theme: {
-        extend: {
-          // Remove backticks from inline code
-          typography: {
-            DEFAULT: {
-              css: {
-                // Fix <code> rendering
-                "code::before": {
-                  content: '""',
-                },
-                "code::after": {
-                  content: '""',
-                },
-                code: {
-                  "border-radius": "0.375rem",
-                  padding: "0.35em",
-                  color: "var(--tw-prose-pre-code)",
-                  "background-color": "var(--tw-prose-pre-bg)",
-                  "font-weight": "normal",
-                },
-              },
-            },
-          },
-        },
-      },
-    };
+  <!-- <script>
+    // TODO: dark mode in tailwind seems broken
+
+    // Light/dark theme setup, default to dark if nothing found
+    const sunIcon = document.getElementById("sun-icon");
+    const moonIcon = document.getElementById("moon-icon");
+    function toggleIcons() {
+      if (document.documentElement.classList.contains("dark")) {
+        sunIcon.classList.remove("hidden");
+        moonIcon.classList.add("hidden");
+      } else {
+        sunIcon.classList.add("hidden");
+        moonIcon.classList.remove("hidden");
+      }
+    }
+    toggleIcons();
+    const themeSwitchBtn = document.getElementById("theme-switch-btn");
+    function toggleDarkMode() {
+      const doc = document.documentElement;
+      doc.classList.toggle("dark");
+      toggleIcons();
+    }
+    themeSwitchBtn.addEventListener("click", toggleDarkMode);
+    let prefersDark = true;
+    if (window.matchMedia) prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    // if (prefersDark) document.documentElement.classList.toggle('dark', prefersDark);
+    // if (prefersDark) toggleDarkMode();
   </script> -->
 </html>