@krizaka/ui 3.28.0 → 3.29.0

package/dist/native.d.ts

@@ -385,8 +385,10 @@ type MessageBubbleLabels = {
     retry?: string;
 };
 type MessageBubbleProps = {
-    /** The text. */
-    text: string;
+    /** The text. Optional when `children` is given (then it is only the bubble's spoken name). */
+    text?: string;
+    /** Rich content in the bubble's shape instead of `text` — a model's answer in `Markdown`. */
+    children?: React$1.ReactNode;
     /** Yours (right, in the accent) or theirs (left). */
     mine?: boolean;
     /** The time, written by the app (“14:02”). */
@@ -407,7 +409,7 @@ type MessageBubbleProps = {
     style?: StyleProp<ViewStyle>;
 };
 /** A message: yours in the accent on the right, theirs on the left, the time inside, the receipt under the last of yours. */
-declare function MessageBubble({ text, mine, time, status, showStatus, context, onRetry, grouped, labels, style }: MessageBubbleProps): React$1.JSX.Element;
+declare function MessageBubble({ text, children, mine, time, status, showStatus, context, onRetry, grouped, labels, style }: MessageBubbleProps): React$1.JSX.Element;
 type TypingIndicatorProps = {
     /** What is said to screen readers and shown beside the dots (“Elena is typing”) — passed translated. */
     label: string;
@@ -433,13 +435,27 @@ type MessageComposerProps = {
     leading?: React$1.ReactNode;
     /** Cannot write (blocked, read-only): the reason in its place. */
     disabledReason?: string;
+    /** A line above the input: a `ComposerMeta` (the model chip, a status), shown only when the app computes it true. */
+    meta?: React$1.ReactNode;
     /** The longest message. Default 4000. */
     maxLength?: number;
     /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
 };
 /** Where a message is written: a growing input, an attach slot, a send button that wakes when there is something to send. */
-declare function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, maxLength, style }: MessageComposerProps): React$1.JSX.Element;
+declare function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, meta, maxLength, style }: MessageComposerProps): React$1.JSX.Element;
+type ComposerMetaProps = {
+    /** The model in use: a chip that opens a choice. */
+    model?: {
+        label: string;
+        onPress: () => void;
+        accessibilityLabel?: string;
+    };
+    /** A status line with a shield ("0 bytes left your network"): pass it only when the app computes it true. */
+    status?: string;
+};
+/** The line above a `MessageComposer`: the model chip and, only when true, a status line with a shield. */
+declare function ComposerMeta({ model, status }: ComposerMetaProps): React$1.JSX.Element | null;
 type ConversationItemProps = {
     /** The other person's name. */
     name: string;
@@ -2529,4 +2545,4 @@ declare function YomizakaMark({ size, animated, title, neutral }: NativeMarkProp
  */
 declare function YororisMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
 
-export { ActionSheet, type ActionSheetAction, type ActionSheetProps, type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityTone, AkinazaMark, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, BrandedRefresh, type BrandedRefreshProps, type BrandedRefreshScrollProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, ConversationItem, type ConversationItemProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, type DefaultAvatar, type DefaultAvatarBrand, type DescriptionItem, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, ErrorState, Fab, type FabProps, ForceUpdateScreen, type ForceUpdateScreenProps, GoalGauge, type GoalGaugeProps, type GridPhoto, type HapticKind, Header, type HeaderProps, IconButton, type IconButtonProps, ImageViewer, type ImageViewerProps, type Insets, KachizakaMark, KrizakaMark, Loader, LoaderGlyph, type LoaderGlyphProps, type LoaderProps, LoadingState, MaintenanceScreen, type MaintenanceScreenProps, Mascot, type MascotProps, MascotState, type MascotStateProps, MatchDialog, type MatchDialogProps, MessageBubble, type MessageBubbleLabels, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessageStatus, MetaRow, type MetaRowProps, Meter, type MeterPart, type MeterProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, NumberTicker, type NumberTickerProps, Onboarding, type OnboardingProps, type OnboardingSlide, OrazakaMark, OrochiaMark, OtpInput, type OtpInputProps, Pagination, type PaginationLabels, type PaginationProps, PermissionPrompt, type PermissionPromptProps, type PermissionStatus, PersonCard, type PersonCardProps, Phoenix, type PhoenixProps, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, Screen, type ScreenProps, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, SettingsGroup, type SettingsGroupProps, SettingsRow, type SettingsRowProps, Sheet, type SheetProps, Showcase, type ShowcaseLabels, type ShowcaseProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, SplashHandoff, type SplashHandoffProps, type Step, StepProgress, type StepProgressProps, type StepStatus, Stepper, type StepperProps, SuccessState, type SwipeAction, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, SwipeableRow, type SwipeableRowProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type TagOption, TagSelector, type TagSelectorProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, TypingIndicator, type TypingIndicatorProps, UpdatePrompt, type UpdatePromptProps, VerifiedBadge, type VerifiedBadgeProps, type ViewerImage, Waveform, type WaveformProps, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YasakiaMark, YazakiaMark, YomizakaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, defaultAvatarUrl, formatTime, isRealDate, latestBirthDate, monthNames, prefetchNeighbours, showcaseLabels, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCollapsingHeader, useCountdown, useDelayedWait, useReducedMotion, useTheme, uses12Hours };
+export { ActionSheet, type ActionSheetAction, type ActionSheetProps, type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityTone, AkinazaMark, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, BrandedRefresh, type BrandedRefreshProps, type BrandedRefreshScrollProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, ComposerMeta, type ComposerMetaProps, ConversationItem, type ConversationItemProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, type DefaultAvatar, type DefaultAvatarBrand, type DescriptionItem, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, ErrorState, Fab, type FabProps, ForceUpdateScreen, type ForceUpdateScreenProps, GoalGauge, type GoalGaugeProps, type GridPhoto, type HapticKind, Header, type HeaderProps, IconButton, type IconButtonProps, ImageViewer, type ImageViewerProps, type Insets, KachizakaMark, KrizakaMark, Loader, LoaderGlyph, type LoaderGlyphProps, type LoaderProps, LoadingState, MaintenanceScreen, type MaintenanceScreenProps, Mascot, type MascotProps, MascotState, type MascotStateProps, MatchDialog, type MatchDialogProps, MessageBubble, type MessageBubbleLabels, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessageStatus, MetaRow, type MetaRowProps, Meter, type MeterPart, type MeterProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, NumberTicker, type NumberTickerProps, Onboarding, type OnboardingProps, type OnboardingSlide, OrazakaMark, OrochiaMark, OtpInput, type OtpInputProps, Pagination, type PaginationLabels, type PaginationProps, PermissionPrompt, type PermissionPromptProps, type PermissionStatus, PersonCard, type PersonCardProps, Phoenix, type PhoenixProps, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, Screen, type ScreenProps, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, SettingsGroup, type SettingsGroupProps, SettingsRow, type SettingsRowProps, Sheet, type SheetProps, Showcase, type ShowcaseLabels, type ShowcaseProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, SplashHandoff, type SplashHandoffProps, type Step, StepProgress, type StepProgressProps, type StepStatus, Stepper, type StepperProps, SuccessState, type SwipeAction, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, SwipeableRow, type SwipeableRowProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type TagOption, TagSelector, type TagSelectorProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, TypingIndicator, type TypingIndicatorProps, UpdatePrompt, type UpdatePromptProps, VerifiedBadge, type VerifiedBadgeProps, type ViewerImage, Waveform, type WaveformProps, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YasakiaMark, YazakiaMark, YomizakaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, defaultAvatarUrl, formatTime, isRealDate, latestBirthDate, monthNames, prefetchNeighbours, showcaseLabels, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCollapsingHeader, useCountdown, useDelayedWait, useReducedMotion, useTheme, uses12Hours };

package/dist/native.js

@@ -1304,7 +1304,7 @@ import { Animated as Animated3, Easing as Easing2, Pressable as Pressable4, Styl
 import Svg4, { Path as Path2 } from "react-native-svg";
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var STATUS = { sending: "Sending", sent: "Sent", delivered: "Delivered", read: "Read", failed: "Not sent" };
-function MessageBubble({ text, mine, time, status, showStatus, context, onRetry, grouped = "single", labels, style }) {
+function MessageBubble({ text, children, mine, time, status, showStatus, context, onRetry, grouped = "single", labels, style }) {
   const { theme, radius: radius3 } = useTheme();
   const words2 = { ...STATUS, ...labels?.status };
   const failed = status === "failed";
@@ -1323,12 +1323,13 @@ function MessageBubble({ text, mine, time, status, showStatus, context, onRetry,
       ],
       children: [
         context ? /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: mine ? "onAccent" : "secondary", style: styles8.context, children: context }) : null,
-        /* @__PURE__ */ jsx10(Txt, { tone: tone3, children: text }),
+        children ?? /* @__PURE__ */ jsx10(Txt, { tone: tone3, children: text }),
         time ? /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: tone3, style: styles8.time, children: time }) : null
       ]
     }
   );
