@btst/stack 2.12.2 → 3.0.0-rc.1

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

@@ -21,12 +21,11 @@ import { ChatSidebar } from "./chat-sidebar";
 import { ChatInterface } from "./chat-interface";
 import type { UIMessage } from "ai";
 import { usePageAIContext } from "../context/page-ai-context";
+import { usePluginOverrides, useStack } from "@btst/stack/context";
+import type { AiChatPluginOverrides } from "../overrides";
+import { useAiChatTranslation } from "../localization";
 
 interface ChatLayoutBaseProps {
-	/** API base URL */
-	apiBaseURL: string;
-	/** API base path */
-	apiBasePath: string;
 	/** Current conversation ID (if viewing existing conversation) */
 	conversationId?: string;
 	/** Additional class name for the container */
@@ -78,8 +77,6 @@ export type ChatLayoutProps = ChatLayoutWidgetProps | ChatLayoutFullProps;
  */
 export function ChatLayout(props: ChatLayoutProps) {
 	const {
-		apiBaseURL,
-		apiBasePath,
 		conversationId,
 		layout = "full",
 		className,
@@ -88,6 +85,12 @@ export function ChatLayout(props: ChatLayoutProps) {
 		onMessagesChange,
 		onClear,
 	} = props;
+	const { localization } = usePluginOverrides<
+		AiChatPluginOverrides,
+		Partial<AiChatPluginOverrides>
+	>("ai-chat", {});
+	const { api } = useStack();
+	const tr = useAiChatTranslation(localization);
 
 	// Widget-specific props — TypeScript narrows props to ChatLayoutWidgetProps here
 	const widgetHeight =
@@ -116,7 +119,7 @@ export function ChatLayout(props: ChatLayoutProps) {
 	// Read page AI context to show badge in header
 	const pageAIContext = usePageAIContext();
 
-	const apiPath = `${apiBaseURL}${apiBasePath}/chat`;
+	const apiPath = `${api?.baseURL ?? ""}${api?.basePath ?? ""}/chat`;
 
 	// Handler for "New chat" button - increments key to force remount
 	const handleNewChat = useCallback(() => {
@@ -151,7 +154,7 @@ export function ChatLayout(props: ChatLayoutProps) {
 							</Badge>
 						) : (
 							<span className="text-xs text-muted-foreground font-medium">
-								AI Chat
+								{tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat")}
 							</span>
 						)}
 						<div className="flex-1" />
@@ -163,8 +166,16 @@ export function ChatLayout(props: ChatLayoutProps) {
 								onClear?.();
 								setWidgetResetKey((prev) => prev + 1);
 							}}
-							aria-label="Clear chat"
-							title="Clear chat"
+							aria-label={tr(
+								"A11Y_CLEAR_CHAT",
+								"aiChat.a11y.clearChat",
+								"Clear chat",
+							)}
+							title={tr(
+								"A11Y_CLEAR_CHAT",
+								"aiChat.a11y.clearChat",
+								"Clear chat",
+							)}
 						>
 							<Trash2 className="h-3.5 w-3.5" />
 						</Button>
@@ -173,7 +184,11 @@ export function ChatLayout(props: ChatLayoutProps) {
 							size="icon"
 							className="h-5 w-5"
 							onClick={() => setWidgetOpen(false)}
-							aria-label="Close chat"
+							aria-label={tr(
+								"A11Y_CLOSE_CHAT",
+								"aiChat.a11y.closeChat",
+								"Close chat",
+							)}
 						>
 							<X className="h-3.5 w-3.5" />
 						</Button>
@@ -199,7 +214,11 @@ export function ChatLayout(props: ChatLayoutProps) {
 							setWidgetOpen((prev) => !prev);
 							setWidgetEverOpened(true);
 						}}
-						aria-label={widgetOpen ? "Close chat" : "Open chat"}
+						aria-label={
+							widgetOpen
+								? tr("A11Y_CLOSE_CHAT", "aiChat.a11y.closeChat", "Close chat")
+								: tr("A11Y_OPEN_CHAT", "aiChat.a11y.openChat", "Open chat")
+						}
 						data-testid="widget-trigger"
 					>
 						{widgetOpen ? (
@@ -252,7 +271,11 @@ export function ChatLayout(props: ChatLayoutProps) {
 									variant="ghost"
 									size="icon"
 									className="md:hidden"
-									aria-label="Open menu"
+									aria-label={tr(
+										"A11Y_OPEN_MENU",
+										"aiChat.a11y.openMenu",
+										"Open menu",
+									)}
 								>
 									<Menu className="h-5 w-5" />
 								</Button>
@@ -276,7 +299,19 @@ export function ChatLayout(props: ChatLayoutProps) {
 							size="icon"
 							className="hidden md:flex"
 							onClick={() => setSidebarOpen(!sidebarOpen)}
-							aria-label={sidebarOpen ? "Close sidebar" : "Open sidebar"}
+							aria-label={
+								sidebarOpen
+									? tr(
+											"A11Y_CLOSE_SIDEBAR",
+											"aiChat.a11y.closeSidebar",
+											"Close sidebar",
+										)
+									: tr(
+											"A11Y_OPEN_SIDEBAR",
+											"aiChat.a11y.openSidebar",
+											"Open sidebar",
+										)
+							}
 						>
 							{sidebarOpen ? (
 								<PanelLeftClose className="h-5 w-5" />
@@ -308,8 +343,16 @@ export function ChatLayout(props: ChatLayoutProps) {
 								onClear();
 								setChatResetKey((prev) => prev + 1);
 							}}
-							aria-label="Clear chat"
-							title="Clear chat"
+							aria-label={tr(
+								"A11Y_CLEAR_CHAT",
+								"aiChat.a11y.clearChat",
+								"Clear chat",
+							)}
+							title={tr(
+								"A11Y_CLEAR_CHAT",
+								"aiChat.a11y.clearChat",
+								"Clear chat",
+							)}
 						>
 							<Trash2 className="h-4 w-4" />
 						</Button>

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

@@ -28,13 +28,13 @@ import {
 	useEffect,
 	type ComponentType,
 } from "react";
-import { usePluginOverrides } from "@btst/stack/context";
+import { usePluginOverrides, useStack } from "@btst/stack/context";
 import type {
 	AiChatPluginOverrides,
 	ToolCallProps,
 	ToolCallState,
 } from "../overrides";
-import { AI_CHAT_LOCALIZATION } from "../localization";
+import { useAiChatTranslation } from "../localization";
 import { ToolCallDisplay } from "./tool-call-display";
 
 // Import shared markdown + syntax highlighting styles (same pattern as blog plugin)
@@ -133,17 +133,16 @@ export function ChatMessage({
 }: ChatMessageProps) {
 	const isUser = message.role === "user";
 
-	const {
-		Link,
-		Image,
-		localization: customLocalization,
-		toolRenderers,
-	} = usePluginOverrides<AiChatPluginOverrides, Partial<AiChatPluginOverrides>>(
-		"ai-chat",
-		{},
-	);
+	const { localization: customLocalization, toolRenderers } =
+		usePluginOverrides<AiChatPluginOverrides, Partial<AiChatPluginOverrides>>(
+			"ai-chat",
+			{},
+		);
+	const { router } = useStack();
+	const Link = router?.Link;
+	const Image = router?.Image;
 
-	const localization = { ...AI_CHAT_LOCALIZATION, ...customLocalization };
+	const tr = useAiChatTranslation(customLocalization);
 
 	// Use provided Image component or fallback to default
 	const ImageComponent = Image ?? DefaultImage;
@@ -269,8 +268,12 @@ export function ChatMessage({
 			)}
 			aria-label={
 				isUser
-					? localization.A11Y_USER_MESSAGE
-					: localization.A11Y_ASSISTANT_MESSAGE
+					? tr("A11Y_USER_MESSAGE", "aiChat.a11y.userMessage", "Your message")
+					: tr(
+							"A11Y_ASSISTANT_MESSAGE",
+							"aiChat.a11y.assistantMessage",
+							"AI response",
+						)
 			}
 		>
 			{/* Assistant Avatar */}
@@ -310,7 +313,12 @@ export function ChatMessage({
 										>
 											<FileText className="h-4 w-4 shrink-0" />
 											<span className="text-xs truncate max-w-[150px]">
-												{part.filename || "File"}
+												{part.filename ||
+													tr(
+														"FILE_FALLBACK_NAME",
+														"aiChat.files.fallbackName",
+														"File",
+													)}
 											</span>
 										</a>
 									))}
@@ -323,7 +331,15 @@ export function ChatMessage({
 										<ClickableImage
 											key={index}
 											src={part.url}
-											alt={part.filename || `Attached image ${index + 1}`}
+											alt={
+												part.filename ||
+												tr(
+													"IMAGE_ATTACHED_ALT",
+													"aiChat.images.attachedAlt",
+													"Attached image {{count}}",
+													{ count: index + 1 },
+												)
+											}
 											width={150}
 											height={150}
 											className="rounded-md"
@@ -354,7 +370,16 @@ export function ChatMessage({
 											variant="ghost"
 											onClick={handleCancelEdit}
 											className="h-7 w-7 text-primary-foreground hover:bg-primary-foreground/20"
-											title={localization.MESSAGE_CANCEL}
+											title={tr(
+												"MESSAGE_CANCEL",
+												"aiChat.messages.cancel",
+												"Cancel",
+											)}
+											aria-label={tr(
+												"MESSAGE_CANCEL",
+												"aiChat.messages.cancel",
+												"Cancel",
+											)}
 										>
 											<X className="h-4 w-4" />
 										</Button>
@@ -365,7 +390,12 @@ export function ChatMessage({
 											onClick={handleSaveEdit}
 											disabled={!editText.trim()}
 											className="h-7 w-7 text-primary-foreground hover:bg-primary-foreground/20 disabled:opacity-50"
-											title={localization.MESSAGE_SAVE}
+											title={tr("MESSAGE_SAVE", "aiChat.messages.save", "Save")}
+											aria-label={tr(
+												"MESSAGE_SAVE",
+												"aiChat.messages.save",
+												"Save",
+											)}
 										>
 											<Send className="h-4 w-4" />
 										</Button>
@@ -400,7 +430,12 @@ export function ChatMessage({
 										>
 											<FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
 											<span className="text-xs truncate max-w-[150px]">
-												{part.filename || "File"}
+												{part.filename ||
+													tr(
+														"FILE_FALLBACK_NAME",
+														"aiChat.files.fallbackName",
+														"File",
+													)}
 											</span>
 										</a>
 									))}
@@ -413,7 +448,15 @@ export function ChatMessage({
 										<ClickableImage
 											key={index}
 											src={part.url}
-											alt={part.filename || `Image ${index + 1}`}
+											alt={
+												part.filename ||
+												tr(
+													"IMAGE_GENERATED_ALT",
+													"aiChat.images.generatedAlt",
+													"Image {{count}}",
+													{ count: index + 1 },
+												)
+											}
 											width={200}
 											height={200}
 											className="rounded-md"
@@ -495,7 +538,16 @@ export function ChatMessage({
 									variant="ghost"
 									onClick={handleStartEdit}
 									className="h-7 w-7 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"
-									title={localization.MESSAGE_EDIT}
+									title={tr(
+										"MESSAGE_EDIT",
+										"aiChat.messages.edit",
+										"Edit message",
+									)}
+									aria-label={tr(
+										"MESSAGE_EDIT",
+										"aiChat.messages.edit",
+										"Edit message",
+									)}
 								>
 									<Pencil className="h-3.5 w-3.5" />
 								</Button>
@@ -511,8 +563,29 @@ export function ChatMessage({
 									className="h-7 w-7 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"
 									title={
 										copied
-											? localization.MESSAGE_COPIED
-											: localization.MESSAGE_COPY
+											? tr(
+													"MESSAGE_COPIED",
+													"aiChat.messages.copied",
+													"Copied!",
+												)
+											: tr(
+													"MESSAGE_COPY",
+													"aiChat.messages.copy",
+													"Copy message",
+												)
+									}
+									aria-label={
+										copied
+											? tr(
+													"MESSAGE_COPIED",
+													"aiChat.messages.copied",
+													"Copied!",
+												)
+											: tr(
+													"MESSAGE_COPY",
+													"aiChat.messages.copy",
+													"Copy message",
+												)
 									}
 								>
 									{copied ? (
@@ -529,7 +602,16 @@ export function ChatMessage({
 										onClick={onRetry}
 										disabled={isRetrying}
 										className="h-7 w-7 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50 disabled:opacity-50"
-										title={localization.MESSAGE_RETRY}
+										title={tr(
+											"MESSAGE_RETRY",
+											"aiChat.messages.retry",
+											"Retry",
+										)}
+										aria-label={tr(
+											"MESSAGE_RETRY",
+											"aiChat.messages.retry",
+											"Retry",
+										)}
 									>
 										<RefreshCw
 											className={cn(