Fix: Make thread_id nullable

src/components/contact/ContactForm.tsx

@@ -244,11 +244,11 @@ export function ContactForm() {
 
       {/* Message */}
       <div className="space-y-2">
-        <Label htmlFor="message">Message *</Label>
+        <Label htmlFor="message">Message * (minimum 20 characters)</Label>
         <Textarea
           id="message"
           {...register('message')}
-          placeholder="Please provide details about your inquiry..."
+          placeholder="Please provide details about your inquiry (minimum 20 characters)..."
           rows={6}
           disabled={isSubmitting}
           className={errors.message ? 'border-destructive' : ''}
@@ -257,8 +257,15 @@ export function ContactForm() {
           {errors.message && (
             <p className="text-sm text-destructive">{errors.message.message}</p>
           )}
-          <p className="text-sm text-muted-foreground ml-auto">
+          <p className={`text-sm ml-auto ${
+            (watch('message')?.length || 0) < 20 
+              ? 'text-destructive font-medium' 
+              : 'text-muted-foreground'
+          }`}>
             {watch('message')?.length || 0} / 2000
+            {(watch('message')?.length || 0) < 20 && 
+              ` (${20 - (watch('message')?.length || 0)} more needed)`
+            }
           </p>
         </div>
       </div>
@@ -284,8 +291,15 @@ export function ContactForm() {
       <Button
         type="submit"
         size="lg"
-        disabled={isSubmitting || !captchaToken}
+        disabled={isSubmitting || !captchaToken || (watch('message')?.length || 0) < 20}
         className="w-full"
+        title={
+          !captchaToken 
+            ? 'Please complete the CAPTCHA' 
+            : (watch('message')?.length || 0) < 20 
+            ? `Message must be at least 20 characters (currently ${watch('message')?.length || 0})`
+            : ''
+        }
       >
         {isSubmitting ? (
           <>