From aeceabc74a6666ee55c416b7cf212ce0b9c675a8 Mon Sep 17 00:00:00 2001
From: Thomas Draier <thomas@dust.tt>
Date: Mon, 30 Dec 2024 14:12:12 +0100
Subject: [PATCH] [extension] Update sparkle (#9646)

* [extension] Update to latest sparkle

* restore input bar
---
 .../assistants/AssistantFavorites.tsx         | 10 +++----
 .../components/conversation/AgentMessage.tsx  | 27 +++++++++----------
 .../conversation/AgentSuggestion.tsx          | 11 ++++----
 extension/app/src/lib/dust_api.ts             |  1 +
 extension/package-lock.json                   |  8 +++---
 extension/package.json                        |  2 +-
 6 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/extension/app/src/components/assistants/AssistantFavorites.tsx b/extension/app/src/components/assistants/AssistantFavorites.tsx
index 30d91f8b08dd..767439d9eb02 100644
--- a/extension/app/src/components/assistants/AssistantFavorites.tsx
+++ b/extension/app/src/components/assistants/AssistantFavorites.tsx
@@ -1,4 +1,4 @@
-import { AssistantPreview, Button, Page } from "@dust-tt/sparkle";
+import { AssistantCard, Button, CardGrid, Page } from "@dust-tt/sparkle";
 import { usePublicAgentConfigurations } from "@extension/components/assistants/usePublicAgentConfigurations";
 import { InputBarContext } from "@extension/components/input_bar/InputBarContext";
 import { useCallback, useContext } from "react";
@@ -40,22 +40,20 @@ export function AssistantFavorites() {
     <div className="h-full w-full pt-2 pb-12">
       <Page.SectionHeader title="Favorites" />
       {hasFavorites ? (
-        <div className="relative grid w-full grid-cols-2 gap-2">
+        <CardGrid className="mb-12">
           {agentConfigurations.map(
             ({ sId, name, pictureUrl, lastAuthors, description }) => (
-              <AssistantPreview
+              <AssistantCard
                 key={sId}
                 title={name}
                 pictureUrl={pictureUrl}
                 subtitle={lastAuthors?.join(", ") ?? ""}
                 description={description}
-                variant="minimal"
                 onClick={() => handleAssistantClick(sId)}
-                hasAction={false}
               />
             )
           )}
-        </div>
+        </CardGrid>
       ) : (
         <div className="flex flex-col items-center pt-20 gap-4">
           <p className="text-slate-400">
diff --git a/extension/app/src/components/conversation/AgentMessage.tsx b/extension/app/src/components/conversation/AgentMessage.tsx
index 8eae148a54c5..6d868d07e8c4 100644
--- a/extension/app/src/components/conversation/AgentMessage.tsx
+++ b/extension/app/src/components/conversation/AgentMessage.tsx
@@ -543,22 +543,19 @@ export function AgentMessage({
 
     return (
       <div className="flex flex-col gap-y-4">
-        <AgentMessageActions
-          agentMessage={agentMessage}
-          size={size}
-          owner={owner}
-        />
-
-        {agentMessage.chainOfThought?.length ? (
-          <ContentMessage
-            title="Assistant thoughts"
-            variant="slate"
-            icon={ChatBubbleThoughtIcon}
-          >
-            {agentMessage.chainOfThought}
-          </ContentMessage>
-        ) : null}
+        <div className="flex flex-col gap-2">
+          <AgentMessageActions
+            agentMessage={agentMessage}
+            size={size}
+            owner={owner}
+          />
 
+          {agentMessage.chainOfThought?.length ? (
+            <ContentMessage title="Assistant thoughts" variant="slate">
+              {agentMessage.chainOfThought}
+            </ContentMessage>
+          ) : null}
+        </div>
         {agentMessage.content !== null && (
           <div>
             {lastTokenClassification !== "chain_of_thought" &&
diff --git a/extension/app/src/components/conversation/AgentSuggestion.tsx b/extension/app/src/components/conversation/AgentSuggestion.tsx
index 30125a2b6f87..d077cbc3b204 100644
--- a/extension/app/src/components/conversation/AgentSuggestion.tsx
+++ b/extension/app/src/components/conversation/AgentSuggestion.tsx
@@ -4,8 +4,9 @@ import type {
   UserMessageType,
 } from "@dust-tt/client";
 import {
-  AssistantPreview,
+  AssistantCard,
   Button,
+  CardGrid,
   RobotIcon,
   Spinner,
   useSendNotification,
@@ -101,20 +102,18 @@ export function AgentSuggestion({
             <Spinner />
           </div>
         ) : (
-          <div className="mt-3 grid gap-2 md:grid-cols-3">
+          <CardGrid className="mb-12">
             {topAgents.map((agent, id) => (
-              <AssistantPreview
+              <AssistantCard
                 key={`${agent.sId}-${id}`}
-                variant="minimal"
                 description={agent.description}
                 subtitle={agent.lastAuthors?.join(", ") ?? ""}
                 title={agent.name}
                 pictureUrl={agent.pictureUrl}
-                hasAction={false}
                 onClick={() => handleSelectSuggestion(agent)}
               />
             ))}
-          </div>
+          </CardGrid>
         )}
       </div>
     </>
diff --git a/extension/app/src/lib/dust_api.ts b/extension/app/src/lib/dust_api.ts
index b6310e5721a4..cc923870f4db 100644
--- a/extension/app/src/lib/dust_api.ts
+++ b/extension/app/src/lib/dust_api.ts
@@ -16,6 +16,7 @@ export const useDustAPI = () => {
   return new DustAPI(
     {
       url: process.env.DUST_DOMAIN,
+      nodeEnv: process.env.NODE_ENV,
     },
     {
       apiKey: () => getAccessToken(),
diff --git a/extension/package-lock.json b/extension/package-lock.json
index 297493d9a02c..a33118959966 100644
--- a/extension/package-lock.json
+++ b/extension/package-lock.json
@@ -10,7 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@dust-tt/client": "^1.0.15",
-        "@dust-tt/sparkle": "^0.2.343-rc5",
+        "@dust-tt/sparkle": "^0.2.348",
         "@tailwindcss/forms": "^0.5.9",
         "@tiptap/extension-character-count": "^2.9.1",
         "@tiptap/extension-mention": "^2.9.1",
@@ -258,9 +258,9 @@
       }
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.2.344",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.344.tgz",
-      "integrity": "sha512-dmvR6FPLCv+ipiaPO6DXR8VZFbauHrzBVLyGkj9StaMt50IhELTZPzBPHDkKz0fW++ttweQP+mxSnv2vU4nAng==",
+      "version": "0.2.348",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.348.tgz",
+      "integrity": "sha512-SDELT4xURrfvinYvhicNHGsphZXcxq07K4xOIjLg4IDsYdcxt10DvmjOGC1U8hcoKljvUE9dFfl8coKH1yk8ZQ==",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
diff --git a/extension/package.json b/extension/package.json
index 988839d6cb8c..4f38886d1c56 100644
--- a/extension/package.json
+++ b/extension/package.json
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@dust-tt/client": "^1.0.15",
-    "@dust-tt/sparkle": "^0.2.343-rc5",
+    "@dust-tt/sparkle": "^0.2.348",
     "@tailwindcss/forms": "^0.5.9",
     "@tiptap/extension-character-count": "^2.9.1",
     "@tiptap/extension-mention": "^2.9.1",