@oxy.so/bloom 6.1.0 → 6.3.0

package/src/chat-composer/create-suggestion-list.tsx

@@ -1,6 +1,7 @@
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useCardFill } from '../card/use-card-fill';
 import type { Surface as SurfaceComponent } from '../surface';
+import type { Loading as LoadingComponent } from '../loading';
 /**
  * The anchored list above the composer: `@mention`, `/command` and `:shortcode`
  * are ONE part with a `kind`, because the row geometry, the keyboard model and
@@ -14,6 +15,7 @@ import React from 'react';
 import { Image, Pressable, ScrollView, View } from 'react-native';
 
 import { RiHashtag } from '../icons/remix/RiHashtag';
+import { RiVerifiedBadgeFill } from '../icons/remix/RiVerifiedBadgeFill';
 import { useImageResolver } from '../image-resolver/context';
 import { useMessages } from '../locale/messages';
 import { useTheme } from '../theme/use-theme';
@@ -30,8 +32,9 @@ import type { ChatComposerSuggestion, SuggestionKind, SuggestionListProps } from
 import { dataHook, IS_WEB } from './web-hooks';
 
 /** Platform dependencies are bound once; shared rendering adds no wrapper. */
-export function createSuggestionList({ Surface }: {
+export function createSuggestionList({ Surface, Loading }: {
   Surface: typeof SurfaceComponent;
+  Loading: typeof LoadingComponent;
 }) {
 
   function isUrl(value: string): boolean {
@@ -111,11 +114,15 @@ export function createSuggestionList({ Surface }: {
     style,
     testID,
     accessibilityLabel,
+    loading = false,
+    showEmpty = false,
+    emptyLabel,
   }: SuggestionListProps) {
     const theme = useTheme();
     const palette = resolveChatComposerPalette(theme, useCardFill(style));
     const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
-    if (suggestions.length === 0) return null;
+    const empty = !loading && suggestions.length === 0;
+    if (empty && !showEmpty) return null;
 
     // React Native's `Role` union has no `listbox`; react-native-web passes the
     // DOM `role` straight through, so it travels as a web-only prop.
@@ -144,6 +151,34 @@ export function createSuggestionList({ Surface }: {
             {header}
           </Text>
         ) : null}
+        {loading ? (
+          <View style={{ minHeight: SUGGESTION_ROW_HEIGHT, justifyContent: 'center', paddingLeft: 8, paddingRight: 8 }}>
+            <Loading
+              variant="inline"
+              size="sm"
+              color={palette.textSecondary}
+              text={messages.searchingSuggestions}
+              textStyle={{ color: palette.textSecondary }}
+              accessibilityLabel={messages.searchingSuggestions}
+              testID={testID ? `${testID}-loading` : undefined}
+            />
+          </View>
+        ) : empty ? (
+          <Text
+            variant="body-2-regular"
+            accessibilityRole="text"
+            style={{
+              color: palette.textSecondary,
+              minHeight: SUGGESTION_ROW_HEIGHT,
+              paddingLeft: 8,
+              paddingRight: 8,
+              paddingTop: 10,
+              paddingBottom: 10,
+            }}
+            testID={testID ? `${testID}-empty` : undefined}>
+            {emptyLabel ?? messages.noSuggestions[kind]}
+          </Text>
+        ) : (
         <ScrollView
           {...dataHook('bloomChatComposerScroll')}
           {...listRole}
@@ -167,9 +202,12 @@ export function createSuggestionList({ Surface }: {
               cursor: suggestion.disabled ? 'auto' : 'pointer',
               '--bloom-chat-composer-ring': palette.focusRing,
             };
-            const name = suggestion.handle
-              ? `${suggestion.label} ${suggestion.handle}`
-              : suggestion.label;
+            const verified = kind === 'mention' && suggestion.verified === true;
+            const name = [
+              suggestion.label,
+              verified ? messages.suggestionVerified : undefined,
+              suggestion.handle,
+            ].filter(Boolean).join(verified ? ', ' : ' ');
             return (
               <Pressable
                 key={suggestion.id}
@@ -186,9 +224,16 @@ export function createSuggestionList({ Surface }: {
                 <Leading kind={kind} suggestion={suggestion} />
                 <View style={{ flexShrink: 1, flexGrow: 1 }}>
                   <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 6 }}>
-                    <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
-                      {suggestion.label}
-                    </Text>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3, flexShrink: 1 }}>
+                      <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text, flexShrink: 1 }}>
+                        {suggestion.label}
+                      </Text>
+                      {verified ? (
+                        <View testID={testID ? `${testID}-verified-${suggestion.id}` : undefined}>
+                          <RiVerifiedBadgeFill width={14} height={14} fill={palette.accent} />
+                        </View>
+                      ) : null}
+                    </View>
                     {suggestion.handle ? (
                       <Text
                         variant="body-2-regular"
@@ -211,6 +256,7 @@ export function createSuggestionList({ Surface }: {
             );
           })}
         </ScrollView>
+        )}
       </Surface>
     );
   }

package/src/chat-composer/messages.ts

@@ -46,6 +46,12 @@ export interface ChatComposerMessages {
   removeAttachment: (name: string) => string;
   /** `SuggestionList`'s name per kind. */
   suggestions: Record<SuggestionKind, string>;
+  /** A suggestion row's verified marker, as announced. */
+  suggestionVerified: string;
+  /** `SuggestionList` while its caller is still searching. */
+  searchingSuggestions: string;
+  /** `SuggestionList` when a finished search found nothing, per kind. */
+  noSuggestions: Record<SuggestionKind, string>;
   /** `AttachmentMenu`'s default rows. */
   attachmentItems: Record<AttachmentMenuItemId, string>;
 }
@@ -77,5 +83,8 @@ export const CHAT_COMPOSER_MESSAGES: MessageCatalog<ChatComposerMessages> = defi
   attachments: 'Attachments',
   removeAttachment: (name) => `Remove ${name}`,
   suggestions: { mention: 'People', command: 'Commands', emoji: 'Emoji' },
+  suggestionVerified: 'Verified',
+  searchingSuggestions: 'Searching…',
+  noSuggestions: { mention: 'No people found', command: 'No commands found', emoji: 'No emoji found' },
   attachmentItems: { gallery: 'Gallery', camera: 'Camera', file: 'File', location: 'Location', contact: 'Contact', poll: 'Poll', music: 'Music' },
 });

