vintasend 0.4.0 → 0.4.7

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

@@ -0,0 +1,230 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { ActionIcon, Checkbox, CloseButton, Group, Popover, Stack, Text, TextInput } from '@mantine/core';
+import { useDebouncedCallback, useDisclosure } from '@mantine/hooks';
+import { createReference, getReferenceString } from '@medplum/core';
+import type { Patient, Practitioner, Reference } from '@medplum/fhirtypes';
+import { ResourceAvatar, useMedplum, useMedplumProfile } from '@medplum/react';
+import { IconUsers } from '@tabler/icons-react';
+import { useEffect, useMemo, useState } from 'react';
+import type { JSX } from 'react';
+import classes from './ParticipantFilter.module.css';
+import { showErrorNotification } from '../../utils/notifications';
+
+interface ParticipantFilterProps {
+  selectedParticipants: Reference<Patient | Practitioner>[];
+  onFilterChange: (participants: Reference<Patient | Practitioner>[]) => void;
+}
+
+export function ParticipantFilter(props: ParticipantFilterProps): JSX.Element {
+  const { selectedParticipants, onFilterChange } = props;
+  const [opened, { open, close }] = useDisclosure(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<Reference<Patient | Practitioner>[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [additionalParticipants, setAdditionalParticipants] = useState<Reference<Patient | Practitioner>[]>([]);
+  const medplum = useMedplum();
+  const profile = useMedplumProfile();
+
+  // Current user participant - always shown at top
+  const currentUserParticipant = useMemo((): Reference<Patient | Practitioner> | undefined => {
+    if (!profile) {
+      return undefined;
+    }
+    return createReference(profile) as Reference<Patient | Practitioner>;
+  }, [profile]);
+
+  // Filter additional participants (excluding current user)
+  useEffect(() => {
+    const currentUserRef = currentUserParticipant?.reference;
+    const filtered = selectedParticipants.filter((p) => p.reference !== currentUserRef);
+    setAdditionalParticipants(filtered);
+  }, [selectedParticipants, currentUserParticipant]);
+
+  const debouncedSearch = useDebouncedCallback(async (query: string): Promise<void> => {
+    if (!query.trim()) {
+      setSearchResults([]);
+      return;
+    }
+
+    setIsSearching(true);
+    try {
+      const bundle = await medplum.search('Patient', {
+        _type: 'Patient,Practitioner',
+        name: query,
+        _count: '10',
+      });
+
+      const currentUserRef = currentUserParticipant?.reference;
+
+      const results = (bundle.entry ?? [])
+        .map((entry) => entry.resource as Patient | Practitioner)
+        .filter((resource): resource is Patient | Practitioner => {
+          if (!resource) {
+            return false;
+          }
+          const refString = getReferenceString(resource);
+          return !!refString && refString !== currentUserRef;
+        })
+        .map((resource) => createReference(resource));
+
+      setSearchResults(results);
+    } catch (error) {
+      showErrorNotification(error);
+      setSearchResults([]);
+    } finally {
+      setIsSearching(false);
+    }
+  }, 300);
+
+  useEffect(() => {
+    debouncedSearch(searchQuery);
+  }, [searchQuery, debouncedSearch]);
+
+  const isSelected = (participant: Reference<Patient | Practitioner>): boolean => {
+    return selectedParticipants.some((p) => p.reference === participant.reference);
+  };
+
+  const toggleParticipant = (participant: Reference<Patient | Practitioner>): void => {
+    const newParticipants = isSelected(participant)
+      ? selectedParticipants.filter((p) => p.reference !== participant.reference)
+      : [...selectedParticipants, participant];
+
+    onFilterChange(newParticipants);
+  };
+
+  const removeParticipant = (participant: Reference<Patient | Practitioner>): void => {
+    const newParticipants = selectedParticipants.filter((p) => p.reference !== participant.reference);
+    onFilterChange(newParticipants);
+  };
+
+  // Build display list: current user first, then additional selected, then search results
+  const displayParticipants = useMemo(() => {
+    const result: Reference<Patient | Practitioner>[] = [];
+
+    for (const p of additionalParticipants) {
+      if (!result.some((r) => r.reference === p.reference)) {
+        result.push(p);
+      }
+    }
+
+    if (searchQuery.trim() && searchResults.length > 0) {
+      for (const p of searchResults) {
+        if (currentUserParticipant?.reference === p.reference) {
+          continue;
+        }
+        if (!result.some((r) => r.reference === p.reference)) {
+          result.push(p);
+        }
+      }
+    }
+
+    return result;
+  }, [additionalParticipants, searchQuery, searchResults, currentUserParticipant]);
+
+  const hasActiveFilter = selectedParticipants.length > 0;
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={(o) => !o && close()}
+      position="bottom-start"
+      width={360}
+      shadow="md"
+      withinPortal
+    >
+      <Popover.Target>
+        <ActionIcon
+          variant={hasActiveFilter ? 'filled' : 'light'}
+          color={hasActiveFilter ? 'blue' : 'gray'}
+          onClick={opened ? close : open}
+          radius="xl"
+          size="lg"
+        >
+          <IconUsers size={18} />
+        </ActionIcon>
+      </Popover.Target>
+
+      <Popover.Dropdown p="md">
+        <Stack gap="md">
+          <Text fw={600} size="sm">
+            Message Participants
+          </Text>
+
+          <TextInput
+            placeholder="Search for a Patient or Practitioner..."
+            value={searchQuery}
+            autoFocus
+            onChange={(e) => setSearchQuery(e.target.value)}
+            rightSection={searchQuery ? <CloseButton size="sm" onClick={() => setSearchQuery('')} /> : null}
+          />
+
+          <Stack gap="xs" mah={250} style={{ overflowY: 'auto' }}>
+            {currentUserParticipant && (
+              <ParticipantItem
+                participant={currentUserParticipant}
+                isSelected={isSelected(currentUserParticipant)}
+                isCurrentUser={true}
+                onToggle={() => toggleParticipant(currentUserParticipant)}
+              />
+            )}
+
+            {displayParticipants.map((participant) => (
+              <ParticipantItem
+                key={participant.reference}
+                participant={participant}
+                isSelected={isSelected(participant)}
+                isCurrentUser={false}
+                onToggle={() => toggleParticipant(participant)}
+                onRemove={isSelected(participant) ? () => removeParticipant(participant) : undefined}
+              />
+            ))}
+
+            {isSearching && (
+              <Text size="sm" c="dimmed" ta="center">
+                Searching...
+              </Text>
+            )}
+            {searchQuery.trim() && !isSearching && searchResults.length === 0 && (
+              <Text size="sm" c="dimmed" ta="center">
+                No results found
+              </Text>
+            )}
+          </Stack>
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
+
+interface ParticipantItemProps {
+  participant: Reference<Patient | Practitioner>;
+  isSelected: boolean;
+  isCurrentUser: boolean;
+  onToggle: () => void;
+  onRemove?: () => void;
+}
+
+function ParticipantItem(props: ParticipantItemProps): JSX.Element {
+  const { participant, isSelected, isCurrentUser, onToggle, onRemove } = props;
+
+  return (
+    <Group justify="space-between" wrap="nowrap" className={classes.participantItem}>
+      <Group gap="sm" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
+        <Checkbox checked={isSelected} onChange={onToggle} />
+        <ResourceAvatar value={participant} radius="xl" size={32} />
+        <Text size="sm" truncate style={{ flex: 1 }}>
+          {participant.display ?? participant.reference}
+          {isCurrentUser && (
+            <Text component="span" c="dimmed" size="sm">
+              {' '}
+              (you)
+            </Text>
+          )}
+        </Text>
+      </Group>
+      {onRemove && <CloseButton size="sm" onClick={onRemove} />}
+    </Group>
+  );
+}

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

@@ -0,0 +1,23 @@
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1;
+}
+
+.rightBorder {
+  border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-8));
+}
+
+.button {
+  height: 32px;
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-gray-8));
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-gray-4));
+  font-weight: 500;
+}
+
+.selected {
+  background-color: light-dark(var(--mantine-color-black), var(--mantine-color-gray-6));
+  color: light-dark(var(--mantine-color-white), var(--mantine-color-white));
+}