This commit is contained in:
CREDO23 2025-10-23 19:48:10 +02:00 committed by thierryverse
parent 58fed46567
commit 9007436ff6
9 changed files with 23 additions and 183 deletions

View file

@ -1,17 +1,16 @@
"use client";
import { type ChatHandler, ChatSection as LlamaIndexChatSection } from "@llamaindex/chat-ui";
import { PanelRight } from "lucide-react";
import { useParams } from "next/navigation";
import { createContext, useCallback, useEffect, useState } from "react";
import { Chat, type ChatDetails } from "@/app/dashboard/[search_space_id]/chats/chats-client";
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 { 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 { ChatPanelContainer } from "./ChatPannel/ChatPanelContainer";
import { ChatPanelContainer } from "./ChatPanel/ChatPanelContainer";
interface ChatInterfaceProps {
handler: ChatHandler;

View file

@ -3,9 +3,15 @@ import { useActionState, useContext, useTransition } from "react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { chatInterfaceContext } from "../ChatInterface";
import type { GeneratePodcastRequest } from "./actions";
import { ChatPanelView } from "./ChatPanelView";
export interface GeneratePodcastRequest {
type: "CHAT" | "DOCUMENT";
ids: number[];
search_space_id: number;
podcast_title?: string;
}
export function ChatPanelContainer() {
const context = useContext(chatInterfaceContext);

View file

@ -1,65 +0,0 @@
import { PanelRight } from "lucide-react";
import { useActionState, useContext } from "react";
import { cn } from "@/lib/utils";
import { chatInterfaceContext } from "../ChatInterface";
import { generatePodCastAction, getChatPodcastPromise } from "./actions";
import { ChatPanelView } from "./ChatPanelView";
export interface PodCastInterface {
title: string;
podcast_transcript: string;
search_space_id: string;
}
export type PodcastGenerationState = Partial<{
title: string;
podcast_transcript: string;
search_space_id: string;
chat_id: string;
prompt: string;
error: unknown;
}>;
export function ChatPanelContainer() {
const context = useContext(chatInterfaceContext);
if (!context) {
throw new Error("chatInterfaceContext must be used within a ChatProvider");
}
const { isChatPannelOpen, setIsChatPannelOpen, chat_id: chatId } = context;
const [state, generatePodcastAction, isGeneratingPodcast] =
useActionState<PodcastGenerationState>(generatePodCastAction, {
chat_id: chatId,
prompt: "Test",
});
return chatId && chatId !== "" ? (
<div
className={cn(
"border rounded-2xl shrink-0 bg-sidebar flex flex-col h-full transition-all",
isChatPannelOpen ? "w-72" : "w-14"
)}
>
<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>
<div className="border-b rounded-lg grow-1">
<ChatPanelView chat_id={chatId} />
</div>
</div>
) : null;
}

View file

@ -1,49 +0,0 @@
"use client";
import { Pencil, Podcast } from "lucide-react";
import { useContext } from "react";
import { cn } from "@/lib/utils";
import { chatInterfaceContext } from "../ChatInterface";
import { ConfigModal } from "./ConfigModal";
interface ChatPanelViewProps {
chat_id: string;
}
export function ChatPanelView({ chat_id: chatId }: ChatPanelViewProps) {
const context = useContext(chatInterfaceContext);
if (!context) {
throw new Error("chatInterfaceContext must be used within a ChatProvider");
}
const { isChatPannelOpen, setIsChatPannelOpen } = context;
return (
<div className="w-full">
<div
className={cn(
"w-full h-full p-4 border-b",
!isChatPannelOpen && "flex items-center justify-center"
)}
>
{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">
<div className="w-full flex items-center justify-between">
<Podcast strokeWidth={1} />
<ConfigModal />
</div>
<p>Generate Podcast</p>
</div>
) : (
<button
title="Generate Podcast"
type="button"
onClick={() => setIsChatPannelOpen(!isChatPannelOpen)}
>
<Podcast strokeWidth={1} />
</button>
)}
</div>
</div>
);
}

View file

@ -1,40 +0,0 @@
"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>
);
}

View file

@ -1,21 +0,0 @@
"use server";
import type { PodCastInterface, PodcastGenerationState } from "./ChatPanelContainer";
export const generatePodCastAction = async (
formData: PodcastGenerationState
): Promise<PodCastInterface> => {
return Promise.resolve({
title: "Test",
podcast_transcript: "Test",
search_space_id: "Test",
});
};
export const getChatPodcastPromise = async (chatId: string): Promise<PodCastInterface> => {
return Promise.resolve({
title: "Test",
podcast_transcript: "Test",
search_space_id: "Test",
});
};