vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/components/spaces/ResourceBox.tsx

@@ -0,0 +1,90 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Box, Group, Loader, Paper, Text, ThemeIcon } from '@mantine/core';
+import { getDisplayString } from '@medplum/core';
+import type { Resource } from '@medplum/fhirtypes';
+import { useMedplum } from '@medplum/react';
+import { IconFileText } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+import type { JSX } from 'react';
+import classes from './ResourceBox.module.css';
+
+interface ResourceBoxProps {
+  resourceReference: string;
+  onClick: (resourceReference: string) => void;
+}
+
+export function ResourceBox({ resourceReference, onClick }: ResourceBoxProps): JSX.Element {
+  const medplum = useMedplum();
+  const [resource, setResource] = useState<Resource | undefined>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | undefined>();
+
+  useEffect(() => {
+    const [resourceType, resourceId] = resourceReference.split('/');
+    if (!resourceType || !resourceId) {
+      setError('Invalid resource reference');
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(undefined);
+
+    medplum
+      .readReference({ reference: resourceReference })
+      .then(setResource)
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setLoading(false));
+  }, [medplum, resourceReference]);
+
+  if (loading) {
+    return (
+      <Paper withBorder p="sm" className={classes.resourceBox}>
+        <Group gap="sm" wrap="nowrap">
+          <Loader size="sm" />
+          <Text size="sm" c="dimmed">
+            Loading...
+          </Text>
+        </Group>
+      </Paper>
+    );
+  }
+
+  if (error || !resource) {
+    return (
+      <Paper withBorder p="sm" className={classes.resourceBox}>
+        <Text size="sm" c="red">
+          {error || 'Unable to find resource'}
+        </Text>
+      </Paper>
+    );
+  }
+
+  const displayName = getDisplayString(resource) ?? '';
+  const resourceType = resource.resourceType;
+
+  return (
+    <Paper
+      withBorder
+      p="sm"
+      className={classes.resourceBox}
+      onClick={() => onClick(resourceReference)}
+      data-testid="resource-box"
+    >
+      <Group gap="sm" wrap="nowrap">
+        <ThemeIcon size="lg" variant="light" color="violet">
+          <IconFileText size={20} />
+        </ThemeIcon>
+        <Box className={classes.content}>
+          <Text size="sm" fw={600} c="violet.7">
+            {resourceType}
+          </Text>
+          <Text size="xs" c="dimmed" truncate>
+            {displayName}
+          </Text>
+        </Box>
+      </Group>
+    </Paper>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/spaces/ResourcePanel.test.tsx

@@ -0,0 +1,305 @@
+// 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 { MockClient } from '@medplum/mock';
+import type {
+  DiagnosticReport,
+  Encounter,
+  Observation,
+  Patient,
+  Practitioner,
+  ServiceRequest,
+  Task,
+} from '@medplum/fhirtypes';
+import { MedplumProvider } from '@medplum/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Routes, Route } from 'react-router';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { ResourcePanel } from './ResourcePanel';
+import { randomUUID } from 'crypto';
+
+describe('ResourcePanel', () => {
+  let medplum: MockClient;
+
+  beforeEach(() => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+  });
+
+  function setup<T extends { resourceType: string; id?: string }>(resource: T | { reference: string }): void {
+    render(
+      <MemoryRouter initialEntries={['/spaces']}>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <Notifications />
+            <Routes>
+              <Route path="/spaces" element={<ResourcePanel resource={resource as any} />} />
+            </Routes>
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  }
+
+  test('renders loading state when resource is not yet loaded', async () => {
+    // Pass a reference that will need to be resolved
+    setup({ reference: 'Patient/unknown-patient' });
+
+    await waitFor(() => {
+      expect(screen.getByText('Loading resource...')).toBeInTheDocument();
+    });
+  });
+
+  test('renders PatientSummary for Patient resource', async () => {
+    const patientId = randomUUID();
+    const patient: Patient = {
+      resourceType: 'Patient',
+      id: patientId,
+      name: [{ given: ['Homer'], family: 'Simpson' }],
+    };
+    await medplum.createResource(patient);
+
+    setup(patient);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+
+    // PatientSummary should render patient information
+    expect(screen.getByText(/Homer/i)).toBeInTheDocument();
+  });
+
+  test('renders TaskDetailPanel for Task resource', async () => {
+    const task: Task = {
+      resourceType: 'Task',
+      id: 'task-123',
+      status: 'in-progress',
+      intent: 'order',
+      code: { text: 'Test Task' },
+      description: 'Task description for testing',
+    };
+    await medplum.createResource(task);
+
+    setup(task);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+
+    // TaskDetailPanel should render task information
+    await waitFor(() => {
+      expect(screen.getByText('Test Task')).toBeInTheDocument();
+    });
+  });
+
+  test('renders LabResultDetails for DiagnosticReport resource', async () => {
+    const diagnosticReport: DiagnosticReport = {
+      resourceType: 'DiagnosticReport',
+      id: 'dr-123',
+      status: 'final',
+      code: { text: 'Complete Blood Count', coding: [{ display: 'CBC' }] },
+      conclusion: 'Normal results',
+    };
+    await medplum.createResource(diagnosticReport);
+
+    setup(diagnosticReport);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+  });
+
+  test('renders LabOrderDetails for ServiceRequest resource', async () => {
+    const patient: Patient = {
+      resourceType: 'Patient',
+      id: 'patient-sr',
+      name: [{ given: ['Test'], family: 'Patient' }],
+    };
+    await medplum.createResource(patient);
+
+    const serviceRequest: ServiceRequest = {
+      resourceType: 'ServiceRequest',
+      id: 'sr-123',
+      status: 'active',
+      intent: 'order',
+      code: { text: 'Lab Order' },
+      subject: { reference: 'Patient/patient-sr' },
+    };
+    await medplum.createResource(serviceRequest);
+
+    setup(serviceRequest);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+  });
+
+  test('renders EncounterChart for Encounter resource', async () => {
+    const patient: Patient = {
+      resourceType: 'Patient',
+      id: 'patient-enc',
+      name: [{ given: ['Test'], family: 'Patient' }],
+    };
+    await medplum.createResource(patient);
+
+    const encounter: Encounter = {
+      resourceType: 'Encounter',
+      id: 'enc-123',
+      status: 'in-progress',
+      class: { code: 'AMB', display: 'Ambulatory' },
+      subject: { reference: 'Patient/patient-enc' },
+    };
+    await medplum.createResource(encounter);
+
+    setup(encounter);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+  });
+
+  test('renders ResourceTable for unknown resource types', async () => {
+    const observationId = randomUUID();
+    const observation: Observation = {
+      resourceType: 'Observation',
+      id: observationId,
+      status: 'final',
+      code: { text: 'Blood Pressure' },
+    };
+    await medplum.createResource(observation);
+
+    setup(observation);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+
+    // ResourceTable should be rendered - look for the code text instead
+    await waitFor(() => {
+      expect(screen.getByText(/Blood Pressure/i)).toBeInTheDocument();
+    });
+  });
+
+  test('renders Practitioner using ResourceTable', async () => {
+    const practitionerId = randomUUID();
+    const practitioner: Practitioner = {
+      resourceType: 'Practitioner',
+      id: practitionerId,
+      name: [{ given: ['Alice'], family: 'Smith' }],
+    };
+    await medplum.createResource(practitioner);
+
+    setup(practitioner);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+  });
+
+  test('handles resource passed as reference', async () => {
+    const patient: Patient = {
+      resourceType: 'Patient',
+      id: 'ref-patient',
+      name: [{ given: ['Referenced'], family: 'Patient' }],
+    };
+    await medplum.createResource(patient);
+
+    setup({ reference: 'Patient/ref-patient' });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+
+    // Should resolve reference and render PatientSummary
+    await waitFor(() => {
+      expect(screen.getByText(/Referenced/i)).toBeInTheDocument();
+    });
+  });
+
+  test('handles Task reference resolution', async () => {
+    const task: Task = {
+      resourceType: 'Task',
+      id: 'ref-task',
+      status: 'draft',
+      intent: 'order',
+      code: { text: 'Referenced Task' },
+    };
+    await medplum.createResource(task);
+
+    setup({ reference: 'Task/ref-task' });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Referenced Task')).toBeInTheDocument();
+    });
+  });
+
+  test('handles DiagnosticReport reference resolution', async () => {
+    const dr: DiagnosticReport = {
+      resourceType: 'DiagnosticReport',
+      id: 'ref-dr',
+      status: 'final',
+      code: { text: 'Referenced Lab Result' },
+    };
+    await medplum.createResource(dr);
+
+    setup({ reference: 'DiagnosticReport/ref-dr' });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+  });
+
+  test('handles ServiceRequest reference resolution', async () => {
+    const patient: Patient = {
+      resourceType: 'Patient',
+      id: 'patient-ref-sr',
+      name: [{ given: ['Test'], family: 'Patient' }],
+    };
+    await medplum.createResource(patient);
+
+    const sr: ServiceRequest = {
+      resourceType: 'ServiceRequest',
+      id: 'ref-sr',
+      status: 'active',
+      intent: 'order',
+      code: { text: 'Referenced Lab Order' },
+      subject: { reference: 'Patient/patient-ref-sr' },
+    };
+    await medplum.createResource(sr);
+
+    setup({ reference: 'ServiceRequest/ref-sr' });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+  });
+
+  test('handles Encounter reference resolution', async () => {
+    const patient: Patient = {
+      resourceType: 'Patient',
+      id: 'patient-ref-enc',
+      name: [{ given: ['Test'], family: 'Patient' }],
+    };
+    await medplum.createResource(patient);
+
+    const encounter: Encounter = {
+      resourceType: 'Encounter',
+      id: 'ref-enc',
+      status: 'finished',
+      class: { code: 'AMB' },
+      subject: { reference: 'Patient/patient-ref-enc' },
+    };
+    await medplum.createResource(encounter);
+
+    setup({ reference: 'Encounter/ref-enc' });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('resource-panel')).toBeInTheDocument();
+    });
+  });
+});

