From f0ac4a14def2ef6732b169b60b68c84c02f19e8b Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Tue, 2 Dec 2025 09:34:28 -0600
Subject: [PATCH] Collapse Customer Data Upload into accordion to reduce visual
 prominence
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The upload section had more prominence than Audience Brief and Research
Objective, causing users to focus there first. Now collapsed by default
with "(Optional)" label to de-emphasize relative to primary inputs.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../ai-recruiter/AIRecruiterForm.tsx          | 157 +++++++++---------
 1 file changed, 82 insertions(+), 75 deletions(-)

diff --git a/src/components/ai-recruiter/AIRecruiterForm.tsx b/src/components/ai-recruiter/AIRecruiterForm.tsx
index ca5fe834..232a0f18 100644
--- a/src/components/ai-recruiter/AIRecruiterForm.tsx
+++ b/src/components/ai-recruiter/AIRecruiterForm.tsx
@@ -239,84 +239,91 @@ export default function AIRecruiterForm({ onSubmit, isGenerating }: AIRecruiterF
           </div>
           
           <div className="space-y-6">
-            <div className="space-y-2">
-              {/* Custom Label with Tooltip */}
-              <h3 className="text-lg font-semibold text-foreground flex items-center gap-1.5">
-                Customer Data Upload
-                <FieldTooltip
-                  content="Additional information about your target audience improves the accuracy of the personas generated. You can upload anything from segmentations to transcripts or even existing pen portraits"
-                />
-              </h3>
-              <p className="text-muted-foreground">
-                Upload existing customer data to create more realistic and accurate synthetic personas. This helps the AI understand your target audience better.
-              </p>
+            <Accordion type="single" collapsible className="w-full">
+              <AccordionItem value="customer-data-upload" className="border-none">
+                <AccordionTrigger className="text-lg font-semibold hover:no-underline py-0">
+                  <span className="flex items-center gap-1.5">
+                    Customer Data Upload (Optional)
+                    <FieldTooltip
+                      content="Additional information about your target audience improves the accuracy of the personas generated. You can upload anything from segmentations to transcripts or even existing pen portraits"
+                    />
+                  </span>
+                </AccordionTrigger>
+                <AccordionContent className="space-y-6 pt-4">
+                  <div className="space-y-2">
+                    <p className="text-muted-foreground">
+                      Upload existing customer data to create more realistic and accurate synthetic personas. This helps the AI understand your target audience better.
+                    </p>
 
-              <AssetUploader
-                focusGroupId={undefined}
-                disabled={isGenerating}
-                maxAssets={5}
-                maxFileSize={10}
-                allowedTypes={[
-                  'application/pdf',
-                  'application/msword',
-                  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-                  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-                  'application/vnd.ms-powerpoint',
-                  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-                  'text/*',
-                  'image/*'
-                ]}
-                label=""
-                description=""
-                enableRenaming={false}
-                onFilesChange={(files) => {
-                  setCurrentFiles(files);
-                  setUploadedFiles(files.length > 0 ? createFileList(files) : null);
-                }}
-              />
-            </div>
+                    <AssetUploader
+                      focusGroupId={undefined}
+                      disabled={isGenerating}
+                      maxAssets={5}
+                      maxFileSize={10}
+                      allowedTypes={[
+                        'application/pdf',
+                        'application/msword',
+                        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+                        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+                        'application/vnd.ms-powerpoint',
+                        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+                        'text/*',
+                        'image/*'
+                      ]}
+                      label=""
+                      description=""
+                      enableRenaming={false}
+                      onFilesChange={(files) => {
+                        setCurrentFiles(files);
+                        setUploadedFiles(files.length > 0 ? createFileList(files) : null);
+                      }}
+                    />
+                  </div>
 
-            {/* What data should I upload? */}
-            <div className="space-y-2">
-              <h3 className="font-sf font-medium">
-                What data <em>should</em> I upload?
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                LLMs work well with large amounts of unstructured information. The more information you give the AI about your target audience, the more precise the personas.
-              </p>
-              <ul className="space-y-1 text-sm text-muted-foreground list-disc list-inside">
-                <li>Customer surveys</li>
-                <li>Interviews or transcripts</li>
-                <li>Customer journey maps or personas from previous research</li>
-                <li>Support chat logs</li>
-                <li>Social media audience insights</li>
-              </ul>
-            </div>
+                  {/* What data should I upload? */}
+                  <div className="space-y-2">
+                    <h3 className="font-sf font-medium">
+                      What data <em>should</em> I upload?
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                      LLMs work well with large amounts of unstructured information. The more information you give the AI about your target audience, the more precise the personas.
+                    </p>
+                    <ul className="space-y-1 text-sm text-muted-foreground list-disc list-inside">
+                      <li>Customer surveys</li>
+                      <li>Interviews or transcripts</li>
+                      <li>Customer journey maps or personas from previous research</li>
+                      <li>Support chat logs</li>
+                      <li>Social media audience insights</li>
+                    </ul>
+                  </div>
 
-            <div className="bg-muted/30 p-4 rounded-lg border border-border">
-              <div className="flex items-center mb-2">
-                <FileText className="h-5 w-5 text-muted-foreground mr-2" />
-                <h3 className="font-sf font-medium">What's included in the personas?</h3>
-              </div>
-              <ul className="space-y-2 text-sm text-muted-foreground">
-                <li className="flex items-center">
-                  <CheckCircle2 className="h-4 w-4 text-green-500 mr-2" />
-                  Demographic profiles based on your audience brief
-                </li>
-                <li className="flex items-center">
-                  <CheckCircle2 className="h-4 w-4 text-green-500 mr-2" />
-                  Contextual "life scenarios" linked to your research objectives
-                </li>
-                <li className="flex items-center">
-                  <CheckCircle2 className="h-4 w-4 text-green-500 mr-2" />
-                  Personality traits and behavioural patterns
-                </li>
-                <li className="flex items-center">
-                  <CheckCircle2 className="h-4 w-4 text-green-500 mr-2" />
-                  Consumer preferences and interests
-                </li>
-              </ul>
-            </div>
+                  <div className="bg-muted/30 p-4 rounded-lg border border-border">
+                    <div className="flex items-center mb-2">
+                      <FileText className="h-5 w-5 text-muted-foreground mr-2" />
+                      <h3 className="font-sf font-medium">What's included in the personas?</h3>
+                    </div>
+                    <ul className="space-y-2 text-sm text-muted-foreground">
+                      <li className="flex items-center">
+                        <CheckCircle2 className="h-4 w-4 text-green-500 mr-2" />
+                        Demographic profiles based on your audience brief
+                      </li>
+                      <li className="flex items-center">
+                        <CheckCircle2 className="h-4 w-4 text-green-500 mr-2" />
+                        Contextual "life scenarios" linked to your research objectives
+                      </li>
+                      <li className="flex items-center">
+                        <CheckCircle2 className="h-4 w-4 text-green-500 mr-2" />
+                        Personality traits and behavioural patterns
+                      </li>
+                      <li className="flex items-center">
+                        <CheckCircle2 className="h-4 w-4 text-green-500 mr-2" />
+                        Consumer preferences and interests
+                      </li>
+                    </ul>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
           </div>
         </div>