vintasend 0.4.0 → 0.4.7

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

@@ -0,0 +1,286 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Stack, Text, Box, ScrollArea, Group, ActionIcon, CloseButton, Avatar, ThemeIcon } from '@mantine/core';
+import type { JSX } from 'react';
+import { useState, useRef, useEffect } from 'react';
+import { useMedplum, useResource } from '@medplum/react';
+import { IconRobot, IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand, IconPlus } from '@tabler/icons-react';
+import { showErrorNotification } from '../../utils/notifications';
+import { ResourceBox } from './ResourceBox';
+import { ResourcePanel } from './ResourcePanel';
+import type { Message } from '../../types/spaces';
+import { loadConversationMessages } from '../../utils/spacePersistence';
+import { processMessage } from '../../utils/spaceMessaging';
+import { HistoryList } from './HistoryList';
+import { ChatInput } from '../../pages/spaces/ChatInput';
+import type { Communication, Reference } from '@medplum/fhirtypes';
+import classes from './SpacesInbox.module.css';
+import cx from 'clsx';
+
+interface SpaceInboxProps {
+  topic: Communication | Reference<Communication> | undefined;
+  onNewTopic: (topic: Communication) => void;
+  onSelectedItem: (topic: Communication) => string;
+  onAdd?: () => void;
+}
+
+export function SpacesInbox(props: SpaceInboxProps): JSX.Element {
+  const { topic: topicRef, onNewTopic, onSelectedItem, onAdd } = props;
+  const medplum = useMedplum();
+  const topic = useResource(topicRef);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [selectedModel, setSelectedModel] = useState('gpt-5');
+  const [hasStarted, setHasStarted] = useState(false);
+  const [currentFhirRequest, setCurrentFhirRequest] = useState<string | undefined>();
+  const [currentTopicId, setCurrentTopicId] = useState<string | undefined>(topic?.id);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [selectedResource, setSelectedResource] = useState<string | undefined>();
+  const scrollViewportRef = useRef<HTMLDivElement>(null);
+  const isSendingRef = useRef(false);
+
+  // Load conversation when topic changes
+  useEffect(() => {
+    const topicId = topic?.id;
+    if (topicId) {
+      if (isSendingRef.current) {
+        return;
+      }
+      const loadTopic = async (): Promise<void> => {
+        try {
+          setLoading(true);
+          const loadedMessages = await loadConversationMessages(medplum, topicId);
+          setMessages([...loadedMessages]);
+          setCurrentTopicId(topicId);
+          setHasStarted(true);
+          setSelectedResource(undefined);
+        } catch (error) {
+          showErrorNotification(error);
+        } finally {
+          setLoading(false);
+        }
+      };
+      loadTopic().catch(showErrorNotification);
+    } else {
+      setMessages([]);
+      setHasStarted(false);
+      setCurrentTopicId(undefined);
+      setSelectedResource(undefined);
+    }
+  }, [topic, medplum]);
+
+  useEffect(() => {
+    const viewport = scrollViewportRef.current;
+    if (viewport && hasStarted) {
+      viewport.scrollTo({
+        top: viewport.scrollHeight,
+        behavior: 'smooth',
+      });
+    }
+  }, [messages, hasStarted]);
+
+  const handleSelectTopic = async (selectedTopicId: string): Promise<void> => {
+    try {
+      setLoading(true);
+      const loadedMessages = await loadConversationMessages(medplum, selectedTopicId);
+      setMessages([...loadedMessages]);
+      setCurrentTopicId(selectedTopicId);
+      setHasStarted(true);
+      setSelectedResource(undefined);
+    } catch (error) {
+      showErrorNotification(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSend = async (): Promise<void> => {
+    if (!input.trim()) {
+      return;
+    }
+
+    const isFirstMessage = !hasStarted;
+    if (isFirstMessage) {
+      setHasStarted(true);
+    }
+
+    const userMessage: Message = { role: 'user', content: input };
+    const currentMessages = [...messages, userMessage];
+    setMessages(currentMessages);
+    setInput('');
+    setCurrentFhirRequest(undefined);
+    setLoading(true);
+    isSendingRef.current = true;
+
+    try {
+      const result = await processMessage({
+        medplum,
+        input,
+        userMessage,
+        currentMessages,
+        currentTopicId,
+        selectedModel,
+        isFirstMessage,
+        setCurrentTopicId,
+        setRefreshKey,
+        setCurrentFhirRequest,
+        onNewTopic,
+      });
+      setMessages(result.updatedMessages);
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      setMessages([...currentMessages, { role: 'assistant', content: `Error: ${errorMessage}` }]);
+    } finally {
+      isSendingRef.current = false;
+      setLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent): void => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend().catch((error) => showErrorNotification(error));
+    }
+  };
+
+  const visibleMessages = messages.filter(
+    (m) => m.role !== 'system' && m.role !== 'tool' && !(m.role === 'assistant' && m.tool_calls)
+  );
+
+  return (
+    <>
+      {/* Sidebar */}
+      <Box className={classes.sidebar} style={{ width: sidebarOpen ? 280 : 0, opacity: sidebarOpen ? 1 : 0 }}>
+        <div className={classes.sidebarHeader}>
+          <Text className={classes.sidebarTitle}>Conversations</Text>
+          <ActionIcon variant="subtle" color="gray" onClick={() => setSidebarOpen(false)}>
+            <IconLayoutSidebarLeftCollapse size={18} />
+          </ActionIcon>
+        </div>
+        <div className={classes.sidebarContent}>
+          <HistoryList
+            key={refreshKey}
+            currentTopicId={currentTopicId}
+            onSelectTopic={handleSelectTopic}
+            onSelectedItem={onSelectedItem}
+          />
+        </div>
+      </Box>
+
+      {/* Main Chat Area */}
+      <div className={classes.chatContainer}>
+        <div className={classes.chatHeader}>
+          <div>
+            {!sidebarOpen && (
+              <ActionIcon variant="subtle" color="gray" onClick={() => setSidebarOpen(true)} mr="md">
+                <IconLayoutSidebarLeftExpand size={16} />
+              </ActionIcon>
+            )}
+          </div>
+          {onAdd && (
+            <ActionIcon variant="subtle" color="gray" size="sm" onClick={onAdd} aria-label="New conversation">
+              <IconPlus size={16} />
+            </ActionIcon>
+          )}
+        </div>
+
+        <div className={classes.messagesArea}>
+          {!hasStarted ? (
+            <div className={classes.emptyState}>
+              <ThemeIcon size={64} radius="xl" variant="light" color="gray" className={classes.emptyStateIcon}>
+                <IconRobot size={32} />
+              </ThemeIcon>
+              <Text size="xl" fw={500} mb="sm">
+                How can I help you today?
+              </Text>
+              <Text c="dimmed" size="sm" maw={400}>
+                I can help you search for patients, create resources, or answer clinical questions.
+              </Text>
+            </div>
+          ) : (
+            <ScrollArea style={{ flex: 1 }} offsetScrollbars viewportRef={scrollViewportRef}>
+              <Stack gap="xl" p="xs">
+                {visibleMessages.map((message, index) => (
+                  <div
+                    key={index}
+                    className={cx(
+                      classes.messageWrapper,
+                      message.role === 'user' ? classes.userMessage : classes.assistantMessage
+                    )}
+                  >
+                    <Group align="flex-start" gap="sm" mb={4}>
+                      {message.role === 'assistant' && (
+                        <Avatar radius="xl" size="sm" color="blue">
+                          <IconRobot size={14} />
+                        </Avatar>
+                      )}
+                      <Text fw={600} size="sm" c="dimmed">
+                        {message.role === 'user' ? 'You' : 'AI Assistant'}
+                      </Text>
+                    </Group>
+                    <div className={classes.messageContent}>
+                      <Text style={{ whiteSpace: 'pre-wrap' }}>{message.content}</Text>
+                    </div>
+                    {message.resources && message.resources.length > 0 && (
+                      <Stack gap="xs" mt="sm" w={300} ml={message.role === 'assistant' ? 0 : 'auto'}>
+                        {message.resources.map((resourceRef, idx) => (
+                          <ResourceBox key={idx} resourceReference={resourceRef} onClick={setSelectedResource} />
+                        ))}
+                      </Stack>
+                    )}
+                  </div>
+                ))}
+                {loading && (
+                  <div className={cx(classes.messageWrapper, classes.assistantMessage)}>
+                    <Group align="center" gap="sm" wrap="nowrap">
+                      <Avatar radius="xl" size="sm" color="blue">
+                        <IconRobot size={14} />
+                      </Avatar>
+                      <Box style={{ flex: 1, minWidth: 0 }}>
+                        <Text size="sm" c="dimmed" fs="italic" truncate>
+                          {currentFhirRequest ? `Executing ${currentFhirRequest}...` : 'Thinking...'}
+                        </Text>
+                      </Box>
+                    </Group>
+                  </div>
+                )}
+              </Stack>
+            </ScrollArea>
+          )}
+        </div>
+
+        <div className={classes.inputArea}>
+          <div className={classes.inputWrapper}>
+            <ChatInput
+              input={input}
+              onInputChange={setInput}
+              onKeyDown={handleKeyDown}
+              onSend={handleSend}
+              loading={loading}
+              selectedModel={selectedModel}
+              onModelChange={setSelectedModel}
+              backgroundColor="transparent"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Resource Panel */}
+      {selectedResource && (
+        <div className={classes.resourcePanel}>
+          <div className={classes.resourceHeader}>
+            <Text fw={600} size="sm">
+              Resource Details
+            </Text>
+            <CloseButton onClick={() => setSelectedResource(undefined)} />
+          </div>
+          <ScrollArea style={{ flex: 1 }} p="md">
+            <ResourcePanel key={selectedResource} resource={{ reference: selectedResource }} />
+          </ScrollArea>
+        </div>
+      )}
+    </>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/tasks/NewTaskModal.tsx

@@ -0,0 +1,275 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Box, Button, Divider, Grid, Modal, Stack, Text, TextInput, Textarea } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { createReference, normalizeErrorString } from '@medplum/core';
+import type { CodeableConcept, Media, Patient, Practitioner, Reference, Task } from '@medplum/fhirtypes';
+import {
+  CodeableConceptInput,
+  CodeInput,
+  DateTimeInput,
+  ReferenceInput,
+  ResourceInput,
+  useMedplum,
+  useMedplumProfile,
+} from '@medplum/react';
+import { IconCircleCheck, IconCircleOff } from '@tabler/icons-react';
+import { useState } from 'react';
+import type { JSX } from 'react';
+import { TaskFileUpload } from './TaskFileUpload';
+import { TaskAttachmentList } from './TaskAttachmentList';
+import { TASK_ATTACHMENT_INPUT_TYPE } from '../../../lib/constants';
+
+export interface NewTaskModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onTaskCreated?: (task: Task) => void;
+}
+
+export function NewTaskModal(props: NewTaskModalProps): JSX.Element {
+  const { opened, onClose, onTaskCreated } = props;
+  const medplum = useMedplum();
+  const profile = useMedplumProfile();
+
+  const [title, setTitle] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+  const [intent, setIntent] = useState<string>('order');
+
+  const [status, setStatus] = useState<Task['status']>('draft');
+  const [priority, setPriority] = useState<string>('routine');
+  const [assignee, setAssignee] = useState<Reference<Practitioner> | undefined>();
+  const [dueDate, setDueDate] = useState<string | undefined>();
+  const [taskPatient, setTaskPatient] = useState<Reference<Patient> | undefined>();
+
+  const [taskCode, setTaskCode] = useState<CodeableConcept | undefined>();
+  const [performerType, setPerformerType] = useState<CodeableConcept | undefined>();
+
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [attachments, setAttachments] = useState<Media[]>([]);
+
+  const handleSubmit = async (): Promise<void> => {
+    if (!title.trim()) {
+      notifications.show({
+        color: 'red',
+        icon: <IconCircleOff />,
+        title: 'Validation Error',
+        message: 'Task title is required',
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const newTask: Task = {
+        resourceType: 'Task',
+        status: status,
+        intent: intent as Task['intent'],
+        priority: priority as Task['priority'],
+        code: taskCode || {
+          text: title,
+        },
+        description: description.trim() || undefined,
+        for: taskPatient,
+        authoredOn: new Date().toISOString(),
+        requester: profile ? createReference(profile) : undefined,
+        owner: assignee,
+        performerType: performerType ? [performerType] : undefined,
+        restriction: dueDate
+          ? {
+              period: {
+                end: dueDate,
+              },
+            }
+          : undefined,
+        // Add attachments to task.input
+        input: attachments.map((media) => ({
+          type: {
+            coding: [TASK_ATTACHMENT_INPUT_TYPE],
+            text: 'File Attachment',
+          },
+          valueReference: createReference(media),
+        })),
+      };
+
+      const createdTask = await medplum.createResource(newTask);
+
+      notifications.show({
+        icon: <IconCircleCheck />,
+        title: 'Success',
+        message: 'Task created successfully',
+      });
+
+      onTaskCreated?.(createdTask);
+      handleClose();
+    } catch (error) {
+      notifications.show({
+        color: 'red',
+        icon: <IconCircleOff />,
+        title: 'Error',
+        message: normalizeErrorString(error),
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = (): void => {
+    setTitle('');
+    setDescription('');
+    setIntent('order');
+    setStatus('draft');
+    setPriority('routine');
+    setAssignee(undefined);
+    setDueDate(undefined);
+    setTaskCode(undefined);
+    setPerformerType(undefined);
+    setTaskPatient(undefined);
+    setAttachments([]);
+    setIsSubmitting(false);
+    onClose();
+  };
+
+  const handleFileUploaded = (media: Media): void => {
+    setAttachments((prev) => [...prev, media]);
+  };
+
+  const handleRemoveAttachment = (mediaId: string): void => {
+    setAttachments((prev) => prev.filter((m) => m.id !== mediaId));
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={handleClose}
+      size="xl"
+      title="Create New Task"
+      styles={{
+        body: {
+          padding: 0,
+          height: '70vh',
+        },
+      }}
+    >
+      <Stack h="100%" justify="space-between" gap={0}>
+        <Box flex={1} miw={0}>
+          <Grid p="md" h="100%">
+            <Grid.Col span={6} pr="lg">
+              <Stack gap="md" h="100%">
+                <Box>
+                  <Stack gap="sm">
+                    <TextInput
+                      label="Title"
+                      placeholder="Enter task title"
+                      value={title}
+                      onChange={(event) => setTitle(event.currentTarget.value)}
+                      required
+                      size="md"
+                    />
+
+                    <Textarea
+                      label="Description"
+                      placeholder="Enter task description (optional)"
+                      value={description}
+                      onChange={(event) => setDescription(event.currentTarget.value)}
+                      minRows={4}
+                      autosize
+                      maxRows={8}
+                    />
+
+                    <Box>
+                      <Text size="sm" fw={500} mb="xs">
+                        Attachments
+                      </Text>
+                      <Stack gap="sm">
+                        <TaskFileUpload onFileUploaded={handleFileUploaded} disabled={isSubmitting} />
+                        {attachments.length > 0 && (
+                          <TaskAttachmentList attachments={attachments} onRemove={handleRemoveAttachment} />
+                        )}
+                      </Stack>
+                    </Box>
+                  </Stack>
+                </Box>
+              </Stack>
+            </Grid.Col>
+
+            <Grid.Col span={6} pl="lg">
+              <Stack gap="md" h="100%">
+                <Box>
+                  <Stack gap="sm">
+                    <CodeInput
+                      name="status"
+                      label="Status"
+                      binding="http://hl7.org/fhir/ValueSet/task-status"
+                      maxValues={1}
+                      defaultValue={status}
+                      onChange={(value) => setStatus((value as Task['status']) || 'draft')}
+                      required
+                    />
+
+                    <DateTimeInput
+                      name="dueDate"
+                      label="Due Date"
+                      placeholder="Select due date (optional)"
+                      defaultValue={dueDate}
+                      onChange={setDueDate}
+                    />
+
+                    <CodeInput
+                      name="priority"
+                      label="Priority"
+                      binding="http://hl7.org/fhir/ValueSet/request-priority"
+                      maxValues={1}
+                      defaultValue={priority}
+                      onChange={(value) => setPriority(value || 'routine')}
+                    />
+
+                    <ResourceInput<Patient>
+                      resourceType="Patient"
+                      name="patient"
+                      label="Patient"
+                      placeholder="Select patient"
+                      defaultValue={taskPatient}
+                      onChange={(value: Patient | undefined) =>
+                        setTaskPatient(value ? createReference(value) : undefined)
+                      }
+                    />
+
+                    <Box>
+                      <Text size="sm" fw={500} mb="xs">
+                        Assignee
+                      </Text>
+                      <ReferenceInput
+                        name="assignee"
+                        targetTypes={['Practitioner', 'Organization']}
+                        placeholder="Select assignee (optional)"
+                        onChange={(value) => setAssignee(value as Reference<Practitioner>)}
+                      />
+                    </Box>
+
+                    <CodeableConceptInput
+                      name="performerType"
+                      label="Performer Type"
+                      placeholder="Select performer type (optional)"
+                      binding="http://hl7.org/fhir/ValueSet/performer-role"
+                      maxValues={1}
+                      onChange={(value) => setPerformerType(value as CodeableConcept)}
+                      path={'Task.performerType'}
+                    />
+                  </Stack>
+                </Box>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+        </Box>
+
+        <Stack p="md">
+          <Divider />
+          <Button variant="filled" w="100%" onClick={handleSubmit} loading={isSubmitting}>
+            Create Task
+          </Button>
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/tasks/TaskAttachmentList.tsx

@@ -0,0 +1,132 @@
+import { useMedplum } from '@medplum/react';
+import type { Media } from '@medplum/fhirtypes';
+import { Badge, Group, ActionIcon, Text, Stack, Paper, Tooltip } from '@mantine/core';
+import { IconDownload, IconX, IconFile, IconFileText, IconPhoto } from '@tabler/icons-react';
+import type { JSX } from 'react';
+
+export interface TaskAttachmentListProps {
+  attachments: Media[];
+  onRemove?: (mediaId: string) => void;
+  readOnly?: boolean;
+}
+
+/**
+ * Displays a list of file attachments for a task.
+ * Allows downloading and optionally removing attachments.
+ */
+export function TaskAttachmentList({ attachments, onRemove, readOnly = false }: TaskAttachmentListProps): JSX.Element {
+  const medplum = useMedplum();
+
+  if (attachments.length === 0) {
+    return (
+      <Text size="sm" color="dimmed">
+        No attachments
+      </Text>
+    );
+  }
+
+  const getFileIcon = (contentType?: string): JSX.Element => {
+    if (!contentType) {
+      return <IconFile size={20} />;
+    }
+
+    if (contentType.startsWith('image/')) {
+      return <IconPhoto size={20} />;
+    }
+
+    if (contentType.includes('pdf') || contentType.includes('document') || contentType.includes('text')) {
+      return <IconFileText size={20} />;
+    }
+
+    return <IconFile size={20} />;
+  };
+
+  const formatFileSize = (url?: string): string => {
+    // In a real implementation, you might fetch the binary to get the actual size
+    // For now, we'll just return a placeholder
+    return 'Unknown size';
+  };
+
+  const handleDownload = async (media: Media): Promise<void> => {
+    if (!media.content?.url) {
+      return;
+    }
+
+    try {
+      // Extract Binary ID from the URL (format: "Binary/{id}")
+      const binaryId = media.content.url.split('/')[1];
+      const binary = await medplum.readResource('Binary', binaryId);
+
+      // Create a download link using Binary resource URL
+      const url = `${medplum.getBaseUrl()}fhir/R4/Binary/${binaryId}`;
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = media.content.title || 'download';
+      link.target = '_blank';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (error) {
+      console.error('Failed to download file:', error);
+    }
+  };
+
+  const handleRemove = (mediaId: string): void => {
+    if (onRemove) {
+      onRemove(mediaId);
+    }
+  };
+
+  return (
+    <Stack gap="xs">
+      {attachments.map((media) => (
+        <Paper key={media.id} p="sm" withBorder>
+          <Group justify="space-between">
+            <Group gap="sm" style={{ flex: 1, minWidth: 0 }}>
+              {getFileIcon(media.content?.contentType)}
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <Text size="sm" fw={500} truncate="end" title={media.content?.title || 'Untitled'}>
+                  {media.content?.title || 'Untitled'}
+                </Text>
+                <Group gap="xs">
+                  <Badge size="xs" variant="outline">
+                    {media.content?.contentType || 'Unknown type'}
+                  </Badge>
+                  <Text size="xs" color="dimmed">
+                    {formatFileSize(media.content?.url)}
+                  </Text>
+                </Group>
+              </div>
+            </Group>
+
+            <Group gap="xs" style={{ flexShrink: 0 }}>
+              <Tooltip label="Download file">
+                <ActionIcon
+                  variant="subtle"
+                  color="blue"
+                  onClick={() => handleDownload(media)}
+                  aria-label="Download file"
+                >
+                  <IconDownload size={18} />
+                </ActionIcon>
+              </Tooltip>
+
+              {!readOnly && onRemove && (
+                <Tooltip label="Remove attachment">
+                  <ActionIcon
+                    variant="subtle"
+                    color="red"
+                    onClick={() => handleRemove(media.id as string)}
+                    aria-label="Remove attachment"
+                  >
+                    <IconX size={18} />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+            </Group>
+          </Group>
+        </Paper>
+      ))}
+    </Stack>
+  );
+}