package/src/chat-composer/types.ts

@@ -66,6 +66,8 @@ export interface ChatComposerSuggestion {
   avatar?: string;
   /** The glyph itself, for `kind="emoji"`. */
   emoji?: string;
+  /** Draws the verified marker after the name, for `kind="mention"`. */
+  verified?: boolean;
   disabled?: boolean;
 }
 
@@ -91,6 +93,21 @@ export interface SuggestionListProps extends PartProps {
   maxHeight?: number;
   /** Accessible name of the listbox. Defaults to a name derived from `kind`. */
   accessibilityLabel?: string;
+  /**
+   * The caller is still searching. Draws a named, busy "Searching…" line in
+   * place of the rows, so a list that has nothing YET is not mistaken for one
+   * that found nothing. Default `false`.
+   */
+  loading?: boolean;
+  /**
+   * Draws a "No people found" line when a finished search is empty. Off by
+   * default, and an empty list draws nothing — right for a composer that shows
+   * the list only while it has rows; a picker the user opened on purpose wants
+   * the answer.
+   */
+  showEmpty?: boolean;
+  /** Replaces the localized empty line. */
+  emptyLabel?: string;
 }
 
 export interface ChatComposerLabels {

package/src/cover-header/CoverHeader.tsx

@@ -0,0 +1,75 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { CoverImage } from './CoverImage';
+import type { CoverHeaderProps } from './types';
+
+const DEFAULT_POSITION = { x: 0.5, y: 0.5 };
+
+/**
+ * A cover band with content rising into its bottom edge — a profile's banner
+ * and the avatar that overlaps it.
+ *
+ *   cover     absolute over the top `coverHeight`, clipped, background-tertiary
+ *             under the photo; the FIRST child
+ *   content   in flow, `paddingTop: coverHeight - overlap`; the LAST child
+ *
+ * The overlap is made by layout, not by moving anything: the band is taken out
+ * of flow and the content starts `overlap` short of its bottom edge. No
+ * negative margin, no transform, no zIndex. The content is the later sibling,
+ * so it paints over the band on iOS, Android and web alike, and the measured
+ * height is the real one — a list header or a sticky section after it starts
+ * exactly where the content ends.
+ */
+function CoverHeaderComponent({
+  coverSource,
+  coverPosition = DEFAULT_POSITION,
+  cover,
+  coverHeight = 170,
+  overlap = 45,
+  coverStyle,
+  contentStyle,
+  children,
+  style,
+  testID,
+}: CoverHeaderProps) {
+  const theme = useTheme();
+  const rise = Math.min(Math.max(overlap, 0), coverHeight);
+
+  return (
+    <View testID={testID} style={[{ position: 'relative', width: '100%' }, style]}>
+      <View
+        testID={testID ? `${testID}-cover` : undefined}
+        style={[
+          {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: coverHeight,
+            overflow: 'hidden',
+            backgroundColor: theme.colors.backgroundTertiary,
+          },
+          coverStyle,
+        ]}>
+        {cover ??
+          (coverSource ? (
+            <CoverImage
+              source={coverSource}
+              position={coverPosition}
+              testID={testID ? `${testID}-cover-image` : undefined}
+            />
+          ) : null)}
+      </View>
+      <View
+        testID={testID ? `${testID}-content` : undefined}
+        style={[{ position: 'relative', width: '100%' }, contentStyle, { paddingTop: coverHeight - rise }]}>
+        {children}
+      </View>
+    </View>
+  );
+}
+
+export const CoverHeader = memo(CoverHeaderComponent);
+CoverHeader.displayName = 'CoverHeader';

package/src/cover-header/CoverImage.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Image,
+  StyleSheet,
+  View,
+  type ImageLoadEventData,
+  type ImageSourcePropType,
+  type LayoutChangeEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+
+/** `object-fit: cover` with an `object-position`: the image sized to cover the box, offset by the fractions. */
+export function CoverImage({
+  source,
+  position,
+  testID,
+}: {
+  source: string | ImageSourcePropType;
+  position: { x: number; y: number };
+  testID?: string;
+}) {
+  const [box, setBox] = useState<{ width: number; height: number } | null>(null);
+  const [natural, setNatural] = useState<{ width: number; height: number } | null>(null);
+  const resolved: ImageSourcePropType = typeof source === 'string' ? { uri: source } : source;
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setBox((prev) => (prev && prev.width === width && prev.height === height ? prev : { width, height }));
+  }, []);
+  const onLoad = useCallback((event: NativeSyntheticEvent<ImageLoadEventData>) => {
+    const s = event.nativeEvent?.source;
+    if (s && s.width > 0 && s.height > 0) setNatural({ width: s.width, height: s.height });
+  }, []);
+
+  const frame = useMemo(() => {
+    if (!box || !natural) return null;
+    const scale = Math.max(box.width / natural.width, box.height / natural.height);
+    const width = natural.width * scale;
+    const height = natural.height * scale;
+    return { width, height, left: (box.width - width) * position.x, top: (box.height - height) * position.y };
+  }, [box, natural, position.x, position.y]);
+
+  return (
+    <View style={StyleSheet.absoluteFill} onLayout={onLayout} testID={testID ? `${testID}-frame` : undefined}>
+      <Image
+        testID={testID}
+        source={resolved}
+        onLoad={onLoad}
+        accessibilityIgnoresInvertColors
+        aria-hidden
+        resizeMode="cover"
+        style={
+          frame
+            ? { position: 'absolute', left: frame.left, top: frame.top, width: frame.width, height: frame.height }
+            : StyleSheet.absoluteFill
+        }
+      />
+    </View>
+  );
+}

