add the config modal

surfsense_web/components/chat/ChatInterface.tsx

@@ -2,6 +2,7 @@
 
 import { type ChatHandler, ChatSection as LlamaIndexChatSection } from "@llamaindex/chat-ui";
 import { PanelRight } from "lucide-react";
+import { useParams } from "next/navigation";
 import { createContext, useState } from "react";
 import type { ResearchMode } from "@/components/chat";
 import { ChatInputUI } from "@/components/chat/ChatInputGroup";
@@ -42,6 +43,8 @@ export default function ChatInterface({
 		setIsChatPannelOpen,
 	};
 
+	const { chat_id: chatId } = useParams();
+
 	return (
 		<chatInterfaceContext.Provider value={contextValue}>
 			<LlamaIndexChatSection handler={handler} className="flex h-full">
@@ -60,31 +63,33 @@ export default function ChatInterface({
 							/>
 						</div>
 					</div>
-					<div
-						className={cn(
-							"border rounded-2xl shrink-0 flex flex-col h-full transition-all",
-							isChatPannelOpen ? "w-72" : "w-14"
-						)}
-					>
+					{chatId ? (
 						<div
 							className={cn(
-								"w-full border-b p-2 flex items-center transition-all ",
-								isChatPannelOpen ? "justify-end" : " justify-center "
+								"border rounded-2xl shrink-0 bg-sidebar flex flex-col h-full transition-all",
+								isChatPannelOpen ? "w-72" : "w-14"
 							)}
 						>
-							<button
-								type="button"
-								onClick={() => setIsChatPannelOpen(!isChatPannelOpen)}
-								className={cn(" shrink-0 rounded-full p-2 w-fit hover:bg-muted")}
+							<div
+								className={cn(
+									"w-full border-b p-2 flex items-center transition-all ",
+									isChatPannelOpen ? "justify-end" : " justify-center "
+								)}
 							>
-								<PanelRight className="h-5 w-5" strokeWidth={1.5} />
-							</button>
-						</div>
+								<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>
 
-						<div className="border-b rounded-lg grow-1">
-							<ChatPanelContainer />
+							<div className="border-b rounded-lg grow-1">
+								<ChatPanelContainer chatId={typeof chatId === "string" ? chatId : chatId[0]} />
+							</div>
 						</div>
-					</div>
+					) : null}
 				</div>
 			</LlamaIndexChatSection>
 		</chatInterfaceContext.Provider>

surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx

@@ -4,8 +4,13 @@ import { Pencil, Podcast } from "lucide-react";
 import { useContext } from "react";
 import { cn } from "@/lib/utils";
 import { chatInterfaceContext } from "../ChatInterface";
+import { ConfigModal } from "./ConfigModal";
 
-export default function ChatPanelView() {
+interface ChatPanelViewProps {
+	chatId: string;
+}
+
+export default function ChatPanelView({ chatId }: ChatPanelViewProps) {
 	const context = useContext(chatInterfaceContext);
 	if (!context) {
 		throw new Error("chatInterfaceContext must be used within a ChatProvider");
@@ -22,16 +27,10 @@ export default function ChatPanelView() {
 				)}
 			>
 				{isChatPannelOpen ? (
-					<div className=" space-y-3 rounded-xl p-3 bg-gradient-to-r from-slate-400/50 to-slate-200/30 dark:from-slate-400/30 dark:to-slate-800/60">
+					<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">
 						<div className="w-full flex items-center justify-between">
 							<Podcast strokeWidth={1} />
-							<button
-								type="button"
-								title="Edit the prompt"
-								className="rounded-full p-2 bg-slate-400/30 hover:bg-slate-400/40"
-							>
-								<Pencil strokeWidth={1} className="h-4 w-4" />
-							</button>
+							<ConfigModal />
 						</div>
 						<p>Generate Podcast</p>
 					</div>

surfsense_web/components/chat/ChatPannel/ChatPannelContainer.tsx

@@ -1,5 +1,9 @@
 import ChatPanelView from "./ChatPanelView";
 
-export function ChatPanelContainer() {
-	return <ChatPanelView />;
+interface ChatPanelContainerProps {
+	chatId: string;
+}
+
+export function ChatPanelContainer({ chatId }: ChatPanelContainerProps) {
+	return <ChatPanelView chatId={chatId} />;
 }

surfsense_web/components/chat/ChatPannel/ConfigModal.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Pencil } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+export function ConfigModal() {
+	return (
+		<Popover>
+			<PopoverTrigger>
+				<button
+					type="button"
+					title="Edit the prompt"
+					className="rounded-full p-2 bg-slate-400/30 hover:bg-slate-400/40"
+				>
+					<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">
+					<label className="text-sm font-medium" htmlFor="prompt">
+						What subjects should the AI cover in this podcast ?
+					</label>
+
+					<textarea
+						name="prompt"
+						id="prompt"
+						className="w-full rounded-md border border-slate-400/40 p-2"
+					></textarea>
+
+					<button
+						type="submit"
+						className="w-full rounded-md bg-foreground text-white dark:text-black p-2"
+					>
+						Generate Podcast
+					</button>
+				</form>
+			</PopoverContent>
+		</Popover>
+	);
+}