From e10a569bc2c4e57fb88e56820ee612a1259580dc Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Tue, 2 Dec 2025 08:26:45 -0600
Subject: [PATCH] Improve Customer Data Upload guidance with clearer
 instructions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add tooltip explaining what data improves persona accuracy
- Add "What data should I upload?" section with bullet list
- Update "What's included in the personas?" section with revised copy
- Add PowerPoint support to allowed file types
- Make FieldTooltip example prop optional for simpler tooltips

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/AssetUploader.tsx              |  6 +-
 .../ai-recruiter/AIRecruiterForm.tsx          | 64 ++++++++++++++-----
 src/components/ui/field-tooltip.tsx           | 28 ++++----
 3 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/src/components/AssetUploader.tsx b/src/components/AssetUploader.tsx
index 9e31396b..1cebb3d8 100644
--- a/src/components/AssetUploader.tsx
+++ b/src/components/AssetUploader.tsx
@@ -131,9 +131,11 @@ export default function AssetUploader({
       'text/*': 'Text files',
       'application/msword': 'Word docs',
       'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word docs',
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel files'
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel files',
+      'application/vnd.ms-powerpoint': 'PowerPoint',
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PowerPoint'
     };
-    
+
     return allowedTypes.map(type => typeMap[type] || type).filter((v, i, a) => a.indexOf(v) === i);
   };
 
diff --git a/src/components/ai-recruiter/AIRecruiterForm.tsx b/src/components/ai-recruiter/AIRecruiterForm.tsx
index 62769228..ca5fe834 100644
--- a/src/components/ai-recruiter/AIRecruiterForm.tsx
+++ b/src/components/ai-recruiter/AIRecruiterForm.tsx
@@ -240,47 +240,81 @@ export default function AIRecruiterForm({ onSubmit, isGenerating }: AIRecruiterF
           
           <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>
+
               <AssetUploader
-                focusGroupId={undefined} // No backend upload for persona creation
+                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', 'text/*', 'image/*']}
-                label="Customer Data Upload"
-                description="Upload existing customer data to create more realistic and accurate synthetic personas. This helps the AI understand your target audience better."
+                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);
                 }}
               />
-              <p className="text-xs text-muted-foreground">
-                Supports PDF, Word docs, Excel files, text files, and images
-              </p>
             </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?</h3>
+                <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 brief
+                  Demographic profiles based on your audience brief
                 </li>
                 <li className="flex items-center">
                   <CheckCircle2 className="h-4 w-4 text-green-500 mr-2" />
-                  Personality traits and behavioral patterns
+                  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>
-                <li className="flex items-center">
-                  <CheckCircle2 className="h-4 w-4 text-green-500 mr-2" />
-                  Review and refine capabilities
-                </li>
               </ul>
             </div>
           </div>
diff --git a/src/components/ui/field-tooltip.tsx b/src/components/ui/field-tooltip.tsx
index f7963597..fbebe021 100644
--- a/src/components/ui/field-tooltip.tsx
+++ b/src/components/ui/field-tooltip.tsx
@@ -9,7 +9,7 @@ import {
 
 interface FieldTooltipProps {
   content: string
-  example: string
+  example?: string
 }
 
 export function FieldTooltip({ content, example }: FieldTooltipProps) {
@@ -27,17 +27,21 @@ export function FieldTooltip({ content, example }: FieldTooltipProps) {
       </PopoverTrigger>
       <PopoverContent className="w-80" sideOffset={5}>
         <p className="text-sm text-foreground">{content}</p>
-        <button
-          type="button"
-          onClick={() => setShowExample(!showExample)}
-          className="text-sm text-primary hover:underline mt-3 font-medium"
-        >
-          {showExample ? "Hide example" : "Show example"}
-        </button>
-        {showExample && (
-          <div className="mt-3 p-3 bg-muted rounded-md text-sm text-muted-foreground italic">
-            {example}
-          </div>
+        {example && (
+          <>
+            <button
+              type="button"
+              onClick={() => setShowExample(!showExample)}
+              className="text-sm text-primary hover:underline mt-3 font-medium"
+            >
+              {showExample ? "Hide example" : "Show example"}
+            </button>
+            {showExample && (
+              <div className="mt-3 p-3 bg-muted rounded-md text-sm text-muted-foreground italic">
+                {example}
+              </div>
+            )}
+          </>
         )}
       </PopoverContent>
     </Popover>