stop propagation in the chat panelcl

surfsense_web/components/chat/ChatInterface.tsx

@@ -26,8 +26,6 @@ interface ChatInterfaceContext {
 	isChatPannelOpen: boolean;
 	setIsChatPannelOpen: (value: boolean) => void;
 	chat_id: string;
-	podcast: PodcastItem | null;
-	setPodcast: (value: PodcastItem) => void;
 	chatDetails: ChatDetails | null;
 }
 

surfsense_web/components/chat/ChatPanel/ChatPanelContainer.tsx

@@ -19,7 +19,7 @@ export function ChatPanelContainer() {
 		throw new Error("chatInterfaceContext must be used within a ChatProvider");
 	}
 
-	const { isChatPannelOpen, setIsChatPannelOpen, chat_id: chatId, setPodcast } = context;
+	const { isChatPannelOpen, setIsChatPannelOpen, chat_id: chatId } = context;
 
 	const generatePodcast = async (request: GeneratePodcastRequest) => {
 		try {
@@ -42,10 +42,6 @@ export function ChatPanelContainer() {
 				throw new Error(errorData.detail || "Failed to generate podcast");
 			}
 
-			const result = await response.json();
-
-			setPodcast(result);
-
 			toast.success(`Podcast generation started!`);
 		} catch (error) {
 			console.error("Error generating podcast:", error);

surfsense_web/components/chat/ChatPanel/ChatPanelView.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { Pencil, Podcast } from "lucide-react";
-import { useContext, useTransition } from "react";
+import { useCallback, useContext, useTransition } from "react";
 import { cn } from "@/lib/utils";
 import { chatInterfaceContext } from "../ChatInterface";
-import type { GeneratePodcastRequest } from "./actions";
+import type { GeneratePodcastRequest } from "./ChatPanelContainer";
 import { ConfigModal } from "./ConfigModal";
 
 interface ChatPanelViewProps {
@@ -17,37 +17,40 @@ export function ChatPanelView(props: ChatPanelViewProps) {
 		throw new Error("chatInterfaceContext must be used within a ChatProvider");
 	}
 
-	const { isChatPannelOpen, setIsChatPannelOpen } = context;
+	const { isChatPannelOpen, setIsChatPannelOpen, chatDetails } = context;
 	const { generatePodcast } = props;
 
-	const [isGeneratingPodcast, startGeneratingPodcast] = useTransition();
+	const handleGeneratePost = useCallback(async () => {
-
+		if (!chatDetails) return;
-	const handleGeneratePodcast = () => {
+		await generatePodcast({
-		startGeneratingPodcast(() => {
+			type: "CHAT",
-			generatePodcast({
+			ids: [chatDetails.id],
-				type: "CHAT",
+			search_space_id: chatDetails.search_space_id,
-				ids: [1],
+			podcast_title: chatDetails.title,
-				search_space_id: 1,
-			});
 		});
-	};
+	}, [chatDetails]);
 
 	return (
 		<div className="w-full">
 			<div
 				className={cn(
-					"w-full h-full p-4 border-b",
+					"w-full cursor-pointer h-full p-4 border-b",
 					!isChatPannelOpen && "flex items-center justify-center"
 				)}
+				title="Generate Podcast"
 			>
 				{isChatPannelOpen ? (
-					<div className=" space-y-3 rounded-xl p-3 bg-gradient-to-r from-slate-400/50 to-slate-200/50 dark:from-slate-400/30 dark:to-slate-800/60">
+					<button
+						type="button"
+						onClick={handleGeneratePost}
+						className=" space-y-3 rounded-xl p-3 bg-gradient-to-r from-slate-400/50 to-slate-200/50 dark:from-slate-400/30 dark:to-slate-800/60"
+					>
 						<div className="w-full flex items-center justify-between">
 							<Podcast strokeWidth={1} />
 							<ConfigModal generatePodcast={generatePodcast} />
 						</div>
 						<p>Generate Podcast</p>
-					</div>
+					</button>
 				) : (
 					<button
 						title="Generate Podcast"

surfsense_web/components/chat/ChatPanel/ConfigModal.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { Pencil } from "lucide-react";
-import { useCallback, useContext } from "react";
+import { useCallback, useContext, useState } from "react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { chatInterfaceContext } from "../ChatInterface";
-import type { GeneratePodcastRequest } from "./actions";
+import type { GeneratePodcastRequest } from "./ChatPanelContainer";
 
 interface ConfigModalProps {
 	generatePodcast: (request: GeneratePodcastRequest) => Promise<void>;
@@ -19,25 +19,25 @@ export function ConfigModal(props: ConfigModalProps) {
 	const { chatDetails } = context;
 	const { generatePodcast } = props;
 
+	const [podcastTitle, setPodcastTitle] = useState(chatDetails?.title);
+
 	const handleGeneratePost = useCallback(async () => {
 		if (!chatDetails) return;
 		await generatePodcast({
 			type: "CHAT",
 			ids: [chatDetails.id],
 			search_space_id: chatDetails.search_space_id,
-			podcast_title: chatDetails.title,
+			podcast_title: podcastTitle,
 		});
-	}, [chatDetails]);
+	}, [chatDetails, podcastTitle]);
 	return (
 		<Popover>
-			<PopoverTrigger>
+			<PopoverTrigger
-				<button
+				title="Edit the prompt"
-					type="button"
+				className="rounded-full p-2 bg-slate-400/30 hover:bg-slate-400/40"
-					title="Edit the prompt"
+				onClick={(e) => e.stopPropagation()}
-					className="rounded-full p-2 bg-slate-400/30 hover:bg-slate-400/40"
+			>
-				>
+				<Pencil strokeWidth={1} className="h-4 w-4" />
-					<Pencil strokeWidth={1} className="h-4 w-4" />
-				</button>
 			</PopoverTrigger>
 			<PopoverContent align="end" className="bg-sidebar w-96 ">
 				<form className="flex flex-col gap-3 w-full">
@@ -48,8 +48,9 @@ export function ConfigModal(props: ConfigModalProps) {
 					<textarea
 						name="prompt"
 						id="prompt"
-						defaultValue={chatDetails?.title}
+						defaultValue={podcastTitle}
 						className="w-full rounded-md border border-slate-400/40 p-2"
+						onChange={(e) => setPodcastTitle(e.target.value)}
 					></textarea>
 
 					<button