From 09bb9a32b7a35ea804e0e17417ee0abdfb70122f Mon Sep 17 00:00:00 2001
From: Aric Lasry <lasry.aric@gmail.com>
Date: Wed, 11 Oct 2023 21:07:07 +0200
Subject: [PATCH] Fixes

---
 .../conversation/ContentFragment.tsx          | 36 +++++--------------
 front/lib/utils.ts                            |  4 +++
 sparkle/src/components/Citation.tsx           | 10 +++---
 3 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/front/components/assistant/conversation/ContentFragment.tsx b/front/components/assistant/conversation/ContentFragment.tsx
index f36910861fb0e..a1e3f3fa641f0 100644
--- a/front/components/assistant/conversation/ContentFragment.tsx
+++ b/front/components/assistant/conversation/ContentFragment.tsx
@@ -1,37 +1,17 @@
-import {
-  DocumentTextIcon,
-  ExternalLinkIcon,
-  IconButton,
-  SlackLogo,
-} from "@dust-tt/sparkle";
-import Link from "next/link";
+import { Citation } from "@dust-tt/sparkle";
 
-import { classNames } from "@app/lib/utils";
+import { assertNever } from "@app/lib/utils";
 import { ContentFragmentType } from "@app/types/assistant/conversation";
 
 export function ContentFragment({ message }: { message: ContentFragmentType }) {
-  let logo = <DocumentTextIcon className="h-5 w-5 text-slate-500" />;
+  let logoType: "document" | "slack" = "document";
   switch (message.contentType) {
     case "slack_thread_content":
-      logo = <SlackLogo className="h-5 w-5 text-slate-500" />;
+      logoType = "slack";
       break;
+
+    default:
+      assertNever(message.contentType);
   }
-  return (
-    <div
-      className={classNames(
-        "flex w-48 flex-none flex-col gap-2 rounded-xl border border-structure-100 bg-white p-3 sm:w-64"
-      )}
-    >
-      <div className="flex items-center gap-1.5">
-        <div className="h-5 w-5">{logo}</div>
-        <div className="flex-grow text-xs" />
-        {message.url && (
-          <Link href={message.url} target="_blank">
-            <IconButton icon={ExternalLinkIcon} size="xs" variant="primary" />
-          </Link>
-        )}
-      </div>
-      <div className="text-xs font-bold text-element-900">{message.title}</div>
-    </div>
-  );
+  return <Citation title={message.title} type={logoType} href={message.url} />;
 }
diff --git a/front/lib/utils.ts b/front/lib/utils.ts
index e2ac782d9bf76..5d4170dfc3340 100644
--- a/front/lib/utils.ts
+++ b/front/lib/utils.ts
@@ -130,3 +130,7 @@ export function ioTsEnum<EnumType>(
     t.identity
   );
 }
+
+export function assertNever(x: never): never {
+  throw new Error(`${x} is not of type never. This should never happen.`);
+}
\ No newline at end of file
diff --git a/sparkle/src/components/Citation.tsx b/sparkle/src/components/Citation.tsx
index 08f596f6c7973..5e67574ad2fbf 100644
--- a/sparkle/src/components/Citation.tsx
+++ b/sparkle/src/components/Citation.tsx
@@ -12,7 +12,7 @@ interface CitationProps {
   description?: string;
   index?: ReactNode;
   isBlinking?: boolean;
-  href: string;
+  href?: string;
 }
 
 const typeIcons = {
@@ -46,9 +46,11 @@ export function Citation({
         )}
         <Icon visual={typeIcons[type]} size="sm" />
         <div className="s-flex-grow s-text-xs" />
-        <a target="_blank" rel="noopener noreferrer" href={href}>
-          <IconButton icon={ExternalLinkIcon} size="sm" variant="primary" />
-        </a>
+        {href && (
+          <a target="_blank" rel="noopener noreferrer" href={href}>
+            <IconButton icon={ExternalLinkIcon} size="sm" variant="primary" />
+          </a>
+        )}
       </div>
       <div className="s-text-sm s-font-bold s-text-element-900">{title}</div>
       {description && (