From 96644d91c04771fc6c076da878b1122b070d896f Mon Sep 17 00:00:00 2001 From: Usama Date: Tue, 10 Mar 2026 15:37:02 +0000 Subject: [PATCH 1/2] Refactor ConversationEdit and ProjectConversationOverview components - Improved formatting and readability in ConversationEdit component. - Added title handling logic to ensure it syncs with conversation data. - Enhanced query invalidation in ProjectConversationOverview after mutation success to keep data consistent. - Minor adjustments to component imports for better organization. --- .../conversation/ConversationEdit.tsx | 24 ++++++++++++++----- .../ProjectConversationOverview.tsx | 14 +++++++++-- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/echo/frontend/src/components/conversation/ConversationEdit.tsx b/echo/frontend/src/components/conversation/ConversationEdit.tsx index 203d38a3..f166517f 100644 --- a/echo/frontend/src/components/conversation/ConversationEdit.tsx +++ b/echo/frontend/src/components/conversation/ConversationEdit.tsx @@ -80,7 +80,8 @@ const getSourceLabel = (source: string | null): string | null => { const getNameDescription = (source: string | null): string => { if (!source) return ""; const lower = source.toLowerCase(); - if (lower.includes("portal")) return t`Entered by the participant on the portal`; + if (lower.includes("portal")) + return t`Entered by the participant on the portal`; if (lower.includes("upload")) return t`Filename from uploaded file`; if (lower.includes("clone")) return t`Copied from original conversation`; return ""; @@ -137,9 +138,9 @@ export const ConversationEdit = ({ ); const defaultValues: ConversationEditFormValues = { - title: conversation.title ?? "", participant_name: conversation.participant_name ?? "", tagIdList: sanitizedConversationTagIds, + title: conversation.title ?? "", }; const { register, formState, reset, setValue, control, watch, getValues } = @@ -157,8 +158,8 @@ export const ConversationEdit = ({ await updateConversationMutation.mutateAsync({ id: conversation.id, payload: { - title: data.title || null, participant_name: data.participant_name, + title: data.title || null, }, }); @@ -185,9 +186,22 @@ export const ConversationEdit = ({ queryClient.invalidateQueries({ queryKey: ["conversations", conversation.id], }); + queryClient.invalidateQueries({ + queryKey: ["projects", conversation.project_id, "conversations"], + }); }, }); + useEffect(() => { + if ( + conversation.title && + !formState.dirtyFields.title && + getValues("title") !== conversation.title + ) { + setValue("title", conversation.title, { shouldDirty: false }); + } + }, [conversation.title, formState.dirtyFields.title, getValues, setValue]); + const hasSummary = !!conversation.summary; const hasTitle = !!watch("title"); const showGenerateTitle = !hasTitle; @@ -257,9 +271,7 @@ export const ConversationEdit = ({ Duration - - {formatDuration(conversation.duration)} - + {formatDuration(conversation.duration)} )} diff --git a/echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx b/echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx index 2a6ac536..7d5dab89 100644 --- a/echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx +++ b/echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx @@ -12,7 +12,11 @@ import { } from "@mantine/core"; import { useClipboard } from "@mantine/hooks"; import { IconRefresh } from "@tabler/icons-react"; -import { useMutation, useMutationState } from "@tanstack/react-query"; +import { + useMutation, + useMutationState, + useQueryClient, +} from "@tanstack/react-query"; import { useParams } from "react-router"; import { CopyIconButton } from "@/components/common/CopyIconButton"; import { Markdown } from "@/components/common/Markdown"; @@ -35,6 +39,7 @@ import { testId } from "@/lib/testUtils"; export const ProjectConversationOverviewRoute = () => { const { conversationId, projectId } = useParams(); + const queryClient = useQueryClient(); const conversationQuery = useConversationById({ conversationId: conversationId ?? "", @@ -112,7 +117,12 @@ export const ProjectConversationOverviewRoute = () => { }, mutationKey: ["generateSummary", conversationId], onSuccess: () => { - conversationQuery.refetch(); + queryClient.invalidateQueries({ + queryKey: ["conversations", conversationId], + }); + queryClient.invalidateQueries({ + queryKey: ["projects", projectId, "conversations"], + }); }, }); From 3b35e5623f85165ec268306943917adb91e8338c Mon Sep 17 00:00:00 2001 From: Usama Date: Tue, 10 Mar 2026 15:46:56 +0000 Subject: [PATCH 2/2] Refactor title synchronization logic in ConversationEdit component - Simplified the title handling logic to use a default empty string when the conversation title is not available. - Improved readability by reducing nested conditions in the useEffect hook. --- .../src/components/conversation/ConversationEdit.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/echo/frontend/src/components/conversation/ConversationEdit.tsx b/echo/frontend/src/components/conversation/ConversationEdit.tsx index f166517f..3a232add 100644 --- a/echo/frontend/src/components/conversation/ConversationEdit.tsx +++ b/echo/frontend/src/components/conversation/ConversationEdit.tsx @@ -193,12 +193,9 @@ export const ConversationEdit = ({ }); useEffect(() => { - if ( - conversation.title && - !formState.dirtyFields.title && - getValues("title") !== conversation.title - ) { - setValue("title", conversation.title, { shouldDirty: false }); + const nextTitle = conversation.title ?? ""; + if (!formState.dirtyFields.title && getValues("title") !== nextTitle) { + setValue("title", nextTitle, { shouldDirty: false }); } }, [conversation.title, formState.dirtyFields.title, getValues, setValue]);