vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/pages/schedule/SchedulePage.tsx

@@ -0,0 +1,416 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Box, Button, Drawer, Group, SegmentedControl, Title } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { createReference, getReferenceString } from '@medplum/core';
+import type { WithId } from '@medplum/core';
+import type { Appointment, Practitioner, Schedule, Slot } from '@medplum/fhirtypes';
+import { useMedplum, useMedplumProfile } from '@medplum/react';
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { JSX } from 'react';
+import { Calendar, dayjsLocalizer } from 'react-big-calendar';
+import type { Event, SlotInfo, ToolbarProps, View } from 'react-big-calendar';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import { useNavigate } from 'react-router';
+import { CreateVisit } from '../../components/schedule/CreateVisit';
+import { showErrorNotification } from '../../utils/notifications';
+
+type AppointmentEvent = Event & { type: 'appointment'; appointment: Appointment; start: Date; end: Date };
+type SlotEvent = Event & { type: 'slot'; status: string; start: Date; end: Date };
+type ScheduleEvent = AppointmentEvent | SlotEvent;
+
+/**
+ * Schedule page that displays the practitioner's schedule.
+ * Allows the practitioner to create/update slots and create appointments.
+ * @returns A React component that displays the schedule page.
+ */
+export function SchedulePage(): JSX.Element | null {
+  const navigate = useNavigate();
+  const medplum = useMedplum();
+  const profile = useMedplumProfile() as Practitioner;
+  const calendarRef = useRef<Calendar<ScheduleEvent>>(null);
+  const [schedule, setSchedule] = useState<WithId<Schedule> | undefined>();
+  const [view, setView] = useState<View>('week');
+  const [date, setDate] = useState<Date>(new Date());
+  const [range, setRange] = useState<{ start: Date; end: Date } | undefined>(undefined);
+  const [createAppointmentOpened, createAppointmentHandlers] = useDisclosure(false);
+  const [slotEvents, setSlotEvents] = useState<ScheduleEvent[]>();
+  const [appointmentEvents, setAppointmentEvents] = useState<ScheduleEvent[]>();
+
+  const [appointmentSlot, setAppointmentSlot] = useState<SlotInfo>();
+
+  useEffect(() => {
+    if (medplum.isLoading() || !profile) {
+      return;
+    }
+
+    // Search for a Schedule associated with the logged user,
+    // create one if it doesn't exist
+    medplum
+      .searchOne('Schedule', { actor: getReferenceString(profile) })
+      .then((foundSchedule) => {
+        if (foundSchedule) {
+          setSchedule(foundSchedule);
+        } else {
+          medplum
+            .createResource({
+              resourceType: 'Schedule',
+              actor: [createReference(profile)],
+              active: true,
+            })
+            .then(setSchedule)
+            .catch(console.error);
+        }
+      })
+      .catch(console.error);
+  }, [medplum, profile]);
+
+  const handleRangeChange = useCallback(
+    (newRange: Date[] | { start: Date; end: Date }) => {
+      let newStart: Date;
+      let newEnd: Date;
+      if (Array.isArray(newRange)) {
+        // Week view passes the range as an array of dates
+        newStart = newRange[0];
+        newEnd = new Date(newRange[newRange.length - 1].getTime() + 24 * 60 * 60 * 1000);
+      } else {
+        // Other views pass the range as an object
+        newStart = newRange.start;
+        newEnd = newRange.end;
+      }
+
+      // Only update state if the range has changed
+      if (newStart.getTime() !== range?.start.getTime() || newEnd.getTime() !== range.end.getTime()) {
+        setRange({ start: newStart, end: newEnd });
+      }
+    },
+    [range, setRange]
+  );
+
+  const refreshEvents = useCallback(
+    (cache?: RequestCache) => {
+      const calendar = calendarRef.current;
+      if (!calendar || !schedule || !range) {
+        return;
+      }
+
+      const start = range.start.toISOString();
+      const end = range.end.toISOString();
+
+      async function searchSlots(): Promise<void> {
+        const slots = await medplum.searchResources(
+          'Slot',
+          [
+            ['_count', '1000'],
+            ['schedule', getReferenceString(schedule as WithId<Schedule>)],
+            ['start', `ge${start}`],
+            ['start', `le${end}`],
+          ],
+          { cache }
+        );
+        setSlotEvents(slotsToEvents(slots));
+      }
+
+      async function searchAppointments(): Promise<void> {
+        const appointments = await medplum.searchResources(
+          'Appointment',
+          [
+            ['_count', '1000'],
+            ['actor', getReferenceString(profile as WithId<Practitioner>)],
+            ['date', `ge${start}`],
+            ['date', `le${end}`],
+          ],
+          { cache }
+        );
+        setAppointmentEvents(appointmentsToEvents(appointments));
+      }
+
+      Promise.allSettled([searchSlots(), searchAppointments()]).catch(console.error);
+    },
+    [medplum, profile, schedule, range]
+  );
+
+  useEffect(() => {
+    refreshEvents();
+  }, [refreshEvents]);
+
+  /**
+   * When a date/time range is selected, set the event object and open the create slot modal
+   */
+  const handleSelectSlot = useCallback(
+    (slot: SlotInfo) => {
+      createAppointmentHandlers.open();
+      setAppointmentSlot(slot);
+    },
+    [createAppointmentHandlers]
+  );
+
+  /**
+   * When an existing event (slot/appointment) is selected, set the event object and open the
+   * appropriate modal.
+   * - If the event is a free slot, open the create appointment modal.
+   * - If the event is an appointment, navigate to the appointment page.
+   */
+  const handleSelectEvent = useCallback(
+    async (event: ScheduleEvent) => {
+      const { resourceType, status } = event.resource;
+
+      function handleSlot(): void {
+        if (status === 'free') {
+          createAppointmentHandlers.open();
+        }
+      }
+
+      async function handleAppointment(): Promise<void> {
+        const encounters = await medplum.searchResources('Encounter', [
+          ['appointment', getReferenceString(event.resource)],
+          ['_count', '1'],
+        ]);
+        const patient = encounters?.[0]?.subject;
+        if (patient?.reference) {
+          navigate(`/${patient.reference}/Encounter/${encounters?.[0]?.id}`)?.catch(console.error);
+        }
+      }
+
+      if (resourceType === 'Slot') {
+        handleSlot();
+        return;
+      }
+
+      if (resourceType === 'Appointment') {
+        handleAppointment().catch((err) => showErrorNotification(err));
+      }
+    },
+    [createAppointmentHandlers, navigate, medplum]
+  );
+
+  if (!schedule) {
+    return null;
+  }
+
+  const height = window.innerHeight - 60;
+
+  const CustomToolbar = (props: ToolbarProps<ScheduleEvent>): JSX.Element => {
+    const [firstRender, setFirstRender] = useState(true);
+    useEffect(() => {
+      // The calendar does not provide any way to receive the range of dates that
+      // are visible except when they change. This is the cleanest way I could find
+      // to extend it to provide the _initial_ range (`onView` calls `onRangeChange`).
+      // https://github.com/jquense/react-big-calendar/issues/1752#issuecomment-761051235
+      if (firstRender) {
+        props.onView(props.view);
+        setFirstRender(false);
+      }
+    }, [props, firstRender, setFirstRender]);
+    return (
+      <Group justify="space-between" pb="sm">
+        <Group>
+          <Title order={4} mr="md">
+            {props.view !== 'day' && dayjs(props.date).format('MMMM YYYY')}
+            {props.view === 'day' && dayjs(props.date).format('MMMM D YYYY')}
+          </Title>
+          <Button.Group>
+            <Button variant="default" size="xs" onClick={() => props.onNavigate('PREV')}>
+              <IconChevronLeft size={12} />
+            </Button>
+            <Button variant="default" size="xs" onClick={() => props.onNavigate('TODAY')}>
+              Today
+            </Button>
+            <Button variant="default" size="xs" onClick={() => props.onNavigate('NEXT')}>
+              <IconChevronRight size={12} />
+            </Button>
+          </Button.Group>
+        </Group>
+        <SegmentedControl
+          size="xs"
+          value={props.view}
+          onChange={(newView) => setView(newView as View)}
+          data={[
+            { label: 'Month', value: 'month' },
+            { label: 'Week', value: 'week' },
+            { label: 'Day', value: 'day' },
+          ]}
+        />
+      </Group>
+    );
+  };
+
+  function eventPropGetter(
+    event: ScheduleEvent,
+    _start: Date,
+    _end: Date,
+    _isSelected: boolean
+  ): { className?: string | undefined; style?: React.CSSProperties } {
+    const result = {
+      style: {
+        backgroundColor: '#228be6',
+        border: '1px solid rgba(255, 255, 255, 0)',
+        borderRadius: '4px',
+        color: 'white',
+        display: 'block',
+        opacity: 1.0,
+      },
+    };
+
+    if (event.type === 'slot') {
+      result.style.backgroundColor = event.status === 'free' ? '#d3f9d8' : '#ced4da';
+      result.style.color = 'black';
+      result.style.opacity = 0.6;
+    }
+
+    return result;
+  }
+
+  dayjs.extend(utc);
+  dayjs.extend(timezone);
+  dayjs.tz.setDefault(dayjs.tz.guess());
+
+  return (
+    <Box pos="relative" bg="white" p="md" style={{ height }}>
+      <Calendar
+        ref={calendarRef}
+        components={{ toolbar: CustomToolbar }}
+        view={view}
+        date={date}
+        localizer={dayjsLocalizer(dayjs)}
+        events={appointmentEvents}
+        backgroundEvents={slotEvents} // Background events don't show in the month view
+        onNavigate={(newDate: Date, newView: View) => {
+          setDate(newDate);
+          setView(newView);
+        }}
+        onRangeChange={handleRangeChange}
+        onSelectSlot={handleSelectSlot}
+        onSelectEvent={handleSelectEvent}
+        scrollToTime={date} // Default scroll to current time
+        style={{ height: height - 150 }}
+        selectable
+        eventPropGetter={eventPropGetter}
+      />
+
+      {/* Modals */}
+      <Drawer
+        opened={createAppointmentOpened}
+        onClose={createAppointmentHandlers.close}
+        title="New Calendar Event"
+        position="right"
+        h="100%"
+      >
+        <CreateVisit appointmentSlot={appointmentSlot} />
+      </Drawer>
+    </Box>
+  );
+}
+
+// This function collapses contiguous or overlapping slots of the same status into single events
+function slotsToEvents(slots: Slot[]): SlotEvent[] {
+  if (!slots || slots.length === 0) {
+    return [];
+  }
+
+  // First, filter the slots as before
+  const filteredSlots = slots.filter((slot) => slot.status === 'free' || slot.status === 'busy-unavailable');
+
+  // Group slots by status
+  const slotsByStatus: Record<string, SlotEvent[]> = {};
+  filteredSlots.forEach((slot) => {
+    if (!slotsByStatus[slot.status]) {
+      slotsByStatus[slot.status] = [];
+    }
+    slotsByStatus[slot.status].push({
+      type: 'slot',
+      status: slot.status,
+      start: new Date(slot.start),
+      end: new Date(slot.end),
+    });
+  });
+
+  const collapsedEvents: SlotEvent[] = [];
+
+  // Process each status group separately
+  Object.entries(slotsByStatus).forEach(([status, statusSlots]) => {
+    // Sort slots by start time
+    statusSlots.sort((a, b) => a.start.getTime() - b.start.getTime());
+
+    // Merge contiguous/overlapping slots
+    let currentGroup: SlotEvent | undefined = undefined;
+
+    for (const slot of statusSlots) {
+      if (!currentGroup) {
+        // Start a new group
+        currentGroup = {
+          type: 'slot',
+          status,
+          start: slot.start,
+          end: slot.end,
+        };
+      } else if (slot.start <= new Date(currentGroup.end.getTime() + 1000)) {
+        // Slot is contiguous or overlapping with current group
+        // The +1000ms (1 second) tolerance handles potential tiny gaps
+
+        // Extend end time if needed
+        if (slot.end > currentGroup.end) {
+          currentGroup.end = slot.end;
+        }
+      } else {
+        // This slot doesn't connect to the current group
+        // Finish current group and start a new one
+        collapsedEvents.push({
+          type: 'slot',
+          status: currentGroup.status,
+          title: status === 'free' ? 'Available' : 'Blocked',
+          start: currentGroup.start,
+          end: currentGroup.end,
+        });
+
+        currentGroup = {
+          type: 'slot',
+          status,
+          start: slot.start,
+          end: slot.end,
+        };
+      }
+    }
+
+    // Don't forget to add the last group
+    if (currentGroup) {
+      collapsedEvents.push({
+        type: 'slot',
+        status: currentGroup.status,
+        title: status === 'free' ? 'Available' : 'Blocked',
+        start: currentGroup.start,
+        end: currentGroup.end,
+        resource: {
+          status,
+        },
+      });
+    }
+  });
+
+  return collapsedEvents;
+}
+
+function appointmentsToEvents(appointments: Appointment[]): AppointmentEvent[] {
+  return appointments
+    .filter((appointment) => appointment.status !== 'cancelled')
+    .map((appointment) => {
+      // Find the patient among the participants to use as title
+      const patientParticipant = appointment?.participant?.find((p) => p.actor?.reference?.startsWith('Patient/'));
+      const status = !['booked', 'arrived', 'fulfilled'].includes(appointment.status as string)
+        ? ` (${appointment.status})`
+        : '';
+
+      return {
+        type: 'appointment',
+        appointment,
+        title: `${patientParticipant?.actor?.display} ${status}`,
+        start: new Date(appointment.start as string),
+        end: new Date(appointment.end as string),
+        resource: appointment,
+      };
+    });
+}

