Fix source display errors

Keep Source numbers and fix filtering

src/components/ChatInteraction.module.css

@@ -20,21 +20,10 @@
   
   .sourceList {
     list-style: none;
-    padding-left: 1.5rem;
-    counter-reset: li;
+    list-style-type: none;
+    padding: 0;
   }
-  
-  .sourceList li::before {
-    content: "[" counter(li) "] ";
-    counter-increment: li;
-    margin-right: 0.5rem;
-  }
-  
-  .sourceList li::marker {
-    list-style: none;
-    content: none;
-  }
-  
+
   .responseCo2Eq {
     font-size: 11px;
     color: green;

src/components/ChatInteraction.tsx

@@ -86,8 +86,14 @@ export const ChatInteraction = ({
         kind="hover"
         title={
           <>
-            <div><strong>Score : </strong>{Math.round(source.score * 100)}%</div>
-            <div><strong>Extrait : </strong>{source.content}</div>
+            <span style={{ display: "block" }}>
+              <strong>Score : </strong>
+              {Math.round(source.score * 100)}%
+            </span>
+            <span>
+              <strong>Extrait : </strong>
+              {source.content}
+            </span>
           </>
         }
       >
@@ -173,13 +179,15 @@ export const ChatInteraction = ({
         usedSourcesRef.current.size > 0 && (
           <>
             <span>Sources :</span>
-            <ol className={styles.sourceList + " fr-text--sm"}>
-              {[...usedSourcesRef.current.values()].map((source, index) => (
-                <li key={index}>
-                  <SourceWithTooltip source={source} />
-                </li>
-              ))}
-            </ol>
+            <ul className={styles.sourceList + " fr-text--sm"}>
+              {[...usedSourcesRef.current.entries()].map(
+                ([key, source], index) => (
+                  <li key={index}>
+                    [{key}] <SourceWithTooltip source={source} />
+                  </li>
+                )
+              )}
+            </ul>
           </>
         )}
 
@@ -193,15 +201,16 @@ export const ChatInteraction = ({
               label="Voir plus de sources"
               onExpandedChange={function noRefCheck() {}}
             >
-              <ol className={styles.sourceList + " fr-text--sm"}>
-                {interaction.userPromptResponse.sources
-                  .filter((_, index) => !usedSourcesRef.current.has(index + 1))
-                  .map((source, index) => (
-                    <li key={index}>
-                      <SourceWithTooltip source={source} />
-                    </li>
-                  ))}
-              </ol>
+              <ul className={styles.sourceList + " fr-text--sm"}>
+                {interaction.userPromptResponse.sources.map(
+                  (source, index) =>
+                    !usedSourcesRef.current.has(index + 1) && (
+                      <li key={index}>
+                        [{index + 1}] <SourceWithTooltip source={source} />
+                      </li>
+                    )
+                )}
+              </ul>
             </Accordion>
           </>
         )}