@btst/stack 2.12.2 → 3.0.0-rc.2

package/src/plugins/ai-chat/__tests__/hooks.test.tsx

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { StackProvider } from "@btst/stack/context";
+import { useRenameConversationForm } from "../client/hooks/chat-hooks";
+import type { SerializedConversation } from "../types";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+const conversation: SerializedConversation = {
+	id: "conv-1",
+	title: "Original",
+	createdAt: new Date("2024-01-01").toISOString(),
+	updatedAt: new Date("2024-01-02").toISOString(),
+};
+
+let container: HTMLDivElement;
+let root: Root;
+let queryClient: QueryClient;
+let fetchMock: ReturnType<typeof vi.spyOn>;
+let refresh: ReturnType<typeof vi.fn>;
+let notify: {
+	success: ReturnType<typeof vi.fn>;
+	error: ReturnType<typeof vi.fn>;
+};
+
+beforeEach(() => {
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+	queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	fetchMock = vi.spyOn(globalThis, "fetch" as any);
+	refresh = vi.fn();
+	notify = { success: vi.fn(), error: vi.fn() };
+});
+
+afterEach(async () => {
+	await act(async () => root.unmount());
+	container.remove();
+	queryClient.clear();
+	vi.restoreAllMocks();
+});
+
+function jsonResponse(body: unknown, status = 200) {
+	return new Response(JSON.stringify(body), {
+		status,
+		headers: { "content-type": "application/json" },
+	});
+}
+
+async function renderProbe() {
+	let captured: ReturnType<typeof useRenameConversationForm>;
+	function Probe() {
+		captured = useRenameConversationForm({ conversation });
+		return null;
+	}
+
+	await act(async () => {
+		root.render(
+			<QueryClientProvider client={queryClient}>
+				<StackProvider
+					basePath="/pages"
+					api={{ baseURL: "http://test.local", basePath: "/api/data" }}
+					router={{ refresh }}
+					overrides={{
+						"ai-chat": {
+							headers: { "x-chat-test": "forwarded" },
+						},
+					}}
+					notify={notify}
+				>
+					<Probe />
+				</StackProvider>
+			</QueryClientProvider>,
+		);
+	});
+
+	return () => captured!;
+}
+
+describe("useRenameConversationForm", () => {
+	it("trims the title, forwards headers, refreshes, and notifies on success", async () => {
+		fetchMock.mockResolvedValue(
+			jsonResponse({ ...conversation, title: "Renamed" }),
+		);
+		const getForm = await renderProbe();
+
+		await act(async () => {
+			await getForm().submit({ title: "  Renamed  " });
+		});
+
+		const [url, init] = fetchMock.mock.calls[0] as [unknown, RequestInit];
+		expect(String(url)).toContain("/api/data/chat/conversations/conv-1");
+		expect(init.method).toBe("PUT");
+		expect(JSON.parse(String(init.body))).toEqual({ title: "Renamed" });
+		expect(new Headers(init.headers).get("x-chat-test")).toBe("forwarded");
+		expect(notify.success).toHaveBeenCalledWith("Conversation renamed");
+		expect(refresh).toHaveBeenCalledTimes(1);
+	});
+
+	it("keeps server validation errors on the title field without an error toast", async () => {
+		fetchMock.mockResolvedValue(
+			jsonResponse(
+				{
+					message: "[body.title] Title is required",
+					code: "VALIDATION_ERROR",
+					issues: [{ path: ["title"], message: "Title is required" }],
+				},
+				400,
+			),
+		);
+		const getForm = await renderProbe();
+
+		await act(async () => {
+			await getForm().submit({ title: "   " });
+		});
+
+		expect(getForm().fieldErrors).toEqual({ title: "Title is required" });
+		expect(notify.error).not.toHaveBeenCalled();
+		expect(refresh).not.toHaveBeenCalled();
+	});
+});

package/src/plugins/ai-chat/api/index.ts

@@ -1,3 +1,9 @@
 export * from "./plugin";
 export { getAllConversations, getConversationById } from "./getters";