package/dist/examples/vintasend-medplum-example/src/components/spaces/ResourcePanel.tsx

@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Box, Text } from '@mantine/core';
+import type { Reference, Resource } from '@medplum/fhirtypes';
+import { ResourceTable, useResource, PatientSummary } from '@medplum/react';
+import type { JSX } from 'react';
+import { LabResultDetails } from '../labs/LabResultDetails';
+import { LabOrderDetails } from '../labs/LabOrderDetails';
+import { EncounterChart } from '../encounter/EncounterChart';
+import { TaskDetailPanel } from '../tasks/TaskDetailPanel';
+
+interface ResourcePanelProps<T extends Resource = Resource> {
+  resource: Reference<T> | T;
+}
+
+export function ResourcePanel<T extends Resource = Resource>(props: ResourcePanelProps<T>): JSX.Element | null {
+  const { resource } = props;
+  const displayResource = useResource(resource);
+
+  const renderResourceContent = (): JSX.Element => {
+    if (!displayResource) {
+      return <Text c="dimmed">Loading resource...</Text>;
+    }
+
+    switch (displayResource.resourceType) {
+      case 'Patient':
+        return <PatientSummary patient={displayResource} />;
+      case 'Task':
+        return <TaskDetailPanel task={displayResource} />;
+      case 'DiagnosticReport':
+        return <LabResultDetails result={displayResource} />;
+      case 'ServiceRequest':
+        return <LabOrderDetails order={displayResource} />;
+      case 'Encounter':
+        return <EncounterChart encounter={displayResource} />;
+      default:
+        return <ResourceTable value={displayResource} />;
+    }
+  };
+
+  return (
+    <Box p="md" data-testid="resource-panel">
+      {renderResourceContent()}
+    </Box>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/spaces/SpacesInbox.module.css

@@ -0,0 +1,262 @@
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Sidebar */
+.sidebar {
+  width: 280px;
+  /* background-color: var(--mantine-color-white); */
+  color: var(--mantine-color-dark-9);
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--mantine-color-gray-2);
+  transition: width 0.3s ease;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.sidebarHeader {
+  padding: var(--mantine-spacing-md);
+  border-bottom: 1px solid var(--mantine-color-gray-2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebarTitle {
+  font-weight: 600;
+  color: var(--mantine-color-dark-9);
+  font-size: var(--mantine-font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.sidebarContent {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+/* Main Chat Area */
+.chatContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--mantine-color-body);
+  position: relative;
+  overflow: hidden;
+}
+
+.chatHeader {
+  height: 42px;
+  border-bottom: 1px solid var(--mantine-color-gray-2);
+  backdrop-filter: blur(10px);
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: var(--mantine-spacing-xs);
+  padding-left: var(--mantine-spacing-xs);
+}
+
+.messagesArea {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-lg);
+}
+
+.messageWrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+  width: auto;
+  margin: 0;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.userMessage {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.assistantMessage {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.messageContent {
+  padding: var(--mantine-spacing-md);
+  border-radius: var(--mantine-radius-lg);
+  font-size: var(--mantine-font-size-md);
+  line-height: 1.6;
+  position: relative;
+  word-break: break-word;
+}
+
+.userMessage .messageContent {
+  background-color: var(--mantine-color-blue-6);
+  color: var(--mantine-color-white);
+  border-bottom-right-radius: 4px;
+}
+
+.assistantMessage .messageContent {
+  background-color: var(--mantine-color-gray-1);
+  color: var(--mantine-color-dark-9);
+  border-bottom-left-radius: 4px;
+}
+
+/* Input Area */
+.inputArea {
+  padding: var(--mantine-spacing-xl);
+  background: linear-gradient(to top, var(--mantine-color-body) 80%, rgba(255, 255, 255, 0));
+  display: flex;
+  justify-content: center;
+}
+
+.inputWrapper {
+  width: 100%;
+  max-width: 800px;
+  position: relative;
+  background-color: var(--mantine-color-white);
+  border-radius: var(--mantine-radius-xl);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--mantine-color-gray-2);
+  padding: var(--mantine-spacing-xs);
+  transition: box-shadow 0.2s ease;
+}
+
+.inputWrapper:focus-within {
+  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
+  border-color: var(--mantine-color-blue-3);
+}
+
+/* Resource Panel */
+.resourcePanel {
+  flex: 1;
+  min-width: 0;
+  background-color: var(--mantine-color-white);
+  border-left: 1px solid var(--mantine-color-gray-2);
+  display: flex;
+  flex-direction: column;
+  animation: slideIn 0.3s ease-out;
+  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.02);
+}
+
+.resourceHeader {
+  padding: var(--mantine-spacing-md);
+  border-bottom: 1px solid var(--mantine-color-gray-2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--mantine-color-gray-0);
+}
+
+/* Utilities */
+.fadeOut {
+  animation: fadeOut 0.3s ease-out forwards;
+}
+
+.fadeIn {
+  animation: fadeIn 0.3s ease-in forwards;
+}
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--mantine-color-gray-5);
+  text-align: center;
+}
+
+.emptyStateIcon {
+  margin-bottom: var(--mantine-spacing-md);
+  color: var(--mantine-color-gray-3);
+}
+
+/* Dark Mode Overrides */
+[data-mantine-color-scheme="dark"] .sidebar {
+  background-color: var(--mantine-color-dark-8);
+  color: var(--mantine-color-gray-3);
+  border-right: 1px solid var(--mantine-color-dark-6);
+}
+
+[data-mantine-color-scheme="dark"] .sidebarHeader {
+  border-bottom: 1px solid var(--mantine-color-dark-6);
+}
+
+[data-mantine-color-scheme="dark"] .sidebarTitle {
+  color: var(--mantine-color-white);
+}
+
+[data-mantine-color-scheme="dark"] .chatContainer {
+  background-color: var(--mantine-color-dark-9);
+}
+
+[data-mantine-color-scheme="dark"] .chatHeader {
+  border-bottom: 1px solid var(--mantine-color-dark-6);
+  background-color: rgba(26, 27, 30, 0.8);
+}
+
+[data-mantine-color-scheme="dark"] .assistantMessage .messageContent {
+  background-color: var(--mantine-color-dark-6);
+  color: var(--mantine-color-gray-1);
+}
+
+[data-mantine-color-scheme="dark"] .inputArea {
+  background: linear-gradient(to top, var(--mantine-color-dark-9) 80%, rgba(0, 0, 0, 0));
+}
+
+[data-mantine-color-scheme="dark"] .inputWrapper {
+  background-color: var(--mantine-color-dark-7);
+  border: 1px solid var(--mantine-color-dark-4);
+}
+
+[data-mantine-color-scheme="dark"] .resourcePanel {
+  background-color: var(--mantine-color-dark-8);
+  border-left: 1px solid var(--mantine-color-dark-6);
+}
+
+[data-mantine-color-scheme="dark"] .resourceHeader {
+  border-bottom: 1px solid var(--mantine-color-dark-6);
+  background-color: var(--mantine-color-dark-9);
+}
+
+[data-mantine-color-scheme="dark"] .emptyState {
+  color: var(--mantine-color-gray-6);
+}
+
+[data-mantine-color-scheme="dark"] .emptyStateIcon {
+  color: var(--mantine-color-gray-6);
+}