Fix live chat ownership before refresh

src/features/team/components/real-team-chat-panel.tsx

@@ -28,6 +28,7 @@ export function RealTeamChatPanel({ projectGroup }: RealTeamChatPanelProps) {
 	const { mutate: markChatRead } = useMarkChatReadMutation();
 	const { connectionMessage, connectionState, isConnected, sendMessage } =
 		useProjectGroupChat({
+			currentUserId: projectGroup.currentUserId,
 			enabled: true,
 			projectGroupId: projectGroup.projectGroupId,
 		});
@@ -213,9 +214,7 @@ function ChatBubble({ message }: { message: ChatMessage }) {
 					<p
 						className={cn(
 							"font-mono text-xs",
-							message.mine
-								? "text-blue-100"
-								: "text-muted-foreground",
+							message.mine ? "text-blue-100" : "text-muted-foreground",
 						)}
 					>
 						{formatChatTime(message.createdAt)}

src/features/team/hooks/use-project-group-chat.ts

@@ -23,9 +23,11 @@ type ChatConnectionState =
 	| "error";
 
 export function useProjectGroupChat({
+	currentUserId,
 	enabled,
 	projectGroupId,
 }: {
+	currentUserId: number | undefined;
 	enabled: boolean;
 	projectGroupId: number | undefined;
 }) {
@@ -83,10 +85,14 @@ export function useProjectGroupChat({
 						if (!chatMessage) {
 							return;
 						}
+						const ownedChatMessage = applyChatMessageOwnership(
+							chatMessage,
+							currentUserId,
+						);
 
 						queryClient.setQueryData<ChatMessagePage>(
 							chatQueryKeys.messages(projectGroupId),
-							(current) => appendChatMessagePage(current, chatMessage),
+							(current) => appendChatMessagePage(current, ownedChatMessage),
 						);
 					},
 				);
@@ -120,7 +126,7 @@ export function useProjectGroupChat({
 			clientRef.current = null;
 			void client.deactivate();
 		};
-	}, [enabled, projectGroupId, queryClient]);
+	}, [currentUserId, enabled, projectGroupId, queryClient]);
 
 	const sendMessage = useCallback(
 		(content: string) => {
@@ -180,3 +186,17 @@ function parseChatMessage(message: IMessage) {
 		return null;
 	}
 }
+
+function applyChatMessageOwnership(
+	message: ChatMessage,
+	currentUserId: number | undefined,
+): ChatMessage {
+	if (typeof currentUserId !== "number") {
+		return message;
+	}
+
+	return {
+		...message,
+		mine: message.senderUserId === currentUserId,
+	};
+}