Remove new conversation input bar animation (#9534)

* Remove new conversation input bar animation

* imports

Author: spolu

front/components/assistant/conversation/ConversationContainer.tsx

@@ -11,16 +11,8 @@ import type {
 } from "@dust-tt/types";
 import type { UploadedContentFragment } from "@dust-tt/types";
 import { Err, Ok } from "@dust-tt/types";
-import { Transition } from "@headlessui/react";
 import { useRouter } from "next/router";
-import {
-  Fragment,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 
 import { ReachedLimitPopup } from "@app/components/app/ReachedLimitPopup";
 import { AssistantBrowserContainer } from "@app/components/assistant/conversation/AssistantBrowserContainer";
@@ -231,12 +223,12 @@ export function ConversationContainer({
         });
       } else {
         // We start the push before creating the message to optimize for instantaneity as well.
-        setActiveConversationId(conversationRes.value.sId);
-        void router.push(
+        await router.push(
           `/w/${owner.sId}/assistant/${conversationRes.value.sId}`,
           undefined,
           { shallow: true }
         );
+        setActiveConversationId(conversationRes.value.sId);
 
         return new Ok(undefined);
       }
@@ -287,47 +279,27 @@ export function ConversationContainer({
       description="Drag and drop your text files (txt, doc, pdf) and image files (jpg, png) here."
       title="Attach files to the conversation"
     >
-      <Transition
-        show={!!activeConversationId}
-        as={Fragment}
-        enter="transition-all duration-300 ease-out"
-        enterFrom="flex-none w-full h-0"
-        enterTo="flex flex-1 w-full"
-        leave="transition-all duration-0 ease-out"
-        leaveFrom="flex flex-1 w-full"
-        leaveTo="flex-none w-full h-0"
-      >
-        {activeConversationId ? (
-          <ConversationViewer
-            owner={owner}
-            user={user}
-            conversationId={activeConversationId}
-            // TODO(2024-06-20 flav): Fix extra-rendering loop with sticky mentions.
-            onStickyMentionsChange={onStickyMentionsChange}
-          />
-        ) : (
-          <div></div>
-        )}
-      </Transition>
-
-      <Transition
-        as={Fragment}
-        show={!activeConversationId}
-        enter="transition-opacity duration-100 ease-out"
-        enterFrom="opacity-0 min-h-[20vh]"
-        enterTo="opacity-100"
-        leave="transition-opacity duration-100 ease-out"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0 min-h-[20vh]"
-      >
+      {activeConversationId ? (
+        <ConversationViewer
+          owner={owner}
+          user={user}
+          conversationId={activeConversationId}
+          // TODO(2024-06-20 flav): Fix extra-rendering loop with sticky mentions.
+          onStickyMentionsChange={onStickyMentionsChange}
+        />
+      ) : (
+        <div></div>
+      )}
+
+      {!activeConversationId && (
         <div
           id="assistant-input-header"
           className="flex h-fit min-h-[20vh] w-full max-w-4xl flex-col justify-end gap-8 px-4 py-2"
         >
           <Page.Header title={greeting} />
           <Page.SectionHeader title="Start a conversation" />
         </div>
-      </Transition>
+      )}
 
       <FixedAssistantInputBar
         owner={owner}
@@ -338,16 +310,7 @@ export function ConversationContainer({
         conversationId={activeConversationId}
       />
 
-      <Transition
-        show={!activeConversationId}
-        enter="transition-opacity duration-100 ease-out"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="transition-opacity duration-100 ease-out"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-        className={"flex w-full justify-center"}
-      >
+      {!activeConversationId && (
         <AssistantBrowserContainer
           onAgentConfigurationClick={setInputbarMention}
           setAssistantToMention={(assistant) => {
@@ -356,7 +319,7 @@ export function ConversationContainer({
           owner={owner}
           isBuilder={isBuilder}
         />
-      </Transition>
+      )}
 
       <ReachedLimitPopup
         isOpened={planLimitReached}

front/components/assistant/conversation/ConversationLayout.tsx

@@ -118,9 +118,10 @@ export default function ConversationLayout({
           }
           titleChildren={
             // TODO: Improve so we don't re-render everytime.
-            conversation && (
+            activeConversationId && (
               <ConversationTitle
                 owner={owner}
+                conversationId={activeConversationId}
                 conversation={conversation}
                 shareLink={`${baseUrl}/w/${owner.sId}/assistant/${activeConversationId}`}
                 onDelete={onDeleteConversation}

front/components/assistant/conversation/ConversationTitle.tsx

@@ -22,12 +22,14 @@ import { classNames } from "@app/lib/utils";
 
 export function ConversationTitle({
   owner,
+  conversationId,
   conversation,
   shareLink,
   onDelete,
 }: {
   owner: WorkspaceType;
-  conversation: ConversationType;
+  conversationId: string;
+  conversation: ConversationType | null;
   shareLink: string;
   onDelete?: (conversationId: string) => void;
 }) {
@@ -52,7 +54,7 @@ export function ConversationTitle({
   const onTitleChange = async (title: string) => {
     try {
       const res = await fetch(
-        `/api/w/${owner.sId}/assistant/conversations/${conversation.sId}`,
+        `/api/w/${owner.sId}/assistant/conversations/${conversationId}`,
         {
           method: "PATCH",
           headers: {
@@ -65,7 +67,7 @@ export function ConversationTitle({
         }
       );
       await mutate(
-        `/api/w/${owner.sId}/assistant/conversations/${conversation.sId}`
+        `/api/w/${owner.sId}/assistant/conversations/${conversationId}`
       );
       void mutate(`/api/w/${owner.sId}/assistant/conversations`);
       if (!res.ok) {
@@ -86,15 +88,15 @@ export function ConversationTitle({
           onClose={() => setShowDeleteDialog(false)}
           onDelete={() => {
             setShowDeleteDialog(false);
-            onDelete(conversation.sId);
+            onDelete(conversationId);
           }}
         />
       )}
       <div className="grid h-full min-w-0 max-w-full grid-cols-[1fr,auto] items-center gap-4">
         <div className="flex min-w-0 flex-row items-center gap-4">
           {!isEditingTitle ? (
             <div className="min-w-0 overflow-hidden truncate">
-              <span className="font-bold">{conversation.title || ""}</span>
+              <span className="font-bold">{conversation?.title || ""}</span>
             </div>
           ) : (
             <div className="w-[84%]">
@@ -162,7 +164,7 @@ export function ConversationTitle({
             <IconButton
               icon={PencilSquareIcon}
               onClick={() => {
-                setEditedTitle(conversation.title || "");
+                setEditedTitle(conversation?.title || "");
                 setIsEditingTitle(true);
               }}
               size="sm"
@@ -173,7 +175,7 @@ export function ConversationTitle({
         <div className="flex items-center">
           <div className="hidden pr-6 lg:flex">
             <ConversationParticipants
-              conversationId={conversation.sId}
+              conversationId={conversationId}
               owner={owner}
             />
           </div>

front/components/assistant/conversation/input_bar/InputBar.tsx

@@ -168,7 +168,8 @@ export function AssistantInputBar({
       ...new Set(rawMentions.map((mention) => mention.id)),
     ].map((id) => ({ configurationId: id }));
 
-    // When we are creating a new conversation, we will disable the input bar, show a loading spinner and in case of error, re-enable the input bar
+    // When we are creating a new conversation, we will disable the input bar, show a loading
+    // spinner and in case of error, re-enable the input bar
     if (!conversationId) {
       setLoading(true);
       setDisableSendButton(true);
@@ -237,7 +238,7 @@ export function AssistantInputBar({
         }),
       }
     );
-    await mutateConversation();
+    mutateConversation();
   };
 
   useEffect(() => {