vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/components/labs/README.md

@@ -0,0 +1,104 @@
+# Lab Order Requisition PDF Display
+
+This feature displays Lab Order Requisition PDFs in the Orders content section when a ServiceRequest is selected.
+
+## How it works
+
+1. When a user selects an order from the order list, the `LabOrderDetails` component is rendered
+2. The component extracts the Health Gorilla Requisition ID from the ServiceRequest's `requisition` field
+3. The component searches for `DocumentReference` resources that:
+   - Have a category of "LabOrderRequisition"
+   - Have an identifier with system "https://www.healthgorilla.com" and value matching the Requisition ID
+4. If found, the PDF attachments are displayed using the `AttachmentDisplay` component
+5. Users can view the PDF directly in the browser or download it
+
+## Implementation Details
+
+### Files Modified/Created
+
+- `src/utils/documentReference.ts` - Utility function to fetch Lab Order Requisition documents
+- `src/components/labs/LabOrderDetails.tsx` - Updated to display PDF previews
+
+### Key Components
+
+- `fetchLabOrderRequisitionDocuments()` - Searches for DocumentReference resources with LabOrderRequisition category using Health Gorilla Requisition ID
+- `getHealthGorillaRequisitionId()` - Extracts the Health Gorilla Requisition ID from ServiceRequest
+- `AttachmentDisplay` - Medplum React component that renders PDFs in an iframe
+- Lab Order Requisition section in `LabOrderDetails` - Shows loading state, documents, or "no documents found" message
+
+### ServiceRequest Structure
+
+The ServiceRequest should have a Health Gorilla Requisition ID:
+
+```json
+{
+  "resourceType": "ServiceRequest",
+  "requisition": {
+    "system": "https://www.healthgorilla.com",
+    "value": "123456"
+  }
+}
+```
+
+### DocumentReference Structure
+
+The DocumentReference resources should have:
+
+```json
+{
+  "resourceType": "DocumentReference",
+  "category": [
+    {
+      "coding": [
+        {
+          "system": "http://terminology.hl7.org/CodeSystem/document-classcodes",
+          "code": "LabOrderRequisition",
+          "display": "Lab Order Requisition"
+        }
+      ]
+    }
+  ],
+  "identifier": [
+    {
+      "system": "https://www.healthgorilla.com",
+      "value": "123456"
+    }
+  ],
+  "content": [
+    {
+      "attachment": {
+        "contentType": "application/pdf",
+        "url": "https://example.com/document.pdf"
+      }
+    }
+  ]
+}
+```
+
+## Testing
+
+To test this functionality:
+
+1. Create a ServiceRequest resource with a `requisition` field containing a Health Gorilla ID:
+   ```json
+   {
+     "requisition": {
+       "system": "https://www.healthgorilla.com",
+       "value": "123456"
+     }
+   }
+   ```
+2. Create a DocumentReference resource with:
+   - `category` set to "LabOrderRequisition"
+   - `identifier` with system "https://www.healthgorilla.com" and the same value as the ServiceRequest
+   - `content.attachment` with a PDF URL
+3. Navigate to the Labs page and select the order
+4. The PDF should appear in the "LAB ORDER REQUISITION" section
+
+## Notes
+
+- The search uses the FHIR `identifier` parameter to match DocumentReference resources by Health Gorilla Requisition ID
+- The matching is done by extracting the Health Gorilla ID from the ServiceRequest's `requisition` field
+- PDFs are displayed using an iframe with `#navpanes=0` to hide navigation
+- The component handles loading states and error cases gracefully
+- Multiple documents can be displayed if multiple DocumentReference resources are found with the same Health Gorilla ID

package/dist/examples/vintasend-medplum-example/src/components/labs/TestMetadataCardInput.test.tsx

