apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-02 12:22:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix podcast generation

Browse source
This commit is contained in:
thierryverse 2025-11-11 04:02:04 +02:00
parent 678d8fbbcd
commit 55e5b45a42
26 changed files with 477 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

92
surfsense_web/components/chat/ChatInterface.tsx
View file

@ -1,16 +1,13 @@
"use client";
import { type ChatHandler, ChatSection as LlamaIndexChatSection } from "@llamaindex/chat-ui";
import { useSetAtom } from "jotai";
import { useParams } from "next/navigation";
import { createContext, useCallback, useEffect, useState } from "react";
import type { ChatDetails } from "@/app/dashboard/[search_space_id]/chats/chats-client";
import type { PodcastItem } from "@/app/dashboard/[search_space_id]/podcasts/podcasts-client";
import type { ResearchMode } from "@/components/chat";
import { useEffect } from "react";
import { ChatInputUI } from "@/components/chat/ChatInputGroup";
import { ChatMessagesUI } from "@/components/chat/ChatMessages";
import { useChatAPI } from "@/hooks/use-chat";
import type { Document } from "@/hooks/use-documents";
import { usePodcast } from "@/hooks/use-podcast";
import { activeChatIdAtom } from "@/stores/chat/active-chat.atom";
import { ChatPanelContainer } from "./ChatPanel/ChatPanelContainer";
interface ChatInterfaceProps {
@ -23,17 +20,6 @@ interface ChatInterfaceProps {
onSearchModeChange?: (mode: "DOCUMENTS" | "CHUNKS") => void;
}
interface ChatInterfaceContext {
isChatPannelOpen: boolean;
setIsChatPannelOpen: (value: boolean) => void;
chat_id: string;
chatDetails: ChatDetails | null;
podcast: PodcastItem | null;
setPodcast: (podcast: PodcastItem | null) => void;
}
export const chatInterfaceContext = createContext<ChatInterfaceContext | null>(null);
export default function ChatInterface({
handler,
onDocumentSelectionChange,
@ -44,69 +30,29 @@ export default function ChatInterface({
onSearchModeChange,
}: ChatInterfaceProps) {
const { chat_id, search_space_id } = useParams();
const [chatDetails, setChatDetails] = useState<ChatDetails | null>(null);
const [isChatPannelOpen, setIsChatPannelOpen] = useState(false);
const [podcast, setPodcast] = useState<PodcastItem | null>(null);
const contextValue = {
isChatPannelOpen,
setIsChatPannelOpen,
chat_id: typeof chat_id === "string" ? chat_id : chat_id ? chat_id[0] : "",
podcast,
setPodcast,
chatDetails,
};
const { getPodcastByChatId } = usePodcast();
const { fetchChatDetails } = useChatAPI({
token: localStorage?.getItem("surfsense_bearer_token"),
search_space_id: search_space_id as string,
});
const getPodcast = useCallback(
async (id: string) => {
const podcast = await getPodcastByChatId(Number(id));
setPodcast(podcast);
},
[getPodcastByChatId]
);
const getChat = useCallback(
async (id: string) => {
const chat = await fetchChatDetails(id);
setChatDetails(chat);
},
[fetchChatDetails]
);
const setActiveChatIdState = useSetAtom(activeChatIdAtom);
useEffect(() => {
const id = typeof chat_id === "string" ? chat_id : chat_id ? chat_id[0] : "";
if (!id) return;
getChat(id);
getPodcast(id);
setActiveChatIdState(id);
}, [chat_id, search_space_id]);
return (
<chatInterfaceContext.Provider value={contextValue}>
<LlamaIndexChatSection handler={handler} className="flex h-full">
<div className="flex gap-4 flex-1 w-full">
<div className="flex grow-1 flex-col">
<ChatMessagesUI />
<div className="border-t p-4">
<ChatInputUI
onDocumentSelectionChange={onDocumentSelectionChange}
selectedDocuments={selectedDocuments}
onConnectorSelectionChange={onConnectorSelectionChange}
selectedConnectors={selectedConnectors}
searchMode={searchMode}
onSearchModeChange={onSearchModeChange}
/>
</div>
</div>
<ChatPanelContainer />
<LlamaIndexChatSection handler={handler} className="flex h-full">
<div className="flex grow-1 flex-col">
<ChatMessagesUI />
<div className="border-t p-4">
<ChatInputUI
onDocumentSelectionChange={onDocumentSelectionChange}
selectedDocuments={selectedDocuments}
onConnectorSelectionChange={onConnectorSelectionChange}
selectedConnectors={selectedConnectors}
searchMode={searchMode}
onSearchModeChange={onSearchModeChange}
/>
</div>
</LlamaIndexChatSection>
</chatInterfaceContext.Provider>
</div>
</LlamaIndexChatSection>
);
}

89
surfsense_web/components/chat/ChatPanel/ChatPanelContainer.tsx
View file

@ -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;
}

28
surfsense_web/components/chat/ChatPanel/ChatPanelView.tsx
View file

@ -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" />

22
surfsense_web/components/chat/ChatPanel/ConfigModal.tsx
View file

@ -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