Fix chat-with-context props name

sib-swiss · Jan 17, 2025 · 4fc2fc9 · 4fc2fc9
1 parent fde1e0f
commit 4fc2fc9
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 18 deletions.
diff --git a/chat-with-context/README.md b/chat-with-context/README.md
@@ -30,7 +30,12 @@ A web component to easily deploy an interface for a chat with context. It is the
 2. Use the custom element in your HTML/JSX/TSX code:
 
    ```html
-   <chat-with-context api="http://localhost:8000/"></chat-with-context>
+   <chat-with-context
+     chat-endpoint="http://localhost:8000/chat/"
+     feedback-endpoint="http://localhost:8000/feedback/"
+     api-key="public_apikey_used_by_frontend_to_prevent_abuse_from_robots"
+     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>
    ```
 
 > [!WARNING]
@@ -58,7 +63,12 @@ Create a `index.html` file with:
 
   <body>
     <div>
-      <chat-with-context api="http://localhost:8000/"></chat-with-context>
+      <chat-with-context
+        chat-endpoint="http://localhost:8000/chat/"
+        feedback-endpoint="http://localhost:8000/feedback/"
+        api-key="public_apikey_used_by_frontend_to_prevent_abuse_from_robots"
+        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>
   </body>
 </html>

diff --git a/chat-with-context/demo/index.html b/chat-with-context/demo/index.html
@@ -51,8 +51,8 @@ <h2 class="text-xl text-center font-semibold border-b">
         <p>
           <strong>ExpasyGPT</strong> is reshaping how researchers explore life science data, streamlining searches
           across the <a href="https://www.sib.swiss/">SIB Swiss Institute of Bioinformatics</a>’ databases (learn more
-          <a href="https://www.expasy.org/about-chat">here</a>). This AI-driven tool is powered by metadata and example queries from SPARQL
-          endpoints like:
+          <a href="https://www.expasy.org/about-chat">here</a>). This AI-driven tool is powered by metadata and example
+          queries from SPARQL endpoints like:
         </p>
         <ul style="list-style: inside">
           <li>
@@ -83,7 +83,13 @@ <h2 class="text-xl text-center font-semibold border-b">
       </div>
 
       <div class="flex-grow mx-5">
-        <chat-with-context api="{{ api_url }}" api-key="{{ expasy_key }}" examples="{{ examples }}"></chat-with-context>
+        <chat-with-context
+          chat-endpoint="{{ chat_endpoint }}"
+          feedback-endpoint="{{ feedback_endpoint }}"
+          api-key="{{ api_key }}"
+          examples="{{ examples }}"
+        >
+        </chat-with-context>
       </div>
     </div>
   </body>

diff --git a/chat-with-context/index.html b/chat-with-context/index.html
@@ -88,7 +88,8 @@ <h2 class="text-xl text-center font-semibold border-b pb-2">
         <!-- LangGraph dev: api="http://localhost:2024/" -->
         <!-- LangGraph prod: api="http://localhost:8123/" -->
         <chat-with-context
-          api="http://localhost:8000/chat/"
+          chat-endpoint="http://localhost:8000/chat/"
+          feedback-endpoint="http://localhost:8000/feedback/"
           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>

diff --git a/chat-with-context/src/chat-with-context.tsx b/chat-with-context/src/chat-with-context.tsx
@@ -24,7 +24,7 @@ import {streamResponse, ChatState} from "./providers";
  * Custom element to create a chat interface with a context-aware assistant.
  * @example <chat-with-context api="http://localhost:8000/"></chat-with-context>
  */
-customElement("chat-with-context", {api: "", examples: "", apiKey: "", feedbackApi: ""}, props => {
+customElement("chat-with-context", {chatEndpoint: "", examples: "", apiKey: "", feedbackEndpoint: ""}, props => {
   noShadowDOM();
   hljs.registerLanguage("ttl", hljsDefineTurtle);
   hljs.registerLanguage("sparql", hljsDefineSparql);
@@ -34,24 +34,27 @@ customElement("chat-with-context", {api: "", examples: "", apiKey: "", feedbackA
   const [feedbackSent, setFeedbackSent] = createSignal(false);
   const [selectedTab, setSelectedTab] = createSignal("");
 
-  if (props.api === "") setWarningMsg("Please provide an API URL for the chat component to work.");
+  const [feedbackEndpoint, setFeedbackEndpoint] = createSignal("");
 
   const state = new ChatState({
-    apiUrl: props.api,
+    // eslint-disable-next-line solid/reactivity
+    apiUrl: props.chatEndpoint,
+    // eslint-disable-next-line solid/reactivity
     apiKey: props.apiKey,
     model: "gpt-4o-mini",
   });
-  const feedbackApi = props.feedbackApi
-    ? props.feedbackApi.endsWith("/")
-      ? props.feedbackApi
-      : props.feedbackApi + "/"
-    : state.apiUrl;
   let chatContainerEl!: HTMLDivElement;
   let inputTextEl!: HTMLTextAreaElement;
+  // eslint-disable-next-line solid/reactivity
   const examples = props.examples.split(",").map(value => value.trim());
+
   createEffect(() => {
+    if (props.chatEndpoint === "") setWarningMsg("Please provide an API URL for the chat component to work.");
+
     state.scrollToInput = () => inputTextEl.scrollIntoView({behavior: "smooth"});
     fixInputHeight();
+
+    setFeedbackEndpoint(props.feedbackEndpoint.endsWith("/") ? props.feedbackEndpoint : props.feedbackEndpoint + "/");
   });
 
   const highlightAll = () => {
@@ -88,7 +91,7 @@ customElement("chat-with-context", {api: "", examples: "", apiKey: "", feedbackA
   }
 
   function sendFeedback(positive: boolean) {
-    fetch(`${feedbackApi}feedback`, {
+    fetch(feedbackEndpoint(), {
       method: "POST",
       headers: {"Content-Type": "application/json"},
       body: JSON.stringify({
@@ -264,7 +267,8 @@ customElement("chat-with-context", {api: "", examples: "", apiKey: "", feedbackA
                   )}
                 </For>
                 {/* Show feedback buttons only for last message */}
-                {msg.role === "assistant" &&
+                {feedbackEndpoint() &&
+                  msg.role === "assistant" &&
                   iMsg() === state.messages().length - 1 &&
                   state.lastMsg().content() &&
                   !feedbackSent() && (

diff --git a/packages/expasy-agent/src/expasy_agent/api.py b/packages/expasy-agent/src/expasy_agent/api.py
@@ -253,8 +253,9 @@ def chat_ui(request: Request) -> Any:
         "index.html",
         {
             "request": request,
-            "expasy_key": settings.expasy_api_key,
-            "api_url": "https://chat.expasy.org/chat/",
+            "api_key": settings.expasy_api_key,
+            "chat_endpoint": "https://chat.expasy.org/chat/",
+            "feedback_endpoint": "https://chat.expasy.org/feedback/",
             "examples": ",".join([
                 "Which resources are available at the SIB?",
                 "How can I get the HGNC symbol for the protein P68871?",