@unif/react-native-chat 3.2.1 → 3.2.2

package/lib/typescript/src/components/Attachments/AttachmentItem.d.ts

@@ -1,3 +1,3 @@
 import type { AttachmentItemProps } from './types.js';
-export declare function AttachmentItem({ item, width, imageSize, row, showProgressLabel, onPreview, onRemove, }: AttachmentItemProps): import("react").JSX.Element;
+export declare function AttachmentItem({ item, width, imageSize, row, mixed, showProgressLabel, onPreview, onRemove, }: AttachmentItemProps): import("react").JSX.Element;
 //# sourceMappingURL=AttachmentItem.d.ts.map

package/lib/typescript/src/components/Attachments/AttachmentItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attachments/AttachmentItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAS,CAAC;AAEnD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,GAAG,EACH,iBAAyB,EACzB,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,+BA8GrB"}
+{"version":3,"file":"AttachmentItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attachments/AttachmentItem.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAS,CAAC;AAEnD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,GAAG,EACH,KAAa,EACb,iBAAyB,EACzB,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,+BAsSrB"}

package/lib/typescript/src/components/Attachments/Attachments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Attachments.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attachments/Attachments.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAe,EACf,iBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,gBAAgB,+BAuDlB"}
+{"version":3,"file":"Attachments.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attachments/Attachments.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAe,EACf,iBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,gBAAgB,+BA8ClB"}

package/lib/typescript/src/components/Attachments/constants.d.ts

@@ -1,7 +1,10 @@
 import type { IconName } from '@unif/react-native-design';
 import type { ChatAttachmentItem } from './types.js';