package/src/cover-header/index.ts

@@ -0,0 +1,3 @@
+export { CoverHeader } from './CoverHeader';
+
+export type { CoverHeaderProps } from './types';

package/src/cover-header/types.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+
+export interface CoverHeaderProps {
+  /** Photo across the cover band. Without one the band shows `background-tertiary`. */
+  coverSource?: string | ImageSourcePropType | null;
+  /**
+   * Where the photo's crop sits, as fractions (`object-position`). Default
+   * `{ x: 0.5, y: 0.5 }` — centred, as `resizeMode="cover"`.
+   */
+  coverPosition?: { x: number; y: number };
+  /** Drawn in the band instead of the photo (an editor, a gradient, a video poster). */
+  cover?: ReactNode;
+  /** Height of the cover band. Default `170`. */
+  coverHeight?: number;
+  /**
+   * How far the content rises into the cover band. Default `45` — half a 90px
+   * avatar. Clamped to `0..coverHeight`.
+   */
+  overlap?: number;
+  /** The band's own style: corner radii, a different fill. */
+  coverStyle?: StyleProp<ViewStyle>;
+  /** The content column's style. Its `paddingTop` is the component's and is ignored. */
+  contentStyle?: StyleProp<ViewStyle>;
+  /** The content: the avatar row first, then whatever follows it. */
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  /** Also names the parts: `-cover`, `-cover-image`, `-content`. */
+  testID?: string;
+}

