@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/ai-chat/client/components/chat-layout.mjs

@@ -9,11 +9,11 @@ import { cn } from '../../../../../../ui/src/lib/utils.mjs';
 import { ChatSidebar } from './chat-sidebar.mjs';
 import { ChatInterface } from './chat-interface.mjs';
 import { usePageAIContext } from '../../../../../../../plugins/ai-chat/client/context/page-ai-context.mjs';
+import { usePluginOverrides, useStack } from '@btst/stack/context';
+import { useAiChatTranslation } from '../localization/index.mjs';
 
 function ChatLayout(props) {
   const {
-    apiBaseURL,
-    apiBasePath,
     conversationId,
     layout = "full",
     className,
@@ -22,6 +22,9 @@ function ChatLayout(props) {
     onMessagesChange,
     onClear
   } = props;
+  const { localization } = usePluginOverrides("ai-chat", {});
+  const { api } = useStack();
+  const tr = useAiChatTranslation(localization);
   const widgetHeight = props.layout === "widget" ? props.widgetHeight ?? "600px" : "600px";
   const widgetWidth = props.layout === "widget" ? props.widgetWidth ?? "380px" : "380px";
   const defaultOpen = props.layout === "widget" ? props.defaultOpen ?? false : false;
@@ -33,7 +36,7 @@ function ChatLayout(props) {
   const [widgetResetKey, setWidgetResetKey] = useState(0);
   const [widgetEverOpened, setWidgetEverOpened] = useState(defaultOpen);
   const pageAIContext = usePageAIContext();
-  const apiPath = `${apiBaseURL}${apiBasePath}/chat`;
+  const apiPath = `${api?.baseURL ?? ""}${api?.basePath ?? ""}/chat`;
   const handleNewChat = useCallback(() => {
     if (!conversationId) {
       setChatResetKey((prev) => prev + 1);
@@ -60,7 +63,7 @@ function ChatLayout(props) {
                   "data-testid": "page-context-badge",
                   children: pageAIContext.routeName
                 }
-              ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-medium", children: "AI Chat" }),
+              ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-medium", children: tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat") }),
               /* @__PURE__ */ jsx("div", { className: "flex-1" }),
               /* @__PURE__ */ jsx(
                 Button,
@@ -72,8 +75,16 @@ function ChatLayout(props) {
                     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"
+                  ),
                   children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
                 }
               ),
@@ -84,7 +95,11 @@ function ChatLayout(props) {
                   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"
+                  ),
                   children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
                 }
               )
@@ -112,7 +127,7 @@ function ChatLayout(props) {
             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",
           children: widgetOpen ? /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Sparkles, { className: "h-5 w-5" })
         }
@@ -154,7 +169,11 @@ function ChatLayout(props) {
                   variant: "ghost",
                   size: "icon",
                   className: "md:hidden",
-                  "aria-label": "Open menu",
+                  "aria-label": tr(
+                    "A11Y_OPEN_MENU",
+                    "aiChat.a11y.openMenu",
+                    "Open menu"
+                  ),
                   children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
                 }
               ) }),
@@ -176,7 +195,15 @@ function ChatLayout(props) {
                 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"
+                ),
                 children: sidebarOpen ? /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(PanelLeft, { className: "h-5 w-5" })
               }
             ),
@@ -202,8 +229,16 @@ function ChatLayout(props) {
                   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"
+                ),
                 children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
               }
             )

package/dist/packages/stack/src/plugins/ai-chat/client/components/chat-message.cjs

@@ -82,16 +82,14 @@ function ChatMessage({
   isRetrying = false
 }) {
   const isUser = message.role === "user";
-  const {
-    Link,
-    Image,
-    localization: customLocalization,
-    toolRenderers
-  } = context.usePluginOverrides(
+  const { localization: customLocalization, toolRenderers } = context.usePluginOverrides(
     "ai-chat",
     {}
   );
-  const localization = { ...index.AI_CHAT_LOCALIZATION, ...customLocalization };
+  const { router } = context.useStack();
+  const Link = router?.Link;
+  const Image = router?.Image;
+  const tr = index.useAiChatTranslation(customLocalization);
   const ImageComponent = Image ?? DefaultImage;
   const [copied, setCopied] = React.useState(false);
   const [isEditing, setIsEditing] = React.useState(false);
@@ -180,7 +178,11 @@ function ChatMessage({
         isCompact ? "mb-3" : "mb-4",
         isUser ? "justify-end" : "justify-start"
       ),
-      "aria-label": isUser ? localization.A11Y_USER_MESSAGE : localization.A11Y_ASSISTANT_MESSAGE,
+      "aria-label": isUser ? tr("A11Y_USER_MESSAGE", "aiChat.a11y.userMessage", "Your message") : tr(
+        "A11Y_ASSISTANT_MESSAGE",
+        "aiChat.a11y.assistantMessage",
+        "AI response"
+      ),
       children: [
         !isUser && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -213,7 +215,11 @@ function ChatMessage({
                       className: "flex items-center gap-2 px-3 py-2 rounded-md bg-primary-foreground/10 hover:bg-primary-foreground/20 transition-colors",
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.FileText, { className: "h-4 w-4 shrink-0" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate max-w-[150px]", children: part.filename || "File" })
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate max-w-[150px]", children: part.filename || tr(
+                          "FILE_FALLBACK_NAME",
+                          "aiChat.files.fallbackName",
+                          "File"
+                        ) })
                       ]
                     },
                     index
@@ -222,7 +228,12 @@ function ChatMessage({
                     ClickableImage,
                     {
                       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",
@@ -255,7 +266,16 @@ 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"
+                          ),
                           children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-4 w-4" })
                         }
                       ),
@@ -268,7 +288,12 @@ 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"
+                          ),
                           children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Send, { className: "h-4 w-4" })
                         }
                       )
@@ -296,7 +321,11 @@ function ChatMessage({
                       className: "flex items-center gap-2 px-3 py-2 rounded-md bg-muted-foreground/10 hover:bg-muted-foreground/20 transition-colors border",
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.FileText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate max-w-[150px]", children: part.filename || "File" })
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate max-w-[150px]", children: part.filename || tr(
+                          "FILE_FALLBACK_NAME",
+                          "aiChat.files.fallbackName",
+                          "File"
+                        ) })
                       ]
                     },
                     index
@@ -305,7 +334,12 @@ function ChatMessage({
                     ClickableImage,
                     {
                       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",
@@ -366,7 +400,16 @@ 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"
+                    ),
                     children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-3.5 w-3.5" })
                   }
                 )
@@ -381,7 +424,24 @@ function ChatMessage({
                       variant: "ghost",
                       onClick: handleCopy,
                       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,
+                      title: copied ? 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"
+                      ),
                       children: copied ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Copy, { className: "h-3.5 w-3.5" })
                     }
                   ),
@@ -394,7 +454,16 @@ 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"
+                      ),
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         LucideIcons.RefreshCw,
                         {

package/dist/packages/stack/src/plugins/ai-chat/client/components/chat-message.mjs

@@ -7,8 +7,8 @@ import { Dialog, DialogContent, DialogTitle } from '../../../../../../ui/src/com
 import { Bot, FileText, X, Send, Pencil, Check, Copy, RefreshCw, User } from 'lucide-react';
 import { isToolUIPart, getToolName } from 'ai';
 import { useState, useRef, useEffect, useMemo } from 'react';
-import { usePluginOverrides } from '@btst/stack/context';
-import { AI_CHAT_LOCALIZATION } from '../localization/index.mjs';
+import { usePluginOverrides, useStack } from '@btst/stack/context';
+import { useAiChatTranslation } from '../localization/index.mjs';
 import { ToolCallDisplay } from './tool-call-display.mjs';
 import 'highlight.js/styles/panda-syntax-light.css';
 import completeMarkdown from 'remend';
@@ -76,16 +76,14 @@ function ChatMessage({
   isRetrying = false
 }) {
   const isUser = message.role === "user";
-  const {
-    Link,
-    Image,
-    localization: customLocalization,
-    toolRenderers
-  } = usePluginOverrides(
+  const { localization: customLocalization, toolRenderers } = usePluginOverrides(
     "ai-chat",
     {}
   );
-  const localization = { ...AI_CHAT_LOCALIZATION, ...customLocalization };
+  const { router } = useStack();
+  const Link = router?.Link;
+  const Image = router?.Image;
+  const tr = useAiChatTranslation(customLocalization);
   const ImageComponent = Image ?? DefaultImage;
   const [copied, setCopied] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
@@ -174,7 +172,11 @@ function ChatMessage({
         isCompact ? "mb-3" : "mb-4",
         isUser ? "justify-end" : "justify-start"
       ),
-      "aria-label": isUser ? localization.A11Y_USER_MESSAGE : localization.A11Y_ASSISTANT_MESSAGE,
+      "aria-label": isUser ? tr("A11Y_USER_MESSAGE", "aiChat.a11y.userMessage", "Your message") : tr(
+        "A11Y_ASSISTANT_MESSAGE",
+        "aiChat.a11y.assistantMessage",
+        "AI response"
+      ),
       children: [
         !isUser && /* @__PURE__ */ jsx(
           "div",
@@ -207,7 +209,11 @@ function ChatMessage({
                       className: "flex items-center gap-2 px-3 py-2 rounded-md bg-primary-foreground/10 hover:bg-primary-foreground/20 transition-colors",
                       children: [
                         /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 shrink-0" }),
-                        /* @__PURE__ */ jsx("span", { className: "text-xs truncate max-w-[150px]", children: part.filename || "File" })
+                        /* @__PURE__ */ jsx("span", { className: "text-xs truncate max-w-[150px]", children: part.filename || tr(
+                          "FILE_FALLBACK_NAME",
+                          "aiChat.files.fallbackName",
+                          "File"
+                        ) })
                       ]
                     },
                     index
@@ -216,7 +222,12 @@ function ChatMessage({
                     ClickableImage,
                     {
                       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",
@@ -249,7 +260,16 @@ 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"
+                          ),
                           children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
                         }
                       ),
@@ -262,7 +282,12 @@ 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"
+                          ),
                           children: /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" })
                         }
                       )
@@ -290,7 +315,11 @@ function ChatMessage({
                       className: "flex items-center gap-2 px-3 py-2 rounded-md bg-muted-foreground/10 hover:bg-muted-foreground/20 transition-colors border",
                       children: [
                         /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-                        /* @__PURE__ */ jsx("span", { className: "text-xs truncate max-w-[150px]", children: part.filename || "File" })
+                        /* @__PURE__ */ jsx("span", { className: "text-xs truncate max-w-[150px]", children: part.filename || tr(
+                          "FILE_FALLBACK_NAME",
+                          "aiChat.files.fallbackName",
+                          "File"
+                        ) })
                       ]
                     },
                     index
@@ -299,7 +328,12 @@ function ChatMessage({
                     ClickableImage,
                     {
                       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",
@@ -360,7 +394,16 @@ 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"
+                    ),
                     children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" })
                   }
                 )
@@ -375,7 +418,24 @@ function ChatMessage({
                       variant: "ghost",
                       onClick: handleCopy,
                       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,
+                      title: copied ? 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"
+                      ),
                       children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
                     }
                   ),
@@ -388,7 +448,16 @@ 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"
+                      ),
                       children: /* @__PURE__ */ jsx(
                         RefreshCw,
                         {