@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/billing/pricing-card.tsx

@@ -1,5 +1,5 @@
 import { Check } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import { m } from "@/paraglide/messages.js";
 
 interface PricingCardProps {
   plan: {
@@ -19,7 +19,6 @@ interface PricingCardProps {
 }
 
 export function PricingCard({ plan, onSubscribe }: PricingCardProps) {
-  const { t } = useTranslation('billing')
   const currencySymbol = plan.currency === 'usd' ? '$' : '¥'
   const isFree = plan.priceMonthly === 0
 
@@ -30,26 +29,26 @@ export function PricingCard({ plan, onSubscribe }: PricingCardProps) {
 
       <div className="mt-4 mb-6">
         {isFree ? (
-          <span className="text-2xl font-bold">{t('free')}</span>
+          <span className="text-2xl font-bold">{m.billing_free()}</span>
         ) : (
           <div className="flex items-baseline gap-1">
             <span className="text-2xl font-bold">
               {currencySymbol}{plan.priceMonthly}
             </span>
-            <span className="text-sm text-muted-foreground">{t('perMonth')}</span>
+            <span className="text-sm text-muted-foreground">{m.billing_perMonth()}</span>
           </div>
         )}
       </div>
 
       {plan.maxSeats != null && (
         <p className="text-sm text-muted-foreground mb-2">
-          {t('maxSeats', { count: plan.maxSeats })}
+          {m.billing_maxSeats({ count: plan.maxSeats })}
         </p>
       )}
 
       {plan.aiQuotaMonthly != null && (
         <p className="text-sm text-muted-foreground mb-4">
-          {t('aiQuota', { quota: plan.aiQuotaMonthly })}
+          {m.billing_aiQuota({ quota: plan.aiQuotaMonthly })}
         </p>
       )}
 
@@ -74,7 +73,7 @@ export function PricingCard({ plan, onSubscribe }: PricingCardProps) {
             : 'bg-primary text-primary-foreground hover:bg-primary/90'
         }`}
       >
-        {isFree ? t('currentPlan') : t('startTrial')}
+        {isFree ? m.billing_currentPlan() : m.billing_startTrial()}
       </button>
     </div>
   )

package/src/components/billing/pricing-page.tsx

@@ -3,11 +3,10 @@ import { useLoaderData } from '@tanstack/react-router'
 import { CurrencyToggle } from './currency-toggle'
 import { PricingCard } from './pricing-card'
 import { redirectToCheckout } from './checkout-redirect'
-import { useTranslation } from 'react-i18next'
 import { isChina } from '@/lib/deploy-region'
+import { m } from "@/paraglide/messages.js";
 
 export function PricingPage() {
-  const { t } = useTranslation('billing')
   const { plans, currency } = useLoaderData({ from: '/_public/pricing' })
   const [selectedCurrency, setSelectedCurrency] = useState<'usd' | 'cny'>(currency)
   const isCn = isChina()
@@ -16,7 +15,7 @@ export function PricingPage() {
     return (
       <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
         <p className="text-lg text-muted-foreground">
-          {isCn ? t('comingSoon') : t('saasOnly')}
+          {isCn ? m.billing_comingSoon() : m.billing_saasOnly()}
         </p>
       </div>
     )
@@ -25,9 +24,9 @@ export function PricingPage() {
   return (
     <div className="max-w-6xl mx-auto px-4 py-12">
       <div className="text-center mb-12">
-        <h1 className="text-3xl font-bold">{t('choosePlanTitle')}</h1>
+        <h1 className="text-3xl font-bold">{m.billing_choosePlanTitle()}</h1>
         <p className="text-muted-foreground mt-2">
-          {t('trialDescription')}
+          {m.billing_trialDescription()}
         </p>
         <div className="mt-4 flex justify-center">
           <CurrencyToggle />

package/src/components/billing/seats-manager.tsx

@@ -17,7 +17,6 @@
 
 import { useState } from 'react'
 import { Link } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { Minus, Plus } from 'lucide-react'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
@@ -25,6 +24,7 @@ import { useResource } from './use-resource'
 import { useSubscription } from './subscription-provider'
 import { updateSeatsFn } from '@/server/serverFns/billing'
 import { isChina } from '@/lib/deploy-region'
+import { m } from "@/paraglide/messages.js";
 
 const MAX_ADDON = 100
 
@@ -44,7 +44,6 @@ interface SeatsManagerProps {
 }
 
 export function SeatsManager({ subscription, onRefresh }: SeatsManagerProps) {
-  const { t } = useTranslation('billing')
   const { planName } = useSubscription()
   const seats = useResource('seats')
   const isCn = isChina()
@@ -57,13 +56,13 @@ export function SeatsManager({ subscription, onRefresh }: SeatsManagerProps) {
   if (!activeSub || planName === 'free') {
     return (
       <div className="rounded-xl border border-border bg-background p-6">
-        <h3 className="text-lg font-semibold">{t('seatsManager.title')}</h3>
+        <h3 className="text-lg font-semibold">{m.billing_seatsManager_title()}</h3>
         <p className="mt-2 text-sm text-muted-foreground">
-          {t('seatsUpgradeCta')}
+          {m.billing_seatsUpgradeCta()}
         </p>
         {!isCn && (
           <Button asChild className="mt-3">
-            <Link to="/settings/billing">{t('seatsGoBilling')}</Link>
+            <Link to="/settings/billing">{m.billing_seatsGoBilling()}</Link>
           </Button>
         )}
       </div>
@@ -73,9 +72,9 @@ export function SeatsManager({ subscription, onRefresh }: SeatsManagerProps) {
   if (seats.unlimited) {
     return (
       <div className="rounded-xl border border-border bg-background p-6">
-        <h3 className="text-lg font-semibold">{t('seatsManager.title')}</h3>
+        <h3 className="text-lg font-semibold">{m.billing_seatsManager_title()}</h3>
         <p className="mt-2 text-sm text-muted-foreground">
-          {t('seatsUnlimited')}
+          {m.billing_seatsUnlimited()}
         </p>
       </div>
     )
@@ -96,7 +95,7 @@ export function SeatsManager({ subscription, onRefresh }: SeatsManagerProps) {
         window.location.href = result.checkoutUrl
         return
       }
-      toast.success(t('seatsManager.success'))
+      toast.success(m.billing_seatsManager_success())
       onRefresh()
     } catch (e) {
       toast.error(e instanceof Error ? e.message : String(e))
@@ -107,18 +106,18 @@ export function SeatsManager({ subscription, onRefresh }: SeatsManagerProps) {
 
   return (
     <div className="rounded-xl border border-border bg-background p-6">
-      <h3 className="text-lg font-semibold">{t('seatsManager.title')}</h3>
+      <h3 className="text-lg font-semibold">{m.billing_seatsManager_title()}</h3>
       <p className="mt-1 text-sm text-muted-foreground">
-        {t('seatsUsage', { usage: seats.usage, limit })}
+        {m.billing_seatsUsage({ usage: seats.usage, limit })}
         {' · '}
-        {t('seatsBase', { base })}
+        {m.billing_seatsBase({ base })}
         {' + '}
-        {t('seatsAddonCount', { count: newAddon })}
+        {m.billing_seatsAddonCount({ count: newAddon })}
       </p>
 
       {isCn ? (
         <p className="mt-4 text-sm text-muted-foreground rounded-lg border border-border px-3 py-2">
-          {t('seatsPaymentUnavailable')}
+          {m.billing_seatsPaymentUnavailable()}
         </p>
       ) : (
         <>
@@ -126,7 +125,7 @@ export function SeatsManager({ subscription, onRefresh }: SeatsManagerProps) {
             <Button
               variant="outline"
               size="icon"
-              aria-label={t('seatsRemove')}
+              aria-label={m.billing_seatsRemove()}
               disabled={!canDec || submitting}
               onClick={() => setNewAddon((v) => v - 1)}
             >
@@ -138,28 +137,28 @@ export function SeatsManager({ subscription, onRefresh }: SeatsManagerProps) {
             <Button
               variant="outline"
               size="icon"
-              aria-label={t('seatsAdd')}
+              aria-label={m.billing_seatsAdd()}
               disabled={!canInc || submitting}
               onClick={() => setNewAddon((v) => v + 1)}
             >
               <Plus className="size-4" />
             </Button>
             <span className="text-sm text-muted-foreground">
-              {t('seatsUnitPrice')}
+              {m.billing_seatsUnitPrice()}
             </span>
           </div>
 
           {!canDec && seats.usage >= newLimit && (
             <p className="mt-2 text-xs text-muted-foreground">
-              {t('seatsFloorHint', { usage: seats.usage })}
+              {m.billing_seatsFloorHint({ usage: seats.usage })}
             </p>
           )}
           <p className="mt-2 text-xs text-muted-foreground">
-            {t('seatsProrationHint')}
+            {m.billing_seatsProrationHint()}
           </p>
           {activeSub.addonSeats === 0 && newAddon > 0 && (
             <p className="mt-1 text-xs text-muted-foreground">
-              {t('seatsCheckoutRedirect')}
+              {m.billing_seatsCheckoutRedirect()}
             </p>
           )}
 
@@ -168,7 +167,7 @@ export function SeatsManager({ subscription, onRefresh }: SeatsManagerProps) {
             disabled={!dirty || submitting}
             onClick={submit}
           >
-            {t('seatsConfirm')}
+            {m.billing_seatsConfirm()}
           </Button>
         </>
       )}

package/src/components/billing/subscription-card.tsx

@@ -1,7 +1,7 @@
 import { format } from 'date-fns'
 import { redirectToCheckout, redirectToPortal } from './checkout-redirect'
-import { useTranslation } from 'react-i18next'
 import { isChina } from '@/lib/deploy-region'
+import { m } from "@/paraglide/messages.js";
 
 interface SubscriptionCardProps {
   subscription: {
@@ -20,7 +20,6 @@ interface SubscriptionCardProps {
 export function SubscriptionCard({
   subscription,
 }: SubscriptionCardProps) {
-  const { t } = useTranslation('billing')
   const isCn = isChina()
 
   if (!subscription) {
@@ -28,9 +27,9 @@ export function SubscriptionCard({
       <div className="rounded-xl border border-border bg-background p-6">
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="text-lg font-semibold">{t('freePlan')}</h3>
+            <h3 className="text-lg font-semibold">{m.billing_freePlan()}</h3>
             <p className="text-sm text-muted-foreground">
-              {t('freeDescription')}
+              {m.billing_freeDescription()}
             </p>
           </div>
           {!isCn && (
@@ -38,12 +37,12 @@ export function SubscriptionCard({
               onClick={() => redirectToCheckout('pro', 'usd')}
               className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
             >
-              {t('upgradeToPro')}
+              {m.billing_upgradeToPro()}
             </button>
           )}
           {isCn && (
             <span className="px-4 py-2 text-sm text-muted-foreground bg-muted rounded-lg">
-              {t('comingSoon')}
+              {m.billing_comingSoon()}
             </span>
           )}
         </div>
@@ -65,18 +64,18 @@ export function SubscriptionCard({
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-lg font-semibold">
-            {t('planName', { name: capitalizedPlanName })}
+            {m.billing_planName({ name: capitalizedPlanName })}
           </h3>
           <p className="text-sm text-muted-foreground">
-            {t('statusLabel', { status: subscription.status })}
+            {m.billing_statusLabel({ status: subscription.status })}
             {subscription.trialEndsAt
-              ? ` | ${t('trialUntil', { date: format(subscription.trialEndsAt, 'yyyy-MM-dd') })}`
+              ? ` | ${m.billing_trialUntil({ date: format(subscription.trialEndsAt, 'yyyy-MM-dd') })}`
               : ''}
-            {' | '}{t('expiresAt', { date: periodEnd })}
-            {' | '}{t('currencyLabel', { currency: currencySymbol })}
+            {' | '}{m.billing_expiresAt({ date: periodEnd })}
+            {' | '}{m.billing_currencyLabel({ currency: currencySymbol })}
           </p>
           <p className="text-sm text-muted-foreground">
-            {t('seatsUsedLabel', { seats: subscription.seats })}
+            {m.billing_seatsUsedLabel({ seats: subscription.seats })}
           </p>
         </div>
         <div className="flex gap-2">
@@ -85,12 +84,12 @@ export function SubscriptionCard({
               onClick={redirectToPortal}
               className="px-4 py-2 border border-border rounded-lg hover:bg-muted transition-colors"
             >
-              {t('manageBilling')}
+              {m.billing_manageBilling()}
             </button>
           )}
           {isCn && (
             <span className="px-4 py-2 text-sm text-muted-foreground bg-muted rounded-lg border border-border">
-              {t('comingSoon')}
+              {m.billing_comingSoon()}
             </span>
           )}
         </div>

package/src/components/billing/upgrade-prompt.tsx

@@ -1,24 +1,22 @@
 import { Link } from '@tanstack/react-router'
 import { ArrowRight } from 'lucide-react'
 import { type ReactElement } from 'react'
-import { useTranslation } from 'react-i18next'
 import { isChina } from '@/lib/deploy-region'
+import { m } from "@/paraglide/messages.js";
 
 interface UpgradePromptProps {
   feature: string
 }
 
 export function UpgradePrompt({ feature }: UpgradePromptProps): ReactElement {
-  const { t } = useTranslation('billing')
-
   const featureLabels: Record<string, string> = {
-    multiProvider: t('featureMultiProvider'),
-    hostedAi: t('featureHostedAi'),
-    byokAi: t('featureByokAi'),
-    aiQuota: t('featureAiQuota'),
-    sso: t('featureSso'),
-    auditLog: t('featureAuditLog'),
-    largePageSize: t('featureLargePageSize'),
+    multiProvider: m.billing_featureMultiProvider(),
+    hostedAi: m.billing_featureHostedAi(),
+    byokAi: m.billing_featureByokAi(),
+    aiQuota: m.billing_featureAiQuota(),
+    sso: m.billing_featureSso(),
+    auditLog: m.billing_featureAuditLog(),
+    largePageSize: m.billing_featureLargePageSize(),
   }
 
   const label = featureLabels[feature] ?? feature
@@ -27,7 +25,7 @@ export function UpgradePrompt({ feature }: UpgradePromptProps): ReactElement {
     return (
       <div className="flex flex-col items-center gap-2 p-4 rounded-lg border border-dashed border-primary/20 bg-muted/50 text-center">
         <p className="text-sm text-muted-foreground">
-          {t('comingSoon')}
+          {m.billing_comingSoon()}
         </p>
       </div>
     )
@@ -36,13 +34,13 @@ export function UpgradePrompt({ feature }: UpgradePromptProps): ReactElement {
   return (
     <div className="flex flex-col items-center gap-2 p-4 rounded-lg border border-dashed border-primary/20 bg-muted/50 text-center">
       <p className="text-sm text-muted-foreground">
-        {t('needHigherPlan', { label })}
+        {m.billing_needHigherPlan({ label })}
       </p>
       <Link
         to="/pricing"
         className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
       >
-        {t('upgradeToPro')} <ArrowRight size={14} />
+        {m.billing_upgradeToPro()} <ArrowRight size={14} />
       </Link>
     </div>
   )

package/src/components/changelog/changelog-page.tsx

@@ -18,19 +18,37 @@
 import { cn } from '@/lib/utils'
 import { ScrollText, AlertTriangle, ArrowLeft, ChevronDown } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
-import { useTranslation } from 'react-i18next'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Route } from '@/routes/_nav/changelog/route'
 import type { DeveloperLogEntry } from '@allbluecn/kernel'
 import { SDK_GROUPS } from '@/lib/changelog/sdk-versions'
 import { APP_FULL_VERSION, APP_UPDATE_DATE_DISPLAY } from '@/lib/app-version'
+import { m } from "@/paraglide/messages.js";
 
 const TAG_KEYS = ['all', 'feat', 'fix', 'improvement', 'design', 'refactor', 'breaking', 'docs', 'security', 'perf']
 
+const TAG_LABELS: Record<string, () => string> = {
+  all: m.common_changelog_tags_all,
+  feat: m.common_changelog_tags_feat,
+  fix: m.common_changelog_tags_fix,
+  improvement: m.common_changelog_tags_improvement,
+  design: m.common_changelog_tags_design,
+  refactor: m.common_changelog_tags_refactor,
+  breaking: m.common_changelog_tags_breaking,
+  docs: m.common_changelog_tags_docs,
+  security: m.common_changelog_tags_security,
+  perf: m.common_changelog_tags_perf,
+}
+
+const SDK_GROUP_LABELS: Record<string, () => string> = {
+  'tanstack-sdk': m['common_changelog_sdkGroups_tanstack-sdk'],
+  'allblue-sdk': m['common_changelog_sdkGroups_allblue-sdk'],
+  'core-sdk': m['common_changelog_sdkGroups_core-sdk'],
+}
+
 const REQUIRES_ACTION_TAGS = new Set(['breaking'])
 
 function ChangelogSidebar() {
-  const { t } = useTranslation('common')
   const [activeGroup, setActiveGroup] = useState<string | null>(null)
   const [isOverflowing, setIsOverflowing] = useState(false)
   const outerRef = useRef<HTMLDivElement>(null)
@@ -94,23 +112,22 @@ function ChangelogSidebar() {
       <div ref={outerRef} className={outerClasses}>
         <div className="shrink-0">
           <h1 className="text-4xl font-medium tracking-tight">
-            {t('changelog.title')}
+            {m.common_changelog_title()}
           </h1>
           <p className="text-sm text-muted-foreground mt-3 leading-relaxed">
-            {t('changelog.description')}
+            {m.common_changelog_description()}
           </p>
         </div>
 
         <div className="flex flex-col gap-3">
           <h2 className="shrink-0 text-sm font-semibold tracking-tight">
-            {t('changelog.sdkVersions')}
+            {m.common_changelog_sdkVersions()}
           </h2>
           <div className="flex flex-col gap-3">
             {SDK_GROUPS.map((group) => (
               <SdkGroupSection
                 key={group.id}
                 group={group}
-                t={t}
                 open={isGroupOpen(group.id)}
                 onToggle={() => handleGroupToggle(group.id)}
                 isAccordion={isOverflowing}
@@ -121,19 +138,19 @@ function ChangelogSidebar() {
 
         <div className="shrink-0">
           <h3 className="text-sm font-semibold tracking-tight">
-            {t('changelog.subscribe.title')}
+            {m.common_changelog_subscribe_title()}
           </h3>
           <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
-            {t('changelog.subscribe.subtitle')}
+            {m.common_changelog_subscribe_subtitle()}
           </p>
           <div className="mt-3 flex gap-1.5">
             <input
               type="email"
-              placeholder={t('changelog.subscribe.placeholder')}
+              placeholder={m.common_changelog_subscribe_placeholder()}
               className="flex-1 min-w-0 h-8 rounded-md border border-border bg-background px-3 text-xs placeholder:text-muted-foreground/70 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-shadow"
             />
             <button className="h-8 px-3 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors shrink-0">
-              {t('changelog.subscribe.submit')}
+              {m.common_changelog_subscribe_submit()}
             </button>
           </div>
         </div>
@@ -158,13 +175,12 @@ function TagFilter({
   activeTag: string
   onTagChange: (tag: string) => void
 }) {
-  const { t } = useTranslation('common')
 
   return (
     <div className="flex flex-wrap gap-1.5">
       {TAG_KEYS.map((tag) => {
         const isActive = activeTag === tag
-        const label = t(`changelog.tags.${tag}`)
+        const label = TAG_LABELS[tag]?.() ?? tag
         return (
           <button
             key={tag}
@@ -188,13 +204,12 @@ function TagFilter({
 }
 
 function YearHeader({ year, count }: { year: string; count: number }) {
-  const { t } = useTranslation('common')
 
   return (
     <div className="flex items-center gap-3 py-4 mb-1">
       <h3 className="text-xl font-semibold tracking-tight">{year}</h3>
       <span className="text-xs text-muted-foreground font-mono">
-        {count} {t('changelog.entries')}
+        {count} {m.common_changelog_entries()}
       </span>
       <div className="flex-1 h-px bg-border/50" />
     </div>
@@ -208,7 +223,6 @@ function ChangelogEntry({
   entry: { id: string; date: string; title: string; desc: string; tags: string[] }
   onClick: (id: string) => void
 }) {
-  const { t } = useTranslation('common')
 
   return (
     <div
@@ -229,7 +243,7 @@ function ChangelogEntry({
             {entry.tags.includes('breaking') && (
               <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-medium bg-destructive/10 text-destructive shrink-0 mt-0.5">
                 <AlertTriangle className="size-2.5" />
-                {t('changelog.requiresAction')}
+                {m.common_changelog_requiresAction()}
               </span>
             )}
           </div>
@@ -243,7 +257,7 @@ function ChangelogEntry({
                   key={tag}
                   className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] text-muted-foreground bg-muted/50"
                 >
-                  {t(`changelog.tags.${tag}`)}
+                  {TAG_LABELS[tag]?.() ?? tag}
                 </span>
               ))}
             </div>
@@ -261,7 +275,6 @@ function ChangelogDetail({
   entry: DeveloperLogEntry
   onBack: () => void
 }) {
-  const { t } = useTranslation('common')
 
   return (
     <div className="h-full flex justify-center">
@@ -271,7 +284,7 @@ function ChangelogDetail({
           className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors mb-6 shrink-0"
         >
           <ArrowLeft className="size-3.5" />
-          {t('changelog.backToList')}
+          {m.common_changelog_backToList()}
         </button>
 
         <div className="flex items-start gap-3 mb-4">
@@ -296,7 +309,7 @@ function ChangelogDetail({
                     : 'text-muted-foreground bg-muted/50 border-border/50'
                 )}
               >
-                {t(`changelog.tags.${tag}`)}
+                {TAG_LABELS[tag]?.() ?? tag}
               </span>
             ))}
           </div>
@@ -320,13 +333,11 @@ function ChangelogDetail({
 
 function SdkGroupSection({
   group,
-  t,
   open,
   onToggle,
   isAccordion,
 }: {
   group: (typeof SDK_GROUPS)[0]
-  t: (key: string) => string
   open: boolean
   onToggle: () => void
   isAccordion: boolean
@@ -358,7 +369,7 @@ function SdkGroupSection({
             <span className="text-base">{group.icon}</span>
           )}
           <span className="text-xs mt-1 font-semibold text-foreground/80">
-            {t(`changelog.sdkGroups.${group.label}`)}
+            {SDK_GROUP_LABELS[group.label]?.() ?? group.label}
           </span>
         </span>
         {isAccordion && (
@@ -396,7 +407,6 @@ function SdkGroupSection({
 }
 
 function ChangelogPage() {
-  const { t } = useTranslation('common')
   const [activeTag, setActiveTag] = useState<string>('all')
   const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null)
   const { entries } = Route.useLoaderData()
@@ -445,8 +455,8 @@ function ChangelogPage() {
               {grouped.length === 0 ? (
                 <div className="flex flex-col items-center justify-center h-40 text-center">
                   <ScrollText className="size-8 text-muted-foreground/40 mb-2" />
-                  <p className="text-sm text-muted-foreground">{t('changelog.noMatch')}</p>
-                  <p className="text-xs text-muted-foreground mt-0.5">{t('changelog.noMatchHint')}</p>
+                  <p className="text-sm text-muted-foreground">{m.common_changelog_noMatch()}</p>
+                  <p className="text-xs text-muted-foreground mt-0.5">{m.common_changelog_noMatchHint()}</p>
                 </div>
               ) : (
                 <div className="space-y-4">

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

@@ -18,9 +18,9 @@
 "use client";
 
 import { Plus } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { CardDescription, CardTitle } from "@/components/ui/card";
+import { m } from "@/paraglide/messages.js";
 
 export interface ConversationHeaderProps {
   conversationsCount: number;
@@ -33,14 +33,13 @@ export function ConversationHeader({
   showNewButton,
   onNewConversation,
 }: ConversationHeaderProps) {
-  const { t } = useTranslation('chat');
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-wrap items-center justify-between gap-6">
         <div className="flex min-w-0 flex-1 flex-col gap-2">
-          <CardTitle>{t('history.title')}</CardTitle>
+          <CardTitle>{m.chat_history_title()}</CardTitle>
           <CardDescription>
-            {t('history.conversationCount', { count: conversationsCount })}
+            {m.chat_history_conversationCount({ count: conversationsCount })}
           </CardDescription>
         </div>
         {showNewButton && onNewConversation && (
@@ -50,7 +49,7 @@ export function ConversationHeader({
             type="button"
           >
             <Plus className="size-4" />
-            <span className="whitespace-nowrap">{t('newConversation')}</span>
+            <span className="whitespace-nowrap">{m.chat_newConversation()}</span>
           </Button>
         )}
       </div>