@oxy.so/bloom 5.2.0 → 5.4.0

package/src/agent-limits-card/messages.ts

@@ -1,4 +1,4 @@
-import type { MessageCatalog } from '../locale/messages';
+import { defineMessages, type MessageCatalog } from '../locale/messages';
 
 /**
  * Every fixed string `AgentLimitsCard` draws or announces, in each Bloom
@@ -11,20 +11,4 @@ export interface AgentLimitsCardMessages {
   managePlan: string;
 }
 
-export const AGENT_LIMITS_CARD_MESSAGES: MessageCatalog<AgentLimitsCardMessages> = {
-  en: { contextWindow: 'Context window', freeSpace: 'Free space', planUsageLimits: 'Plan usage limits', managePlan: 'Manage plan' },
-  es: { contextWindow: 'Ventana de contexto', freeSpace: 'Espacio libre', planUsageLimits: 'Límites de uso del plan', managePlan: 'Gestionar plan' },
-  ca: { contextWindow: 'Finestra de context', freeSpace: 'Espai lliure', planUsageLimits: 'Límits d’ús del pla', managePlan: 'Gestiona el pla' },
-  de: { contextWindow: 'Kontextfenster', freeSpace: 'Freier Platz', planUsageLimits: 'Nutzungslimits des Tarifs', managePlan: 'Tarif verwalten' },
-  fr: { contextWindow: 'Fenêtre de contexte', freeSpace: 'Espace libre', planUsageLimits: 'Limites d’utilisation de l’abonnement', managePlan: 'Gérer l’abonnement' },
-  it: { contextWindow: 'Finestra di contesto', freeSpace: 'Spazio libero', planUsageLimits: 'Limiti di utilizzo del piano', managePlan: 'Gestisci piano' },
-  pt: { contextWindow: 'Janela de contexto', freeSpace: 'Espaço livre', planUsageLimits: 'Limites de uso do plano', managePlan: 'Gerenciar plano' },
-  ru: { contextWindow: 'Контекстное окно', freeSpace: 'Свободно', planUsageLimits: 'Лимиты тарифа', managePlan: 'Управление тарифом' },
-  tr: { contextWindow: 'Bağlam penceresi', freeSpace: 'Boş alan', planUsageLimits: 'Plan kullanım sınırları', managePlan: 'Planı yönet' },
-  ja: { contextWindow: 'コンテキストウィンドウ', freeSpace: '空き容量', planUsageLimits: 'プランの利用上限', managePlan: 'プランを管理' },
-  zh: { contextWindow: '上下文窗口', freeSpace: '可用空间', planUsageLimits: '套餐用量限制', managePlan: '管理套餐' },
-  ar: { contextWindow: 'نافذة السياق', freeSpace: 'المساحة الفارغة', planUsageLimits: 'حدود استخدام الخطة', managePlan: 'إدارة الخطة' },
-  hi: { contextWindow: 'कॉन्टेक्स्ट विंडो', freeSpace: 'खाली जगह', planUsageLimits: 'प्लान की उपयोग सीमाएं', managePlan: 'प्लान प्रबंधित करें' },
-  bn: { contextWindow: 'কনটেক্সট উইন্ডো', freeSpace: 'খালি জায়গা', planUsageLimits: 'প্ল্যানের ব্যবহারের সীমা', managePlan: 'প্ল্যান পরিচালনা করুন' },
-  id: { contextWindow: 'Jendela konteks', freeSpace: 'Ruang kosong', planUsageLimits: 'Batas penggunaan paket', managePlan: 'Kelola paket' },
-};
+export const AGENT_LIMITS_CARD_MESSAGES: MessageCatalog<AgentLimitsCardMessages> = defineMessages<AgentLimitsCardMessages>('AGENT_LIMITS_CARD_MESSAGES', { contextWindow: 'Context window', freeSpace: 'Free space', planUsageLimits: 'Plan usage limits', managePlan: 'Manage plan' });

package/src/agent-progress/messages.ts

@@ -1,4 +1,4 @@
-import type { MessageCatalog } from '../locale/messages';
+import { defineMessages, type MessageCatalog } from '../locale/messages';
 import { plural } from '../locale/plural';
 
 /**
@@ -14,203 +14,16 @@ export interface AgentProgressMessages {
   defaultSteps: readonly string[];
 }
 
-export const AGENT_PROGRESS_MESSAGES: MessageCatalog<AgentProgressMessages> = {
-  en: {
-    stepsLeft: (n) => plural('en', n, { one: '{n} step left', other: '{n} steps left' }),
-    allCompleted: 'All steps completed',
-    minimize: 'Minimize steps',
-    expand: 'Expand steps',
-    defaultSteps: [
-      'Read project files',
-      'Update and install light mode tokens',
-      'Implement dark mode tokens',
-      'Add reusable registered theme toggle',
-      'Run registry, lint and production build',
-    ],
-  },
-  es: {
-    stepsLeft: (n) => plural('es', n, { one: 'Queda {n} paso', other: 'Quedan {n} pasos' }),
-    allCompleted: 'Todos los pasos completados',
-    minimize: 'Minimizar pasos',
-    expand: 'Expandir pasos',
-    defaultSteps: [
-      'Leer los archivos del proyecto',
-      'Actualizar e instalar los tokens del modo claro',
-      'Implementar los tokens del modo oscuro',
-      'Añadir un selector de tema reutilizable y registrado',
-      'Ejecutar el registro, el lint y la compilación de producción',
-    ],
-  },
-  ca: {
-    stepsLeft: (n) => plural('ca', n, { one: 'Queda {n} pas', other: 'Queden {n} passos' }),
-    allCompleted: 'Tots els passos completats',
-    minimize: 'Minimitza els passos',
-    expand: 'Desplega els passos',
-    defaultSteps: [
-      'Llegir els fitxers del projecte',
-      'Actualitzar i instal·lar els tokens del mode clar',
-      'Implementar els tokens del mode fosc',
-      'Afegir un selector de tema reutilitzable i registrat',
-      'Executar el registre, el lint i la compilació de producció',
-    ],
-  },
-  de: {
-    stepsLeft: (n) => plural('de', n, { one: 'Noch {n} Schritt', other: 'Noch {n} Schritte' }),
-    allCompleted: 'Alle Schritte abgeschlossen',
-    minimize: 'Schritte minimieren',
-    expand: 'Schritte einblenden',
-    defaultSteps: [
-      'Projektdateien lesen',
-      'Tokens für den hellen Modus aktualisieren und installieren',
-      'Tokens für den dunklen Modus implementieren',
-      'Wiederverwendbaren, registrierten Theme-Umschalter hinzufügen',
-      'Registry, Lint und Produktions-Build ausführen',
-    ],
-  },
-  fr: {
-    stepsLeft: (n) => plural('fr', n, { one: '{n} étape restante', other: '{n} étapes restantes' }),
-    allCompleted: 'Toutes les étapes sont terminées',
-    minimize: 'Réduire les étapes',
-    expand: 'Développer les étapes',
-    defaultSteps: [
-      'Lire les fichiers du projet',
-      'Mettre à jour et installer les tokens du mode clair',
-      'Implémenter les tokens du mode sombre',
-      'Ajouter un sélecteur de thème réutilisable et enregistré',
-      'Lancer le registre, le lint et le build de production',
-    ],
-  },
-  it: {
-    stepsLeft: (n) => plural('it', n, { one: 'Manca {n} passaggio', other: 'Mancano {n} passaggi' }),
-    allCompleted: 'Tutti i passaggi completati',
-    minimize: 'Riduci passaggi',
-    expand: 'Espandi passaggi',
-    defaultSteps: [
-      'Leggere i file del progetto',
-      'Aggiornare e installare i token della modalità chiara',
-      'Implementare i token della modalità scura',
-      'Aggiungere un selettore di tema riutilizzabile e registrato',
-      'Eseguire registry, lint e build di produzione',
-    ],
-  },
-  pt: {
-    stepsLeft: (n) => plural('pt', n, { one: '{n} etapa restante', other: '{n} etapas restantes' }),
-    allCompleted: 'Todas as etapas concluídas',
-    minimize: 'Minimizar etapas',
-    expand: 'Expandir etapas',
-    defaultSteps: [
-      'Ler os arquivos do projeto',
-      'Atualizar e instalar os tokens do modo claro',
-      'Implementar os tokens do modo escuro',
-      'Adicionar um seletor de tema reutilizável e registrado',
-      'Executar o registro, o lint e o build de produção',
-    ],
-  },
-  ru: {
-    stepsLeft: (n) =>
-      plural('ru', n, { one: 'Остался {n} шаг', few: 'Осталось {n} шага', many: 'Осталось {n} шагов', other: 'Осталось {n} шага' }),
-    allCompleted: 'Все шаги выполнены',
-    minimize: 'Свернуть шаги',
-    expand: 'Развернуть шаги',
-    defaultSteps: [
-      'Прочитать файлы проекта',
-      'Обновить и установить токены светлой темы',
-      'Реализовать токены тёмной темы',
-      'Добавить переиспользуемый зарегистрированный переключатель темы',
-      'Запустить реестр, линтер и продакшен-сборку',
-    ],
-  },
-  tr: {
-    stepsLeft: (n) => plural('tr', n, { other: '{n} adım kaldı' }),
-    allCompleted: 'Tüm adımlar tamamlandı',
-    minimize: 'Adımları küçült',
-    expand: 'Adımları genişlet',
-    defaultSteps: [
-      'Proje dosyalarını oku',
-      'Açık mod token’larını güncelle ve yükle',
-      'Koyu mod token’larını uygula',
-      'Yeniden kullanılabilir, kayıtlı bir tema düğmesi ekle',
-      'Kayıt, lint ve üretim derlemesini çalıştır',
-    ],
-  },
-  ja: {
-    stepsLeft: (n) => plural('ja', n, { other: '残り{n}ステップ' }),
-    allCompleted: 'すべてのステップが完了しました',
-    minimize: 'ステップを最小化',
-    expand: 'ステップを展開',
-    defaultSteps: [
-      'プロジェクトファイルを読み込む',
-      'ライトモードのトークンを更新してインストール',
-      'ダークモードのトークンを実装',
-      '再利用可能なテーマ切り替えを登録して追加',
-      'レジストリ、lint、本番ビルドを実行',
-    ],
-  },
-  zh: {
-    stepsLeft: (n) => plural('zh', n, { other: '还剩 {n} 个步骤' }),
-    allCompleted: '所有步骤已完成',
-    minimize: '收起步骤',
-    expand: '展开步骤',
-    defaultSteps: ['读取项目文件', '更新并安装浅色模式令牌', '实现深色模式令牌', '添加可复用的已注册主题切换', '运行注册表、lint 和生产构建'],
-  },
-  ar: {
-    stepsLeft: (n) =>
-      plural('ar', n, {
-        zero: 'لم تتبقَّ أي خطوات',
-        one: 'تبقّت خطوة واحدة',
-        two: 'تبقّت خطوتان',
-        few: 'تبقّت {n} خطوات',
-        many: 'تبقّت {n} خطوة',
-        other: 'تبقّت {n} خطوة',
-      }),
-    allCompleted: 'اكتملت كل الخطوات',
-    minimize: 'تصغير الخطوات',
-    expand: 'توسيع الخطوات',
-    defaultSteps: [
-      'قراءة ملفات المشروع',
-      'تحديث رموز الوضع الفاتح وتثبيتها',
-      'تنفيذ رموز الوضع الداكن',
-      'إضافة مبدّل سمة مسجَّل قابل لإعادة الاستخدام',
-      'تشغيل السجل والتدقيق وبناء الإنتاج',
-    ],
-  },
-  hi: {
-    stepsLeft: (n) => plural('hi', n, { other: '{n} चरण बाकी' }),
-    allCompleted: 'सभी चरण पूरे हो गए',
-    minimize: 'चरण छोटे करें',
-    expand: 'चरण दिखाएं',
-    defaultSteps: [
-      'प्रोजेक्ट फ़ाइलें पढ़ें',
-      'लाइट मोड टोकन अपडेट और इंस्टॉल करें',
-      'डार्क मोड टोकन लागू करें',
-      'दोबारा इस्तेमाल होने वाला रजिस्टर्ड थीम टॉगल जोड़ें',
-      'रजिस्ट्री, लिंट और प्रोडक्शन बिल्ड चलाएं',
-    ],
-  },
-  bn: {
-    stepsLeft: (n) => plural('bn', n, { other: '{n}টি ধাপ বাকি' }),
-    allCompleted: 'সব ধাপ সম্পন্ন হয়েছে',
-    minimize: 'ধাপগুলো ছোট করুন',
-    expand: 'ধাপগুলো দেখান',
-    defaultSteps: [
-      'প্রজেক্টের ফাইল পড়ুন',
-      'লাইট মোডের টোকেন আপডেট ও ইনস্টল করুন',
-      'ডার্ক মোডের টোকেন প্রয়োগ করুন',
-      'পুনরায় ব্যবহারযোগ্য নিবন্ধিত থিম টগল যোগ করুন',
-      'রেজিস্ট্রি, লিন্ট ও প্রোডাকশন বিল্ড চালান',
-    ],
-  },
-  id: {
-    stepsLeft: (n) => plural('id', n, { other: '{n} langkah lagi' }),
-    allCompleted: 'Semua langkah selesai',
-    minimize: 'Ciutkan langkah',
-    expand: 'Luaskan langkah',
-    defaultSteps: [
-      'Baca file proyek',
-      'Perbarui dan pasang token mode terang',
-      'Terapkan token mode gelap',
-      'Tambahkan pengalih tema terdaftar yang dapat dipakai ulang',
-      'Jalankan registry, lint, dan build produksi',
-    ],
-  },
-};
+export const AGENT_PROGRESS_MESSAGES: MessageCatalog<AgentProgressMessages> = defineMessages<AgentProgressMessages>('AGENT_PROGRESS_MESSAGES', {
+  stepsLeft: (n) => plural('en', n, { one: '{n} step left', other: '{n} steps left' }),
+  allCompleted: 'All steps completed',
+  minimize: 'Minimize steps',
+  expand: 'Expand steps',
+  defaultSteps: [
+    'Read project files',
+    'Update and install light mode tokens',
+    'Implement dark mode tokens',
+    'Add reusable registered theme toggle',
+    'Run registry, lint and production build',
+  ],
+});

package/src/agent-thinking/messages.ts

@@ -1,24 +1,8 @@
-import type { MessageCatalog } from '../locale/messages';
+import { defineMessages, type MessageCatalog } from '../locale/messages';
 
 /** `AgentThinking`'s default status label in each Bloom language; a `label` prop still wins. */
 export interface AgentThinkingMessages {
   thinking: string;
 }
 
