apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-28 10:26:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat: podcast and audio UI is now mobile responsive

Browse source
This commit is contained in:
Anish Sarkar 2026-01-27 19:47:07 +05:30
parent f7122cd477
commit a3b6012fb2
2 changed files with 69 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

52
surfsense_web/components/tool-ui/audio.tsx
View file

@ -149,16 +149,16 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
return ( return (
<div <div
className={cn( className={cn(
"flex items-center gap-4 rounded-xl border border-destructive/20 bg-destructive/5 p-4", "flex items-center gap-3 sm:gap-4 rounded-xl border border-destructive/20 bg-destructive/5 p-3 sm:p-4",
className className
)} )}
> >
<div className="flex size-16 items-center justify-center rounded-lg bg-destructive/10"> <div className="flex size-12 sm:size-16 shrink-0 items-center justify-center rounded-lg bg-destructive/10">
<Volume2Icon className="size-8 text-destructive" /> <Volume2Icon className="size-6 sm:size-8 text-destructive" />
</div> </div>
<div className="flex-1"> <div className="flex-1 min-w-0">
<p className="font-medium text-destructive">{title}</p> <p className="font-medium text-destructive text-sm sm:text-base truncate">{title}</p>
<p className="text-destructive/70 text-sm">{error}</p> <p className="text-destructive/70 text-xs sm:text-sm">{error}</p>
</div> </div>
</div> </div>
); );
@ -168,7 +168,7 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
<div <div
id={id} id={id}
className={cn( className={cn(
"group relative overflow-hidden rounded-xl border bg-gradient-to-br from-background to-muted/30 p-4 shadow-sm transition-all hover:shadow-md", "group relative overflow-hidden rounded-xl border bg-gradient-to-br from-background to-muted/30 p-3 sm:p-4 shadow-sm transition-all hover:shadow-md",
className className
)} )}
> >
@ -177,15 +177,15 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
<track kind="captions" srcLang="en" label="English captions" default /> <track kind="captions" srcLang="en" label="English captions" default />
</audio> </audio>
<div className="flex gap-4"> <div className="flex gap-3 sm:gap-4">
{/* Artwork */} {/* Artwork */}
<div className="relative shrink-0"> <div className="relative shrink-0">
<div className="relative size-20 overflow-hidden rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 shadow-inner"> <div className="relative size-14 sm:size-20 overflow-hidden rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 shadow-inner">
{artwork ? ( {artwork ? (
<Image src={artwork} alt={title} fill className="object-cover" unoptimized /> <Image src={artwork} alt={title} fill className="object-cover" unoptimized />
) : ( ) : (
<div className="flex size-full items-center justify-center"> <div className="flex size-full items-center justify-center">
<Volume2Icon className="size-8 text-primary/50" /> <Volume2Icon className="size-6 sm:size-8 text-primary/50" />
</div> </div>
)} )}
</div> </div>
@ -195,14 +195,14 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
<div className="flex min-w-0 flex-1 flex-col justify-between"> <div className="flex min-w-0 flex-1 flex-col justify-between">
{/* Title and description */} {/* Title and description */}
<div className="min-w-0"> <div className="min-w-0">
<h3 className="truncate font-semibold text-foreground">{title}</h3> <h3 className="truncate font-semibold text-foreground text-sm sm:text-base">{title}</h3>
{description && ( {description && (
<p className="mt-0.5 line-clamp-1 text-muted-foreground text-sm">{description}</p> <p className="mt-0.5 line-clamp-1 text-muted-foreground text-xs sm:text-sm">{description}</p>
)} )}
</div> </div>
{/* Progress bar */} {/* Progress bar */}
<div className="mt-2 space-y-1"> <div className="mt-1.5 sm:mt-2 space-y-0.5 sm:space-y-1">
<Slider <Slider
value={[currentTime]} value={[currentTime]}
max={duration || 100} max={duration || 100}
@ -211,7 +211,7 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
className="cursor-pointer" className="cursor-pointer"
disabled={isLoading} disabled={isLoading}
/> />
<div className="flex justify-between text-muted-foreground text-xs"> <div className="flex justify-between text-muted-foreground text-[10px] sm:text-xs">
<span>{formatTime(currentTime)}</span> <span>{formatTime(currentTime)}</span>
<span>{formatTime(duration)}</span> <span>{formatTime(duration)}</span>
</div> </div>
@ -220,33 +220,33 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
</div> </div>
{/* Controls */} {/* Controls */}
<div className="mt-3 flex items-center justify-between border-t pt-3"> <div className="mt-2 sm:mt-3 flex items-center justify-between border-t pt-2 sm:pt-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-1.5 sm:gap-2">
{/* Play/Pause button */} {/* Play/Pause button */}
<Button <Button
variant="default" variant="default"
size="sm" size="sm"
onClick={togglePlayPause} onClick={togglePlayPause}
disabled={isLoading} disabled={isLoading}
className="gap-2" className="gap-1.5 sm:gap-2 h-7 sm:h-8 px-2.5 sm:px-3 text-xs sm:text-sm"
> >
{isLoading ? ( {isLoading ? (
<div className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent" /> <div className="size-3 sm:size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
) : isPlaying ? ( ) : isPlaying ? (
<PauseIcon className="size-4" /> <PauseIcon className="size-3 sm:size-4" />
) : ( ) : (
<PlayIcon className="size-4" /> <PlayIcon className="size-3 sm:size-4" />
)} )}
{isPlaying ? "Pause" : "Play"} {isPlaying ? "Pause" : "Play"}
</Button> </Button>
{/* Volume control */} {/* Volume control */}
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1 sm:gap-1.5">
<Button variant="ghost" size="icon" onClick={toggleMute} className="size-8"> <Button variant="ghost" size="icon" onClick={toggleMute} className="size-7 sm:size-8">
{isMuted ? <VolumeXIcon className="size-4" /> : <Volume2Icon className="size-4" />} {isMuted ? <VolumeXIcon className="size-3.5 sm:size-4" /> : <Volume2Icon className="size-3.5 sm:size-4" />}
</Button> </Button>
{/* Custom volume bar - visually distinct from progress slider */} {/* Custom volume bar - visually distinct from progress slider */}
<div className="relative flex h-6 w-16 items-center"> <div className="relative flex h-6 w-12 sm:w-16 items-center">
<div className="relative h-1 w-full rounded-full bg-muted-foreground/20"> <div className="relative h-1 w-full rounded-full bg-muted-foreground/20">
<div <div
className="absolute left-0 top-0 h-full rounded-full bg-muted-foreground/60 transition-all" className="absolute left-0 top-0 h-full rounded-full bg-muted-foreground/60 transition-all"
@ -268,8 +268,8 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
</div> </div>
{/* Download button */} {/* Download button */}
<Button variant="outline" size="sm" onClick={handleDownload} className="gap-2"> <Button variant="outline" size="sm" onClick={handleDownload} className="gap-1.5 sm:gap-2 h-7 sm:h-8 px-2.5 sm:px-3 text-xs sm:text-sm">
<DownloadIcon className="size-4" /> <DownloadIcon className="size-3 sm:size-4" />
Download Download
</Button> </Button>
</div> </div>

