@allbluecn/web-app 0.9.5 → 0.10.0

package/src/components/chat/ai-message/components/message-actions.tsx

@@ -25,7 +25,6 @@ import {
 } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { useHotkey } from "@tanstack/react-hotkeys";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -35,6 +34,7 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { m } from "@/paraglide/messages.js";
 
 export interface MessageActionsProps {
   onCopy: () => void;
@@ -53,8 +53,6 @@ export function MessageActions({
 }: MessageActionsProps) {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
-  const { t } = useTranslation('chat');
-
   useHotkey("Escape", () => setIsOpen(false), {
     enabled: isOpen,
   });
@@ -79,23 +77,23 @@ export function MessageActions({
           <Button
             aria-expanded={isOpen}
             aria-haspopup="menu"
-            aria-label={t('actions.menuLabel')}
+            aria-label={m.chat_actions_menuLabel()}
             className="min-h-[32px] min-w-[32px] text-muted-foreground transition-opacity hover:text-foreground"
             size="icon"
             variant="ghost"
           >
             <MoreVertical aria-hidden="true" className="size-4" />
-            <span className="sr-only">{t('actions.openMenu')}</span>
+            <span className="sr-only">{m.chat_actions_openMenu()}</span>
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
           align="end"
-          aria-label={t('actions.menu')}
+          aria-label={m.chat_actions_menu()}
           className="font-medium"
         >
           <DropdownMenuItem onClick={handleCopyClick}>
             <Copy aria-hidden="true" className="size-4" />
-            <span>{copied ? t('actions.copied') : t('actions.copy')}</span>
+            <span>{copied ? m.chat_actions_copied() : m.chat_actions_copy()}</span>
             <DropdownMenuShortcut>
               {typeof navigator !== "undefined" &&
               navigator.platform.includes("Mac")
@@ -109,7 +107,7 @@ export function MessageActions({
               <DropdownMenuSeparator />
               <DropdownMenuItem onClick={onRegenerate}>
                 <RotateCcw aria-hidden="true" className="size-4" />
-                <span>{t('actions.regenerate')}</span>
+                <span>{m.chat_actions_regenerate()}</span>
               </DropdownMenuItem>
             </>
           )}
@@ -118,7 +116,7 @@ export function MessageActions({
               <DropdownMenuSeparator />
               <DropdownMenuItem onClick={onEdit}>
                 <Edit aria-hidden="true" className="size-4" />
-                <span>{t('common:button.edit')}</span>
+                <span>{m.common_button_edit()}</span>
               </DropdownMenuItem>
             </>
           )}

package/src/components/chat/ai-message/components/streaming-indicator.tsx

@@ -1,3 +1,5 @@
+import { m } from "@/paraglide/messages.js";
+
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -17,20 +19,17 @@
 
 "use client";
 
-import { useTranslation } from "react-i18next";
-
 export interface StreamingIndicatorProps {
   isStreaming: boolean;
 }
 
 export function StreamingIndicator({ isStreaming }: StreamingIndicatorProps) {
-  const { t } = useTranslation('chat');
   if (!isStreaming) return null;
 
   return (
     <span
       aria-hidden="true"
-      aria-label={t('streaming.label')}
+      aria-label={m.chat_streaming_label()}
       className="inline-block h-4 w-0.5 bg-foreground motion-safe:animate-pulse"
     />
   );

package/src/components/chat/ai-message/index.tsx

@@ -18,13 +18,14 @@
 "use client";
 
 import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { MessageActions } from "./components/message-actions";
 import { MarkdownContent } from "./components/markdown-content";
 import { StreamingIndicator } from "./components/streaming-indicator";
 import { useStreamingText } from "./hooks/use-streaming-text";
 import type { AIMessageProps } from "./types";
+import { m } from "@/paraglide/messages.js";
+
 export type { AIMessageProps };
 
 const COPY_FEEDBACK_DURATION = 2000;
@@ -37,7 +38,6 @@ export default function AIMessage({
   className,
   skipCodeHighlighting = false,
 }: AIMessageProps) {
-  const { t } = useTranslation('chat');
   const [copied, setCopied] = useState(false);
   const [copyError, setCopyError] = useState(false);
   const messageRef = useRef<HTMLDivElement>(null);
@@ -94,13 +94,13 @@ export default function AIMessage({
   return (
     <div
       aria-atomic="false"
-      aria-label={t('aria.aiMessage')}
+      aria-label={m.chat_aria_aiMessage()}
       aria-live={isStreaming ? "polite" : "off"}
       className={cn("group relative", className)}
       ref={messageRef}
       role="article"
     >
-      <div aria-label={t('actions.menu')} className="absolute top-0 right-0 z-10">
+      <div aria-label={m.chat_actions_menu()} className="absolute top-0 right-0 z-10">
         <MessageActions
           copied={copied}
           messageId={messageId}
@@ -120,7 +120,7 @@ export default function AIMessage({
 
       {copyError && (
         <div aria-live="assertive" className="sr-only" role="alert">
-          {t('actions.copyFailed')}
+          {m.chat_actions_copyFailed()}
         </div>
       )}
     </div>

package/src/components/chat/ai-message/utils/dom-utils.ts

@@ -20,7 +20,7 @@ import React from "react";
 export function parseInlineStyle(styleText: string): React.CSSProperties {
   const styleObject: React.CSSProperties = {};
   for (const declaration of styleText.split(";")) {
-    const [prop, value] = declaration.split(":").map((s) => s.trim());
+    const [prop, value] = declaration.split('_').map((s) => s.trim());
     if (prop && value) {
       const camelProp = prop.replace(/-([a-z])/g, (_m, c) => c.toUpperCase());
       (styleObject as Record<string, string>)[camelProp] = value;

package/src/components/chat/ai-prompt-input/components/action-buttons.tsx

@@ -43,7 +43,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useTranslation } from "react-i18next";
+import { m } from "@/paraglide/messages.js";
 
 interface LeftActionButtonsProps {
   webSearchEnabled: boolean;
@@ -58,14 +58,13 @@ export function LeftActionButtons({
   onWebSearchToggle,
   onThinkingToggle,
 }: LeftActionButtonsProps) {
-  const { t } = useTranslation('chat');
   return (
     <>
       <div className="hidden items-center justify-center gap-1 sm:flex">
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
-              aria-label={t('actions.attach')}
+              aria-label={m.chat_actions_attach()}
               size="icon"
               type="button"
               variant="ghost"
@@ -73,13 +72,13 @@ export function LeftActionButtons({
               <Paperclip />
             </Button>
           </TooltipTrigger>
-          <TooltipContent side="top">{t('actions.attach')}</TooltipContent>
+          <TooltipContent side="top">{m.chat_actions_attach()}</TooltipContent>
         </Tooltip>
 
         <Tooltip>
           <TooltipTrigger asChild>
             <Toggle
-              aria-label={t('actions.enableThinking')}
+              aria-label={m.chat_actions_enableThinking()}
               className="flex w-9 min-w-9 items-center justify-center p-0"
               onPressedChange={onThinkingToggle}
               pressed={thinkingEnabled}
@@ -89,14 +88,14 @@ export function LeftActionButtons({
             </Toggle>
           </TooltipTrigger>
           <TooltipContent side="top">
-            {thinkingEnabled ? t('actions.disableThinking') : t('actions.enableThinking')}
+            {thinkingEnabled ? m.chat_actions_disableThinking() : m.chat_actions_enableThinking()}
           </TooltipContent>
         </Tooltip>
 
         <Tooltip>
           <TooltipTrigger asChild>
             <Toggle
-              aria-label={t('actions.enableWebSearch')}
+              aria-label={m.chat_actions_enableWebSearch()}
               className="relative flex w-9 min-w-9 items-center justify-center overflow-hidden p-0"
               onPressedChange={onWebSearchToggle}
               pressed={webSearchEnabled}
@@ -117,12 +116,12 @@ export function LeftActionButtons({
                   pointerEvents: webSearchEnabled ? "auto" : "none",
                 }}
               >
-                {t('actions.webSearch')}
+                {m.chat_actions_webSearch()}
               </span>
             </Toggle>
           </TooltipTrigger>
           <TooltipContent side="top">
-            {webSearchEnabled ? t('actions.disableWebSearch') : t('actions.enableWebSearch')}
+            {webSearchEnabled ? m.chat_actions_disableWebSearch() : m.chat_actions_enableWebSearch()}
           </TooltipContent>
         </Tooltip>
       </div>
@@ -130,7 +129,7 @@ export function LeftActionButtons({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
-            aria-label={t('actions.moreOptions')}
+            aria-label={m.chat_actions_moreOptions()}
             className="sm:hidden"
             size="icon"
             type="button"
@@ -142,7 +141,7 @@ export function LeftActionButtons({
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={() => {}}>
             <Paperclip className="size-4" />
-            <span>{t('actions.attach')}</span>
+            <span>{m.chat_actions_attach()}</span>
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => onThinkingToggle(!thinkingEnabled)}>
@@ -151,7 +150,7 @@ export function LeftActionButtons({
             ) : (
               <LightbulbOff className="size-4" />
             )}
-            <span>{t('actions.thinking')}</span>
+            <span>{m.chat_actions_thinking()}</span>
             {thinkingEnabled && <Check className="ml-auto size-4" />}
           </DropdownMenuItem>
           <DropdownMenuItem
@@ -162,7 +161,7 @@ export function LeftActionButtons({
             ) : (
               <GlobeOff className="size-4" />
             )}
-            <span>{t('actions.webSearch')}</span>
+            <span>{m.chat_actions_webSearch()}</span>
             {webSearchEnabled && <Check className="ml-auto size-4" />}
           </DropdownMenuItem>
         </DropdownMenuContent>
@@ -178,13 +177,12 @@ interface RightActionButtonsProps {
 
 export function RightActionButtons({ input, isLoading }: RightActionButtonsProps) {
   const hasInput = input.trim().length > 0;
-  const { t } = useTranslation('chat');
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
-          aria-label={hasInput ? t('actions.sendMessage') : t('actions.voiceInput')}
+          aria-label={hasInput ? m.chat_actions_sendMessage() : m.chat_actions_voiceInput()}
           disabled={isLoading}
           size="icon"
           type={hasInput ? "submit" : "button"}
@@ -199,7 +197,7 @@ export function RightActionButtons({ input, isLoading }: RightActionButtonsProps
         </Button>
       </TooltipTrigger>
       <TooltipContent side="top">
-        {hasInput ? t('actions.sendMessage') : t('actions.voiceInput')}
+        {hasInput ? m.chat_actions_sendMessage() : m.chat_actions_voiceInput()}
       </TooltipContent>
     </Tooltip>
   );

package/src/components/chat/ai-prompt-input/components/agent-mode-select.tsx

@@ -24,8 +24,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { useTranslation } from "react-i18next";
 import { agentModes } from "../constants";
+import { m } from "@/paraglide/messages.js";
+
+const MODE_LABELS: Record<string, () => string> = {
+  auto: m.chat_agentMode_auto,
+  agent: m.chat_agentMode_agent,
+  plan: m.chat_agentMode_plan,
+};
 
 export interface AgentModeSelectProps {
   value: string;
@@ -33,16 +39,15 @@ export interface AgentModeSelectProps {
 }
 
 export function AgentModeSelect({ value, onValueChange }: AgentModeSelectProps) {
-  const { t } = useTranslation('chat');
   return (
     <Select onValueChange={onValueChange} value={value}>
-      <SelectTrigger aria-label={t('agentMode.label')} className="font-medium">
-        <SelectValue placeholder={t('agentMode.placeholder')} />
+      <SelectTrigger aria-label={m.chat_agentMode_label()} className="font-medium">
+        <SelectValue placeholder={m.chat_agentMode_placeholder()} />
       </SelectTrigger>
       <SelectContent className="text-sm">
         {agentModes.map((mode) => (
           <SelectItem key={mode.value} value={mode.value}>
-            {t(`agentMode.${mode.value}`)}
+            {MODE_LABELS[mode.value]?.() ?? mode.value}
           </SelectItem>
         ))}
       </SelectContent>

package/src/components/chat/ai-prompt-input/components/context-badge.tsx

@@ -19,7 +19,7 @@
 
 import { X } from "lucide-react";
 import type React from "react";
-import { useTranslation } from "react-i18next";
+import { m } from "@/paraglide/messages.js";
 
 export interface ContextBadgeProps {
   label: string;
@@ -29,7 +29,6 @@ export interface ContextBadgeProps {
 }
 
 export function ContextBadge({ label, icon, avatar, onRemove }: ContextBadgeProps) {
-  const { t } = useTranslation('chat');
   return (
     <span
       className="inline-flex items-center gap-1 rounded-xl border bg-secondary p-0.5 font-medium text-muted-foreground text-xs"
@@ -51,7 +50,7 @@ export function ContextBadge({ label, icon, avatar, onRemove }: ContextBadgeProp
       )}
       {label}
       <button
-        aria-label={t('context.remove', { label })}
+        aria-label={m.chat_context_remove({ label })}
         className="rounded-full p-0.5 hover:bg-muted-foreground/10 focus:outline-none focus:ring-1 focus:ring-muted-foreground"
         onClick={onRemove}
         tabIndex={0}

package/src/components/chat/ai-prompt-input/components/kb-context-selector.tsx

@@ -19,7 +19,6 @@
 
 import { Plus } from "lucide-react";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
   Popover,
   PopoverContent,
@@ -28,6 +27,7 @@ import {
 import { hideScrollbar, kbIcon } from "../constants";
 import { ContextBadge } from "./context-badge";
 import type { KnowledgeBaseItem } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 interface KbContextPopoverProps {
   open: boolean;
@@ -44,12 +44,11 @@ export function KbContextPopover({
   onKbToggle,
   knowledgeBases,
 }: KbContextPopoverProps) {
-  const { t } = useTranslation('chat');
   return (
     <Popover onOpenChange={onOpenChange} open={open}>
       <PopoverTrigger asChild>
         <button
-          aria-label={t('context.add')}
+          aria-label={m.chat_context_add()}
           className="inline-flex items-center gap-1 rounded-xl border bg-secondary px-2 py-0.5 font-medium text-muted-foreground text-xs transition"
           style={{
             whiteSpace: "nowrap",
@@ -61,7 +60,7 @@ export function KbContextPopover({
           type="button"
         >
           <Plus className="h-3 w-3 text-muted-foreground" />
-          <span>{t('context.add')}</span>
+          <span>{m.chat_context_add()}</span>
         </button>
       </PopoverTrigger>
       <PopoverContent align="start" className="z-30 w-max p-2">
@@ -69,7 +68,7 @@ export function KbContextPopover({
           {knowledgeBases.length > 0 && (
             <div className="flex flex-col gap-1">
               <div className="px-1 font-semibold text-muted-foreground text-xs uppercase tracking-wide">
-                {t('context.knowledgeBase')}
+                {m.chat_context_knowledgeBase()}
               </div>
               <div className="flex flex-col gap-1">
                 {knowledgeBases.map((kb) => {
@@ -115,7 +114,6 @@ export function KbContextSelector({
 }: KbContextSelectorProps) {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const hasSelectedContext = selectedKbs.length > 0;
-  const { t } = useTranslation('chat');
 
   return (
     <div className="flex w-full flex-col gap-2">
@@ -128,7 +126,7 @@ export function KbContextSelector({
           knowledgeBases={knowledgeBases}
         />
         <div
-          aria-label={t('context.selected')}
+          aria-label={m.chat_context_selected()}
           className="scroll-hide hidden flex-1 gap-1 overflow-x-auto sm:flex"
           style={{
             ...hideScrollbar,
@@ -161,7 +159,7 @@ export function KbContextSelector({
       </div>
       {hasSelectedContext && (
         <div
-          aria-label={t('context.selectedMobile')}
+          aria-label={m.chat_context_selectedMobile()}
           className="scroll-hide flex w-[18rem] gap-1 overflow-x-auto sm:hidden sm:w-full"
           style={{
             ...hideScrollbar,

package/src/components/chat/ai-prompt-input/components/model-select.tsx

@@ -27,8 +27,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { useTranslation } from "react-i18next";
 import { listEnabledModelsFn } from "@/server/serverFns/ai/providers";
+import { m } from "@/paraglide/messages.js";
+
+const CAPABILITY_LABELS: Record<string, () => string> = {
+  text: m.chat_model_capabilities_text,
+  reasoning: m.chat_model_capabilities_reasoning,
+  vision: m.chat_model_capabilities_vision,
+  tools: m.chat_model_capabilities_tools,
+  audio: m.chat_model_capabilities_audio,
+};
 
 interface ModelItem {
   providerId: string;
@@ -47,7 +55,6 @@ interface ModelSelectProps {
 export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
   const [models, setModels] = useState<ModelItem[]>([]);
   const [loading, setLoading] = useState(true);
-  const { t } = useTranslation('chat');
 
   useEffect(() => {
     listEnabledModelsFn()
@@ -67,7 +74,7 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
     return (
       <Select disabled value="">
         <SelectTrigger className="font-medium" size="default">
-          <SelectValue placeholder={t('model.loading')} />
+          <SelectValue placeholder={m.chat_model_loading()} />
         </SelectTrigger>
       </Select>
     );
@@ -77,7 +84,7 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
     return (
       <Select disabled value="">
         <SelectTrigger className="font-medium" size="default">
-          <SelectValue placeholder={t('model.none')} />
+          <SelectValue placeholder={m.chat_model_none()} />
         </SelectTrigger>
       </Select>
     );
@@ -86,7 +93,7 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
   return (
     <Select onValueChange={onValueChange} value={value}>
       <SelectTrigger className="font-medium" size="default">
-        <SelectValue placeholder={t('model.select')} />
+        <SelectValue placeholder={m.chat_model_select()} />
       </SelectTrigger>
       <SelectContent className="text-sm">
         {Object.entries(grouped).map(([providerId, providerModels]) => (
@@ -94,7 +101,7 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
             <SelectLabel className="text-xs text-muted-foreground">
               {providerModels[0].providerDisplayName}
               {providerModels[0].isLocal && (
-                <span className="ml-1 text-muted-foreground/60">{t('model.local')}</span>
+                <span className="ml-1 text-muted-foreground/60">{m.chat_model_local()}</span>
               )}
             </SelectLabel>
             {providerModels.map((m) => (
@@ -108,7 +115,7 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
                           key={cap}
                           className="inline-flex items-center rounded bg-muted px-1 py-px text-[10px] text-muted-foreground"
                         >
-                          {t(`model.capabilities.${cap}`, { defaultValue: cap })}
+                          {CAPABILITY_LABELS[cap]?.() ?? cap}
                         </span>
                       ))}
                     </span>

package/src/components/chat/ai-prompt-input/components/page-user-context-selector.tsx

@@ -19,7 +19,6 @@
 
 import { Plus } from "lucide-react";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
   Popover,
   PopoverContent,
@@ -27,6 +26,7 @@ import {
 } from "@/components/ui/popover";
 import { hideScrollbar, mockUsers } from "../constants";
 import { ContextBadge } from "./context-badge";
+import { m } from "@/paraglide/messages.js";
 
 interface PageUserContextPopoverProps {
   open: boolean;
@@ -41,12 +41,11 @@ export function PageUserContextPopover({
   selectedUsers,
   onUserToggle,
 }: PageUserContextPopoverProps) {
-  const { t } = useTranslation('chat');
   return (
     <Popover onOpenChange={onOpenChange} open={open}>
       <PopoverTrigger asChild>
         <button
-          aria-label={t('context.add')}
+          aria-label={m.chat_context_add()}
           className="inline-flex items-center gap-1 rounded-xl border bg-secondary px-2 py-0.5 font-medium text-muted-foreground text-xs transition"
           style={{
             whiteSpace: "nowrap",
@@ -58,14 +57,14 @@ export function PageUserContextPopover({
           type="button"
         >
           <Plus className="h-3 w-3 text-muted-foreground" />
-          <span>{t('context.add')}</span>
+          <span>{m.chat_context_add()}</span>
         </button>
       </PopoverTrigger>
       <PopoverContent align="start" className="z-30 w-max p-2">
         <div className="flex flex-col gap-3">
           <div className="flex flex-col gap-1">
             <div className="px-1 font-semibold text-muted-foreground text-xs uppercase tracking-wide">
-              {t('context.users')}
+              {m.chat_context_users()}
             </div>
             <div className="flex flex-col gap-1">
               {mockUsers.map((user) => {
@@ -117,7 +116,6 @@ export function PageUserContextSelector({
 }: PageUserContextSelectorProps) {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const hasSelectedContext = selectedUsers.length > 0;
-  const { t } = useTranslation('chat');
 
   return (
     <div className="flex w-full flex-col gap-2">
@@ -129,7 +127,7 @@ export function PageUserContextSelector({
           selectedUsers={selectedUsers}
         />
         <div
-          aria-label={t('context.selected')}
+          aria-label={m.chat_context_selected()}
           className="scroll-hide hidden flex-1 gap-1 overflow-x-auto sm:flex"
           style={{
             ...hideScrollbar,
@@ -162,7 +160,7 @@ export function PageUserContextSelector({
       </div>
       {hasSelectedContext && (
         <div
-          aria-label={t('context.selectedMobile')}
+          aria-label={m.chat_context_selectedMobile()}
           className="scroll-hide flex w-[18rem] gap-1 overflow-x-auto sm:hidden sm:w-full"
           style={{
             ...hideScrollbar,