Merge pull request #430 from CREDO23/feat/chat-pannel

[Feature] Add the chat panel

surfsense_web/app/dashboard/[search_space_id]/chats/chats-client.tsx

@@ -56,12 +56,24 @@ import {
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 
-interface Chat {
+export interface Chat {
 	created_at: string;
 	id: number;
-	type: string;
+	type: "DOCUMENT" | "CHAT";
 	title: string;
 	search_space_id: number;
+	state_version: number;
+}
+
+export interface ChatDetails {
+	type: "DOCUMENT" | "CHAT";
+	title: string;
+	initial_connectors: string[];
+	messages: any[];
+	created_at: string;
+	id: number;
+	search_space_id: number;
+	state_version: number;
 }
 
 interface ChatsPageClientProps {

surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { Loader2 } from "lucide-react";
+import { useAtom } from "jotai";
+import { Loader2, PanelRight } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import type React from "react";
 import { useEffect, useMemo, useState } from "react";
+import { ChatPanelContainer } from "@/components/chat/ChatPanel/ChatPanelContainer";
 import { DashboardBreadcrumb } from "@/components/dashboard-breadcrumb";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { AppSidebarProvider } from "@/components/sidebar/AppSidebarProvider";
@@ -13,6 +15,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Separator } from "@/components/ui/separator";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { useLLMPreferences } from "@/hooks/use-llm-configs";
+import { cn } from "@/lib/utils";
+import { chatUIAtom } from "@/stores/chat/chat-ui.atom";
 
 export function DashboardClientLayout({
 	children,
@@ -30,6 +34,10 @@ export function DashboardClientLayout({
 	const pathname = usePathname();
 	const searchSpaceIdNum = Number(searchSpaceId);
 
+	const [chatUIState, setChatUIState] = useAtom(chatUIAtom);
+
+	const { isChatPannelOpen } = chatUIState;
+
 	const { loading, error, isOnboardingComplete } = useLLMPreferences(searchSpaceIdNum);
 	const [hasCheckedOnboarding, setHasCheckedOnboarding] = useState(false);
 
@@ -129,28 +137,49 @@ export function DashboardClientLayout({
 	}
 
 	return (
-		<SidebarProvider open={open} onOpenChange={setOpen}>
+		<SidebarProvider
+			className="h-full bg-red-600 overflow-hidden"
+			open={open}
+			onOpenChange={setOpen}
+		>
 			{/* Use AppSidebarProvider which fetches user, search space, and recent chats */}
 			<AppSidebarProvider
 				searchSpaceId={searchSpaceId}
 				navSecondary={translatedNavSecondary}
 				navMain={translatedNavMain}
 			/>
-			<SidebarInset>
-				<header className="sticky top-0 z-50 flex h-16 shrink-0 items-center gap-2 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
-					<div className="flex items-center justify-between w-full gap-2 px-4">
-						<div className="flex items-center gap-2">
-							<SidebarTrigger className="-ml-1" />
-							<Separator orientation="vertical" className="h-6" />
-							<DashboardBreadcrumb />
-						</div>
-						<div className="flex items-center gap-2">
-							<LanguageSwitcher />
-							<ThemeTogglerComponent />
-						</div>
+			<SidebarInset className="h-full ">
+				<main className="flex h-full">
+					<div className="flex grow flex-col h-full border-r">
+						<header className="sticky top-0 z-50 flex h-16 shrink-0 items-center gap-2 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
+							<div className="flex items-center justify-between w-full gap-2 px-4">
+								<div className="flex items-center gap-2">
+									<SidebarTrigger className="-ml-1" />
+									<Separator orientation="vertical" className="h-6" />
+									<DashboardBreadcrumb />
+								</div>
+								<div className="flex items-center gap-2">
+									<LanguageSwitcher />
+									<ThemeTogglerComponent />
+									<button
+										type="button"
+										onClick={() =>
+											setChatUIState((prev) => ({
+												...prev,
+												isChatPannelOpen: !isChatPannelOpen,
+											}))
+										}
+										className={cn(" shrink-0 rounded-full w-fit hover:bg-muted")}
+									>
+										<PanelRight className="h-4 w-4" />
+									</button>
+								</div>
+							</div>
+						</header>
+						<div className="grow flex-1 overflow-auto">{children}</div>
 					</div>
-				</header>
-				{children}
+					<ChatPanelContainer />
+				</main>
 			</SidebarInset>
 		</SidebarProvider>
 	);

surfsense_web/app/dashboard/[search_space_id]/layout.tsx

@@ -59,12 +59,6 @@ export default function DashboardLayout({
 				},
 			],
 		},
-		{
-			title: "Podcasts",
-			url: `/dashboard/${search_space_id}/podcasts`,
-			icon: "Podcast",
-			items: [],
-		},
 		{
 			title: "Logs",
 			url: `/dashboard/${search_space_id}/logs`,

surfsense_web/app/dashboard/[search_space_id]/podcasts/podcasts-client.tsx

@@ -47,13 +47,14 @@ import {
 } from "@/components/ui/select";
 import { Slider } from "@/components/ui/slider";
 
-interface PodcastItem {
+export interface PodcastItem {
 	id: number;
 	title: string;
 	created_at: string;
 	file_location: string;
 	podcast_transcript: any[];
 	search_space_id: number;
+	chat_state_version: number | null;
 }
 
 interface PodcastsPageClientProps {

surfsense_web/app/dashboard/layout.tsx

@@ -42,9 +42,9 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
 	}
 
 	return (
-		<>
+		<div className="h-full flex flex-col ">
 			<AnnouncementBanner />
-			{children}
-		</>
+			<div className="flex-1 min-h-0">{children}</div>
+		</div>
 	);
 }

surfsense_web/app/layout.tsx

@@ -6,6 +6,7 @@ import { I18nProvider } from "@/components/providers/I18nProvider";
 import { ThemeProvider } from "@/components/theme/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { LocaleProvider } from "@/contexts/LocaleContext";
+import { ReactQueryClientProvider } from "@/lib/query-client/query-client.provider";
 import { cn } from "@/lib/utils";
 
 const roboto = Roboto({
@@ -89,7 +90,7 @@ export default function RootLayout({
 	// Locale state is managed by LocaleContext and persisted in localStorage
 	return (
 		<html lang="en" suppressHydrationWarning>
-			<body className={cn(roboto.className, "bg-white dark:bg-black antialiased h-full w-full")}>
+			<body className={cn(roboto.className, "bg-white dark:bg-black antialiased h-full w-full ")}>
 				<LocaleProvider>
 					<I18nProvider>
 						<ThemeProvider
@@ -99,7 +100,9 @@ export default function RootLayout({
 							defaultTheme="light"
 						>
 							<RootProvider>
-								{children}
+								<ReactQueryClientProvider>
+									<div className=" h-[100dvh] w-[100vw] overflow-hidden">{children}</div>
+								</ReactQueryClientProvider>
 								<Toaster />
 							</RootProvider>
 						</ThemeProvider>