-  const name = [text, time, failed ? `${words2.failed}. ${labels?.retry ?? ""}` : null].filter(Boolean).join(", ");
+  const rich = children !== void 0 && !text;
+  const name = rich && !failed ? void 0 : [text, time, failed ? `${words2.failed}. ${labels?.retry ?? ""}` : null].filter(Boolean).join(", ");
   return /* @__PURE__ */ jsxs7(View7, { style: [styles8.row, mine ? styles8.mine : styles8.theirs, style], children: [
     failed && onRetry ? /* @__PURE__ */ jsx10(Pressable4, { role: "button", "aria-label": name, onPress: onRetry, style: styles8.max, children: bubble }) : /* @__PURE__ */ jsx10(View7, { accessible: true, "aria-label": name, style: styles8.max, children: bubble }),
     showStatus && status ? /* @__PURE__ */ jsxs7(View7, { style: styles8.status, children: [
@@ -1362,40 +1363,66 @@ function TypingIndicator({ label, showLabel, style }) {
     showLabel ? /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: "secondary", children: label }) : null
   ] });
 }
-function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, maxLength = 4e3, style }) {
+function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, meta, maxLength = 4e3, style }) {
   const { theme, radius: radius3, insets, haptic } = useTheme();
   const ready = value.trim().length > 0;
-  return /* @__PURE__ */ jsx10(View7, { style: [styles8.composer, { borderTopColor: theme.borderSubtle, backgroundColor: theme.surface0, paddingBottom: 8 + insets.bottom }, style], children: disabledReason ? /* @__PURE__ */ jsx10(Txt, { tone: "secondary", style: styles8.flex, children: disabledReason }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    leading,
-    /* @__PURE__ */ jsx10(
-      TextInput,
-      {
-        "aria-label": placeholder,
-        value,
-        onChangeText: onValueChange,
-        placeholder,
-        placeholderTextColor: theme.textMuted,
-        multiline: true,
-        maxLength,
-        style: [styles8.input, { borderRadius: radius3.xl, borderColor: theme.borderDefault, backgroundColor: theme.surface1, color: theme.textPrimary }]
-      }
-    ),
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs7(View7, { style: [styles8.composerBox, { borderTopColor: theme.borderSubtle, backgroundColor: theme.surface0, paddingBottom: 8 + insets.bottom }, style], children: [
+    meta && !disabledReason ? /* @__PURE__ */ jsx10(View7, { style: styles8.meta, children: meta }) : null,
+    /* @__PURE__ */ jsx10(View7, { style: styles8.composer, children: disabledReason ? /* @__PURE__ */ jsx10(Txt, { tone: "secondary", style: styles8.flex, children: disabledReason }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      leading,
+      /* @__PURE__ */ jsx10(
+        TextInput,
+        {
+          "aria-label": placeholder,
+          value,
+          onChangeText: onValueChange,
+          placeholder,
+          placeholderTextColor: theme.textMuted,
+          multiline: true,
+          maxLength,
+          style: [styles8.input, { borderRadius: radius3.xl, borderColor: theme.borderDefault, backgroundColor: theme.surface1, color: theme.textPrimary }]
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Pressable4,
+        {
+          role: "button",
+          "aria-label": sendLabel,
+          "aria-disabled": !ready,
+          disabled: !ready,
+          onPress: () => {
+            haptic("impact");
+            onSend();
+          },
+          style: ({ pressed }) => [styles8.send, { backgroundColor: ready ? pressed ? theme.accentHover : theme.accent : theme.surface3 }],
+          children: /* @__PURE__ */ jsx10(Svg4, { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: "M4 12l16-8-6 16-2.5-6.5L4 12z", fill: ready ? theme.onAccent : theme.textMuted }) })
+        }
+      )
+    ] }) })
+  ] });
+}
+function ComposerMeta({ model, status }) {
+  const { theme } = useTheme();
+  if (!model && !status) return null;
+  return /* @__PURE__ */ jsxs7(View7, { style: styles8.metaRow, children: [
+    model ? /* @__PURE__ */ jsxs7(
       Pressable4,
       {
         role: "button",
-        "aria-label": sendLabel,
-        "aria-disabled": !ready,
-        disabled: !ready,
-        onPress: () => {
-          haptic("impact");
-          onSend();
-        },
-        style: ({ pressed }) => [styles8.send, { backgroundColor: ready ? pressed ? theme.accentHover : theme.accent : theme.surface3 }],
-        children: /* @__PURE__ */ jsx10(Svg4, { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: "M4 12l16-8-6 16-2.5-6.5L4 12z", fill: ready ? theme.onAccent : theme.textMuted }) })
+        "aria-label": model.accessibilityLabel ?? model.label,
+        onPress: model.onPress,
+        style: ({ pressed }) => [styles8.modelChip, { borderColor: theme.borderDefault, backgroundColor: pressed ? theme.surface3 : theme.surface1 }],
+        children: [
+          /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: "secondary", style: styles8.bold, children: model.label }),
+          /* @__PURE__ */ jsx10(Svg4, { width: 12, height: 12, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: "m6 9 6 6 6-6", fill: "none", stroke: theme.textMuted, strokeWidth: 2.4, strokeLinecap: "round", strokeLinejoin: "round" }) })
+        ]
       }