86
surfsense_web/components/tool-ui/generate-podcast.tsx
View file

@ -86,23 +86,23 @@ function parsePodcastDetails(data: unknown): { podcast_transcript?: PodcastTrans
*/ */
function PodcastGeneratingState({ title }: { title: string }) { function PodcastGeneratingState({ title }: { title: string }) {
return ( return (
<div className="my-4 overflow-hidden rounded-xl border border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 p-6"> <div className="my-4 overflow-hidden rounded-xl border border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 p-4 sm:p-6">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 sm:gap-4">
<div className="relative"> <div className="relative shrink-0">
<div className="flex size-16 items-center justify-center rounded-full bg-primary/20"> <div className="flex size-12 sm:size-16 items-center justify-center rounded-full bg-primary/20">
<MicIcon className="size-8 text-primary" /> <MicIcon className="size-6 sm:size-8 text-primary" />
</div> </div>
{/* Animated rings */} {/* Animated rings */}
<div className="absolute inset-1 animate-ping rounded-full bg-primary/20" /> <div className="absolute inset-1 animate-ping rounded-full bg-primary/20" />
</div> </div>
<div className="flex-1"> <div className="flex-1 min-w-0">
<h3 className="font-semibold text-foreground text-lg">{title}</h3> <h3 className="font-semibold text-foreground text-sm sm:text-lg leading-tight">{title}</h3>
<div className="mt-2 flex items-center gap-2 text-muted-foreground"> <div className="mt-1.5 sm:mt-2 flex items-center gap-1.5 sm:gap-2 text-muted-foreground">
<Spinner size="sm" /> <Spinner size="sm" className="size-3 sm:size-4" />
<span className="text-sm">Generating podcast. This may take a few minutes.</span> <span className="text-xs sm:text-sm">Generating podcast. This may take a few minutes.</span>
</div> </div>
<div className="mt-3"> <div className="mt-2 sm:mt-3">
<div className="h-1.5 w-full overflow-hidden rounded-full bg-primary/10"> <div className="h-1 sm:h-1.5 w-full overflow-hidden rounded-full bg-primary/10">
<div className="h-full w-1/3 animate-pulse rounded-full bg-primary" /> <div className="h-full w-1/3 animate-pulse rounded-full bg-primary" />
</div> </div>
</div> </div>
@ -117,15 +117,15 @@ function PodcastGeneratingState({ title }: { title: string }) {
*/ */
function PodcastErrorState({ title, error }: { title: string; error: string }) { function PodcastErrorState({ title, error }: { title: string; error: string }) {
return ( return (
<div className="my-4 overflow-hidden rounded-xl border border-destructive/20 bg-destructive/5 p-6"> <div className="my-4 overflow-hidden rounded-xl border border-destructive/20 bg-destructive/5 p-4 sm:p-6">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 sm:gap-4">
<div className="flex size-16 shrink-0 items-center justify-center rounded-full bg-destructive/10"> <div className="flex size-12 sm:size-16 shrink-0 items-center justify-center rounded-full bg-destructive/10">
<AlertCircleIcon className="size-8 text-destructive" /> <AlertCircleIcon className="size-6 sm:size-8 text-destructive" />
</div> </div>
<div className="flex-1"> <div className="flex-1 min-w-0">
<h3 className="font-semibold text-foreground">{title}</h3> <h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight">{title}</h3>
<p className="mt-1 text-destructive text-sm">Failed to generate podcast</p> <p className="mt-1 text-destructive text-xs sm:text-sm">Failed to generate podcast</p>
<p className="mt-2 text-muted-foreground text-sm">{error}</p> <p className="mt-1.5 sm:mt-2 text-muted-foreground text-xs sm:text-sm">{error}</p>
</div> </div>
</div> </div>
</div> </div>
@ -137,16 +137,16 @@ function PodcastErrorState({ title, error }: { title: string; error: string }) {
*/ */
function AudioLoadingState({ title }: { title: string }) { function AudioLoadingState({ title }: { title: string }) {
return ( return (
<div className="my-4 overflow-hidden rounded-xl border bg-muted/30 p-6"> <div className="my-4 overflow-hidden rounded-xl border bg-muted/30 p-4 sm:p-6">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 sm:gap-4">
<div className="flex size-16 items-center justify-center rounded-full bg-primary/10"> <div className="flex size-12 sm:size-16 shrink-0 items-center justify-center rounded-full bg-primary/10">
<MicIcon className="size-8 text-primary/50" /> <MicIcon className="size-6 sm:size-8 text-primary/50" />
</div> </div>
<div className="flex-1"> <div className="flex-1 min-w-0">
<h3 className="font-semibold text-foreground">{title}</h3> <h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight">{title}</h3>
<div className="mt-2 flex items-center gap-2 text-muted-foreground"> <div className="mt-1.5 sm:mt-2 flex items-center gap-1.5 sm:gap-2 text-muted-foreground">
<Spinner size="sm" /> <Spinner size="sm" className="size-3 sm:size-4" />
<span className="text-sm">Loading audio...</span> <span className="text-xs sm:text-sm">Loading audio...</span>
</div> </div>
</div> </div>
</div> </div>
@ -264,13 +264,13 @@ function PodcastPlayer({
/> />
{/* Transcript section */} {/* Transcript section */}
{transcript && transcript.length > 0 && ( {transcript && transcript.length > 0 && (
<details className="mt-3 rounded-lg border bg-muted/30 p-3"> <details className="mt-2 sm:mt-3 rounded-lg border bg-muted/30 p-2.5 sm:p-3">
<summary className="cursor-pointer font-medium text-muted-foreground text-sm hover:text-foreground"> <summary className="cursor-pointer font-medium text-muted-foreground text-xs sm:text-sm hover:text-foreground">
View transcript ({transcript.length} entries) View transcript ({transcript.length} entries)
</summary> </summary>
<div className="mt-3 space-y-3 max-h-96 overflow-y-auto"> <div className="mt-2 sm:mt-3 space-y-2 sm:space-y-3 max-h-64 sm:max-h-96 overflow-y-auto">
{transcript.map((entry, idx) => ( {transcript.map((entry, idx) => (
<div key={`${idx}-${entry.speaker_id}`} className="text-sm"> <div key={`${idx}-${entry.speaker_id}`} className="text-xs sm:text-sm">
<span className="font-medium text-primary">Speaker {entry.speaker_id + 1}:</span>{" "} <span className="font-medium text-primary">Speaker {entry.speaker_id + 1}:</span>{" "}
<span className="text-muted-foreground">{entry.dialog}</span> <span className="text-muted-foreground">{entry.dialog}</span>
</div> </div>
@ -392,9 +392,9 @@ export const GeneratePodcastToolUI = makeAssistantToolUI<
if (status.type === "incomplete") { if (status.type === "incomplete") {
if (status.reason === "cancelled") { if (status.reason === "cancelled") {
return ( return (
<div className="my-4 rounded-xl border border-muted p-4 text-muted-foreground"> <div className="my-4 rounded-xl border border-muted p-3 sm:p-4 text-muted-foreground">
<p className="flex items-center gap-2"> <p className="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm">
<MicIcon className="size-4" /> <MicIcon className="size-3.5 sm:size-4" />
<span className="line-through">Podcast generation cancelled</span> <span className="line-through">Podcast generation cancelled</span>
</p> </p>
</div> </div>
@ -424,16 +424,16 @@ export const GeneratePodcastToolUI = makeAssistantToolUI<
// The FIRST tool call will display the podcast when ready // The FIRST tool call will display the podcast when ready
if (result.status === "already_generating") { if (result.status === "already_generating") {
return ( return (
<div className="my-4 overflow-hidden rounded-xl border border-amber-500/20 bg-amber-500/5 p-4"> <div className="my-4 overflow-hidden rounded-xl border border-amber-500/20 bg-amber-500/5 p-3 sm:p-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2.5 sm:gap-3">
<div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-amber-500/20"> <div className="flex size-8 sm:size-10 shrink-0 items-center justify-center rounded-full bg-amber-500/20">
<MicIcon className="size-5 text-amber-500" /> <MicIcon className="size-4 sm:size-5 text-amber-500" />
</div> </div>
<div> <div className="min-w-0">
<p className="text-amber-600 dark:text-amber-400 text-sm font-medium"> <p className="text-amber-600 dark:text-amber-400 text-xs sm:text-sm font-medium">
Podcast already in progress Podcast already in progress
</p> </p>
<p className="text-muted-foreground text-xs mt-0.5"> <p className="text-muted-foreground text-[10px] sm:text-xs mt-0.5">
Please wait for the current podcast to complete. Please wait for the current podcast to complete.
</p> </p>
</div> </div>