feat: implement recipients autosuggestions (#1923)

packages/ui/components/recipient/recipient-autocomplete-input.tsx

@@ -0,0 +1,106 @@
+import React, { useRef, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { PopoverAnchor } from '@radix-ui/react-popover';
+
+import { Popover, PopoverContent } from '@documenso/ui/primitives/popover';
+
+import { Command, CommandGroup, CommandItem } from '../../primitives/command';
+import { Input } from '../../primitives/input';
+
+export type RecipientAutoCompleteOption = {
+  email: string;
+  name: string | null;
+};
+
+type RecipientAutoCompleteInputProps = {
+  type: 'email' | 'text';
+  value: string;
+  placeholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  options: RecipientAutoCompleteOption[];
+  onSelect: (option: RecipientAutoCompleteOption) => void;
+  onSearchQueryChange: (query: string) => void;
+};
+
+type CombinedProps = RecipientAutoCompleteInputProps &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof RecipientAutoCompleteInputProps>;
+
+export const RecipientAutoCompleteInput = ({
+  value,
+  placeholder,
+  disabled,
+  loading,
+  onSearchQueryChange,
+  onSelect,
+  options = [],
+  onChange: _onChange,
+  ...props
+}: CombinedProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onValueChange = (value: string) => {
+    setIsOpen(!!value.length);
+    onSearchQueryChange(value);
+  };
+
+  const handleSelectItem = (option: RecipientAutoCompleteOption) => {
+    setIsOpen(false);
+    onSelect(option);
+  };
+
+  return (
+    <Command>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverAnchor asChild>
+          <Input
+            ref={inputRef}
+            className="w-full"
+            placeholder={placeholder}
+            value={value}
+            disabled={disabled}
+            onChange={(e) => onValueChange(e.target.value)}
+            {...props}
+          />
+        </PopoverAnchor>
+
+        <PopoverContent
+          align="start"
+          className="w-full p-0"
+          onOpenAutoFocus={(e) => {
+            e.preventDefault();
+          }}
+        >
+          {/* Not using <CommandEmpty /> here due to some weird behaviour */}
+          {options.length === 0 && (
+            <div className="px-2 py-1.5 text-sm">
+              {loading ? (
+                <Trans>Loading suggestions...</Trans>
+              ) : (
+                <Trans>No suggestions found</Trans>
+              )}
+            </div>
+          )}
+
+          {options.length > 0 && (
+            <CommandGroup className="max-h-[250px] overflow-y-auto">
+              {options.map((option, index) => (
+                <CommandItem
+                  key={`${index}-${option.email}`}
+                  value={`${option.email}`}
+                  className="cursor-pointer"
+                  onSelect={() => handleSelectItem(option)}
+                >
+                  {option.name} ({option.email})
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )}
+        </PopoverContent>
+      </Popover>
+    </Command>
+  );
+};

packages/ui/primitives/command.tsx

@@ -65,6 +65,27 @@ const CommandInput = React.forwardRef<
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
+const CommandTextInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div cmdk-input-wrapper="">
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'bg-background border-input ring-offset-background placeholder:text-muted-foreground/40 focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+        {
+          'ring-2 !ring-red-500 transition-all': props['aria-invalid'],
+        },
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandTextInput.displayName = CommandPrimitive.Input.displayName;
+
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
@@ -147,6 +168,7 @@ export {
   Command,
   CommandDialog,
   CommandInput,
+  CommandTextInput,
   CommandList,
   CommandEmpty,
   CommandGroup,

packages/ui/primitives/document-flow/add-signers.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
 
 import type { DropResult, SensorAPI } from '@hello-pangea/dnd';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
@@ -15,11 +15,13 @@ import { prop, sortBy } from 'remeda';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
 import { canRecipientBeModified as utilCanRecipientBeModified } from '@documenso/lib/utils/recipients';
+import { trpc } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
@@ -29,6 +31,8 @@ import {
   DocumentReadOnlyFields,
   mapFieldsWithRecipients,
 } from '../../components/document/document-read-only-fields';
+import type { RecipientAutoCompleteOption } from '../../components/recipient/recipient-autocomplete-input';
+import { RecipientAutoCompleteInput } from '../../components/recipient/recipient-autocomplete-input';
 import { Button } from '../button';
 import { Checkbox } from '../checkbox';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
@@ -75,6 +79,10 @@ export const AddSignersFormPartial = ({
   const { remaining } = useLimits();
   const { user } = useSession();
 
+  const [recipientSearchQuery, setRecipientSearchQuery] = useState('');
+
+  const debouncedRecipientSearchQuery = useDebouncedValue(recipientSearchQuery, 500);
+
   const initialId = useId();
   const $sensorApi = useRef<SensorAPI | null>(null);
 
@@ -82,6 +90,17 @@ export const AddSignersFormPartial = ({
 
   const organisation = useCurrentOrganisation();
 
+  const { data: recipientSuggestionsData, isLoading } = trpc.recipient.suggestions.find.useQuery(
+    {
+      query: debouncedRecipientSearchQuery,
+    },
+    {
+      enabled: debouncedRecipientSearchQuery.length > 1,
+    },
+  );
+
+  const recipientSuggestions = recipientSuggestionsData?.results || [];
+
   const defaultRecipients = [
     {
       formId: initialId,
@@ -286,10 +305,12 @@ export const AddSignersFormPartial = ({
     }
   };
 
-  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && event.target instanceof HTMLInputElement) {
-      onAddSigner();
-    }
+  const handleRecipientAutoCompleteSelect = (
+    index: number,
+    suggestion: RecipientAutoCompleteOption,
+  ) => {
+    setValue(`signers.${index}.email`, suggestion.email);
+    setValue(`signers.${index}.name`, suggestion.name || '');
   };
 
   const onDragEnd = useCallback(
@@ -679,17 +700,26 @@ export const AddSignersFormPartial = ({
                                     )}
 
                                     <FormControl>
-                                      <Input
+                                      <RecipientAutoCompleteInput
                                         type="email"
                                         placeholder={_(msg`Email`)}
-                                        {...field}
+                                        value={field.value}
                                         disabled={
                                           snapshot.isDragging ||
                                           isSubmitting ||
                                           !canRecipientBeModified(signer.nativeId)
                                         }
+                                        options={recipientSuggestions}
+                                        onSelect={(suggestion) =>
+                                          handleRecipientAutoCompleteSelect(index, suggestion)
+                                        }
+                                        onSearchQueryChange={(query) => {
+                                          console.log('onSearchQueryChange', query);
+                                          field.onChange(query);
+                                          setRecipientSearchQuery(query);
+                                        }}
+                                        loading={isLoading}
                                         data-testid="signer-email-input"
-                                        onKeyDown={onKeyDown}
                                         maxLength={254}
                                         onBlur={handleAutoSave}
                                       />
@@ -720,7 +750,8 @@ export const AddSignersFormPartial = ({
                                     )}
 
                                     <FormControl>
-                                      <Input
+                                      <RecipientAutoCompleteInput
+                                        type="text"
                                         placeholder={_(msg`Name`)}
                                         {...field}
                                         disabled={
@@ -728,7 +759,15 @@ export const AddSignersFormPartial = ({
                                           isSubmitting ||
                                           !canRecipientBeModified(signer.nativeId)
                                         }
-                                        onKeyDown={onKeyDown}
+                                        options={recipientSuggestions}
+                                        onSelect={(suggestion) =>
+                                          handleRecipientAutoCompleteSelect(index, suggestion)
+                                        }
+                                        onSearchQueryChange={(query) => {
+                                          field.onChange(query);
+                                          setRecipientSearchQuery(query);
+                                        }}
+                                        loading={isLoading}
                                         maxLength={255}
                                         onBlur={handleAutoSave}
                                       />

packages/ui/primitives/popover.tsx

@@ -8,6 +8,8 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -91,4 +93,4 @@ const PopoverHover = ({ trigger, children, contentProps, side = 'top' }: Popover
   );
 };
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverHover };
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent, PopoverHover };