package/src/index.ts

@@ -198,6 +198,7 @@ export * from './calendar';
 export * from './stat-cards';
 export * from './recent-hires-card';
 export * from './ai-profile-card';
+export * from './cover-header';
 export * from './important-alerts-card';
 export * from './patient-info-card';
 export * from './sidebar';

package/src/index.web.ts

@@ -203,6 +203,7 @@ export * from './calendar';
 export * from './stat-cards';
 export * from './recent-hires-card';
 export * from './ai-profile-card';
+export * from './cover-header';
 export * from './important-alerts-card';
 export * from './patient-info-card';
 export * from './sidebar';

package/src/locale/translations/ar.ts

@@ -176,6 +176,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'المرفقات',
   removeAttachment: (name) => `إزالة ${name}`,
   suggestions: { mention: 'الأشخاص', command: 'الأوامر', emoji: 'رموز تعبيرية' },
+  suggestionVerified: 'موثّق',
+  searchingSuggestions: 'جارٍ البحث…',
+  noSuggestions: { mention: 'لم يتم العثور على أشخاص', command: 'لم يتم العثور على أوامر', emoji: 'لم يتم العثور على رموز تعبيرية' },
   attachmentItems: { gallery: 'المعرض', camera: 'الكاميرا', file: 'ملف', location: 'الموقع', contact: 'جهة اتصال', poll: 'استطلاع', music: 'موسيقى' },
 };
 

package/src/locale/translations/bn.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'সংযুক্তি',
   removeAttachment: (name) => `${name} সরান`,
   suggestions: { mention: 'লোকজন', command: 'কমান্ড', emoji: 'ইমোজি' },
+  suggestionVerified: 'যাচাইকৃত',
+  searchingSuggestions: 'খোঁজা হচ্ছে…',
+  noSuggestions: { mention: 'কাউকে পাওয়া যায়নি', command: 'কোনো কমান্ড পাওয়া যায়নি', emoji: 'কোনো ইমোজি পাওয়া যায়নি' },
   attachmentItems: { gallery: 'গ্যালারি', camera: 'ক্যামেরা', file: 'ফাইল', location: 'অবস্থান', contact: 'পরিচিতি', poll: 'পোল', music: 'সংগীত' },
 };
 

package/src/locale/translations/ca.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Fitxers adjunts',
   removeAttachment: (name) => `Treu ${name}`,
   suggestions: { mention: 'Persones', command: 'Ordres', emoji: 'Emoji' },
+  suggestionVerified: 'Verificat',
+  searchingSuggestions: 'Cercant…',
+  noSuggestions: { mention: "No s'ha trobat ningú", command: "No s'han trobat ordres", emoji: "No s'han trobat emojis" },
   attachmentItems: { gallery: 'Galeria', camera: 'Càmera', file: 'Fitxer', location: 'Ubicació', contact: 'Contacte', poll: 'Enquesta', music: 'Música' },
 };
 

package/src/locale/translations/de.ts

@@ -160,6 +160,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Anhänge',
   removeAttachment: (name) => `${name} entfernen`,
   suggestions: { mention: 'Personen', command: 'Befehle', emoji: 'Emoji' },
+  suggestionVerified: 'Verifiziert',
+  searchingSuggestions: 'Suche läuft…',
+  noSuggestions: { mention: 'Keine Personen gefunden', command: 'Keine Befehle gefunden', emoji: 'Keine Emojis gefunden' },
   attachmentItems: { gallery: 'Galerie', camera: 'Kamera', file: 'Datei', location: 'Standort', contact: 'Kontakt', poll: 'Umfrage', music: 'Musik' },
 };
 

