From ce6e4fdc0581af1c86c9e8f08dee8422013218a2 Mon Sep 17 00:00:00 2001
From: Stanislas Polu <spolu@proton.me>
Date: Thu, 12 Oct 2023 17:31:06 +0200
Subject: [PATCH] Page title use the conversation title

---
 .../conversation/ConversationTitle.tsx        | 24 +++-------
 front/components/sparkle/AppLayout.tsx        |  4 +-
 front/pages/w/[wId]/assistant/[cId]/index.tsx | 45 ++++++++++++-------
 front/pages/w/[wId]/assistant/new.tsx         |  3 +-
 4 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/front/components/assistant/conversation/ConversationTitle.tsx b/front/components/assistant/conversation/ConversationTitle.tsx
index 03496ecf7c23..e59721beff97 100644
--- a/front/components/assistant/conversation/ConversationTitle.tsx
+++ b/front/components/assistant/conversation/ConversationTitle.tsx
@@ -14,18 +14,18 @@ import React, { MouseEvent, useRef, useState } from "react";
 import { useSWRConfig } from "swr";
 
 import { ConversationParticipants } from "@app/components/assistant/conversation/ConversationParticipants";
-import { useConversation } from "@app/lib/swr";
 import { classNames } from "@app/lib/utils";
+import { ConversationType } from "@app/types/assistant/conversation";
 import { WorkspaceType } from "@app/types/user";
 
 export function ConversationTitle({
   owner,
-  conversationId,
+  conversation,
   shareLink,
   onDelete,
 }: {
   owner: WorkspaceType;
-  conversationId: string;
+  conversation: ConversationType;
   shareLink: string;
   onDelete?: () => void;
 }) {
@@ -46,16 +46,10 @@ export function ConversationTitle({
     }, 1000);
   };
 
