From 49586e51b9292f5433207d6c3953440dd545c967 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fl=C3=A1vio=20Juvenal?= <flavio@vinta.com.br>
Date: Wed, 8 Jan 2025 15:23:42 -0300
Subject: [PATCH] Refactor types

---
 __tests__/hooks/useChat-messages.test.tsx | 136 +++++++++++-------
 __tests__/hooks/useChat-threads.test.tsx  |  36 +++--
 app/(app)/_layout.tsx                     |   5 +-
 app/(app)/index.tsx                       |  21 +--
 app/(app)/thread/[id].tsx                 |  21 ++-
 app/_layout.tsx                           |   2 +-
 app/sign-in.tsx                           |   8 +-
 components/ChatHeader.tsx                 |  42 ++++--
 components/CreateThreadModal.tsx          |   2 +-
 components/ThreadList.tsx                 |  20 +--
 contexts/ChatContext.tsx                  | 105 ++++----------
 package-lock.json                         |  11 ++
 package.json                              |   1 +
 types/chat.ts                             | 161 +++++++++++++++++++---
 14 files changed, 364 insertions(+), 207 deletions(-)

diff --git a/__tests__/hooks/useChat-messages.test.tsx b/__tests__/hooks/useChat-messages.test.tsx
index dbebd97..38af571 100644
--- a/__tests__/hooks/useChat-messages.test.tsx
+++ b/__tests__/hooks/useChat-messages.test.tsx
@@ -3,6 +3,7 @@ import { Bundle, Communication, Patient, Practitioner } from "@medplum/fhirtypes
 import { MockClient, MockSubscriptionManager } from "@medplum/mock";
 import { MedplumProvider } from "@medplum/react-hooks";
 import { act, renderHook, waitFor } from "@testing-library/react-native";
+import { when } from "jest-when";
 
 import { ChatProvider, useChat } from "@/contexts/ChatContext";
 import { getQueryString } from "@/utils/url";
