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

stop propagation in the chat panelcl

Browse source
This commit is contained in:
CREDO23 2025-10-23 21:42:39 +02:00 • committed by thierryverse
parent 9007436ff6
commit e47b1cb4c5
4 changed files with 34 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -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 handleGeneratePodcast = () => {
startGeneratingPodcast(() => {
generatePodcast({
type: "CHAT",
ids: [1],
search_space_id: 1,
});
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,
});
};
}, [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"

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

@ -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>
<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
title="Edit the prompt"
className="rounded-full p-2 bg-slate-400/30 hover:bg-slate-400/40"
onClick={(e) => e.stopPropagation()}
>
<Pencil strokeWidth={1} className="h-4 w-4" />
</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