-  const { conversation, isConversationError, isConversationLoading } =
-    useConversation({
-      conversationId,
-      workspaceId: owner.sId,
-    });
-
   const onTitleChange = async (title: string) => {
     try {
       const res = await fetch(
-        `/api/w/${owner.sId}/assistant/conversations/${conversationId}`,
+        `/api/w/${owner.sId}/assistant/conversations/${conversation.sId}`,
         {
           method: "PATCH",
           headers: {
@@ -68,7 +62,7 @@ export function ConversationTitle({
         }
       );
       await mutate(
-        `/api/w/${owner.sId}/assistant/conversations/${conversationId}`
+        `/api/w/${owner.sId}/assistant/conversations/${conversation.sId}`
       );
       void mutate(`/api/w/${owner.sId}/assistant/conversations`);
       if (!res.ok) {
@@ -81,16 +75,12 @@ export function ConversationTitle({
     }
   };
 
-  if (isConversationLoading || isConversationError || !conversation) {
-    return null;
-  }
-
   return (
     <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%]">
@@ -158,7 +148,7 @@ export function ConversationTitle({
           <IconButton
             icon={PencilSquareIcon}
             onClick={() => {
-              setEditedTitle(conversation?.title || "");
+              setEditedTitle(conversation.title || "");
               setIsEditingTitle(true);
             }}
             size="sm"
diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx
index 493f0796a433..6a5145252a29 100644
--- a/front/components/sparkle/AppLayout.tsx
+++ b/front/components/sparkle/AppLayout.tsx
@@ -163,6 +163,7 @@ export default function AppLayout({
   hideSidebar = false,
   topNavigationCurrent,
   subNavigation,
+  pageTitle,
   gaTrackingId,
   navChildren,
   titleChildren,
@@ -174,6 +175,7 @@ export default function AppLayout({
   hideSidebar?: boolean;
   topNavigationCurrent: TopNavigationId;
   subNavigation?: SidebarNavigation[] | null;
+  pageTitle?: string;
   gaTrackingId: string;
   navChildren?: React.ReactNode;
   titleChildren?: React.ReactNode;
@@ -184,7 +186,7 @@ export default function AppLayout({
   return (
     <>
       <Head>
-        <title>{`Dust - ${owner.name}`}</title>
+        <title>{pageTitle ? pageTitle : `Dust - ${owner.name}`}</title>
         <link rel="shortcut icon" href="/static/favicon.png" />
 
         <meta name="apple-mobile-web-app-title" content="Dust" />
diff --git a/front/pages/w/[wId]/assistant/[cId]/index.tsx b/front/pages/w/[wId]/assistant/[cId]/index.tsx
index 1374e3c40608..29ecc0248e5e 100644
--- a/front/pages/w/[wId]/assistant/[cId]/index.tsx
+++ b/front/pages/w/[wId]/assistant/[cId]/index.tsx
@@ -9,6 +9,7 @@ import { FixedAssistantInputBar } from "@app/components/assistant/conversation/I
 import { AssistantSidebarMenu } from "@app/components/assistant/conversation/SidebarMenu";
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { Authenticator, getSession, getUserFromSession } from "@app/lib/auth";
+import { useConversation } from "@app/lib/swr";
 import { AgentMention, MentionType } from "@app/types/assistant/conversation";
 import { UserType, WorkspaceType } from "@app/types/user";
 
@@ -60,19 +61,24 @@ export default function AssistantConversation({
   const [stickyMentions, setStickyMentions] = useState<AgentMention[]>([]);
 
   useEffect(() => {
+    function handleNewConvoShortcut(event: KeyboardEvent) {
+      // Check for Command on Mac or Ctrl on others
+      const isModifier = event.metaKey || event.ctrlKey;
+      if (isModifier && event.key === "/") {
+        void router.push(`/w/${owner.sId}/assistant/new`);
+      }
+    }
+
     window.addEventListener("keydown", handleNewConvoShortcut);
     return () => {
       window.removeEventListener("keydown", handleNewConvoShortcut);
     };
-  }, []);
+  }, [owner.sId, router]);
 
-  function handleNewConvoShortcut(event: KeyboardEvent) {
-    // Check for Command on Mac or Ctrl on others
-    const isModifier = event.metaKey || event.ctrlKey;
-    if (isModifier && event.key === "/") {
-      void router.push(`/w/${owner.sId}/assistant/new`);
-    }
-  }
+  const { conversation } = useConversation({
+    conversationId,
+    workspaceId: owner.sId,
+  });
 
   const handleSubmit = async (input: string, mentions: MentionType[]) => {
     // Create a new user message.
@@ -124,17 +130,24 @@ export default function AssistantConversation({
         user={user}
         owner={owner}
         isWideMode={true}
+        pageTitle={
+          conversation?.title
+            ? `Dust - ${conversation?.title}`
+            : `Dust - New Conversation`
+        }
         gaTrackingId={gaTrackingId}
         topNavigationCurrent="assistant"
         titleChildren={
-          <ConversationTitle
-            owner={owner}
-            conversationId={conversationId}
-            shareLink={`${baseUrl}/w/${owner.sId}/assistant/${conversationId}`}
-            onDelete={() => {
-              void handdleDeleteConversation();
-            }}
-          />
+          conversation && (
+            <ConversationTitle
+              owner={owner}
+              conversation={conversation}
+              shareLink={`${baseUrl}/w/${owner.sId}/assistant/${conversationId}`}
+              onDelete={() => {
+                void handdleDeleteConversation();
+              }}
+            />
+          )
         }
         navChildren={
           <AssistantSidebarMenu owner={owner} triggerInputAnimation={null} />
diff --git a/front/pages/w/[wId]/assistant/new.tsx b/front/pages/w/[wId]/assistant/new.tsx
index f3d4dd21be38..84175904e5fa 100644
--- a/front/pages/w/[wId]/assistant/new.tsx
+++ b/front/pages/w/[wId]/assistant/new.tsx
@@ -157,13 +157,14 @@ export default function AssistantNew({
           user={user}
           owner={owner}
           isWideMode={conversation ? true : false}
+          pageTitle={"Dust - New Conversation"}
           gaTrackingId={gaTrackingId}
           topNavigationCurrent="assistant"
           titleChildren={
             conversation && (
               <ConversationTitle
                 owner={owner}
-                conversationId={conversation.sId}
+                conversation={conversation}
                 shareLink={`${baseUrl}/w/${owner.sId}/assistant/${conversation.sId}`}
               />
             )