Update app.py

app.py

@@ -62,7 +62,7 @@ def hybrid_search(text):
     document_html = '<div id="source_listing">' + "".join(document_html) + "</div>"
     return document, document_html
 
-class CassandreChatBot:
+class pleiasBot:
     def __init__(self, system_prompt="Tu es un asistant de recherche qui donne des responses sourcées"):
         self.system_prompt = system_prompt
 
@@ -102,83 +102,98 @@ class CassandreChatBot:
             return None, None
 
 def format_references(text):
-    ref_start_marker = '<ref text="'
-    ref_end_marker = '</ref>'
-
+    # New ref format pattern
+    ref_pattern = r'<ref name="([^"]+)">"([^"]+)"</ref>'
+    
     parts = []
     current_pos = 0
     ref_number = 1
 
-    while True:
-        start_pos = text.find(ref_start_marker, current_pos)
-        if start_pos == -1:
-            parts.append(text[current_pos:])
-            break
-
-        parts.append(text[current_pos:start_pos])
-
-        end_pos = text.find('">', start_pos)
-        if end_pos == -1:
-            break
-
-        ref_text = text[start_pos + len(ref_start_marker):end_pos].replace('\n', ' ').strip()
-        ref_text_encoded = ref_text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
-
-        ref_end_pos = text.find(ref_end_marker, end_pos)
-        if ref_end_pos == -1:
-            break
-
-        ref_id = text[end_pos + 2:ref_end_pos].strip()
-
-        tooltip_html = f'<span class="tooltip" data-refid="{ref_id}" data-text="{ref_id}: {ref_text_encoded}"><a href="#{ref_id}">[{ref_number}]</a></span>'
+    import re
+    for match in re.finditer(ref_pattern, text):
+        # Add text before the reference
+        parts.append(text[current_pos:match.start()])
+        
+        # Extract reference components
+        ref_id = match.group(1)  # The source ID
+        ref_text = match.group(2).strip()  # The reference text
+        
+        # Create tooltip HTML
+        tooltip_html = f'<span class="tooltip"><strong>[{ref_number}]</strong><span class="tooltiptext"><strong>{ref_number}:</strong> {ref_text}</span></span>'
         parts.append(tooltip_html)
-
-        current_pos = ref_end_pos + len(ref_end_marker)
-        ref_number = ref_number + 1
-
+        
+        current_pos = match.end()
+        ref_number += 1
+    
+    # Add any remaining text
+    parts.append(text[current_pos:])
+    
     return ''.join(parts)
 
-# Initialize the CassandreChatBot
-cassandre_bot = CassandreChatBot()
+# Initialize the pleiasBot
+cassandre_bot = pleiasBot()
 
 # CSS for styling 
 css = """
 .generation {
-    margin-left:2em;
-    margin-right:2em;
+    margin-left: 2em;
+    margin-right: 2em;
 }
 :target {
     background-color: #CCF3DF;
-  }
+}
 .source {
-    float:left;
-    max-width:17%;
-    margin-left:2%;
+    float: left;
+    max-width: 17%;
+    margin-left: 2%;
 }
 .tooltip {
     position: relative;
+    display: inline-block;
+    color: #2563eb;
     cursor: pointer;
-    font-variant-position: super;
-    color: #97999b;
-  }
-  
-  .tooltip:hover::after {
-    content: attr(data-text);
+}
+.tooltip .tooltiptext {
+    visibility: hidden;
+    background-color: #fff;
+    color: #000;
+    text-align: left;
+    padding: 12px;
+    border-radius: 6px;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    
+    /* Position the tooltip */
     position: absolute;
-    left: 0;
-    top: 120%;
-    white-space: pre-wrap;
-    width: 500px;
-    max-width: 500px;
     z-index: 1;
-    background-color: #f9f9f9;
-    color: #000;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 5px;
-    display: block;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  }
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    
+    /* Size and formatting */
+    min-width: 300px;
+    max-width: 400px;
+    white-space: normal;
+    font-size: 0.9em;
+    line-height: 1.4;
+}
+
+/* Show tooltip on hover */
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+}
+
+/* Add arrow to tooltip */
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #fff transparent transparent transparent;
+}
 """
 
 # Gradio interface