@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/chat/ai-chat-history/components/conversation-item.tsx

@@ -25,7 +25,6 @@ import {
   Trash2,
 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { formatChatDate } from "@/lib/datetime";
 import {
@@ -47,6 +46,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import type { Conversation } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 export interface ConversationItemProps {
   conversation: Conversation;
@@ -86,8 +86,6 @@ export function ConversationItem({
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-  const { t } = useTranslation('chat');
-
   useEffect(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
@@ -123,7 +121,7 @@ export function ConversationItem({
       >
         <div className="flex items-start gap-3">
           <button
-            aria-label={t('history.selectConversation', { title: conversation.title })}
+            aria-label={m.chat_history_selectConversation({ title: conversation.title ?? "" })}
             className="flex min-h-[44px] min-w-0 flex-1 flex-col gap-1 rounded-sm text-left [-webkit-tap-highlight-color:transparent] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:min-h-[24px]"
             disabled={isLoading}
             onClick={onSelect}
@@ -137,7 +135,7 @@ export function ConversationItem({
           >
             {isEditing ? (
               <input
-                aria-label={t('history.editTitle')}
+                aria-label={m.chat_history_editTitle()}
                 className="min-h-[44px] w-full rounded-md border bg-background px-2 py-1.5 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 sm:min-h-[24px] sm:text-sm"
                 onBlur={onRenameSubmit}
                 onChange={(e) => onEditValueChange(e.target.value)}
@@ -157,7 +155,7 @@ export function ConversationItem({
               <>
                 <div className="flex flex-wrap items-center gap-2">
                   <h4 className="wrap-break-word min-w-0 font-medium text-sm">
-                    {conversation.title}
+                    {conversation.title ?? ""}
                   </h4>
                 </div>
                 {conversation.lastMessage && (
@@ -177,7 +175,7 @@ export function ConversationItem({
                         •
                       </span>
                       <span className="whitespace-nowrap tabular-nums">
-                        {t('history.messageCount', { count: conversation.messageCount })}
+                        {m.chat_history_messageCount({ count: conversation.messageCount })}
                       </span>
                     </>
                   )}
@@ -190,7 +188,7 @@ export function ConversationItem({
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    aria-label={t('history.moreActions', { title: conversation.title })}
+                    aria-label={m.chat_history_moreActions({ title: conversation.title ?? "" })}
                     className="min-h-[44px] min-w-[44px] shrink-0 text-muted-foreground transition-opacity [-webkit-tap-highlight-color:transparent] hover:text-foreground group-hover:opacity-100 sm:min-h-[24px] sm:min-w-[24px]"
                     disabled={isLoading}
                     size="icon"
@@ -207,7 +205,7 @@ export function ConversationItem({
                       onClick={onRenameStart}
                     >
                       <Pencil className="size-4" />
-                      {t('history.rename')}
+                      {m.chat_history_rename()}
                     </DropdownMenuItem>
                   )}
                   <DropdownMenuSeparator />
@@ -218,7 +216,7 @@ export function ConversationItem({
                           onClick={() => onUnarchive(conversation.id)}
                         >
                           <Archive className="size-4" />
-                          {t('history.unarchive')}
+                          {m.chat_history_unarchive()}
                         </DropdownMenuItem>
                       )
                     : onArchive && (
@@ -227,7 +225,7 @@ export function ConversationItem({
                           onClick={() => onArchive(conversation.id)}
                         >
                           <Archive className="size-4" />
-                          {t('history.archive')}
+                          {m.chat_history_archive()}
                         </DropdownMenuItem>
                       )}
                   {onDelete && (
@@ -239,7 +237,7 @@ export function ConversationItem({
                         variant="destructive"
                       >
                         <Trash2 className="size-4" />
-                        {t('common:button.delete')}
+                        {m.common_button_delete()}
                       </DropdownMenuItem>
                     </>
                   )}
@@ -253,13 +251,13 @@ export function ConversationItem({
       <AlertDialog onOpenChange={setShowDeleteDialog} open={showDeleteDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('history.deleteTitle')}</AlertDialogTitle>
+            <AlertDialogTitle>{m.chat_history_deleteTitle()}</AlertDialogTitle>
             <AlertDialogDescription>
-              {t('history.deleteDescription', { title: conversation.title })}
+              {m.chat_history_deleteDescription({ title: conversation.title ?? "" })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>{t('common:button.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel disabled={isDeleting}>{m.common_button_cancel()}</AlertDialogCancel>
             <AlertDialogAction
               className="bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40"
               disabled={isDeleting}
@@ -268,10 +266,10 @@ export function ConversationItem({
               {isDeleting ? (
                 <>
                   <Loader2 className="size-4 animate-spin" />
-                  {t('common:status.deleting')}
+                  {m.common_status_deleting()}
                 </>
               ) : (
-                t('common:button.delete')
+                m.common_button_delete()
               )}
             </AlertDialogAction>
           </AlertDialogFooter>

package/src/components/chat/ai-chat-history/components/conversation-search.tsx

@@ -19,12 +19,12 @@
 
 import { Search } from "lucide-react";
 import { useRef } from "react";
-import { useTranslation } from "react-i18next";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupInput,
 } from "@/components/ui/input-group";
+import { m } from "@/paraglide/messages.js";
 
 export interface ConversationSearchProps {
   value: string;
@@ -38,8 +38,7 @@ export function ConversationSearch({
   placeholder,
 }: ConversationSearchProps) {
   const inputRef = useRef<HTMLInputElement>(null);
-  const { t } = useTranslation('chat');
-  const effectivePlaceholder = placeholder ?? t('history.searchPlaceholder');
+  const effectivePlaceholder = placeholder ?? m.chat_history_searchPlaceholder();
 
   return (
     <InputGroup>
@@ -47,7 +46,7 @@ export function ConversationSearch({
         <Search className="size-4" />
       </InputGroupAddon>
       <InputGroupInput
-        aria-label={t('history.searchAriaLabel')}
+        aria-label={m.chat_history_searchAriaLabel()}
         onChange={(e) => onChange(e.target.value)}
         onKeyDown={(e) => {
           if (e.key === "Escape") {

package/src/components/chat/ai-chat-history/components/empty-state.tsx

@@ -18,8 +18,8 @@
 "use client";
 
 import { BotMessageSquare, Plus } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
+import { m } from "@/paraglide/messages.js";
 
 export interface EmptyStateProps {
   searchQuery: string;
@@ -32,7 +32,6 @@ export function EmptyState({
   showNewButton,
   onNewConversation,
 }: EmptyStateProps) {
-  const { t } = useTranslation('chat');
   return (
     <div className="flex flex-col items-center justify-center gap-4 py-12 text-center">
       <div className="flex size-12 items-center justify-center rounded-full bg-muted">
@@ -40,12 +39,12 @@ export function EmptyState({
       </div>
       <div className="flex flex-col gap-2">
         <p className="font-medium text-sm">
-          {searchQuery ? t('empty.notFound') : t('empty.noConversations')}
+          {searchQuery ? m.chat_empty_notFound() : m.chat_empty_noConversations()}
         </p>
         <p className="text-muted-foreground text-sm">
           {searchQuery
-            ? t('empty.tryOtherSearch')
-            : t('empty.createNew')}
+            ? m.chat_empty_tryOtherSearch()
+            : m.chat_empty_createNew()}
         </p>
       </div>
       {!searchQuery && showNewButton && onNewConversation && (
@@ -56,7 +55,7 @@ export function EmptyState({
           variant="outline"
         >
           <Plus className="size-4" />
-          {t('newConversation')}
+          {m.chat_newConversation()}
         </Button>
       )}
     </div>

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

@@ -19,7 +19,6 @@
 
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "@tanstack/react-hotkeys";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
@@ -30,6 +29,8 @@ import { ConversationHeader } from "./components/conversation-header";
 import { ConversationSearch } from "./components/conversation-search";
 import { EmptyState } from "./components/empty-state";
 import type { Conversation, AIChatHistoryProps } from "./types";
+import { m } from "@/paraglide/messages.js";
+
 export type { Conversation, AIChatHistoryProps };
 
 export default function AIChatHistory({
@@ -53,17 +54,12 @@ export default function AIChatHistory({
   );
   const containerRef = useRef<HTMLDivElement>(null);
   const timezone = useTimezone();
-  const { t } = useTranslation('chat');
-
-  const groupLabelKeys: Record<string, string> = useMemo(
-    () => ({
-      今天: 'groups.today',
-      昨天: 'groups.yesterday',
-      本周: 'groups.thisWeek',
-      更早: 'groups.earlier',
-    }),
-    []
-  );
+  const groupLabelKeys: Record<string, () => string> = {
+      今天: m.chat_groups_today,
+      昨天: m.chat_groups_yesterday,
+      本周: m.chat_groups_thisWeek,
+      更早: m.chat_groups_earlier,
+    }
 
   const filteredConversations = useMemo(() => {
     if (!searchQuery.trim()) return conversations;
@@ -83,8 +79,8 @@ export default function AIChatHistory({
 
   const handleRenameStart = useCallback((conversation: Conversation) => {
     setEditingId(conversation.id);
-    setEditValue(conversation.title ?? t('newConversation'));
-  }, [t]);
+    setEditValue(conversation.title ?? m.chat_newConversation());
+  }, []);
 
   const handleRenameSubmit = useCallback(
     async (conversationId: string) => {
@@ -184,7 +180,7 @@ export default function AIChatHistory({
                   editingId={editingId}
                   editValue={editValue}
                   isLoading={loadingStates}
-                  label={groupLabelKeys[group.label] ? t(groupLabelKeys[group.label]) : group.label}
+                  label={groupLabelKeys[group.label]?.() ?? group.label}
                   onArchive={onArchive}
                   onDelete={onDelete}
                   onEditValueChange={setEditValue}

package/src/components/chat/ai-chat-history/utils/group-conversations.ts

@@ -15,7 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { getClientI18n } from "@/i18n/client";
+import { m } from '@/paraglide/messages.js';
 import { formatChatDate } from "@/lib/datetime";
 import type { Conversation } from "../types";
 
@@ -24,8 +24,15 @@ const TODAY = "today";
 const YESTERDAY = "yesterday";
 const THIS_WEEK = "thisWeek";
 
+const LABELS: Record<string, () => string> = {
+  [TODAY]: m.chat_groups_today,
+  [YESTERDAY]: m.chat_groups_yesterday,
+  [THIS_WEEK]: m.chat_groups_thisWeek,
+  [EARLIER]: m.chat_groups_earlier,
+}
+
 function g(key: string): string {
-  return getClientI18n().t(`chat:groups.${key}`);
+  return LABELS[key]?.() ?? key
 }
 
 export function groupConversationsByDate(conversations: Conversation[], timezone: string): {

package/src/components/chat/ai-citations/components/citation-item.tsx

@@ -19,7 +19,6 @@
 
 import { ChevronDown } from "lucide-react";
 import { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import {
   Collapsible,
@@ -29,6 +28,7 @@ import {
 import { CitationNumber, SourcePreview } from "./source-components";
 import { sourceName } from "../utils";
 import type { Citation, CitationSource } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 interface CitationItemHeaderProps {
   citation: Citation;
@@ -43,8 +43,6 @@ export function CitationItemHeader({
 }: CitationItemHeaderProps) {
   const hasMultipleSources = citation.sources.length > 1;
   const sourceCount = citation.sources.length;
-  const { t } = useTranslation('chat');
-
   if (hasMultipleSources) {
     return (
       <CollapsibleTrigger
@@ -66,7 +64,7 @@ export function CitationItemHeader({
           />
           <div className="flex flex-col gap-0.5">
             <span className="font-semibold text-sm">
-              {t('citations.sourceCount', { sourceName: sourceName(citation.sources[0]), count: sourceCount - 1 })}
+              {m.chat_citations_sourceCount({ sourceName: sourceName(citation.sources[0]), count: sourceCount - 1 })}
             </span>
             {citation.text && (
               <span className="text-muted-foreground text-xs leading-tight">
@@ -99,7 +97,7 @@ export function CitationItemHeader({
       />
       <div className="flex flex-col gap-0.5">
         <span className="font-semibold text-sm">
-          {t('citations.source', { sourceName: sourceName(citation.sources[0]) })}
+          {m.chat_citations_source({ sourceName: sourceName(citation.sources[0]) })}
         </span>
         {citation.text && (
           <span className="text-muted-foreground text-xs leading-tight">

package/src/components/chat/ai-citations/components/citations-list.tsx

@@ -23,7 +23,6 @@ import {
   Quote,
 } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
   Empty,
   EmptyDescription,
@@ -33,6 +32,7 @@ import {
 } from "@/components/ui/empty";
 import { CitationItem } from "./citation-item";
 import type { Citation, CitationSource } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 interface CitationsHeaderProps {
   count: number;
@@ -40,7 +40,6 @@ interface CitationsHeaderProps {
 }
 
 export function CitationsHeader({ count, isExpanded }: CitationsHeaderProps) {
-  const { t } = useTranslation('chat');
   return (
     <header className="flex items-center gap-2">
       <div
@@ -49,7 +48,7 @@ export function CitationsHeader({ count, isExpanded }: CitationsHeaderProps) {
       >
         <Quote className="size-3.5 text-primary" />
       </div>
-      <h2 className="font-semibold text-sm">{t('citations.title')}</h2>
+      <h2 className="font-semibold text-sm">{m.chat_citations_title()}</h2>
       <span className="text-muted-foreground text-xs tabular-nums">
         ({count})
       </span>
@@ -134,16 +133,15 @@ export interface CitationsEmptyStateProps {
 }
 
 export function CitationsEmptyState({ className }: CitationsEmptyStateProps) {
-  const { t } = useTranslation('chat');
   return (
     <Empty className={className}>
       <EmptyHeader>
         <EmptyMedia variant="icon">
           <Quote aria-hidden="true" className="size-6" />
         </EmptyMedia>
-        <EmptyTitle>{t('citations.empty')}</EmptyTitle>
+        <EmptyTitle>{m.chat_citations_empty()}</EmptyTitle>
         <EmptyDescription>
-          {t('citations.emptyDesc')}
+          {m.chat_citations_emptyDesc()}
         </EmptyDescription>
       </EmptyHeader>
     </Empty>

package/src/components/chat/ai-citations/components/inline-citation.tsx

@@ -16,9 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 "use client";
-
-import { useTranslation } from "react-i18next";
 import { CitationNumber } from "./source-components";
+import { m } from "@/paraglide/messages.js";
 
 export interface InlineCitationProps {
   number: number;
@@ -26,10 +25,9 @@ export interface InlineCitationProps {
 }
 
 export function InlineCitation({ number, onClick }: InlineCitationProps) {
-  const { t } = useTranslation('chat');
   return (
     <CitationNumber
-      aria-label={t('citations.viewCitation', { number })}
+      aria-label={m.chat_citations_viewCitation({ number })}
       className="relative -top-0.5 mx-0.5"
       number={number}
       onClick={onClick}

package/src/components/chat/ai-citations/components/source-components.tsx

@@ -23,7 +23,6 @@ import {
   Quote,
 } from "lucide-react";
 import { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { formatDate } from "@/lib/datetime";
 import {
@@ -33,6 +32,7 @@ import {
 } from "@/components/ui/collapsible";
 import { SOURCE_ICONS, formatDomain, sourceName } from "../utils";
 import type { CitationSource } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 export interface CitationNumberProps {
   number: number;
@@ -49,7 +49,6 @@ export function CitationNumber({
   asButton = true,
   "aria-label": ariaLabel,
 }: CitationNumberProps) {
-  const { t } = useTranslation('chat');
   const baseClassName = cn(
     "inline-flex items-center justify-center rounded-full border bg-primary/10 font-mono font-semibold text-primary text-xs transition-colors",
     "size-6 min-h-6 min-w-6 md:size-[24px] md:min-h-[24px] md:min-w-[24px]",
@@ -60,7 +59,7 @@ export function CitationNumber({
     className
   );
 
-  const label = ariaLabel || t('citations.citation', { number });
+  const label = ariaLabel || m.chat_citations_citation({ number });
 
   if (asButton && onClick) {
     return (
@@ -98,12 +97,11 @@ interface SourceMetadataProps {
 }
 
 export function SourceMetadata({ source, timezone }: SourceMetadataProps) {
-  const { t } = useTranslation('chat');
   const domain = source.domain || formatDomain(source.url);
 
   return (
     <div
-      aria-label={t('citations.sourceMetadata')}
+      aria-label={m.chat_citations_sourceMetadata()}
       className="flex flex-wrap items-center gap-1 text-muted-foreground text-xs"
       role="group"
     >
@@ -138,9 +136,8 @@ interface SourceSnippetProps {
 }
 
 export function SourceSnippet({ snippet }: SourceSnippetProps) {
-  const { t } = useTranslation('chat');
   return (
-    <div aria-label={t('citations.sourceExcerpt')} className="flex gap-2 pl-10" role="group">
+    <div aria-label={m.chat_citations_sourceExcerpt()} className="flex gap-2 pl-10" role="group">
       <Quote
         aria-hidden="true"
         className="size-3 shrink-0 translate-y-0.5 text-muted-foreground"
@@ -166,7 +163,6 @@ export function SourcePreview({
   onSourceClick,
 }: SourcePreviewProps) {
   const [isSnippetOpen, setIsSnippetOpen] = useState(false);
-  const { t } = useTranslation('chat');
   const handleClick = useCallback(() => {
     onSourceClick?.(source);
   }, [onSourceClick, source]);
@@ -207,7 +203,7 @@ export function SourcePreview({
           <div className="flex shrink-0 items-center gap-1.5">
             {source.snippet && (
               <CollapsibleTrigger
-                aria-label={isSnippetOpen ? t('citations.hideSnippet') : t('citations.showSnippet')}
+                aria-label={isSnippetOpen ? m.chat_citations_hideSnippet() : m.chat_citations_showSnippet()}
                 className={cn(
                   "flex shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
                   "min-h-[44px] min-w-[44px] sm:min-h-[24px] sm:min-w-[24px]",
@@ -228,7 +224,7 @@ export function SourcePreview({
               </CollapsibleTrigger>
             )}
             <a
-              aria-label={t('citations.openInNewTab', { title: source.title })}
+              aria-label={m.chat_citations_openInNewTab({ title: source.title })}
               className={cn(
                 "flex shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
                 "min-h-[44px] min-w-[44px] sm:min-h-[24px] sm:min-w-[24px]",

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

@@ -18,7 +18,6 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import {
   Collapsible,
@@ -30,6 +29,8 @@ import { CitationNumber } from "./components/source-components";
 import { CitationsEmptyState, CitationsHeader, CitationsList } from "./components/citations-list";
 import { InlineCitation } from "./components/inline-citation";
 import type { Citation, CitationSource, AICitationsProps } from "./types";
+import { m } from "@/paraglide/messages.js";
+
 export type { Citation, CitationSource, AICitationsProps };
 
 export default function AICitations({
@@ -52,15 +53,13 @@ export default function AICitations({
 
   const [isOpen, setIsOpen] = useState(defaultExpanded);
   const timezone = useTimezone();
-  const { t } = useTranslation('chat');
-
   if (!citations || validCitations.length === 0) {
     return <CitationsEmptyState className={className} />;
   }
 
   return (
     <Collapsible
-      aria-label={t('citations.title')}
+      aria-label={m.chat_citations_title()}
       className={cn("w-full rounded-lg border p-4", className)}
       open={isOpen}
       onOpenChange={setIsOpen}

package/src/components/chat/ai-citations/utils.ts

@@ -17,7 +17,7 @@
 
 import { FileText, Globe } from "lucide-react";
 import type React from "react";
-import { getClientI18n } from "@/i18n/client";
+import { m } from '@/paraglide/messages.js';
 import type { CitationSource } from "./types";
 
 export const SOURCE_ICONS: Record<
@@ -50,10 +50,22 @@ export const DOMAIN_NAMES: Record<string, string> = {
   'medium.com': 'Medium',
 };
 
+const DOMAIN_LABELS: Record<string, () => string> = {
+  '163.com': m['chat_citations_domains_163.com'],
+  'baidu.com': m['chat_citations_domains_baidu.com'],
+  'bilibili.com': m['chat_citations_domains_bilibili.com'],
+  'bing.com': m['chat_citations_domains_bing.com'],
+  'douyin.com': m['chat_citations_domains_douyin.com'],
+  'jianshu.com': m['chat_citations_domains_jianshu.com'],
+  'qq.com': m['chat_citations_domains_qq.com'],
+  'sina.com.cn': m['chat_citations_domains_sina.com.cn'],
+  'sohu.com': m['chat_citations_domains_sohu.com'],
+  'weibo.com': m['chat_citations_domains_weibo.com'],
+};
+
 export function sourceName(source: CitationSource): string {
   const domain = source.domain || formatDomain(source.url);
-  const i18n = getClientI18n();
-  const translated = i18n.t(`citations.domains.${domain}`, { defaultValue: '' });
+  const translated = DOMAIN_LABELS[domain]?.();
   if (translated) return translated;
   return DOMAIN_NAMES[domain] || domain;
 }

package/src/components/chat/ai-conversation.tsx

@@ -21,7 +21,6 @@ import { AlertCircle, BotMessageSquare, Languages, Sparkles } from "lucide-react
 import { useEffect, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { AnimatePresence, m } from "motion/react";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import AIMessage from "@/components/chat/ai-message";
@@ -31,6 +30,7 @@ import { useTranslator } from "@/hooks/useTranslator";
 import { VIRTUALIZE_THRESHOLD } from "@/lib/perf";
 
 import type { Citation } from "@/components/chat/ai-citations";
+import { m as msg } from "@/paraglide/messages.js";
 
 export interface Message {
   id: string;
@@ -98,20 +98,19 @@ function useAutoScroll(
 }
 
 function EmptyState({ title, description, onNewMessage }: { title?: string; description?: string; onNewMessage?: () => void }) {
-  const { t } = useTranslation('chat');
   return (
     <div aria-live="polite" className="flex flex-1 flex-col items-center justify-center gap-4 p-8" role="status">
       <div className="flex size-16 items-center justify-center rounded-full bg-muted">
         <BotMessageSquare aria-hidden="true" className="size-8 text-muted-foreground" />
       </div>
       <div className="flex flex-col items-center gap-2 text-center">
-        <h2 className="font-semibold text-foreground text-lg">{title || t('emptyState.title')}</h2>
-        <p className="max-w-md text-muted-foreground text-sm">{description || t('emptyState.description')}</p>
+        <h2 className="font-semibold text-foreground text-lg">{title || msg.chat_emptyState_title()}</h2>
+        <p className="max-w-md text-muted-foreground text-sm">{description || msg.chat_emptyState_description()}</p>
       </div>
       {onNewMessage && (
-        <Button aria-label={t('newConversation')} className="min-h-[44px] min-w-[44px]" onClick={onNewMessage} size="lg">
+        <Button aria-label={msg.chat_newConversation()} className="min-h-[44px] min-w-[44px]" onClick={onNewMessage} size="lg">
           <Sparkles aria-hidden="true" className="size-4" />
-          {t('emptyState.newMessage')}
+          {msg.chat_emptyState_newMessage()}
         </Button>
       )}
     </div>
@@ -138,7 +137,6 @@ export default function AIConversation({
   isStreamingRef.current = isStreaming;
   const [errorToTranslate, setErrorToTranslate] = useState('');
   const { translatedText, isTranslating } = useTranslator(errorToTranslate);
-  const { t } = useTranslation('chat');
 
   useAutoScroll(initialMessages, containerRef, isAtBottomRef, isStreamingRef);
 
@@ -239,7 +237,7 @@ export default function AIConversation({
   const renderTail = () => {
     if (!virtualize || historyCount === 0) return null;
     return (
-            <div aria-label={t('aria.messageLog')} aria-live="polite" className="mx-auto flex w-full max-w-4xl flex-col gap-6 p-4 xl:max-w-3xl 2xl:max-w-2xl" role="log">
+            <div aria-label={msg.chat_aria_messageLog()} aria-live="polite" className="mx-auto flex w-full max-w-4xl flex-col gap-6 p-4 xl:max-w-3xl 2xl:max-w-2xl" role="log">
         {initialMessages.slice(historyCount).map((message, i) => renderMessage(message, historyCount + i, true))}
       </div>
     );
@@ -260,13 +258,13 @@ export default function AIConversation({
   }, [])
 
   return (
-      <div aria-label={t('aria.aiConversation')} className={cn("flex flex-col overflow-hidden rounded-xl border bg-background shadow-xs", className)} role="region">
+      <div aria-label={msg.chat_aria_aiConversation()} className={cn("flex flex-col overflow-hidden rounded-xl border bg-background shadow-xs", className)} role="region">
       <div className="flex-1 overflow-y-auto overscroll-contain" ref={containerRef} style={{ maxHeight }}>
         <div ref={innerRef}>
           {initialMessages.length === 0 ? (
             <EmptyState description={emptyStateDescription} onNewMessage={onNewMessage} title={emptyStateTitle} />
           ) : (
-      <div aria-label={t('aria.messageLog')} aria-live="polite" className="mx-auto flex w-full max-w-4xl flex-col gap-6 p-4 xl:max-w-3xl 2xl:max-w-2xl" role="log">
+      <div aria-label={msg.chat_aria_messageLog()} aria-live="polite" className="mx-auto flex w-full max-w-4xl flex-col gap-6 p-4 xl:max-w-3xl 2xl:max-w-2xl" role="log">
             {virtualize ? (
               <>
                 {renderHistory()}
@@ -305,7 +303,7 @@ export default function AIConversation({
                       <p className="text-destructive">{error}</p>
                     </div>
                     {isTranslating ? (
-                      <p className="animate-pulse text-muted-foreground text-xs">{t('error.translating')}</p>
+                      <p className="animate-pulse text-muted-foreground text-xs">{msg.chat_error_translating()}</p>
                     ) : translatedText ? (
                       <div className="rounded-lg border bg-muted/50 p-3 text-sm">
                         <p className="text-foreground">{translatedText}</p>
@@ -319,7 +317,7 @@ export default function AIConversation({
                       onClick={() => setErrorToTranslate(error)}
                     >
                       <Languages className="size-3" />
-                      {t('error.translate')}
+                      {msg.chat_error_translate()}
                     </Button>
                   </div>
                 </div>