improvement(emcn): share one emails/domains chip input across share and deploy modals

Extracts the emails chip lifecycle out of ChipModalField type='emails' into a
standalone ChipEmailsInput, and points both the file share modal and the deploy
modal's chat tab at it instead of their hand-rolled TagInput wiring.

- add ChipEmailsInput (dedupe, normalize, format gate, paste, per-chip errors)
  with an allowDomains opt-in for bare @domain.tld entries
- share modal and deploy modal chat tab now use it; drop both hand-rolled
  add/remove/validate implementations and the dead emailError state
- move the shared allowlist policy into validateAllowlistEntry
- drop the "Add specific emails or whole domains" hint text
- give OutputSelect a size prop; the deploy modal chat tab uses the 30px chip
  trigger so it lines up with the Title field above it
- drop overflow-y-auto from the chat deploy form, which was promoting overflow-x
  to auto and rendering a stray horizontal scrollbar

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/share-modal/share-modal.tsx

@@ -9,16 +9,14 @@ import {
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  TagInput,
-  type TagItem,
 } from '@sim/emcn'
 import { Send } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import { GeneratedPasswordInput } from '@/components/ui'
 import type { ShareAuthType, ShareRecord } from '@/lib/api/contracts/public-shares'
 import { isSsoEnabled } from '@/lib/core/config/env-flags'
 import { getBaseUrl } from '@/lib/core/utils/urls'
-import { quickValidateEmail } from '@/lib/messaging/email/validation'
+import { validateAllowlistEntry } from '@/lib/messaging/email/validation'
 import { useFileShare, useUpsertFileShare } from '@/hooks/queries/public-shares'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 
@@ -42,17 +40,14 @@ const ACCESS_LABELS: Record<AccessMode, string> = {
   sso: 'SSO',
 }
 
+/** Stable identity so the emails field's reconcile effect no-ops while unset. */
+const EMPTY_EMAILS: string[] = []
+
 function savedMode(share: ShareRecord | null): AccessMode {
   if (!share?.isActive) return 'private'
   return share.authType
 }
 
