@tellescope/react-components 1.249.1 → 1.250.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.249.1",
+  "version": "1.250.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -51,13 +51,14 @@
     "@reduxjs/toolkit": "1.9.0",
     "@stripe/react-stripe-js": "2.9.0",
     "@stripe/stripe-js": "1.52.1",
-    "@tellescope/constants": "1.249.1",
-    "@tellescope/sdk": "1.249.1",
-    "@tellescope/types-client": "1.249.1",
-    "@tellescope/types-models": "1.249.1",
-    "@tellescope/types-utilities": "1.249.1",
-    "@tellescope/utilities": "1.249.1",
-    "@tellescope/validation": "1.249.1",
+    "@tellescope/constants": "1.250.0",
+    "@tellescope/sdk": "1.250.0",
+    "@tellescope/types-client": "1.250.0",
+    "@tellescope/types-models": "1.250.0",
+    "@tellescope/types-utilities": "1.250.0",
+    "@tellescope/utilities": "1.250.0",
+    "@tellescope/validation": "1.250.0",
+    "@twilio/video-processors": "3.2.0",
     "css-to-react-native": "3.0.0",
     "draft-js": "0.11.7",
     "draftjs-to-html": "0.9.1",
@@ -76,7 +77,7 @@
     "react-native-video": "5.2.1",
     "react-redux": "7.2.9",
     "react-window": "1.8.9",