@@ -0,0 +1,318 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import type { LabOrderInputErrors, TestCoding } from '@medplum/health-gorilla-core';
+import { MockClient } from '@medplum/mock';
+import { MedplumProvider } from '@medplum/react';
+import { act, render, screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { TestMetadataCardInput } from './TestMetadataCardInput';
+import { useHealthGorillaLabOrder, HealthGorillaLabOrderProvider } from '@medplum/health-gorilla-react';
+import type { TestMetadata } from '@medplum/health-gorilla-react';
+import type { Questionnaire } from '@medplum/fhirtypes';
+
+vi.mock('@medplum/health-gorilla-react', async () => {
+  const actual = await vi.importActual('@medplum/health-gorilla-react');
+  return {
+    ...actual,
+    useHealthGorillaLabOrder: vi.fn(),
+  };
+});
+
+const mockTest: TestCoding = {
+  code: 'TEST001',
+  display: 'Complete Blood Count',
+  system: 'http://loinc.org',
+};
+
+const mockQuestionnaire: Questionnaire = {
+  resourceType: 'Questionnaire',
+  status: 'active',
+  title: 'AOE Questionnaire',
+  item: [
+    {
+      linkId: 'q1',
+      text: 'Question 1',
+      type: 'string',
+    },
+  ],
+};
+
+function createMockMetadata(overrides?: Partial<TestMetadata>): TestMetadata {
+  return {
+    priority: 'routine',
+    notes: undefined,
+    aoeStatus: 'none',
+    aoeQuestionnaire: undefined,
+    aoeResponses: undefined,
+    ...overrides,
+  };
+}
+
+describe('TestMetadataCardInput', () => {
+  let medplum: MockClient;
+  let mockUpdateTestMetadata: ReturnType<typeof vi.fn>;
+  let mockLabOrderReturn: ReturnType<typeof useHealthGorillaLabOrder>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    medplum = new MockClient();
+
+    mockUpdateTestMetadata = vi.fn();
+
+    mockLabOrderReturn = {
+      state: {
+        performingLab: undefined,
+        performingLabAccountNumber: undefined,
+        selectedTests: [],
+        testMetadata: {},
+        diagnoses: [],
+        billingInformation: {
+          billTo: 'insurance',
+        },
+        specimenCollectedDateTime: undefined,
+        orderNotes: undefined,
+      },
+      removeDiagnosis: vi.fn(),
+      setDiagnoses: vi.fn(),
+      getActivePatientCoverages: vi.fn().mockResolvedValue([]),
+      updateBillingInformation: vi.fn(),
+      setSpecimenCollectedDateTime: vi.fn(),
+      setOrderNotes: vi.fn(),
+      validateOrder: vi.fn().mockReturnValue(undefined),
+      createOrderBundle: vi.fn(),
+      searchAvailableLabs: vi.fn().mockResolvedValue([]),
+      searchAvailableTests: vi.fn().mockResolvedValue([]),
+      setPerformingLab: vi.fn(),
+      setPerformingLabAccountNumber: vi.fn(),
+      addTest: vi.fn(),
+      removeTest: vi.fn(),
+      setTests: vi.fn(),
+      updateTestMetadata: mockUpdateTestMetadata,
+      addDiagnosis: vi.fn(),
+    } as any;
+
+    vi.mocked(useHealthGorillaLabOrder).mockReturnValue(mockLabOrderReturn);
+  });
+
+  function setup(
+    props: {
+      test?: TestCoding;
+      metadata?: TestMetadata | undefined;
+      error?: NonNullable<LabOrderInputErrors['testMetadata']>[keyof NonNullable<LabOrderInputErrors['testMetadata']>];
+    } = {}
+  ): ReturnType<typeof render> {
+    return render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <HealthGorillaLabOrderProvider {...mockLabOrderReturn}>
+              <TestMetadataCardInput test={props.test || mockTest} metadata={props.metadata} error={props.error} />
+            </HealthGorillaLabOrderProvider>
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  }
+
+  test('Renders "Missing metadata" when metadata is undefined', () => {
+    setup({ metadata: undefined });
+
+    expect(screen.getByText('Complete Blood Count')).toBeInTheDocument();
+    expect(screen.getByText('Missing metadata')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Priority')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Notes')).not.toBeInTheDocument();
+  });
+
+  test('Renders form fields when metadata exists', () => {
+    const metadata = createMockMetadata();
+    setup({ metadata });
+
+    expect(screen.getByText('Complete Blood Count')).toBeInTheDocument();
+    expect(screen.getByText('Priority')).toBeInTheDocument();
+    expect(screen.getByLabelText('Notes')).toBeInTheDocument();
+    expect(screen.queryByText('Missing metadata')).not.toBeInTheDocument();
+  });
+
+  test('Renders all priority radio options', () => {
+    const metadata = createMockMetadata({ priority: 'routine' });
+    setup({ metadata });
+
+    expect(screen.getByLabelText('Routine')).toBeInTheDocument();
+    expect(screen.getByLabelText('Urgent')).toBeInTheDocument();
+    expect(screen.getByLabelText('ASAP')).toBeInTheDocument();
+    expect(screen.getByLabelText('Stat')).toBeInTheDocument();
+  });
+
+  test('Selects correct priority radio option', () => {
+    const metadata = createMockMetadata({ priority: 'urgent' });
+    setup({ metadata });
+
+    const urgentRadio = screen.getByLabelText('Urgent');
+    expect(urgentRadio).toBeChecked();
+  });
+
+  test('Calls updateTestMetadata when priority changes', async () => {
+    const user = userEvent.setup();
+    const metadata = createMockMetadata({ priority: 'routine' });
+    setup({ metadata });
+
+    const urgentRadio = screen.getByLabelText('Urgent');
+    await act(async () => {
+      await user.click(urgentRadio);
+    });
+
+    expect(mockUpdateTestMetadata).toHaveBeenCalledWith(mockTest, { priority: 'urgent' });
+  });
+
+  test('Calls updateTestMetadata when priority changes to asap', async () => {
+    const user = userEvent.setup();
+    const metadata = createMockMetadata({ priority: 'routine' });
+    setup({ metadata });
+
+    const asapRadio = screen.getByLabelText('ASAP');
+    await act(async () => {
+      await user.click(asapRadio);
+    });
+
+    expect(mockUpdateTestMetadata).toHaveBeenCalledWith(mockTest, { priority: 'asap' });
+  });
+
+  test('Calls updateTestMetadata when priority changes to stat', async () => {
+    const user = userEvent.setup();
+    const metadata = createMockMetadata({ priority: 'routine' });
+    setup({ metadata });
+
+    const statRadio = screen.getByLabelText('Stat');
+    await act(async () => {
+      await user.click(statRadio);
+    });
+
+    expect(mockUpdateTestMetadata).toHaveBeenCalledWith(mockTest, { priority: 'stat' });
+  });
+
+  test('Displays notes value in TextInput', () => {
+    const metadata = createMockMetadata({ notes: 'Test notes here' });
+    setup({ metadata });
+
+    const notesInput = screen.getByLabelText<HTMLInputElement>('Notes');
+    expect(notesInput.value).toBe('Test notes here');
+  });
+
+  test('Displays empty string when notes is undefined', () => {
+    const metadata = createMockMetadata({ notes: undefined });
+    setup({ metadata });
+
+    const notesInput = screen.getByLabelText<HTMLInputElement>('Notes');
+    expect(notesInput.value).toBe('');
+  });
+
+  test('Calls updateTestMetadata when notes change', async () => {
+    const metadata = createMockMetadata({ notes: '' });
+    setup({ metadata });
+
+    const notesInput = screen.getByLabelText('Notes');
+    await act(async () => {
+      fireEvent.change(notesInput, { target: { value: 'Test note' } });
+    });
+
+    expect(mockUpdateTestMetadata).toHaveBeenCalledWith(mockTest, { notes: 'Test note' });
+  });
+
+  test('Shows "Loading AoE..." when aoeStatus is loading', () => {
+    const metadata = createMockMetadata({ aoeStatus: 'loading' });
+    setup({ metadata });
+
+    expect(screen.getByText('Loading AoE...')).toBeInTheDocument();
+  });
+
+  test('Renders QuestionnaireForm when aoeStatus is loaded and questionnaire exists', async () => {
+    const metadata = createMockMetadata({
+      aoeStatus: 'loaded',
+      aoeQuestionnaire: mockQuestionnaire,
+    });
+    setup({ metadata });
+
+    await waitFor(() => {
+      expect(screen.getByText('Question 1')).toBeInTheDocument();
+    });
+  });
+
+  test('Does not render QuestionnaireForm when aoeStatus is loaded but questionnaire is undefined', () => {
+    const metadata = createMockMetadata({
+      aoeStatus: 'loaded',
+      aoeQuestionnaire: undefined,
+    });
+    setup({ metadata });
+
+    expect(screen.queryByText('Question 1')).not.toBeInTheDocument();
+  });
+
+  test('Displays error message for priority', () => {
+    const error: NonNullable<LabOrderInputErrors['testMetadata']>[keyof NonNullable<
+      LabOrderInputErrors['testMetadata']
+    >] = {
+      priority: { message: 'Priority is required' },
+    };
+    const metadata = createMockMetadata();
+    setup({ metadata, error });
+
+    expect(screen.getByText('Priority is required')).toBeInTheDocument();
+  });
+
+  test('Displays error message for aoeResponses', () => {
+    const error: NonNullable<LabOrderInputErrors['testMetadata']>[keyof NonNullable<
+      LabOrderInputErrors['testMetadata']
+    >] = {
+      aoeResponses: { message: 'AOE responses are invalid' },
+    };
+    const metadata = createMockMetadata({
+      aoeStatus: 'loaded',
+      aoeQuestionnaire: mockQuestionnaire,
+    });
+    setup({ metadata, error });
+
+    expect(screen.getByText('AOE responses are invalid')).toBeInTheDocument();
+  });
+
+  test('Calls updateTestMetadata when questionnaire response changes', async () => {
+    const metadata = createMockMetadata({
+      aoeStatus: 'loaded',
+      aoeQuestionnaire: mockQuestionnaire,
+    });
+    setup({ metadata });
+
+    await waitFor(() => {
+      expect(screen.getByText('Question 1')).toBeInTheDocument();
+    });
+
+    const questionInput = screen.getByLabelText('Question 1');
+    await act(async () => {
+      await userEvent.type(questionInput, 'Answer');
+    });
+
+    await waitFor(() => {
+      expect(mockUpdateTestMetadata).toHaveBeenCalled();
+    });
+
+    const calls = mockUpdateTestMetadata.mock.calls;
+    const lastCall = calls[calls.length - 1];
+    expect(lastCall[0]).toBe(mockTest);
+    expect(lastCall[1]).toHaveProperty('aoeResponses');
+    expect(lastCall[1].aoeResponses).toHaveProperty('resourceType', 'QuestionnaireResponse');
+  });
+
+  test('Renders test display name correctly', () => {
+    const customTest: TestCoding = {
+      code: 'TEST002',
+      display: 'Lipid Panel',
+      system: 'http://loinc.org',
+    };
+    const metadata = createMockMetadata();
+    setup({ test: customTest, metadata });
+
+    expect(screen.getByText('Lipid Panel')).toBeInTheDocument();
+  });
+});

