Small adjustment to BuilderLayout & Animation

front/components/assistant/TryAssistant.tsx

@@ -102,8 +102,10 @@ export function TryAssistantModal({
 export function TryAssistant({
   owner,
   assistant,
+  conversationFading,
 }: {
   owner: WorkspaceType;
+  conversationFading?: boolean;
   assistant: LightAgentConfigurationType | null;
 }) {
   const { user } = useUser();
@@ -145,6 +147,7 @@ export function TryAssistant({
                 onStickyMentionsChange={setStickyMentions}
                 isInModal
                 hideReactions
+                isFading={conversationFading}
               />
             </div>
           )}
@@ -175,11 +178,14 @@ export function usePreviewAssistant({
   builderState: AssistantBuilderState;
 }): {
   shouldAnimate: boolean;
+  isFading: boolean; // Add isFading to the return type
   draftAssistant: LightAgentConfigurationType | null;
 } {
+  const animationLength = 1000;
   const [draftAssistant, setDraftAssistant] =
     useState<LightAgentConfigurationType | null>();
   const [animateDrawer, setAnimateDrawer] = useState(false);
+  const [isFading, setIsFading] = useState(false);
   const drawerAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const debounceHandle = useRef<NodeJS.Timeout | undefined>(undefined);
 
@@ -189,9 +195,11 @@ export function usePreviewAssistant({
       drawerAnimationTimeoutRef.current = null;
     }
     setAnimateDrawer(true);
+    setIsFading(true); // Start fading conversation
     drawerAnimationTimeoutRef.current = setTimeout(() => {
       setAnimateDrawer(false);
-    }, 1000);
+      setIsFading(false); // Stop fading
+    }, animationLength);
   };
 
   const submit = useCallback(async () => {
@@ -224,7 +232,10 @@ export function usePreviewAssistant({
 
     animate();
 
-    setDraftAssistant(a);
+    // Use setTimeout to delay the execution of setDraftAssistant by 500 milliseconds
+    setTimeout(() => {
+      setDraftAssistant(a);
+    }, animationLength / 2);
   }, [
     owner,
     builderState.actionMode,
@@ -245,6 +256,7 @@ export function usePreviewAssistant({
 
   return {
     shouldAnimate: animateDrawer,
+    isFading,
     draftAssistant: draftAssistant ?? null,
   };
 }

front/components/assistant/conversation/Conversation.tsx

@@ -19,6 +19,7 @@ import {
   useConversationReactions,
   useConversations,
 } from "@app/lib/swr";
+import { classNames } from "@app/lib/utils";
 
 /**
  *
@@ -32,13 +33,15 @@ export default function Conversation({
   onStickyMentionsChange,
   isInModal,
   hideReactions,
+  isFading = false,
 }: {
   owner: WorkspaceType;
   user: UserType;
   conversationId: string;
   onStickyMentionsChange?: (mentions: AgentMention[]) => void;
   isInModal?: boolean;
   hideReactions?: boolean;
+  isFading?: boolean;
 }) {
   const {
     conversation,
@@ -181,7 +184,7 @@ export default function Conversation({
   }
 
   return (
-    <div className="pb-44">
+    <div className={classNames("pb-44", isFading ? "animate-fadeout" : "")}>
       {conversation.content.map((versionedMessages) => {
         const m = versionedMessages[versionedMessages.length - 1];
         const convoReactions = reactions.find((r) => r.messageId === m.sId);

front/components/assistant_builder/AssistantBuilder.tsx

@@ -410,8 +410,11 @@ export default function AssistantBuilder({
     ? `Edit @${builderState.handle}`
     : "New Assistant";
 
-  const { shouldAnimate: shouldAnimatePreviewDrawer, draftAssistant } =
-    usePreviewAssistant({ owner, builderState });
+  const {
+    shouldAnimate: shouldAnimatePreviewDrawer,
+    draftAssistant,
+    isFading,
+  } = usePreviewAssistant({ owner, builderState });
 
   return (
     <>
@@ -529,7 +532,11 @@ export default function AssistantBuilder({
                   : ""
               )}
             >
-              <TryAssistant owner={owner} assistant={draftAssistant} />
+              <TryAssistant
+                owner={owner}
+                assistant={draftAssistant}
+                conversationFading={isFading}
+              />
             </div>
           }
           isRightPanelOpen={previewDrawerOpenedAt !== null}

front/tailwind.config.js

@@ -108,16 +108,22 @@ module.exports = {
             opacity: 0,
           },
         },
+        fadeout: {
+          "0%": {
+            opacity: "1",
+          },
+          "100%": {
+            opacity: "0",
+          },
+        },
         reload: {
           "0%, 100%": {
             transform: "scale(1)",
             opacity: "1",
-            filter: "blur(0px)",
           },
           "50%": {
-            transform: "scale(0.98)",
-            opacity: "0.8",
-            filter: "blur(8px)",
+            transform: "scale(0.99)",
+            opacity: "0.4",
           },
         },
       },
@@ -127,6 +133,7 @@ module.exports = {
         "cursor-blink": "cursor-blink 0.9s infinite;",
         shake: "shake 0.82s cubic-bezier(.36,.07,.19,.97) both",
         reload: "reload 1000ms ease-out",
+        fadeout: "fadeout 500ms ease-out",
       },
       colors: {
         brand: {

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.114",
+  "version": "0.2.115",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

sparkle/src/components/BuilderLayout.tsx

@@ -25,7 +25,7 @@ export function BuilderLayout({
       </div>
       <div className="hidden s-h-full lg:s-flex">
         <div className="s-h-full s-w-full">
-          <div className="s-flex s-h-full s-w-full s-items-center s-gap-4 s-px-6">
+          <div className="s-flex s-h-full s-w-full s-items-center s-gap-4 s-px-5">
             <div className="s-flex s-h-full s-grow s-justify-center">
               <div className="s-h-full s-w-full s-max-w-[900px]">
                 {leftPanel}
@@ -51,7 +51,7 @@ export function BuilderLayout({
                   isRightPanelOpen ? "s-w-[440px]" : "s-w-0"
                 )}
               >
-                <div className="s-min-w-20 s-h-full s-py-6">{rightPanel}</div>
+                <div className="s-min-w-20 s-h-full s-py-5">{rightPanel}</div>
               </div>
             </div>
           </div>