@@ -80,7 +81,11 @@ async function createCommunicationSubBundle(communication: Communication): Promi
 }
 
 describe("useChat (messages)", () => {
-  async function setup(): Promise<{ medplum: MockClient; subManager: MockSubscriptionManager }> {
+  async function setup(): Promise<{
+    medplum: MockClient;
+    subManager: MockSubscriptionManager;
+    searchSpy: jest.SpyInstance;
+  }> {
     const medplum = new MockClient({ profile: mockPatient });
     const subManager = new MockSubscriptionManager(
       medplum,
@@ -95,7 +100,36 @@ describe("useChat (messages)", () => {
     await medplum.createResource(mockMessage1);
     await medplum.createResource(mockMessage2);
 
-    return { medplum, subManager };
+    // Mock the search implementation to return results with search modes
+    // (the default mock client doesn't support search modes)
+    const searchSpy = jest.spyOn(medplum, "search");
+    when(searchSpy)
+      .calledWith(
+        "Communication",
+        expect.objectContaining({
+          "part-of:missing": true,
+        }),
+        expect.anything(),
+      )
+      .mockResolvedValue({
+        resourceType: "Bundle",
+        type: "searchset",
+        entry: [
+          {
+            search: { mode: "match" },
+            resource: mockThread,
+          },
+          {
+            search: { mode: "include" },
+            resource: mockMessage1,
+          },
+          {
+            search: { mode: "include" },
+            resource: mockMessage2,
+          },
+        ],
+      });
+    return { medplum, subManager, searchSpy };
   }
 
   // Helper function to create wrapper with both providers
@@ -144,11 +178,11 @@ describe("useChat (messages)", () => {
     });
 
     // Check messages are displayed
-    expect(result.current.threadMessages).toHaveLength(2);
-    expect(result.current.threadMessages[0].text).toBe("Hello");
-    expect(result.current.threadMessages[0].senderType).toBe("Patient");
-    expect(result.current.threadMessages[1].text).toBe("Hi there");
-    expect(result.current.threadMessages[1].senderType).toBe("Practitioner");
+    expect(result.current.currentThread?.messages).toHaveLength(2);
+    expect(result.current.currentThread?.messages[0].text).toBe("Hello");
+    expect(result.current.currentThread?.messages[0].senderType).toBe("Patient");
+    expect(result.current.currentThread?.messages[1].text).toBe("Hi there");
+    expect(result.current.currentThread?.messages[1].senderType).toBe("Practitioner");
   });
 
   test("Sends new message", async () => {
@@ -200,8 +234,8 @@ describe("useChat (messages)", () => {
     });
 
     // Verify the new message appears in the list
-    expect(result.current.threadMessages[2].text).toBe("New message");
-    expect(result.current.threadMessages[2].senderType).toBe("Patient");
+    expect(result.current.currentThread?.messages[2].text).toBe("New message");
+    expect(result.current.currentThread?.messages[2].senderType).toBe("Patient");
   });
 
   test("Does not send empty message", async () => {
@@ -305,8 +339,8 @@ describe("useChat (messages)", () => {
 
     // Verify the new message appears in real-time
     await waitFor(() => {
-      expect(result.current.threadMessages).toHaveLength(3);
-      expect(result.current.threadMessages[2].text).toBe("Real-time incoming message");
+      expect(result.current.currentThread?.messages).toHaveLength(3);
+      expect(result.current.currentThread?.messages[2].text).toBe("Real-time incoming message");
     });
   });
 
@@ -364,8 +398,8 @@ describe("useChat (messages)", () => {
 
     // Verify the message was updated
     await waitFor(() => {
-      expect(result.current.threadMessages[1].text).toBe("Updated message");
-      expect(result.current.threadMessages).toHaveLength(2);
+      expect(result.current.currentThread?.messages[1].text).toBe("Updated message");
+      expect(result.current.currentThread?.messages).toHaveLength(2);
     });
   });
 
@@ -391,22 +425,18 @@ describe("useChat (messages)", () => {
     });
 
     // Verify initial messages are loaded
-    expect(result.current.threadMessages).toHaveLength(2);
-    expect(result.current.threadMessages[0].text).toBe("Hello");
-    expect(result.current.threadMessages[1].text).toBe("Hi there");
+    expect(result.current.currentThread?.messages).toHaveLength(2);
+    expect(result.current.currentThread?.messages[0].text).toBe("Hello");
+    expect(result.current.currentThread?.messages[1].text).toBe("Hi there");
 
     // Change the profile
     await act(async () => {
       medplum.setProfile(mockOtherPatient);
     });
 
-    // Wait for loading to complete with new profile
-    await waitFor(() => {
-      expect(result.current.isLoadingMessages).toBe(false);
-    });
-
-    // Verify messages are cleared
-    expect(result.current.threadMessages).toHaveLength(0);
+    // Verify state is reset
+    expect(result.current.currentThread).toBeNull();
+    expect(result.current.message).toBe("");
   });
 
   test("Handles WebSocket disconnection and reconnection", async () => {
@@ -466,7 +496,7 @@ describe("useChat (messages)", () => {
     expect(onWebSocketOpenMock).toHaveBeenCalledTimes(1);
 
     // New message should not be in chat yet
-    expect(result.current.threadMessages).not.toHaveLength(3);
+    expect(result.current.currentThread?.messages).not.toHaveLength(3);
 
     // Emit subscription connected event
     act(() => {
@@ -485,11 +515,11 @@ describe("useChat (messages)", () => {
     // Wait for reconnection and message refresh
     await waitFor(() => {
       expect(result.current.isLoadingMessages).toBe(false);
-      expect(result.current.threadMessages).toHaveLength(3);
+      expect(result.current.currentThread?.messages).toHaveLength(3);
     });
 
     // Verify the new message was fetched after reconnection
-    expect(result.current.threadMessages[2].text).toBe("Message while disconnected");
+    expect(result.current.currentThread?.messages[2].text).toBe("Message while disconnected");
   });
 
   test("Calls onError callback when subscription error occurs", async () => {
@@ -519,12 +549,19 @@ describe("useChat (messages)", () => {
 
   test("Calls onError on first load if search fails", async () => {
     const onErrorMock = jest.fn();
-    const { medplum } = await setup();
-    const searchSpy = jest.spyOn(medplum, "searchResources");
+    const { medplum, searchSpy } = await setup();
 
     // Mock search to throw an error
     const error = new Error("Failed to load messages");
-    searchSpy.mockRejectedValue(error);
+    when(searchSpy)
+      .calledWith(
+        "Communication",
+        expect.objectContaining({
+          "part-of": "Communication/test-thread",
+        }),
+        expect.anything(),
+      )
+      .mockRejectedValue(error);
 
     const { result } = renderHook(() => useChat(), {
       wrapper: createWrapper(medplum, { onError: onErrorMock }),
@@ -546,9 +583,6 @@ describe("useChat (messages)", () => {
     // Verify the onError callback was called with the error
     expect(onErrorMock).toHaveBeenCalledWith(error);
     expect(onErrorMock).toHaveBeenCalledTimes(1);
-
-    // Verify no messages were loaded
-    expect(result.current.threadMessages).toHaveLength(0);
   });
 
   test("New message starts with sent status only", async () => {
@@ -577,10 +611,12 @@ describe("useChat (messages)", () => {
 
     // Wait for messages to update
     await waitFor(() => {
-      const lastMessage = result.current.threadMessages[result.current.threadMessages.length - 1];
-      expect(lastMessage.sentAt).toBeDefined();
-      expect(lastMessage.received).toBeUndefined();
-      expect(lastMessage.read).toBe(false);
+      const lastMessage =
+        result.current.currentThread?.messages[result.current.currentThread?.messages.length - 1];
+      expect(lastMessage).toBeDefined();
+      expect(lastMessage!.sentAt).toBeDefined();
+      expect(lastMessage!.received).toBeUndefined();
+      expect(lastMessage!.read).toBe(false);
     });
   });
 
@@ -615,7 +651,7 @@ describe("useChat (messages)", () => {
 
     // Verify the message in the list has received status
     await waitFor(() => {
-      const message = result.current.threadMessages.find((m) => m.id === "msg-3");
+      const message = result.current.currentThread?.messages.find((m) => m.id === "msg-3");
       expect(message?.received).toBeDefined();
       expect(message?.read).toBe(false);
     });
@@ -660,10 +696,12 @@ describe("useChat (messages)", () => {
 
     // Verify received timestamp is set
     await waitFor(() => {
-      const lastMessage = result.current.threadMessages[result.current.threadMessages.length - 1];
-      expect(lastMessage.text).toBe("Test received status");
-      expect(lastMessage.received).toBeDefined();
-      expect(lastMessage.read).toBe(false);
+      const lastMessage =
+        result.current.currentThread?.messages[result.current.currentThread?.messages.length - 1];
+      expect(lastMessage).toBeDefined();
+      expect(lastMessage!.text).toBe("Test received status");
+      expect(lastMessage!.received).toBeDefined();
+      expect(lastMessage!.read).toBe(false);
     });
   });
 
@@ -684,7 +722,7 @@ describe("useChat (messages)", () => {
     });
 
     // Get an unread message
-    const unreadMessage = result.current.threadMessages.find((m) => m.id === "msg-2");
+    const unreadMessage = result.current.currentThread?.messages.find((m) => m.id === "msg-2");
     expect(unreadMessage).toBeDefined();
 
     // Mark message as read
@@ -694,7 +732,9 @@ describe("useChat (messages)", () => {
 
     // Verify message is marked as read
     await waitFor(() => {
-      const message = result.current.threadMessages.find((m) => m.id === unreadMessage!.id);
+      const message = result.current.currentThread?.messages.find(
+        (m) => m.id === unreadMessage!.id,
+      );
       expect(message?.read).toBe(true);
     });
   });
@@ -727,7 +767,7 @@ describe("useChat (messages)", () => {
     // Wait for initial load
     await waitFor(() => {
       expect(result.current.isLoadingMessages).toBe(false);
-      const message = result.current.threadMessages.find((m) => m.id === newMessage.id);
+      const message = result.current.currentThread?.messages.find((m) => m.id === newMessage.id);
       expect(message?.read).toBe(true);
     });
 
@@ -738,7 +778,7 @@ describe("useChat (messages)", () => {
 
     // Verify message is still marked as read
     await waitFor(() => {
-      const message = result.current.threadMessages.find((m) => m.id === newMessage.id);
+      const message = result.current.currentThread?.messages.find((m) => m.id === newMessage.id);
       expect(message?.read).toBe(true);
     });
   });
@@ -761,14 +801,16 @@ describe("useChat (messages)", () => {
     });
 
     // Try to mark an outgoing message as read
-    const unreadMessage = result.current.threadMessages.find((m) => m.id === "msg-1");
+    const unreadMessage = result.current.currentThread?.messages.find((m) => m.id === "msg-1");
     await act(async () => {
       await result.current.markMessageAsRead(unreadMessage!.id);
     });
 
     // Verify message is still marked as not read
     await waitFor(() => {
-      const message = result.current.threadMessages.find((m) => m.id === unreadMessage!.id);
+      const message = result.current.currentThread?.messages.find(
+        (m) => m.id === unreadMessage!.id,
+      );
       expect(message?.read).toBe(false);
     });
   });
diff --git a/__tests__/hooks/useChat-threads.test.tsx b/__tests__/hooks/useChat-threads.test.tsx
index a8cd7ae..1c4d70c 100644
--- a/__tests__/hooks/useChat-threads.test.tsx
+++ b/__tests__/hooks/useChat-threads.test.tsx
@@ -177,12 +177,18 @@ describe("useChat (threads)", () => {
     });
 
     // Verify search was called correctly
-    expect(searchSpy).toHaveBeenCalledWith("Communication", {
-      "part-of:missing": true,
-      subject: "Patient/test-patient",
-      _revinclude: "Communication:part-of",
-      _sort: "-sent",
-    });
+    expect(searchSpy).toHaveBeenCalledWith(
+      "Communication",
+      {
+        "part-of:missing": true,
+        subject: "Patient/test-patient",
+        _revinclude: "Communication:part-of",
+        _sort: "-sent",
+      },
+      {
+        cache: "no-cache",
+      },
+    );
 
     // Check threads are displayed correctly
     expect(result.current.threads).toHaveLength(2);
@@ -241,12 +247,18 @@ describe("useChat (threads)", () => {
       expect(result.current.isLoadingThreads).toBe(false);
     });
 
-    expect(searchSpy).toHaveBeenCalledWith("Communication", {
-      "part-of:missing": true,
-      subject: undefined,
-      _revinclude: "Communication:part-of",
-      _sort: "-sent",
-    });
+    expect(searchSpy).toHaveBeenCalledWith(
+      "Communication",
+      {
+        "part-of:missing": true,
+        subject: undefined,
+        _revinclude: "Communication:part-of",
+        _sort: "-sent",
+      },
+      expect.objectContaining({
+        cache: "no-cache",
+      }),
+    );
   });
 
   test("Creates new thread successfully", async () => {
diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx
index ebf03c7..f145e36 100644
--- a/app/(app)/_layout.tsx
+++ b/app/(app)/_layout.tsx
@@ -12,10 +12,7 @@ export default function AppLayout() {
 
   if (medplum.isLoading()) {
     return (
-      <SafeAreaView
-        className="bg-background-50"
-        style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
-      >
+      <SafeAreaView className="flex-1 items-center justify-center bg-background-50">
         <Spinner size="large" />
       </SafeAreaView>
     );
diff --git a/app/(app)/index.tsx b/app/(app)/index.tsx
index afdf8b0..42fd84e 100644
--- a/app/(app)/index.tsx
+++ b/app/(app)/index.tsx
@@ -1,6 +1,6 @@
 import { useMedplum } from "@medplum/react-hooks";
 import { useRouter } from "expo-router";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 import { CreateThreadModal } from "@/components/CreateThreadModal";
@@ -20,22 +20,25 @@ export default function Index() {
     router.replace("/sign-in");
   }, [medplum, router]);
 
+  // When threads are loaded, fetch their image URLs
+  useEffect(() => {
+    if (!isLoadingThreads) {
+      threads.forEach((thread) => {
+        thread.loadImageURL({ medplum });
+      });
+    }
+  }, [isLoadingThreads, threads, medplum]);
+
   if (isLoadingThreads) {
     return (
-      <SafeAreaView
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
+      <SafeAreaView className="flex-1 items-center justify-center">
         <Spinner size="large" />
       </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView className="bg-background-50" style={{ flex: 1 }}>
+    <SafeAreaView className="flex-1 bg-background-50">
       <ThreadListHeader onLogout={handleLogout} onCreateThread={() => setIsCreateModalOpen(true)} />
       <ThreadList threads={threads} onCreateThread={() => setIsCreateModalOpen(true)} />
       <CreateThreadModal
diff --git a/app/(app)/thread/[id].tsx b/app/(app)/thread/[id].tsx
index 6ccb538..4f12d5b 100644
--- a/app/(app)/thread/[id].tsx
+++ b/app/(app)/thread/[id].tsx
@@ -13,12 +13,12 @@ export default function ThreadPage() {
   const [isLoading, setIsLoading] = useState(true);
   const {
     isLoadingMessages,
-    threadMessages: messages,
     message,
     setMessage,
     sendMessage,
     markMessageAsRead,
     selectThread,
+    currentThread,
   } = useChat();
 
   // Set current thread when page loads
@@ -29,31 +29,26 @@ export default function ThreadPage() {
 
   // Mark all unread messages as read
   useEffect(() => {
-    messages.forEach((message) => {
+    if (!currentThread) return;
+    currentThread.messages.forEach((message) => {
       if (!message.read) {
         markMessageAsRead(message.id);
       }
     });
-  }, [messages, markMessageAsRead]);
+  }, [currentThread, markMessageAsRead]);
 
   if (isLoading) {
     return (
-      <SafeAreaView
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
+      <SafeAreaView className="flex-1 items-center justify-center">
         <Spinner size="large" />
       </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView className="bg-background-50" style={{ flex: 1 }}>
-      <ChatHeader />
-      <ChatMessageList messages={messages} loading={isLoadingMessages} />
+    <SafeAreaView className="flex-1 bg-background-50">
+      <ChatHeader currentThread={currentThread!} />
+      <ChatMessageList messages={currentThread!.messages} loading={isLoadingMessages} />
       <ChatMessageInput message={message} setMessage={setMessage} onSend={sendMessage} />
     </SafeAreaView>
   );
diff --git a/app/_layout.tsx b/app/_layout.tsx
index e4b1081..13f578b 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -53,7 +53,7 @@ export default function RootLayout() {
       <GluestackUIProvider mode="light">
         <SafeAreaProvider>
           <MedplumProvider medplum={medplum}>
-            <GestureHandlerRootView style={{ flex: 1 }}>
+            <GestureHandlerRootView className="flex-1">
               <Stack
                 screenOptions={{
                   headerShown: false,
diff --git a/app/sign-in.tsx b/app/sign-in.tsx
index 0bf78e5..5392d9f 100644
--- a/app/sign-in.tsx
+++ b/app/sign-in.tsx
@@ -119,13 +119,7 @@ export default function SignIn() {
   }, [medplumLogin]);
 
   return (
-    <SafeAreaView
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
+    <SafeAreaView className="flex-1 items-center justify-center">
       {isLoading && <Spinner size="large" />}
       {!isLoading && <Button title="Connect to Medplum" onPress={handleLogin} />}
     </SafeAreaView>
diff --git a/components/ChatHeader.tsx b/components/ChatHeader.tsx
index 94b70a7..656e441 100644
--- a/components/ChatHeader.tsx
+++ b/components/ChatHeader.tsx
@@ -1,13 +1,37 @@
 import { useRouter } from "expo-router";
-import { ChevronLeftIcon } from "lucide-react-native";
+import { ChevronLeftIcon, UserRound } from "lucide-react-native";
 import { View } from "react-native";
 
-import { Avatar } from "@/components/ui/avatar";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Icon } from "@/components/ui/icon";
 import { Pressable } from "@/components/ui/pressable";
 import { Text } from "@/components/ui/text";
+import { Thread } from "@/types/chat";
 
-export function ChatHeader() {
+function ChatStatus({ currentThread }: { currentThread: Thread }) {
+  let color;
+  let message;
+  if (!currentThread.lastMessageSentAt) {
+    color = "bg-warning-500";
+    message = "Please send a message to start the conversation";
+  } else if (currentThread.practitionerName) {
+    color = "bg-success-500";
+    message = `${currentThread.practitionerName} is active`;
+  } else {
+    color = "bg-error-500";
+    message = "A provider will respond you soon";
+  }
+  return (
+    <View className="flex-row items-center gap-1.5">
+      <View className={`h-2 w-2 rounded-full ${color}`} />
+      <Text size="sm" className="text-typography-600">
+        {message}
+      </Text>
+    </View>
+  );
+}
+
+export function ChatHeader({ currentThread }: { currentThread: Thread }) {
   const router = useRouter();
 
   return (
@@ -27,18 +51,14 @@ export function ChatHeader() {
         </Pressable>
         <View className="flex-1 flex-row items-center gap-3">
           <Avatar size="md" className="border-2 border-primary-200">
-            <Text className="text-typography-0">DR</Text>
+            <Icon as={UserRound} size="lg" className="stroke-white" />
+            <AvatarImage source={{ uri: currentThread.imageURL }} />
           </Avatar>
           <View className="flex-col">
             <Text size="md" bold className="text-typography-900">
-              Sample Practice
+              {currentThread.topic}
             </Text>
-            <View className="flex-row items-center gap-1.5">
-              <View className="h-2 w-2 rounded-full bg-success-500" />
-              <Text size="sm" className="text-typography-600">
-                Online
-              </Text>
-            </View>
+            <ChatStatus currentThread={currentThread} />
           </View>
         </View>
       </View>
diff --git a/components/CreateThreadModal.tsx b/components/CreateThreadModal.tsx
index 2de4632..66f2b49 100644
--- a/components/CreateThreadModal.tsx
+++ b/components/CreateThreadModal.tsx
@@ -58,7 +58,7 @@ export function CreateThreadModal({ isOpen, onClose, onCreateThread }: CreateThr
               <InputField
                 value={topic}
                 onChangeText={setTopic}
-                placeholder="Enter thread topic..."
+                placeholder="Enter conversation topic..."
                 className="min-h-[44px] py-3"
               />
             </Input>
diff --git a/components/ThreadList.tsx b/components/ThreadList.tsx
index 6460b2f..43aac7c 100644
--- a/components/ThreadList.tsx
+++ b/components/ThreadList.tsx
@@ -1,13 +1,14 @@
 import { useMedplumContext } from "@medplum/react-hooks";
 import { useRouter } from "expo-router";
-import { PlusIcon } from "lucide-react-native";
+import { PlusIcon, UserRound } from "lucide-react-native";
 import { FlatList } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import Animated, { FadeInDown } from "react-native-reanimated";
 
-import { Avatar } from "@/components/ui/avatar";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Box } from "@/components/ui/box";
 import { Button, ButtonIcon, ButtonText } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { Pressable } from "@/components/ui/pressable";
 import { Text } from "@/components/ui/text";
 import { View } from "@/components/ui/view";
@@ -28,6 +29,8 @@ function ThreadItem({
   index: number;
   onPress: () => void;
 }) {
+  const { profile } = useMedplumContext();
+
   return (
     <Animated.View entering={FadeInDown.delay(index * 50).springify()}>
       <Pressable
@@ -35,24 +38,23 @@ function ThreadItem({
         className="overflow-hidden bg-background-0 active:bg-secondary-100"
       >
         <View className="flex-row items-center gap-3 p-4">
-          <Avatar size="md" className="border-2 border-primary-100">
-            <Text className="font-medium text-typography-0">
-              {thread.topic.slice(0, 2).toUpperCase()}
-            </Text>
+          <Avatar size="md" className="border-2 border-primary-200">
+            <Icon as={UserRound} size="lg" className="stroke-white" />
+            <AvatarImage source={{ uri: thread.imageURL }} />
           </Avatar>
 
           <View className="flex-1">
             <View className="flex-row items-center gap-2">
               <Text className="text-base font-semibold text-typography-900">{thread.topic}</Text>
-              {thread.unreadCount > 0 && (
+              {profile && thread.getUnreadCount({ profile }) > 0 && (
                 <View className="rounded-full bg-primary-500 px-2 py-0.5">
                   <Text className="text-xs font-medium text-typography-0">
-                    {thread.unreadCount}
+                    {thread.getUnreadCount({ profile })}
                   </Text>
                 </View>
               )}
             </View>
-            <Text className="mt-0.5 text-sm text-typography-600" numberOfLines={2}>
+            <Text className="mt-0.5 text-sm text-typography-600" isTruncated={true}>
               {thread.lastMessage}
             </Text>
           </View>
diff --git a/contexts/ChatContext.tsx b/contexts/ChatContext.tsx
index d3cac1f..241ebd7 100644
--- a/contexts/ChatContext.tsx
+++ b/contexts/ChatContext.tsx
@@ -5,49 +5,14 @@ import {
   ProfileResource,
   QueryTypes,
 } from "@medplum/core";
-import {
-  Bundle,
-  Communication,
-  Patient,
-  Practitioner,
-  Reference,
-  RelatedPerson,
-} from "@medplum/fhirtypes";
+import { Bundle, Communication, Patient, Reference } from "@medplum/fhirtypes";
 import { useMedplum, useSubscription } from "@medplum/react-hooks";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 
-import type { ChatMessage, Thread } from "@/types/chat";
+import { Thread } from "@/types/chat";
 import { syncResourceArray } from "@/utils/array";
 import { getQueryString } from "@/utils/url";
 
-function communicationToThread(
-  profile: Patient | Practitioner | RelatedPerson,
-  comm: Communication,
-  threadMessageComms: Communication[],
-): Thread {
-  const lastMessage = threadMessageComms
-    .sort((a, b) => {
-      if (!a.sent) return 1;
-      if (!b.sent) return -1;
-      return new Date(a.sent).getTime() - new Date(b.sent).getTime();
-    })
-    .reverse()?.[0];
-  const unreadCount = threadMessageComms.filter(
-    (msg) => msg.status !== "completed" && msg.sender?.reference !== getReferenceString(profile),
-  ).length;
-
-  return {
-    id: comm.id!,
-    topic: comm.payload?.[0]?.contentString || comm.id!,
-    lastMessage: lastMessage?.payload?.[0]?.contentString,
-    lastMessageSentAt: lastMessage?.sent ? new Date(lastMessage.sent) : undefined,
-    threadOrder: new Date(
-      lastMessage?.sent || comm.sent || comm.meta?.lastUpdated || new Date(),
-    ).getTime(),
-    unreadCount,
-  };
-}
-
 async function fetchThreads({
   medplum,
   threadsQuery,
@@ -55,7 +20,9 @@ async function fetchThreads({
   medplum: MedplumClient;
   threadsQuery: QueryTypes;
 }): Promise<{ threads: Communication[]; threadCommMap: Map<string, Communication[]> }> {
-  const searchResults = await medplum.search("Communication", threadsQuery);
+  const searchResults = await medplum.search("Communication", threadsQuery, {
+    cache: "no-cache",
+  });
   const threads =
     searchResults.entry?.filter((e) => e.search?.mode === "match").map((e) => e.resource!) || [];
 
@@ -75,23 +42,6 @@ async function fetchThreads({
   return { threads, threadCommMap };
 }
 
-function getMessageOrder(comm: Communication): number {
-  const sent = comm.sent || comm.meta?.lastUpdated || new Date();
-  return new Date(sent).getTime();
-}
-
-function communicationToMessage(communication: Communication): ChatMessage {
-  return {
-    id: communication.id!,
-    text: communication.payload?.[0]?.contentString || "",
-    senderType: communication.sender?.reference?.includes("Patient") ? "Patient" : "Practitioner",
-    sentAt: new Date(communication.sent!),
-    messageOrder: getMessageOrder(communication),
-    received: communication.received ? new Date(communication.received) : undefined,
-    read: communication.status === "completed",
-  };
-}
-
 async function updateUnreceivedCommunications({
   medplum,
   communications,
@@ -220,9 +170,8 @@ interface ChatContextType {
   createThread: (topic: string) => Promise<string | undefined>;
 
   // Current thread & messages
-  currentThreadId: string | null;
+  currentThread: Thread | null;
   selectThread: (threadId: string) => void;
-  threadMessages: ChatMessage[];
   message: string;
   setMessage: (message: string) => void;
   sendMessage: () => Promise<void>;
@@ -257,26 +206,28 @@ export function ChatProvider({
   const [isLoadingThreads, setIsLoadingThreads] = useState(true);
   const [isLoadingMessages, setIsLoadingMessages] = useState(false);
 
-  // Threads
+  // Threads memoized, sorted by threadOrder
   const threadsOut = useMemo(() => {
     if (!profile) return [];
     return threads
-      .map((thread) => communicationToThread(profile, thread, threadCommMap.get(thread.id!) || []))
+      .map((thread) =>
+        Thread.fromCommunication({
+          comm: thread,
+          threadMessageComms: threadCommMap.get(thread.id!) || [],
+        }),
+      )
       .sort((a, b) => b.threadOrder - a.threadOrder);
   }, [threads, profile, threadCommMap]);
 
-  // Thread messages
-  const threadMessagesOut = useMemo(() => {
-    if (!currentThreadId) return [];
-    return (
-      threadCommMap
-        .get(currentThreadId)
-        ?.map(communicationToMessage)
-        .sort((a, b) => a.messageOrder - b.messageOrder) || []
-    );
-  }, [currentThreadId, threadCommMap]);
-
-  // Profile reference string
+  // Current thread memoized
+  const currentThread = useMemo(() => {
+    if (!currentThreadId || !profile) return null;
+    const thread = threadsOut.find((t) => t.id === currentThreadId);
+    if (!thread) return null;
+    return thread;
+  }, [currentThreadId, threadsOut, profile]);
+
+  // Profile reference string, useful to detect profile changes
   const profileRefStr = useMemo(() => (profile ? getReferenceString(profile) : ""), [profile]);
 
   // Query setup for subscription
@@ -386,15 +337,20 @@ export function ChatProvider({
     },
   );
 
-  // Handle profile changes
-  // Lint disabled because we can make sure this will trigger an update when local profile !== medplum.getProfile()
+  // Handle profile changes, clear state
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     const latestProfile = medplum.getProfile();
     if (profile?.id !== latestProfile?.id) {
       setProfile(latestProfile);
+      setThreads([]);
       setThreadCommMap(new Map());
       setCurrentThreadId(null);
+      setMessage("");
+      setReconnecting(false);
+      setConnectedOnce(false);
+      setIsLoadingThreads(true);
+      setIsLoadingMessages(false);
     }
   });
 
@@ -494,9 +450,8 @@ export function ChatProvider({
     connectedOnce,
     reconnecting,
     createThread,
-    currentThreadId,
+    currentThread,
     selectThread,
-    threadMessages: threadMessagesOut,
     message,
     setMessage,
     sendMessage,
diff --git a/package-lock.json b/package-lock.json
index e3ac068..8e582f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -100,6 +100,7 @@
         "husky": "^9.1.7",
         "jest": "^29.7.0",
         "jest-expo": "~52.0.2",
+        "jest-when": "^3.7.0",
         "jscodeshift": "^17.1.1",
         "lint-staged": "^15.3.0",
         "prettier": "3.4.2",
@@ -13273,6 +13274,16 @@
         "mock-socket": "^9.3.0"
       }
     },
+    "node_modules/jest-when": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jest-when/-/jest-when-3.7.0.tgz",
+      "integrity": "sha512-aLbiyxmtksijcrKFir7n+t+XPbqSLV01eDkRyX28WM4VgA/iSc3mG8R8O2evDtOAa6SefrJiTIt/rTqqyrwVZg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "jest": ">= 25"
+      }
+    },
     "node_modules/jest-worker": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz",
diff --git a/package.json b/package.json
index ecd147c..f7612af 100644
--- a/package.json
+++ b/package.json
@@ -130,6 +130,7 @@
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-expo": "~52.0.2",
+    "jest-when": "^3.7.0",
     "jscodeshift": "^17.1.1",
     "lint-staged": "^15.3.0",
     "prettier": "3.4.2",
diff --git a/types/chat.ts b/types/chat.ts
index c7b31f0..5eab3cd 100644
--- a/types/chat.ts
+++ b/types/chat.ts
@@ -1,21 +1,146 @@
-import { Patient, Practitioner } from "@medplum/fhirtypes";
-
-export interface Thread {
-  id: string;
-  topic: string;
-  lastMessage?: string;
-  lastMessageSentAt?: Date;
-  threadOrder: number;
-  unreadCount: number;
+import { MedplumClient, ProfileResource } from "@medplum/core";
+import { Communication, Practitioner, Reference } from "@medplum/fhirtypes";
+
+export class ChatMessage {
+  readonly originalCommunication: Communication;
+
+  constructor({ originalCommunication }: { originalCommunication: Communication }) {
+    this.originalCommunication = originalCommunication;
+  }
+
+  static fromCommunication({ comm }: { comm: Communication }): ChatMessage {
+    return new ChatMessage({
+      originalCommunication: comm,
+    });
+  }
+
+  get id(): string {
+    return this.originalCommunication.id!;
+  }
+
+  get text(): string {
+    return this.originalCommunication.payload?.[0]?.contentString || "";
+  }
+
+  get senderType(): "Patient" | "Practitioner" {
+    return this.originalCommunication.sender?.reference?.includes("Patient")
+      ? "Patient"
+      : "Practitioner";
+  }
+
+  get sentAt(): Date {
+    return new Date(this.originalCommunication.sent!);
+  }
+
+  get messageOrder(): number {
+    return new Date(
+      this.originalCommunication.sent || this.originalCommunication.meta?.lastUpdated || new Date(),
+    ).getTime();
+  }
+
+  get received(): Date | undefined {
+    return this.originalCommunication.received
+      ? new Date(this.originalCommunication.received)
+      : undefined;
+  }
+
+  get read(): boolean {
+    return this.originalCommunication.status === "completed";
+  }
 }
 
-export interface ChatMessage {
-  id: string;
-  text: string;
-  senderType: Patient["resourceType"] | Practitioner["resourceType"];
-  sentAt: Date;
-  threadId?: string;
-  messageOrder: number;
-  received?: Date;
-  read: boolean;
+export class Thread {
+  readonly messages: ChatMessage[];
+  readonly originalCommunication: Communication;
+  static imageURLCache = new Map<string, string>();
+  imageURL?: string;
+
+  constructor({
+    messages,
+    originalCommunication,
+  }: {
+    messages: ChatMessage[];
+    originalCommunication: Communication;
+  }) {
+    this.messages = [...messages].sort((a, b) => a.messageOrder - b.messageOrder);
+    this.originalCommunication = originalCommunication;
+  }
+
+  static fromCommunication({
+    comm,
+    threadMessageComms,
+  }: {
+    comm: Communication;
+    threadMessageComms: Communication[];
+  }): Thread {
+    return new Thread({
+      messages: threadMessageComms.map((comm) => ChatMessage.fromCommunication({ comm })),
+      originalCommunication: comm,
+    });
+  }
+
+  get id(): string {
+    return this.originalCommunication.id!;
+  }
+
+  get topic(): string {
+    return this.originalCommunication.payload?.[0]?.contentString || this.id;
+  }
+
+  get lastMessage(): string | undefined {
+    const lastMsg = this.messages[this.messages.length - 1];
+    return lastMsg?.text;
+  }
+
+  get lastMessageSentAt(): Date | undefined {
+    const lastMsg = this.messages[this.messages.length - 1];
+    return lastMsg?.sentAt;
+  }
+
+  get threadOrder(): number {
+    return new Date(
+      this.lastMessageSentAt ||
+        this.originalCommunication.sent ||
+        this.originalCommunication.meta?.lastUpdated ||
+        new Date(),
+    ).getTime();
+  }
+
+  getUnreadCount({ profile }: { profile: ProfileResource }): number {
+    return this.messages.filter((msg) => !msg.read && msg.senderType !== profile.resourceType)
+      .length;
+  }
+
+  get lastProviderCommunication(): Communication | undefined {
+    return this.messages.findLast((msg) => msg.senderType === "Practitioner")
+      ?.originalCommunication;
+  }
+
+  get practitionerName(): string | undefined {
+    return this.lastProviderCommunication?.sender?.display;
+  }
+
+  async loadImageURL({ medplum }: { medplum: MedplumClient }) {
+    const practitionerId = this.lastProviderCommunication?.sender?.reference;
+    if (practitionerId) {
+      let imageUrl = Thread.imageURLCache.get(practitionerId);
+
+      if (!imageUrl) {
+        try {
+          const practitioner = await medplum.readReference(
+            this.lastProviderCommunication?.sender as Reference<Practitioner>,
+          );
+          if (practitioner.photo?.[0]?.url) {
+            imageUrl = practitioner.photo[0].url;
+            Thread.imageURLCache.set(practitionerId, imageUrl);
+          }
+        } catch {
+          // Ignore errors from fetching practitioner image
+        }
+      }
+      if (imageUrl) {
+        this.imageURL = imageUrl;
+      }
+    }
+  }
 }