Function MessageForm

components/message-form.tsx:43–276

({
  selectedContactEmail,
  groups,
  contacts,
  account,
  domain,
  onClose,
}: NewMessageProps)

}

export function MessageForm({
  selectedContactEmail,
  groups,
  contacts,
  account,
  domain,
  onClose,
}: NewMessageProps) {
  const supabase = createClient()
  const router = useRouter()
  const [subject, setSubject] = useState("")
  const [body, setBody] = useState("")
  const [selectedGroups, setSelectedGroups] = useState<Group[]>([])
  const [isSendingEmail, setIsSendingEmail] = useState(false)
  const subjectInputRef = useRef<HTMLInputElement>(null)
  const [recipients, setRecipients] = useState<Recipient[]>([])

  const customComponents = {
    MultiValue: ({ children, removeProps, ...props }: any) => {
      const isEmail = "isEmail" in props.data && props.data.isEmail
      return (
        <Badge
          className="flex items-center gap-1 m-1"
          style={{
            backgroundColor: isEmail ? "gray" : props.data.color,
            color: "white",
          }}
        >
          {children}
          <span {...removeProps} className="cursor-pointer hover:opacity-75">
            <X size={14} />
          </span>
        </Badge>
      )
    },
  }

  const handleKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === "Tab" && !event.shiftKey) {
      event.preventDefault()
      subjectInputRef.current?.focus()
    }
  }

  const handleRecipientChange = (newValue: any, actionMeta: any) => {
    if (actionMeta.action === "create-option") {
      const newOption = newValue[newValue.length - 1]
      if (isValidEmail(newOption.value)) {
        setRecipients([
          ...newValue.slice(0, -1),
          { ...newOption, isEmail: true },
        ])
      } else {
        // Optionally, show an error message for invalid email
        toast({
          variant: "destructive",
          description: `Invalid email address: ${newOption.value}`,
        })