@unif/react-native-chat 3.2.4 → 3.3.1

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

@@ -6,21 +6,26 @@ export interface ProcessStep {
     id: string;
     title: string;
     status: ProcessStepStatus;
+    /** 调用者提供的状态显示文案；不改变 status 的语义。 */
+    statusText?: string;
     description?: string;
     elapsedMs?: number;
     details?: ReactNode;
     actions?: readonly ChatAction[];
 }
 export interface ProcessBaseProps {
-    /** card 为完整步骤面板；compact 为可整行展开、有界详情的轻量过程展示。 */
-    variant?: 'card' | 'compact';
+    /** card 为状态面板；compact 为单行过程；timeline 为带状态节点的连续步骤。 */
+    variant?: 'card' | 'compact' | 'timeline';
     steps: readonly ProcessStep[];
     title?: string;
     identity?: ReactNode;
+    /** inline 仅用于 compact 单项，让身份与状态处于同一行。 */
+    identityPlacement?: 'heading' | 'inline';
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
 export interface ProcessCompactStepProps {
+    identity?: ReactNode;
     step: ProcessStep;
     expanded: boolean;
     elapsed?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAe,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAC3B,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,iBAAiB,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,gBAAgB;IAC/B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC,gBAAgB,CAAC,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,CAAC,0BAA0B,GAAG,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAe,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAC3B,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,iBAAiB,CAAC;IAC1B,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1C,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC,gBAAgB,CAAC,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,CAAC,0BAA0B,GAAG,qBAAqB,CAAC,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -6,7 +6,7 @@ export type { AttachmentsProps, ChatAttachmentItem, ChatAttachmentStatus, } from
 export { Message } from './components/Message/index.js';
 export type { MessageBaseProps, MessageCustomContent, MessageMarkdownContent, MessagePlainContent, MessagePlacement, MessageProps, MessageStatus, } from './components/Message/index.js';
 export { MessageList } from './components/MessageList/index.js';
-export type { MessageListHandle, MessageListProps, MessageListScrollOptions, } from './components/MessageList/index.js';
+export type { MessageListAnchorOptions, MessageListHandle, MessageListProps, MessageListScrollOptions, } from './components/MessageList/index.js';
 export { Chat } from './components/Chat/index.js';
 export type { ChatProps } from './components/Chat/index.js';
 export { Suggestions } from './components/Suggestions/index.js';

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAW,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAuB,CAAC;AACjD,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,gCAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAA0B,CAAC;AACvD,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,mCAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,+BAAsB,CAAC;AAC/C,YAAY,EACV,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,EACZ,aAAa,GACd,MAAM,+BAAsB,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAA0B,CAAC;AACvD,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,mCAA0B,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,4BAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,4BAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,mCAA0B,CAAC;AACvD,YAAY,EACV,cAAc,EACd,gBAAgB,GACjB,MAAM,mCAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,oCAA2B,CAAC;AACzD,YAAY,EACV,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,oCAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,+BAAsB,CAAC;AAC/C,YAAY,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,qBAAqB,EACrB,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,MAAM,+BAAsB,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAAiC,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,0CAAiC,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gCAAuB,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAAsB,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,+BAAsB,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,gCAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAW,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAuB,CAAC;AACjD,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,gCAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAA0B,CAAC;AACvD,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,mCAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,+BAAsB,CAAC;AAC/C,YAAY,EACV,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,EACZ,aAAa,GACd,MAAM,+BAAsB,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAA0B,CAAC;AACvD,YAAY,EACV,wBAAwB,EACxB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,mCAA0B,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,4BAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,4BAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,mCAA0B,CAAC;AACvD,YAAY,EACV,cAAc,EACd,gBAAgB,GACjB,MAAM,mCAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,oCAA2B,CAAC;AACzD,YAAY,EACV,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,oCAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,+BAAsB,CAAC;AAC/C,YAAY,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,qBAAqB,EACrB,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,MAAM,+BAAsB,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAAiC,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,0CAAiC,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gCAAuB,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAAsB,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,+BAAsB,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,gCAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-chat",
-  "version": "3.2.4",
+  "version": "3.3.1",
   "description": "Unif React Native 聊天组件：消息、输入、附件和交互展示",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/Attachments/AttachmentItem.tsx

@@ -13,6 +13,7 @@ import {
 import {
   ATTACHMENT_ICONS,
   ATTACHMENT_STATUS_OWNER_SIZE,
+  ATTACHMENT_REMOVE_OWNER_SIZE,
   ROW_IMAGE_SIZE,
   STATUS_LABELS,
 } from './constants';
@@ -25,6 +26,7 @@ export function AttachmentItem({
   imageSize,
   row,
   mixed = false,
+  compact = false,
   showProgressLabel = false,
   onPreview,
   onRemove,
@@ -225,15 +227,18 @@ export function AttachmentItem({
     );
   }
 
-  const removeLeft =
-    previewable && !separatePreview
+  // 预览和重试都须保留独立命中区域，不复制参考紧凑格的中心误删问题。
+  const removeInCell = compact && !(previewable && !separatePreview) && !retry;
+  const removeLeft = removeInCell
+    ? Math.max(0, imageSize - ATTACHMENT_REMOVE_OWNER_SIZE)
+    : previewable && !separatePreview
       ? width!
       : (busy && !caption) || failed
         ? (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2 +
           ATTACHMENT_STATUS_OWNER_SIZE
-        : imageSize - ATTACHMENT_STATUS_OWNER_SIZE;
+        : imageSize - ATTACHMENT_REMOVE_OWNER_SIZE;
   const ownerWidth = removable
-    ? Math.max(width!, removeLeft + ATTACHMENT_STATUS_OWNER_SIZE)
+    ? Math.max(width!, removeLeft + ATTACHMENT_REMOVE_OWNER_SIZE)
     : width;
   const picture = (
     <>
@@ -276,7 +281,13 @@ export function AttachmentItem({
       {statusOwner}
       {removable ? (
         <Pressable
-          style={[styles.removeOwner, { left: removeLeft }]}
+          style={[
+            styles.removeOwner,
+            { left: removeLeft },
+            (removeInCell ||
+              removeLeft === imageSize - ATTACHMENT_REMOVE_OWNER_SIZE) &&
+              styles.removeInCell,
+          ]}
           accessibilityRole="button"
           accessibilityLabel={`移除${name}`}
           disabled={item.removeDisabled}

package/src/components/Attachments/Attachments.tsx

@@ -24,6 +24,7 @@ export function Attachments({
         item={item}
         row={row}
         mixed={layout === 'mixed'}
+        compact={layout === 'compact'}
         width={CARD_WIDTH}
         imageSize={
           row

package/src/components/Attachments/constants.ts

@@ -10,6 +10,7 @@ export const ATTACHMENT_STATUS_OWNER_SIZE = Math.max(
   44,
   ATTACHMENT_STATUS_SIZE
 );
+export const ATTACHMENT_REMOVE_OWNER_SIZE = 44;
 export const ATTACHMENT_ICONS: Record<
   NonNullable<ChatAttachmentItem['kind']>,
   IconName

package/src/components/Attachments/styles.ts

@@ -12,6 +12,7 @@ import type { ColorTokens } from '@unif/react-native-design';
 import {
   ATTACHMENT_STATUS_OWNER_SIZE,
   ATTACHMENT_STATUS_SIZE,
+  ATTACHMENT_REMOVE_OWNER_SIZE,
   CARD_WIDTH,
 } from './constants';
 
@@ -65,8 +66,9 @@ export const createStyles = (colors: ColorTokens) =>
       height: r(64),
       paddingVertical: 0,
       paddingHorizontal: space[3],
-      borderWidth: 0,
-      borderRadius: 0,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderRadius: radius.md,
+      backgroundColor: colors.surfaceContainerHigh,
     },
     content: { minWidth: 0, flexShrink: 1 },
     rowContent: { flex: 1 },
@@ -102,8 +104,8 @@ export const createStyles = (colors: ColorTokens) =>
     removeOwner: {
       position: 'absolute',
       top: 0,
-      width: 44,
-      height: 44,
+      width: ATTACHMENT_REMOVE_OWNER_SIZE,
+      height: ATTACHMENT_REMOVE_OWNER_SIZE,
       paddingTop: space[1],
       zIndex: 2,
       elevation: 2,
@@ -116,6 +118,7 @@ export const createStyles = (colors: ColorTokens) =>
       alignItems: 'center',
       justifyContent: 'center',
     },
+    removeInCell: { alignItems: 'flex-end', paddingRight: space[1] },
     removeFailed: { backgroundColor: colors.error },
     caption: {
       flexDirection: 'row',

package/src/components/Attachments/types.ts

@@ -20,7 +20,7 @@ export interface ChatAttachmentItem {
 }
 export interface AttachmentsProps {
   items: readonly ChatAttachmentItem[];
-  layout?: 'grid' | 'mixed' | 'carousel' | 'list';
+  layout?: 'grid' | 'compact' | 'mixed' | 'carousel' | 'list';
   showProgressLabel?: boolean;
   onPreview?(item: ChatAttachmentItem): void;
   onRemove?(item: ChatAttachmentItem): void;
@@ -36,4 +36,5 @@ export interface AttachmentItemProps extends Pick<
   imageSize: number;
   row: boolean;
   mixed?: boolean;
+  compact?: boolean;
 }

package/src/components/Composer/Composer.tsx

@@ -5,12 +5,19 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Pressable, Text, View, useWindowDimensions } from 'react-native';
+import {
+  LayoutAnimation,
+  Pressable,
+  Text,
+  View,
+  useWindowDimensions,
+} from 'react-native';
 import {
   fixed,
   Textarea,
   useTheme,
   useThemedStyles,
+  usePrefersReducedMotion,
 } from '@unif/react-native-design';
 import type { TextFieldHandle } from '@unif/react-native-design';
 import {
@@ -52,6 +59,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
   ) {
     const styles = useThemedStyles(createStyles);
     const { fontScale } = useTheme();
+    const reducedMotion = usePrefersReducedMotion();
     const { height: windowHeight } = useWindowDimensions();
     const inputRef = useRef<TextFieldHandle>(null);
     const lastHeight = useRef<number | undefined>(undefined);
@@ -59,6 +67,12 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
     const [focused, setFocused] = useState(false);
     const voiceActive = voice !== undefined && voice.status !== 'idle';
     const expanded = focused || value.length > 0;
+    const moreDisabled =
+      disabled ||
+      voiceActive ||
+      actions.every(
+        (action) => !action.label.trim() || action.disabled || action.loading
+      );
     const minHeight = Number.isFinite(minInputHeight)
       ? Math.max(fixed.hitTarget, minInputHeight!)
       : fixed.hitTarget;
@@ -98,8 +112,8 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
         inputRef.current?.blur();
         setFocused(false);
       }
-      if (voiceActive || disabled) setMenuOpen(false);
-    }, [voiceActive, disabled]);
+      if (moreDisabled) setMenuOpen(false);
+    }, [voiceActive, moreDisabled]);
 
     const moreAction =
       actions.length > 0 ? (
@@ -107,7 +121,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
           icon="plus"
           label="更多操作"
           expanded={menuOpen}
-          disabled={disabled}
+          disabled={moreDisabled}
           onPress={() => setMenuOpen((open) => !open)}
         />
       ) : null;
@@ -126,7 +140,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
         {header != null ? (
           <View style={[styles.accessory, styles.header]}>{header}</View>
         ) : null}
-        {menuOpen && !disabled && !voiceActive && actions.length > 0 ? (
+        {menuOpen && !moreDisabled && actions.length > 0 ? (
           <>
             <Pressable
               style={[styles.backdrop, { height: windowHeight }]}
@@ -191,10 +205,18 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
               onPressIn={() => setMenuOpen(false)}
               onFocus={() => {
                 setMenuOpen(false);
+                if (!focused && !value.length && !reducedMotion)
+                  LayoutAnimation.configureNext(
+                    LayoutAnimation.Presets.easeInEaseOut
+                  );
                 setFocused(true);
                 onFocusChange?.(true);
               }}
               onBlur={() => {
+                if (focused && !value.length && !reducedMotion)
+                  LayoutAnimation.configureNext(
+                    LayoutAnimation.Presets.easeInEaseOut
+                  );
                 setFocused(false);
                 onFocusChange?.(false);
               }}
@@ -267,13 +289,17 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
                   : voice.transcript || VOICE_LABELS[voice.status]}
               </Text>
             </View>
-            {voice.status === 'listening' ? (
+            {voice.status === 'listening' || voice.status === 'finishing' ? (
               <ComposerIconAction
                 icon="stop"
                 visual="primary"
                 label="停止语音输入"
-                disabled={disabled || voice.disabled}
-                onPress={voice.onStop}
+                disabled={
+                  disabled || voice.disabled || voice.status === 'finishing'
+                }
+                onPress={
+                  voice.status === 'listening' ? voice.onStop : undefined
+                }
               />
             ) : null}
           </View>

package/src/components/Composer/styles.ts

@@ -18,6 +18,7 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
     },
     accessory: { padding: space[3] },
     header: {
+      padding: space[2],
       borderBottomWidth: 0.5,
       borderBottomColor: colors.outlineVariant,
     },

package/src/components/Confirmation/Confirmation.tsx

@@ -1,5 +1,11 @@
 import { Text, View } from 'react-native';
-import { Button, useThemedStyles } from '@unif/react-native-design';
+import {
+  Button,
+  Icon,
+  Spinner,
+  useColors,
+  useThemedStyles,
+} from '@unif/react-native-design';
 import {
   CONFIRMATION_STATUS_TEXT,
   DEFAULT_CANCEL_LABEL,
@@ -24,35 +30,65 @@ export function Confirmation({
   testID,
 }: ConfirmationProps): React.JSX.Element {
   const styles = useThemedStyles(createStyles);
+  const colors = useColors();
+  const tint =
+    status === 'confirmed'
+      ? colors.success
+      : status === 'cancelled'
+        ? colors.foregroundSubtle
+        : colors.primary;
+  const borderColor =
+    status === 'cancelled' ? colors.surfaceContainerHighest : tint;
   const resolvedStatusText =
     status === 'pending'
       ? statusText
       : (statusText ?? CONFIRMATION_STATUS_TEXT[status]);
 
   return (
-    <View style={[styles.root, style]} testID={testID}>
-      <Text style={styles.title}>{title}</Text>
-      <View>{children}</View>
+    <View style={[styles.root, { borderColor }, style]} testID={testID}>
+      <View style={styles.heading}>
+        {status === 'processing' ? (
+          <Spinner size={14} color={tint} />
+        ) : (
+          <Icon
+            name={
+              status === 'confirmed'
+                ? 'check'
+                : status === 'cancelled'
+                  ? 'close'
+                  : 'warning'
+            }
+            size={14}
+            color={tint}
+          />
+        )}
+        <Text
+          style={[styles.title, status === 'cancelled' && styles.cancelled]}
+        >
+          {title}
+        </Text>
+      </View>
+      <View style={styles.body}>{children}</View>
       {resolvedStatusText ? (
         <Text style={styles.status}>{resolvedStatusText}</Text>
       ) : null}
       {status === 'pending' && (onConfirm || onCancel) ? (
         <View style={styles.actions}>
-          {onConfirm ? (
-            <Button
-              label={confirmLabel}
-              onPress={onConfirm}
-              disabled={confirmDisabled}
-              size="sm"
-            />
-          ) : null}
           {onCancel ? (
             <Button
               label={cancelLabel}
               onPress={onCancel}
               disabled={cancelDisabled}
-              size="sm"
-              variant="outline"
+              block
+              variant="secondary"
+            />
+          ) : null}
+          {onConfirm ? (
+            <Button
+              label={confirmLabel}
+              onPress={onConfirm}
+              disabled={confirmDisabled}
+              block
             />
           ) : null}
         </View>

package/src/components/Confirmation/styles.ts

@@ -10,25 +10,32 @@ import {
 export const createStyles = (colors: ColorTokens) =>
   StyleSheet.create({
     root: {
-      gap: space[4],
       padding: space[5],
-      borderWidth: 1,
+      borderWidth: 2,
       borderColor: colors.outline,
-      borderRadius: radius.xl,
+      borderRadius: radius.lg,
       backgroundColor: colors.surface,
     },
+    heading: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[2],
+      marginBottom: space[3],
+    },
+    body: { marginBottom: space[4] },
+    cancelled: { color: colors.foregroundSubtle },
     title: {
+      flex: 1,
       color: colors.foreground,
-      fontSize: type.h3,
+      fontSize: type.xs,
       fontWeight: fw.semi,
     },
     status: {
       color: colors.foregroundMuted,
-      fontSize: type.sm,
+      fontSize: type.xxs,
     },
     actions: {
       flexDirection: 'row',
-      flexWrap: 'wrap',
       gap: space[3],
     },
     footer: {

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

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { type, space, fontMono } from '@unif/react-native-design';
+import { type, fw } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
 const makeMarkdownStyles = (colors: ColorTokens, outgoing: boolean) => {
@@ -11,58 +11,32 @@ const makeMarkdownStyles = (colors: ColorTokens, outgoing: boolean) => {
   };
   return StyleSheet.create({
     text: body,
-    em: { ...body, fontStyle: 'italic' },
-    strong: { ...body, fontWeight: 'bold' },
-    strikethrough: { ...body, textDecorationLine: 'line-through' },
+    em: { color: textColor, fontStyle: 'italic' },
+    strong: { color: textColor, fontWeight: 'bold' },
+    strikethrough: { color: textColor, textDecorationLine: 'line-through' },
     link: {
-      ...body,
       color: outgoing ? colors.onPrimary : colors.primary,
       textDecorationLine: 'underline',
     },
-    li: body,
+    li: { color: textColor, fontSize: type.sm },
     codespan: {
-      ...body,
-      fontFamily: fontMono,
       color: colors.foreground,
       backgroundColor: colors.surfaceContainer,
     },
-    h1: {
-      fontSize: type.h1,
-      lineHeight: type.h1 * 1.4,
-      color: textColor,
-      borderBottomColor: colors.outline,
-    },
-    h2: {
-      fontSize: type.h2,
-      lineHeight: type.h2 * 1.4,
-      color: textColor,
-      borderBottomColor: colors.outline,
-    },
-    h3: {
-      fontSize: type.h3,
-      lineHeight: type.h3 * 1.4,
-      color: textColor,
-    },
-    h4: {
-      fontSize: type.body,
-      lineHeight: type.body * 1.4,
-      color: textColor,
-    },
-    h5: {
-      fontSize: type.sm,
-      lineHeight: type.sm * 1.4,
-      color: textColor,
-    },
-    h6: {
-      fontSize: type.xs,
-      lineHeight: type.xs * 1.4,
-      color: textColor,
+    h1: { fontSize: type.h2, fontWeight: fw.bold, color: textColor },
+    h2: { fontSize: type.h3, fontWeight: fw.bold, color: textColor },
+    h3: { fontSize: type.body, fontWeight: fw.semi, color: textColor },
+    h4: { fontSize: type.sm, fontWeight: fw.semi, color: textColor },
+    h5: { fontSize: type.sm, fontWeight: fw.semi, color: textColor },
+    h6: { fontSize: type.sm, fontWeight: fw.semi, color: textColor },
+    code: {
+      backgroundColor: colors.surfaceContainer,
+      borderColor: colors.outline,
+      borderWidth: 1,
     },
-    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 },
+    codeText: { color: colors.foreground },
+    blockquote: { borderColor: colors.outline, borderLeftWidth: 3 },
+    hr: { backgroundColor: colors.outline, height: 1 },
     table: { borderColor: colors.outline },
   });
 };

package/src/components/Message/Message.tsx

@@ -2,13 +2,13 @@ import { Pressable, Text, View } from 'react-native';
 import {
   Button,
   IconButton,
-  Spinner,
   useThemedStyles,
   useColors,
 } from '@unif/react-native-design';
 import { MarkdownContent } from './MarkdownContent/MarkdownContent';
 import { createStyles } from './styles';
 import { isNestedAction } from './isNestedAction';
+import { MessageWaiting } from './MessageWaiting';
 import type { MessageProps } from './types';
 
 export function Message(props: MessageProps) {
@@ -23,6 +23,7 @@ export function Message(props: MessageProps) {
     header,
     footer,
     actions = [],
+    failureAction,
     onPress,
     onLongPress,
     style,
@@ -39,6 +40,7 @@ export function Message(props: MessageProps) {
     (footer !== undefined && footer !== null && footer !== false);
   const waiting =
     (status === 'pending' || status === 'streaming') && !hasContent;
+  const failedAction = status === 'failed' ? failureAction : undefined;
   const contentStyle = [
     styles.content,
     fullWidth && styles.fullWidth,
@@ -48,6 +50,12 @@ export function Message(props: MessageProps) {
     ],
     surface === 'outlined' && styles.outlined,
     status === 'failed' && styles.failed,
+    waiting &&
+      surface === 'bubble' &&
+      placement === 'start' &&
+      styles.waitingBubble,
+    failedAction && styles.failureContent,
+    failedAction && fullWidth && styles.failureFullWidth,
   ];
   const content = (
     <>
@@ -76,16 +84,8 @@ export function Message(props: MessageProps) {
       ) : (
         props.children
       )}
-      {waiting ? (
-        <View
-          accessible
-          accessibilityLabel="正在等待回复"
-          accessibilityState={{ busy: true }}
-        >
-          <Spinner />
-        </View>
-      ) : null}
-      {statusText ? (
+      {waiting ? <MessageWaiting label={statusText} /> : null}
+      {statusText && !waiting ? (
         <Text style={[styles.status, status === 'failed' && styles.errorText]}>
           {statusText}
         </Text>
@@ -93,6 +93,31 @@ export function Message(props: MessageProps) {
       {footer}
     </>
   );
+  const bubble =
+    onPress || onLongPress ? (
+      <Pressable
+        style={contentStyle}
+        onPress={
+          onPress
+            ? (event) => {
+                if (!isNestedAction(event)) onPress();
+              }
+            : undefined
+        }
+        onLongPress={
+          onLongPress
+            ? (event) => {
+                if (!isNestedAction(event)) onLongPress();
+              }
+            : undefined
+        }
+        accessible={false}
+      >
+        {content}
+      </Pressable>
+    ) : (
+      <View style={contentStyle}>{content}</View>
+    );
   return (
     <View
       style={[styles.root, placement === 'end' && styles.end, style]}
@@ -107,29 +132,24 @@ export function Message(props: MessageProps) {
         ]}
       >
         {name ? <Text style={styles.name}>{name}</Text> : null}
-        {onPress || onLongPress ? (
-          <Pressable
-            style={contentStyle}
-            onPress={
-              onPress
-                ? (event) => {
-                    if (!isNestedAction(event)) onPress();
-                  }
-                : undefined
-            }
-            onLongPress={
-              onLongPress
-                ? (event) => {
-                    if (!isNestedAction(event)) onLongPress();
-                  }
-                : undefined
-            }
-            accessible={false}
-          >
-            {content}
-          </Pressable>
+        {failedAction ? (
+          <View style={[styles.failureRow, placement === 'end' && styles.end]}>
+            {bubble}
+            <IconButton
+              icon="alert"
+              size="sm"
+              variant="ghost"
+              color={colors.error}
+              style={styles.failureAction}
+              accessibilityLabel={failedAction.label}
+              accessibilityHint={failedAction.accessibilityHint}
+              disabled={failedAction.disabled}
+              loading={failedAction.loading}
+              onPress={failedAction.onPress}
+            />
+          </View>
         ) : (
-          <View style={contentStyle}>{content}</View>
+          bubble
         )}
         {actions.length ? (
           <View style={styles.actions}>