From 2e6a8d1366858622cdde98166fa83869b5713632 Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Mon, 19 May 2025 20:31:30 -0700 Subject: [PATCH] New UI flows... --- frontend/public/docs/backstory-ui-mockups.md | 1217 +++++++++++++++++ frontend/src/Components/CopyBubble.tsx | 16 +- frontend/src/NewApp/BackstoryApp.tsx | 254 +--- .../Components/BackstoryDynamicRoutes.tsx | 71 + .../src/NewApp/Components/BackstoryLayout.tsx | 160 +++ .../src/NewApp/Components/Conversation.css | 14 + .../src/NewApp/Components/Conversation.tsx | 573 ++++++++ frontend/src/NewApp/Components/Header.tsx | 89 +- .../src/NewApp/Components/UserContext.tsx | 39 + frontend/src/NewApp/Pages/DocsPage.tsx | 417 ++++++ frontend/src/NewApp/routes/UserRoute.tsx | 38 + 11 files changed, 2636 insertions(+), 252 deletions(-) create mode 100755 frontend/public/docs/backstory-ui-mockups.md create mode 100644 frontend/src/NewApp/Components/BackstoryDynamicRoutes.tsx create mode 100644 frontend/src/NewApp/Components/BackstoryLayout.tsx create mode 100644 frontend/src/NewApp/Components/Conversation.css create mode 100644 frontend/src/NewApp/Components/Conversation.tsx create mode 100644 frontend/src/NewApp/Components/UserContext.tsx create mode 100644 frontend/src/NewApp/Pages/DocsPage.tsx create mode 100644 frontend/src/NewApp/routes/UserRoute.tsx diff --git a/frontend/public/docs/backstory-ui-mockups.md b/frontend/public/docs/backstory-ui-mockups.md new file mode 100755 index 0000000..da163bd --- /dev/null +++ b/frontend/public/docs/backstory-ui-mockups.md @@ -0,0 +1,1217 @@ +# Backstory Application UI Mockups + +## System Overview +Backstory is a dual-purpose application serving: +1. **Job Candidates** - Upload/manage their professional history and generate tailored resumes +2. **Employers/Recruiters** - Search for candidates, ask questions about their experience, and generate tailored resumes based on job descriptions + +The UI is designed with separate but connected experiences for these two user types. + +## Core Navigation Structure + +### Primary Navigation +- **Public Pages:** Home, About, Pricing, Login/Register +- **Candidate Dashboard:** Profile, Resume Builder, Q&A Setup, Analytics +- **Employer Dashboard:** Candidate Search, Saved Candidates, Company Profile + +## Detailed Screen Mockups + +### 1. Homepage (Public) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] Login | Register | ++------------------------------------------------------+ +| | +| +--------------+ +--------------+ | +| | FOR CANDIDATES| | FOR EMPLOYERS | | +| +--------------+ +--------------+ | +| Tell your complete Find the perfect match | +| professional story by accessing deeper | +| beyond a single page candidate insights | +| | +| [Get Started] [Search Candidates] | +| | ++------------------------------------------------------+ +| | +| How It Works | +| | +| [Candidate Flow Visual] [Employer Flow Visual] | +| | +| - Upload your details - Search candidate pool | +| - Create AI assistant - Ask personalized Q&A | +| - Generate tailored CVs - Generate targeted CVs | +| | ++------------------------------------------------------+ +| | +| Testimonials | Success Stories | Partners | +| | ++------------------------------------------------------+ +``` + +### 2. Registration - Candidate +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] Home | ++------------------------------------------------------+ +| | +| Create Your Candidate Account | +| | +| [ ] Email | +| [ ] Password | +| [ ] Confirm Password | +| | +| [ ] I agree to the Terms & Privacy Policy | +| | +| [Create Account] | +| | +| Already have an account? [Login] | +| | +| --- or --- | +| | +| [Continue with Google] | +| [Continue with LinkedIn] | +| | ++------------------------------------------------------+ +``` + +### 3. Registration - Employer +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] Home | ++------------------------------------------------------+ +| | +| Create Your Employer Account | +| | +| [ ] Email | +| [ ] Password | +| [ ] Confirm Password | +| [ ] Company Name | +| [ ] Company Size | +| [ ] Industry | +| | +| [ ] I agree to the Terms & Privacy Policy | +| | +| [Create Account] | +| | +| Already have an account? [Login] | +| | +| --- or --- | +| | +| [Continue with Google] | +| [Continue with LinkedIn] | +| | ++------------------------------------------------------+ +``` + +### 4. Candidate Dashboard (Home) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | | +| | Profile | Welcome back, [Name]! | +| | Backstory | | +| | Resumes | Your profile is 75% complete | +| | Q&A Setup | [Complete Your Profile] | +| | Analytics | | +| | Settings | | +| +------------+ | +| | +| +-------------------+ +--------------------+ | +| | Resume Builder | | Recent Activity | | +| | | | | | +| | 3 custom resumes | | 5 profile views | | +| | Last created: | | 2 resume downloads | | +| | May 15, 2025 | | 1 direct contact | | +| | | | | | +| | [Create New] | | [View All Activity]| | +| +-------------------+ +--------------------+ | +| | +| +-------------------+ +--------------------+ | +| | Complete Your | | Improvement | | +| | Backstory | | Suggestions | | +| | | | | | +| | • Add projects | | • Add certifications| | +| | • Detail skills | | • Enhance your | | +| | • Work history | | project details | | +| | | | | | +| | [Edit Backstory] | | [View All Tips] | | +| +-------------------+ +--------------------+ | +| | ++------------------------------------------------------+ +``` + +### 5. Candidate Profile Editor +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Edit Your Profile | +| | Profile | | +| | Backstory | [Upload Photo] | +| | Resumes | | +| | Q&A Setup | Basic Information: | +| | Analytics | [ ] Full Name | +| | Settings | [ ] Professional Title | +| +------------+ [ ] Location | +| [ ] Email | +| [ ] Phone (optional) | +| | +| Professional Summary: | +| [ ] | +| [ ] | +| | +| Skills: | +| [Add Skills +] | +| • Skill 1 [x] | +| • Skill 2 [x] | +| | +| Online Presence: | +| [ ] LinkedIn URL | +| [ ] Personal Website | +| [ ] GitHub/Portfolio | +| | +| [Save Changes] [Cancel] | +| | ++------------------------------------------------------+ +``` + +### 6. Backstory Content Editor +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Build Your Complete Backstory | +| | Profile | | +| | Backstory | +-------------------------+ | +| | Resumes | | Education | Experience | Projects| +| | Q&A Setup | +-------------------------+ | +| | Analytics | | +| | Settings | Work Experience: | +| +------------+ [+ Add Experience] | +| | +| Company: [ ] | +| Position: [ ] | +| Dates: [From] [To] [Current ☐] | +| Location: [ ] | +| | +| Description: | +| [ ] | +| [ ] | +| | +| Key Achievements: | +| [+ Add Achievement] | +| • Achievement 1 [Edit] [Delete] | +| • Achievement 2 [Edit] [Delete] | +| | +| Technologies Used: | +| [+ Add Technology] | +| • Tech 1 [x] • Tech 2 [x] | +| | +| [Save Experience] | +| | +| [Import from LinkedIn] | +| [Import from Resume File] | +| [Import from JSON] | +| | ++------------------------------------------------------+ +``` + +### 7. Q&A Setup +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Configure Q&A Experience | +| | Profile | | +| | Backstory | Your AI assistant helps employers | +| | Resumes | learn more about your experience. | +| | Q&A Setup | | +| | Analytics | AI Personality: | +| | Settings | [ ] Professional & Straightforward| +| +------------+ [ ] Friendly & Conversational | +| [ ] Technical & Detailed | +| [ ] Custom... | +| | +| Custom Instructions: | +| [ ] | +| [ ] | +| | +| Topics to Emphasize: | +| [+ Add Topic] | +| • Leadership experience [x] | +| • Technical skills [x] | +| | +| Topics to Avoid: | +| [+ Add Topic] | +| • Salary expectations [x] | +| | +| Test Your Assistant: | +| [Ask a test question...] | +| [Test] | +| | +| [Save Configuration] | +| | ++------------------------------------------------------+ +``` + +### 8. Resume Builder +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Resume Builder | +| | Profile | | +| | Backstory | +-------------------------+ | +| | Resumes | | Create | Saved | Templates | | +| | Q&A Setup | +-------------------------+ | +| | Analytics | | +| | Settings | Create Custom Resume: | +| +------------+ | +| | +| Target Position: | +| [ ] | +| | +| Paste Job Description (optional): | +| [ ] | +| [ ] | +| | +| Focus Areas: | +| [☑] Leadership | +| [☑] Technical Skills | +| [☐] Project Management | +| [☐] Client Relations | +| [+ Custom Focus] | +| | +| Resume Length: | +| [○] 1 Page [●] 2 Pages | +| | +| Template Style: | +| [Template Thumbnails] | +| [◉] Modern [○] Classic [○] Bold | +| | +| [Generate Resume] | +| | ++------------------------------------------------------+ +``` + +### 9. Resume Editor +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Edit Resume | +| | Profile | | +| | Backstory | +-------------------------+ | +| | Resumes | | Content | Design | Preview | | +| | Q&A Setup | +-------------------------+ | +| | Analytics | | +| | Settings | Resume Sections: | +| +------------+ [↕] Contact Information | +| [↕] Professional Summary | +| [↕] Work Experience | +| [↕] Skills | +| [↕] Education | +| [↕] Projects | +| [+ Add Section] | +| | +| Editing: Work Experience | +| ------------------------- | +| Select Experiences to Include: | +| [☑] Company A (2023-Present) | +| [☑] Company B (2020-2023) | +| [☐] Company C (2018-2020) | +| | +| For selected experiences: | +| [☑] Show all achievements | +| [○] Focus on relevant items only | +| | +| [Re-Generate This Section] | +| | +| [Save Changes] [Preview] | +| | ++------------------------------------------------------+ +``` + +### 10. Analytics Dashboard (Candidate) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Profile Analytics | +| | Profile | | +| | Backstory | +-------------------------+ | +| | Resumes | | Overview | Engagement | Resumes | +| | Q&A Setup | +-------------------------+ | +| | Analytics | | +| | Settings | Profile Performance: | +| +------------+ | +| | +| [Graph: Profile Views Last 30 Days]| +| | +| Interaction Metrics: | +| • 45 Profile Views | +| • 12 Resume Downloads | +| • a Direct Contacts | +| • 23 Q&A Interactions | +| | +| Top Q&A Topics: | +| [Graph: Most Asked Questions] | +| | +| Resume Performance: | +| [Graph: Downloads by Resume] | +| | +| Discovery Sources: | +| [Graph: How Employers Found You] | +| | +| [Download Report] | +| | ++------------------------------------------------------+ +``` + +### 11. Employer Dashboard +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Employer Dashboard | +| | Search | | +| | Saved | Welcome back, [Company]! | +| | Jobs | | +| | Company | +-------------------+ +--------+ | +| | Analytics | | Quick Search | | Recent | | +| | Settings | | | | | | +| +------------+ | [Search...] | | • Cand1| | +| | [Go] | | • Cand2| | +| +-------------------+ +--------+ | +| | +| +-------------------+ +--------+ | +| | Talent Pools | | Job | | +| | | | Matches| | +| | • Frontend Devs | | | | +| | • Data Scientists | | 5 new | | +| | • Product Managers| | matches| | +| | | | | | +| | [Manage Pools] | | [View] | | +| +-------------------+ +--------+ | +| | +| +-------------------+ | +| | Active Job Postings| | +| | | | +| | • Sr Developer | | +| | • UX Designer | | +| | | | +| | [Post New Job] | | +| +-------------------+ | +| | ++------------------------------------------------------+ +``` + +### 12. Candidate Search (Employer) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Search Candidates | +| | Search | | +| | Saved | [Search by keyword, skill, role...] | +| | Jobs | | +| | Company | Filter By: | +| | Analytics | +----------------------------+ | +| | Settings | | Skills | Experience | Location || +| +------------+ +----------------------------+ | +| | +| Skills: | +| [+ Add Skill] | +| • React [x] • Python [x] | +| | +| Experience Level: | +| [☐] Entry (0-2 years) | +| [☑] Mid (3-5 years) | +| [☑] Senior (6+ years) | +| | +| Location: | +| [☑] Remote OK | +| [ ] City/Region... | +| | +| [Advanced Filters ▼] | +| • Education | +| • Industry Experience | +| • Last Active | +| | +| [Search] [Save This Search] | +| | +| Results (24): | +| [Candidate Cards with brief info] | +| | ++------------------------------------------------------+ +``` + +### 13. Candidate Profile View (Employer) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Candidate Profile | +| | Search | | +| | Saved | +-------------------------+ | +| | Jobs | | Profile | Q&A | Generate Resume || +| | Company | +-------------------------+ | +| | Analytics | | +| | Settings | [Photo] Name: John Developer | +| +------------+ Title: Senior Frontend Engineer | +| Location: Portland, OR (Remote OK)| +| | +| [Save ☆] [Contact] [Share] | +| | +| Summary: | +| Senior engineer with 8+ years | +| experience building scalable web | +| applications and leading teams. | +| | +| Skills: | +| • React • TypeScript • NodeJS | +| • AWS • GraphQL • Redux | +| | +| Experience: | +| • Tech Co (2020-Present) | +| Senior Frontend Engineer | +| | +| • Startup Inc (2016-2020) | +| Frontend Developer | +| | +| [View Full Profile] | +| | ++------------------------------------------------------+ +``` + +### 14. Q&A Interface (Employer) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Ask about John's Experience | +| | Search | | +| | Saved | +-------------------------+ | +| | Jobs | | Profile | Q&A | Generate Resume || +| | Company | +-------------------------+ | +| | Analytics | | +| | Settings | Ask anything about John's | +| +------------+ professional background, | +| skills, or experience. | +| | +| Suggested Questions: | +| • Tell me about your React exp. | +| • How have you handled team | +| conflicts? | +| • What are your biggest | +| achievements? | +| | +| Chat History: | +| +-------------------------+ | +| | Q: Describe your biggest | +| | challenge at Tech Co. | +| | | +| | A: At Tech Co, I led a critical | +| | migration from a legacy system | +| | to a React-based architecture. | +| | The main challenge was ensuring | +| | zero downtime while... | +| +-------------------------+ | +| | +| [Type your question...] | +| [Ask] | +| | ++------------------------------------------------------+ +``` + +### 15. Resume Generator (Employer) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Generate Tailored Resume | +| | Search | | +| | Saved | +-------------------------+ | +| | Jobs | | Profile | Q&A | Generate Resume || +| | Company | +-------------------------+ | +| | Analytics | | +| | Settings | Generate a custom resume for John | +| +------------+ based on your job requirements. | +| | +| Job Title: | +| [ ] | +| | +| Job Description: | +| [ ] | +| [ ] | +| | +| [○] Paste JD [●] Select Job Post | +| [Select from your job posts ▼] | +| | +| Key Requirements: | +| [☑] React expertise | +| [☑] Team leadership | +| [☑] AWS experience | +| [☐] Mobile development | +| | +| [Generate Resume] | +| | +| Generated resumes will highlight | +| relevant experience matching your | +| requirements. | +| | ++------------------------------------------------------+ +``` + +### 16. Job Management (Employer) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Job Management | +| | Search | | +| | Saved | +-------------------------+ | +| | Jobs | | Active | Drafts | Closed | | +| | Company | +-------------------------+ | +| | Analytics | | +| | Settings | [+ Post New Job] | +| +------------+ | +| | +| Active Jobs (3): | +| +-------------------------+ | +| | Senior Frontend Engineer | +| | Posted: May 10, 2025 | +| | Matches: 12 | +| | [View] [Edit] [Close] | +| +-------------------------+ | +| | +| +-------------------------+ | +| | UX Designer | +| | Posted: May 8, 2025 | +| | Matches: 8 | +| | [View] [Edit] [Close] | +| +-------------------------+ | +| | +| +-------------------------+ | +| | Product Manager | +| | Posted: May 5, 2025 | +| | Matches: 15 | +| | [View] [Edit] [Close] | +| +-------------------------+ | +| | ++------------------------------------------------------+ +``` + +### 17. Company Profile (Employer) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Company Profile | +| | Search | | +| | Saved | This information will be visible | +| | Jobs | to candidates viewing your jobs. | +| | Company | | +| | Analytics | [Upload Logo] | +| | Settings | | +| +------------+ Company Information: | +| [ ] Company Name | +| [ ] Industry | +| [ ] Size | +| [ ] Website | +| [ ] Location(s) | +| | +| Company Description: | +| [ ] | +| [ ] | +| | +| Company Benefits: | +| [+ Add Benefit] | +| • Remote Work [Edit] [Delete] | +| • Healthcare [Edit] [Delete] | +| | +| Company Culture: | +| [ ] | +| | +| [Save Changes] | +| | +| [Preview Public Profile] | +| | ++------------------------------------------------------+ +``` + +### 18. Employer Analytics +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Recruiting Analytics | +| | Search | | +| | Saved | +-----------------------------+ | +| | Jobs | | Overview | Jobs | Engagement | | +| | Company | +-----------------------------+ | +| | Analytics | | +| | Settings | Account Activity: | +| +------------+ | +| [Graph: Monthly Activity Trends] | +| • 120 Candidate Profiles Viewed | +| • 45 Q&A Interactions | +| • 30 Resumes Generated | +| | +| Job Performance: | +| [Graph: Candidates per Job] | +| | +| Top Candidate Skills: | +| [Graph: Most Common Skills] | +| | +| Search Terms: | +| [Graph: Most Used Search Terms] | +| | +| Talent Pool Insights: | +| • 82% of viewed candidates have | +| 5+ years of experience | +| • Most common tech stack: React, | +| Node.js, AWS | +| | +| [Download Report] | +| | ++------------------------------------------------------+ +``` + +### 19. Settings Page (Both Users) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Account Settings | +| | Main Nav | | +| | ... | +--------------------------------+| +| | ... | | Profile | Notifications | Billing|| +| | ... | +--------------------------------+| +| | Settings | | +| +------------+ Account Information: | +| [ ] Email | +| [ ] Password (Change) | +| | +| Privacy Settings: | +| [☑] Profile visible to employers | +| [☑] Allow direct contact | +| [☐] Show profile in search results| +| | +| Data Management: | +| [☑] Store chat history | +| [☑] Use data for analytics | +| | +| AI Configuration: | +| [Select Model ▼] | +| • Anthropic Claude | +| • OpenAI GPT-4 | +| • Local Open Source | +| | +| API Configuration: | +| [ ] API Key (if using external) | +| | +| [Save Changes] [Cancel] | +| | ++------------------------------------------------------+ +``` + +## User Flow Diagrams + +### Candidate User Flow +``` +Home Page → Register (Candidate) → Dashboard + ↓ +Dashboard → Profile Editor → Backstory Editor → Q&A Setup + ↓ +Dashboard → Resume Builder → Resume Editor → Generated Resume + ↓ +Dashboard → Analytics → Settings +``` + +### Employer User Flow +``` +Home Page → Register (Employer) → Dashboard + ↓ +Dashboard → Company Profile → Job Management → Post Job + ↓ +Dashboard → Candidate Search → Candidate Profile → Q&A Interface + ↓ ↓ + ↓ Generate Resume + ↓ +Dashboard → Saved Candidates → Analytics → Settings +``` + +## Connection Points Between Systems + +1. **Candidate Profile → Employer Search** + - Candidate profiles (when visible) appear in employer searches + - Search algorithms match candidate skills to employer requirements + +2. **Candidate Q&A Setup → Employer Q&A Interface** + - Q&A configurations by candidates determine how their AI assistant responds + - Employer questions are processed through the candidate's configured AI + +3. **Employer Job Posts → Candidate Resume Generator** + - Job descriptions posted by employers can be used by candidates to generate tailored resumes + - Skills and requirements from job posts help optimize candidate resumes + +4. **Resume Generation Bidirectional Flow** + - Employers can generate candidate-specific resumes based on job requirements + - Candidates can generate job-specific resumes based on posted positions + - Both flows leverage the same underlying RAG system with different contexts + +5. **Analytics Insights Exchange** + - Candidates see which employers viewed their profiles (anonymized) + - Employers see aggregate data on candidate pools relevant to their needs + - Both sides receive optimization suggestions based on market trends + +## Additional Screens + +### 20. Job Posting Creator (Employer) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Create Job Posting | +| | Search | | +| | Saved | Job Details: | +| | Jobs | [ ] Job Title | +| | Company | [ ] Department | +| | Analytics | [ ] Location | +| | Settings | [☐] Remote OK | +| +------------+ [ ] Employment Type (Full/Part) | +| [ ] Experience Level | +| | +| Job Description: | +| [ ] | +| [ ] | +| | +| Required Skills: | +| [+ Add Skill] | +| • React [x] • TypeScript [x] | +| | +| Preferred Skills: | +| [+ Add Skill] | +| • GraphQL [x] • AWS [x] | +| | +| [☑] Enable AI matching | +| [☑] Allow candidate resume gen | +| | +| [Save as Draft] [Publish Job] | +| | ++------------------------------------------------------+ +``` + +### 21. Talent Pool Management (Employer) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Talent Pools | +| | Search | | +| | Saved | [+ Create New Pool] | +| | Jobs | | +| | Company | Frontend Developers: | +| | Analytics | (15 candidates) | +| | Settings | [View] [Edit] [Delete] | +| +------------+ | +| Cloud Engineers: | +| (8 candidates) | +| [View] [Edit] [Delete] | +| | +| UX Designers: | +| (12 candidates) | +| [View] [Edit] [Delete] | +| | +| Edit Pool: Frontend Developers | +| +--------------------------+ | +| | Name: [Frontend Developers] | +| | | +| | Description: | +| | [Senior frontend talent...] | +| | | +| | Auto-add criteria: | +| | • Skills: React, Vue, Angular | +| | • Experience: 3+ years | +| | [Edit Criteria] | +| | | +| | [Save Changes] | +| +--------------------------+ | +| | ++------------------------------------------------------+ +``` + +### 22. Import Experience Screen (Candidate) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Import Professional Experience | +| | Profile | | +| | Backstory | Choose import method: | +| | Resumes | | +| | Q&A Setup | [○] Upload Resume File | +| | Analytics | [●] Import from LinkedIn | +| | Settings | [○] Manual Entry | +| +------------+ [○] JSON/CSV Upload | +| | +| LinkedIn Import: | +| [Connect with LinkedIn] | +| | +| Resume File Upload: | +| [Choose File] No file chosen | +| Supported formats: PDF, DOCX | +| | +| Data to Import: | +| [☑] Work Experience | +| [☑] Education | +| [☑] Skills | +| [☐] Projects | +| [☐] Certifications | +| | +| [Start Import] | +| | ++------------------------------------------------------+ +``` + +### 23. Generated Resume View & Edit (Both Users) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Generated Resume | +| | Main Nav | | +| | ... | John Developer | +| | ... | Senior Frontend Engineer | +| | ... | john@email.com | (555) 123-4567 | +| | Settings | Portland, OR | github.com/john | +| +------------+ | +| SUMMARY | +| Experienced frontend engineer | +| with 8+ years building scalable | +| web applications and expertise | +| in React, TypeScript and AWS. | +| | +| EXPERIENCE | +| Tech Co | 2020-Present | +| Senior Frontend Engineer | +| • Led migration to React... | +| • Reduced load times by 60%... | +| [Edit Section] | +| | +| Startup Inc | 2016-2020 | +| Frontend Developer | +| • Built responsive dashboards... | +| • Implemented state management... | +| [Edit Section] | +| | +| [Download PDF] [Share] [Revise] | +| | ++------------------------------------------------------+ +``` + +### 24. Candidate Comparison (Employer) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Compare Candidates | +| | Search | | +| | Saved | Selected Candidates: | +| | Jobs | [John Developer ✓] [Jane Coder ✓] | +| | Company | [Add Another +] | +| | Analytics | | +| | Settings | Comparison Criteria: | +| +------------+ [☑] Skills Match | +| [☑] Experience Level | +| [☑] Education | +| [☐] Project Complexity | +| | +| +-------------+--------------+ | +| | Criteria | John | Jane | +| +-------------+--------------+ | +| | Skills Match| 92% | 87% | +| | Experience | 8 yrs | 6 yrs | +| | Leadership | High | Medium | +| | React | Expert | Advanced| +| | AWS | Advanced| Expert | +| +-------------+--------------+ | +| | +| [Compare Q&A Responses] | +| [Generate Side-by-Side Resumes] | +| | ++------------------------------------------------------+ +``` + +### 25. Notification & Activity Feed (Both Users) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | Activity Feed | +| | Main Nav | | +| | ... | Recent Notifications: | +| | ... | | +| | ... | Today | +| | Settings | • Your profile was viewed by a | +| +------------+ technology company (1h ago) | +| • Resume downloaded (3h ago) | +| • New job match found (5h ago) | +| | +| Yesterday | +| • New question asked about your | +| leadership experience | +| • Profile view from XYZ Corp | +| | +| This Week | +| • Profile completeness increased | +| to 85% | +| • 3 profile views | +| • Resume generated for "Senior | +| Frontend Position" | +| | +| Notification Settings: | +| [Manage Notification Preferences] | +| | ++------------------------------------------------------+ +``` + +### 26. System Configuration (Admin) +``` ++------------------------------------------------------+ +| BACKSTORY [Logo] [User Menu ▼] | ++------------------------------------------------------+ +| | +| +------------+ | +| | Dashboard | System Configuration | +| | Users | | +| | Analytics | +-----------------------------+ | +| | Config | | AI | Storage | Accounts | API | | +| | Logs | +-----------------------------+ | +| | System | | +| | Settings | AI Configuration: | +| +------------+ | +| Default AI Model: | +| [○] Anthropic Claude | +| [●] OpenAI GPT-4 | +| [○] Self-hosted LLaMA | +| [○] Combination | +| | +| Model Settings: | +| Temperature: [0.7] | +| Max Tokens: [4096] | +| Context Window: [16k] | +| | +| Default Embeddings: | +| [○] OpenAI | +| [●] Self-hosted | +| | +| API Keys: | +| Anthropic: [***********] | +| OpenAI: [***********] | +| | +| [Save Configuration] | +| | ++------------------------------------------------------+ +``` + +### 27. Mobile View - Candidate Dashboard +``` ++-------------------------+ +| BACKSTORY [Menu ☰] | ++-------------------------+ +| | +| Welcome back, [Name]! | +| | +| Profile: 75% complete | +| [Complete Profile] | +| | +| +-------------------+ | +| | Resume Builder | | +| | 3 custom resumes | | +| | [Create New] | | +| +-------------------+ | +| | +| +-------------------+ | +| | Recent Activity | | +| | • 5 profile views | | +| | • 2 downloads | | +| | [View All] | | +| +-------------------+ | +| | +| +-------------------+ | +| | Quick Actions | | +| | [Edit Profile] | | +| | [Add Experience] | | +| | [Configure Q&A] | | +| +-------------------+ | +| | +| [Navigation Tabs] | +| Home | Profile | More | ++-------------------------+ +``` + +### 28. Mobile View - Employer Search +``` ++-------------------------+ +| BACKSTORY [Menu ☰] | ++-------------------------+ +| | +| Search Candidates | +| | +| [Search terms...] | +| | +| Filters: | +| [Filter ▼] | +| | +| Results (24): | +| | +| +-------------------+ | +| | John Developer | | +| | Sr Frontend Eng | | +| | 8+ years • React | | +| | [View Profile] | | +| +-------------------+ | +| | +| +-------------------+ | +| | Jane Coder | | +| | Full Stack Dev | | +| | 6+ years • Node | | +| | [View Profile] | | +| +-------------------+ | +| | +| +-------------------+ | +| | Alex Designer | | +| | UX/UI Designer | | +| | 5+ years • Figma | | +| | [View Profile] | | +| +-------------------+ | +| | +| [Load More] | +| | +| [Navigation Tabs] | +| Home | Search | Saved | ++-------------------------+ +``` + +## Integration Points with External Systems + +### 1. Authentication & Identity +- **OAuth Integration**: Connect with Google, LinkedIn, GitHub +- **SSO Support**: For enterprise employer accounts +- **JWT Authentication**: For API access and mobile apps + +### 2. Content Import/Export +- **LinkedIn Integration**: Import professional experience +- **Resume Parsing**: Upload existing resumes (PDF, DOCX) +- **CSV/JSON Import**: Batch import of candidate data +- **ATS Integration**: Connect with employer ATS systems + +### 3. AI Backends +- **LLM Provider Options**: + - Anthropic Claude (API) + - OpenAI GPT-4 (API) + - Google Gemini (API) + - Self-hosted open source models +- **Embedding Models**: + - OpenAI Embeddings + - Self-hosted alternatives + - Vector database options (Pinecone, Weaviate, etc.) + +### 4. Storage & Data Management +- **Document Storage**: For resumes, profiles, job descriptions +- **Vector Database**: For semantic search capabilities +- **Analytics Database**: For tracking user interactions + +## Permissions Structure + +### 1. Candidate Permissions +- **Profile Visibility Controls**: + - Public (searchable by all employers) + - Private (only visible to approved employers) + - Hidden (not searchable, accessible by direct link only) +- **Contact Permissions**: + - Allow direct contact + - Anonymized contact through system + - Require approval before contact + +### 2. Employer Permissions +- **User Roles**: + - Admin (full access to company account) + - Recruiter (search and contact candidates) + - Hiring Manager (view selected candidates) + - Read-only (view only access) +- **Feature Access**: + - Resume generation limits + - Candidate search filters + - Analytics access + - Talent pool management + +### 3. System Admin Permissions +- **Full System Configuration** +- **User Management** +- **AI Model Configuration** +- **Usage Analytics & Reporting** + +## Deployment Architecture Considerations + +1. **Self-Hosted Option**: + - Docker containers for easy deployment + - Configuration for different LLM backends + - Local vector DB setup + +2. **Cloud-Hosted Option**: + - Multi-tenant architecture + - Subscription tiers for different features + - API access for enterprise integrations + +3. **Hybrid Deployment**: + - Core system in cloud + - Private data and models on-premises + - Secure API connections between components \ No newline at end of file diff --git a/frontend/src/Components/CopyBubble.tsx b/frontend/src/Components/CopyBubble.tsx index 9c1f7bb..4e71b5b 100644 --- a/frontend/src/Components/CopyBubble.tsx +++ b/frontend/src/Components/CopyBubble.tsx @@ -1,18 +1,23 @@ import { useState } from 'react'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import CheckIcon from '@mui/icons-material/Check'; -import IconButton from '@mui/material/IconButton'; +import IconButton, { IconButtonProps } from '@mui/material/IconButton'; import { Tooltip } from '@mui/material'; import { SxProps, Theme } from '@mui/material'; -interface CopyBubbleProps { +interface CopyBubbleProps extends IconButtonProps { content: string | undefined, sx?: SxProps; + tooltip?: string; + onClick?: () => void; } const CopyBubble = ({ content, sx, + tooltip = "Copy to clipboard", + onClick, + ...rest } : CopyBubbleProps) => { const [copied, setCopied] = useState(false); @@ -25,10 +30,14 @@ const CopyBubble = ({ setCopied(true); setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds }); + + if (onClick) { + onClick(); + } }; return ( - + {copied ? : } diff --git a/frontend/src/NewApp/BackstoryApp.tsx b/frontend/src/NewApp/BackstoryApp.tsx index 42eb6c9..a2ffe5b 100644 --- a/frontend/src/NewApp/BackstoryApp.tsx +++ b/frontend/src/NewApp/BackstoryApp.tsx @@ -1,39 +1,16 @@ -import React, { ReactElement, useEffect, useState, useRef, useCallback} from 'react'; -import { Box, Typography, Container, Paper } from '@mui/material'; +import React, { useEffect, useState, useRef, useCallback } from 'react'; import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'; -import DashboardIcon from '@mui/icons-material/Dashboard'; -import PersonIcon from '@mui/icons-material/Person'; -import ChatIcon from '@mui/icons-material/Chat'; -import HistoryIcon from '@mui/icons-material/History'; -import DescriptionIcon from '@mui/icons-material/Description'; -import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer'; -import BarChartIcon from '@mui/icons-material/BarChart'; -import SettingsIcon from '@mui/icons-material/Settings'; -import SearchIcon from '@mui/icons-material/Search'; -import BookmarkIcon from '@mui/icons-material/Bookmark'; -import WorkIcon from '@mui/icons-material/Work'; -import InfoIcon from '@mui/icons-material/Info'; -import BusinessIcon from '@mui/icons-material/Business'; -import { SxProps, Theme } from '@mui/material'; import { ThemeProvider } from '@mui/material/styles'; import { backstoryTheme } from '../BackstoryTheme'; -import {Header} from './Components/Header'; -import { Scrollable } from '../Components/Scrollable'; -import { Footer } from './Components/Footer'; -import { Snack, SeverityType } from '../Components/Snack'; +import { SeverityType } from '../Components/Snack'; import { Query } from '../Components/ChatQuery'; import { ConversationHandle } from './Components/Conversation'; - -import { HomePage } from './Pages/HomePage'; -import { ChatPage } from './Pages/ChatPage'; -import { ResumeBuilderPage } from '../Pages/ResumeBuilderPage'; -// import { BackstoryThemeVisualizer } from './BackstoryThemeVisualizer'; -import { DocsPage } from './Pages/DocsPage'; +import { UserProvider } from './Components/UserContext'; import { BetaPage } from './Pages/BetaPage'; -import { CreateProfilePage } from './Pages/CreateProfilePage'; -import { VectorVisualizerPage } from 'Pages/VectorVisualizerPage'; +import { UserRoute } from './routes/UserRoute'; +import { BackstoryLayout } from './Components/BackstoryLayout'; import './BackstoryApp.css'; import '@fontsource/roboto/300.css'; @@ -43,118 +20,6 @@ import '@fontsource/roboto/700.css'; import { connectionBase } from '../Global'; -type NavigationLinkType = { - name: string; - path: string; - icon?: ReactElement; - label?: ReactElement; -}; - -const DefaultNavItems : NavigationLinkType[] = [ - { name: 'Chat', path: '/chat', icon: }, - { name: 'Resume Builder', path: '/resume-builder', icon: }, - { name: 'Knowledge Explorer', path: '/knowledge-explorer', icon: }, - { name: 'Docs', path: '/docs', icon: }, - // { name: 'How It Works', path: '/how-it-works', icon: }, - // { name: 'For Candidates', path: '/for-candidates', icon: }, - // { name: 'For Employers', path: '/for-employers', icon: }, - // { name: 'Pricing', path: '/pricing', icon: }, -]; - -const CandidateNavItems : NavigationLinkType[]= [ - { name: 'Dashboard', icon: , path: '/dashboard' }, - { name: 'Profile', icon: , path: '/profile' }, - { name: 'Backstory', icon: , path: '/backstory' }, - { name: 'Resumes', icon: , path: '/resumes' }, - { name: 'Q&A Setup', icon: , path: '/qa-setup' }, - { name: 'Analytics', icon: , path: '/analytics' }, - { name: 'Settings', icon: , path: '/settings' }, -]; - -const EmployerNavItems: NavigationLinkType[] = [ - { name: 'Dashboard', icon: , path: '/dashboard' }, - { name: 'Search', icon: , path: '/search' }, - { name: 'Saved', icon: , path: '/saved' }, - { name: 'Jobs', icon: , path: '/jobs' }, - { name: 'Company', icon: , path: '/company' }, - { name: 'Analytics', icon: , path: '/analytics' }, - { name: 'Settings', icon: , path: '/settings' }, -]; - -// Navigation links based on user type -const getNavigationLinks = (userType: string, isLoggedIn: boolean) : NavigationLinkType[] => { - if (!isLoggedIn) { - return DefaultNavItems; - } - - if (userType === 'candidate') { - return CandidateNavItems; - } - - // Employer navigation - return EmployerNavItems; -}; - -// Placeholder for page components -const DashboardPage = () => Dashboard; -const ProfilePage = () => Profile; -const BackstoryPage = () => Backstory; -const ResumesPage = () => Resumes; -const QASetupPage = () => Q&A Setup; -const AnalyticsPage = () => Analytics; -const SettingsPage = () => Settings; -const SearchPage = () => Search; -const SavedPage = () => Saved; -const JobsPage = () => Jobs; -const CompanyPage = () => Company; - -// This is a placeholder for your actual user context -type UserContext = { - user: { - type: string; - name: string; - avatar?: any; - }; - isAuthenticated: boolean; - logout: () => void; -}; - -const useUserContext = () : UserContext => { - return { - user: { - type: 'candidate', // or 'employer' - name: 'John Doe', - avatar: null, - }, - isAuthenticated: false, - logout: () => console.log('Logging out'), - }; -}; - -interface BackstoryPageContainerProps { - children?: React.ReactNode; - sx?: SxProps; - userContext: UserContext; -}; - -const BackstoryPageContainer = (props : BackstoryPageContainerProps) => { - const { children, sx } = props; - return ( - - - {children} - - - ); -} - // Cookie handling functions const getCookie = (name: string) => { const value = `; ${document.cookie}`; @@ -171,9 +36,6 @@ const setCookie = (name: string, value: string, days = 7) => { const BackstoryApp = () => { const navigate = useNavigate(); const location = useLocation(); - const userContext : UserContext = useUserContext(); - const { user, isAuthenticated } = userContext; - const [navigationLinks, setNavigationLinks] = useState([]); const snackRef = useRef(null); const chatRef = useRef(null); const [sessionId, setSessionId] = useState(undefined); @@ -199,15 +61,17 @@ const BackstoryApp = () => { try { let response; let newSessionId; + let action = "" if (urlSessionId) { // Attempt to join session from URL - response = await fetch(`${connectionBase}/join-session/${urlSessionId}`, { + response = await fetch(`${connectionBase}/api/join-session/${urlSessionId}`, { credentials: 'include', }); if (!response.ok) { throw new Error('Session not found'); } newSessionId = (await response.json()).id; + action = "Joined"; } else if (cookieSessionId) { // Attempt to join session from cookie response = await fetch(`${connectionBase}/api/join-session/${cookieSessionId}`, { @@ -222,6 +86,9 @@ const BackstoryApp = () => { if (!response.ok) { throw new Error('Failed to create session'); } + action = "Created new"; + } else { + action = "Joined"; } newSessionId = (await response.json()).id; } else { @@ -233,6 +100,7 @@ const BackstoryApp = () => { if (!response.ok) { throw new Error('Failed to create session'); } + action = "Created new"; newSessionId = (await response.json()).id; } setSessionId(newSessionId); @@ -241,9 +109,14 @@ const BackstoryApp = () => { setCookie('session_id', newSessionId); } // Update URL without reloading - if (!storeInCookie || (urlSessionId && urlSessionId !== newSessionId)) { - window.history.replaceState(null, '', `?id=${newSessionId}`); + if (!storeInCookie) { + // Update only the 'id' query parameter, preserving the current path + navigate(`${location.pathname}?id=${newSessionId}`, { replace: true }); + } else { + // Clear all query parameters, preserve the current path + navigate(location.pathname, { replace: true }); } + setSnack(`${action} session ${newSessionId}`); } catch (err) { setSnack("" + err); } @@ -251,89 +124,40 @@ const BackstoryApp = () => { fetchSession(); }, [cookieSessionId, setSnack, storeInCookie, urlSessionId]); - const copyLink = () => { - const link = `${window.location.origin}${window.location.pathname}?id=${sessionId}`; - navigator.clipboard.writeText(link).then(() => { - alert('Link copied to clipboard!'); - }).catch(() => { - alert('Failed to copy link'); - }); - }; - useEffect(() => { const currentRoute = location.pathname.split("/")[1] ? `/${location.pathname.split("/")[1]}` : "/"; setPage(currentRoute); }, [location.pathname]); - useEffect(() => { - setNavigationLinks(getNavigationLinks(user.type, isAuthenticated)); - }, [user.type, isAuthenticated]); - // Render appropriate routes based on user type return ( -
- - - - {sessionId !== undefined && - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - {/* Candidate-specific routes */} - {user.type === 'candidate' && ( - <> - } /> - } /> - } /> - } /> - - )} + + + } /> + {/* Static/shared routes */} + + } + /> + } /> + + - {/* Employer-specific routes */} - {user.type === 'employer' && ( - <> - } /> - } /> - } /> - } /> - - )} - - {/* Common routes */} - } /> - } /> - - {/* Redirect to BETA by default */} - } /> - - } - {location.pathname === "/" &&