From e02dab4a5cdc2698805d1d6fd1ae2bb8542e247e Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Sun, 15 Dec 2024 21:20:03 +0100
Subject: [PATCH] [front/components/actions/retrieval] - refactor: transition
 utils to TSX and integrate icons

 - Renamed `utils.ts` to `utils.tsx` to support JSX syntax
 - Replaced citation type with icon component in `makeDocumentCitation` function

[front/components/markdown] - feature: create citationIconMap to map icon types to components

 - Added a new `citationIconMap` that maps citation types to corresponding SVG components
 - Updated `MarkdownCitation` interface to use React JSX elements for icons instead of citation type strings
---
 .../actions/retrieval/{utils.ts => utils.tsx} |  5 ++-
 .../components/markdown/MarkdownCitation.tsx  | 34 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 2 deletions(-)
 rename front/components/actions/retrieval/{utils.ts => utils.tsx} (75%)

diff --git a/front/components/actions/retrieval/utils.ts b/front/components/actions/retrieval/utils.tsx
similarity index 75%
rename from front/components/actions/retrieval/utils.ts
rename to front/components/actions/retrieval/utils.tsx
index 86597f0677d1..c56e03fedc4d 100644
--- a/front/components/actions/retrieval/utils.ts
+++ b/front/components/actions/retrieval/utils.tsx
@@ -5,14 +5,17 @@ import {
 } from "@dust-tt/types";
 
 import type { MarkdownCitation } from "@app/components/markdown/MarkdownCitation";
+import { citationIconMap } from "@app/components/markdown/MarkdownCitation";
 
 export function makeDocumentCitation(
   document: RetrievalDocumentType
 ): MarkdownCitation {
+  const IconComponent =
+    citationIconMap[getProviderFromRetrievedDocument(document)];
   return {
     href: document.sourceUrl ?? undefined,
     title: getTitleFromRetrievedDocument(document),
-    type: getProviderFromRetrievedDocument(document),
+    icon: <IconComponent />,
   };
 }
 
diff --git a/front/components/markdown/MarkdownCitation.tsx b/front/components/markdown/MarkdownCitation.tsx
index b7eae8b110e6..61bdcfdca421 100644
--- a/front/components/markdown/MarkdownCitation.tsx
+++ b/front/components/markdown/MarkdownCitation.tsx
@@ -1,3 +1,18 @@
+import {
+  ConfluenceLogo,
+  DocumentTextStrokeIcon,
+  DriveLogo,
+  GithubLogo,
+  ImageStrokeIcon,
+  IntercomLogo,
+  MicrosoftLogo,
+  NotionLogo,
+  SlackLogo,
+  SnowflakeLogo,
+  ZendeskLogo,
+} from "@dust-tt/sparkle";
+import type { SVGProps } from "react";
+
 const CITATION_ICONS = [
   "confluence",
   "document",
@@ -14,9 +29,26 @@ const CITATION_ICONS = [
 
 export type CitationIconType = (typeof CITATION_ICONS)[number];
 
+export const citationIconMap: Record<
+  CitationIconType,
+  (props: SVGProps<SVGSVGElement>) => React.JSX.Element
+> = {
+  confluence: ConfluenceLogo,
+  document: DocumentTextStrokeIcon,
+  github: GithubLogo,
+  google_drive: DriveLogo,
+  intercom: IntercomLogo,
+  microsoft: MicrosoftLogo,
+  zendesk: ZendeskLogo,
+  notion: NotionLogo,
+  slack: SlackLogo,
+  image: ImageStrokeIcon,
+  snowflake: SnowflakeLogo,
+};
+
 export interface MarkdownCitation {
   description?: string;
   href?: string;
   title: string;
-  type: CitationIconType;
+  icon: React.JSX.Element;
 }