-    )
-  ] }) });
+    ) : null,
+    status ? /* @__PURE__ */ jsxs7(View7, { style: styles8.statusLine, children: [
+      /* @__PURE__ */ jsx10(Svg4, { width: 14, height: 14, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: "M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3z", fill: "none", stroke: theme.successText, strokeWidth: 2, strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: "success", children: status })
+    ] }) : null
+  ] });
 }
 function ConversationItem({ name, avatar, presence, presenceLabel, preview, typing, time, unread = 0, unreadLabel, onPress, style }) {
   const { theme, radius: radius3 } = useTheme();
@@ -1436,7 +1463,12 @@ var styles8 = StyleSheet8.create({
   typingRow: { flexDirection: "row", alignItems: "center", gap: 8, alignSelf: "flex-start" },
   typing: { flexDirection: "row", gap: 4, paddingHorizontal: 14, paddingVertical: 12 },
   dot: { width: 7, height: 7, borderRadius: 4 },
-  composer: { flexDirection: "row", alignItems: "flex-end", gap: 8, paddingHorizontal: 12, paddingTop: 8, borderTopWidth: StyleSheet8.hairlineWidth },
+  composerBox: { paddingTop: 8, borderTopWidth: StyleSheet8.hairlineWidth },
+  composer: { flexDirection: "row", alignItems: "flex-end", gap: 8, paddingHorizontal: 12 },
+  meta: { paddingHorizontal: 12, paddingBottom: 6 },
+  metaRow: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 },
+  modelChip: { flexDirection: "row", alignItems: "center", gap: 4, minHeight: 32, paddingHorizontal: 10, borderRadius: 16, borderWidth: StyleSheet8.hairlineWidth },
+  statusLine: { flexDirection: "row", alignItems: "center", gap: 4 },
   input: { flex: 1, maxHeight: 120, minHeight: 40, borderWidth: 1, paddingHorizontal: 14, paddingTop: 10, paddingBottom: 10, fontSize: 16 },
   send: { width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center" },
   flex: { flex: 1 },
@@ -6133,6 +6165,7 @@ export {
   Checkbox,
   Chip,
   Combobox,
+  ComposerMeta,
   ConversationItem,
   Countdown,
   DateField,