DST-252: set up code for accordion implementation

05-assistive-chatbot/.chainlit/config.toml

@@ -64,11 +64,10 @@ github = "https://github.com/navapbc/labs-gen-ai-experiments/tree/main/05-assist
 
 # Specify a CSS file that can be used to customize the user interface.
 # The CSS file can be served from the public directory or via an external link.
-# custom_css = "/public/test.css"
-
+custom_css = "https://cdnjs.cloudflare.com/ajax/libs/uswds/3.8.1/css/uswds.min.css"
 # Specify a Javascript file that can be used to customize the user interface.
 # The Javascript file can be served from the public directory.
-# custom_js = "/public/test.js"
+custom_js = "https://cdnjs.cloudflare.com/ajax/libs/uswds/3.8.1/js/uswds.min.js"
 
 # Specify a custom font url.
 # custom_font = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"

05-assistive-chatbot/chatbot-chainlit.py

@@ -44,9 +44,8 @@ async def init_chat():
     }
 
     await cl.Message(
-        metadata=metadata,
         disable_feedback=True,
-        content=f"Welcome to the Assistive Chat prototype (built {build_date})",
+        content=f"Welcome to the Assistive Chat prototype (built {build_date}, {metadata})",
     ).send()
 
     available_llms = llms.available_llms()
@@ -128,7 +127,7 @@ async def apply_settings():
 
     error = chatbot.validate_settings(settings)
     if error:
-        await cl.Message(author="backend", metadata=settings, content=f"! Validation error: {error}").send()
+        await cl.Message(author="backend", content=f"! Validation error: {error}").send()
     else:
         cl.user_session.set("settings_applied", True)
     return settings
@@ -208,23 +207,26 @@ def convert_to_message_args(response_obj: str | dict):
 def format_v2_results_as_markdown(gen_results, response_msg):
     resp = ["", f"## Q: {gen_results.question}"]
 
-    dq_resp = ["<details><summary>Derived Questions</summary>", ""]
+    dq_resp = ["<summary>Derived Questions</summary>", ""]
     for dq in gen_results.derived_questions:
         dq_resp.append(f"- {dq.derived_question}")
-    dq_resp += ["</details>", ""]
-
     cards_resp = []
     for i, card in enumerate(gen_results.cards, 1):
         if card.summary:
             cards_resp += [
-                f"<details><summary>{i}. <a href='https://link/to/guru_card'>{card.card_title}</a></summary>",
-                "",
-                f"   Summary: {card.summary}",
-                "",
+                f"""<div class="usa-accordion" id=accordion-{i}>
+                    <h4 class="usa-accordion__heading">
+                    <button
+                    type="button"
+                    class="usa-accordion__button"
+                    aria-expanded="false"
+                    aria-controls="a-{i}"
+                    ><a href='https://link/to/guru_card'>{card.card_title}</a></button></h4>
+                    <div id="a-{i}" class="usa-accordion__content usa-prose" hidden><p>Summary: {card.summary}"""
             ]
             indented_quotes = [q.strip().replace("\n", "\n   ") for q in card.quotes]
             cards_resp += [f"\n   Quote:\n   ```\n   {q}\n   ```" for q in indented_quotes]
-            cards_resp += ["</details>", ""]
+            cards_resp += ["</p></div></div>", ""]
 
     response_msg.content = "\n".join(resp + dq_resp + cards_resp)
     response_msg.elements = [

05-assistive-chatbot/chatbot_api.py

@@ -12,7 +12,6 @@
 import socket
 from functools import cached_property
 from io import StringIO
-from typing import Dict
 
 import dotenv
 from fastapi import Body, FastAPI, Request, status
@@ -47,8 +46,8 @@ def chat_engine(self):
 
 # This function cannot be async because it uses a single non-thread-safe app_state
 @app.post("/query")
-def query(message: str | Dict):
-    response = app_state.chat_engine().gen_response(message)
+def query(message: str):
+    response = app_state.chat_engine.gen_response(message)
     return response