vintasend 0.4.0 → 0.4.7

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

@@ -0,0 +1,167 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import type { Communication } from '@medplum/fhirtypes';
+import { HomerSimpson, 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 { ChatListItem } from './ChatListItem';
+import { createReference } from '@medplum/core';
+
+const mockTopic: Communication = {
+  resourceType: 'Communication',
+  id: 'topic-123',
+  status: 'in-progress',
+  subject: createReference(HomerSimpson),
+  topic: { text: 'Test Topic' },
+};
+
+const mockLastCommunication: Communication = {
+  resourceType: 'Communication',
+  id: 'last-comm-123',
+  status: 'in-progress',
+  sent: '2024-01-15T10:30:00Z',
+  sender: { display: 'Dr. Smith' },
+  payload: [
+    {
+      contentString:
+        'This is a test message that is longer than 100 characters to test the truncation functionality of the chat list item component',
+    },
+  ],
+};
+
+const mockGetThreadUri = vi.fn((topic: Communication) => `/Message/${topic.id}`);
+
+describe('ChatListItem', () => {
+  let medplum: MockClient;
+
+  beforeEach(async () => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+  });
+
+  const setup = (topic: Communication, lastCommunication: Communication | undefined, isSelected: boolean): void => {
+    render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <ChatListItem
+              topic={topic}
+              lastCommunication={lastCommunication}
+              isSelected={isSelected}
+              getThreadUri={mockGetThreadUri}
+            />
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  test('renders topic with patient name', async () => {
+    setup(mockTopic, mockLastCommunication, false);
+
+    await waitFor(() => {
+      expect(screen.getByText('Homer Simpson')).toBeInTheDocument();
+    });
+  });
+
+  test('renders topic text when available', async () => {
+    setup(mockTopic, mockLastCommunication, false);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Topic')).toBeInTheDocument();
+    });
+  });
+
+  test('renders last message when topic text is not available', async () => {
+    const topicWithoutText: Communication = {
+      ...mockTopic,
+      topic: undefined,
+    };
+    setup(topicWithoutText, mockLastCommunication, false);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Dr. Smith/)).toBeInTheDocument();
+    });
+  });
+
+  test('truncates long messages when topic text is not available', async () => {
+    const longMessage =
+      'This is a very long message from Dr. Smith that is meant to exceed one hundred characters in length. It just keeps going and going beyond the limit of what is shown in the UI preview.';
+    const topicWithoutText: Communication = {
+      ...mockTopic,
+      topic: undefined,
+    };
+    const lastCommunicationWithLongMessage: Communication = {
+      ...mockLastCommunication,
+      payload: [{ contentString: longMessage }],
+    };
+    setup(topicWithoutText, lastCommunicationWithLongMessage, false);
+    await waitFor(() => {
+      const truncated = `Dr. Smith: ${longMessage.slice(0, 100)}...`;
+      expect(screen.getByText(truncated)).toBeInTheDocument();
+    });
+  });
+
+  test('shows topic text when available, even without last communication', async () => {
+    setup(mockTopic, undefined, false);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Topic')).toBeInTheDocument();
+    });
+  });
+
+  test('displays formatted date when last communication exists', async () => {
+    setup(mockTopic, mockLastCommunication, false);
+
+    await waitFor(() => {
+      // The date should be formatted and displayed
+      const dateElement = screen.getByText(/2024/);
+      expect(dateElement).toBeInTheDocument();
+    });
+  });
+
+  test('applies selected class when isSelected is true', async () => {
+    setup(mockTopic, mockLastCommunication, true);
+
+    await waitFor(() => {
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('href', '/Message/topic-123');
+    });
+  });
+
+  test('generates correct link from getThreadUri', async () => {
+    setup(mockTopic, mockLastCommunication, false);
+
+    await waitFor(() => {
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('href', '/Message/topic-123');
+    });
+  });
+
+  test('handles message without sender display', async () => {
+    const commWithoutSender: Communication = {
+      ...mockLastCommunication,
+      sender: undefined,
+    };
+    setup(mockTopic, commWithoutSender, false);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Test Topic/)).toBeInTheDocument();
+    });
+  });
+
+  test('handles short messages without truncation', async () => {
+    const shortMessage: Communication = {
+      ...mockLastCommunication,
+      payload: [{ contentString: 'Short message' }],
+    };
+    setup(mockTopic, shortMessage, false);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Topic')).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,53 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Group, Stack, Text } from '@mantine/core';
+import type { Communication, HumanName, Patient, Reference } from '@medplum/fhirtypes';
+import { MedplumLink, ResourceAvatar, useResource } from '@medplum/react';
+import type { JSX } from 'react';
+import { formatDateTime, formatHumanName } from '@medplum/core';
+import classes from './ChatListItem.module.css';
+import cx from 'clsx';
+
+interface ChatListItemProps {
+  topic: Communication;
+  lastCommunication: Communication | undefined;
+  isSelected: boolean;
+  getThreadUri: (topic: Communication) => string;
+}
+
+export const ChatListItem = (props: ChatListItemProps): JSX.Element => {
+  const { topic, lastCommunication, isSelected, getThreadUri } = props;
+  const patientResource = useResource(topic.subject as Reference<Patient>);
+  const patientName = formatHumanName(patientResource?.name?.[0] as HumanName);
+  const lastMsg = lastCommunication?.payload?.[0]?.contentString;
+  const trimmedMsg = lastMsg?.length && lastMsg.length > 100 ? lastMsg.slice(0, 100) + '...' : lastMsg;
+  const senderName = lastCommunication?.sender?.display ? `${lastCommunication?.sender?.display}: ` : '';
+  const content = trimmedMsg ? `${senderName} ${trimmedMsg}` : `No messages available`;
+  const topicName = topic.topic?.text ?? content;
+
+  return (
+    <MedplumLink to={getThreadUri(topic)}>
+      <Group
+        p="xs"
+        align="center"
+        wrap="nowrap"
+        className={cx(classes.contentContainer, {
+          [classes.selected]: isSelected,
+        })}
+      >
+        <ResourceAvatar value={topic.subject as Reference<Patient>} radius="xl" size={36} />
+        <Stack gap={0}>
+          <Text size="sm" fw={700} truncate="end">
+            {patientName}
+          </Text>
+          <Text size="sm" fw={400} lineClamp={2} className={classes.content}>
+            {topicName}
+          </Text>
+          <Text size="xs" style={{ marginTop: 2 }}>
+            {lastCommunication ? formatDateTime(lastCommunication.sent) : ''}
+          </Text>
+        </Stack>
+      </Group>
+    </MedplumLink>
+  );
+};

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

@@ -0,0 +1,94 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import type { Patient } from '@medplum/fhirtypes';
+import { MockClient } from '@medplum/mock';
+import { MedplumProvider } from '@medplum/react';
+import { render, screen, waitFor } 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 { NewTopicDialog } from './NewTopicDialog';
+
+const mockOnSubmit = vi.fn();
+const mockOnClose = vi.fn();
+
+describe('NewTopicDialog', () => {
+  let medplum: MockClient;
+
+  beforeEach(async () => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+  });
+
+  const setup = (opened = true, subject?: Patient): void => {
+    render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <Notifications />
+            <NewTopicDialog opened={opened} onClose={mockOnClose} onSubmit={mockOnSubmit} subject={subject} />
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  test('renders modal when opened', () => {
+    setup(true);
+    expect(screen.getByText('New Message')).toBeInTheDocument();
+  });
+
+  test('does not render modal when closed', () => {
+    setup(false);
+    expect(screen.queryByText('New Message')).not.toBeInTheDocument();
+  });
+
+  test('displays patient input field', () => {
+    setup(true);
+    expect(screen.getByText('Patient')).toBeInTheDocument();
+    expect(screen.getByText('Select a patient')).toBeInTheDocument();
+  });
+
+  test('displays practitioner input field', () => {
+    setup(true);
+    expect(screen.getByText('Practitioner (optional)')).toBeInTheDocument();
+  });
+
+  test('displays topic input field', () => {
+    setup(true);
+    expect(screen.getByText('Topic (optional)')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter your topic')).toBeInTheDocument();
+  });
+
+  test('displays submit button', () => {
+    setup(true);
+    expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+  });
+
+  test('shows error when submitting without patient', async () => {
+    const user = userEvent.setup();
+    setup(true);
+
+    const submitButton = screen.getByRole('button', { name: 'Next' });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Please select a patient/i)).toBeInTheDocument();
+    });
+  });
+
+  test('calls onClose when modal is closed', async () => {
+    const user = userEvent.setup();
+    setup(true);
+
+    const closeButton = document.querySelector('.mantine-Modal-close');
+    expect(closeButton).toBeInTheDocument();
+
+    if (closeButton) {
+      await user.click(closeButton);
+      expect(mockOnClose).toHaveBeenCalled();
+    }
+  });
+});

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

