@agent-native/core 0.75.5 → 0.76.1

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

@@ -0,0 +1,173 @@
+const messages = {
+  common: {
+    cancel: "取消",
+    create: "创建",
+    save: "保存",
+    saving: "正在保存…",
+    saveChanges: "保存更改",
+    connected: "已连接",
+    notConnected: "未连接",
+    disconnect: "断开连接",
+    disconnecting: "正在断开连接...",
+  },
+  root: {
+    commandActions: "操作",
+    commandSearch: "搜索",
+    commandAppearance: "外观",
+    toggleTheme: "切换主题",
+    extensionSignedInTitle: "已登录",
+    extensionSignedInDescription: "再次打开 Clips 扩展即可开始录制。",
+    gotIt: "知道了",
+  },
+  navigation: {
+    brand: "Clips",
+    library: "资料库",
+    spaces: "空间",
+    meetings: "会议",
+    dictate: "听写",
+    archive: "归档",
+    trash: "废纸篓",
+    settings: "设置",
+    notifications: "通知",
+    insights: "洞察",
+    space: "空间",
+    folder: "文件夹",
+    extensions: "扩展",
+    newRecording: "新建录制",
+    folders: "文件夹",
+    newFolder: "新建文件夹",
+    noSpaces: "暂无空间",
+    desktopCta: "获取桌面应用",
+    desktopTitle: "获取 Clips 桌面应用。",
+    desktopBody: "从菜单栏录制，使用全局快捷键，并自动更新。",
+    expandSidebar: "展开侧边栏",
+    collapseSidebar: "收起侧边栏",
+    agentEmptyState: "我可以怎样帮助你处理录制？",
+    agentSuggestionSummary: "总结我最近的录制",
+    agentSuggestionPricing: "查找我提到价格的位置",
+    agentSuggestionFiller: "从这个剪辑中移除口头禅",
+    createFolderError: "创建失败",
+    folderCreated: "文件夹已创建",
+    folderNamePlaceholder: "文件夹名称",
+  },
+  empty: {
+    library: {
+      title: "你的资料库还是空的",
+      body: "录制第一个屏幕视频后，它会出现在这里，随时可以分享。",
+      cta: "录制第一个 Clip",
+    },
+    folder: {
+      title: "这个文件夹是空的",
+      body: "拖入录制，或点击录制在此文件夹中开始新内容。",
+      cta: "在这里录制",
+    },
+    space: {
+      title: "这个空间还没有录制",
+      body: "将录制分享到空间，或录制新内容，团队会在这里看到。",
+      cta: "为这个空间录制",
+    },
+    archive: {
+      title: "没有归档内容",
+      body: "归档的录制会从资料库隐藏但仍安全保留。你可以随时恢复它们。",
+    },
+    trash: {
+      title: "废纸篓是空的",
+      body: "删除的录制会在这里保留 30 天，然后永久移除。",
+    },
+    search: {
+      title: "没有匹配结果",
+      body: "尝试其他搜索词，或检查你的筛选条件。",
+    },
+  },
+  settings: {
+    openAgentSettings: "打开代理设置",
+    agentDescription:
+      "打开代理侧边栏设置，管理模型、API 密钥、自动化、语音和其他代理控制项。",
+    agentTitle: "代理设置",
+    title: "设置",
+    intro: "此 Clips 工作区的偏好设置和已连接服务。",
+    languageTitle: "语言",
+    languageDescription:
+      "选择此账号的界面语言。Clips 会在不同设备上记住你的选择。",
+    languageLabel: "界面语言",
+    profile: "个人资料",
+    email: "邮箱",
+    displayName: "显示名称",
+    displayNamePlaceholder: "你的姓名",
+    playback: "播放",
+    defaultPlaybackSpeed: "默认播放速度",
+    playbackDescription: "打开录制时会自动应用。",
+    transcript: "转录",
+    transcriptCleanup: "后台清理",
+    transcriptCleanupDescription: "先立即显示原生转录，后台可用时再进行清理。",
+    notifications: "通知",
+    emailNotifications: "邮件通知",
+    emailNotificationsDescription:
+      "当有人评论、回应或与你分享录制时，收到邮件通知。",
+    saved: "设置已保存",
+    saveFailed: "保存失败",
+    builderConnectedToast: "Builder.io 已连接",
+    videoStorage: "视频存储",
+    videoStorageDescription:
+      "Builder.io 是 Clips 上传的主要存储路径。需要自带存储桶时，也可以使用 S3。",
+    checkingBuilder: "正在检查 Builder.io",
+    builderConnected: "Builder.io 已连接",
+    connectBuilder: "连接 Builder.io",
+    builderConnectedFor: "正在为 {{orgName}} 使用 Builder.io。",
+    builderConnectedGeneric: "新的剪辑会使用已连接的 Builder.io 提供方。",
+    builderIncludes: "包含对象存储、上传，以及新剪辑的托管转录。",
+    s3Title: "S3 兼容存储",
+    secondary: "备用",
+    active: "当前启用",
+    s3BuilderConnectedDescription:
+      "仅当此工作区应上传到你自己的存储桶而不是 Builder.io 时使用。",
+    s3CurrentProvider: "当前正在使用 {{providerName}}。",
+    s3OwnBucketDescription:
+      "如果不想使用 Builder.io 存储，可以使用自己的存储桶。",
+    configureS3: "配置 S3",
+    hideS3: "隐藏 S3",
+    saveStorage: "保存存储设置",
+    storageSaved: "存储设置已保存",
+    storageRequired: "Endpoint、bucket、access key 和 secret 为必填项。",
+    apiSetup: "AI 设置",
+    apiSetupDescription:
+      "Builder.io 是托管 AI 额度的默认路径。也可以在这里添加可选的提供方密钥。",
+    builderEasySetup: "Builder.io 是最简单的设置方式",
+    builderAiAvailable: "Clips 可使用包含的 AI 额度和托管转录。",
+    builderAiDescription:
+      "先连接 Builder，即可使用包含的 AI 额度、对象存储、上传和托管转录。",
+    providerKeyTitle: "使用自己的提供方密钥",
+    providerKeyDescription:
+      "添加 Anthropic、OpenAI、Gemini、Groq 或 OpenRouter 密钥，用于按提供方计费的使用。",
+    providerKeysSet: "已设置 {{count}} 个",
+    checkingProviderKeys: "正在检查提供方密钥…",
+    keySet: "已设置",
+    replaceKey: "替换密钥…",
+    pasteProviderKey: "请先粘贴提供方密钥。",
+    apiKeySaved: "API 密钥已保存",
+    apiKeyFailed: "保存密钥失败",
+    slackTitle: "Agent-Native Clips for Slack",
+    slackDescription:
+      "分享公开剪辑，将链接粘贴到 Slack 后即可内联播放，观看者无需额外步骤。每个工作区连接一次即可。",
+    checkingSlack: "正在检查 Slack",
+    slackConnected_other: "已连接 {{count}} 个工作区",
+    slackOauthNeeded: "需要 OAuth 凭据",
+    slackPreviewDescription: "公开 Clips 链接可以显示为可播放的 Slack 预览。",
+    connectSlack: "连接 Slack",
+    slackClientMissing:
+      "连接工作区前，请为此部署设置 SLACK_CLIENT_ID 和 SLACK_CLIENT_SECRET。",
+    slackSigningMissing:
+      "请设置 SLACK_SIGNING_SECRET，以便验证 Slack 事件回调。",
+    connectedBy: "由 {{email}} 连接",
+    disconnectSlackLabel: "断开 {{team}}",
+    slackConnectedToast: "Slack 已连接",
+    slackCheckedToast: "Slack 连接已检查",
+    slackDisconnectedToast: "Slack 已断开连接",
+    disconnectSlackTitle: "断开 Slack？",
+    disconnectSlackDescription:
+      "Clips 将删除 {{team}} 的已存储机器人令牌，并停止发送可播放的 Slack 预览。",
+    thisWorkspace: "此工作区",
+  },
+};
+
+export default messages;

