clean up response in UI

02-household-queries/.chainlit/config.toml

@@ -1,7 +1,6 @@
 [project]
 # Whether to enable telemetry (default: true). No personal data is collected.
-enable_telemetry = true
-
+enable_telemetry = false
 
 # List of environment variables to be provided by each user to use the app.
 user_env = []
@@ -23,7 +22,7 @@ allow_origins = ["*"]
 prompt_playground = true
 
 # Process and display HTML in messages. This can be a security risk (see https://stackoverflow.com/questions/19603097/why-is-it-dangerous-to-render-user-generated-html-or-javascript)
-unsafe_allow_html = false
+unsafe_allow_html = true
 
 # Process and display mathematical expressions. This can clash with "$" characters in messages.
 latex = false
@@ -46,22 +45,22 @@ latex = false
 name = "Household Chatbot"
 
 # Show the readme while the thread is empty.
-show_readme_as_default = true
+show_readme_as_default = false
 
 # Description of the app and chatbot. This is used for HTML tags.
 # description = ""
 
 # Large size content are by default collapsed for a cleaner ui
-default_collapse_content = true
+default_collapse_content = false
 
 # The default value for the expand messages settings.
-default_expand_messages = false
+default_expand_messages = true
 
 # Hide the chain of thought details from the user in the UI.
 hide_cot = false
 
 # Link to your github repo. This will add a github button in the UI's header.
-# github = ""
+github = "https://github.com/navapbc/labs-gen-ai-experiments/tree/main/02-household-queries"
 
 # 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.

02-household-queries/chainlit-summaries.py

@@ -17,6 +17,24 @@
 @cl.on_chat_start
 async def init_chat():
  # settings = das.init()
+ html = """
+Derived Questions
+<details>
+ <summary>Epcot Center</summary>
+ <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
+</details>
+Derived Questions"""
+ await cl.Message(
+ content=f"## Some content\n{html}",
+ elements=[cl.Text(name="Derived Questions", content="## SIDE", display="side")],
+ ).send()
+
+ elements = [
+ cl.Text(name="side-text", display="side", content="Side Text"),
+ cl.Text(name="page-text", display="page", content="Page Text"),
+ ]
+ await cl.Message("hello side-text and page-text", elements=elements).send()
+
  pass
 
 
@@ -25,19 +43,37 @@ async def message_submitted(message: cl.Message):
  generated_results = on_question(message.content)
  print(json.dumps(dataclasses.asdict(generated_results), indent=2))
 
- await cl.Message(format_as_markdown(generated_results)).send()
+ message_args = format_as_markdown(generated_results)
+ # await cl.Message(**message_args).send()
+ await cl.Message(content=message_args["content"], elements=message_args["elements"]).send()
+ # await cl.Message(content= message_args["content"], elements=[cl.Text(content="SIDE", display="inline")]).send()
 
 
 def format_as_markdown(gen_results):
- resp = ["", f"## Q: {gen_results.question}", "### Derived Questions"]
+ resp = ["", f"## Q: {gen_results.question}"]
 
+ dq_resp = ["<details><summary>Derived Questions</summary>", ""]
  for dq in gen_results.derived_questions:
- resp.append(f"1. {dq.derived_question}")
+ dq_resp.append(f"- {dq.derived_question}")
+ dq_resp += ["</details>", ""]
 
- resp.append("### Guru cards")
- for card in gen_results.cards:
+ cards_resp = []
+ for i, card in enumerate(gen_results.cards, 1):
  if card.summary:
- resp += [f"#### {card.card_title}", f"Summary: {card.summary}", ""]
- resp += [f"\n.\n> {q}" for q in card.quotes]
+ cards_resp += [
+ f"<details><summary>{i}. <a href='https://link/to/guru_card'>{card.card_title}</a></summary>",
+ "",
+ f" 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>", ""]
 
- return "\n".join(resp)
+ return {
+ "content": "\n".join(resp + dq_resp + cards_resp),
+ "elements": [
+ # cl.Text(name="Derived Questions", content="\n".join(dq_resp), display="side"),
+ # cl.Text(name="Guru Cards", content="\n".join(cards_resp), display="inline")
+ ],
+ }