@btst/stack 1.3.0 → 1.4.0

package/src/plugins/ai-chat/client/components/chat-sidebar.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { ScrollArea } from "@workspace/ui/components/scroll-area";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@workspace/ui/components/alert-dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@workspace/ui/components/dialog";
+import {
+	MessageSquarePlus,
+	MoreHorizontal,
+	Pencil,
+	Trash2,
+	MessageSquare,
+} from "lucide-react";
+import { cn } from "@workspace/ui/lib/utils";
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import type { AiChatPluginOverrides } from "../overrides";
+import type { SerializedConversation } from "../../types";
+import {
+	useConversations,
+	useRenameConversation,
+	useDeleteConversation,
+} from "../hooks/chat-hooks";
+import { AI_CHAT_LOCALIZATION } from "../localization";
+
+interface ChatSidebarProps {
+	currentConversationId?: string;
+	onNewChat?: () => void;
+	className?: string;
+}
+
+export function ChatSidebar({
+	currentConversationId,
+	onNewChat,
+	className,
+}: ChatSidebarProps) {
+	const { navigate, localization: customLocalization } = usePluginOverrides<
+		AiChatPluginOverrides,
+		Partial<AiChatPluginOverrides>
+	>("ai-chat", {});
+	const basePath = useBasePath();
+
+	const localization = { ...AI_CHAT_LOCALIZATION, ...customLocalization };
+
+	const { conversations, isLoading } = useConversations();
+	const renameMutation = useRenameConversation();
+	const deleteMutation = useDeleteConversation();
+
+	const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+	const [selectedConversation, setSelectedConversation] =
+		useState<SerializedConversation | null>(null);
+	const [newTitle, setNewTitle] = useState("");
+
+	const handleNewChat = () => {
+		// Always use overrides navigation when available, so consumers control routing.
+		// Also run onNewChat to support "reset chat" behavior when already on /chat.
+		if (navigate) {
+			navigate(`${basePath}/chat`);
+		}
+		if (onNewChat) {
+			onNewChat();
+		}
+	};
+
+	const handleConversationClick = (conversation: SerializedConversation) => {
+		if (navigate) {
+			navigate(`${basePath}/chat/${conversation.id}`);
+		}
+	};
+
+	const handleRenameClick = (conversation: SerializedConversation) => {
+		setSelectedConversation(conversation);
+		setNewTitle(conversation.title);
+		setRenameDialogOpen(true);
+	};
+
+	const handleDeleteClick = (conversation: SerializedConversation) => {
+		setSelectedConversation(conversation);
+		setDeleteDialogOpen(true);
+	};
+
+	const handleRenameConfirm = async () => {
+		if (selectedConversation && newTitle.trim()) {
+			await renameMutation.mutateAsync({
+				id: selectedConversation.id,
+				title: newTitle.trim(),
+			});
+			setRenameDialogOpen(false);
+			setSelectedConversation(null);
+			setNewTitle("");
+		}
+	};
+
+	const handleDeleteConfirm = async () => {
+		if (selectedConversation) {
+			await deleteMutation.mutateAsync({ id: selectedConversation.id });
+			setDeleteDialogOpen(false);
+			setSelectedConversation(null);
+			// Navigate away if deleted current conversation
+			if (selectedConversation.id === currentConversationId && navigate) {
+				navigate(`${basePath}/chat`);
+			}
+		}
+	};
+
+	const formatDate = (dateString: string) => {
+		const date = new Date(dateString);
+		const now = new Date();
+		const diffMs = now.getTime() - date.getTime();
+		const diffMins = Math.floor(diffMs / 60000);
+		const diffHours = Math.floor(diffMs / 3600000);
+		const diffDays = Math.floor(diffMs / 86400000);
+
+		if (diffMins < 1) return localization.TIME_JUST_NOW;
+		if (diffMins < 60)
+			return localization.TIME_MINUTES_AGO.replace("{count}", String(diffMins));
+		if (diffHours < 24)
+			return localization.TIME_HOURS_AGO.replace("{count}", String(diffHours));
+		if (diffDays === 1) return localization.TIME_YESTERDAY;
+		if (diffDays < 7)
+			return localization.TIME_DAYS_AGO.replace("{count}", String(diffDays));
+		return date.toLocaleDateString();
+	};
+
+	return (
+		<div className={cn("flex flex-col h-full bg-muted/30 border-r", className)}>
+			{/* Header */}
+			<div className="p-4 border-b">
+				<Button
+					onClick={handleNewChat}
+					className="w-full justify-start gap-2"
+					variant="outline"
+				>
+					<MessageSquarePlus className="h-4 w-4" />
+					{localization.SIDEBAR_NEW_CHAT}
+				</Button>
+			</div>
+
+			{/* Conversations List */}
+			<ScrollArea className="flex-1">
+				<div className="p-2">
+					{isLoading ? (
+						<div className="p-4 text-center text-sm text-muted-foreground">
+							{localization.CHAT_LOADING}
+						</div>
+					) : conversations.length === 0 ? (
+						<div className="p-4 text-center text-sm text-muted-foreground">
+							{localization.SIDEBAR_NO_CONVERSATIONS}
+						</div>
+					) : (
+						<div className="space-y-1">
+							{conversations.map((conversation) => (
+								<div
+									key={conversation.id}
+									className={cn(
+										"group flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-accent cursor-pointer transition-colors overflow-hidden",
+										currentConversationId === conversation.id && "bg-accent",
+									)}
+								>
+									<button
+										type="button"
+										className="flex-1 flex items-center gap-2 text-left min-w-0 overflow-hidden"
+										onClick={() => handleConversationClick(conversation)}
+									>
+										<MessageSquare className="h-4 w-4 shrink-0 text-muted-foreground" />
+										<div className="flex-1 min-w-0 overflow-hidden">
+											<p className="text-sm font-medium truncate">
+												{conversation.title}
+											</p>
+											<p className="text-xs text-muted-foreground truncate">
+												{formatDate(conversation.updatedAt)}
+											</p>
+										</div>
+									</button>
+									<DropdownMenu>
+										<DropdownMenuTrigger asChild>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+											>
+												<MoreHorizontal className="h-4 w-4" />
+											</Button>
+										</DropdownMenuTrigger>
+										<DropdownMenuContent align="end">
+											<DropdownMenuItem
+												onClick={(e) => {
+													e.stopPropagation();
+													handleRenameClick(conversation);
+												}}
+											>
+												<Pencil className="h-4 w-4 mr-2" />
+												{localization.CONVERSATION_RENAME}
+											</DropdownMenuItem>
+											<DropdownMenuItem
+												onClick={(e) => {
+													e.stopPropagation();
+													handleDeleteClick(conversation);
+												}}
+												className="text-destructive focus:text-destructive"
+											>
+												<Trash2 className="h-4 w-4 mr-2" />
+												{localization.CONVERSATION_DELETE}
+											</DropdownMenuItem>
+										</DropdownMenuContent>
+									</DropdownMenu>
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			</ScrollArea>
+
+			{/* Rename Dialog */}
+			<Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+				<DialogContent>
+					<DialogHeader>
+						<DialogTitle>{localization.CONVERSATION_RENAME}</DialogTitle>
+					</DialogHeader>
+					<Input
+						value={newTitle}
+						onChange={(e) => setNewTitle(e.target.value)}
+						placeholder={localization.CONVERSATION_RENAME_PLACEHOLDER}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								void handleRenameConfirm();
+							}
+						}}
+					/>
+					<DialogFooter>
+						<Button
+							variant="outline"
+							onClick={() => setRenameDialogOpen(false)}
+						>
+							{localization.CONVERSATION_RENAME_CANCEL}
+						</Button>
+						<Button
+							onClick={handleRenameConfirm}
+							disabled={!newTitle.trim() || renameMutation.isPending}
+						>
+							{localization.CONVERSATION_RENAME_SAVE}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
+			{/* Delete Confirmation Dialog */}
+			<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>
+							{localization.CONVERSATION_DELETE_CONFIRM_TITLE}
+						</AlertDialogTitle>
+						<AlertDialogDescription>
+							{localization.CONVERSATION_DELETE_CONFIRM_DESCRIPTION}
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>
+							{localization.CONVERSATION_DELETE_CANCEL}
+						</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleDeleteConfirm}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							{localization.CONVERSATION_DELETE_CONFIRM_BUTTON}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
+	);
+}

package/src/plugins/ai-chat/client/components/index.ts

@@ -0,0 +1,16 @@
+export { ChatInterface } from "./chat-interface";
+export { ChatLayout } from "./chat-layout";
+export { ChatSidebar } from "./chat-sidebar";
+export { ChatMessage } from "./chat-message";
+export { ChatInput } from "./chat-input";
+
+// Page components
+export { ChatPageComponent } from "./pages/chat-page";
+
+// Loading components
+export { ChatLoading, ChatPageSkeleton } from "./loading";
+
+// Shared components
+export { DefaultError } from "./shared/default-error";
+export { ErrorPlaceholder } from "./shared/error-placeholder";
+export { NotFoundPage } from "./pages/404-page";

package/src/plugins/ai-chat/client/components/loading/chat-page-skeleton.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Skeleton } from "@workspace/ui/components/skeleton";
+
+/**
+ * Skeleton loading state for the chat page
+ */
+export function ChatPageSkeleton() {
+	return (
+		<div className="flex h-[calc(100vh-4rem)] w-full overflow-hidden">
+			{/* Sidebar skeleton */}
+			<div className="hidden md:flex w-72 flex-col border-r bg-muted/30">
+				<div className="p-4 border-b">
+					<Skeleton className="h-10 w-full" />
+				</div>
+				<div className="flex-1 p-2 space-y-2">
+					{Array.from({ length: 5 }).map((_, i) => (
+						<div key={i} className="flex items-center gap-2 p-3">
+							<Skeleton className="h-4 w-4 shrink-0" />
+							<div className="flex-1 space-y-1.5">
+								<Skeleton className="h-4 w-full" />
+								<Skeleton className="h-3 w-20" />
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+
+			{/* Main chat area skeleton */}
+			<div className="flex-1 flex flex-col min-w-0">
+				{/* Header */}
+				<div className="flex items-center gap-2 p-2 border-b">
+					<Skeleton className="h-9 w-9 md:hidden" />
+					<Skeleton className="h-9 w-9 hidden md:block" />
+					<div className="flex-1" />
+				</div>
+
+				{/* Messages area */}
+				<div className="flex-1 p-4 space-y-4">
+					<div className="max-w-3xl mx-auto w-full space-y-4">
+						{/* Empty state placeholder */}
+						<div className="flex flex-col items-center justify-center h-full min-h-[300px]">
+							<Skeleton className="h-4 w-48" />
+						</div>
+					</div>
+				</div>
+
+				{/* Input area */}
+				<div className="border-t p-4">
+					<div className="max-w-3xl mx-auto">
+						<Skeleton className="h-12 w-full rounded-lg" />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/plugins/ai-chat/client/components/loading/index.tsx

@@ -0,0 +1,11 @@
+import { ChatPageSkeleton } from "./chat-page-skeleton";
+
+export function ChatLoading() {
+	return (
+		<div data-testid="chat-skeleton">
+			<ChatPageSkeleton />
+		</div>
+	);
+}
+
+export { ChatPageSkeleton };

package/src/plugins/ai-chat/client/components/pages/404-page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { usePluginOverrides } from "@btst/stack/context";
+import { ErrorPlaceholder } from "../shared/error-placeholder";
+import { AI_CHAT_LOCALIZATION } from "../../localization";
+import type { AiChatPluginOverrides } from "../../overrides";
+
+export function NotFoundPage({ message }: { message?: string }) {
+	const { localization } = usePluginOverrides<
+		AiChatPluginOverrides,
+		Partial<AiChatPluginOverrides>
+	>("ai-chat", {
+		localization: AI_CHAT_LOCALIZATION,
+	});
+	const title =
+		localization?.CHAT_PAGE_NOT_FOUND_TITLE ??
+		AI_CHAT_LOCALIZATION.CHAT_PAGE_NOT_FOUND_TITLE;
+	const desc =
+		message ||
+		(localization?.CHAT_PAGE_NOT_FOUND_DESCRIPTION ??
+			AI_CHAT_LOCALIZATION.CHAT_PAGE_NOT_FOUND_DESCRIPTION);
+	return (
+		<div data-testid="404-page" className="flex flex-col h-[calc(100vh-4rem)]">
+			<ErrorPlaceholder title={title} message={desc} />
+		</div>
+	);
+}

package/src/plugins/ai-chat/client/components/pages/chat-page.internal.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { ChatLayout } from "../chat-layout";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { AiChatPluginOverrides } from "../../overrides";
+
+export interface ChatPageProps {
+	conversationId?: string;
+}
+
+/**
+ * Internal chat page component - loaded lazily by ChatPageComponent
+ */
+export function ChatPage({ conversationId }: ChatPageProps) {
+	const { apiBaseURL, apiBasePath, mode } = usePluginOverrides<
+		AiChatPluginOverrides,
+		Partial<AiChatPluginOverrides>
+	>("ai-chat", {});
+
+	// In public mode, don't show sidebar
+	const showSidebar = mode !== "public";
+
+	return (
+		<ChatLayout
+			apiBaseURL={apiBaseURL ?? ""}
+			apiBasePath={apiBasePath ?? ""}
+			conversationId={conversationId}
+			showSidebar={showSidebar}
+		/>
+	);
+}

package/src/plugins/ai-chat/client/components/pages/chat-page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { lazy } from "react";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { AiChatPluginOverrides } from "../../overrides";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { DefaultError } from "../shared/default-error";
+import { ChatLoading } from "../loading";
+import { NotFoundPage } from "./404-page";
+
+// Lazy load the internal component with actual page content
+const ChatPage = lazy(() =>
+	import("./chat-page.internal").then((m) => ({ default: m.ChatPage })),
+);
+
+export interface ChatPageComponentProps {
+	conversationId?: string;
+}
+
+// Exported wrapped component with error and loading boundaries
+export function ChatPageComponent({ conversationId }: ChatPageComponentProps) {
+	const { onRouteError } = usePluginOverrides<
+		AiChatPluginOverrides,
+		Partial<AiChatPluginOverrides>
+	>("ai-chat", {});
+
+	return (
+		<ComposedRoute
+			path={conversationId ? `/chat/${conversationId}` : "/chat"}
+			PageComponent={ChatPage}
+			ErrorComponent={DefaultError}
+			LoadingComponent={ChatLoading}
+			NotFoundComponent={NotFoundPage}
+			props={{ conversationId }}
+			onError={(error) => {
+				if (onRouteError) {
+					onRouteError(conversationId ? "chatConversation" : "chat", error, {
+						path: conversationId ? `/chat/${conversationId}` : "/chat",
+						isSSR: typeof window === "undefined",
+						params: conversationId ? { id: conversationId } : undefined,
+					});
+				}
+			}}
+		/>
+	);
+}

package/src/plugins/ai-chat/client/components/shared/default-error.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { FallbackProps } from "react-error-boundary";
+import { ErrorPlaceholder } from "./error-placeholder";
+import { usePluginOverrides } from "@btst/stack/context";
+import { AI_CHAT_LOCALIZATION } from "../../localization";
+import type { AiChatPluginOverrides } from "../../overrides";
+
+// Default error component for AI chat plugin routes
+export function DefaultError({ error }: FallbackProps) {
+	const { localization } = usePluginOverrides<
+		AiChatPluginOverrides,
+		Partial<AiChatPluginOverrides>
+	>("ai-chat", {
+		localization: AI_CHAT_LOCALIZATION,
+	});
+	const title =
+		localization?.CHAT_GENERIC_ERROR_TITLE ??
+		AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_TITLE;
+	const message =
+		process.env.NODE_ENV === "production"
+			? (localization?.CHAT_GENERIC_ERROR_MESSAGE ??
+				AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_MESSAGE)
+			: (error?.message ??
+				localization?.CHAT_GENERIC_ERROR_MESSAGE ??
+				AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_MESSAGE);
+	return <ErrorPlaceholder title={title} message={message} />;
+}

package/src/plugins/ai-chat/client/components/shared/error-placeholder.tsx

@@ -0,0 +1,22 @@
+import { CloudAlert } from "lucide-react";
+
+export function ErrorPlaceholder({
+	title,
+	message,
+}: {
+	title: string;
+	message: string;
+}) {
+	return (
+		<div
+			className="flex min-h-[400px] flex-col items-center justify-center gap-6 p-8"
+			data-testid="error-placeholder"
+		>
+			<CloudAlert className="size-16 text-muted-foreground" />
+			<div className="text-center space-y-2">
+				<h2 className="text-xl font-semibold">{title}</h2>
+				<p className="text-muted-foreground max-w-md">{message}</p>
+			</div>
+		</div>
+	);
+}