-export { createAiChatQueryKeys } from "../query-keys";
+export { aiChatResources, createAiChatQueryKeys } from "../query-keys";
+export type {
+	AiChatQueryKeys,
+	ConversationWithMessages,
+	CreateConversationInput,
+	RenameConversationInput,
+} from "../query-keys";

package/src/plugins/ai-chat/api/plugin.ts

@@ -21,7 +21,7 @@ import {
 	BUILT_IN_PAGE_TOOL_ROUTE_ALLOWLIST,
 	BUILT_IN_PAGE_TOOL_SCHEMAS,
 } from "./page-tools";
-import { runHookWithShim } from "../../utils";
+import { runHook } from "../../utils";
 
 /**
  * Context passed to AI Chat API hooks
@@ -451,7 +451,7 @@ export const aiChatBackendPlugin = <
 								role: msg.role,
 								content: getMessageTextContent(msg),
 							}));
-							await runHookWithShim(
+							await runHook(
 								() => config.hooks!.onBeforeChat!(messagesForHook, context),
 								ctx.error,
 								"Unauthorized: Cannot start chat",
@@ -526,8 +526,7 @@ export const aiChatBackendPlugin = <
 
 						// Consumer hook: user-level tool authorization.
 						// Runs after the structural routeName allowlist check.
-						// A thrown Error is caught and returned as a 403 response,
-						// consistent with how onBeforeChat handles return false → 403.
+						// A thrown Error is caught and returned as a 403 response.
 						if (
 							config.hooks?.onBeforeToolsActivated &&
 							Object.keys(activePageTools).length > 0
@@ -844,7 +843,7 @@ export const aiChatBackendPlugin = <
 
 						// Authorization hook
 						if (config.hooks?.onBeforeCreateConversation) {
-							await runHookWithShim(
+							await runHook(
 								() =>
 									config.hooks!.onBeforeCreateConversation!(
 										{ id, title },
@@ -910,7 +909,7 @@ export const aiChatBackendPlugin = <
 
 						// Authorization hook
 						if (config.hooks?.onBeforeListConversations) {
-							await runHookWithShim(
+							await runHook(
 								() => config.hooks!.onBeforeListConversations!(context),
 								ctx.error,
 								"Unauthorized: Cannot list conversations",
@@ -985,7 +984,7 @@ export const aiChatBackendPlugin = <
 
 						// Authorization hook
 						if (config.hooks?.onBeforeGetConversation) {
-							await runHookWithShim(
+							await runHook(
 								() => config.hooks!.onBeforeGetConversation!(id, context),
 								ctx.error,
 								"Unauthorized: Cannot get conversation",
@@ -1106,7 +1105,7 @@ export const aiChatBackendPlugin = <
 
 						// Authorization hook
 						if (config.hooks?.onBeforeUpdateConversation) {
-							await runHookWithShim(
+							await runHook(
 								() =>
 									config.hooks!.onBeforeUpdateConversation!(
 										id,
@@ -1201,7 +1200,7 @@ export const aiChatBackendPlugin = <
 
 						// Authorization hook
 						if (config.hooks?.onBeforeDeleteConversation) {
-							await runHookWithShim(
+							await runHook(
 								() => config.hooks!.onBeforeDeleteConversation!(id, context),
 								ctx.error,
 								"Unauthorized: Cannot delete conversation",

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

@@ -5,11 +5,10 @@ import { Button } from "@workspace/ui/components/button";
 import { Textarea } from "@workspace/ui/components/textarea";
 import { Send, Paperclip, X, Loader2, FileText } from "lucide-react";
 import { cn } from "@workspace/ui/lib/utils";
-import { toast } from "sonner";
-import { usePluginOverrides } from "@btst/stack/context";
+import { useNotify, usePluginOverrides } from "@btst/stack/context";
 import type { AiChatPluginOverrides } from "../overrides";
 import { DEFAULT_ALLOWED_FILE_TYPES, FILE_TYPE_MIME_MAP } from "../overrides";
-import { AI_CHAT_LOCALIZATION } from "../localization";
+import { useAiChatTranslation } from "../localization";
 import type { FormEvent } from "react";
 
 /** Represents an attached file with metadata */