package/src/locale/translations/es.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Archivos adjuntos',
   removeAttachment: (name) => `Quitar ${name}`,
   suggestions: { mention: 'Personas', command: 'Comandos', emoji: 'Emoji' },
+  suggestionVerified: 'Verificado',
+  searchingSuggestions: 'Buscando…',
+  noSuggestions: { mention: 'No se encontraron personas', command: 'No se encontraron comandos', emoji: 'No se encontraron emojis' },
   attachmentItems: { gallery: 'Galería', camera: 'Cámara', file: 'Archivo', location: 'Ubicación', contact: 'Contacto', poll: 'Encuesta', music: 'Música' },
 };
 

package/src/locale/translations/fr.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Pièces jointes',
   removeAttachment: (name) => `Retirer ${name}`,
   suggestions: { mention: 'Personnes', command: 'Commandes', emoji: 'Émoji' },
+  suggestionVerified: 'Vérifié',
+  searchingSuggestions: 'Recherche…',
+  noSuggestions: { mention: 'Aucune personne trouvée', command: 'Aucune commande trouvée', emoji: 'Aucun émoji trouvé' },
   attachmentItems: { gallery: 'Galerie', camera: 'Appareil photo', file: 'Fichier', location: 'Position', contact: 'Contact', poll: 'Sondage', music: 'Musique' },
 };
 

package/src/locale/translations/hi.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'अटैचमेंट',
   removeAttachment: (name) => `${name} हटाएं`,
   suggestions: { mention: 'लोग', command: 'कमांड', emoji: 'इमोजी' },
+  suggestionVerified: 'सत्यापित',
+  searchingSuggestions: 'खोज रहे हैं…',
+  noSuggestions: { mention: 'कोई व्यक्ति नहीं मिला', command: 'कोई कमांड नहीं मिला', emoji: 'कोई इमोजी नहीं मिला' },
   attachmentItems: { gallery: 'गैलरी', camera: 'कैमरा', file: 'फ़ाइल', location: 'लोकेशन', contact: 'संपर्क', poll: 'पोल', music: 'संगीत' },
 };
 

package/src/locale/translations/id.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Lampiran',
   removeAttachment: (name) => `Hapus ${name}`,
   suggestions: { mention: 'Orang', command: 'Perintah', emoji: 'Emoji' },
+  suggestionVerified: 'Terverifikasi',
+  searchingSuggestions: 'Mencari…',
+  noSuggestions: { mention: 'Orang tidak ditemukan', command: 'Perintah tidak ditemukan', emoji: 'Emoji tidak ditemukan' },
   attachmentItems: { gallery: 'Galeri', camera: 'Kamera', file: 'File', location: 'Lokasi', contact: 'Kontak', poll: 'Polling', music: 'Musik' },
 };
 

package/src/locale/translations/it.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Allegati',
   removeAttachment: (name) => `Rimuovi ${name}`,
   suggestions: { mention: 'Persone', command: 'Comandi', emoji: 'Emoji' },
+  suggestionVerified: 'Verificato',
+  searchingSuggestions: 'Ricerca in corso…',
+  noSuggestions: { mention: 'Nessuna persona trovata', command: 'Nessun comando trovato', emoji: 'Nessuna emoji trovata' },
   attachmentItems: { gallery: 'Galleria', camera: 'Fotocamera', file: 'File', location: 'Posizione', contact: 'Contatto', poll: 'Sondaggio', music: 'Musica' },
 };
 

package/src/locale/translations/ja.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: '添付ファイル',
   removeAttachment: (name) => `${name}を削除`,
   suggestions: { mention: 'ユーザー', command: 'コマンド', emoji: '絵文字' },
+  suggestionVerified: '認証済み',
+  searchingSuggestions: '検索中…',
+  noSuggestions: { mention: 'ユーザーが見つかりません', command: 'コマンドが見つかりません', emoji: '絵文字が見つかりません' },
   attachmentItems: { gallery: 'ギャラリー', camera: 'カメラ', file: 'ファイル', location: '位置情報', contact: '連絡先', poll: 'アンケート', music: '音楽' },
 };
 

