[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

front/components/actions/retrieval/utils.ts → 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 />,
   };
 }
 

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;
 }