feat: enhance link display in chat by using markdown for better formatting and adding truncation style

Author: yesidc

pages/ask_uos_chat.py

@@ -117,9 +117,19 @@ def generate_response(self, prompt):
 
     def display_visited_links(self):
         """Display the links visited for the current user query."""
+
         with st.expander(session_state["_"]("Sources")):
             for link in visited_links():
-                st.write("- " + link)
+                st.markdown(
+                    f"""
+                    
+                        <div class="truncate">
+                            <span>&#8226;</span> <a href="{link}" target="_blank" rel="noopener noreferrer">{link}</a>
+                        </div>
+                    
+                        """,
+                    unsafe_allow_html=True,
+                )
         visited_links.clear()
 
     def store_response(self, output, prompt):

pages/static/style.css

@@ -80,3 +80,15 @@ background-image: url('app/static/Icon-Daumen-u-2.png'); /* Path to your png fil
 span[data-testid="stHeaderActionElements"] a {
     display: none !important;
 }
+
+
+/* Prevents that urls displayed in the st.expander overflow the container  */
+.truncate {
+    width: 100%; /* Allow full width of the container */
+    max-width: 100%; /* Prevent exceeding the container */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block; /* Use inline-block to allow the bullet and link in one line */
+    margin-bottom: 10px; /* Space between items (line break) */
+}