-    "twilio-video": "^2.28.1",
+    "twilio-video": "2.35.0",
     "yup": "0.32.11"
   },
   "peerDependencies": {
@@ -84,7 +85,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "23480776738c31e1d56244ce6c23d9abe032e15a",
+  "gitHead": "dc1bcee546276fd38231a5ac672efd21761fe8e8",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -272,22 +272,38 @@ export const QuestionForField = ({
         )
         : field.type === 'file' ? (
           <File field={field} value={file.blobs?.[0] as any} onChange={onAddFile as any} form={form}
+            enduserId={enduserId}
             existingFileName={
               value.answer.type === 'file'
                 ? value.answer.value?.name
                 : ''
-            } 
+            }
             handleFileUpload={handleFileUpload} uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
+            onSelectExistingFile={v => onFieldChange(v as any, field.id)}
           />
         )
         : field.type === 'files' ? (
           <Files field={field} value={file.blobs as any} onChange={onAddFile as any} form={form}
+            enduserId={enduserId}
             // existingFileName={
             //   value.answer.type === 'files'
             //     ? value.answer.value?.name
             //     : ''
-            // } 
+            // }
             handleFileUpload={handleFileUpload} uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
+            existingSelections={
+              value.answer.type === 'files' && Array.isArray(value.answer.value)
+                ? value.answer.value.filter(av => !file.blobs?.some(b => b.name === av.name))
+                : undefined
+            }
+            onSelectExistingFile={v => {
+              const current = value.answer.type === 'files' && Array.isArray(value.answer.value) ? value.answer.value : []
+              onFieldChange([...current, v] as any, field.id)
+            }}
+            onRemoveExistingFile={secureName => {
+              const current = value.answer.type === 'files' && Array.isArray(value.answer.value) ? value.answer.value : []
+              onFieldChange(current.filter(f => f.secureName !== secureName) as any, field.id)
+            }}
           />
         )
         : field.type === 'dateString' ? (

package/src/Forms/forms.v2.tsx

@@ -49,7 +49,7 @@ const TellescopeFormContainerWithThemeV2: typeof TellescopeFormContainerV2 = ({
 
   return (
     <Flex flex={1} column alignItems="center" style={{
-      backgroundColor: finalBgColor,
+      backgroundColor: hideBg ? 'transparent' : finalBgColor,
       overflow: 'auto',
       boxSizing: 'border-box',
       paddingTop: window.innerWidth < 600 ? 20 : 40,
@@ -282,22 +282,38 @@ export const QuestionForField = ({
         )
         : field.type === 'file' ? (
           <File field={field} value={file.blobs?.[0] as any} onChange={onAddFile as any} form={form}
+            enduserId={enduserId}
             existingFileName={
               value.answer.type === 'file'
                 ? value.answer.value?.name
                 : ''
-            } 
+            }
             handleFileUpload={handleFileUpload} uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
+            onSelectExistingFile={v => onFieldChange(v as any, field.id)}
           />
         )
         : field.type === 'files' ? (
           <Files field={field} value={file.blobs as any} onChange={onAddFile as any} form={form}
+            enduserId={enduserId}
             // existingFileName={
             //   value.answer.type === 'files'
             //     ? value.answer.value?.name
             //     : ''
-            // } 
+            // }
             handleFileUpload={handleFileUpload} uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
+            existingSelections={
+              value.answer.type === 'files' && Array.isArray(value.answer.value)
+                ? value.answer.value.filter(av => !file.blobs?.some(b => b.name === av.name))
+                : undefined
+            }
+            onSelectExistingFile={v => {
+              const current = value.answer.type === 'files' && Array.isArray(value.answer.value) ? value.answer.value : []
+              onFieldChange([...current, v] as any, field.id)
+            }}
+            onRemoveExistingFile={secureName => {
+              const current = value.answer.type === 'files' && Array.isArray(value.answer.value) ? value.answer.value : []
+              onFieldChange(current.filter(f => f.secureName !== secureName) as any, field.id)
+            }}
           />
         )
         : field.type === 'dateString' ? (

package/src/Forms/hooks.tsx

@@ -374,9 +374,10 @@ interface UseTellescopeFormOptions {
   groupId?: string,
   groupInstance?: string,
   groupPosition?: number,
+  getEnduserAISummary?: () => string | undefined,
 }
 
-const OrganizationThemeContext = createContext(null as any as { 
+const OrganizationThemeContext = createContext(null as any as {
   theme: OrganizationTheme, 
   setTheme: (theme: OrganizationTheme) => void,
   businessId?: string,
@@ -558,7 +559,7 @@ const shouldCallout = (field: FormField | undefined, value: FormResponseValueAns
 
 export type Response = FormResponseValue & { touched: boolean, includeInSubmit: boolean, field: FormField }
 export type FileResponse = { fieldId: string, fieldTitle: string, blobs?: FileBlob[] }
-export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogicValue, customization, carePlanId, calendarEventId, context, ga4measurementId, rootResponseId, parentResponseId, accessCode, existingResponses, automationStepId, enduserId, formResponseId, fields, isInternalNote, formTitle, submitRedirectURL, enduser, groupId, groupInstance, groupPosition, startingFieldId }: UseTellescopeFormOptions) => {
+export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogicValue, customization, carePlanId, calendarEventId, context, ga4measurementId, rootResponseId, parentResponseId, accessCode, existingResponses, automationStepId, enduserId, formResponseId, fields, isInternalNote, formTitle, submitRedirectURL, enduser, groupId, groupInstance, groupPosition, startingFieldId, getEnduserAISummary }: UseTellescopeFormOptions) => {
   const { amPm, hoursAmPm, minutes } = get_time_values(new Date())
 
   const root = useTreeForFormFields(fields)
@@ -1504,6 +1505,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
             customerId,
             productIds: responsesToSubmit.flatMap(r => r.field?.options?.productIds ?? []),
             utm: get_utm_params(),
+            ...(getEnduserAISummary ? { enduserAISummary: getEnduserAISummary() } : {}),
           })
 
           // do actual redirect later to prevent popup
@@ -1678,33 +1680,68 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       autoAdvanceRef.current = true
     }
 
-    setResponses(rs => rs.map(r => r.fieldId !== fieldId ? r : ({
-      ...r,
-      touched,
-      isCalledOut: shouldCallout(fields?.find(f => f?.id === fieldId), value),
-      isHighlightedOnTimeline: fields?.find(f => f?.id === fieldId)?.highlightOnTimeline,
-      // description fields are never "active", so the normal updateInclusion effect won't fire for them
-      // explicitly mark as included when they receive a non-empty string value (historical data snapshot)
-      ...(field?.type === 'description' && typeof value === 'string' && value ? { includeInSubmit: true } : {}),
-      answer: {
-        ...r.answer,
-        value: value as any,
-      },
-      // keep consistent with initialize existing responses
-      computedValueKey: (
-        field?.intakeField === 'height'
-          ? 'Height'
-      : field?.intakeField === 'weight' && typeof value === 'number'
-          ? 'Weight'
-      : field?.intakeField === 'dateOfBirth' && r.answer.type === 'dateString'
-          ? 'Date of Birth'
-      : field?.intakeField === 'gender' && (r.answer.type === 'Dropdown' || r.answer.type === 'multiple_choice')
-          ? 'Gender'
-      : field?.intakeField === 'Address' && r.answer.type === 'Address'
-          ? 'State'
-          : undefined
-      )
-    })))
+    setResponses(rs => {
+      const updated = rs.map(r => r.fieldId !== fieldId ? r : ({
+        ...r,
+        touched,
+        isCalledOut: shouldCallout(fields?.find(f => f?.id === fieldId), value),
+        isHighlightedOnTimeline: fields?.find(f => f?.id === fieldId)?.highlightOnTimeline,
+        // description fields are never "active", so the normal updateInclusion effect won't fire for them
+        // explicitly mark as included when they receive a non-empty string value (historical data snapshot)
+        ...(field?.type === 'description' && typeof value === 'string' && value ? { includeInSubmit: true } : {}),
+        answer: {
+          ...r.answer,
+          value: value as any,
+        },
+        // keep consistent with initialize existing responses
+        computedValueKey: (
+          field?.intakeField === 'height'
+            ? 'Height' as const
+        : field?.intakeField === 'weight' && typeof value === 'number'
+            ? 'Weight' as const
+        : field?.intakeField === 'dateOfBirth' && r.answer.type === 'dateString'
+            ? 'Date of Birth' as const
+        : field?.intakeField === 'gender' && (r.answer.type === 'Dropdown' || r.answer.type === 'multiple_choice')
+            ? 'Gender' as const
+        : field?.intakeField === 'Address' && r.answer.type === 'Address'
+            ? 'State' as const
+            : undefined
+        )
+      }))
+
+      // Re-apply filter_stale_choices to every other multiple_choice/Dropdown response now that an upstream
+      // answer may have changed which option-level showCondition results have flipped. Without this cascade,
+      // selections made earlier in the session for options that are no longer visible would silently persist
+      // and pass validation since the stored array remains non-empty.
+      return updated.map(r => {
+        if (r.fieldId === fieldId) return r
+        if (r.answer.type !== 'multiple_choice' && r.answer.type !== 'Dropdown') return r
+        const otherField = fields.find(f => f.id === r.fieldId)
+        if (!otherField) return r
+        if (otherField.type !== 'multiple_choice' && otherField.type !== 'Dropdown') return r
+
+        const prior = r.answer.value as string[] | undefined
+        if (!Array.isArray(prior)) return r
+
+        const filtered = filter_stale_choices(prior, otherField, updated, enduser, form)
+        if (!Array.isArray(filtered)) return r
+
+        // shallow array comparison — preserve reference if unchanged so memoized derivations don't churn
+        if (filtered.length === prior.length && filtered.every((v, i) => v === prior[i])) {
+          return r
+        }
+
+        const isEmpty = filtered.length === 0
+        return {
+          ...r,
+          ...(isEmpty ? { touched: false, includeInSubmit: false } : {}),
+          answer: {
+            ...r.answer,
+            value: filtered as any,
+          },
+        }
+      })
+    })
 
     // ensure stripe payment is stored as saved immediately
     const saveField = fields.find(f => f.id === fieldId && (f.type === 'Stripe' || f.type === 'Appointment Booking'))
@@ -1746,7 +1783,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       })
       .catch(console.error)
     }
-  }, [fields])
+  }, [fields, enduser, form])
 
   const onAddFile = useCallback((blobs?: FileBlob | FileBlob[], fieldId=activeField.value.id) => {
     setSelectedFiles(fs => fs.map(f => f.fieldId !== fieldId ? f : ({

package/src/Forms/inputs.tsx

@@ -5,15 +5,15 @@ import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
 import { CANVAS_TITLE, BRIDGE_TITLE, CANDID_TITLE, EMOTII_TITLE, INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
 import { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, format_stripe_subscription_interval, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, object_is_empty, replace_enduser_template_values, responses_satisfy_conditions, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
-import { Address, DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, FormFieldOptionDetails, Pharmacy, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
+import { Address, DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseAnswerFileValue, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, FormFieldOptionDetails, Pharmacy, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
 import LinearProgress from '@mui/material/LinearProgress';
 
 import DatePicker from "react-datepicker";
 import { datepickerCSS } from "./css/react-datepicker" // avoids build issue with RN
-import { CancelIcon, FileBlob, IconButton, LabeledIconButton, LoadingButton, Styled, form_display_text_for_language, isDateString, useProducts, useResolvedSession } from ".."
-import { CalendarEvent, DatabaseRecord, Form, FormField } from "@tellescope/types-client"
+import { CancelIcon, FileBlob, IconButton, LabeledIconButton, LoadingButton, Styled, form_display_text_for_language, isDateString, useFiles, useProducts, useResolvedSession, value_is_loaded } from ".."
+import { CalendarEvent, DatabaseRecord, File as TellescopeFile, Form, FormField } from "@tellescope/types-client"
 import { css } from '@emotion/css'
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
@@ -650,12 +650,18 @@ export const InsuranceInput = ({ field, onDatabaseSelect, value, onChange, form,
       <Grid item xs={12} sm={6}>
       <Autocomplete freeSolo={!field.options?.requirePredefinedInsurer} options={payers.map(p => p.name)}
         value={value?.payerName || ''}
-        onChange={(e, v) => onChange({ 
-          ...value, 
-          payerName: v || '',
-          payerId: payers.find(p => p.name === v)?.id || '',
-          payerType: payers.find(p => p.name === v)?.type || '',
-        }, field.id)}  
+        onChange={(e, v) => {
+          const matched = payers.find(p => p.name === v)
+          if (matched?.databaseRecord) {
+            onDatabaseSelect?.([matched.databaseRecord])
+          }
+          onChange({
+            ...value,
+            payerName: v || '',
+            payerId: matched?.id || '',
+            payerType: matched?.type || '',
+          }, field.id)
+        }}
         onInputChange={
           field.options?.requirePredefinedInsurer 
             ? (e, v) => { if (v) { setQuery(v) } }
@@ -2246,7 +2252,79 @@ export async function convertHEIC (file: FileBlob | string){
 };
 
 const value_is_image = (f?: { type?: string })=> f?.type?.includes('image')
-export const FileInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles, form }: FormInputProps<'file'> & { existingFileName?: string }) => {
+
+const fileMatchesValidTypes = (file: { type?: string }, validFileTypes?: string[]) => {
+  if (!validFileTypes?.length) return true
+  if (!file.type) return false
+  return !!validFileTypes.find(t => file.type!.includes(t.toLowerCase()))
+}
+
+export const ExistingFilePicker = ({ enduserId, excludedSecureNames, validFileTypes, onSelect, form, label }: {
+  enduserId?: string,
+  excludedSecureNames?: string[],
+  validFileTypes?: string[],
+  onSelect: (file: TellescopeFile) => void,
+  form?: Form,
+  label?: string,
+}) => {
+  const session = useResolvedSession()
+  const isEnduserSession = session.type === 'enduser'
+
+  const [, { filtered: getFiltered }] = useFiles({
+    loadFilter: { enduserId },
+    dontFetch: !enduserId || isEnduserSession,
+  })
+  const filesLoading = getFiltered(e => (!!enduserId) && (e.enduserId === enduserId))
+
+  const filtered = useMemo(() => {
+    if (!value_is_loaded(filesLoading)) return []
+    return filesLoading.value.filter(f => (
+      !!f.confirmedAt
+      && fileMatchesValidTypes(f, validFileTypes)
+      && !excludedSecureNames?.includes(f.secureName)
+    ))
+  }, [filesLoading, validFileTypes, excludedSecureNames])
+
+  // Only available in User (staff) sessions — endusers must upload.
+  if (isEnduserSession) return null
+  if (!enduserId) return null
+  if (filtered.length === 0) return null
+
+  return (
+    <Grid item sx={{ mt: 1 }}>
+      <Autocomplete<TellescopeFile>
+        size="small"
+        options={filtered}
+        getOptionLabel={f => f.name}
+        renderOption={(props, option) => (
+          <li {...props} key={option.id}>
+            <Grid container direction="column">
+              <Typography sx={{ fontSize: 14 }}>{option.name}</Typography>
+              {option.timestamp && (
+                <Typography sx={{ fontSize: 12, color: '#666' }}>
+                  {new Date(option.timestamp).toLocaleDateString()}
+                </Typography>
+              )}
+            </Grid>
+          </li>
+        )}
+        onChange={(_, value) => {
+          if (value) onSelect(value)
+        }}
+        value={null}
+        blurOnSelect
+        clearOnBlur
+        renderInput={params => (
+          <TextField {...params}
+            label={label || form_display_text_for_language(form, "Or select an existing file from this patient")}
+          />
+        )}
+      />
+    </Grid>
+  )
+}
+
+export const FileInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles, form, enduserId, onSelectExistingFile }: FormInputProps<'file'> & { existingFileName?: string, onSelectExistingFile?: (value: FormResponseAnswerFileValue) => void }) => {
   const [error, setError] = useState('')
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
     onDrop: useCallback(
@@ -2341,17 +2419,28 @@ export const FileInput = ({ value, onChange, field, existingFileName, uploadingF
     </Grid>
     
     <Grid item alignSelf="center" sx={{ mt: 0.5 }}>
-      {(!value?.name && existingFileName) && 
+      {(!value?.name && existingFileName) &&
         <Typography>{existingFileName} selected!</Typography>
       }
     </Grid>
-    {error && 
+    {!value && onSelectExistingFile && (
+      <ExistingFilePicker
+        enduserId={enduserId}
+        validFileTypes={field.options?.validFileTypes}
+        form={form}
+        onSelect={file => {
+          setError('')
+          onSelectExistingFile({ secureName: file.secureName, name: file.name, type: file.type })
+        }}
+      />
+    )}
+    {error &&
       <Grid item alignSelf="center" sx={{ mt: 0.5 }}>
         <Typography color="error">{error}</Typography>
       </Grid>
     }
     </Grid>
-  ) 
+  )
 }
 
 export const safe_create_url = (file: any) => {
@@ -2363,8 +2452,15 @@ export const safe_create_url = (file: any) => {
   }
 }
 
-export const FilesInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles, form }: FormInputProps<'files'> & { existingFileName?: string }) => {
+export const FilesInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles, form, enduserId, existingSelections, onSelectExistingFile, onRemoveExistingFile }: FormInputProps<'files'> & { existingFileName?: string, existingSelections?: FormResponseAnswerFileValue[], onSelectExistingFile?: (value: FormResponseAnswerFileValue) => void, onRemoveExistingFile?: (secureName: string) => void }) => {
   const [error, setError] = useState('')
+
+  const safeExistingSelections = Array.isArray(existingSelections) ? existingSelections : undefined
+
+  const excludedSecureNames = useMemo(() => (
+    safeExistingSelections?.map(s => s.secureName)
+  ), [safeExistingSelections])
+
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
     onDrop: useCallback(
       async acceptedFiles => {
@@ -2458,8 +2554,8 @@ export const FilesInput = ({ value, onChange, field, existingFileName, uploading
 
           {file.type?.includes('image') && previews[i] &&
             <Grid item>
-               <img 
-                src={previews[i]!} 
+               <img
+                src={previews[i]!}
                 style={{ maxWidth: '45%', maxHeight: 80, height: '100%' }}
               />
             </Grid>
@@ -2476,15 +2572,44 @@ export const FilesInput = ({ value, onChange, field, existingFileName, uploading
       </Grid>
       </Grid>
     ))}
+    {safeExistingSelections?.map((selection, i) => (
+      <Grid item key={`existing-${selection.secureName}-${i}`} sx={{ mt: 0.5 }}>
+        <Grid container alignItems="center" justifyContent={"space-between"} wrap="nowrap">
+          <Grid item>
+            <Typography sx={{ mr: 1 }}>{selection.name}</Typography>
+          </Grid>
+          {onRemoveExistingFile &&
+            <Grid item>
+              <LabeledIconButton label={form_display_text_for_language(form, "Remove")}
+                Icon={Delete}
+                onClick={() => onRemoveExistingFile(selection.secureName)}
+              />
+            </Grid>
+          }
+        </Grid>
+      </Grid>
+    ))}
     </Grid>
+    {onSelectExistingFile && (
+      <ExistingFilePicker
+        enduserId={enduserId}
+        excludedSecureNames={excludedSecureNames}
+        validFileTypes={field.options?.validFileTypes}
+        form={form}
+        onSelect={file => {
+          setError('')
+          onSelectExistingFile({ secureName: file.secureName, name: file.name, type: file.type })
+        }}
+      />
+    )}
 
-    {error && 
+    {error &&
       <Grid item alignSelf="center" sx={{ mt: 0.5 }}>
         <Typography color="error">{error}</Typography>
       </Grid>
     }
     </Grid>
-  ) 
+  )
 }
 
 const multipleChoiceItemSx: SxProps = {

package/src/Forms/inputs.v2.tsx

@@ -5,7 +5,7 @@ import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
 import { CANVAS_TITLE, EMOTII_TITLE, INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
 import { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, responses_satisfy_conditions, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
-import { Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
+import { Enduser, EnduserRelationship, FormResponseAnswerFileValue, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
 import LinearProgress from '@mui/material/LinearProgress';
@@ -24,6 +24,7 @@ import LanguageIcon from '@mui/icons-material/Language';
 import { CheckCircleOutline, Delete, Edit, UploadFile } from "@mui/icons-material"
 import { WYSIWYG } from "./wysiwyg"
 import { useConditionalChoices, Response, dateFromOffsetMs } from "./hooks"
+import { ExistingFilePicker } from "./inputs"
 
 export const LanguageSelect = ({ value, ...props }: { value: string, onChange: (s: string) => void}) => (
   <Grid container alignItems="center" justifyContent={"center"} wrap="nowrap" spacing={1}>
@@ -930,7 +931,8 @@ export async function convertHEIC (file: FileBlob | string){
 };
 
 const value_is_image = (f?: { type?: string })=> f?.type?.includes('image')
-export const FileInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles, form }: FormInputProps<'file'> & { existingFileName?: string }) => {
+
+export const FileInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles, form, enduserId, onSelectExistingFile }: FormInputProps<'file'> & { existingFileName?: string, onSelectExistingFile?: (value: FormResponseAnswerFileValue) => void }) => {
   const [error, setError] = useState('')
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
     onDrop: useCallback(
@@ -1029,17 +1031,28 @@ export const FileInput = ({ value, onChange, field, existingFileName, uploadingF
     </Grid>
     
     <Grid item alignSelf="center" sx={{ mt: 0.5 }}>
-      {(!value?.name && existingFileName) && 
+      {(!value?.name && existingFileName) &&
         <Typography>{existingFileName} selected!</Typography>
       }
     </Grid>
-    {error && 
+    {!value && onSelectExistingFile && (
+      <ExistingFilePicker
+        enduserId={enduserId}
+        validFileTypes={field.options?.validFileTypes}
+        form={form}
+        onSelect={file => {
+          setError('')
+          onSelectExistingFile({ secureName: file.secureName, name: file.name, type: file.type })
+        }}
+      />
+    )}
+    {error &&
       <Grid item alignSelf="center" sx={{ mt: 0.5 }}>
         <Typography color="error">{error}</Typography>
       </Grid>
     }
     </Grid>
-  ) 
+  )
 }
 
 export const safe_create_url = (file: any) => {
@@ -1051,8 +1064,15 @@ export const safe_create_url = (file: any) => {
   }
 }
 
-export const FilesInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles, form }: FormInputProps<'files'> & { existingFileName?: string }) => {
+export const FilesInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles, form, enduserId, existingSelections, onSelectExistingFile, onRemoveExistingFile }: FormInputProps<'files'> & { existingFileName?: string, existingSelections?: FormResponseAnswerFileValue[], onSelectExistingFile?: (value: FormResponseAnswerFileValue) => void, onRemoveExistingFile?: (secureName: string) => void }) => {
   const [error, setError] = useState('')
+
+  const safeExistingSelections = Array.isArray(existingSelections) ? existingSelections : undefined
+
+  const excludedSecureNames = useMemo(() => (
+    safeExistingSelections?.map(s => s.secureName)
+  ), [safeExistingSelections])
+
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
     onDrop: useCallback(
       async acceptedFiles => {
@@ -1164,15 +1184,45 @@ export const FilesInput = ({ value, onChange, field, existingFileName, uploading
       </Grid>
       </Grid>
     ))}
+    {existingSelections?.map((selection, i) => (
+      <Grid item key={`existing-${selection.secureName}-${i}`} sx={{ mt: 0.5 }}>
+        <Grid container alignItems="center" justifyContent={"space-between"} wrap="nowrap">
+          <Grid item>
+            <Typography sx={{ mr: 1 }}>{selection.name}</Typography>
+          </Grid>
+          {onRemoveExistingFile &&
+            <Grid item>
+              <LabeledIconButton label={form_display_text_for_language(form, "Remove")}
+                Icon={Delete}
+                onClick={() => onRemoveExistingFile(selection.secureName)}
+              />
+            </Grid>
+          }
+        </Grid>
+      </Grid>
+    ))}
     </Grid>
 
-    {error && 
+    {onSelectExistingFile && (
+      <ExistingFilePicker
+        enduserId={enduserId}
+        excludedSecureNames={excludedSecureNames}
+        validFileTypes={field.options?.validFileTypes}
+        form={form}
+        onSelect={file => {
+          setError('')
+          onSelectExistingFile({ secureName: file.secureName, name: file.name, type: file.type })
+        }}
+      />
+    )}
+
+    {error &&
       <Grid item alignSelf="center" sx={{ mt: 0.5 }}>
         <Typography color="error">{error}</Typography>
       </Grid>
     }
     </Grid>
-  ) 
+  )
 }
 
 export const MultipleChoiceInput = ({ field, form, value: _value, onChange, responses, enduser }: FormInputProps<'multiple_choice'>) => {