package/corpus/templates/clips/app/root.tsx

@@ -4,7 +4,9 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  useLoaderData,
   useLocation,
+  useRouteLoaderData,
 } from "react-router";
 import { useCallback, useEffect, useState } from "react";
 import { useNavigationState } from "@/hooks/use-navigation-state";
@@ -16,9 +18,15 @@ import {
   DevOverlay,
   appPath,
   createAgentNativeQueryClient,
+  getLocaleInitScript,
   getThemeInitScript,
+  type LocaleCode,
+  type LocaleMessages,
+  type LocalizationPreference,
   useCommandMenuShortcut,
+  useT,
 } from "@agent-native/core/client";
+import { resolveLocaleFromRequest } from "@agent-native/core/server";
 import { IconCheck, IconSun, IconMoon } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
 import changelog from "../CHANGELOG.md?raw";
@@ -32,9 +40,10 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import type { LinksFunction } from "react-router";
+import type { LinksFunction, LoaderFunctionArgs } from "react-router";
 import stylesheet from "./global.css?url";
 import { configureTracking } from "@agent-native/core/client";
+import { i18nCatalog, loadI18nMessages } from "./i18n";
 
 configureTracking({
   getDefaultProps: (_name, properties) => ({
@@ -47,11 +56,77 @@ export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
 
-const THEME_INIT_SCRIPT = getThemeInitScript();
+interface RootLoaderData {
+  locale: LocaleCode;
+  preference: LocalizationPreference;
+  dir: "ltr" | "rtl";
+  messages: LocaleMessages;
+}
+
+export async function loader({
+  request,
+}: LoaderFunctionArgs): Promise<RootLoaderData> {
+  const resolved = resolveLocaleFromRequest({ request });
+  const messages =
+    (await loadI18nMessages(resolved.locale)) ?? i18nCatalog.messages;
+  return {
+    locale: resolved.locale,
+    preference: resolved.preference,
+    dir: resolved.dir,
+    messages,
+  };
+}
+
+const THEME_INIT_SCRIPT_SELECTOR = "script[data-agent-native-theme-init]";
+const LOCALE_INIT_SCRIPT_SELECTOR = "script[data-agent-native-locale-init]";
+
+function getHydrationStableThemeInitScript() {
+  if (typeof document !== "undefined") {
+    const existing = document.querySelector<HTMLScriptElement>(
+      THEME_INIT_SCRIPT_SELECTOR,
+    );
+    if (existing?.innerHTML) return existing.innerHTML;
+  }
+  return getThemeInitScript();
+}
+
+function getHydrationStableLocaleInitScript(
+  options: Parameters<typeof getLocaleInitScript>[0],
+) {
+  if (typeof document !== "undefined") {
+    const existing = document.querySelector<HTMLScriptElement>(
+      LOCALE_INIT_SCRIPT_SELECTOR,
+    );
+    if (existing?.innerHTML) return existing.innerHTML;
+  }
+  return getLocaleInitScript(options);
+}
+
+const THEME_INIT_SCRIPT = getHydrationStableThemeInitScript();
+
+const DEFAULT_LOADER_DATA: RootLoaderData = {
+  locale: "en-US",
+  preference: { locale: "system" },
+  dir: "ltr",
+  messages: i18nCatalog.messages,
+};
 
 export function Layout({ children }: { children: React.ReactNode }) {
+  const loaderData =
+    useRouteLoaderData<typeof loader>("root") ?? DEFAULT_LOADER_DATA;
+  const localeInitScript = getHydrationStableLocaleInitScript({
+    locale: loaderData.locale,
+    preference: loaderData.preference,
+    messages: loaderData.messages,
+  });
+
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang={loaderData.locale}
+      dir={loaderData.dir}
+      data-locale={loaderData.locale}
+      suppressHydrationWarning
+    >
       <head>
         <meta charSet="utf-8" />
         <meta
@@ -59,9 +134,15 @@ export function Layout({ children }: { children: React.ReactNode }) {
           content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
         />
         <script
+          data-agent-native-theme-init
           suppressHydrationWarning
           dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
         />
+        <script
+          data-agent-native-locale-init
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: localeInitScript }}
+        />
         <link rel="manifest" href={appPath("/manifest.json")} />
         <meta name="theme-color" content="#18181B" />
         <meta name="mobile-web-app-capable" content="yes" />
@@ -106,6 +187,7 @@ function DbSyncSetup() {
 
 function ThemeToggleItem() {
   const { resolvedTheme, setTheme } = useTheme();
+  const t = useT();
   const isDark = resolvedTheme === "dark";
   return (
     <CommandMenu.Item
@@ -113,7 +195,7 @@ function ThemeToggleItem() {
       keywords={["theme", "dark", "light", "mode"]}
     >
       {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
-      Toggle theme
+      {t("root.toggleTheme")}
     </CommandMenu.Item>
   );
 }
@@ -150,6 +232,7 @@ const CLIPS_COMMAND_DOCS = [
 
 function ClipsExtensionAuthBridge() {
   const location = useLocation();
+  const t = useT();
   const [showAuthSuccess, setShowAuthSuccess] = useState(false);
 
   useEffect(() => {
@@ -213,14 +296,14 @@ function ClipsExtensionAuthBridge() {
           <IconCheck className="h-9 w-9" strokeWidth={2.5} />
         </div>
         <DialogHeader className="items-center text-center sm:text-center">
-          <DialogTitle>Signed in</DialogTitle>
+          <DialogTitle>{t("root.extensionSignedInTitle")}</DialogTitle>
           <DialogDescription className="max-w-xs">
-            Open the Clips extension again to start recording.
+            {t("root.extensionSignedInDescription")}
           </DialogDescription>
         </DialogHeader>
         <DialogFooter className="sm:justify-center">
           <Button type="button" onClick={() => setShowAuthSuccess(false)}>
-            Got it
+            {t("root.gotIt")}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -246,6 +329,7 @@ function isStandalonePublicPath(pathname: string): boolean {
 
 function AppContent() {
   const location = useLocation();
+  const t = useT();
   const standalonePublic = isStandalonePublicPath(location.pathname);
   const [cmdkOpen, setCmdkOpen] = useState(false);
   useCommandMenuShortcut(
@@ -265,11 +349,13 @@ function AppContent() {
           changelog={changelog}
           changelogKey="clips"
         >
-          <CommandMenu.Group heading="Actions">
-            <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
+          <CommandMenu.Group heading={t("root.commandActions")}>
+            <CommandMenu.Item onSelect={() => {}}>
+              {t("root.commandSearch")}
+            </CommandMenu.Item>
           </CommandMenu.Group>
           <CommandMenu.DocsGroup docs={CLIPS_COMMAND_DOCS} />
-          <CommandMenu.Group heading="Appearance">
+          <CommandMenu.Group heading={t("root.commandAppearance")}>
             <ThemeToggleItem />
           </CommandMenu.Group>
         </CommandMenu>
@@ -289,11 +375,19 @@ function AppContent() {
  */
 export default function Root() {
   const location = useLocation();
+  const loaderData = useLoaderData<typeof loader>();
   const [queryClient] = useState(() => createAgentNativeQueryClient());
   return (
     <AppProviders
       queryClient={queryClient}
       isPublicPath={isStandalonePublicPath(location.pathname)}
+      i18n={{
+        catalog: i18nCatalog,
+        initialLocale: loaderData.locale,
+        initialPreference: loaderData.preference,
+        initialMessages: loaderData.messages,
+        persistPreference: !isStandalonePublicPath(location.pathname),
+      }}
     >
       <AppContent />
     </AppProviders>