-/** True when an entry is a valid email or an `@domain` pattern. */
-function isValidEmailEntry(value: string): boolean {
-  const normalized = value.trim().toLowerCase()
-  return normalized.startsWith('@') || quickValidateEmail(normalized).isValid
-}
-
 export function ShareModal({
   open,
   onOpenChange,
@@ -83,7 +78,7 @@ export function ShareModal({
   const [draftEmails, setDraftEmails] = useState<string[] | null>(null)
   const effectiveMode = draftMode ?? savedAccessMode
   const effectiveActive = effectiveMode !== 'private'
-  const effectiveEmails = draftEmails ?? saved?.allowedEmails ?? []
+  const effectiveEmails = draftEmails ?? saved?.allowedEmails ?? EMPTY_EMAILS
 
   // Org access-control may restrict which auth modes are allowed (`null` = all).
   // The route is the source of truth; this just hides disallowed options.
@@ -167,19 +162,6 @@ export function ShareModal({
     })
   }
 
-  const addEmail = (value: string): boolean => {
-    const normalized = value.trim().toLowerCase()
-    if (!normalized || effectiveEmails.includes(normalized) || !isValidEmailEntry(normalized)) {
-      return false
-    }
-    setDraftEmails([...effectiveEmails, normalized])
-    return true
-  }
-
-  const removeEmail = (_value: string, index: number) => {
-    setDraftEmails(effectiveEmails.filter((_, i) => i !== index))
-  }
-
   const accessHint = (() => {
     if (modeDisallowed) return 'This sharing method is disabled by an administrator.'
     if (enableBlockedByPolicy)
@@ -196,8 +178,6 @@ export function ShareModal({
       : 'Anyone with the link can view and download this file.'
   })()
 
-  const emailItems: TagItem[] = effectiveEmails.map((value) => ({ value, isValid: true }))
-
   return (
     <ChipModal open={open} onOpenChange={handleClose} size='sm' srTitle={`Share ${fileName}`}>
       <ChipModalHeader icon={Send} onClose={handleClose}>
@@ -236,18 +216,15 @@ export function ShareModal({
         ) : null}
         {effectiveMode === 'email' || effectiveMode === 'sso' ? (
           <ChipModalField
-            type='custom'
+            type='emails'
             title='Allowed emails'
-            hint='Add specific emails or whole domains (@example.com).'
-          >
-            <TagInput
-              items={emailItems}
-              onAdd={addEmail}
-              onRemove={removeEmail}
-              placeholder='Enter emails or domains'
-              placeholderWithTags='Add email'
-            />
-          </ChipModalField>
+            value={effectiveEmails}
+            onChange={setDraftEmails}
+            validate={validateAllowlistEntry}
+            allowDomains
+            placeholder='Enter emails or domains'
+            placeholderWithTags='Add email or domain'
+          />
         ) : null}
         {effectiveMode !== 'private' && shareUrl ? (
           <ChipModalField type='copy' title='Link' value={shareUrl} copyLabel='Copy link' />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx

@@ -2,7 +2,7 @@
 
 import type React from 'react'
 import { useMemo } from 'react'
-import { Combobox, type ComboboxOptionGroup, cn } from '@sim/emcn'
+import { ChipCombobox, Combobox, type ComboboxOptionGroup, cn } from '@sim/emcn'
 import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
 import {
@@ -64,6 +64,12 @@ interface OutputSelectProps {
   align?: 'start' | 'end' | 'center'
   /** Maximum height of the dropdown content in pixels */
   maxHeight?: number
+  /**
+   * Trigger chrome. `'sm'` is the compact pill used in inline toolbars;
+   * `'md'` is the 30px chip field, for stacking with `ChipInput` in a form.
+   * @default 'sm'
+   */
+  size?: 'sm' | 'md'
   /** Additional class names to apply to the combobox trigger */
   className?: string
 }
@@ -87,6 +93,7 @@ export function OutputSelect({
   valueMode = 'id',
   align = 'start',
   maxHeight = 200,
+  size = 'sm',
   className,
 }: OutputSelectProps) {
   const blocks = useWorkflowStore((state) => state.blocks)
@@ -299,10 +306,12 @@ export function OutputSelect({
       .filter((v): v is string => v !== null)
   }, [selectedOutputs, workflowOutputs, valueMode])
 
+  const Trigger = size === 'md' ? ChipCombobox : Combobox
+
   return (
-    <Combobox
-      size='sm'
-      className={cn('!py-0.5 w-fit min-w-[100px] rounded-md px-2.5', className)}
+    <Trigger
+      size={size}
+      className={cn('min-w-[100px]', size === 'sm' && '!py-0.5 w-fit rounded-md px-2.5', className)}
       groups={comboboxGroups}
       options={[]}
       multiSelect

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx

@@ -5,26 +5,24 @@ import {
   ButtonGroup,
   ButtonGroupItem,
   ChipConfirmModal,
+  ChipEmailsInput,
   ChipInput,
   cn,
   Input,
   Label,
   Loader,
   Skeleton,
   Switch,
-  TagInput,
-  type TagItem,
   Textarea,
   Tooltip,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { normalizeEmail } from '@sim/utils/string'
 import { AlertTriangle, Check } from 'lucide-react'
 import { GeneratedPasswordInput } from '@/components/ui'
 import { isSsoEnabled } from '@/lib/core/config/env-flags'
 import { getBaseUrl, getEmailDomain } from '@/lib/core/utils/urls'
-import { quickValidateEmail } from '@/lib/messaging/email/validation'
+import { validateAllowlistEntry } from '@/lib/messaging/email/validation'
 import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
 import {
   type AuthType,
@@ -339,7 +337,7 @@ export function ChatDeploy({
         id='chat-deploy-form'
         ref={formRef}
         onSubmit={handleSubmit}
-        className='-mx-1 space-y-4 overflow-y-auto px-1'
+        className='-mx-1 space-y-4 px-1'
       >
         {errors.general && (
           <div className='flex items-center gap-2 rounded-md border border-[color-mix(in_srgb,var(--text-error)_20%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] px-3 py-2 text-[var(--text-error)] text-small'>
@@ -388,6 +386,7 @@ export function ChatDeploy({
               onOutputSelect={(values) => updateField('selectedOutputBlocks', values)}
               placeholder='Select which block outputs to use'
               disabled={chatSubmitting}
+              size='md'
               className='w-full'
             />
             {errors.outputBlocks && (
@@ -693,13 +692,8 @@ function AuthSelector({
   hasExistingPassword = false,
   error,
 }: AuthSelectorProps) {
-  const [emailError, setEmailError] = useState('')
-  const [invalidEmailItems, setInvalidEmailItems] = useState<TagItem[]>([])
   const revealPasswordMutation = useRevealChatPassword()
 
-  const emailsRef = useRef(emails)
-  const invalidEmailItemsRef = useRef(invalidEmailItems)
-
   /**
    * Editing or regenerating the password clears a failed reveal. The mutation
    * only drops its error on the next attempt, so it would otherwise keep
@@ -710,60 +704,6 @@ function AuthSelector({
     onPasswordChange(value)
   }
 
-  useEffect(() => {
-    emailsRef.current = emails
-  }, [emails])
-
-  const addEmail = (email: string): boolean => {
-    if (!email.trim()) return false
-
-    const normalized = normalizeEmail(email)
-    const isDomainPattern = normalized.startsWith('@')
-    const validation = quickValidateEmail(normalized)
-    const isValid = validation.isValid || isDomainPattern
-
-    if (
-      emailsRef.current.includes(normalized) ||
-      invalidEmailItemsRef.current.some((item) => item.value === normalized)
-    ) {
-      return false
-    }
-
-    if (isValid) {
-      setEmailError('')
-      emailsRef.current = [...emailsRef.current, normalized]
-      onEmailsChange(emailsRef.current)
-    } else {
-      invalidEmailItemsRef.current = [
-        ...invalidEmailItemsRef.current,
-        { value: normalized, isValid, error: validation.reason ?? 'Invalid email format' },
-      ]
-      setInvalidEmailItems(invalidEmailItemsRef.current)
-    }
-
-    return isValid
-  }
-
-  const emailItems = [
-    ...emails.map((email) => ({ value: email, isValid: true })),
-    ...invalidEmailItems,
-  ]
-
-  const handleRemoveEmailItem = (_value: string, index: number) => {
-    const itemToRemove = emailItems[index]
-    if (!itemToRemove) return
-
-    if (itemToRemove.isValid) {
-      emailsRef.current = emailsRef.current.filter((e) => e !== itemToRemove.value)
-      onEmailsChange(emailsRef.current)
-    } else {
-      invalidEmailItemsRef.current = invalidEmailItemsRef.current.filter(
-        (item) => item.value !== itemToRemove.value
-      )
-      setInvalidEmailItems(invalidEmailItemsRef.current)
-    }
-  }
-
   const { config: permissionConfig } = usePermissionConfig()
   const allowedAuthTypes = permissionConfig.allowedChatDeployAuthTypes
 
@@ -835,22 +775,15 @@ function AuthSelector({
           <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             {authType === 'email' ? 'Allowed emails' : 'Allowed SSO emails'}
           </Label>
-          <TagInput
-            items={emailItems}
-            onAdd={(value) => addEmail(value)}
-            onRemove={handleRemoveEmailItem}
-            placeholder='Enter emails or domains (@example.com)'
-            placeholderWithTags='Add email'
+          <ChipEmailsInput
+            value={emails}
+            onChange={onEmailsChange}
+            validate={validateAllowlistEntry}
+            allowDomains
+            placeholder='Enter emails or domains'
+            placeholderWithTags='Add email or domain'
             disabled={disabled}
           />
-          {emailError && (
-            <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{emailError}</p>
-          )}
-          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
-            {authType === 'email'
-              ? 'Add specific emails or entire domains (@example.com)'
-              : 'Add emails or domains that can access via SSO'}
-          </p>
         </div>
       )}
 

apps/sim/lib/messaging/email/validation.ts

@@ -133,3 +133,17 @@ export function quickValidateEmail(email: string): EmailValidationResult {
     checks,
   }
 }
+
+/**
+ * App-level policy for a single access-allowlist entry, applied on top of the
+ * syntax gate in `ChipEmailsInput`. A bare `@domain` entry carries no local
+ * part, so the address-level checks (disposable providers, suspicious patterns)
+ * only apply to full addresses.
+ *
+ * @returns the rejection reason, or `null` when the entry is accepted.
+ */
+export function validateAllowlistEntry(entry: string): string | null {
+  if (entry.startsWith('@')) return null
+  const result = quickValidateEmail(entry)
+  return result.isValid ? null : (result.reason ?? 'Invalid email')
+}