"use client";
import React, { useState, useCallback, useMemo, useEffect, ReactNode } from "react";
import {
X,
Search,
BookOpen,
Rocket,
Users,
Calendar,
Mic,
Scissors,
Send,
FileText,
Settings,
HelpCircle,
ChevronRight,
Keyboard,
Lightbulb,
Zap,
Globe,
Play,
BarChart3,
ExternalLink,
MessageSquare,
Sparkles,
} from "lucide-react";
// ─── Help Content Types ────────────────────────────────
interface HelpSection {
id: string;
title: string;
icon: React.ElementType;
color: string;
articles: HelpArticle[];
}
interface HelpArticle {
id: string;
title: string;
content: ReactNode;
shortcut?: string;
tips?: string[];
}
// ─── Help Content Database ─────────────────────────────
const helpSections: HelpSection[] = [
{
id: "getting-started",
title: "Getting Started",
icon: Rocket,
color: "var(--color-primary)",
articles: [
{
id: "welcome",
title: "Welcome to MicProtocol",
content: (
MicProtocol is your all-in-one platform for podcast guest management. From discovering guests to publishing episodes, we handle the entire workflow so you can focus on creating great content.
Quick Start Checklist:
Create your first podcast
Add guests to your Pipeline
Send outreach sequences
Schedule recordings
Record with MicProtocol Studio
Create viral clips in Content Studio
),
tips: [
"Press ? or Ctrl+/ anytime to see all keyboard shortcuts",
"Use Ctrl+K to quickly search across the platform",
],
},
{
id: "keyboard-shortcuts",
title: "Keyboard Shortcuts",
content: (
MicProtocol is designed for power users. Use keyboard shortcuts to navigate and perform actions without touching your mouse.
),
},
{
id: "navigation",
title: "Navigating the Dashboard",
content: (
The sidebar provides quick access to all major sections. The active section is highlighted with an orange indicator bar.
),
},
],
},
{
id: "guest-pipeline",
title: "Guest Pipeline",
icon: Users,
color: "var(--status-prospect)",
articles: [
{
id: "pipeline-overview",
title: "Understanding the Pipeline",
content: (
The Guest Pipeline is a kanban board that tracks guests through five stages: Prospect → Contacted → Scheduled → Recorded → Published .
Drag and drop guest cards between columns to update their status. The pipeline provides a visual overview of your entire guest workflow.
Pro Tip: Use the priority filter to focus on high-value guests first. High priority (70+) guests are most likely to convert.
),
tips: [
"Drag cards between columns to change guest status",
"Use Ctrl+A to select all visible guests for bulk actions",
"Press N to quickly add a new guest",
],
},
{
id: "adding-guests",
title: "Adding Guests",
content: (
Click the "Add Guest" button or press N to open the add guest modal. You'll need at minimum a name and email address.
Guest Fields:
Full Name — Required. The guest's display name.Email — Required. Used for outreach sequences.Company — Optional. Helps with personalization.Title — Optional. Job title or role.Bio — Optional. Auto-enriched from LinkedIn when available.Social Links — Optional. LinkedIn, Twitter, website.
),
},
{
id: "guest-detail",
title: "Guest Detail Panel",
content: (
Click any guest card to open the detail panel. This gives you a complete view of the guest including contact info, technical comfort profile, timeline, and episodes.
Tabs:
Overview — Contact info, bio, technical profile, tags, notesTimeline — Journey events, outreach history, notesEpisodes — Scheduled and past episodes with this guest
),
tips: [
"Press Escape to close the detail panel",
"The technical profile helps you prepare for recording sessions",
],
},
{
id: "bulk-actions",
title: "Bulk Actions",
content: (
Select multiple guests using checkboxes (or press Ctrl+A to select all). A bulk actions bar will appear at the top.
Available Bulk Actions:
Move to Status — Batch update guest statusDelete — Remove multiple guests at once
),
},
],
},
{
id: "scheduling",
title: "Scheduling",
icon: Calendar,
color: "var(--status-scheduled)",
articles: [
{
id: "schedule-overview",
title: "Managing Your Schedule",
content: (
The Schedule page shows a weekly calendar view of your recording sessions. Navigate between weeks using the arrow buttons or keyboard shortcuts.
),
},
{
id: "recording-slots",
title: "Recording Slots",
content: (
Click "Add Slot" to create a new recording session. You'll need to select an episode, date, and time range.
Slot Fields:
Episode — Select a scheduled episodeDate — Recording dateStart/End Time — Time window for the sessionTimezone — Auto-detected from your browserMeet Link — Optional. Zoom, Google Meet, etc.
),
},
],
},
{
id: "recording",
title: "Recording Studio",
icon: Mic,
color: "var(--color-error)",
articles: [
{
id: "studio-overview",
title: "MicProtocol Studio",
content: (
MicProtocol Studio provides local-first, lossless double-ender recording. Audio is recorded locally on each participant's device and synced via NTP timestamps for perfect quality.
Important: Both host and guest should use the Studio for the best quality. The recording continues even if the internet connection drops.
),
},
{
id: "recording-controls",
title: "Recording Controls",
content: (
The recording interface is simple and distraction-free. Use keyboard shortcuts for quick control during recording.
Mute Warning: If you're speaking while muted, a visual alert will appear. This prevents "Can you hear me?" moments.
),
tips: [
"The timer glows red during recording for visibility",
"Audio chunks are persisted to IndexedDB as a safety net",
"Storage estimation helps avoid mid-recording space issues",
],
},
{
id: "double-ender",
title: "Double-End Recording",
content: (
Double-ender recording means each participant records their own audio locally. This eliminates quality issues from internet compression and provides studio-quality audio for post-production.
How It Works:
Both participants join the Studio session
Audio is recorded locally on each device
NTP clock sync ensures timestamps align
After recording, tracks are uploaded and synced
The Content Studio processes the merged audio
),
},
],
},
{
id: "content-studio",
title: "Content Studio",
icon: Scissors,
color: "var(--color-success)",
articles: [
{
id: "studio-overview",
title: "Content Studio Overview",
content: (
Content Studio uses AI to automatically detect viral moments in your episodes and generate platform-ready clips. Transform long-form content into TikTok, YouTube Shorts, LinkedIn, and Twitter content.
),
tips: [
"Press D to auto-detect clips from the latest episode",
"High virality scores (90+) indicate strong viral potential",
],
},
{
id: "clip-detection",
title: "AI Clip Detection",
content: (
Click "Auto-Detect Clips" or press D to analyze your latest recorded episode. The AI identifies engaging moments based on:
Emotional peaks and energy spikes
Contrarian or surprising statements
Actionable advice and frameworks
Storytelling moments
Quote-worthy soundbites
),
},
{
id: "exporting",
title: "Exporting Clips",
content: (
Once you approve a clip, click "Export" to generate a platform-ready file. Choose your target platform and the clip will be reformatted with the correct aspect ratio and dimensions.
Export includes:
Correct aspect ratio for the platform
Suggested caption and hashtags
Subtitle burn-in (when available)
Optimized encoding for each platform
),
},
],
},
{
id: "outreach",
title: "Outreach",
icon: Send,
color: "var(--color-info)",
articles: [
{
id: "outreach-overview",
title: "Email Sequences",
content: (
Outreach sequences automate your guest communication. Create multi-step email sequences that adapt based on guest responses.
),
},
{
id: "creating-sequences",
title: "Creating Sequences",
content: (
To start an outreach sequence, open a guest in the Pipeline and click "Send Outreach". You can customize the email template and timing for each step.
Sequence Steps:
Initial Outreach — Introduction and invitationFollow-up — Reminder if no responseLast Chance — Final attempt with urgency
),
},
],
},
{
id: "network",
title: "Guest Network",
icon: Globe,
color: "var(--color-secondary)",
articles: [
{
id: "network-overview",
title: "Discovering Guests",
content: (
The Guest Network is a verified marketplace of podcast guests. Browse experts by category, view their profiles, and invite them to your show.
Verification: All network guests have verified profiles with social links, bio, and episode history. Look for the verification badge.
),
},
],
},
{
id: "settings",
title: "Settings",
icon: Settings,
color: "var(--text-tertiary)",
articles: [
{
id: "profile",
title: "Profile Settings",
content: (
Manage your account details, avatar, and notification preferences. Your profile information is visible to guests in the network.
Avatar — Upload a professional photoDisplay Name — How you appear to guestsEmail Notifications — Configure alert preferences
),
},
{
id: "platform",
title: "Platform Settings",
content: (
Configure your podcast platform integrations, default recording settings, and team permissions.
),
},
],
},
];
// ─── Helper Components ─────────────────────────────────
function ShortcutCard({ shortcut, description }: { shortcut: string; description: string }) {
return (
{description}
{shortcut}
);
}
function NavHelpItem({ icon, label, description }: { icon: ReactNode; label: string; description: string }) {
return (
);
}
function StatCard({ label, description }: { label: string; description: string }) {
return (
);
}
function PlatformBadge({ name, aspect, color }: { name: string; aspect: string; color: string }) {
return (
{name}
{aspect}
);
}
// ─── Context-Aware Page Help ───────────────────────────
interface PageHelpConfig {
pattern: RegExp;
title: string;
description: string;
quickActions: { label: string; shortcut?: string; description: string }[];
tips: string[];
}
const pageHelpConfigs: PageHelpConfig[] = [
{
pattern: /\/podcasts\/.*\/guests/,
title: "Guest Pipeline",
description: "Manage your guest workflow from prospect to published. Drag cards between columns to update status.",
quickActions: [
{ label: "Add Guest", shortcut: "N", description: "Open the add guest modal" },
{ label: "Search", shortcut: "/", description: "Focus the search bar" },
{ label: "Toggle View", shortcut: "V", description: "Switch between kanban and list" },
{ label: "Select All", shortcut: "Ctrl+A", description: "Select all visible guests" },
{ label: "Filter: High", shortcut: "2", description: "Show high-priority guests" },
{ label: "Clear Selection", shortcut: "Esc", description: "Deselect all guests" },
],
tips: [
"Drag guests between columns to change their status",
"Click a guest card to see full details and actions",
"Use the priority filter to focus on high-value guests",
],
},
{
pattern: /\/podcasts\/.*\/schedule/,
title: "Schedule",
description: "Manage recording sessions and availabilities. Navigate weeks with arrow keys.",
quickActions: [
{ label: "Previous Week", shortcut: "←", description: "Go to previous week" },
{ label: "Next Week", shortcut: "→", description: "Go to next week" },
{ label: "Go to Today", shortcut: "T", description: "Jump to current week" },
{ label: "Add Slot", shortcut: "A", description: "Create a recording slot" },
],
tips: [
"Slots show confirmed (blue) and pending (yellow) states",
"Click a slot to view details or add a meet link",
"Calendar sync is coming soon",
],
},
{
pattern: /\/podcasts\/.*\/record/,
title: "Recording Studio",
description: "Local-first, lossless double-ender recording. Keep your hands on the keyboard.",
quickActions: [
{ label: "Start/Stop", shortcut: "Space", description: "Toggle recording" },
{ label: "Toggle Mute", shortcut: "M", description: "Mute/unmute microphone" },
],
tips: [
"The timer glows red during active recording",
"A warning appears if you speak while muted",
"Audio is persisted to IndexedDB as a safety net",
],
},
{
pattern: /\/podcasts\/.*\/content-studio/,
title: "Content Studio",
description: "AI-powered clip detection and multi-platform export. Turn episodes into viral content.",
quickActions: [
{ label: "Detect Clips", shortcut: "D", description: "AI-analyze the latest episode" },
],
tips: [
"High virality scores (90+) indicate strong viral potential",
"Approve clips before exporting to ensure quality",
"Each platform has optimized aspect ratios",
],
},
{
pattern: /\/podcasts\/.*\/episodes/,
title: "Episodes",
description: "View and manage all episodes for your podcast. Track status from recording to publication.",
quickActions: [],
tips: [
"Episode status updates automatically as guests move through the pipeline",
"Click an episode to see detailed information and actions",
],
},
{
pattern: /\/outreach/,
title: "Outreach",
description: "Manage email sequences and track engagement metrics. Automate guest communication.",
quickActions: [],
tips: [
"Create sequences from the Guest Pipeline",
"Track open rates and reply rates for optimization",
"Sequences pause automatically when a guest replies",
],
},
{
pattern: /\/guest-network/,
title: "Guest Network",
description: "Discover verified podcast guests. Browse by category and invite experts to your show.",
quickActions: [],
tips: [
"All network guests have verified profiles",
"Use filters to find guests by expertise",
"Invite guests directly to your pipeline",
],
},
{
pattern: /\/diary/,
title: "Diary",
description: "Content planning and episode notes. Organize your thoughts before recording.",
quickActions: [],
tips: [
"Use the flow view to visualize content connections",
"Notes are auto-saved as you type",
],
},
];
function usePageHelp(pathname: string): PageHelpConfig | null {
return useMemo(() => {
return pageHelpConfigs.find((config) => config.pattern.test(pathname)) || null;
}, [pathname]);
}
// ─── Main HelpSystem Component ─────────────────────────
interface HelpSystemProps {
isOpen: boolean;
onClose: () => void;
pathname?: string;
}
export function HelpSystem({ isOpen, onClose, pathname = "" }: HelpSystemProps) {
const [searchQuery, setSearchQuery] = useState("");
const [activeSection, setActiveSection] = useState(null);
const [activeArticle, setActiveArticle] = useState(null);
const pageHelp = usePageHelp(pathname);
// Close the help system and reset internal state
const handleClose = useCallback(() => {
setSearchQuery("");
setActiveSection(null);
setActiveArticle(null);
onClose();
}, [onClose]);
// Close on Escape
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
e.preventDefault();
e.stopPropagation();
handleClose();
}
};
document.addEventListener("keydown", handleKeyDown, true);
return () => document.removeEventListener("keydown", handleKeyDown, true);
}, [isOpen, onClose, handleClose]);
// Navigate to article
const goToArticle = useCallback((sectionId: string, articleId: string) => {
setActiveSection(sectionId);
setActiveArticle(articleId);
setSearchQuery("");
}, []);
// Go back to section list
const goToSectionList = useCallback(() => {
setActiveSection(null);
setActiveArticle(null);
}, []);
// Filter articles based on search
const filteredSections = useMemo(() => {
if (!searchQuery.trim()) return helpSections;
const q = searchQuery.toLowerCase();
return helpSections
.map((section) => ({
...section,
articles: section.articles.filter(
(article) =>
article.title.toLowerCase().includes(q) ||
section.title.toLowerCase().includes(q)
),
}))
.filter((section) => section.articles.length > 0);
}, [searchQuery]);
// Find active article content
const currentArticle = useMemo(() => {
if (!activeSection || !activeArticle) return null;
const section = helpSections.find((s) => s.id === activeSection);
if (!section) return null;
return section.articles.find((a) => a.id === activeArticle) || null;
}, [activeSection, activeArticle]);
if (!isOpen) return null;
return (
<>
{/* Header */}
{activeArticle ? currentArticle?.title : activeSection ? helpSections.find((s) => s.id === activeSection)?.title : "Help Center"}
{/* Content */}
{/* Left Sidebar — Sections */}
{/* Search */}
{/* Page-specific quick help */}
{pageHelp && !searchQuery && (
On this page
{pageHelp.description}
{pageHelp.quickActions.length > 0 && (
{pageHelp.quickActions.slice(0, 4).map((action) => (
{action.label}
{action.shortcut && (
{action.shortcut}
)}
))}
)}
)}
{/* Section list */}
{filteredSections.map((section) => {
const Icon = section.icon;
return (
goToArticle(section.id, section.articles[0].id)}
style={{
display: "flex",
alignItems: "center",
gap: "var(--space-2)",
padding: "var(--space-2) var(--space-3)",
background: "transparent",
border: "none",
borderRadius: "var(--radius-md)",
cursor: "pointer",
fontSize: "var(--text-sm)",
color: "var(--text-secondary)",
textAlign: "left",
width: "100%",
transition: "background var(--transition-fast), color var(--transition-fast)",
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = "var(--bg-secondary)";
e.currentTarget.style.color = "var(--text-primary)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = "transparent";
e.currentTarget.style.color = "var(--text-secondary)";
}}
>
{section.title}
);
})}
{/* Main Content */}
{/* Section articles list */}
{activeSection && !activeArticle && (
← Back to all sections
{helpSections
.find((s) => s.id === activeSection)
?.articles.map((article) => (
setActiveArticle(article.id)}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "var(--space-3) var(--space-4)",
background: "var(--bg-secondary)",
border: "1px solid var(--border-color-subtle)",
borderRadius: "var(--radius-md)",
cursor: "pointer",
fontSize: "var(--text-sm)",
color: "var(--text-primary)",
fontWeight: 500,
textAlign: "left",
width: "100%",
transition: "border-color var(--transition-fast), box-shadow var(--transition-fast)",
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = "var(--color-primary)";
e.currentTarget.style.boxShadow = "var(--shadow-sm)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = "var(--border-color-subtle)";
e.currentTarget.style.boxShadow = "none";
}}
>
{article.title}
))}
)}
{/* Article content */}
{currentArticle && (
← Back to {helpSections.find((s) => s.id === activeSection)?.title}
{currentArticle.content}
{/* Tips */}
{currentArticle.tips && currentArticle.tips.length > 0 && (
Tips
{currentArticle.tips.map((tip, i) => (
{tip}
))}
)}
{/* Page-specific tips */}
{pageHelp && pageHelp.tips.length > 0 && !currentArticle.tips && (
Quick Tips for {pageHelp.title}
{pageHelp.tips.map((tip, i) => (
{tip}
))}
)}
)}
{/* Default view — no section/article selected */}
{!activeSection && !activeArticle && !searchQuery && (
How can we help?
Browse sections or search for specific topics
{/* Quick Links */}
{helpSections.slice(0, 6).map((section) => {
const Icon = section.icon;
return (
goToArticle(section.id, section.articles[0].id)}
style={{
display: "flex",
alignItems: "center",
gap: "var(--space-3)",
padding: "var(--space-3) var(--space-4)",
background: "var(--bg-secondary)",
border: "1px solid var(--border-color-subtle)",
borderRadius: "var(--radius-md)",
cursor: "pointer",
textAlign: "left",
width: "100%",
transition: "border-color var(--transition-fast), transform var(--transition-fast)",
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = section.color;
e.currentTarget.style.transform = "translateY(-1px)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = "var(--border-color-subtle)";
e.currentTarget.style.transform = "none";
}}
>
{section.title}
{section.articles.length} article{section.articles.length !== 1 ? "s" : ""}
);
})}
{/* Keyboard shortcuts hint */}
Keyboard Shortcuts
Press ? or Ctrl+/ to see all shortcuts
)}
{/* Search results */}
{searchQuery && (
{filteredSections.length === 0 ? (
No results for "{searchQuery}"
Try different keywords
) : (
{filteredSections.map((section) => (
{section.title}
{section.articles.map((article) => (
goToArticle(section.id, article.id)}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "var(--space-3) var(--space-4)",
background: "var(--bg-secondary)",
border: "1px solid var(--border-color-subtle)",
borderRadius: "var(--radius-md)",
cursor: "pointer",
fontSize: "var(--text-sm)",
color: "var(--text-primary)",
fontWeight: 500,
textAlign: "left",
width: "100%",
}}
>
{article.title}
))}
))}
)}
)}
{/* Footer */}