fix podcast generation

surfsense_web/components/chat/ChatPanel/ChatPanelContainer.tsx

@@ -1,8 +1,11 @@
-import { PanelRight } from "lucide-react";
-import { useActionState, useContext, useTransition } from "react";
+"use client";
+import { useAtom, useAtomValue } from "jotai";
+import { LoaderIcon, PanelRight, TriangleAlert } from "lucide-react";
 import { toast } from "sonner";
+import { generatePodcast } from "@/lib/apis/podcast-apis";
 import { cn } from "@/lib/utils";
-import { chatInterfaceContext } from "../ChatInterface";
+import { activeChatAtom, activeChatIdAtom } from "@/stores/chat/active-chat.atom";
+import { chatUIAtom } from "@/stores/chat/chat-ui.atom";
 import { ChatPanelView } from "./ChatPanelView";
 
 export interface GeneratePodcastRequest {
@@ -13,68 +16,52 @@ export interface GeneratePodcastRequest {
 }
 
 export function ChatPanelContainer() {
-	const context = useContext(chatInterfaceContext);
+	const {
+		data: activeChatState,
+		isLoading: isChatLoading,
+		error: chatError,
+	} = useAtomValue(activeChatAtom);
+	const activeChatIdState = useAtomValue(activeChatIdAtom);
+	const authToken = localStorage.getItem("surfsense_bearer_token");
+	const { isChatPannelOpen } = useAtomValue(chatUIAtom);
 
-	if (!context) {
-		throw new Error("chatInterfaceContext must be used within a ChatProvider");
-	}
-
-	const { isChatPannelOpen, setIsChatPannelOpen, chat_id: chatId } = context;
-
-	const generatePodcast = async (request: GeneratePodcastRequest) => {
+	const handleGeneratePodcast = async (request: GeneratePodcastRequest) => {
 		try {
-			const { podcast_title = "SurfSense Podcast" } = request;
-
-			const response = await fetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/podcasts/generate/`,
-				{
-					method: "POST",
-					headers: {
-						Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
-						"Content-Type": "application/json",
-					},
-					body: JSON.stringify({ ...request, podcast_title }),
-				}
-			);
-
-			if (!response.ok) {
-				const errorData = await response.json().catch(() => ({}));
-				throw new Error(errorData.detail || "Failed to generate podcast");
+			if (!authToken) {
+				throw new Error("Authentication error. Please log in again.");
 			}
-
+			await generatePodcast(request, authToken);
 			toast.success(`Podcast generation started!`);
 		} catch (error) {
+			toast.error("Error generating podcast. Please log in again.");
 			console.error("Error generating podcast:", error);
-			console.log(error);
-		} finally {
 		}
 	};
 
-	return chatId && chatId !== "" ? (
+	return activeChatIdState ? (
 		<div
 			className={cn(
-				"border rounded-2xl shrink-0 bg-sidebar flex flex-col h-full transition-all",
-				isChatPannelOpen ? "w-72" : "w-14"
+				"shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 flex flex-col h-full transition-all",
+				isChatPannelOpen ? "w-64" : "w-0"
 			)}
 		>
-			<div
-				className={cn(
-					"w-full border-b p-2 flex items-center transition-all ",
-					isChatPannelOpen ? "justify-end" : " justify-center "
-				)}
-			>
-				<button
-					type="button"
-					onClick={() => setIsChatPannelOpen(!isChatPannelOpen)}
-					className={cn(" shrink-0 rounded-full p-2 w-fit hover:bg-muted")}
-				>
-					<PanelRight className="h-5 w-5" strokeWidth={1.5} />
-				</button>
-			</div>
+			{isChatLoading || chatError ? (
+				<div className="border-b p-2">
+					{isChatLoading ? (
+						<div title="Loading chat" className="flex items-center justify-center h-full">
+							<LoaderIcon strokeWidth={1.5} className="h-5 w-5 animate-spin" />
+						</div>
+					) : chatError ? (
+						<div title="Failed to load chat" className="flex items-center justify-center h-full">
+							<TriangleAlert strokeWidth={1.5} className="h-5 w-5 text-red-600" />
+						</div>
+					) : null}
+				</div>
+			) : null}
 
-			<div className="border-b rounded-lg grow-1">
-				<ChatPanelView generatePodcast={generatePodcast} />
-			</div>
+			{!isChatLoading && !chatError && activeChatState?.chatDetails && (
+				<ChatPanelView generatePodcast={handleGeneratePodcast} />
+			)}
 		</div>
 	) : null;
 }

surfsense_web/components/chat/ChatPanel/ChatPanelView.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+import { useAtom, useAtomValue } from "jotai";
 import { AlertCircle, Pencil, Play, Podcast, RefreshCw } from "lucide-react";
 import { useCallback, useContext, useTransition } from "react";
 import { cn } from "@/lib/utils";
-import { chatInterfaceContext } from "../ChatInterface";
+import { activeChatAtom } from "@/stores/chat/active-chat.atom";
+import { chatUIAtom } from "@/stores/chat/chat-ui.atom";
 import { getPodcastStalenessMessage, isPodcastStale } from "../PodcastUtils";
 import type { GeneratePodcastRequest } from "./ChatPanelContainer";
 import { ConfigModal } from "./ConfigModal";
@@ -14,12 +16,13 @@ interface ChatPanelViewProps {
 }
 
 export function ChatPanelView(props: ChatPanelViewProps) {
-	const context = useContext(chatInterfaceContext);
-	if (!context) {
-		throw new Error("chatInterfaceContext must be used within a ChatProvider");
-	}
+	const [chatUIState, setChatUIState] = useAtom(chatUIAtom);
+	const { data: activeChatState } = useAtomValue(activeChatAtom);
+
+	const { isChatPannelOpen } = chatUIState;
+	const podcast = activeChatState?.podcast;
+	const chatDetails = activeChatState?.chatDetails;
 
-	const { isChatPannelOpen, setIsChatPannelOpen, chatDetails, podcast } = context;
 	const { generatePodcast } = props;
 
 	// Check if podcast is stale
@@ -40,7 +43,7 @@ export function ChatPanelView(props: ChatPanelViewProps) {
 		<div className="w-full">
 			<div
 				className={cn(
-					"w-full cursor-pointer h-full p-4 border-b",
+					"w-full  cursor-pointer p-4 border-b",
 					!isChatPannelOpen && "flex items-center justify-center"
 				)}
 				title={podcastIsStale ? "Regenerate Podcast" : "Generate Podcast"}
@@ -99,7 +102,12 @@ export function ChatPanelView(props: ChatPanelViewProps) {
 					<button
 						title={podcastIsStale ? "Regenerate Podcast" : "Generate Podcast"}
 						type="button"
-						onClick={() => setIsChatPannelOpen(!isChatPannelOpen)}
+						onClick={() =>
+							setChatUIState((prev) => ({
+								...prev,
+								isChatPannelOpen: !isChatPannelOpen,
+							}))
+						}
 						className={cn(
 							"p-2 rounded-full hover:bg-muted transition-colors",
 							podcastIsStale && "text-amber-600 dark:text-amber-500"
@@ -116,7 +124,7 @@ export function ChatPanelView(props: ChatPanelViewProps) {
 			{podcast ? (
 				<div
 					className={cn(
-						"w-full h-full border-b",
+						"w-full border-b",
 						!isChatPannelOpen && "flex items-center justify-center p-4"
 					)}
 				>
@@ -126,7 +134,7 @@ export function ChatPanelView(props: ChatPanelViewProps) {
 						<button
 							title="Play Podcast"
 							type="button"
-							onClick={() => setIsChatPannelOpen(true)}
+							onClick={() => setChatUIState((prev) => ({ ...prev, isChatPannelOpen: true }))}
 							className="p-2 rounded-full hover:bg-muted transition-colors text-green-600 dark:text-green-500"
 						>
 							<Play strokeWidth={1} className="h-5 w-5" />

surfsense_web/components/chat/ChatPanel/ConfigModal.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { useAtomValue } from "jotai";
 import { Pencil } from "lucide-react";
 import { useCallback, useContext, useState } from "react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { chatInterfaceContext } from "../ChatInterface";
+import { activeChatAtom } from "@/stores/chat/active-chat.atom";
 import type { GeneratePodcastRequest } from "./ChatPanelContainer";
 
 interface ConfigModalProps {
@@ -11,15 +12,14 @@ interface ConfigModalProps {
 }
 
 export function ConfigModal(props: ConfigModalProps) {
-	const context = useContext(chatInterfaceContext);
+	const { data: activeChatState } = useAtomValue(activeChatAtom);
+
+	const chatDetails = activeChatState?.chatDetails;
+	const podcast = activeChatState?.podcast;
 
-	if (!context) {
-		throw new Error("chatInterfaceContext must be used within a ChatProvider");
-	}
-	const { chatDetails } = context;
 	const { generatePodcast } = props;
 
-	const [podcastTitle, setPodcastTitle] = useState(chatDetails?.title);
+	const [podcastTitle, setPodcastTitle] = useState(podcast?.title || chatDetails?.title);
 
 	const handleGeneratePost = useCallback(async () => {
 		if (!chatDetails) return;
@@ -27,9 +27,10 @@ export function ConfigModal(props: ConfigModalProps) {
 			type: "CHAT",
 			ids: [chatDetails.id],
 			search_space_id: chatDetails.search_space_id,
-			podcast_title: podcastTitle,
+			podcast_title: podcastTitle || podcast?.title || chatDetails.title,
 		});
 	}, [chatDetails, podcastTitle]);
+
 	return (
 		<Popover>
 			<PopoverTrigger
@@ -50,7 +51,10 @@ export function ConfigModal(props: ConfigModalProps) {
 						id="prompt"
 						defaultValue={podcastTitle}
 						className="w-full rounded-md border border-slate-400/40 p-2"
-						onChange={(e) => setPodcastTitle(e.target.value)}
+						onChange={(e) => {
+							e.stopPropagation();
+							setPodcastTitle(e.target.value);
+						}}
 					></textarea>
 
 					<button