package/src/locale/translations/pt.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Anexos',
   removeAttachment: (name) => `Remover ${name}`,
   suggestions: { mention: 'Pessoas', command: 'Comandos', emoji: 'Emoji' },
+  suggestionVerified: 'Verificado',
+  searchingSuggestions: 'Pesquisando…',
+  noSuggestions: { mention: 'Nenhuma pessoa encontrada', command: 'Nenhum comando encontrado', emoji: 'Nenhum emoji encontrado' },
   attachmentItems: { gallery: 'Galeria', camera: 'Câmera', file: 'Arquivo', location: 'Localização', contact: 'Contato', poll: 'Enquete', music: 'Música' },
 };
 

package/src/locale/translations/ru.ts

@@ -163,6 +163,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Вложения',
   removeAttachment: (name) => `Удалить ${name}`,
   suggestions: { mention: 'Люди', command: 'Команды', emoji: 'Эмодзи' },
+  suggestionVerified: 'Подтверждён',
+  searchingSuggestions: 'Поиск…',
+  noSuggestions: { mention: 'Никого не найдено', command: 'Команды не найдены', emoji: 'Эмодзи не найдены' },
   attachmentItems: { gallery: 'Галерея', camera: 'Камера', file: 'Файл', location: 'Геопозиция', contact: 'Контакт', poll: 'Опрос', music: 'Музыка' },
 };
 

package/src/locale/translations/tr.ts

@@ -159,6 +159,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Ekler',
   removeAttachment: (name) => `Kaldır: ${name}`,
   suggestions: { mention: 'Kişiler', command: 'Komutlar', emoji: 'Emoji' },
+  suggestionVerified: 'Doğrulanmış',
+  searchingSuggestions: 'Aranıyor…',
+  noSuggestions: { mention: 'Kişi bulunamadı', command: 'Komut bulunamadı', emoji: 'Emoji bulunamadı' },
   attachmentItems: { gallery: 'Galeri', camera: 'Kamera', file: 'Dosya', location: 'Konum', contact: 'Kişi', poll: 'Anket', music: 'Müzik' },
 };
 

package/src/locale/translations/zh.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: '附件',
   removeAttachment: (name) => `移除 ${name}`,
   suggestions: { mention: '用户', command: '命令', emoji: '表情' },
+  suggestionVerified: '已认证',
+  searchingSuggestions: '正在搜索…',
+  noSuggestions: { mention: '未找到用户', command: '未找到命令', emoji: '未找到表情' },
   attachmentItems: { gallery: '相册', camera: '相机', file: '文件', location: '位置', contact: '联系人', poll: '投票', music: '音乐' },
 };
 

package/src/message-bubble/MessageBubble.tsx

@@ -89,7 +89,8 @@ import type { MessageBubbleProps } from './types';
  *
  * THE SLOT HAS TWO FITS, and the bubble cannot tell them apart by looking.
  * `mediaFit="bleed"` (the default) cancels the bubble's padding so a photo runs
- * to the radius. `mediaFit="inset"` keeps it, for a block that carries no
+ * to the radius. `mediaFit="bare"` draws no bubble at all around media alone —
+ * a sticker. `mediaFit="inset"` keeps the padding, for a block that carries no
  * padding of its own — `PollMessage`, `LocationMessage`, `ContactMessage` are
  * all typography, and bled they clip a question against the top edge, cut an
  * address off at the bottom and put an avatar on the left one. The fit also