-export declare const CARD_WIDTH = 144;
-export declare const ROW_IMAGE_SIZE = 56;
+export declare const CARD_WIDTH: number;
+export declare const ROW_IMAGE_SIZE: number;
+export declare const MIXED_IMAGE_SIZE: number;
+export declare const ATTACHMENT_STATUS_SIZE: number;
+export declare const ATTACHMENT_STATUS_OWNER_SIZE: number;
 export declare const ATTACHMENT_ICONS: Record<NonNullable<ChatAttachmentItem['kind']>, IconName>;
 export declare const STATUS_LABELS: {
     readonly idle: "";

package/lib/typescript/src/components/Attachments/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attachments/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAS,CAAC;AAElD,eAAO,MAAM,UAAU,MAAM,CAAC;AAC9B,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,gBAAgB,EAAE,MAAM,CACnC,WAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,EACvC,QAAQ,CAMT,CAAC;AACF,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attachments/constants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAS,CAAC;AAElD,eAAO,MAAM,UAAU,QAAQ,CAAC;AAChC,eAAO,MAAM,cAAc,QAAU,CAAC;AACtC,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AACtC,eAAO,MAAM,sBAAsB,QAAQ,CAAC;AAC5C,eAAO,MAAM,4BAA4B,QAGxC,CAAC;AACF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CACnC,WAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,EACvC,QAAQ,CAMT,CAAC;AACF,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC"}

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

@@ -13,6 +13,31 @@ export declare const createStyles: (colors: ColorTokens) => Readonly<{
         gap: number;
         alignItems: "flex-start";
     };
+    tileOwner: {
+        position: "relative";
+        minWidth: number;
+    };
+    tile: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        overflow: "hidden";
+    };
+    tileFailed: {
+        borderColor: string;
+        borderWidth: number;
+    };
+    documentName: {
+        position: "absolute";
+        left: number;
+        right: number;
+        bottom: number;
+        fontSize: number;
+        color: string;
+        textAlign: "center";
+        backgroundColor: string;
+    };
     item: {
         gap: number;
         padding: number;
@@ -26,10 +51,26 @@ export declare const createStyles: (colors: ColorTokens) => Readonly<{
         flexDirection: "row";
         alignItems: "center";
     };
+    rowBody: {
+        flex: number;
+        minWidth: number;
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    mixedRowBody: {
+        gap: number;
+    };
+    mixedRow: {
+        height: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        borderRadius: number;
+    };
     content: {
         minWidth: number;
         flexShrink: number;
-        gap: number;
     };
     rowContent: {
         flex: number;
@@ -37,33 +78,84 @@ export declare const createStyles: (colors: ColorTokens) => Readonly<{
     media: {
         alignItems: "center";
         justifyContent: "center";
-        alignSelf: "center";
+        position: "relative";
     };
-    imageLayer: {
-        position: "absolute";
+    placeholder: {
+        backgroundColor: string;
+        borderRadius: number;
         alignItems: "center";
         justifyContent: "center";
+    };
+    statusOwner: {
+        position: "absolute";
         top: number;
-        bottom: number;
         left: number;
-        right: number;
+        width: number;
+        height: number;
+        alignItems: "center";
+        justifyContent: "center";
     };
-    placeholder: {
+    retryOwner: {
+        zIndex: number;
+        elevation: number;
+    };
+    statusVisual: {
+        width: number;
+        height: number;
+        borderRadius: 999;
         backgroundColor: string;
-        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
     };
-    progress: {
-        padding: number;
-        borderRadius: number;
+    removeOwner: {
+        position: "absolute";
+        top: number;
+        width: number;
+        height: number;
+        paddingTop: number;
+        zIndex: number;
+        elevation: number;
+    };
+    removeVisual: {
+        width: number;
+        height: number;
+        borderRadius: 999;
         backgroundColor: string;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    removeFailed: {
+        backgroundColor: string;
+    };
+    caption: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        gap: number;
+        paddingTop: number;
+        width: number;
+    };
+    captionText: {
+        flexShrink: number;
+        fontSize: number;
+        color: string;
+    };
+    previewAction: {
+        width: number;
+        alignItems: "center";
     };
     name: {
         color: string;
         fontSize: number;
+        fontWeight: "500";
     };
     meta: {
         color: string;
         fontSize: number;
+        marginTop: number;
+    };
+    fileMeta: {
+        fontFamily: string;
     };
     failed: {
         color: string;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attachments/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiD5C,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attachments/styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAO7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkI5C,CAAC"}

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

@@ -30,5 +30,6 @@ export interface AttachmentItemProps extends Pick<AttachmentsProps, 'showProgres
     width?: number;
     imageSize: number;
     row: boolean;
+    mixed?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attachments/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAe,CAAC;AAEhD,MAAM,MAAM,oBAAoB,GAC9B,MAAM,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC3D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC5C,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;CACjC;AACD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3C,QAAQ,CAAC,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AACD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,gBAAgB,EAChB,mBAAmB,GAAG,WAAW,GAAG,UAAU,CAC/C;IACC,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,OAAO,CAAC;CACd"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attachments/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAe,CAAC;AAEhD,MAAM,MAAM,oBAAoB,GAC9B,MAAM,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC3D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC5C,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;CACjC;AACD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3C,QAAQ,CAAC,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AACD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,gBAAgB,EAChB,mBAAmB,GAAG,WAAW,GAAG,UAAU,CAC/C;IACC,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/package.json

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

package/src/components/Attachments/AttachmentItem.tsx

@@ -1,4 +1,4 @@
-import { Text, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
 import {
   Button,
   CircularProgress,
@@ -6,11 +6,17 @@ import {
   IconButton,
   radius,
   Spinner,
+  Thumbnail,
+  useColors,
   useThemedStyles,
 } from '@unif/react-native-design';
-import { ATTACHMENT_ICONS, STATUS_LABELS } from './constants';
+import {
+  ATTACHMENT_ICONS,
+  ATTACHMENT_STATUS_OWNER_SIZE,
+  ROW_IMAGE_SIZE,
+  STATUS_LABELS,
+} from './constants';
 import { createStyles } from './styles';
-import { Thumbnail } from '@unif/react-native-design';
 import type { AttachmentItemProps } from './types';
 
 export function AttachmentItem({
@@ -18,15 +24,18 @@ export function AttachmentItem({
   width,
   imageSize,
   row,
+  mixed = false,
   showProgressLabel = false,
   onPreview,
   onRemove,
 }: AttachmentItemProps) {
   const styles = useThemedStyles(createStyles);
+  const colors = useColors();
   const name = item.name || '未命名附件';
   const status = item.status ?? 'idle';
-  const loadingVisual = item.loadingVisual ?? 'center';
   const busy = status === 'uploading' || status === 'processing';
+  const failed = status === 'failed';
+  const caption = item.loadingVisual === 'caption';
   const progress =
     status === 'uploading' &&
     typeof item.progress === 'number' &&
@@ -36,99 +45,281 @@ export function AttachmentItem({
       ? item.progress
       : undefined;
   const statusText = item.statusText ?? STATUS_LABELS[status];
-  const icon = <Icon name={ATTACHMENT_ICONS[item.kind ?? 'file']} size={28} />;
-  const media = (
-    <View style={[styles.media, { minWidth: imageSize, minHeight: imageSize }]}>
-      <View pointerEvents="none" style={styles.imageLayer}>
-        {item.thumbnail ? (
-          <Thumbnail
-            source={item.thumbnail}
-            size={{
-              width: imageSize,
-              height: imageSize,
-              borderRadius: radius.sm,
-            }}
-            fallback={icon}
+  const previewable = item.previewable && onPreview;
+  const separatePreview = previewable && (busy || failed);
+  const removable = item.removable && onRemove;
+  const singleAction = item.actions?.length === 1 ? item.actions[0] : undefined;
+  const retry =
+    failed &&
+    !caption &&
+    singleAction &&
+    (singleAction.id === 'retry' ||
+      singleAction.icon === 'retry' ||
+      singleAction.icon === 'refresh')
+      ? singleAction
+      : undefined;
+  const icon = (
+    <Icon name={ATTACHMENT_ICONS[item.kind ?? 'file']} size={ROW_IMAGE_SIZE} />
+  );
+  const thumbnail = item.thumbnail ? (
+    <Thumbnail
+      source={item.thumbnail}
+      size={{ width: imageSize, height: imageSize, borderRadius: radius.sm }}
+      fallback={icon}
+    />
+  ) : (
+    <View style={[styles.placeholder, { width: imageSize, height: imageSize }]}>
+      {icon}
+    </View>
+  );
+  const statusVisual =
+    busy || failed ? (
+      <View style={styles.statusVisual}>
+        {failed ? (
+          <Icon
+            name={retry?.icon ?? 'refresh'}
+            size={16}
+            color={colors.onPrimary}
+          />
+        ) : progress !== undefined ? (
+          <CircularProgress
+            value={progress}
+            size={36}
+            showLabel={showProgressLabel}
+            color={colors.onPrimary}
+            accessibilityLabel={`${name}上传进度`}
           />
         ) : (
-          <View
-            style={[
-              styles.media,
-              styles.placeholder,
-              { width: imageSize, height: imageSize },
-            ]}
-          >
-            {icon}
-          </View>
+          <Spinner size={16} color={colors.onPrimary} />
         )}
       </View>
-      {busy && loadingVisual === 'center' ? (
-        <View pointerEvents="none" style={styles.progress}>
-          {progress !== undefined ? (
-            <CircularProgress
-              value={progress}
-              showLabel={showProgressLabel}
-              accessibilityLabel={`${name}上传进度`}
-            />
-          ) : (
-            <Spinner />
-          )}
+    ) : null;
+  const statusOwner =
+    !caption && statusVisual ? (
+      retry ? (
+        <Pressable
+          style={[
+            styles.statusOwner,
+            {
+              top: (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2,
+              left: (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2,
+            },
+            styles.retryOwner,
+          ]}
+          accessibilityRole="button"
+          accessibilityLabel={retry.label}
+          accessibilityHint={retry.accessibilityHint}
+          accessibilityState={{
+            disabled: !!(retry.disabled || retry.loading),
+            busy: !!retry.loading,
+          }}
+          disabled={retry.disabled || retry.loading}
+          onPress={() => retry.onPress()}
+        >
+          {statusVisual}
+        </Pressable>
+      ) : (
+        <View
+          style={[
+            styles.statusOwner,
+            {
+              top: (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2,
+              left: (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2,
+            },
+          ]}
+          accessible
+          accessibilityLabel={statusText}
+          accessibilityState={{ busy }}
+        >
+          {statusVisual}
         </View>
-      ) : null}
-    </View>
-  );
+      )
+    ) : null;
+  const actions = item.actions
+    ?.filter((action) => action !== retry)
+    .map((action) => (
+      <Button
+        key={action.id}
+        label={action.label}
+        leftIcon={action.icon}
+        variant="secondary"
+        style={styles.action}
+        size="sm"
+        disabled={action.disabled}
+        loading={action.loading}
+        accessibilityHint={action.accessibilityHint}
+        onPress={action.onPress}
+      />
+    ));
 
-  return (
-    <View style={[styles.item, row ? styles.row : { width }]}>
-      {media}
-      <View style={[styles.content, row && styles.rowContent]}>
-        <Text style={styles.name}>{name}</Text>
-        {item.meta ? <Text style={styles.meta}>{item.meta}</Text> : null}
-        {statusText ? (
-          <Text
-            style={[styles.meta, status === 'failed' && styles.failed]}
-            accessibilityLiveRegion="polite"
-          >
-            {statusText}
+  if (row) {
+    const content = (
+      <>
+        <View style={styles.media}>
+          {thumbnail}
+          {statusOwner}
+        </View>
+        <View style={[styles.content, styles.rowContent]}>
+          <Text style={styles.name} numberOfLines={1} ellipsizeMode="middle">
+            {name}
           </Text>
-        ) : null}
-        {busy &&
-        loadingVisual === 'caption' &&
-        showProgressLabel &&
-        progress !== undefined ? (
-          <Text style={styles.meta}>{`${Math.round(progress * 100)}%`}</Text>
-        ) : null}
+          {item.meta ? (
+            <Text
+              style={[styles.meta, !mixed && styles.fileMeta]}
+              numberOfLines={1}
+            >
+              {item.meta}
+            </Text>
+          ) : null}
+          {statusText ? (
+            <Text
+              style={[styles.meta, failed && styles.failed]}
+              accessibilityLiveRegion="polite"
+            >
+              {statusText}
+            </Text>
+          ) : null}
+          {busy && caption && showProgressLabel && progress !== undefined ? (
+            <Text style={styles.meta}>{`${Math.round(progress * 100)}%`}</Text>
+          ) : null}
+        </View>
+      </>
+    );
+    return (
+      <View style={[styles.item, styles.row, mixed && styles.mixedRow]}>
+        {previewable && !retry ? (
+          <Pressable
+            style={[styles.rowBody, mixed && styles.mixedRowBody]}
+            accessibilityRole="button"
+            accessibilityLabel={`预览${name}`}
+            onPress={() => onPreview?.(item)}
+          >
+            {content}
+          </Pressable>
+        ) : (
+          <View style={[styles.rowBody, mixed && styles.mixedRowBody]}>
+            {content}
+          </View>
+        )}
         <View style={styles.actions}>
-          {item.previewable && onPreview ? (
+          {previewable && retry ? (
             <IconButton
               icon="eye"
+              size="sm"
               accessibilityLabel={`预览${name}`}
-              onPress={() => onPreview(item)}
+              onPress={() => onPreview?.(item)}
             />
           ) : null}
-          {item.removable && onRemove ? (
+          {removable ? (
             <IconButton
               icon="close"
+              size="sm"
               accessibilityLabel={`移除${name}`}
               disabled={item.removeDisabled}
-              onPress={() => onRemove(item)}
+              onPress={() => onRemove?.(item)}
             />
           ) : null}
-          {item.actions?.map((action) => (
-            <Button
-              key={action.id}
-              label={action.label}
-              leftIcon={action.icon}
-              variant="secondary"
-              style={styles.action}
-              disabled={action.disabled}
-              loading={action.loading}
-              accessibilityHint={action.accessibilityHint}
-              onPress={action.onPress}
-            />
-          ))}
+          {actions}
         </View>
       </View>
+    );
+  }
+
+  const removeLeft =
+    previewable && !separatePreview
+      ? width!
+      : (busy && !caption) || failed
+        ? (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2 +
+          ATTACHMENT_STATUS_OWNER_SIZE
+        : imageSize - ATTACHMENT_STATUS_OWNER_SIZE;
+  const ownerWidth = removable
+    ? Math.max(width!, removeLeft + ATTACHMENT_STATUS_OWNER_SIZE)
+    : width;
+  const picture = (
+    <>
+      {thumbnail}
+      {item.kind !== 'image' ? (
+        <Text style={styles.documentName} numberOfLines={2}>
+          {name}
+        </Text>
+      ) : null}
+    </>
+  );
+  return (
+    <View style={[styles.tileOwner, { width: ownerWidth }]}>
+      {previewable && !separatePreview ? (
+        <Pressable
+          style={[
+            styles.tile,
+            { width, height: imageSize },
+            failed && styles.tileFailed,
+          ]}
+          accessibilityRole="button"
+          accessibilityLabel={`预览${name}`}
+          onPress={() => onPreview?.(item)}
+        >
+          {picture}
+        </Pressable>
+      ) : (
+        <View
+          style={[
+            styles.tile,
+            { width, height: imageSize },
+            failed && styles.tileFailed,
+          ]}
+          accessible={!statusOwner}
+          accessibilityLabel={name}
+        >
+          {picture}
+        </View>
+      )}
+      {statusOwner}
+      {removable ? (
+        <Pressable
+          style={[styles.removeOwner, { left: removeLeft }]}
+          accessibilityRole="button"
+          accessibilityLabel={`移除${name}`}
+          disabled={item.removeDisabled}
+          accessibilityState={{ disabled: !!item.removeDisabled }}
+          onPress={() => onRemove?.(item)}
+        >
+          <View style={[styles.removeVisual, failed && styles.removeFailed]}>
+            <Icon
+              name="close"
+              size={10}
+              color={colors.onPrimary}
+              strokeWidth={2.5}
+            />
+          </View>
+        </Pressable>
+      ) : null}
+      {caption && (busy || failed) ? (
+        <View style={styles.caption} accessibilityLiveRegion="polite">
+          {status === 'processing' ? <Spinner size={10} /> : null}
+          <Text
+            style={[styles.captionText, failed && styles.failed]}
+            numberOfLines={1}
+          >
+            {statusText}
+          </Text>
+          {showProgressLabel && progress !== undefined ? (
+            <Text
+              style={styles.captionText}
+            >{`${Math.round(progress * 100)}%`}</Text>
+          ) : null}
+        </View>
+      ) : null}
+      {separatePreview ? (
+        <View style={styles.previewAction}>
+          <IconButton
+            icon="eye"
+            size="sm"
+            accessibilityLabel={`预览${name}`}
+            onPress={() => onPreview?.(item)}
+          />
+        </View>
+      ) : null}
+      {actions?.length ? <View style={styles.actions}>{actions}</View> : null}
     </View>
   );
 }