add 'generate podcast component'

surfsense_web/components/chat/ChatInterface.tsx

@@ -8,6 +8,7 @@ import { ChatInputUI } from "@/components/chat/ChatInputGroup";
 import { ChatMessagesUI } from "@/components/chat/ChatMessages";
 import type { Document } from "@/hooks/use-documents";
 import { cn } from "@/lib/utils";
+import { ChatPanelContainer } from "./ChatPannel/ChatPannelContainer";
 
 interface ChatInterfaceProps {
 	handler: ChatHandler;
@@ -67,7 +68,9 @@ export default function ChatInterface({
 						</button>
 					</div>
 
-					<div className="border-b rounded-lg p-2  grow-1">Chat pannel</div>
+					<div className="border-b rounded-lg grow-1">
+						<ChatPanelContainer />
+					</div>
 				</div>
 			</div>
 		</LlamaIndexChatSection>

surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx

@@ -1,3 +1,22 @@
+import { Pencil, Podcast } from "lucide-react";
+
 export default function ChatPanelView() {
-	return <div>Chat Panel View</div>;
+	return (
+		<div className="w-full">
+			<div className="w-full h-full p-4 border-b">
+				<div className=" space-y-3 rounded-xl p-3 bg-gradient-to-r 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"
+							className="rounded-full p-2 bg-slate-400/30 hover:bg-slate-400/40"
+						>
+							<Pencil strokeWidth={1} className="h-4 w-4" />
+						</button>
+					</div>
+					<p> Generate Podcast</p>
+				</div>
+			</div>
+		</div>
+	);
 }

surfsense_web/components/chat/ChatPannel/ChatPannelContainer.tsx

@@ -1,3 +1,5 @@
+import ChatPanelView from "./ChatPanelView";
+
 export function ChatPanelContainer() {
-	return <div>Chat Panel container</div>;
+	return <ChatPanelView />;
 }