91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import { PanelRightOpen, History, PlusCircle } from "lucide-react";
|
|
import { PanelRightClose } from "lucide-react";
|
|
import { useAtomValue, useSetAtom } from "jotai";
|
|
import { selectedAppIdAtom } from "@/atoms/appAtoms";
|
|
import { useVersions } from "@/hooks/useVersions";
|
|
import { Button } from "../ui/button";
|
|
import { IpcClient } from "@/ipc/ipc_client";
|
|
import { useRouter } from "@tanstack/react-router";
|
|
import { selectedChatIdAtom } from "@/atoms/chatAtoms";
|
|
import { useChats } from "@/hooks/useChats";
|
|
import { showError } from "@/lib/toast";
|
|
|
|
interface ChatHeaderProps {
|
|
isPreviewOpen: boolean;
|
|
onTogglePreview: () => void;
|
|
onVersionClick: () => void;
|
|
}
|
|
|
|
export function ChatHeader({
|
|
isPreviewOpen,
|
|
onTogglePreview,
|
|
onVersionClick,
|
|
}: ChatHeaderProps) {
|
|
const appId = useAtomValue(selectedAppIdAtom);
|
|
const { versions, loading } = useVersions(appId);
|
|
const { navigate } = useRouter();
|
|
const setSelectedChatId = useSetAtom(selectedChatIdAtom);
|
|
const { refreshChats } = useChats(appId);
|
|
|
|
const handleNewChat = async () => {
|
|
// Only create a new chat if an app is selected
|
|
if (appId) {
|
|
try {
|
|
// Create a new chat with an empty title for now
|
|
const chatId = await IpcClient.getInstance().createChat(appId);
|
|
|
|
// Navigate to the new chat
|
|
setSelectedChatId(chatId);
|
|
navigate({
|
|
to: "/chat",
|
|
search: { id: chatId },
|
|
});
|
|
|
|
// Refresh the chat list
|
|
await refreshChats();
|
|
} catch (error) {
|
|
// DO A TOAST
|
|
showError(`Failed to create new chat: ${(error as any).toString()}`);
|
|
}
|
|
} else {
|
|
// If no app is selected, navigate to home page
|
|
navigate({ to: "/" });
|
|
}
|
|
};
|
|
// TODO: KEEP UP TO DATE WITH app_handlers.ts
|
|
const versionPostfix = versions.length === 10_000 ? `+` : "";
|
|
return (
|
|
<div className="@container flex items-center justify-between py-1.5">
|
|
<div className="flex items-center space-x-2">
|
|
<Button
|
|
onClick={handleNewChat}
|
|
variant="ghost"
|
|
className="hidden @2xs:flex items-center justify-start gap-2 mx-2 py-3"
|
|
>
|
|
<PlusCircle size={16} />
|
|
<span>New Chat</span>
|
|
</Button>
|
|
<Button
|
|
onClick={onVersionClick}
|
|
variant="ghost"
|
|
className="hidden @6xs:flex cursor-pointer items-center gap-1 text-sm px-2 py-1 rounded-md"
|
|
>
|
|
<History size={16} />
|
|
{loading ? "..." : `Version ${versions.length}${versionPostfix}`}
|
|
</Button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={onTogglePreview}
|
|
className="cursor-pointer p-2 hover:bg-(--background-lightest) rounded-md"
|
|
>
|
|
{isPreviewOpen ? (
|
|
<PanelRightClose size={20} />
|
|
) : (
|
|
<PanelRightOpen size={20} />
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|