@@ -233,10 +234,13 @@ function MessageBubbleComponent({
 
   const radii = bubbleRadii(direction, position);
   const fill = failed ? mixColor(side.fill, paint.failed, theme.isDark ? 0.3 : 0.22) : side.fill;
-  const showTail = tail && hasTail(position);
   const mediaOnly = media !== undefined && text === undefined && children === undefined && !deleted;
-  const bleed = mediaFit === 'bleed';
-  const overlayMeta = metaOverlay ?? (mediaOnly && bleed);
+  // `bare` only holds for media alone: with text beside it the text needs a
+  // surface, so the block is fitted as `bleed` instead.
+  const bare = mediaFit === 'bare' && mediaOnly;
+  const bleed = mediaFit === 'bleed' || (mediaFit === 'bare' && !mediaOnly);
+  const showTail = tail && hasTail(position) && !bare;
+  const overlayMeta = metaOverlay ?? (mediaOnly && (bleed || bare));
   const hasMeta =
     !deleted &&
     (time !== undefined ||
@@ -274,16 +278,18 @@ function MessageBubbleComponent({
         {
           borderRadius: 0,
           ...radii,
-          backgroundColor: fill,
-          borderWidth: side.border === undefined ? 0 : 1,
+          backgroundColor: bare ? 'transparent' : fill,
+          borderWidth: bare || side.border === undefined ? 0 : 1,
           borderColor: side.border,
-          paddingTop: BUBBLE_PADDING_Y,
-          paddingBottom: BUBBLE_PADDING_Y,
-          paddingLeft: BUBBLE_PADDING_X,
-          paddingRight: BUBBLE_PADDING_X,
+          paddingTop: bare ? 0 : BUBBLE_PADDING_Y,
+          paddingBottom: bare ? 0 : BUBBLE_PADDING_Y,
+          paddingLeft: bare ? 0 : BUBBLE_PADDING_X,
+          paddingRight: bare ? 0 : BUBBLE_PADDING_X,
           gap: 2,
           opacity: pending && !failed ? 0.65 : 1,
-          overflow: 'hidden',
+          // A bare block keeps its own shape: clipping it to the bubble's radii
+          // would round a sticker's corners off.
+          overflow: bare ? 'visible' : 'hidden',
         },
         bubbleStyle,
       ]}

package/src/message-bubble/types.ts

@@ -17,16 +17,22 @@ export type MessagePosition = 'single' | 'first' | 'middle' | 'last';
  * How the `media` slot is fitted inside the bubble.
  *
  *   bleed   the bubble's padding is CANCELLED and the block runs to the radius
- *           — a photo, a video, an album, a sticker: something with its own
- *           edge, which an inset would frame twice
+ *           — a photo, a video, an album: something with its own edge, which
+ *           an inset would frame twice
  *   inset   the block keeps the bubble's padding — a poll, a place, a contact
  *           card: typography with no padding of its own, which bled means a
  *           question clipped against the top edge and an avatar on the left one
+ *   bare    NO bubble at all — no fill, border, padding or tail — for a
+ *           media-only message whose block is its own shape: a sticker. A
+ *           sticker drawn inside a bubble is a picture of a sticker, and the
+ *           fill turns its cut-out into a square. With text beside the media
+ *           this falls back to `bleed`, because the text needs a surface.
  *
- * It also decides where the meta row lands by default: over a bled block on a
- * translucent pill, under an inset one where it cannot cover a line of text.
+ * It also decides where the meta row lands by default: over a bled or bare
+ * block on a translucent pill, under an inset one where it cannot cover a line
+ * of text.
  */
-export type MessageMediaFit = 'bleed' | 'inset';
+export type MessageMediaFit = 'bleed' | 'inset' | 'bare';
 
 /** A text span the bubble hands back to the caller to render. */
 export type MessageEntityType = 'link' | 'mention' | 'hashtag';
@@ -102,7 +108,8 @@ export interface MessageBubbleProps {
   /**
    * How `media` is fitted. Default `'bleed'` — today's photo. Pass `'inset'`
    * for a block that draws no padding of its own (`PollMessage`,
-   * `LocationMessage`, `ContactMessage`). See {@link MessageMediaFit}.
+   * `LocationMessage`, `ContactMessage`), and `'bare'` for a sticker, which
+   * draws no bubble at all. See {@link MessageMediaFit}.
    */
   mediaFit?: MessageMediaFit;
   /**

package/src/message-media/StickerMessage.tsx

@@ -18,7 +18,7 @@ const TRANSPARENT = 'transparent';
  *
  * IT DRAWS NO SURFACE AT ALL — no background, no radius, no padding — because a
  * sticker with a bubble behind it is a picture of a sticker. The shell renders it
- * with `variant="bare"`, which is `message-bubble`'s no-chrome mode; a bubble
+ * with `mediaFit="bare"`, which is `message-bubble`'s no-chrome mode; a bubble
  * around one would also put a scrim behind the transparent parts and turn a
  * cut-out into a square.
  *