@unif/react-native-chat 2.2.0 → 3.1.0

package/lib/typescript/src/components/MessageList/styles.d.ts

@@ -1,4 +1,5 @@
-export declare const styles: Readonly<{
+import type { ColorTokens, ShadowTokens } from '@unif/react-native-design';
+export declare const createStyles: (colors: ColorTokens, shadows: ShadowTokens) => Readonly<{
     root: {
         flex: number;
         minHeight: number;
@@ -11,6 +12,30 @@ export declare const styles: Readonly<{
         position: "absolute";
         bottom: number;
         alignSelf: "center";
+        width: number;
+        height: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    returnProgress: Readonly<{
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }>;
+    returnButton: {
+        shadowColor: string;
+        shadowOffset: {
+            readonly width: number;
+            readonly height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        alignSelf: "center";
+        borderRadius: number;
+        backgroundColor: string;
     };
 }>;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/MessageList/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;EAIjB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC3E,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW,EAAE,SAAS,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBnE,CAAC"}

package/lib/typescript/src/components/MessageList/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
 export interface MessageListScrollOptions {
     animated?: boolean;
 }
@@ -19,11 +19,15 @@ export interface MessageListProps<T> {
     followOutput?: 'whenAtEnd' | 'never';
     endThreshold?: number;
     showScrollToEnd?: boolean;
+    /** 外部仍在生成内容时显示返回入口的进度外环，不影响滚动操作。 */
+    scrollToEndBusy?: boolean;
     onAtEndChange?(atEnd: boolean): void;
     hasEarlier?: boolean;
     loadingEarlier?: boolean;
     onRequestEarlier?(): void;
-    keyboardDismissMode?: 'none' | 'on-drag';
+    keyboardDismissMode?: ScrollViewProps['keyboardDismissMode'];
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    showsVerticalScrollIndicator?: boolean;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/src/components/MessageList/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;CACvD;AACD,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC;IAC9B,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC;IAClD,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAClC,YAAY,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,IAAI,IAAI,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AACD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;CACzB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;CACvD;AACD,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC;IAC9B,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC;IAClD,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAClC,YAAY,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oCAAoC;IACpC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,IAAI,IAAI,CAAC;IAC1B,mBAAmB,CAAC,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC7D,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AACD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;CACzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-chat",
-  "version": "2.2.0",
+  "version": "3.1.0",
   "description": "Unif React Native 聊天组件：消息、输入、附件和交互展示",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -55,6 +55,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",
+    "@callstack/liquid-glass": "0.8.2",
     "@commitlint/config-conventional": "^21.2.0",
     "@eslint/compat": "^2.1.0",
     "@eslint/eslintrc": "^3.3.6",
@@ -65,10 +66,9 @@
     "@react-native/jest-preset": "0.86.3",
     "@react-native/metro-config": "0.86.3",
     "@release-it/conventional-changelog": "^12.0.0",
-    "@sbaiahmed1/react-native-blur": "6.0.1",
     "@testing-library/react-native": "13.3.3",
     "@types/react": "^19.2.0",
-    "@unif/react-native-design": "0.34.0",
+    "@unif/react-native-design": "0.36.0",
     "commitlint": "^21.2.1",
     "del-cli": "^7.0.0",
     "eslint": "^9.39.5",
@@ -96,7 +96,7 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "@unif/react-native-design": "^0.34.0",
+    "@unif/react-native-design": "^0.36.0",
     "react": ">=19.2.3 <20.0.0",
     "react-native": ">=0.86.0",
     "react-native-svg": ">=15"

package/src/components/Composer/Composer.tsx

@@ -22,6 +22,7 @@ import {
 } from './constants';
 import { ComposerIconAction } from './ComposerIconAction';
 import { ComposerMenuItem } from './ComposerMenuItem';
+import { ComposerVoiceWave } from './ComposerVoiceWave';
 import { createStyles } from './styles';
 import type { ComposerHandle, ComposerProps } from './types';
 
@@ -122,7 +123,9 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
           }
         }}
       >
-        {header != null ? <View style={styles.accessory}>{header}</View> : null}
+        {header != null ? (
+          <View style={[styles.accessory, styles.header]}>{header}</View>
+        ) : null}
         {menuOpen && !disabled && !voiceActive && actions.length > 0 ? (
           <>
             <Pressable
@@ -175,6 +178,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
             <Textarea
               ref={inputRef}
               surface="plain"
+              contentAlignment="center"
               value={value}
               onChangeText={onChangeText}
               editable={editable}
@@ -247,19 +251,22 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
               disabled={disabled || voice.disabled}
               onPress={voice.onCancel}
             />
-            <Text
-              numberOfLines={1}
-              ellipsizeMode="head"
-              style={[
-                styles.transcript,
-                !voice.transcript && styles.transcriptPlaceholder,
-              ]}
-              accessibilityLiveRegion="polite"
-            >
-              {voice.status === 'starting'
-                ? VOICE_LABELS.starting
-                : voice.transcript || VOICE_LABELS[voice.status]}
-            </Text>
+            <View style={styles.voiceBody}>
+              {voice.status !== 'starting' ? <ComposerVoiceWave /> : null}
+              <Text
+                numberOfLines={1}
+                ellipsizeMode="head"
+                style={[
+                  styles.transcript,
+                  !voice.transcript && styles.transcriptPlaceholder,
+                ]}
+                accessibilityLiveRegion="polite"
+              >
+                {voice.status === 'starting'
+                  ? VOICE_LABELS.starting
+                  : voice.transcript || VOICE_LABELS[voice.status]}
+              </Text>
+            </View>
             {voice.status === 'listening' ? (
               <ComposerIconAction
                 icon="stop"

package/src/components/Composer/ComposerIconAction.tsx

@@ -3,6 +3,7 @@ import { Icon, useColors, useThemedStyles } from '@unif/react-native-design';
 import {
   COMPOSER_ACTION_ICON_SIZE,
   COMPOSER_PRIMARY_ICON_SIZE,
+  COMPOSER_CANCEL_ICON_SIZE,
 } from './constants';
 import { createStyles } from './styles';
 import { useMousePress } from './useMousePress';
@@ -56,7 +57,11 @@ export function ComposerIconAction({
             <Icon
               name={icon}
               size={
-                primary ? COMPOSER_PRIMARY_ICON_SIZE : COMPOSER_ACTION_ICON_SIZE
+                primary
+                  ? COMPOSER_PRIMARY_ICON_SIZE
+                  : visual === 'cancel'
+                    ? COMPOSER_CANCEL_ICON_SIZE
+                    : COMPOSER_ACTION_ICON_SIZE
               }
               color={color}
               style={

package/src/components/Composer/ComposerVoiceWave.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import { Animated, Easing, Platform, View } from 'react-native';
+import {
+  usePrefersReducedMotion,
+  useThemedStyles,
+} from '@unif/react-native-design';
+import {
+  COMPOSER_VOICE_WAVE_PATTERN,
+  COMPOSER_VOICE_WAVE_STAGGER_MS,
+} from './constants';
+import { createStyles } from './styles';
+
+export function ComposerVoiceWave() {
+  const styles = useThemedStyles(createStyles);
+  const reducedMotion = usePrefersReducedMotion();
+  const [values] = useState(() =>
+    COMPOSER_VOICE_WAVE_PATTERN.map(
+      (group) => new Animated.Value(group.from / Math.max(group.from, group.to))
+    )
+  );
+  useEffect(() => {
+    const animations = COMPOSER_VOICE_WAVE_PATTERN.map((group, index) => {
+      const value = values[index]!;
+      const maximum = Math.max(group.from, group.to);
+      value.setValue((reducedMotion ? group.to : group.from) / maximum);
+      return Animated.sequence([
+        Animated.delay(index * COMPOSER_VOICE_WAVE_STAGGER_MS),
+        Animated.loop(
+          Animated.sequence(
+            [group.to, group.from].map((height) =>
+              Animated.timing(value, {
+                toValue: height / maximum,
+                duration: group.duration / 2,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: Platform.OS !== 'web',
+              })
+            )
+          )
+        ),
+      ]);
+    });
+    if (!reducedMotion) animations.forEach((animation) => animation.start());
+    return () => animations.forEach((animation) => animation.stop());
+    // 波形规格固定，输入文字更新不重启装饰动画。
+  }, [reducedMotion, values]);
+  return (
+    <View
+      style={styles.wave}
+      pointerEvents="none"
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    >
+      {COMPOSER_VOICE_WAVE_PATTERN.map((group, index) => (
+        <Animated.View
+          key={index}
+          style={[
+            styles.waveBar,
+            {
+              height: Math.max(group.from, group.to),
+              transform: [{ scaleY: values[index]! }],
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+}

package/src/components/Composer/constants.ts

@@ -2,10 +2,23 @@ import { space, type } from '@unif/react-native-design';
 
 export const COMPOSER_INPUT_LINE_HEIGHT = Math.round(type.body * 1.4);
 export const COMPOSER_INPUT_MAX_LINES = 4;
-export const COMPOSER_PLAIN_VERTICAL_INSET = 2 * space[4];
+export const COMPOSER_PLAIN_VERTICAL_INSET = 2 * space[3];
 export const COMPOSER_ACTION_VISUAL_SIZE = 34;
 export const COMPOSER_ACTION_ICON_SIZE = 22;
 export const COMPOSER_PRIMARY_ICON_SIZE = 18;
+export const COMPOSER_CANCEL_ICON_SIZE = 20;
+export const COMPOSER_VOICE_WAVE_COUNT = 5;
+export const COMPOSER_VOICE_WAVE_STAGGER_MS = 90;
+export const COMPOSER_VOICE_WAVE_GROUPS = [
+  { from: 6, to: 20, duration: 1100 },
+  { from: 14, to: 5, duration: 1000 },
+  { from: 8, to: 18, duration: 900 },
+] as const;
+export const COMPOSER_VOICE_WAVE_PATTERN = Array.from(
+  { length: COMPOSER_VOICE_WAVE_COUNT },
+  (_, index) =>
+    COMPOSER_VOICE_WAVE_GROUPS[index % COMPOSER_VOICE_WAVE_GROUPS.length]!
+);
 export const COMPOSER_MENU_ICON_CONTAINER_SIZE = 40;
 export const COMPOSER_MENU_ICON_SIZE = 20;
 export const PRIMARY_LABELS = {

package/src/components/Composer/styles.ts

@@ -17,6 +17,10 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
       ...shadows.card,
     },
     accessory: { padding: space[3] },
+    header: {
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.outlineVariant,
+    },
     regular: {
       flexDirection: 'row',
       alignItems: 'flex-end',
@@ -26,7 +30,12 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
     },
     expanded: { flexDirection: 'column', alignItems: 'stretch', gap: 0 },
     hidden: { display: 'none' },
-    input: { flex: 1, minWidth: 0 },
+    input: {
+      flex: 1,
+      minWidth: 0,
+      alignSelf: 'stretch',
+      justifyContent: 'center',
+    },
     inputExpanded: { flex: 0, width: '100%' },
     // 保持原生堆叠特征稳定，避免聚焦展开时重排输入所在的原生视图树。
     more: { width: fixed.hitTarget, height: fixed.hitTarget, zIndex: 1 },
@@ -119,11 +128,13 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
     voice: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: space[2],
+      gap: space[3],
       paddingVertical: space[1],
       paddingHorizontal: space[2],
       borderRadius: radius['3xl'],
       backgroundColor: colors.primaryContainerSubtle,
+      borderWidth: 0.5,
+      borderColor: colors.brandTint14,
     },
     transcript: {
       flex: 1,
@@ -131,5 +142,15 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
       color: colors.foreground,
       fontSize: type.body,
     },
+    voiceBody: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[4],
+      minHeight: r(34),
+    },
+    wave: { flexDirection: 'row', alignItems: 'center', gap: 3, height: r(20) },
+    waveBar: { width: 2.5, borderRadius: 1.5, backgroundColor: colors.primary },
     transcriptPlaceholder: { color: colors.foregroundSubtle },
   });

package/src/components/Message/MarkdownContent/MarkdownContent.tsx

@@ -8,15 +8,27 @@ import {
 import { Pressable, Text } from 'react-native';
 import { Renderer, useMarkdown } from 'react-native-marked';
 import { useTheme, useThemedStyles } from '@unif/react-native-design';
-import { createStyles } from './styles';
+import { createStyles, createOutgoingStyles } from './styles';
 import type { MarkdownContentProps, MarkdownSvgLabelProps } from './types';
 import { MarkdownImage } from './MarkdownImage/MarkdownImage';
 
-export function MarkdownContent({ text, onLinkPress }: MarkdownContentProps) {
+export function MarkdownContent({
+  text,
+  onLinkPress,
+  outgoing = false,
+}: MarkdownContentProps) {
   const { scheme } = useTheme();
-  const styles = useThemedStyles(createStyles);
+  const styles = useThemedStyles(
+    outgoing ? createOutgoingStyles : createStyles
+  );
   const markdown = useMemo(() => {
     const instance = new Renderer();
+    const renderCode = instance.code.bind(instance);
+    instance.code = (value, language, containerStyle, textStyle) =>
+      renderCode(value, language, containerStyle, {
+        ...textStyle,
+        ...styles.codeText,
+      });
     // 上游 table 节点未提供 key，保留其渲染并补齐稳定的节点身份。
     const renderTable = instance.table.bind(instance);
     instance.table = (...args) => (

package/src/components/Message/MarkdownContent/styles.ts

@@ -2,60 +2,72 @@ import { StyleSheet } from 'react-native';
 import { type, space, fontMono } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
-export const createStyles = (colors: ColorTokens) => {
+const makeMarkdownStyles = (colors: ColorTokens, outgoing: boolean) => {
+  const textColor = outgoing ? colors.onPrimary : colors.foreground;
   const body = {
-    fontSize: type.body,
-    lineHeight: type.body * 1.5,
-    color: colors.foreground,
+    fontSize: type.sm,
+    lineHeight: type.sm * 1.5,
+    color: textColor,
   };
   return StyleSheet.create({
     text: body,
     em: { ...body, fontStyle: 'italic' },
     strong: { ...body, fontWeight: 'bold' },
     strikethrough: { ...body, textDecorationLine: 'line-through' },
-    link: { ...body, color: colors.primary },
+    link: {
+      ...body,
+      color: outgoing ? colors.onPrimary : colors.primary,
+      textDecorationLine: 'underline',
+    },
     li: body,
     codespan: {
       ...body,
       fontFamily: fontMono,
+      color: colors.foreground,
       backgroundColor: colors.surfaceContainer,
     },
     h1: {
       fontSize: type.h1,
       lineHeight: type.h1 * 1.4,
-      color: colors.foreground,
+      color: textColor,
       borderBottomColor: colors.outline,
     },
     h2: {
       fontSize: type.h2,
       lineHeight: type.h2 * 1.4,
-      color: colors.foreground,
+      color: textColor,
       borderBottomColor: colors.outline,
     },
     h3: {
       fontSize: type.h3,
       lineHeight: type.h3 * 1.4,
-      color: colors.foreground,
+      color: textColor,
     },
     h4: {
       fontSize: type.body,
       lineHeight: type.body * 1.4,
-      color: colors.foreground,
+      color: textColor,
     },
     h5: {
       fontSize: type.sm,
       lineHeight: type.sm * 1.4,
-      color: colors.foreground,
+      color: textColor,
     },
     h6: {
       fontSize: type.xs,
       lineHeight: type.xs * 1.4,
-      color: colors.foreground,
+      color: textColor,
     },
     paragraph: { paddingVertical: space[1] },
     code: { padding: space[2], backgroundColor: colors.surfaceContainer },
+    codeText: { ...body, color: colors.foreground, fontFamily: fontMono },
     blockquote: { borderLeftColor: colors.outline },
     hr: { borderBottomColor: colors.outline },
     table: { borderColor: colors.outline },
   });
 };
+
+export const createStyles = (colors: ColorTokens) =>
+  makeMarkdownStyles(colors, false);
+export const createOutgoingStyles = (colors: ColorTokens) =>
+  makeMarkdownStyles(colors, true);

package/src/components/Message/MarkdownContent/types.ts

@@ -1,6 +1,7 @@
 export interface MarkdownContentProps {
   text: string;
   onLinkPress?(url: string): void;
+  outgoing?: boolean;
 }
 
 export interface MarkdownSvgLabelProps {

package/src/components/Message/Message.tsx

@@ -1,5 +1,11 @@
 import { Pressable, Text, View } from 'react-native';
-import { Button, Spinner, useThemedStyles } from '@unif/react-native-design';
+import {
+  Button,
+  IconButton,
+  Spinner,
+  useThemedStyles,
+  useColors,
+} from '@unif/react-native-design';
 import { MarkdownContent } from './MarkdownContent/MarkdownContent';
 import { createStyles } from './styles';
 import { isNestedAction } from './isNestedAction';
@@ -23,6 +29,7 @@ export function Message(props: MessageProps) {
     testID,
   } = props;
   const styles = useThemedStyles(createStyles);
+  const colors = useColors();
   const hasContent =
     Boolean(props.text?.length) ||
     (props.children !== undefined &&
@@ -47,11 +54,20 @@ export function Message(props: MessageProps) {
       {header}
       {props.text !== undefined ? (
         props.format === 'markdown' ? (
-          <MarkdownContent text={props.text} onLinkPress={props.onLinkPress} />
+          <MarkdownContent
+            text={props.text}
+            onLinkPress={props.onLinkPress}
+            outgoing={surface === 'bubble' && placement === 'end'}
+          />
         ) : (
           <Text
             selectable
-            style={styles.text}
+            style={[
+              styles.text,
+              surface === 'bubble' &&
+                placement === 'end' &&
+                styles.outgoingText,
+            ]}
             numberOfLines={props.numberOfLines}
           >
             {props.text}
@@ -117,18 +133,33 @@ export function Message(props: MessageProps) {
         )}
         {actions.length ? (
           <View style={styles.actions}>
-            {actions.map((action) => (
-              <Button
-                key={action.id}
-                label={action.label}
-                leftIcon={action.icon}
-                disabled={action.disabled}
-                loading={action.loading}
-                accessibilityHint={action.accessibilityHint}
-                variant="text"
-                onPress={action.onPress}
-              />
-            ))}
+            {actions.map((action) =>
+              action.icon ? (
+                <IconButton
+                  key={action.id}
+                  icon={action.icon}
+                  size="sm"
+                  variant="ghost"
+                  color={colors.foregroundSubtle}
+                  accessibilityLabel={action.label}
+                  accessibilityHint={action.accessibilityHint}
+                  disabled={action.disabled}
+                  loading={action.loading}
+                  onPress={action.onPress}
+                />
+              ) : (
+                <Button
+                  key={action.id}
+                  label={action.label}
+                  leftIcon={action.icon}
+                  disabled={action.disabled}
+                  loading={action.loading}
+                  accessibilityHint={action.accessibilityHint}
+                  variant="text"
+                  onPress={action.onPress}
+                />
+              )
+            )}
           </View>
         ) : null}
       </View>

package/src/components/Message/styles.ts

@@ -7,36 +7,47 @@ export const createStyles = (colors: ColorTokens) =>
     root: {
       flexDirection: 'row',
       alignItems: 'flex-start',
-      gap: space[2],
+      gap: space[3],
       minWidth: 0,
-      paddingVertical: space[2],
     },
     end: { flexDirection: 'row-reverse' },
     column: {
-      flexShrink: 1,
+      flex: 1,
       maxWidth: '100%',
       gap: space[1],
       alignItems: 'flex-start',
     },
     columnEnd: { alignItems: 'flex-end' },
-    fullWidth: { flex: 1, alignSelf: 'stretch' },
-    content: { minWidth: 0, maxWidth: '100%', gap: space[2] },
+    fullWidth: { alignSelf: 'stretch', maxWidth: '100%' },
+    content: { minWidth: 0, maxWidth: '78%', gap: space[2] },
     bubble: {
-      padding: space[3],
-      borderRadius: radius.lg,
+      paddingHorizontal: space[5],
+      paddingVertical: space[4],
+      borderRadius: radius['2xl'],
       backgroundColor: colors.surface,
     },
-    outgoing: { backgroundColor: colors.primaryContainer },
+    outgoing: { backgroundColor: colors.primary },
+    outgoingText: { color: colors.onPrimary },
     outlined: {
-      padding: space[3],
-      borderRadius: radius.lg,
+      paddingHorizontal: space[5],
+      paddingVertical: space[4],
+      borderRadius: radius['2xl'],
       borderWidth: 1,
       borderColor: colors.outline,
     },
     failed: { borderWidth: 1, borderColor: colors.error },
-    text: { fontSize: type.body, color: colors.foreground },
+    text: {
+      fontSize: type.sm,
+      lineHeight: type.sm * 1.5,
+      color: colors.foreground,
+    },
     name: { fontSize: type.sm, color: colors.foregroundMuted },
     status: { fontSize: type.sm, color: colors.foregroundMuted },
     errorText: { color: colors.error },
-    actions: { flexDirection: 'row', flexWrap: 'wrap', gap: space[2] },
+    actions: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: space[1],
+      marginTop: space[1],
+    },
   });