feat(example): chatbot UI (#3487)

# Description

- Follow theme of quivr
- Show some metadata in the chat

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

![image](https://github.com/user-attachments/assets/690b83bc-be03-4d3c-b8f4-edb0ebe5005b)

![image](https://github.com/user-attachments/assets/fce2b329-952a-4b02-8bab-5556e5e1e809)

![image](https://github.com/user-attachments/assets/b07b8af5-8dd4-4d1e-864f-26fb3f40fe7e)

examples/chatbot/.chainlit/config.toml

@@ -88,33 +88,33 @@ cot = "full"
 
 [UI.theme]
     default = "dark"
-    #layout = "wide"
-    #font_family = "Inter, sans-serif"
+    font_family = "Tahoma,Verdana,Segoe,sans-serif"
+
 # Override default MUI light theme. (Check theme.ts)
 [UI.theme.light]
-    #background = "#FAFAFA"
-    #paper = "#FFFFFF"
+    background = "#fcfcfc"
+    paper = "#f8f8f8"
 
     [UI.theme.light.primary]
-        #main = "#F80061"
-        #dark = "#980039"
-        #light = "#FFE7EB"
+        main = "#6142d4"
+        dark = "#6e53cf"
+        light = "#6e53cf30"
     [UI.theme.light.text]
-        #primary = "#212121"
-        #secondary = "#616161"
+        primary = "#1f1f1f"
+        secondary = "#818080"
 
 # Override default MUI dark theme. (Check theme.ts)
 [UI.theme.dark]
-    #background = "#FAFAFA"
-    #paper = "#FFFFFF"
+    background = "#252525"
+    paper = "#1f1f1f"
 
     [UI.theme.dark.primary]
-        #main = "#F80061"
-        #dark = "#980039"
-        #light = "#FFE7EB"
+        main = "#6142d4"
+        dark = "#6e53cf"
+        light = "#6e53cf30"
     [UI.theme.dark.text]
-        #primary = "#EEEEEE"
-        #secondary = "#BDBDBD"
+        primary = "#f4f4f4"
+        secondary = "#c8c8c8"
 
 [meta]
 generated_by = "1.1.402"

examples/chatbot/.gitignore

@@ -8,3 +8,4 @@ wheels/
 
 # venv
 .venv
+.files

examples/chatbot/main.py

@@ -1,3 +1,4 @@
+import os
 import tempfile
 
 import chainlit as cl
@@ -53,11 +54,14 @@ async def main(message: cl.Message):
         return
 
     # Prepare the message for streaming
-    msg = cl.Message(content="")
+    msg = cl.Message(content="", elements=[])
     await msg.send()
 
     # Use the ask_stream method for streaming responses
     async for chunk in brain.ask_streaming(message.content):
         await msg.stream_token(chunk.answer)
+        for source in chunk.metadata.sources:
+            print(source.metadata)
+            msg.elements.append(cl.Text(name=source.metadata['original_file_name'], content="source", display="inline"))
 
     await msg.send()