@@ -0,0 +1,165 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Button, Modal, Stack, Text, TextInput } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { createReference } from '@medplum/core';
+import type {
+  Communication,
+  Patient,
+  Practitioner,
+  Questionnaire,
+  QuestionnaireResponse,
+  Reference,
+} from '@medplum/fhirtypes';
+import { QuestionnaireForm, ResourceInput, useMedplum, useMedplumProfile } from '@medplum/react';
+import { useMemo, useState } from 'react';
+import type { JSX } from 'react';
+import { showErrorNotification } from '../../utils/notifications';
+
+interface NewTopicDialogProps {
+  subject: Reference<Patient> | Patient | undefined;
+  opened: boolean;
+  onClose: () => void;
+  onSubmit?: (communication: Communication) => void;
+}
+
+export const NewTopicDialog = (props: NewTopicDialogProps): JSX.Element => {
+  const { subject, opened, onClose, onSubmit } = props;
+  const medplum = useMedplum();
+  const profile = useMedplumProfile();
+  const profileRef = useMemo(() => (profile ? createReference(profile) : undefined), [profile]);
+
+  const [topic, setTopic] = useState('');
+  const [practitioners, setPractitioners] = useState<Reference<Practitioner>[]>(
+    profile?.resourceType === 'Practitioner' ? [createReference(profile) as Reference<Practitioner>] : []
+  );
+  const [patient, setPatient] = useState<Reference<Patient> | undefined>(
+    subject ? createReference(subject as Patient) : undefined
+  );
+
+  // Create initial QuestionnaireResponse with current practitioner as default
+  const initialResponse: QuestionnaireResponse | undefined = useMemo(() => {
+    if (profile?.resourceType === 'Practitioner') {
+      return {
+        resourceType: 'QuestionnaireResponse',
+        status: 'in-progress',
+        item: [
+          {
+            linkId: 'q1',
+            answer: [{ valueReference: createReference(profile) as Reference<Practitioner> }],
+          },
+        ],
+      };
+    }
+    return undefined;
+  }, [profile]);
+
+  const handleSubmit = async (): Promise<void> => {
+    if (!patient) {
+      showNotification({
+        title: 'Error',
+        message: 'Please select a patient',
+        color: 'red',
+      });
+      return;
+    }
+
+    const communication: Communication = {
+      resourceType: 'Communication',
+      status: 'in-progress',
+      subject: patient,
+      sender: profileRef,
+      recipient: [
+        patient,
+        ...practitioners.map((practitioner) => ({
+          reference: practitioner.reference,
+        })),
+      ],
+      topic: {
+        text: topic,
+      },
+    };
+
+    try {
+      const createdCommunication = await medplum.createResource(communication);
+      onSubmit?.(createdCommunication);
+      onClose();
+    } catch (error) {
+      showErrorNotification(error);
+    }
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="New Message" size="md">
+      <Stack gap="xl">
+        <Stack gap={0}>
+          <Text fw={500}>Patient</Text>
+          <Text c="dimmed">Select a patient</Text>
+
+          <ResourceInput
+            resourceType="Patient"
+            name="patient"
+            required={true}
+            defaultValue={patient}
+            onChange={(value) => {
+              setPatient(value ? (createReference(value) as Reference<Patient>) : undefined);
+            }}
+          />
+        </Stack>
+
+        <Stack gap={0}>
+          <Text fw={500}>Practitioner (optional)</Text>
+          <Text c="dimmed">Select one or more practitioners</Text>
+
+          <QuestionnaireForm
+            questionnaire={questionnaire}
+            questionnaireResponse={initialResponse}
+            excludeButtons={true}
+            onChange={(value: QuestionnaireResponse) => {
+              const references =
+                value.item?.[0].answer
+                  ?.map((item) => item.valueReference)
+                  .filter((ref): ref is Reference<Practitioner> => ref !== undefined) ?? [];
+              setPractitioners(references);
+            }}
+          />
+        </Stack>
+
+        <Stack gap={0}>
+          <Text fw={500}>Topic (optional)</Text>
+          <Text c="dimmed">Enter a topic for the message</Text>
+
+          <TextInput placeholder="Enter your topic" value={topic} onChange={(e) => setTopic(e.target.value)} />
+        </Stack>
+
+        <Button onClick={handleSubmit}>Next</Button>
+      </Stack>
+    </Modal>
+  );
+};
+
+const questionnaire: Questionnaire = {
+  resourceType: 'Questionnaire',
+  status: 'active',
+  item: [
+    {
+      linkId: 'q1',
+      type: 'reference',
+      repeats: true,
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-referenceResource',
+          valueCodeableConcept: {
+            coding: [
+              {
+                system: 'http://hl7.org/fhir/fhir-types',
+                display: 'Practitioner',
+                code: 'Practitioner',
+              },
+            ],
+          },
+        },
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,8 @@
+.participantItem {
+  padding: 4px 0;
+}
+
+.participantItem:hover {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-9));
+  border-radius: var(--mantine-radius-sm);
+}