improve new web component

README.md

@@ -179,7 +179,7 @@ Build the chat webpage (will be better integrated in the workflow in the future)
 ```bash
 cd chat-with-context
 npm i
-npm run build
+npm run build:demo
 cd ..
 ```
 

chat-with-context/README.md

@@ -16,6 +16,7 @@ A web component to easily deploy an interface for a chat with context. It is the
 
    ```html
    <script type="module" src="https://unpkg.com/@sib-swiss/chat-with-context"></script>
+   <link href="https://unpkg.com/@sib-swiss/chat-with-context/dist/style.css" rel="stylesheet" />
    ```
 
    Or install with a package manager in your project:
@@ -73,6 +74,42 @@ npx http-server
 python -m http.server
 ```
 
-# 🧑‍💻 Contributing
+# 🧑‍💻 Development
+
+Install:
+
+```sh
+npm i
+```
+
+Start in dev:
+
+```sh
+npm run dev
+```
+
+Build package:
+
+```sh
+npm run build
+```
+
+Build demo website (used by the python API):
+
+```sh
+npm run build:demo
+```
+
+Format and lint:
+
+```sh
+npm run fmt
+npm run lint
+```
+
+Publish new version:
+
+```sh
+npm version patch
+```
 
-Checkout [CONTRIBUTING.md](https://github.com/sib-swiss/sparql-editor/blob/main/CONTRIBUTING.md) for more details on how to run this in development and make a contribution.

chat-with-context/demo/index.html

@@ -4,10 +4,13 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Chat Expasy</title>
-    <meta name="description" content="Assistant to navigate resources from the Swiss Institute of Bioinformatics (SIB)." />
+    <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="./style.css" rel="stylesheet" />
     <script type="module" src="../src/chat-with-context.tsx"></script>
 
     <!-- <link href="https://unpkg.com/@sib-swiss/chat-with-context/dist/style.css" rel="stylesheet" />
@@ -26,14 +29,17 @@
           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">
+          <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 ">
+        <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"
@@ -53,12 +59,11 @@ <h2 class="text-xl font-semibold ">
 
       <div class="flex-grow mx-5">
         <chat-with-context
-          api="https://chat.expasy.org/"
+          api="{{ api_url }}"
           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"
+          examples="{{ examples }}"
         ></chat-with-context>
       </div>
     </div>
   </body>
-
 </html>

chat-with-context/demo/tailwind.config.js

@@ -3,9 +3,7 @@ import tailwindTypography from "@tailwindcss/typography";
 
 export default {
   darkMode: "selector",
-  content: [
-    "./index.html",
-  ],
+  content: ["./index.html"],
   theme: {
     extend: {
       // Remove backticks from inline code

chat-with-context/index.html

@@ -35,14 +35,17 @@
           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">
+          <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 ">
+        <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"

chat-with-context/package.json

@@ -65,7 +65,8 @@
   "keywords": [
     "chat",
     "chatbot",
-    "LLM"
+    "LLM",
+    "RAG"
   ],
   "prettier": {
     "semi": true,

chat-with-context/src/chat-with-context.tsx

@@ -293,7 +293,7 @@ customElement("chat-with-context", {api: "", examples: "", apiKey: ""}, props =>
                   {link => (
                     <a href={link.url} title={link.title} target="_blank" class="hover:text-inherit">
                       <button class="my-3 mr-1 px-3 py-1 text-sm bg-gray-300 dark:bg-gray-700 rounded-3xl align-middle">
-                          {link.label}
+                        {link.label}
                       </button>
                     </a>
                   )}
@@ -339,10 +339,7 @@ customElement("chat-with-context", {api: "", examples: "", apiKey: ""}, props =>
         <div class="py-2 px-4 justify-center items-center text-sm flex flex-col flex-row space-y-2">
           <For each={examples}>
             {example => (
-              <button
-                onClick={() => submitInput(example)}
-                class="px-5 py-2.5 bg-slate-200 text-slate-600 rounded-3xl"
-              >
+              <button onClick={() => submitInput(example)} class="px-5 py-2.5 bg-slate-200 text-slate-600 rounded-3xl">
                 {example}
               </button>
             )}