From b2e9110ffeb466a03409c9f81eeadb78465b3480 Mon Sep 17 00:00:00 2001
From: Adeel Ehsan <aadeel.ehsan@gmail.com>
Date: Fri, 8 Nov 2024 21:12:40 +0500
Subject: [PATCH] updated FCS UI (#185)

---
 src/views/search/SummaryUx.tsx                |  2 +-
 .../summary/FactualConsistencyBadge.tsx       | 67 +++++++++----------
 2 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/views/search/SummaryUx.tsx b/src/views/search/SummaryUx.tsx
index 10f75278..6aa07b14 100644
--- a/src/views/search/SummaryUx.tsx
+++ b/src/views/search/SummaryUx.tsx
@@ -72,7 +72,7 @@ export const SummaryUx = () => {
 
           <VuiSpacer size="s" />
 
-          {(fcsMode !== "disable" && factualConsistencyScore !== 0) && (
+          {(fcsMode !== "disable") && (
             <FactualConsistencyBadge
               score={factualConsistencyScore}
               fcsMode={fcsMode}
diff --git a/src/views/search/summary/FactualConsistencyBadge.tsx b/src/views/search/summary/FactualConsistencyBadge.tsx
index 416379f5..5bb7934b 100644
--- a/src/views/search/summary/FactualConsistencyBadge.tsx
+++ b/src/views/search/summary/FactualConsistencyBadge.tsx
@@ -27,46 +27,39 @@ const getConfidenceLevel = (score: number): ConfidenceLevel => {
     return "high";
 };
 export const FactualConsistencyBadge = ({ score, fcsMode }: Props) => {
-    let badge;
     const [isHemDrawerOpen, setIsHemDrawerOpen] = useState(false);
-    if (score !== undefined) {
-        // badge = <VuiBadge color="accent">Calculating Factual Consistency Score…</VuiBadge>;
-        const sanitizedScore = parseFloat(score.toFixed(2));
-        badge = (
-            <VuiBadge color={"neutral" as "neutral" | "warning" | "success" | "danger"}>
-                Factual Consistency Score: {sanitizedScore}
-            </VuiBadge>
-        );
+    const sanitizedScore = score ? parseFloat(score.toFixed(2)) : "unavailable";
+    const badge = (
+        <VuiBadge color={"neutral" as "neutral" | "warning" | "success" | "danger"}>
+            Factual Consistency Score: {sanitizedScore}
+        </VuiBadge>
+    );
 
-        return (
-          <>
-              <VuiFlexContainer alignItems="center" data-testid="factualConsistencyBadge">
-                  {/*{score === undefined && <VuiSpinner size="s" />}*/}
-                  <VuiFlexItem>
-                      {
-                          fcsMode === "badge" ? <ConfidenceBadge confidenceLevel={getConfidenceLevel(score ?? -1)} />
-                            : badge
-                      }
-                  </VuiFlexItem>
-                  <VuiFlexItem grow={false} shrink={false}>
-                      <VuiLinkInternal
-                        onClick={() => setIsHemDrawerOpen(true)}
-                      >
-                          What's this?
-                      </VuiLinkInternal>
-                  </VuiFlexItem>
-              </VuiFlexContainer>
-              <HemDrawer
-                isOpen={isHemDrawerOpen}
-                onClose={() => setIsHemDrawerOpen(false)}
-              />
-          </>
+    return (
+      <>
+          <VuiFlexContainer alignItems="center" data-testid="factualConsistencyBadge">
+              {/*{score === undefined && <VuiSpinner size="s" />}*/}
+              <VuiFlexItem>
+                  {
+                      fcsMode === "badge" ? <ConfidenceBadge confidenceLevel={getConfidenceLevel(score ?? -1)} />
+                        : badge
+                  }
+              </VuiFlexItem>
+              <VuiFlexItem grow={false} shrink={false}>
+                  <VuiLinkInternal
+                    onClick={() => setIsHemDrawerOpen(true)}
+                  >
+                      What's this?
+                  </VuiLinkInternal>
+              </VuiFlexItem>
+          </VuiFlexContainer>
+          <HemDrawer
+            isOpen={isHemDrawerOpen}
+            onClose={() => setIsHemDrawerOpen(false)}
+          />
+      </>
 
-        );
-    }
+    );
 
-    else {
-        return <></>
-    }
 
 };