From f1558007868af1e189e32f41e7866dc525f3d060 Mon Sep 17 00:00:00 2001 From: Henry Fontanier Date: Mon, 2 Oct 2023 17:33:46 +0200 Subject: [PATCH 1/4] add ability to edit a conversation title --- .../conversation/ConversationTitle.tsx | 122 +++++++++++++++++- 1 file changed, 117 insertions(+), 5 deletions(-) diff --git a/front/components/assistant/conversation/ConversationTitle.tsx b/front/components/assistant/conversation/ConversationTitle.tsx index da8ea14c9105..85e10592e1dc 100644 --- a/front/components/assistant/conversation/ConversationTitle.tsx +++ b/front/components/assistant/conversation/ConversationTitle.tsx @@ -2,12 +2,17 @@ import { ArrowUpOnSquareIcon, Avatar, Button, + CheckIcon, ClipboardCheckIcon, DropdownMenu, + IconButton, LinkStrokeIcon, + PencilSquareIcon, TrashIcon, + XMarkIcon, } from "@dust-tt/sparkle"; -import React, { useState } from "react"; +import React, { MouseEvent, useRef, useState } from "react"; +import { useSWRConfig } from "swr"; import { useConversation } from "@app/lib/swr"; import { WorkspaceType } from "@app/types/user"; @@ -23,7 +28,14 @@ export function ConversationTitle({ shareLink: string; onDelete?: () => void; }) { + const { mutate } = useSWRConfig(); + const [copyLinkSuccess, setCopyLinkSuccess] = useState(false); + const [isEditingTitle, setIsEditingTitle] = useState(true); + const [editedTitle, setEditedTitle] = useState(""); + + const titleInputFocused = useRef(false); + const saveButtonFocused = useRef(false); const handleClick = async () => { await navigator.clipboard.writeText(shareLink || ""); @@ -39,16 +51,116 @@ export function ConversationTitle({ workspaceId: owner.sId, }); + const onTitleChange = async (title: string) => { + try { + const res = await fetch( + `/api/w/${owner.sId}/assistant/conversations/${conversationId}`, + { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + title, + visibility: conversation?.visibility, + }), + } + ); + await mutate( + `/api/w/${owner.sId}/assistant/conversations/${conversationId}` + ); + if (!res.ok) { + throw new Error("Failed to update title"); + } + setIsEditingTitle(false); + setEditedTitle(""); + } catch (e) { + alert("Failed to update title"); + } + }; + if (isConversationLoading || isConversationError || !conversation) { return null; } return ( -
-
- {conversation?.title || ""} -
+
+
+ {!isEditingTitle ? ( +
+ {conversation?.title || ""} +
+ ) : ( +
+ setEditedTitle(e.target.value)} + // this is to make sure the save button click + // is registered before the onBlur event + onFocus={() => (titleInputFocused.current = true)} + onBlur={() => { + setTimeout(() => { + if (!saveButtonFocused.current) { + setIsEditingTitle(false); + } + titleInputFocused.current = false; + }, 0); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + return onTitleChange(editedTitle); + } + }} + autoFocus + /> +
+ )} +
+ {isEditingTitle ? ( +
+
) => { + e.preventDefault(); + return onTitleChange(editedTitle); + }} + // this is to make sure the save button click + // is registered before the onBlur event + onFocus={() => (saveButtonFocused.current = true)} + onBlur={() => { + setTimeout(() => { + if (!titleInputFocused.current) { + setIsEditingTitle(false); + } + saveButtonFocused.current = false; + }, 0); + }} + > + +
+
+ { + setIsEditingTitle(false); + setEditedTitle(""); + }} + /> +
+
+ ) : ( + { + setEditedTitle(conversation?.title || ""); + setIsEditingTitle(true); + }} + size="sm" + /> + )} +
+
Date: Tue, 3 Oct 2023 10:34:23 +0200 Subject: [PATCH 2/4] cleanup comments --- .../assistant/conversation/ConversationTitle.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/front/components/assistant/conversation/ConversationTitle.tsx b/front/components/assistant/conversation/ConversationTitle.tsx index 85e10592e1dc..785a9c6ed929 100644 --- a/front/components/assistant/conversation/ConversationTitle.tsx +++ b/front/components/assistant/conversation/ConversationTitle.tsx @@ -96,8 +96,9 @@ export function ConversationTitle({ className="w-full rounded-md font-bold" value={editedTitle} onChange={(e) => setEditedTitle(e.target.value)} - // this is to make sure the save button click - // is registered before the onBlur event + // We need to make sure the click on the save button below + // is registered before the onBlur event, so we keep track of the + // focus state of both the input and the save button. onFocus={() => (titleInputFocused.current = true)} onBlur={() => { setTimeout(() => { @@ -125,8 +126,7 @@ export function ConversationTitle({ e.preventDefault(); return onTitleChange(editedTitle); }} - // this is to make sure the save button click - // is registered before the onBlur event + // See comment on the input above. onFocus={() => (saveButtonFocused.current = true)} onBlur={() => { setTimeout(() => { From b66581b0d6369bdccfb8f7265369fdccadac0d34 Mon Sep 17 00:00:00 2001 From: Henry Fontanier Date: Tue, 3 Oct 2023 10:43:02 +0200 Subject: [PATCH 3/4] insane div centering + mutate --- .../conversation/ConversationTitle.tsx | 70 +++++++++---------- 1 file changed, 34 insertions(+), 36 deletions(-) diff --git a/front/components/assistant/conversation/ConversationTitle.tsx b/front/components/assistant/conversation/ConversationTitle.tsx index 785a9c6ed929..8a6f5a40b09a 100644 --- a/front/components/assistant/conversation/ConversationTitle.tsx +++ b/front/components/assistant/conversation/ConversationTitle.tsx @@ -69,6 +69,7 @@ export function ConversationTitle({ await mutate( `/api/w/${owner.sId}/assistant/conversations/${conversationId}` ); + void mutate(`/api/w/${owner.sId}/assistant/conversations`); if (!res.ok) { throw new Error("Failed to update title"); } @@ -118,48 +119,45 @@ export function ConversationTitle({
)} -
- {isEditingTitle ? ( -
-
) => { - e.preventDefault(); - return onTitleChange(editedTitle); - }} - // See comment on the input above. - onFocus={() => (saveButtonFocused.current = true)} - onBlur={() => { - setTimeout(() => { - if (!titleInputFocused.current) { - setIsEditingTitle(false); - } - saveButtonFocused.current = false; - }, 0); - }} - > - -
-
- { + {isEditingTitle ? ( +
+
) => { + e.preventDefault(); + return onTitleChange(editedTitle); + }} + // See comment on the input above. + onFocus={() => (saveButtonFocused.current = true)} + onBlur={() => { + setTimeout(() => { + if (!titleInputFocused.current) { setIsEditingTitle(false); - setEditedTitle(""); - }} - /> -
+ } + saveButtonFocused.current = false; + }, 0); + }} + className="flex items-center" + > +
- ) : ( { - setEditedTitle(conversation?.title || ""); - setIsEditingTitle(true); + setIsEditingTitle(false); + setEditedTitle(""); }} - size="sm" /> - )} -
+
+ ) : ( + { + setEditedTitle(conversation?.title || ""); + setIsEditingTitle(true); + }} + size="sm" + /> + )}
From 5e97dd64f0f8a1b2d2811c86c452a8f943f44436 Mon Sep 17 00:00:00 2001 From: Henry Fontanier Date: Tue, 3 Oct 2023 10:47:06 +0200 Subject: [PATCH 4/4] use dark icons --- front/components/assistant/conversation/ConversationTitle.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/front/components/assistant/conversation/ConversationTitle.tsx b/front/components/assistant/conversation/ConversationTitle.tsx index 8a6f5a40b09a..c206627011a6 100644 --- a/front/components/assistant/conversation/ConversationTitle.tsx +++ b/front/components/assistant/conversation/ConversationTitle.tsx @@ -138,7 +138,7 @@ export function ConversationTitle({ }} className="flex items-center" > - +
) : ( @@ -156,6 +157,7 @@ export function ConversationTitle({ setIsEditingTitle(true); }} size="sm" + variant="secondary" /> )}