fix: css for warning mark

libs/ktem/ktem/assets/css/main.css

@@ -105,6 +105,10 @@ mark {
   background-color: #1496bb;
 }
 
+mark.warning {
+  background-color: rgb(216 120 104);
+}
+
 /* clpse */
 .clpse {
   background-color: var(--background-fill-secondary);

libs/ktem/ktem/pages/chat/verification.py

@@ -43,7 +43,10 @@ class VerificationPage(BasePage):
         highlighted_text = text[: spans[0]["start"]]
         for idx, span in enumerate(spans):
             to_highlight = text[span["start"] : span["end"]]
-            highlighted_text += Render.highlight(to_highlight)
+            highlighted_text += Render.highlight(
+                to_highlight,
+                elem_classes="warning",
+            )
             if idx < len(spans) - 1:
                 highlighted_text += text[span["end"] : spans[idx + 1]["start"]]
         highlighted_text += text[spans[-1]["end"] :]
@@ -86,9 +89,16 @@ class VerificationPage(BasePage):
 
         for claim in result["ungroundedDetails"]:
             rationale += Render.collapsible_with_header(
-                Document(text=claim["reason"], metadata={"file_name": claim["text"]})
+                Document(
+                    text="<b>{}</b>".format(claim["reason"]),
+                    metadata={
+                        "file_name": "<mark class='warning'>{}</mark>".format(
+                            claim["text"]
+                        ),
+                    },
+                )
             )
 
-        verification_output += f"<div><b>{rationale}</b></div>"
+        verification_output += f"<div>{rationale}</div>"
 
         return gr.update(visible=True), verification_output

libs/ktem/ktem/utils/render.py

@@ -101,9 +101,10 @@ class Render:
         """  # noqa
 
     @staticmethod
-    def highlight(text: str) -> str:
+    def highlight(text: str, elem_classes: str | None = None) -> str:
         """Highlight text"""
-        return f"<mark>{text}</mark>"
+        class_str = "" if not elem_classes else f' class="{elem_classes}"'
+        return f"<mark {class_str}>{text}</mark>"
 
     @staticmethod
     def image(url: str, text: str = "") -> str: