Upload 11 files

components/AiCoPilotPanel.tsx

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import React from 'react';
+import type { ActiveEditor } from '../lib/types';
+
+interface AiCoPilotPanelProps {
+  activeEditor: ActiveEditor | null;
+  onRefine: (instruction: string) => void;
+  isLoading: boolean;
+}
+
+export default function AiCoPilotPanel({ activeEditor, onRefine, isLoading }: AiCoPilotPanelProps) {
+  if (!activeEditor) {
+    return (
+      <div className="ai-copilot-panel">
+        <div className="copilot-placeholder">
+            <i className="ph-cursor-text" style={{fontSize: '2rem', marginBottom: '0.5rem'}}></i>
+            Click on a section in your resume to activate the AI Co-pilot.
+        </div>
+      </div>
+    );
+  }
+
+  const refinementActions = [
+    { instruction: "Rewrite this section to be more impactful.", label: "Rewrite for Impact", icon: "ph-shooting-star" },
+    { instruction: "Make this section more concise.", label: "Make More Concise", icon: "ph-arrows-in-simple" },
+    { instruction: "Rephrase this using stronger, professional action verbs.", label: "Use Stronger Verbs", icon: "ph-rocket-launch" },
+    { instruction: "Generate 3 alternative bullet points based on this content.", label: "Suggest Bullet Points", icon: "ph-list-bullets" },
+  ];
+
+  return (
+    <div className="ai-copilot-panel">
+      <h3>AI Co-pilot: <span style={{color: 'var(--color-accent)'}}>{activeEditor.sectionId}</span></h3>
+      <div className="copilot-actions">
+        {refinementActions.map(({ instruction, label, icon }) => (
+          <button
+            key={instruction}
+            className="copilot-button"
+            onClick={() => onRefine(instruction)}
+            disabled={isLoading}
+          >
+            <i className={icon}></i>
+            <span>{label}</span>
+            {isLoading && <small>(...)</small>}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

components/ControlPanel.tsx

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import React, { useState } from 'react';
+import InitialInputForm from './InitialInputForm';
+import AiCoPilotPanel from './AiCoPilotPanel';
+import type { InitialInput, ActiveEditor } from '../lib/types';
+
+interface ControlPanelProps {
+  onGenerate: (formData: InitialInput) => void;
+  onClear: () => void;
+  activeEditor: ActiveEditor | null;
+  onRefine: (instruction: string) => void;
+  isGenerating: boolean;
+  isRefining: boolean;
+}
+
+type Tab = 'setup' | 'copilot';
+
+export default function ControlPanel({ 
+    onGenerate, 
+    onClear, 
+    activeEditor,
+    onRefine,
+    isGenerating,
+    isRefining
+}: ControlPanelProps) {
+  const [activeTab, setActiveTab] = useState<Tab>('setup');
+
+  return (
+    <div className="control-panel">
+      <div className="control-panel-tabs">
+        <button 
+            className={`control-panel-tab ${activeTab === 'setup' ? 'active' : ''}`}
+            onClick={() => setActiveTab('setup')}
+        >
+            <i className="ph-note-pencil"></i> Initial Setup
+        </button>
+        <button 
+            className={`control-panel-tab ${activeTab === 'copilot' ? 'active' : ''}`}
+            onClick={() => setActiveTab('copilot')}
+            disabled={!activeEditor}
+            aria-disabled={!activeEditor}
+        >
+           <i className="ph-magic-wand"></i> AI Co-pilot
+        </button>
+      </div>
+
+      <div className="tab-content">
+        {activeTab === 'setup' && (
+          <InitialInputForm
+            onSubmit={onGenerate}
+            onClear={onClear}
+            disabled={isGenerating}
+            isLoading={isGenerating}
+          />
+        )}
+        {activeTab === 'copilot' && (
+          <AiCoPilotPanel
+            activeEditor={activeEditor}
+            onRefine={onRefine}
+            isLoading={isRefining}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

components/EditableSection.tsx

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import React, { useRef, useEffect } from 'react';
+import type { ResumeSection, ResumeSectionType } from '../lib/types';
+
+interface EditableSectionProps {
+  section: ResumeSection;
+  onContentChange: (sectionId: ResumeSectionType, newContent: string) => void;
+  isActive: boolean;
+  onFocus: (sectionId: ResumeSectionType, content: string) => void;
+  onBlur: () => void;
+}
+
+export default function EditableSection({
+  section,
+  onContentChange,
+  isActive,
+  onFocus,
+  onBlur,
+}: EditableSectionProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (contentRef.current && section.content !== contentRef.current.innerText) {
+      contentRef.current.innerText = section.content;
+    }
+  }, [section.content]);
+
+  const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
+    onContentChange(section.id, e.currentTarget.innerText);
+  };
+  
+  return (
+    <div
+      className={`editable-section ${isActive ? 'active' : ''}`}
+      onFocus={() => onFocus(section.id, contentRef.current?.innerText || '')}
+      onBlur={onBlur}
+    >
+      <h2 className="section-title">{section.title}</h2>
+      <div
+        ref={contentRef}
+        className="section-content"
+        contentEditable
+        suppressContentEditableWarning={true}
+        onInput={handleInput}
+        aria-label={`${section.title} content`}
+      />
+    </div>
+  );
+}

components/InitialInputForm.tsx

@@ -0,0 +1,136 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import React, { useState, ChangeEvent } from 'react';
+import type { InitialInput } from '../lib/types';
+import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
+import mammoth from 'mammoth';
+
+// Set workerSrc for pdf.js. This is crucial for it to work.
+GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.min.js';
+
+interface InitialInputFormProps {
+  onSubmit: (formData: InitialInput) => void;
+  onClear: () => void;
+  disabled: boolean;
+  isLoading: boolean;
+}
+
+const initialFormState: InitialInput = {
+  fullName: '',
+  jobTitle: '',
+  careerGoal: '',
+  jobDescription: '',
+  uploadedResumeContent: '',
+  yearsOfExperience: '2-4 Years',
+  keySkills: '',
+  previousRoles: '',
+  education: '',
+};
+
+export default function InitialInputForm({ onSubmit, onClear, disabled, isLoading }: InitialInputFormProps) {
+  const [formData, setFormData] = useState<InitialInput>(initialFormState);
+  const [selectedFileName, setSelectedFileName] = useState<string>('');
+  const [fileError, setFileError] = useState<string | null>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    setFileError(null);
+    setSelectedFileName('');
+    setFormData(prev => ({ ...prev, uploadedResumeContent: '' }));
+
+    if (file) {
+      setSelectedFileName(file.name);
+      try {
+        let text = '';
+        if (file.name.toLowerCase().endsWith('.txt')) {
+          text = await file.text();
+        } else if (file.name.toLowerCase().endsWith('.pdf')) {
+          const arrayBuffer = await file.arrayBuffer();
+          const pdf = await getDocument({ data: arrayBuffer }).promise;
+          let pdfText = '';
+          for (let i = 1; i <= pdf.numPages; i++) {
+            const page = await pdf.getPage(i);
+            const textContent = await page.getTextContent();
+            pdfText += textContent.items.map((item: any) => item.str).join(' ') + '\n';
+          }
+          text = pdfText;
+        } else if (file.name.toLowerCase().endsWith('.docx')) {
+          const arrayBuffer = await file.arrayBuffer();
+          const result = await mammoth.extractRawText({ arrayBuffer });
+          text = result.value;
+        } else {
+          setFileError("Unsupported file type. Please use .txt, .pdf, or .docx.");
+          return;
+        }
+        setFormData(prev => ({ ...prev, uploadedResumeContent: text }));
+      } catch (error) {
+        setFileError(`Error processing file: ${error instanceof Error ? error.message : "Unknown error"}.`);
+      }
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (fileError) {
+      alert(`Cannot submit: Please resolve the file error first. ${fileError}`);
+      return;
+    }
+    onSubmit(formData);
+  };
+
+  const handleClear = () => {
+    setFormData(initialFormState);
+    setSelectedFileName('');
+    setFileError(null);
+    const fileInput = document.getElementById('resumeUpload') as HTMLInputElement;
+    if (fileInput) fileInput.value = '';
+    onClear();
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="initial-input-form">
+      <h2>Initial Setup</h2>
+      
+      {/* Form groups for all inputs */}
+      <div className="form-group">
+        <label htmlFor="fullName">Full Name</label>
+        <input type="text" id="fullName" name="fullName" value={formData.fullName} onChange={handleChange} placeholder="e.g., Jane Doe" required disabled={disabled}/>
+      </div>
+      <div className="form-group">
+        <label htmlFor="jobTitle">Current or Target Job Title</label>
+        <input type="text" id="jobTitle" name="jobTitle" value={formData.jobTitle} onChange={handleChange} placeholder="e.g., Senior Software Engineer" required disabled={disabled}/>
+      </div>
+      <div className="form-group">
+        <label htmlFor="jobDescription">Target Job Description (Crucial for Scoring)</label>
+        <textarea id="jobDescription" name="jobDescription" value={formData.jobDescription} onChange={handleChange} placeholder="Paste the job description here..." rows={6} disabled={disabled}/>
+      </div>
+      <div className="form-group">
+        <label htmlFor="resumeUpload">Upload Existing Resume (Optional)</label>
+        <input type="file" id="resumeUpload" name="resumeUpload" accept=".txt,.pdf,.docx" onChange={handleFileChange} disabled={disabled}/>
+        <small className="form-text text-muted">{selectedFileName ? `Selected: ${selectedFileName}` : "Upload for richer context."}</small>
+        {fileError && <p role="alert" style={{color:'var(--color-error)',fontSize:'0.9em',marginTop:'0.5em'}}>{fileError}</p>}
+      </div>
+      <div className="form-group">
+        <label htmlFor="keySkills">Key Skills (to supplement resume)</label>
+        <textarea id="keySkills" name="keySkills" value={formData.keySkills} onChange={handleChange} placeholder="List skills not detailed in your resume..." rows={3} disabled={disabled}/>
+      </div>
+      {/* Additional fields like careerGoal, yearsOfExperience etc. can be added here if needed */}
+      
+      <div className="form-actions" style={{marginTop: '1.5rem', display: 'flex', gap: '1rem'}}>
+        <button type="submit" className={`submit-button ${isLoading ? 'is-loading' : ''}`} disabled={disabled}>
+          <span>{isLoading ? 'Generating...' : 'Generate Resume'}</span>
+        </button>
+        <button type="button" className="clear-button" onClick={handleClear} disabled={disabled}>
+          Clear All
+        </button>
+      </div>
+    </form>
+  );
+}

components/JobMatchDashboard.tsx

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import React from 'react';
+import LoadingSpinner from './LoadingSpinner';
+
+interface JobMatchDashboardProps {
+  score: number;
+  suggestions: string[];
+  isLoading: boolean;
+  hasContent: boolean;
+}
+
+export default function JobMatchDashboard({ score, suggestions, isLoading, hasContent }: JobMatchDashboardProps) {
+  const gaugeRotation = (score / 100) * 180; // 0 score = 0deg, 100 score = 180deg
+
+  if (!hasContent) {
+    return (
+        <div className="dashboard">
+            <div className="copilot-placeholder">
+                <i className="ph-lightbulb" style={{fontSize: '2rem', marginBottom: '0.5rem'}}></i>
+                Your Job Match Score and AI Insights will appear here once a resume is generated.
+            </div>
+        </div>
+    )
+  }
+
+  return (
+    <div className="dashboard">
+      <h2>Live Analysis</h2>
+      
+      <div className="score-gauge">
+        <div className="score-gauge-bg"></div>
+        <div 
+          className="score-gauge-fill" 
+          style={{ '--gauge-rotation': `${gaugeRotation}deg` } as React.CSSProperties}
+        ></div>
+        <div className="score-text">{score}<span>/100</span></div>
+      </div>
+      
+      <div className="suggestions-list">
+        <h3>AI Suggestions {isLoading && <small>(Updating...)</small>}</h3>
+        {suggestions.length > 0 ? (
+          <ul>
+            {suggestions.map((suggestion, index) => (
+              <li key={index} className="suggestion-item">
+                <i className="ph-check-circle"></i>
+                <span>{suggestion}</span>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p>No suggestions at the moment. Looks good!</p>
+        )}
+      </div>
+    </div>
+  );
+}

components/LoadingSpinner.tsx

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import React from 'react';
+
+export default function LoadingSpinner() {
+  return (
+    <div className="loading-spinner-overlay" role="status" aria-live="polite" aria-label="Loading content">
+      <div className="spinner-animation"></div>
+      <p>Crafting your content...</p>
+    </div>
+  );
+}

components/ResumePreview.tsx

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import React from 'react';
+import type { ResumeDocument, ResumeSectionType, ActiveEditor } from '../lib/types';
+import EditableSection from './EditableSection';
+
+interface ResumePreviewProps {
+  document: ResumeDocument;
+  onContentChange: (sectionId: ResumeSectionType, newContent: string) => void;
+  activeSectionId: ResumeSectionType | undefined;
+  onSectionFocus: (editorState: ActiveEditor | null) => void;
+}
+
+const ORDERED_SECTION_KEYS: ResumeSectionType[] = ["Professional Summary", "Skills Section", "Experience", "Education"];
+
+export default function ResumePreview({ 
+  document, 
+  onContentChange, 
+  activeSectionId,
+  onSectionFocus 
+}: ResumePreviewProps) {
+
+  const handleFocus = (sectionId: ResumeSectionType, content: string) => {
+    onSectionFocus({ sectionId, content });
+  };
+
+  const handleBlur = () => {
+    onSectionFocus(null);
+  };
+
+  // Create a map for quick lookup
+  const docMap = new Map(document.map(section => [section.id, section]));
+
+  return (
+    <div className="resume-preview-paper" aria-label="Live Resume Preview" tabIndex={-1}>
+      {ORDERED_SECTION_KEYS.map((key) => {
+        const section = docMap.get(key);
+        if (section) {
+          return (
+            <EditableSection
+              key={section.id}
+              section={section}
+              onContentChange={onContentChange}
+              isActive={activeSectionId === section.id}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          );
+        }
+        return null; // Don't render a section if it's not in the document
+      })}
+    </div>
+  );
+}