-export const AGENT_THINKING_MESSAGES: MessageCatalog<AgentThinkingMessages> = {
-  en: { thinking: 'Thinking' },
-  es: { thinking: 'Pensando' },
-  ca: { thinking: 'Pensant' },
-  de: { thinking: 'Denkt nach' },
-  fr: { thinking: 'Réflexion en cours' },
-  it: { thinking: 'Sto pensando' },
-  pt: { thinking: 'Pensando' },
-  ru: { thinking: 'Думаю' },
-  tr: { thinking: 'Düşünüyor' },
-  ja: { thinking: '考え中' },
-  zh: { thinking: '思考中' },
-  ar: { thinking: 'جارٍ التفكير' },
-  hi: { thinking: 'सोच रहा है' },
-  bn: { thinking: 'ভাবছে' },
-  id: { thinking: 'Berpikir' },
-};
+export const AGENT_THINKING_MESSAGES: MessageCatalog<AgentThinkingMessages> = defineMessages<AgentThinkingMessages>('AGENT_THINKING_MESSAGES', { thinking: 'Thinking' });

package/src/ai-chat/AiChatShell.tsx

@@ -1,6 +1,6 @@
 import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
 import { useSurfaceBacking } from '../surface/use-surface-backing';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
   PanResponder,
   Platform,
