@btst/stack 2.12.2 → 3.0.0-rc.2

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

@@ -23,6 +23,7 @@ import {
 import {
 	Dialog,
 	DialogContent,
+	DialogDescription,
 	DialogFooter,
 	DialogHeader,
 	DialogTitle,
@@ -35,15 +36,22 @@ import {
 	MessageSquare,
 } from "lucide-react";
 import { cn } from "@workspace/ui/lib/utils";
-import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import {
+	CanAccess,
+	useBasePath,
+	useCan,
+	useNotify,
+	usePluginOverrides,
+	useStack,
+} from "@btst/stack/context";
 import type { AiChatPluginOverrides } from "../overrides";
 import type { SerializedConversation } from "../../types";
 import {
 	useConversations,
-	useRenameConversation,
+	useRenameConversationForm,
 	useDeleteConversation,
 } from "../hooks/chat-hooks";
-import { AI_CHAT_LOCALIZATION } from "../localization";
+import { useAiChatTranslation } from "../localization";
 
 interface ChatSidebarProps {
 	currentConversationId?: string;
@@ -56,16 +64,22 @@ export function ChatSidebar({
 	onNewChat,
 	className,
 }: ChatSidebarProps) {
-	const { navigate, localization: customLocalization } = usePluginOverrides<
+	const { localization: customLocalization } = usePluginOverrides<
 		AiChatPluginOverrides,
 		Partial<AiChatPluginOverrides>
 	>("ai-chat", {});
+	const { router } = useStack();
+	const navigate = router?.navigate;
 	const basePath = useBasePath();
-
-	const localization = { ...AI_CHAT_LOCALIZATION, ...customLocalization };
-
-	const { conversations, isLoading } = useConversations();
-	const renameMutation = useRenameConversation();
+	const notify = useNotify();
+	const tr = useAiChatTranslation(customLocalization);
+	const { can: canRead, isPending: isReadPermissionPending } = useCan({
+		resource: "ai-chat:conversation",
+		action: "read",
+	});
+	const { conversations, isLoading } = useConversations({
+		enabled: !isReadPermissionPending && canRead,
+	});
 	const deleteMutation = useDeleteConversation();
 
 	const [renameDialogOpen, setRenameDialogOpen] = useState(false);
@@ -73,9 +87,17 @@ export function ChatSidebar({
 	const [selectedConversation, setSelectedConversation] =
 		useState<SerializedConversation | null>(null);
 	const [newTitle, setNewTitle] = useState("");
+	const renameForm = useRenameConversationForm({
+		conversation: selectedConversation,
+		onSuccess: () => {
+			setRenameDialogOpen(false);
+			setSelectedConversation(null);
+			setNewTitle("");
+		},
+	});
 
 	const handleNewChat = () => {
-		// Always use overrides navigation when available, so consumers control routing.
+		// Use the StackProvider router when available.
 		// Also run onNewChat to support "reset chat" behavior when already on /chat.
 		if (navigate) {
 			navigate(`${basePath}/chat`);
@@ -92,6 +114,7 @@ export function ChatSidebar({
 	};
 
 	const handleRenameClick = (conversation: SerializedConversation) => {
+		renameForm.clearErrors();
 		setSelectedConversation(conversation);
 		setNewTitle(conversation.title);
 		setRenameDialogOpen(true);
@@ -103,25 +126,36 @@ export function ChatSidebar({
 	};
 
 	const handleRenameConfirm = async () => {
-		if (selectedConversation && newTitle.trim()) {
-			await renameMutation.mutateAsync({
-				id: selectedConversation.id,
-				title: newTitle.trim(),
-			});
-			setRenameDialogOpen(false);
-			setSelectedConversation(null);
-			setNewTitle("");
+		if (selectedConversation) {
+			await renameForm.submit({ title: newTitle });
 		}
 	};
 
 	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`);
+			try {
+				await deleteMutation.mutateAsync({ id: selectedConversation.id });
+				notify.success(
+					tr(
+						"CONVERSATION_DELETE_SUCCESS",
+						"aiChat.toasts.deleteSuccess",
+						"Conversation deleted",
+					),
+				);
+				setDeleteDialogOpen(false);
+				setSelectedConversation(null);
+				// Navigate away if deleted current conversation
+				if (selectedConversation.id === currentConversationId && navigate) {
+					await navigate(`${basePath}/chat`);
+				}
+			} catch {
+				notify.error(
+					tr(
+						"CONVERSATION_DELETE_FAILURE",
+						"aiChat.toasts.deleteFailure",
+						"Failed to delete conversation",
+					),
+				);
 			}
 		}
 	};
@@ -134,14 +168,28 @@ export function ChatSidebar({
 		const diffHours = Math.floor(diffMs / 3600000);
 		const diffDays = Math.floor(diffMs / 86400000);
 
-		if (diffMins < 1) return localization.TIME_JUST_NOW;
+		if (diffMins < 1)
+			return tr("TIME_JUST_NOW", "aiChat.time.justNow", "Just now");
 		if (diffMins < 60)
-			return localization.TIME_MINUTES_AGO.replace("{count}", String(diffMins));
+			return tr(
+				"TIME_MINUTES_AGO",
+				"aiChat.time.minutesAgo",
+				"{{count}} minutes ago",
+				{ count: diffMins },
+			);
 		if (diffHours < 24)
-			return localization.TIME_HOURS_AGO.replace("{count}", String(diffHours));
-		if (diffDays === 1) return localization.TIME_YESTERDAY;
+			return tr(
+				"TIME_HOURS_AGO",
+				"aiChat.time.hoursAgo",
+				"{{count}} hours ago",
+				{ count: diffHours },
+			);
+		if (diffDays === 1)
+			return tr("TIME_YESTERDAY", "aiChat.time.yesterday", "Yesterday");
 		if (diffDays < 7)
-			return localization.TIME_DAYS_AGO.replace("{count}", String(diffDays));
+			return tr("TIME_DAYS_AGO", "aiChat.time.daysAgo", "{{count}} days ago", {
+				count: diffDays,
+			});
 		return date.toLocaleDateString();
 	};
 
@@ -152,14 +200,16 @@ export function ChatSidebar({
 		>
 			{/* 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>
+				<CanAccess resource="ai-chat:conversation" action="create">
+					<Button
+						onClick={handleNewChat}
+						className="w-full justify-start gap-2"
+						variant="outline"
+					>
+						<MessageSquarePlus className="h-4 w-4" />
+						{tr("SIDEBAR_NEW_CHAT", "aiChat.sidebar.newChat", "New chat")}
+					</Button>
+				</CanAccess>
 			</div>
 
 			{/* Conversations List */}
@@ -167,11 +217,15 @@ export function ChatSidebar({
 				<div className="p-2">
 					{isLoading ? (
 						<div className="p-4 text-center text-sm text-muted-foreground">
-							{localization.CHAT_LOADING}
+							{tr("CHAT_LOADING", "aiChat.chat.loading", "Thinking...")}
 						</div>
 					) : conversations.length === 0 ? (
 						<div className="p-4 text-center text-sm text-muted-foreground">
-							{localization.SIDEBAR_NO_CONVERSATIONS}
+							{tr(
+								"SIDEBAR_NO_CONVERSATIONS",
+								"aiChat.sidebar.empty",
+								"No conversations yet",
+							)}
 						</div>
 					) : (
 						<div className="space-y-1">
@@ -198,36 +252,61 @@ export function ChatSidebar({
 											</p>
 										</div>
 									</button>
-									<DropdownMenu>
+									<DropdownMenu modal={false}>
 										<DropdownMenuTrigger asChild>
 											<Button
 												variant="ghost"
 												size="icon"
 												className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+												aria-label={tr(
+													"A11Y_CONVERSATION_ACTIONS",
+													"aiChat.a11y.conversationActions",
+													"Conversation actions",
+												)}
 											>
 												<MoreHorizontal className="h-4 w-4" />
 											</Button>
 										</DropdownMenuTrigger>
 										<DropdownMenuContent align="end">
-											<DropdownMenuItem
-												onClick={(e) => {
-													e.stopPropagation();
-													handleRenameClick(conversation);
-												}}
+											<CanAccess
+												resource="ai-chat:conversation"
+												action="update"
+												params={{ id: conversation.id }}
 											>
-												<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"
+												<DropdownMenuItem
+													onClick={(e) => {
+														e.stopPropagation();
+														handleRenameClick(conversation);
+													}}
+												>
+													<Pencil className="h-4 w-4 mr-2" />
+													{tr(
+														"CONVERSATION_RENAME",
+														"aiChat.conversation.rename",
+														"Rename",
+													)}
+												</DropdownMenuItem>
+											</CanAccess>
+											<CanAccess
+												resource="ai-chat:conversation"
+												action="delete"
+												params={{ id: conversation.id }}
 											>
-												<Trash2 className="h-4 w-4 mr-2" />
-												{localization.CONVERSATION_DELETE}
-											</DropdownMenuItem>
+												<DropdownMenuItem
+													onClick={(e) => {
+														e.stopPropagation();
+														handleDeleteClick(conversation);
+													}}
+													className="text-destructive focus:text-destructive"
+												>
+													<Trash2 className="h-4 w-4 mr-2" />
+													{tr(
+														"CONVERSATION_DELETE",
+														"aiChat.conversation.delete",
+														"Delete",
+													)}
+												</DropdownMenuItem>
+											</CanAccess>
 										</DropdownMenuContent>
 									</DropdownMenu>
 								</div>
@@ -238,33 +317,74 @@ export function ChatSidebar({
 			</ScrollArea>
 
 			{/* Rename Dialog */}
-			<Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+			<Dialog
+				open={renameDialogOpen}
+				onOpenChange={(open) => {
+					setRenameDialogOpen(open);
+					if (!open) renameForm.clearErrors();
+				}}
+			>
 				<DialogContent>
 					<DialogHeader>
-						<DialogTitle>{localization.CONVERSATION_RENAME}</DialogTitle>
+						<DialogTitle>
+							{tr(
+								"CONVERSATION_RENAME",
+								"aiChat.conversation.rename",
+								"Rename",
+							)}
+						</DialogTitle>
+						<DialogDescription>
+							{tr(
+								"CONVERSATION_RENAME_DESCRIPTION",
+								"aiChat.conversation.renameDescription",
+								"Enter a new title for this conversation.",
+							)}
+						</DialogDescription>
 					</DialogHeader>
 					<Input
 						value={newTitle}
 						onChange={(e) => setNewTitle(e.target.value)}
-						placeholder={localization.CONVERSATION_RENAME_PLACEHOLDER}
+						placeholder={tr(
+							"CONVERSATION_RENAME_PLACEHOLDER",
+							"aiChat.conversation.renamePlaceholder",
+							"Enter conversation name",
+						)}
+						aria-invalid={!!renameForm.fieldErrors.title}
 						onKeyDown={(e) => {
 							if (e.key === "Enter") {
 								void handleRenameConfirm();
 							}
 						}}
 					/>
+					{renameForm.fieldErrors.title && (
+						<p className="text-sm text-destructive" role="alert">
+							{tr(
+								"CONVERSATION_TITLE_REQUIRED",
+								"aiChat.conversation.titleRequired",
+								"Title is required",
+							)}
+						</p>
+					)}
 					<DialogFooter>
 						<Button
 							variant="outline"
 							onClick={() => setRenameDialogOpen(false)}
 						>
-							{localization.CONVERSATION_RENAME_CANCEL}
+							{tr(
+								"CONVERSATION_RENAME_CANCEL",
+								"aiChat.conversation.renameCancel",
+								"Cancel",
+							)}
 						</Button>
 						<Button
 							onClick={handleRenameConfirm}
-							disabled={!newTitle.trim() || renameMutation.isPending}
+							disabled={renameForm.isSubmitting}
 						>
-							{localization.CONVERSATION_RENAME_SAVE}
+							{tr(
+								"CONVERSATION_RENAME_SAVE",
+								"aiChat.conversation.renameSave",
+								"Save",
+							)}
 						</Button>
 					</DialogFooter>
 				</DialogContent>
@@ -275,21 +395,41 @@ export function ChatSidebar({
 				<AlertDialogContent>
 					<AlertDialogHeader>
 						<AlertDialogTitle>
-							{localization.CONVERSATION_DELETE_CONFIRM_TITLE}
+							{tr(
+								"CONVERSATION_DELETE_CONFIRM_TITLE",
+								"aiChat.conversation.deleteConfirmTitle",
+								"Delete conversation",
+							)}
 						</AlertDialogTitle>
 						<AlertDialogDescription>
-							{localization.CONVERSATION_DELETE_CONFIRM_DESCRIPTION}
+							{tr(
+								"CONVERSATION_DELETE_CONFIRM_DESCRIPTION",
+								"aiChat.conversation.deleteConfirmDescription",
+								"Are you sure you want to delete this conversation? This action cannot be undone.",
+							)}
 						</AlertDialogDescription>
 					</AlertDialogHeader>
 					<AlertDialogFooter>
 						<AlertDialogCancel>
-							{localization.CONVERSATION_DELETE_CANCEL}
+							{tr(
+								"CONVERSATION_DELETE_CANCEL",
+								"aiChat.conversation.deleteCancel",
+								"Cancel",
+							)}
 						</AlertDialogCancel>
 						<AlertDialogAction
-							onClick={handleDeleteConfirm}
+							onClick={(event) => {
+								event.preventDefault();
+								void handleDeleteConfirm();
+							}}
+							disabled={deleteMutation.isPending}
 							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							{localization.CONVERSATION_DELETE_CONFIRM_BUTTON}
+							{tr(
+								"CONVERSATION_DELETE_CONFIRM_BUTTON",
+								"aiChat.conversation.deleteConfirmButton",
+								"Delete",
+							)}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>

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

@@ -2,7 +2,7 @@
 
 import { usePluginOverrides } from "@btst/stack/context";
 import { ErrorPlaceholder } from "../shared/error-placeholder";
-import { AI_CHAT_LOCALIZATION } from "../../localization";
+import { useAiChatTranslation } from "../../localization";
 import type { AiChatPluginOverrides } from "../../overrides";
 
 export function NotFoundPage({ message }: { message?: string }) {
@@ -10,15 +10,21 @@ export function NotFoundPage({ message }: { message?: string }) {
 		AiChatPluginOverrides,
 		Partial<AiChatPluginOverrides>
 	>("ai-chat", {
-		localization: AI_CHAT_LOCALIZATION,
+		localization: {},
 	});
-	const title =
-		localization?.CHAT_PAGE_NOT_FOUND_TITLE ??
-		AI_CHAT_LOCALIZATION.CHAT_PAGE_NOT_FOUND_TITLE;
+	const tr = useAiChatTranslation(localization);
+	const title = tr(
+		"CHAT_PAGE_NOT_FOUND_TITLE",
+		"aiChat.errors.notFoundTitle",
+		"Chat not found",
+	);
 	const desc =
 		message ||
-		(localization?.CHAT_PAGE_NOT_FOUND_DESCRIPTION ??
-			AI_CHAT_LOCALIZATION.CHAT_PAGE_NOT_FOUND_DESCRIPTION);
+		tr(
+			"CHAT_PAGE_NOT_FOUND_DESCRIPTION",
+			"aiChat.errors.notFoundDescription",
+			"The conversation you're looking for doesn't exist or has been deleted.",
+		);
 	return (
 		<div data-testid="404-page" className="flex flex-col h-[calc(100vh-4rem)]">
 			<ErrorPlaceholder title={title} message={desc} />

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

@@ -1,8 +1,10 @@
 "use client";
 
+import { useMemo } from "react";
 import { ChatLayout } from "../chat-layout";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { AiChatPluginOverrides } from "../../overrides";
+import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 
 export interface ChatPageProps {
 	conversationId?: string;
@@ -12,20 +14,31 @@ export interface ChatPageProps {
  * Internal chat page component - loaded lazily by ChatPageComponent
  */
 export function ChatPage({ conversationId }: ChatPageProps) {
-	const { apiBaseURL, apiBasePath, mode } = usePluginOverrides<
+	const overrides = usePluginOverrides<
 		AiChatPluginOverrides,
 		Partial<AiChatPluginOverrides>
 	>("ai-chat", {});
+	const { mode } = overrides;
+	const routeName = conversationId ? "chatConversation" : "chat";
+	const context = useMemo(
+		() => ({
+			path: conversationId ? `/chat/${conversationId}` : "/chat",
+			params: conversationId ? { id: conversationId } : undefined,
+			isSSR: typeof window === "undefined",
+		}),
+		[conversationId],
+	);
+
+	useRouteLifecycle({
+		routeName,
+		context,
+		overrides,
+	});
 
 	// In public mode, don't show sidebar
 	const showSidebar = mode !== "public";
 
 	return (
-		<ChatLayout
-			apiBaseURL={apiBaseURL ?? ""}
-			apiBasePath={apiBasePath ?? ""}
-			conversationId={conversationId}
-			showSidebar={showSidebar}
-		/>
+		<ChatLayout conversationId={conversationId} showSidebar={showSidebar} />
 	);
 }

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

@@ -19,7 +19,7 @@ export interface ChatPageComponentProps {
 
 // Exported wrapped component with error and loading boundaries
 export function ChatPageComponent({ conversationId }: ChatPageComponentProps) {
-	const { onRouteError } = usePluginOverrides<
+	const { mode, onRouteError } = usePluginOverrides<
 		AiChatPluginOverrides,
 		Partial<AiChatPluginOverrides>
 	>("ai-chat", {});
@@ -27,6 +27,15 @@ export function ChatPageComponent({ conversationId }: ChatPageComponentProps) {
 	return (
 		<ComposedRoute
 			path={conversationId ? `/chat/${conversationId}` : "/chat"}
+			permission={
+				mode === "public"
+					? undefined
+					: {
+							resource: "ai-chat:conversation",
+							action: "read",
+							params: conversationId ? { id: conversationId } : undefined,
+						}
+			}
 			PageComponent={ChatPage}
 			ErrorComponent={DefaultError}
 			LoadingComponent={ChatLoading}

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

@@ -3,7 +3,7 @@
 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 { useAiChatTranslation } from "../../localization";
 import type { AiChatPluginOverrides } from "../../overrides";
 
 // Default error component for AI chat plugin routes
@@ -12,17 +12,26 @@ export function DefaultError({ error }: FallbackProps) {
 		AiChatPluginOverrides,
 		Partial<AiChatPluginOverrides>
 	>("ai-chat", {
-		localization: AI_CHAT_LOCALIZATION,
+		localization: {},
 	});
-	const title =
-		localization?.CHAT_GENERIC_ERROR_TITLE ??
-		AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_TITLE;
+	const tr = useAiChatTranslation(localization);
+	const title = tr(
+		"CHAT_GENERIC_ERROR_TITLE",
+		"aiChat.errors.genericTitle",
+		"Something went wrong",
+	);
 	const message =
 		process.env.NODE_ENV === "production"
-			? (localization?.CHAT_GENERIC_ERROR_MESSAGE ??
-				AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_MESSAGE)
+			? tr(
+					"CHAT_GENERIC_ERROR_MESSAGE",
+					"aiChat.errors.genericMessage",
+					"An error occurred while loading the chat. Please try again.",
+				)
 			: ((error instanceof Error ? error.message : undefined) ??
-				localization?.CHAT_GENERIC_ERROR_MESSAGE ??
-				AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_MESSAGE);
+				tr(
+					"CHAT_GENERIC_ERROR_MESSAGE",
+					"aiChat.errors.genericMessage",
+					"An error occurred while loading the chat. Please try again.",
+				));
 	return <ErrorPlaceholder title={title} message={message} />;
 }