package/dist/examples/vintasend-medplum-example/src/pages/spaces/ChatInput.tsx

@@ -0,0 +1,91 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Paper, Textarea, Select, Button, Group, Stack } from '@mantine/core';
+import { IconSend } from '@tabler/icons-react';
+import type { JSX } from 'react';
+
+const MODELS = [
+  { value: 'gpt-5', label: 'GPT-5' },
+  { value: 'gpt-4o', label: 'GPT-4o' },
+  { value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
+];
+
+interface ChatInputProps {
+  input: string;
+  onInputChange: (value: string) => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  onSend: () => void;
+  loading: boolean;
+  selectedModel: string;
+  onModelChange: (value: string) => void;
+  backgroundColor?: string;
+}
+
+export function ChatInput({
+  input,
+  onInputChange,
+  onKeyDown,
+  onSend,
+  loading,
+  selectedModel,
+  onModelChange,
+  backgroundColor = '#fff',
+}: ChatInputProps): JSX.Element {
+  return (
+    <Paper p="md" radius="lg" withBorder style={{ backgroundColor }}>
+      <Stack gap="sm">
+        <Group gap="md" wrap="nowrap" align="flex-end">
+          <Textarea
+            placeholder="Ask, search, or make anything..."
+            value={input}
+            onChange={(e) => onInputChange(e.currentTarget.value)}
+            onKeyDown={onKeyDown}
+            disabled={loading}
+            autosize
+            minRows={1}
+            maxRows={5}
+            style={{ flex: 1 }}
+            styles={{
+              input: {
+                border: 'none',
+                backgroundColor: 'transparent',
+                fontSize: '15px',
+                padding: 0,
+                resize: 'none',
+              },
+            }}
+          />
+          <Button
+            aria-label="Send message"
+            radius="xl"
+            size="sm"
+            onClick={onSend}
+            disabled={loading || !input.trim()}
+            w="36px"
+            h="36px"
+            bg="#7c3aed"
+            p={0}
+          >
+            <IconSend size={18} />
+          </Button>
+        </Group>
+        <Select
+          size="xs"
+          data={MODELS}
+          value={selectedModel}
+          onChange={(value) => onModelChange(value ?? 'gpt-5')}
+          w="120px"
+          withCheckIcon={false}
+          fw={500}
+          pr="md"
+          styles={{
+            input: {
+              fontSize: '12px',
+              cursor: 'pointer',
+            },
+          }}
+        />
+      </Stack>
+    </Paper>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/pages/spaces/SpacesPage.module.css

@@ -0,0 +1,6 @@
+.container {
+  height: calc(100vh - var(--app-shell-header-height, 0));
+  background-color: var(--mantine-color-gray-0);
+  display: flex;
+  overflow: hidden;
+}

package/dist/examples/vintasend-medplum-example/src/pages/spaces/SpacesPage.test.tsx

@@ -0,0 +1,102 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { MedplumProvider } from '@medplum/react';
+import { MockClient } from '@medplum/mock';
+import { MemoryRouter, Route, Routes } from 'react-router';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { SpacesPage } from './SpacesPage';
+import type { Communication } from '@medplum/fhirtypes';
+
+const mockTopic: Communication = {
+  resourceType: 'Communication',
+  id: 'topic-123',
+  status: 'in-progress',
+  identifier: [
+    {
+      system: 'http://medplum.com/ai-message',
+      value: 'ai-message-topic',
+    },
+  ],
+  topic: {
+    text: 'Test conversation',
+  },
+};
+
+const mockProfile = {
+  resourceType: 'Practitioner' as const,
+  id: 'practitioner-123',
+};
+
+describe('SpacesPage', () => {
+  let medplum: MockClient;
+
+  beforeEach(() => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+
+    Element.prototype.scrollTo = vi.fn();
+    medplum.getProfile = vi.fn().mockResolvedValue(mockProfile);
+    medplum.searchResources = vi.fn().mockResolvedValue([]);
+    medplum.readReference = vi.fn().mockResolvedValue(mockTopic);
+  });
+
+  const setup = (initialEntries = ['/Spaces']): ReturnType<typeof render> => {
+    return render(
+      <MemoryRouter initialEntries={initialEntries}>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <Routes>
+              <Route path="/Spaces" element={<SpacesPage />}>
+                <Route index element={<SpacesPage />} />
+                <Route path="Communication" element={<SpacesPage />} />
+                <Route path="Communication/:topicId" element={<SpacesPage />} />
+              </Route>
+            </Routes>
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  test('renders SpaceInbox with no topicId when at root', async () => {
+    await act(async () => {
+      setup(['/Spaces']);
+    });
+
+    expect(screen.getByText('How can I help you today?')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Ask, search, or make anything...')).toBeInTheDocument();
+  });
+
+  test('renders SpaceInbox with topic reference from URL', async () => {
+    await act(async () => {
+      setup(['/Spaces/Communication/123']);
+    });
+
+    await waitFor(() => {
+      expect(medplum.readReference).toHaveBeenCalledWith({ reference: 'Communication/123' });
+    });
+  });
+
+  test('generates correct link for selected item', async () => {
+    medplum.searchResources = vi.fn().mockImplementation((resourceType: string, query: any) => {
+      if (query?.identifier === 'http://medplum.com/ai-message|ai-message-topic') {
+        return Promise.resolve([mockTopic]);
+      }
+      return Promise.resolve([]);
+    });
+
+    await act(async () => {
+      setup(['/Spaces']);
+    });
+
+    // Sidebar is open by default, so we don't need to click history button
+    await waitFor(() => {
+      expect(screen.getByText('Test conversation')).toBeInTheDocument();
+    });
+
+    const link = screen.getByText('Test conversation').closest('a');
+    expect(link).toHaveAttribute('href', '/Spaces/Communication/topic-123');
+  });
+});

package/dist/examples/vintasend-medplum-example/src/pages/spaces/SpacesPage.tsx

@@ -0,0 +1,44 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import type { Communication, Reference } from '@medplum/fhirtypes';
+import type { JSX } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import classes from './SpacesPage.module.css';
+import { SpacesInbox } from '../../components/spaces/SpacesInbox';
+
+/**
+ * SpacesPage component that handles routing for AI conversation spaces.
+ * Follows the same pattern as MessagesPage by delegating all logic to SpaceInbox.
+ * @returns A React component that displays the AI conversation interface.
+ */
+export function SpacesPage(): JSX.Element {
+  const { topicId } = useParams();
+  const navigate = useNavigate();
+
+  const handleNewTopic = (newTopic: Communication): void => {
+    navigate(`/Spaces/Communication/${newTopic.id}`)?.catch(console.error);
+  };
+
+  const onSelectedItem = (selectedTopic: Communication): string => {
+    return `/Spaces/Communication/${selectedTopic.id}`;
+  };
+
+  const topicRef: Reference<Communication> | undefined = topicId
+    ? { reference: `Communication/${topicId}` }
+    : undefined;
+
+  const handleNewConversation = (): void => {
+    navigate('/Spaces/Communication')?.catch(console.error);
+  };
+
+  return (
+    <div className={classes.container}>
+      <SpacesInbox
+        topic={topicRef}
+        onNewTopic={handleNewTopic}
+        onSelectedItem={onSelectedItem}
+        onAdd={handleNewConversation}
+      />
+    </div>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/pages/tasks/TasksPage.module.css

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  height: calc(100vh - var(--app-shell-header-height, 0));
+  overflow: hidden;
+}