package/dist/examples/vintasend-medplum-example/src/components/labs/TestMetadataCardInput.tsx

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Card, Radio, Stack, Text, TextInput } from '@mantine/core';
+import type { LabOrderInputErrors, TestCoding } from '@medplum/health-gorilla-core';
+import { useHealthGorillaLabOrderContext } from '@medplum/health-gorilla-react';
+import type { TestMetadata } from '@medplum/health-gorilla-react';
+import { QuestionnaireForm } from '@medplum/react';
+import type { JSX } from 'react';
+
+export type TestMetadataCardInputProps = {
+  test: TestCoding;
+  metadata: TestMetadata | undefined;
+  error?: NonNullable<LabOrderInputErrors['testMetadata']>[keyof NonNullable<LabOrderInputErrors['testMetadata']>];
+};
+
+export function TestMetadataCardInput({ test, metadata, error }: TestMetadataCardInputProps): JSX.Element {
+  const { updateTestMetadata } = useHealthGorillaLabOrderContext();
+
+  if (!metadata) {
+    return (
+      <Card key={test.code} withBorder shadow="none">
+        <Text fw={500}>{test.display}</Text>
+        <div>Missing metadata</div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card key={test.code} withBorder shadow="none">
+      <Stack gap="xs">
+        <Text fw={500}>{test.display}</Text>
+        {!metadata ? (
+          <div>Missing metadata</div>
+        ) : (
+          <>
+            <Radio.Group
+              value={metadata.priority}
+              error={error?.priority?.message}
+              onChange={(newValue) => {
+                if (!newValue) {
+                  console.warn('New value for priority unexpectedly falsey', newValue);
+                  return;
+                }
+                const newPriority = newValue as TestMetadata['priority'];
+                updateTestMetadata(test, { priority: newPriority });
+              }}
+              label="Priority"
+              withAsterisk
+            >
+              <Stack gap={4}>
+                <Radio value="routine" label="Routine" />
+                <Radio value="urgent" label="Urgent" />
+                <Radio value="asap" label="ASAP" />
+                <Radio value="stat" label="Stat" />
+              </Stack>
+            </Radio.Group>
+
+            <TextInput
+              label="Notes"
+              value={metadata.notes ?? ''}
+              onChange={(event) => {
+                updateTestMetadata(test, { notes: event.currentTarget.value });
+              }}
+              placeholder="Test notes"
+            />
+
+            {metadata.aoeStatus === 'loading' && <Text>Loading AoE...</Text>}
+            {metadata.aoeStatus === 'error' && <Text>Error fetching AoE</Text>}
+            {metadata.aoeStatus === 'loaded' && metadata.aoeQuestionnaire && (
+              <>
+                {error?.aoeResponses?.message && <Text c="red">{error.aoeResponses.message}</Text>}
+                <QuestionnaireForm
+                  questionnaire={metadata.aoeQuestionnaire}
+                  disablePagination
+                  excludeButtons
+                  onChange={(qr) => {
+                    updateTestMetadata(test, { aoeResponses: qr });
+                  }}
+                />
+              </>
+            )}
+          </>
+        )}
+      </Stack>
+    </Card>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/messages/ChatList.test.tsx

@@ -0,0 +1,126 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import type { Communication, Patient } from '@medplum/fhirtypes';
+import { MockClient } from '@medplum/mock';
+import { MedplumProvider } from '@medplum/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { ChatList } from './ChatList';
+
+const mockPatient1: Patient = {
+  resourceType: 'Patient',
+  id: 'patient-1',
+  name: [{ given: ['John'], family: 'Doe' }],
+};
+
+const mockPatient2: Patient = {
+  resourceType: 'Patient',
+  id: 'patient-2',
+  name: [{ given: ['Jane'], family: 'Smith' }],
+};
+
+const mockCommunication1: Communication = {
+  resourceType: 'Communication',
+  id: 'comm-1',
+  status: 'in-progress',
+  topic: { text: 'Topic 1' },
+  subject: { reference: 'Patient/patient-1' },
+};
+
+const mockCommunication2: Communication = {
+  resourceType: 'Communication',
+  id: 'comm-2',
+  status: 'in-progress',
+  topic: { text: 'Topic 2' },
+  subject: { reference: 'Patient/patient-2' },
+};
+
+const mockLastCommunication1: Communication = {
+  resourceType: 'Communication',
+  id: 'last-comm-1',
+  status: 'in-progress',
+  payload: [{ contentString: 'Last message 1' }],
+  sent: '2024-01-01T12:00:00Z',
+};
+
+const mockGetThreadUri = vi.fn((topic: Communication) => `/Message/${topic.id}`);
+
+describe('ChatList', () => {
+  let medplum: MockClient;
+
+  beforeEach(async () => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+
+    // Create patient resources
+    await medplum.createResource(mockPatient1);
+    await medplum.createResource(mockPatient2);
+  });
+
+  const setup = (
+    threads: [Communication, Communication | undefined][],
+    selectedCommunication?: Communication
+  ): void => {
+    render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <ChatList threads={threads} selectedCommunication={selectedCommunication} getThreadUri={mockGetThreadUri} />
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  test('renders empty list when no threads', () => {
+    setup([]);
+    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+  });
+
+  test('renders single thread', async () => {
+    setup([[mockCommunication1, mockLastCommunication1]]);
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Topic 1')).toBeInTheDocument();
+  });
+
+  test('renders multiple threads', async () => {
+    setup([
+      [mockCommunication1, mockLastCommunication1],
+      [mockCommunication2, undefined],
+    ]);
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+    });
+  });
+
+  test('renders thread with last communication message', async () => {
+    setup([[mockCommunication1, mockLastCommunication1]]);
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+    // When topic has text, it shows the topic text instead of message content
+    expect(screen.getByText('Topic 1')).toBeInTheDocument();
+  });
+
+  test('handles thread without last communication', async () => {
+    setup([[mockCommunication1, undefined]]);
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+    // When topic has text, it shows the topic text instead of "No messages available"
+    expect(screen.getByText('Topic 1')).toBeInTheDocument();
+  });
+
+  test('renders link with correct href from getThreadUri', async () => {
+    setup([[mockCommunication1, mockLastCommunication1]]);
+    await waitFor(() => {
+      const link = screen.getByText('John Doe').closest('a');
+      expect(link).toHaveAttribute('href', '/Message/comm-1');
+    });
+  });
+});

package/dist/examples/vintasend-medplum-example/src/components/messages/ChatList.tsx

@@ -0,0 +1,38 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Divider, Stack } from '@mantine/core';
+import type { Communication } from '@medplum/fhirtypes';
+import { Fragment } from 'react';
+import type { JSX } from 'react';
+import { ChatListItem } from './ChatListItem';
+
+interface ChatListProps {
+  threads: [Communication, Communication | undefined][];
+  selectedCommunication: Communication | undefined;
+  getThreadUri: (topic: Communication) => string;
+}
+
+export const ChatList = (props: ChatListProps): JSX.Element => {
+  const { threads, selectedCommunication, getThreadUri } = props;
+
+  return (
+    <Stack gap={0}>
+      {threads.map((thread: [Communication, Communication | undefined]) => {
+        const topicCommunication = thread[0];
+        const lastCommunication = thread[1];
+        const _isSelected = selectedCommunication?.id === topicCommunication.id;
+        return (
+          <Fragment key={topicCommunication.id}>
+            <ChatListItem
+              topic={topicCommunication}
+              lastCommunication={lastCommunication}
+              isSelected={_isSelected}
+              getThreadUri={getThreadUri}
+            />
+            <Divider />
+          </Fragment>
+        );
+      })}
+    </Stack>
+  );
+};

package/dist/examples/vintasend-medplum-example/src/components/messages/ChatListItem.module.css

@@ -0,0 +1,23 @@
+.content {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.contentContainer:hover {
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-9));
+}
+
+.contentContainer {
+  transition: background 0.2s;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-dark-9), var(--mantine-color-gray-0));
+}
+
+.contentContainer.selected {
+  background: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-9));
+}