Collapse Customer Data Upload into accordion to reduce visual prominence
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>
This commit is contained in:
michael
parent
e10a569bc2
commit
f0ac4a14de
1 changed files with 82 additions and 75 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue