@agent-native/core 0.75.5 → 0.76.1

package/corpus/templates/assets/app/components/layout/Header.tsx

@@ -1,13 +1,18 @@
 import { useLocation } from "react-router";
-import { AgentToggleButton, useActionQuery } from "@agent-native/core/client";
+import {
+  AgentToggleButton,
+  LanguagePicker,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
 
-const pageTitles: Record<string, string> = {
-  "/": "Create",
-  "/library": "Library",
-  "/brand-kits": "Brand Kits",
-  "/extensions": "Extensions",
-  "/settings": "Settings",
+const pageTitleKeys: Record<string, string> = {
+  "/": "navigation.create",
+  "/library": "navigation.library",
+  "/brand-kits": "navigation.brandKits",
+  "/extensions": "navigation.extensions",
+  "/settings": "navigation.settings",
 };
 
 function LibraryTitle({ id }: { id: string }) {
@@ -19,7 +24,10 @@ function LibraryTitle({ id }: { id: string }) {
 }
 
 function StaticTitle({ pathname }: { pathname: string }) {
-  const title = pageTitles[pathname] ?? "Assets";
+  const t = useT();
+  const title = pageTitleKeys[pathname]
+    ? t(pageTitleKeys[pathname])
+    : t("navigation.brand");
   return (
     <h1 className="text-lg font-semibold tracking-tight truncate">{title}</h1>
   );
@@ -47,6 +55,7 @@ export function Header() {
       </div>
       <div className="flex items-center gap-2 shrink-0">
         {actions}
+        <LanguagePicker variant="icon" />
         {showAgentToggle ? <AgentToggleButton /> : null}
       </div>
     </header>

package/corpus/templates/assets/app/components/layout/Layout.tsx

@@ -12,6 +12,7 @@ import {
   navigateWithAgentChatViewTransition,
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
+  useT,
 } from "@agent-native/core/client";
 import { InvitationBanner } from "@agent-native/core/client/org";
 import { useNavigationState } from "@/hooks/use-navigation-state";
@@ -35,6 +36,7 @@ export function Layout({ children }: LayoutProps) {
   useNavigationState();
   const location = useLocation();
   const navigate = useNavigate();
+  const t = useT();
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const isCreateRoute =
     location.pathname === "/" || location.pathname.startsWith("/chat/");
@@ -95,11 +97,13 @@ export function Layout({ children }: LayoutProps) {
           <button
             onClick={() => setMobileSidebarOpen(true)}
             className="-ml-1 mr-3 cursor-pointer rounded-md p-2.5 hover:bg-sidebar-accent/50"
-            aria-label="Open navigation"
+            aria-label={t("navigation.openNavigation")}
           >
             <IconMenu2 className="h-5 w-5 text-foreground" />
           </button>
-          <span className="text-base font-bold tracking-tight">Assets</span>
+          <span className="text-base font-bold tracking-tight">
+            {t("navigation.brand")}
+          </span>
         </div>
         {!hideHeader && <Header />}
         <InvitationBanner />
@@ -126,11 +130,11 @@ export function Layout({ children }: LayoutProps) {
         browserTabId={getBrowserTabId()}
         openOnChatRunning={chatHomeHandoffActive}
         onFullscreenRequest={openCreateChatFullscreen}
-        emptyStateText="Describe the asset you want to make"
+        emptyStateText={t("chat.emptyState")}
         suggestions={[
-          "Generate 3 blog heroes from this brand kit",
-          "Make an 8-second product reveal video",
-          "Match the style of my reference assets",
+          t("chat.suggestionBlogHeroes"),
+          t("chat.suggestionProductVideo"),
+          t("chat.suggestionReferenceStyle"),
         ]}
       >
         {appFrame}

package/corpus/templates/assets/app/components/layout/Sidebar.tsx

@@ -24,6 +24,7 @@ import {
   navigateWithAgentChatViewTransition,
   useActionQuery,
   useChatThreads,
+  useT,
   type ChatThreadSummary,
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
@@ -43,15 +44,15 @@ import {
 } from "@/components/ui/tooltip";
 
 const baseNavItems = [
-  { icon: IconPhotoPlus, label: "Create", href: "/" },
-  { icon: IconLayoutGrid, label: "Library", href: "/library" },
-  { icon: IconPalette, label: "Brand Kits", href: "/brand-kits" },
-  { icon: IconSettings, label: "Settings", href: "/settings" },
+  { icon: IconPhotoPlus, labelKey: "navigation.create", href: "/" },
+  { icon: IconLayoutGrid, labelKey: "navigation.library", href: "/library" },
+  { icon: IconPalette, labelKey: "navigation.brandKits", href: "/brand-kits" },
+  { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
 
 const auditNavItem = {
   icon: IconClipboardList,
-  label: "Audit log",
+  labelKey: "navigation.auditLog",
   href: "/audit",
 };
 
@@ -118,6 +119,7 @@ function chatThreadPath(threadId: string) {
 function AssetsChatsSection() {
   const navigate = useNavigate();
   const location = useLocation();
+  const t = useT();
   const {
     threads,
     activeThreadId,
@@ -198,7 +200,7 @@ function AssetsChatsSection() {
       threadId === activeThreadId || threadId === persistedActiveThreadId();
     const archived = await archiveThread(threadId);
     if (!archived) {
-      toast.error("Could not archive chat.");
+      toast.error(t("chat.archiveFailed"));
       return;
     }
     if (wasActive) {
@@ -209,7 +211,7 @@ function AssetsChatsSection() {
   async function handleCopyShareLink(threadId: string) {
     const link = await createThreadShareLink(threadId);
     if (!link?.url) {
-      toast.error("Could not create a share link.");
+      toast.error(t("chat.shareLinkFailed"));
       return;
     }
 
@@ -218,9 +220,9 @@ function AssetsChatsSection() {
         throw new Error("Clipboard unavailable");
       }
       await navigator.clipboard.writeText(link.url);
-      toast.success("Chat share link copied.");
+      toast.success(t("chat.shareLinkCopied"));
     } catch {
-      toast.success("Chat share link ready.", {
+      toast.success(t("chat.shareLinkReady"), {
         description: link.url,
       });
     }
@@ -248,7 +250,7 @@ function AssetsChatsSection() {
     setRenameDraft("");
     if (title) {
       const renamed = await renameThread(threadId, title);
-      if (!renamed) toast.error("Could not rename chat.");
+      if (!renamed) toast.error(t("chat.renameFailed"));
     }
     committingRenameRef.current = false;
   }
@@ -262,7 +264,7 @@ function AssetsChatsSection() {
     <div className="mt-2 border-l border-border/70 pl-3">
       <div className="mb-1 flex h-7 items-center gap-2 pr-1">
         <div className="min-w-0 flex-1 text-xs font-medium text-muted-foreground">
-          Chats
+          {t("chat.chats")}
         </div>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -270,12 +272,12 @@ function AssetsChatsSection() {
               type="button"
               onClick={handleNewChat}
               className="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-              aria-label="New Assets chat"
+              aria-label={t("chat.newAssetsChat")}
             >
               <IconPlus className="size-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent side="right">New chat</TooltipContent>
+          <TooltipContent side="right">{t("chat.newChat")}</TooltipContent>
         </Tooltip>
       </div>
       <div className="grid gap-0.5">
@@ -335,7 +337,9 @@ function AssetsChatsSection() {
                       <DropdownMenuTrigger asChild>
                         <button
                           type="button"
-                          aria-label={`Chat options for ${threadTitle(thread)}`}
+                          aria-label={t("chat.optionsFor", {
+                            title: threadTitle(thread),
+                          })}
                           className="absolute right-1 flex size-6 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
                         >
                           <IconDots className="size-4" />
@@ -350,7 +354,7 @@ function AssetsChatsSection() {
                           onSelect={() => startRenameThread(thread)}
                         >
                           <IconEdit className="mr-2 size-4" />
-                          Rename chat
+                          {t("chat.renameChat")}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           onSelect={() =>
@@ -358,20 +362,22 @@ function AssetsChatsSection() {
                           }
                         >
                           <IconPin className="mr-2 size-4" />
-                          {thread.pinnedAt ? "Unpin chat" : "Pin chat"}
+                          {thread.pinnedAt
+                            ? t("chat.unpinChat")
+                            : t("chat.pinChat")}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           onSelect={() => void handleCopyShareLink(thread.id)}
                         >
                           <IconShare3 className="mr-2 size-4" />
-                          Copy share link
+                          {t("chat.copyShareLink")}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           className="text-destructive focus:text-destructive"
                           onSelect={() => void handleArchiveThread(thread.id)}
                         >
                           <IconArchive className="mr-2 size-4" />
-                          Archive chat
+                          {t("chat.archiveChat")}
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -389,6 +395,7 @@ function AssetsChatsSection() {
 export function Sidebar() {
   const location = useLocation();
   const navigate = useNavigate();
+  const t = useT();
   const isCreateRoute =
     location.pathname === "/" || location.pathname.startsWith("/chat/");
   const { data: auditAdmin } = useActionQuery("is-audit-admin", {}, {
@@ -442,7 +449,9 @@ export function Sidebar() {
               aria-hidden="true"
               className="hidden h-4 w-auto dark:block"
             />
-            <span className="text-sm font-semibold tracking-tight">Assets</span>
+            <span className="text-sm font-semibold tracking-tight">
+              {t("navigation.brand")}
+            </span>
           </div>
         )}
         <Tooltip delayDuration={0}>
@@ -450,7 +459,11 @@ export function Sidebar() {
             <button
               onClick={() => setCollapsed((c) => !c)}
               className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
-              aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+              aria-label={
+                collapsed
+                  ? t("navigation.expandSidebar")
+                  : t("navigation.collapseSidebar")
+              }
             >
               {collapsed ? (
                 <IconLayoutSidebarLeftExpand className="h-4 w-4" />
@@ -460,7 +473,9 @@ export function Sidebar() {
             </button>
           </TooltipTrigger>
           <TooltipContent side="right">
-            {collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            {collapsed
+              ? t("navigation.expandSidebar")
+              : t("navigation.collapseSidebar")}
           </TooltipContent>
         </Tooltip>
       </div>
@@ -510,14 +525,16 @@ export function Sidebar() {
                 )}
               >
                 <Icon className="h-4 w-4 shrink-0" />
-                {!collapsed && item.label}
+                {!collapsed && t(item.labelKey)}
               </Link>
             );
             if (collapsed) {
               return (
                 <Tooltip key={item.href} delayDuration={0}>
                   <TooltipTrigger asChild>{link}</TooltipTrigger>
-                  <TooltipContent side="right">{item.label}</TooltipContent>
+                  <TooltipContent side="right">
+                    {t(item.labelKey)}
+                  </TooltipContent>
                 </Tooltip>
               );
             }

package/corpus/templates/assets/app/i18n/ar-SA.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["ar-SA"];

package/corpus/templates/assets/app/i18n/de-DE.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["de-DE"];

package/corpus/templates/assets/app/i18n/en-US.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["en-US"];

package/corpus/templates/assets/app/i18n/es-ES.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["es-ES"];

package/corpus/templates/assets/app/i18n/fr-FR.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["fr-FR"];

package/corpus/templates/assets/app/i18n/hi-IN.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["hi-IN"];

package/corpus/templates/assets/app/i18n/index.ts

@@ -0,0 +1,31 @@
+import enUS from "./en-US";
+import type { AgentNativeI18nCatalog } from "@agent-native/core/client";
+
+export const i18nCatalog = {
+  sourceLocale: "en-US",
+  messages: enUS,
+  loadMessages: async (locale) => {
+    switch (locale) {
+      case "zh-CN":
+        return (await import("./zh-CN")).default;
+      case "es-ES":
+        return (await import("./es-ES")).default;
+      case "fr-FR":
+        return (await import("./fr-FR")).default;
+      case "de-DE":
+        return (await import("./de-DE")).default;
+      case "ja-JP":
+        return (await import("./ja-JP")).default;
+      case "ko-KR":
+        return (await import("./ko-KR")).default;
+      case "pt-BR":
+        return (await import("./pt-BR")).default;
+      case "hi-IN":
+        return (await import("./hi-IN")).default;
+      case "ar-SA":
+        return (await import("./ar-SA")).default;
+      default:
+        return null;
+    }
+  },
+} satisfies AgentNativeI18nCatalog;

package/corpus/templates/assets/app/i18n/ja-JP.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["ja-JP"];

package/corpus/templates/assets/app/i18n/ko-KR.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["ko-KR"];

package/corpus/templates/assets/app/i18n/pt-BR.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["pt-BR"];

package/corpus/templates/assets/app/i18n/zh-CN.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["zh-CN"];