| "use client"; |
| import { SidebarTrigger } from "@/components/ui/sidebar"; |
| import { DownloadCloud } from "lucide-react"; |
| import { useChatStore } from "@/stores/chatStore"; |
| import { Button } from "@/components/ui/button"; |
| import { useState } from "react"; |
|
|
| const Topbar = () => { |
| const { selectedChat, downloadChat } = useChatStore(); |
| const [isDownloading, setIsDownloading] = useState(false); |
|
|
| const chatTitle = selectedChat?.title || "New Chat"; |
|
|
| const handleDownload = async () => { |
| if (!selectedChat) return; |
|
|
| setIsDownloading(true); |
| try { |
| await downloadChat(); |
| } catch (error) { |
| console.error("Download failed:", error); |
| |
| } finally { |
| setIsDownloading(false); |
| } |
| }; |
|
|
| return ( |
| <div className="flex items-center justify-between h-14 px-4 border-b border-border/50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> |
| <div className="flex items-center gap-3"> |
| <SidebarTrigger className="h-8 w-8 hover:bg-accent/50 transition-colors rounded-md" /> |
| |
| <div className="flex items-center gap-2 min-w-0"> |
| <div className="flex items-center gap-1.5 min-w-0"> |
| <h1 className="font-semibold text-base truncate max-w-[200px] sm:max-w-[400px]"> |
| {chatTitle} |
| </h1> |
| </div> |
| </div> |
| </div> |
| |
| {/* Right side controls */} |
| {selectedChat?.id && ( |
| <div className="flex items-center gap-2"> |
| <Button |
| variant="ghost" |
| size="default" |
| className="h-8 hover:bg-accent/50" |
| onClick={handleDownload} |
| disabled={isDownloading} |
| > |
| <DownloadCloud className="h-4 w-4" /> |
| {/* text should disappear when on mobile device */} |
| <span className="hidden sm:inline-block ml-1"> |
| {isDownloading ? "Exporting..." : "Export Chat"} |
| </span> |
| </Button> |
| </div> |
| )} |
| </div> |
| ); |
| }; |
|
|
| export default Topbar; |
|
|
