New card deploy

extension/app/src/components/conversation/AgentMessage.tsx

@@ -23,25 +23,12 @@ import {
   removeNulls,
 } from "@dust-tt/client";
 import type { ConversationMessageSizeType } from "@dust-tt/sparkle";
+import { DocumentTextStrokeIcon } from "@dust-tt/sparkle";
 import {
-  ConfluenceLogo,
-  DocumentTextIcon,
-  DriveLogo,
-  GithubLogo,
-  ImageIcon,
-  IntercomLogo,
-  MicrosoftLogo,
-  NotionLogo,
-  SlackLogo,
-  SnowflakeLogo,
-  ZendeskLogo,
-} from "@dust-tt/sparkle";
-import {
-  CitationNew,
-  CitationNewIcons,
-  CitationNewIndex,
-  CitationNewTitle,
-  Icon,
+  Citation,
+  CitationIcons,
+  CitationIndex,
+  CitationTitle,
 } from "@dust-tt/sparkle";
 import {
   ArrowPathIcon,
@@ -59,12 +46,13 @@ import {
 } from "@dust-tt/sparkle";
 import { AgentMessageActions } from "@extension/components/conversation/AgentMessageActions";
 import { GenerationContext } from "@extension/components/conversation/GenerationContextProvider";
-import type { MarkdownCitation } from "@extension/components/conversation/MarkdownCitation";
 import {
   CitationsContext,
   CiteBlock,
   getCiteDirective,
 } from "@extension/components/markdown/CiteBlock";
+import type { MarkdownCitation } from "@extension/components/markdown/MarkdownCitation";
+import { citationIconMap } from "@extension/components/markdown/MarkdownCitation";
 import {
   MentionBlock,
   mentionDirective,
@@ -86,20 +74,6 @@ import type { ReactMarkdownProps } from "react-markdown/lib/complex-types";
 import type { PluggableList } from "react-markdown/lib/react-markdown";
 import { visit } from "unist-util-visit";
 
-const typeIcons = {
-  confluence: ConfluenceLogo,
-  document: DocumentTextIcon,
-  github: GithubLogo,
-  google_drive: DriveLogo,
-  intercom: IntercomLogo,
-  microsoft: MicrosoftLogo,
-  zendesk: ZendeskLogo,
-  notion: NotionLogo,
-  slack: SlackLogo,
-  image: ImageIcon,
-  snowflake: SnowflakeLogo,
-};
-
 export function visualizationDirective() {
   return (tree: any) => {
     visit(tree, ["containerDirective"], (node) => {
@@ -117,10 +91,12 @@ export function visualizationDirective() {
 export function makeDocumentCitation(
   document: RetrievalDocumentPublicType
 ): MarkdownCitation {
+  const IconComponent =
+    citationIconMap[getProviderFromRetrievedDocument(document)];
   return {
     href: document.sourceUrl ?? undefined,
     title: getTitleFromRetrievedDocument(document),
-    type: getProviderFromRetrievedDocument(document),
+    icon: <IconComponent />,
   };
 }
 
@@ -131,7 +107,7 @@ export function makeWebsearchResultsCitation(
     description: result.snippet,
     href: result.link,
     title: result.title,
-    type: "document" as const,
+    icon: <DocumentTextStrokeIcon />,
   };
 }
 
@@ -651,13 +627,13 @@ function getCitations({
   activeReferences.sort((a, b) => a.index - b.index);
   return activeReferences.map(({ document, index }) => {
     return (
-      <CitationNew key={index} href={document.href}>
-        <CitationNewIcons>
-          <CitationNewIndex>{index}</CitationNewIndex>
-          <Icon visual={typeIcons[document.type]} />
-        </CitationNewIcons>
-        <CitationNewTitle>{document.title}</CitationNewTitle>
-      </CitationNew>
+      <Citation key={index} href={document.href}>
+        <CitationIcons>
+          <CitationIndex>{index}</CitationIndex>
+          {document.icon}
+        </CitationIcons>
+        <CitationTitle>{document.title}</CitationTitle>
+      </Citation>
     );
   });
 }

extension/app/src/components/conversation/MessageItem.tsx

@@ -4,15 +4,14 @@ import type {
 } from "@dust-tt/client";
 import {
   Avatar,
-  CitationNew,
-  CitationNewIcons,
-  CitationNewImage,
-  CitationNewTitle,
+  Citation,
+  CitationIcons,
+  CitationImage,
+  CitationTitle,
   DocumentTextIcon,
   Icon,
   SlackLogo,
 } from "@dust-tt/sparkle";
-import type { CitationType } from "@dust-tt/sparkle/dist/esm/components/Citation";
 import { AgentMessage } from "@extension/components/conversation/AgentMessage";
 import { UserMessage } from "@extension/components/conversation/UserMessage";
 import type { MessageWithContentFragmentsType } from "@extension/lib/conversation";
@@ -45,44 +44,44 @@ const MessageItem = React.forwardRef<HTMLDivElement, MessageItemProps>(
       case "user_message":
         const citations = message.contenFragments
           ? message.contenFragments.map((contentFragment) => {
-              const citationType: CitationType = [
-                "dust-application/slack",
-              ].includes(contentFragment.contentType)
+              const citationType = ["dust-application/slack"].includes(
+                contentFragment.contentType
+              )
                 ? "slack"
                 : "document";
 
               const icon =
                 citationType === "slack" ? SlackLogo : DocumentTextIcon;
 
               return (
-                <CitationNew
+                <Citation
                   key={contentFragment.sId}
                   href={contentFragment.sourceUrl ?? undefined}
                 >
                   <div className="flex gap-2">
                     {contentFragment.context.profilePictureUrl && (
-                      <CitationNewIcons>
+                      <CitationIcons>
                         <Avatar
                           visual={contentFragment.context.profilePictureUrl}
                           size="xs"
                         />
-                      </CitationNewIcons>
+                      </CitationIcons>
                     )}
                     {contentFragment.sourceUrl ? (
                       <>
-                        <CitationNewImage imgSrc={contentFragment.sourceUrl} />
-                        <CitationNewIcons>
+                        <CitationImage imgSrc={contentFragment.sourceUrl} />
+                        <CitationIcons>
                           <Icon visual={icon} />
-                        </CitationNewIcons>
+                        </CitationIcons>
                       </>
                     ) : (
-                      <CitationNewIcons>
+                      <CitationIcons>
                         <Icon visual={icon} />
-                      </CitationNewIcons>
+                      </CitationIcons>
                     )}
                   </div>
-                  <CitationNewTitle>{contentFragment.title}</CitationNewTitle>
-                </CitationNew>
+                  <CitationTitle>{contentFragment.title}</CitationTitle>
+                </Citation>
               );
             })
           : undefined;

extension/app/src/components/input_bar/InputBarCitations.tsx

@@ -1,9 +1,9 @@
 import {
-  CitationNew,
-  CitationNewClose,
-  CitationNewIcons,
-  CitationNewImage,
-  CitationNewTitle,
+  Citation,
+  CitationClose,
+  CitationIcons,
+  CitationImage,
+  CitationTitle,
   DocumentIcon,
   Icon,
   ImageIcon,
@@ -27,29 +27,29 @@ export function InputBarCitations({
 
       nodes.push(
         <>
-          <CitationNew
+          <Citation
             disabled={disabled}
             key={`cf-${blob.id}`}
             className="w-48"
             isLoading={blob.isUploading}
           >
             {isImage ? (
               <>
-                <CitationNewImage imgSrc={blob.preview ?? ""} />
-                <CitationNewIcons>
+                <CitationImage imgSrc={blob.preview ?? ""} />
+                <CitationIcons>
                   <Icon visual={ImageIcon} />
-                </CitationNewIcons>
+                </CitationIcons>
               </>
             ) : (
-              <CitationNewIcons>
+              <CitationIcons>
                 <Icon visual={DocumentIcon} />
-              </CitationNewIcons>
+              </CitationIcons>
             )}
-            <CitationNewTitle>{blob.id}</CitationNewTitle>
-            <CitationNewClose
+            <CitationTitle>{blob.id}</CitationTitle>
+            <CitationClose
               onClick={() => fileUploaderService.removeFile(blob.id)}
             />
-          </CitationNew>
+          </Citation>
         </>
       );
     }
@@ -62,7 +62,7 @@ export function InputBarCitations({
   }
 
   return (
-    <div className="flex gap-2 overflow-auto border-b border-structure-300/50 pb-3">
+    <div className="flex gap-2 overflow-auto border-b border-separator pb-3">
       {processContentFragments()}
     </div>
   );

extension/app/src/components/markdown/MarkdownCitation.tsx

@@ -1,8 +1,51 @@
-import type { CitationType } from "@dust-tt/sparkle";
+import {
+  ConfluenceLogo,
+  DocumentTextStrokeIcon,
+  DriveLogo,
+  GithubLogo,
+  ImageStrokeIcon,
+  IntercomLogo,
+  MicrosoftLogo,
+  NotionLogo,
+  SlackLogo,
+  SnowflakeLogo,
+  ZendeskLogo,
+} from "@dust-tt/sparkle";
+import type { SVGProps } from "react";
+
+export type CitationIconType =
+  | "confluence"
+  | "document"
+  | "github"
+  | "google_drive"
+  | "intercom"
+  | "microsoft"
+  | "zendesk"
+  | "notion"
+  | "slack"
+  | "image"
+  | "snowflake";
+
+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: CitationType;
+  icon: React.JSX.Element;
 }

extension/package.json

@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@dust-tt/client": "^1.0.15",
-    "@dust-tt/sparkle": "^0.2.332",
+    "@dust-tt/sparkle": "^0.2.343-rc5",
     "@tailwindcss/forms": "^0.5.9",
     "@tiptap/extension-character-count": "^2.9.1",
     "@tiptap/extension-mention": "^2.9.1",

front/components/DataSourceViewDocumentModal.tsx

@@ -69,7 +69,7 @@ export default function DataSourceViewDocumentModal({
           )}
           {!isDocumentLoading && document && (
             <>
-              <div className="mb-4 mt-8 text-sm text-element-900">
+              <div className="mb-4 mt-8 text-sm text-foreground">
                 Content of the document:
               </div>
               <pre className="whitespace-pre-wrap bg-structure-100 py-8 pl-4 pr-2 text-sm text-element-800">

front/components/actions/ActionDetailsWrapper.tsx

@@ -17,11 +17,9 @@ export function ActionDetailsWrapper({
   return (
     <Collapsible defaultOpen={defaultOpen}>
       <Collapsible.Button>
-        <div className="flex flex-row items-center gap-x-2">
-          <Icon className="text-brand" size="xs" visual={visual} />
-          <span className="text-sm font-bold text-element-900">
-            {actionName}
-          </span>
+        <div className="flex flex-row items-center gap-x-2 text-foreground">
+          <Icon size="sm" visual={visual} />
+          <span className="text-base font-semibold">{actionName}</span>
         </div>
       </Collapsible.Button>
       <Collapsible.Panel>{children}</Collapsible.Panel>