@@ -19,6 +19,8 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { BottomBarSlotContext } from '../layout/bottom-bar-slot';
 import { Button } from '../button';
 import { usePanelInteraction } from './use-panel-interaction';
 import { useControllableState } from '../hooks/use-controllable-state';
@@ -45,6 +47,8 @@ import type { AiChatMobileHeaderProps, AiChatShellProps } from './types';
 import { AiChatResizeHandle } from './AiChatResizeHandle';
 import { clamp01 } from '../styles/clamp';
 
+const NO_SAFE_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+
 const REVEAL_EASE = Easing.bezier(0.42, 0, 0.58, 1);
 const REVEAL_MS = 325;
 const REVEAL_OFFSET = 272;
@@ -195,6 +199,7 @@ export function AiChatShell({
   onPanelOpenChange,
   background,
   surface = true,
+  safeArea = false,
   scroll = 'container',
   labels,
   style,
@@ -202,6 +207,10 @@ export function AiChatShell({
 }: AiChatShellProps) {
   useAiChatWebCss();
   const palette = useAiChatPalette();
+  const deviceInsets = useContext(SafeAreaInsetsContext);
+  const inheritedBottomInset = useContext(BottomBarSlotContext);
+  const ownsSafeArea = safeArea && Platform.OS !== 'web';
+  const safeInsets = ownsSafeArea ? deviceInsets ?? NO_SAFE_INSETS : NO_SAFE_INSETS;
   const reducedMotion = useReducedMotion();
   const { messages } = useMessages(AI_CHAT_MESSAGES);
   const panelLabel = panelLabelProp ?? messages.code;
@@ -400,7 +409,7 @@ export function AiChatShell({
     drawer.value = reducedMotion ? target : withTiming(target, { duration: DRAWER_MS, easing: DRAWER_EASE });
   }, [panelOpen, reducedMotion, drawer]);
   const [shellWidth, setShellWidth] = useState(windowWidth);
-  const drawerWidth = Math.min(410, shellWidth - 12);
+  const drawerWidth = Math.min(410, shellWidth - safeInsets.left - safeInsets.right - 12);
   const backdropStyle = useAnimatedStyle(() => ({ opacity: drawer.value }), [drawer]);
   const drawerStyle = useAnimatedStyle(
     () => ({ transform: [{ translateX: drawerWidth * 1.1 * (1 - drawer.value) }] }),
@@ -457,6 +466,12 @@ export function AiChatShell({
     flexDirection: 'row',
     gap: 16,
     padding: SHELL_GUTTER,
+    ...(ownsSafeArea ? {
+      paddingTop: SHELL_GUTTER + safeInsets.top,
+      paddingRight: SHELL_GUTTER + safeInsets.right,
+      paddingBottom: SHELL_GUTTER + safeInsets.bottom,
+      paddingLeft: SHELL_GUTTER + safeInsets.left,
+    } : null),
     backgroundColor: surface ? palette.full : 'transparent',
   };
 
@@ -464,6 +479,7 @@ export function AiChatShell({
   const veil = palette.isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.1)';
 
   return (
+    <BottomBarSlotContext.Provider value={ownsSafeArea ? safeInsets.bottom : inheritedBottomInset}>
     <AiChatShellContext.Provider value={shellState}>
       <SurfaceLevelProvider level={backing.level} fill={backing.fill}>
       <AiChatDocumentGutterContext.Provider value={documentScroll && surface ? palette.full : null}>
@@ -483,7 +499,7 @@ export function AiChatShell({
             ref={navRef}
             {...(navOpen ? null : CLOSED_LAYER)}
             pointerEvents={navOpen ? 'box-none' : 'none'}
-            style={{ position: overlayPosition, top: 0, bottom: 0, left: 0, zIndex: 10, width: 272, paddingTop: 12, paddingBottom: 12, paddingLeft: 6 }}>
+            style={{ position: overlayPosition, top: 0, bottom: 0, left: safeInsets.left, zIndex: 10, width: 272, paddingTop: 12 + safeInsets.top, paddingBottom: 12 + safeInsets.bottom, paddingLeft: 6 }}>
             <Animated.View
               pointerEvents={navOpen ? 'auto' : 'none'}
               style={[{ height: '100%', width: 260, transformOrigin: 'left' }, railStyle]}>
@@ -599,11 +615,13 @@ export function AiChatShell({
                   position: 'absolute',
                   top: 0,
                   bottom: 0,
-                  right: 0,
+                  right: safeInsets.right,
                   width: drawerWidth,
                   flexDirection: 'column',
                   backgroundColor: palette.full,
                   padding: 12,
+                  paddingTop: 12 + safeInsets.top,
+                  paddingBottom: 12 + safeInsets.bottom,
                   boxShadow: palette.shadowSidebar,
                 },
                 drawerStyle,
@@ -633,6 +651,7 @@ export function AiChatShell({
       </AiChatDocumentGutterContext.Provider>
       </SurfaceLevelProvider>
     </AiChatShellContext.Provider>
+    </BottomBarSlotContext.Provider>
   );
 }