Improve source display

src/components/SimpleChat.tsx

@@ -179,7 +179,7 @@ export const SimpleChat = () => {
           } else if (currentEvent.event === "sources") {
             const sofiaSources = toCamelCase(currentEvent.data.sources);
             const liriaeSources = sofiaSources.map((s: Source) =>
-              updateSourceFileNameAndTitle(s)
+              updateSourceFileName(s)
             );
             chatResponse.sources = liriaeSources;
           } else if (currentEvent.event === "content") {
@@ -248,11 +248,8 @@ export const SimpleChat = () => {
     updateQueryId(null);
   };
 
-  const updateSourceFileNameAndTitle = (source: Source) => {
+  const updateSourceFileName = (source: Source) => {
     const doc = liriaeDocuments.find((d) => d.id === source.id);
-    if (!source.title) {
-      source.title = (doc && doc.title) || "Aucun titre pour ce document";
-    }
     if (!source.filename) {
       source.filename = doc ? doc.filename : "Document sans nom";
     }
@@ -335,11 +332,6 @@ export const SimpleChat = () => {
           // Empty chat window
           <div className={classes.emptyChatWindowContainer}>
             <div>
-              {/* Logo */}
-              {/* <div className={classes.messageLogoContainer}>
-                <img src={logoImgSrc} alt={logoData.alt} />
-              </div> */}
-
               {/* Chat instructions */}
               <div className={classes.chatInstructions}>
                 {!isProcessingServiceAvailable && (
@@ -420,31 +412,28 @@ export const SimpleChat = () => {
               )}
             </div>
 
-            {currentChatResponse?.co2Eq && (
-              <p className={classes.responseCo2Eq}>
-                🌿 {currentChatResponse.co2Eq} gCO2-eq
-              </p>
-            )}
-
             {currentChatResponse?.completed &&
               currentChatResponse?.sources &&
               currentChatResponse.sources.length > 1 && (
-                <ol className="">
-                  {currentChatResponse.sources.map((source, index) => (
-                    <li key={index} className="">
-                      <Tooltip kind="hover" title={source.content}>
-                        <div className="">
-                          {source.title || source.filename}
-                        </div>
-                        <div className="">
-                          Page {source.page} — Score : {source.score.toFixed(2)}
-                        </div>
-                      </Tooltip>
-                    </li>
-                  ))}
-                </ol>
+                <>
+                  <span>Sources :</span>
+                  <ol className={classes.sourceList + " fr-text--sm"}>
+                    {currentChatResponse.sources.map((source, index) => (
+                      <li key={index}>
+                        <Tooltip kind="hover" title={source.content}>
+                          {source.title || source.filename}, p{source.page}
+                        </Tooltip>
+                      </li>
+                    ))}
+                  </ol>
+                </>
               )}
 
+            {currentChatResponse?.co2Eq && (
+              <p className={classes.responseCo2Eq}>
+                🌿 {currentChatResponse.co2Eq} gCO2-eq
+              </p>
+            )}
             {/* We get an error response */}
             {currentChatResponse?.errorMessage && (
               <div className={classes.errorMessageContainer}>
@@ -619,6 +608,20 @@ const useStyles = tss
           marginTop: fr.spacing("2w"),
         },
       },
+      sourceList: {
+        listStyle: "none",
+        paddingLeft: "1.5rem",
+        "& li::before": {
+          content: '"[" counter(li) "] "',
+          counterIncrement: "li",
+          marginRight: "0.5rem",
+        },
+        "& li::marker": {
+          listStyle: "none",
+          content: "none",
+        },
+        counterReset: "li",
+      },
       configurationContainer: {
         marginTop: fr.spacing("2w"),
       },