diff --git a/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/GuestTab.tsx b/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/GuestTab.tsx index 0db7043a..76685ed6 100644 --- a/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/GuestTab.tsx +++ b/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/GuestTab.tsx @@ -3,12 +3,15 @@ import { Stack, Box, Typography, Chip, Paper } from "@mui/material"; import { Quiz as TalkIcon } from "@mui/icons-material"; import { PodcastAnalysis } from "../../types"; import { AnalysisTabContent } from "../AnalysisTabNav"; +import { TextToSpeechButton } from "../../../shared/TextToSpeechButton"; interface GuestTabProps { analysis: PodcastAnalysis; } export const GuestTab: React.FC = ({ analysis }) => { + const talkingPointsText = analysis.guest_talking_points?.map((p, idx) => `Question ${idx + 1}: ${p}`).join(" ") || ""; + if (!analysis.guest_talking_points || analysis.guest_talking_points.length === 0) { return ( }> @@ -22,6 +25,9 @@ export const GuestTab: React.FC = ({ analysis }) => { return ( }> + + + {analysis.guest_talking_points.map((point: string, idx: number) => ( diff --git a/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/OutlineTab.tsx b/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/OutlineTab.tsx index 66bb2228..4f70ba33 100644 --- a/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/OutlineTab.tsx +++ b/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/OutlineTab.tsx @@ -1,8 +1,9 @@ import React from "react"; -import { Stack, Box, Typography, Chip, TextField, IconButton } from "@mui/material"; -import { ListAlt as ListAltIcon, Add as AddIcon } from "@mui/icons-material"; +import { Stack, Box, Typography, Chip } from "@mui/material"; +import { ListAlt as ListAltIcon } from "@mui/icons-material"; import { PodcastAnalysis } from "../../types"; import { AnalysisTabContent } from "../AnalysisTabNav"; +import { TextToSpeechButton } from "../../../shared/TextToSpeechButton"; interface OutlineTabProps { analysis: PodcastAnalysis; @@ -11,6 +12,11 @@ interface OutlineTabProps { } export const OutlineTab: React.FC = ({ analysis, isEditing, onUpdateOutline }) => { + const outlineText = analysis.suggestedOutlines?.map((outline, idx) => { + const segments = outline.segments?.map((s, sIdx) => `${sIdx + 1}. ${s}`).join(" "); + return `Option ${idx + 1}: ${outline.title}. ${segments}`; + }).join(" ") || ""; + return ( }> @@ -20,6 +26,10 @@ export const OutlineTab: React.FC = ({ analysis, isEditing, onU Option {idx + 1}: {outline.title} + `Step ${sIdx + 1}: ${s}`).join(" ")}`} + size="small" + /> {outline.segments?.map((segment: string, sIdx: number) => ( diff --git a/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/TakeawaysTab.tsx b/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/TakeawaysTab.tsx index 9b243739..27481cf9 100644 --- a/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/TakeawaysTab.tsx +++ b/frontend/src/components/PodcastMaker/AnalysisPanel/tabs/TakeawaysTab.tsx @@ -3,12 +3,15 @@ import { Stack, Box, Typography, Chip, Paper } from "@mui/material"; import { Lightbulb as TipsIcon } from "@mui/icons-material"; import { PodcastAnalysis } from "../../types"; import { AnalysisTabContent } from "../AnalysisTabNav"; +import { TextToSpeechButton } from "../../../shared/TextToSpeechButton"; interface TakeawaysTabProps { analysis: PodcastAnalysis; } export const TakeawaysTab: React.FC = ({ analysis }) => { + const takeawaysText = analysis.key_takeaways?.map((t, idx) => `Takeaway ${idx + 1}: ${t}`).join(" ") || ""; + if (!analysis.key_takeaways || analysis.key_takeaways.length === 0) { return ( }> @@ -22,6 +25,9 @@ export const TakeawaysTab: React.FC = ({ analysis }) => { return ( }> + + + {analysis.key_takeaways.map((takeaway: string, idx: number) => ( diff --git a/frontend/src/components/PodcastMaker/PodcastDashboard/QuerySelection.tsx b/frontend/src/components/PodcastMaker/PodcastDashboard/QuerySelection.tsx index a405add3..85047905 100644 --- a/frontend/src/components/PodcastMaker/PodcastDashboard/QuerySelection.tsx +++ b/frontend/src/components/PodcastMaker/PodcastDashboard/QuerySelection.tsx @@ -23,7 +23,7 @@ import { TextField, IconButton, } from "@mui/material"; -import { Search as SearchIcon, AutoAwesome as AutoAwesomeIcon, Refresh as RefreshIcon, Edit as EditIcon, Delete as DeleteIcon, CheckCircle as CheckCircleIcon } from "@mui/icons-material"; +import { Search as SearchIcon, AutoAwesome as AutoAwesomeIcon, Refresh as RefreshIcon, Edit as EditIcon, Delete as DeleteIcon, CheckCircle as CheckCircleIcon, Help as HelpIcon } from "@mui/icons-material"; import { ResearchProvider } from "../../../services/blogWriterApi"; import { Query } from "../types"; import { GlassyCard, glassyCardSx, PrimaryButton, SecondaryButton } from "../ui"; @@ -113,6 +113,24 @@ export const QuerySelection: React.FC = ({ Research Queries + + + How it works: + + + 1. Select one or more research queries to focus your research.

+ 2. Click "Run Research" to gather web and semantic insights.

+ 3. The research results will be used to generate a factual, relevant podcast script. +
+ + } + arrow + placement="top" + > + +
= ({ ))} - + + {selectedCount === 0 && ( + + Select a query to continue + + )} = ({ : `Run research with ${selectedCount} selected ${selectedCount === 1 ? "query" : "queries"}` } > - {isResearching ? "Running Research..." : "Run Research"} + {isResearching ? "Running Research..." : selectedCount === 0 ? "Next: Select Query" : "Run Research"}