@@ -58,7 +57,8 @@ export function ChatInput({
 		{},
 	);
 
-	const localization = { ...AI_CHAT_LOCALIZATION, ...customLocalization };
+	const notify = useNotify();
+	const tr = useAiChatTranslation(customLocalization);
 
 	const fileInputRef = useRef<HTMLInputElement>(null);
 	const [internalFiles, setInternalFiles] = useState<AttachedFile[]>([]);
@@ -136,7 +136,13 @@ export function ChatInput({
 		if (!file) return;
 
 		if (file.size > MAX_FILE_SIZE) {
-			toast.error(localization.FILE_UPLOAD_ERROR_TOO_LARGE);
+			notify.error(
+				tr(
+					"FILE_UPLOAD_ERROR_TOO_LARGE",
+					"aiChat.files.tooLarge",
+					"File must be less than 10MB",
+				),
+			);
 			return;
 		}
 
@@ -146,10 +152,22 @@ export function ChatInput({
 				setIsUploading(true);
 				const url = await uploadFile(file);
 				addFile({ url, mediaType: file.type, filename: file.name });
-				toast.success(localization.FILE_UPLOAD_SUCCESS);
+				notify.success(
+					tr(
+						"FILE_UPLOAD_SUCCESS",
+						"aiChat.files.uploadSuccess",
+						"File attached",
+					),
+				);
 			} catch (error) {
 				console.error("Failed to upload file:", error);
-				toast.error(localization.FILE_UPLOAD_FAILURE);
+				notify.error(
+					tr(
+						"FILE_UPLOAD_FAILURE",
+						"aiChat.files.uploadFailure",
+						"Failed to attach file",
+					),
+				);
 			} finally {
 				setIsUploading(false);
 			}
@@ -163,7 +181,13 @@ export function ChatInput({
 				setIsUploading(false);
 			};
 			reader.onerror = () => {
-				toast.error(localization.FILE_UPLOAD_FAILURE);
+				notify.error(
+					tr(
+						"FILE_UPLOAD_FAILURE",
+						"aiChat.files.uploadFailure",
+						"Failed to attach file",
+					),
+				);
 				setIsUploading(false);
 			};
 			reader.readAsDataURL(file);
@@ -221,6 +245,11 @@ export function ChatInput({
 								type="button"
 								onClick={() => removeFile(index)}
 								className="absolute top-0.5 right-0.5 p-0.5 rounded-full bg-background/80 opacity-0 group-hover:opacity-100 transition-opacity"
+								aria-label={tr(
+									"FILE_REMOVE",
+									"aiChat.files.remove",
+									"Remove file",
+								)}
 							>
 								<X className="h-3 w-3" />
 							</button>
@@ -248,7 +277,11 @@ export function ChatInput({
 							onClick={() => fileInputRef.current?.click()}
 							disabled={isLoading || isUploading}
 							className={cn("shrink-0", isCompact ? "h-8 w-8" : "h-9 w-9")}
-							aria-label={localization.FILE_UPLOAD_BUTTON}
+							aria-label={tr(
+								"FILE_UPLOAD_BUTTON",
+								"aiChat.files.attach",
+								"Attach file",
+							)}
 						>
 							{isUploading ? (
 								<Loader2 className="h-4 w-4 animate-spin" />
@@ -265,7 +298,14 @@ export function ChatInput({
 						value={input}
 						onChange={handleInputChange}
 						onKeyDown={handleKeyDown}
-						placeholder={placeholder || localization.CHAT_PLACEHOLDER}
+						placeholder={
+							placeholder ||
+							tr(
+								"CHAT_PLACEHOLDER",
+								"aiChat.chat.placeholder",
+								"Type a message...",
+							)
+						}
 						className={cn(
 							"resize-none pr-12 max-w-full",
 							isCompact
@@ -284,7 +324,7 @@ export function ChatInput({
 							"absolute right-2 bottom-2",
 							isCompact ? "h-7 w-7" : "h-8 w-8",
 						)}
-						aria-label={localization.CHAT_SEND_BUTTON}
+						aria-label={tr("CHAT_SEND_BUTTON", "aiChat.chat.send", "Send")}
 					>
 						<Send className={cn(isCompact ? "h-3.5 w-3.5" : "h-4 w-4")} />
 					</Button>

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

@@ -13,9 +13,14 @@ import {
 	type UIMessage,
 } from "ai";
 import { cn } from "@workspace/ui/lib/utils";
-import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import {
+	useCan,
+	usePluginOverrides,
+	useBasePath,
+	useStack,
+} from "@btst/stack/context";
 import type { AiChatPluginOverrides } from "../overrides";
-import { AI_CHAT_LOCALIZATION } from "../localization";
+import { useAiChatTranslation } from "../localization";
 import { createApiClient } from "@btst/stack/plugins/client";
 import type { AiChatApiRouter } from "../../api/plugin";
 import { createAiChatQueryKeys } from "../../query-keys";
@@ -46,10 +51,7 @@ export function ChatInterface({
 	onMessagesChange,
 }: ChatInterfaceProps) {
 	const {
-		navigate,
 		localization: customLocalization,
-		apiBaseURL,
-		apiBasePath,
 		headers,
 		mode,
 		showAttribution,
@@ -58,13 +60,17 @@ export function ChatInterface({
 		"ai-chat",
 		{ showAttribution: true },
 	);
+	const { api, router } = useStack();
+	const apiBaseURL = api?.baseURL;
+	const apiBasePath = api?.basePath;
+	const navigate = router?.navigate;
 	const basePath = useBasePath();
 	const isPublicMode = mode === "public";
 
 	// Read page AI context registered by the current page
 	const pageAIContext = usePageAIContext();
 
-	const localization = { ...AI_CHAT_LOCALIZATION, ...customLocalization };
+	const tr = useAiChatTranslation(customLocalization);
 	const queryClient = useQueryClient();
 
 	const conversationsListQueryKey = useMemo(() => {
@@ -83,6 +89,14 @@ export function ChatInterface({
 	const [currentConversationId, setCurrentConversationId] = useState<
 		string | undefined
 	>(isPublicMode ? undefined : id);
+	const { can: canPersistConversation, isPending: isPermissionPending } =
+		useCan({
+			resource: "ai-chat:conversation",
+			action: currentConversationId ? "update" : "create",
+			params: currentConversationId ? { id: currentConversationId } : undefined,
+		});
+	const canWrite =
+		isPublicMode || (!isPermissionPending && canPersistConversation);
 	// Track if we've sent the first message on a new chat (to trigger navigation)
 	const isFirstMessageSentRef = useRef(false);
 	const hasNavigatedRef = useRef(false);
@@ -232,7 +246,13 @@ export function ChatInterface({
 						toolCallId: toolCall.toolCallId,
 						state: "output-error",
 						errorText:
-							err instanceof Error ? err.message : "Tool execution failed",
+							err instanceof Error
+								? err.message
+								: tr(
+										"TOOL_EXECUTION_FAILED",
+										"aiChat.tools.executionFailed",
+										"Tool execution failed",
+									),
 					});
 				}
 			} else {
@@ -244,7 +264,12 @@ export function ChatInterface({
 					tool: toolName,
 					toolCallId: toolCall.toolCallId,
 					state: "output-error",
-					errorText: `No client-side handler registered for tool "${toolName}". The page context may have changed while the response was streaming.`,
+					errorText: tr(
+						"TOOL_HANDLER_MISSING",
+						"aiChat.tools.handlerMissing",
+						'No client-side handler registered for tool "{{toolName}}". The page context may have changed while the response was streaming.',
+						{ toolName },
+					),
 				});
 			}
 		},
@@ -428,6 +453,7 @@ export function ChatInterface({
 		files?: AttachedFile[],
 	) => {
 		e.preventDefault();
+		if (!canWrite) return;
 		const text = input.trim();
 		// Allow submit if there's text OR files
 		if (!text && (!files || files.length === 0)) return;
@@ -572,7 +598,13 @@ export function ChatInterface({
 							{messages.length === 0 ? (
 								<div className="flex flex-col h-full min-h-[300px]">
 									<div className="flex-1 flex items-center justify-center text-muted-foreground mb-4">
-										<p>{localization.CHAT_EMPTY_STATE}</p>
+										<p>
+											{tr(
+												"CHAT_EMPTY_STATE",
+												"aiChat.chat.emptyState",
+												"Start a conversation...",
+											)}
+										</p>
 									</div>
 									{(() => {
 										// Merge static suggestions from overrides with dynamic ones from page context.
@@ -582,7 +614,7 @@ export function ChatInterface({
 											...pageSuggestions,
 											...(chatSuggestions ?? []),
 										];
-										return allSuggestions.length > 0 ? (
+										return canWrite && allSuggestions.length > 0 ? (
 											<div className="flex flex-wrap justify-center gap-2 pb-4 max-w-md mx-auto">
 												{allSuggestions.map((suggestion, index) => (
 													<button
@@ -612,13 +644,17 @@ export function ChatInterface({
 										onRetry={
 											// Only show retry on the last assistant message
 											m.role === "assistant" && index === messages.length - 1
-												? handleRetry
+												? canWrite
+													? handleRetry
+													: undefined
 												: undefined
 										}
 										onEdit={
 											// Allow editing user messages
 											m.role === "user"
-												? (newText) => handleEditMessage(m.id, newText)
+												? canWrite
+													? (newText) => handleEditMessage(m.id, newText)
+													: undefined
 												: undefined
 										}
 										isRetrying={isLoading && m.role === "assistant"}
@@ -629,13 +665,19 @@ export function ChatInterface({
 								messages[messages.length - 1]?.role !== "assistant" && (
 									<div className="flex items-center gap-2 text-muted-foreground text-sm py-4">
 										<div className="animate-pulse">
-											{localization.CHAT_LOADING}
+											{tr("CHAT_LOADING", "aiChat.chat.loading", "Thinking...")}
 										</div>
 									</div>
 								)}
 							{error && (
 								<div className="flex items-center gap-2 text-destructive text-sm py-4 px-3 bg-destructive/10 rounded-md">
-									<span>{localization.CHAT_ERROR}</span>
+									<span>
+										{tr(
+											"CHAT_ERROR",
+											"aiChat.chat.error",
+											"Something went wrong. Please try again.",
+										)}
+									</span>
 								</div>
 							)}
 						</div>
@@ -643,26 +685,32 @@ export function ChatInterface({
 				</div>
 			</div>
 			{/* Input Area */}
-			<div
-				className={cn(
-					"border-t bg-background p-4",
-					isWidget ? "px-3 py-3" : "px-4",
-				)}
-			>
-				<div className={cn(!isWidget && "max-w-3xl mx-auto")}>
-					<ChatInput
-						input={input}
-						handleInputChange={handleInputChange}
-						handleSubmit={handleSubmit}
-						isLoading={isLoading}
-						placeholder={localization.CHAT_PLACEHOLDER}
-						variant={isWidget ? "compact" : "default"}
-						onFilesAttached={setAttachedFiles}
-						attachedFiles={attachedFiles}
-					/>
-					{showAttribution && <StackAttribution />}
+			{canWrite && (
+				<div
+					className={cn(
+						"border-t bg-background p-4",
+						isWidget ? "px-3 py-3" : "px-4",
+					)}
+				>
+					<div className={cn(!isWidget && "max-w-3xl mx-auto")}>
+						<ChatInput
+							input={input}
+							handleInputChange={handleInputChange}
+							handleSubmit={handleSubmit}
+							isLoading={isLoading}
+							placeholder={tr(
+								"CHAT_PLACEHOLDER",
+								"aiChat.chat.placeholder",
+								"Type a message...",
+							)}
+							variant={isWidget ? "compact" : "default"}
+							onFilesAttached={setAttachedFiles}
+							attachedFiles={attachedFiles}
+						/>
+						{showAttribution && <StackAttribution />}
+					</div>
 				</div>
-			</div>
+			)}
 		</>
 	);
 }