@smart-link/rn-im 1.0.1

package/dist/pages/message/MessageRecord.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ChatAvatar_1 = __importDefault(require("../../components/ChatAvatar/ChatAvatar"));
+const FormatTimeText_1 = __importDefault(require("../../components/FormatTimeText"));
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const MessagePayload_1 = __importDefault(require("./components/MessagePayload"));
+const MessageRecord = ({ navigation, route: { params } }) => {
+    const { messages, title } = params;
+    (0, react_1.useEffect)(() => {
+        navigation.setOptions({
+            title,
+        });
+    }, [navigation, title]);
+    return (<rn_ui_1.NavigationPage noPadding>
+            <react_native_1.FlatList contentContainerStyle={styles.list} data={messages} renderItem={({ item, index }) => {
+            const isSamePerson = index > 0 && messages[index - 1].messageFrom === item.messageFrom;
+            return (<react_native_1.View style={styles.messageItem}>
+                            <react_native_1.View style={styles.avatar}>
+                                {!isSamePerson && (<ChatAvatar_1.default id={item.messageFrom} url={item.payload.avatars} size={(0, rn_ui_1.dp)(40)} name={item.messageFromName}/>)}
+                            </react_native_1.View>
+                            <react_native_1.View style={styles.content}>
+                                <react_native_1.View style={styles.info}>
+                                    <react_native_1.Text style={styles.usernameText}>{item.messageFromName}</react_native_1.Text>
+                                    <FormatTimeText_1.default style={styles.timeText} time={item.messageTime}></FormatTimeText_1.default>
+                                </react_native_1.View>
+                                <MessagePayload_1.default {...item} showArrow={false}/>
+                            </react_native_1.View>
+                        </react_native_1.View>);
+        }}/>
+        </rn_ui_1.NavigationPage>);
+};
+const styles = react_native_1.StyleSheet.create({
+    list: {
+        padding: (0, rn_ui_1.dp)(12),
+    },
+    titleText: {
+        fontSize: (0, rn_ui_1.dp)(16),
+        color: '#fff',
+    },
+    messageItem: {
+        flexDirection: 'row',
+        marginBottom: (0, rn_ui_1.dp)(10),
+    },
+    avatar: {
+        width: (0, rn_ui_1.dp)(40),
+    },
+    content: {
+        flex: 1,
+        marginHorizontal: (0, rn_ui_1.dp)(6),
+        paddingVertical: (0, rn_ui_1.dp)(4),
+        borderBottomWidth: (0, rn_ui_1.dp)(1),
+        borderStyle: 'solid',
+        borderColor: '#eee',
+    },
+    info: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: (0, rn_ui_1.dp)(5),
+    },
+    usernameText: {
+        color: '#999',
+        fontSize: (0, rn_ui_1.dp)(12),
+    },
+    timeText: {
+        color: '#999',
+        fontSize: (0, rn_ui_1.dp)(12),
+    },
+});
+exports.default = MessageRecord;

package/dist/pages/message/components/BusiNotifyCard.d.ts

@@ -0,0 +1,6 @@
+import { IPayload } from '@smart-link/im-base';
+import React from 'react';
+declare const _default: React.MemoExoticComponent<({ payload }: {
+    payload: IPayload;
+}) => React.JSX.Element>;
+export default _default;

package/dist/pages/message/components/BusiNotifyCard.js

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = require("react-native-svg");
+const notifyTypeIcon = {
+    conference: ({ color, size }) => (<react_native_svg_1.Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
+            <react_native_svg_1.Path d="M12.5 2.5c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm0 17.5c-4.5 0-8.5-3.5-8.5-8.5s3.5-8.5 8.5-8."/>
+        </react_native_svg_1.Svg>),
+    todo: ({ color, size }) => (<react_native_svg_1.Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
+            <react_native_svg_1.Path d="M584.32 244.416h-154.272c-43.392 0-77.152-33.76-77.152-77.152s33.76-77.152 77.152-77.152h154.272c43.392 0 77.152 33.76 77.152 77.152s-33.76 77.152-77.152 77.152z m159.104 332.672c-96.416 0-178.4 81.952-178.4 178.4s81.952 178.4 178.4 178.4 178.4-81.952 178.4-178.4c0-101.248-81.952-178.4-178.4-178.4z m77.152 231.424h-101.248c-14.464 0-24.096-9.632-24.096-24.096V688c0-14.464 9.632-24.096 24.096-24.096s24.096 9.632 24.096 24.096v67.488h77.152c14.464 0 24.096 9.632 24.096 24.096 0 19.296-9.632 28.928-24.096 28.928zM796.48 167.264h-43.392c0 9.632 4.832 19.296 4.832 24.096 0 57.856-48.224 101.248-101.248 101.248h-308.576c-57.856 0-101.248-48.224-101.248-101.248 0-9.632 0-19.296 4.832-24.096H203.456c-57.856 0-101.248 43.392-101.248 101.248v515.904c0 57.856 43.392 101.248 101.248 101.248h347.136c-24.096-38.56-38.56-81.952-38.56-130.176 0-125.344 101.248-231.424 231.424-231.424 57.856 0 115.712 24.096 154.272 62.688V268.544c0-57.856-48.224-101.248-101.248-101.248zM449.312 678.336H280.576c-24.096 0-38.56-19.296-38.56-38.56s19.296-38.56 38.56-38.56h163.936c24.096 0 43.392 19.296 43.392 38.56s-19.296 38.56-38.56 38.56z m115.712-168.736h-284.48c-24.096 0-38.56-19.296-38.56-38.56 0-24.096 19.296-43.392 38.56-43.392h279.648c24.096 0 38.56 19.296 38.56 38.56 4.832 24.096-14.464 43.392-33.76 43.392z"/>
+        </react_native_svg_1.Svg>),
+    toread: ({ color, size }) => (<react_native_svg_1.Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
+            <react_native_svg_1.Path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"/>
+        </react_native_svg_1.Svg>),
+    supervise: ({ color, size }) => (<react_native_svg_1.Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
+            <react_native_svg_1.Path d="M300.8 268.8c-25.6 0-44.8-25.6-44.8-51.2V76.8c0-25.6 19.2-51.2 51.2-51.2 25.6 0 51.2 19.2 51.2 51.2v140.8c-6.4 25.6-25.6 51.2-57.6 51.2zM736 268.8c-25.6 0-51.2-19.2-51.2-51.2V76.8c0-25.6 19.2-51.2 51.2-51.2 25.6 0 51.2 19.2 51.2 51.2v140.8c0 25.6-25.6 51.2-51.2 51.2z"/>
+            <react_native_svg_1.Path d="M883.2 102.4h-83.2v115.2c0 38.4-32 64-64 64-38.4 0-64-32-64-64V102.4H371.2v115.2c0 38.4-32 64-64 64s-64-32-64-64V102.4H160c-51.2 0-89.6 38.4-89.6 89.6v160h902.4V192c0-51.2-38.4-89.6-89.6-89.6zM70.4 403.2v396.8c0 51.2 38.4 89.6 89.6 89.6h723.2c51.2 0 89.6-38.4 89.6-89.6V403.2H70.4zM768 768H275.2c-19.2 0-32-12.8-32-32 0-12.8 12.8-32 32-32H768c19.2 0 32 12.8 32 32-6.4 19.2-19.2 32-32 32z m25.6-217.6c0 19.2-12.8 32-32 32H275.2c-19.2 0-32-12.8-32-32s12.8-32 32-32H768c12.8 6.4 25.6 19.2 25.6 32z"/>
+        </react_native_svg_1.Svg>),
+    calendarSchedule: ({ color, size }) => (<react_native_svg_1.Svg viewBox={'0 0 1024 1024'} fill={color} width={size} height={size}>
+            <react_native_svg_1.Path d="M715.33 515.17L667.16 467 448.79 685.37l-94.39-94.39-48.17 48.17 142.81 142.81 266.29-266.79z m109.31-360.94h-44.02V64h-90.23v90.23H333.61V64h-90.23v90.23h-44.02c-25.19 0-46.46 8.81-64.07 26.17-17.61 17.61-26.17 38.88-26.17 64.07v625.29c0 25.19 8.8 46.46 26.17 64.07C152.9 951.44 174.17 960 199.36 960h625.29c25.19 0 46.46-8.81 64.07-26.17 17.61-17.61 26.17-38.88 26.17-64.07V244.47c0-25.19-8.8-46.46-26.17-64.07-17.62-17.37-38.89-26.17-64.08-26.17z m0 715.52H199.36V378.71h625.29v491.04z"/>
+        </react_native_svg_1.Svg>),
+};
+const BusiNotifyCard = ({ payload }) => {
+    const Icon = notifyTypeIcon[payload.busiType] || notifyTypeIcon.todo;
+    const color = payload.read ? '#ea1f2d' : '#333';
+    return (<react_native_1.TouchableOpacity style={styles.root} activeOpacity={0.5}>
+            <react_native_1.View style={styles.busiTypeContainer}>
+                <Icon color={color} size={(0, rn_ui_1.dp)(24)}/>
+                <react_native_1.Text style={[styles.busiType, { color }]}>{payload.busiTypeText}</react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.Text style={styles.title}>{payload.title}</react_native_1.Text>
+            {payload.columns.length > 0 && (<react_native_1.View style={styles.columns}>
+                    {payload.columns.map(column => (<react_native_1.View key={column.key} style={styles.column}>
+                            <react_native_1.Text style={styles.label}>{column.label}:</react_native_1.Text>
+                            {column.userId ? (<react_native_1.TouchableOpacity>
+                                    <react_native_1.Text style={[styles.value, { color: '#208aff' }]}>{column.value}</react_native_1.Text>
+                                </react_native_1.TouchableOpacity>) : (<react_native_1.Text style={styles.value}>{column.value}</react_native_1.Text>)}
+                        </react_native_1.View>))}
+                </react_native_1.View>)}
+            {payload.content && <react_native_1.Text style={styles.content}>{payload.content}</react_native_1.Text>}
+            {payload.busiStatusText && <react_native_1.Text style={[styles.busiStatusText, { color }]}>{payload.busiStatusText}</react_native_1.Text>}
+        </react_native_1.TouchableOpacity>);
+};
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        marginTop: (0, rn_ui_1.dp)(12),
+        marginBottom: -(0, rn_ui_1.dp)(32),
+        marginHorizontal: '5%',
+        width: '90%',
+        borderRadius: (0, rn_ui_1.dp)(4),
+        padding: (0, rn_ui_1.dp)(20),
+        shadowColor: 'rgba(0, 0, 0, 0.4)',
+        backgroundColor: '#fff',
+        shadowOffset: {
+            width: 1,
+            height: (0, rn_ui_1.dp)(6),
+        },
+        shadowRadius: (0, rn_ui_1.dp)(6),
+        shadowOpacity: 1,
+        elevation: 2,
+    },
+    busiTypeContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: (0, rn_ui_1.dp)(6),
+    },
+    busiType: {
+        fontSize: (0, rn_ui_1.dp)(14),
+        color: '#333333',
+        marginLeft: (0, rn_ui_1.dp)(6),
+    },
+    title: {
+        fontSize: (0, rn_ui_1.dp)(14),
+        color: '#333333',
+        marginBottom: (0, rn_ui_1.dp)(6),
+    },
+    content: {},
+    busiStatusText: {
+        alignSelf: 'flex-end',
+        fontSize: (0, rn_ui_1.dp)(15),
+        lineHeight: (0, rn_ui_1.dp)(22),
+        color: '#333333',
+    },
+    columns: {},
+    column: {
+        flexDirection: 'row',
+        marginBottom: (0, rn_ui_1.dp)(6),
+    },
+    label: {
+        width: (0, rn_ui_1.dp)(80),
+        letterSpacing: 2,
+        height: (0, rn_ui_1.dp)(24),
+        fontSize: (0, rn_ui_1.dp)(15),
+        lineHeight: (0, rn_ui_1.dp)(24),
+        color: '#666666',
+        overflow: 'hidden',
+    },
+    value: {
+        height: (0, rn_ui_1.dp)(24),
+        fontSize: (0, rn_ui_1.dp)(15),
+        lineHeight: (0, rn_ui_1.dp)(24),
+        color: '#333333',
+        overflow: 'hidden',
+    },
+});
+exports.default = (0, react_1.memo)(BusiNotifyCard);

package/dist/pages/message/components/ChatBg.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ChatBgProps {
+    fileId?: string;
+    children: React.ReactElement;
+}
+declare const ChatBg: React.FC<ChatBgProps>;
+export default ChatBg;

package/dist/pages/message/components/ChatBg.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const init_1 = require("../../../init");
+const file_1 = require("../../../utils/file");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ChatBg = ({ fileId, children }) => {
+    const [localPath, setLocalPath] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (fileId && fileId !== 'bg0') {
+            const imManager = (0, init_1.getImManager)();
+            imManager.loadResourceFromCache(fileId).then(resp => {
+                if (resp) {
+                    setLocalPath(resp);
+                }
+                else {
+                    // 下载资源
+                    (0, file_1.download)({
+                        fileId,
+                        resourceType: 'background',
+                        filename: fileId + '.png',
+                    }).then(resp => {
+                        setLocalPath(resp);
+                        imManager.updateResource({
+                            url: fileId,
+                            localPath: resp,
+                        });
+                    }).catch(err => {
+                        console.log('下载背景图失败', err);
+                    });
+                }
+            });
+        }
+    }, [fileId]);
+    if (!fileId || fileId === 'bg0' || !localPath) {
+        return children;
+    }
+    return (<react_native_1.ImageBackground style={{ flex: 1 }} resizeMode='cover' source={{ uri: (0, file_1.toAbsolutePath)(localPath) }}>
+            {children}
+        </react_native_1.ImageBackground>);
+};
+exports.default = ChatBg;

package/dist/pages/message/components/MessageItem.d.ts

@@ -0,0 +1,16 @@
+import { IConversation, IMessage } from '@smart-link/im-base';
+import React from 'react';
+import { NativeTouchEvent, LayoutChangeEvent } from 'react-native';
+type MessageItemProps = {
+    isMultiple?: boolean;
+    multipleSelect?: Record<string, IMessage>;
+    conversation: IConversation;
+    message: IMessage;
+    mine: boolean;
+    showTimeLine: boolean;
+    onLongPressPopover: (message: IMessage, nativeEvent: NativeTouchEvent) => void;
+    onPressPopover: (message: IMessage, nativeEvent: NativeTouchEvent) => void;
+    onLayoutItem: (item: IMessage, e: LayoutChangeEvent) => void;
+};
+declare const _default: React.MemoExoticComponent<({ isMultiple, multipleSelect, conversation, message, mine, showTimeLine, onPressPopover, onLongPressPopover, onLayoutItem, }: MessageItemProps) => React.JSX.Element>;
+export default _default;

package/dist/pages/message/components/MessageItem.js

@@ -0,0 +1,205 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const im_base_1 = require("@smart-link/im-base");
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ChatAvatar_1 = __importDefault(require("../../../components/ChatAvatar/ChatAvatar"));
+const useFormatMsgTime_1 = __importDefault(require("../../../hooks/useFormatMsgTime"));
+const BusiNotifyCard_1 = __importDefault(require("./BusiNotifyCard"));
+const PayloadNotify_1 = __importDefault(require("./Payload/PayloadNotify"));
+const MessagePayload_1 = __importDefault(require("./MessagePayload"));
+const useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
+//@ts-ignore
+const MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
+const init_1 = require("../../../init");
+const MessageReceiptStatus_1 = __importDefault(require("./MessageReceiptStatus"));
+const MessageUndo_1 = __importDefault(require("../../../pages/message/components/MessageUndo"));
+const { width: screenWidth } = react_native_1.Dimensions.get('window');
+const MessageItem = ({ isMultiple, multipleSelect, conversation, message, mine, showTimeLine, onPressPopover, onLongPressPopover, onLayoutItem, }) => {
+    const theme = (0, rn_ui_1.useTheme)();
+    const { t } = (0, useTranslation_1.default)();
+    const time = (0, useFormatMsgTime_1.default)(message.messageTime);
+    const isNotify = (0, im_base_1.isNotifyMessage)(message.payloadType);
+    const isB2C = (conversation === null || conversation === void 0 ? void 0 : conversation.type) === im_base_1.ConversationType.B2C;
+    const isMultipleChecked = !!(multipleSelect === null || multipleSelect === void 0 ? void 0 : multipleSelect[message.messageSeq]);
+    const notArrow = [im_base_1.PayloadType.PICTURE, im_base_1.PayloadType.VIDEO].includes(message.payloadType);
+    const isUndo = message.messageStatus === im_base_1.MessageStatus.UNDO;
+    const isMessagePayload = !isB2C && !isNotify && !isUndo;
+    return (<react_native_1.View style={styles.root} onLayout={(e) => {
+            onLayoutItem(message, e);
+        }}>
+            {showTimeLine && <react_native_1.Text style={styles.time}>{time}</react_native_1.Text>}
+            {isB2C && <BusiNotifyCard_1.default payload={message.payload}/>}
+            {isNotify && <PayloadNotify_1.default {...message}/>}
+            {isUndo && <MessageUndo_1.default messageSeq={message.messageSeq} text={t('youWithdrawMsg')} undoText={message.payload.text} haveBackgroundImage={false} edit={mine}/>}
+            {isMessagePayload && (<>
+                    {isMultiple && (<react_native_1.TouchableWithoutFeedback onPress={() => {
+                    (0, init_1.getImManager)().store.dispatch(im_base_1.MessagePanelActions.onMultipleSelect(message.messageSeq));
+                }}>
+                            <react_native_1.View style={styles.multipleWrap}/>
+                        </react_native_1.TouchableWithoutFeedback>)}
+                    <react_native_1.View style={[
+                styles.bubble,
+                {
+                    flexDirection: mine ? 'row-reverse' : 'row',
+                    justifyContent: 'flex-start',
+                },
+            ]}>
+                        {mine && isMultiple && (<rn_ui_1.Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox]}/>)}
+                        <ChatAvatar_1.default name={message.messageFromName} id={message.messageFrom} url={message.payload.avatars} size={(0, rn_ui_1.dp)(40)}/>
+                        <react_native_1.View style={[
+                {
+                    alignContent: 'flex-end',
+                    alignItems: mine ? 'flex-end' : 'flex-start',
+                    paddingHorizontal: [im_base_1.PayloadType.PICTURE, im_base_1.PayloadType.VIDEO].includes(message.payloadType)
+                        ? (0, rn_ui_1.dp)(10)
+                        : 0,
+                },
+            ]}>
+                            {!mine && message.conversationType !== im_base_1.ConversationType.C2C && (<react_native_1.Text style={[styles.name, {
+                        marginLeft: notArrow ? 0 : (0, rn_ui_1.dp)(10),
+                    }]}>{message.messageFromName}</react_native_1.Text>)}
+                            <react_native_1.View>
+                                <MessagePayload_1.default style={[
+                styles.payload,
+                {
+                    justifyContent: mine ? 'flex-end' : 'flex-start',
+                    backgroundColor: mine ? '#e3e3e3' : '#fff',
+                },
+            ]} {...message} direction={mine ? 'right' : 'left'} onPress={e => {
+                e.stopPropagation();
+                e.preventDefault();
+                onPressPopover(message, e.nativeEvent);
+            }} onLongPress={e => {
+                e.stopPropagation();
+                e.preventDefault();
+                onLongPressPopover(message, e.nativeEvent);
+            }}/>
+                                {mine && <MessageReceiptStatus_1.default {...message}/>}
+                            </react_native_1.View>
+                        </react_native_1.View>
+                        {message.messageStatus === im_base_1.MessageStatus.EMIT_ERROR && (<react_native_1.Text style={{ alignSelf: 'center' }}>
+                                <MaterialIcons_1.default name="info" size={(0, rn_ui_1.dp)(20)} color={theme.errorColor}/>
+                            </react_native_1.Text>)}
+                        {mine && message.messageStatus === im_base_1.MessageStatus.EMITTING && (<react_native_1.ActivityIndicator size="small" color={'#666'} animating={true}/>)}
+                        {!mine && isMultiple && (<rn_ui_1.Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox, styles.multipleCheckboxRight]}/>)}
+                    </react_native_1.View>
+                </>)}
+            {message.messageStatus === im_base_1.MessageStatus.EMIT_ERROR && (<>
+                    <react_native_1.View style={{ height: (0, rn_ui_1.dp)(10) }}/>
+                    <react_native_1.View style={styles.errorInfo}>
+                        <react_native_1.Text style={styles.errorInfoText}>{t('sendMsgFail')}</react_native_1.Text>
+                        <react_native_1.TouchableOpacity activeOpacity={0.5} onPress={() => {
+                var _a;
+                const imManager = (0, init_1.getImManager)();
+                imManager.resendMessage(conversation, message).then(() => { });
+                console.log('resendMessage');
+                ((_a = imManager.flatListRef) === null || _a === void 0 ? void 0 : _a.current).scrollToOffset({
+                    animated: false,
+                    offset: 0,
+                });
+            }}>
+                            <react_native_1.Text style={styles.errorInfoSend}>{t('resendMsg')}</react_native_1.Text>
+                        </react_native_1.TouchableOpacity>
+                    </react_native_1.View>
+                </>)}
+        </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        marginTop: (0, rn_ui_1.dp)(10),
+        paddingHorizontal: (0, rn_ui_1.dp)(10),
+        position: 'relative',
+    },
+    time: {
+        fontSize: (0, rn_ui_1.dp)(12),
+        textAlign: 'center',
+    },
+    bubble: {
+        paddingTop: (0, rn_ui_1.dp)(10),
+        zIndex: 1,
+        position: 'relative',
+    },
+    multipleCheckbox: {
+        marginTop: (0, rn_ui_1.dp)(10),
+    },
+    multipleCheckboxRight: {
+        marginTop: (0, rn_ui_1.dp)(10),
+        position: 'absolute',
+        right: 0,
+        top: (0, rn_ui_1.dp)(20),
+    },
+    name: {
+        fontSize: (0, rn_ui_1.dp)(12),
+    },
+    notify: {},
+    payload: {
+        maxWidth: screenWidth - (0, rn_ui_1.dp)(110),
+        minHeight: 20,
+        marginHorizontal: (0, rn_ui_1.dp)(10),
+        borderRadius: (0, rn_ui_1.dp)(5),
+        shadowColor: 'rgba(0, 0, 0, 0.2)',
+        shadowOffset: {
+            width: 0,
+            height: (0, rn_ui_1.dp)(2),
+        },
+        shadowRadius: (0, rn_ui_1.dp)(3),
+        shadowOpacity: 1,
+        elevation: 6,
+        position: 'relative',
+    },
+    plain: {
+        color: '#000',
+        fontSize: (0, rn_ui_1.dp)(14),
+        paddingHorizontal: (0, rn_ui_1.dp)(12),
+        paddingVertical: (0, rn_ui_1.dp)(10),
+    },
+    errorInfo: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+    errorInfoText: {
+        color: '#808080',
+        fontSize: (0, rn_ui_1.dp)(13),
+    },
+    errorInfoSend: {
+        paddingHorizontal: 5,
+        color: '#208aff',
+        textDecorationLine: 'underline',
+        fontSize: (0, rn_ui_1.dp)(13),
+    },
+    multipleWrap: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        zIndex: 99,
+    },
+});
+exports.default = (0, react_1.memo)(MessageItem);

package/dist/pages/message/components/MessageItemQuote.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IMessageQuote } from '@smart-link/im-base';
+export interface MessageItemQuoteProps extends IMessageQuote {
+    onDeleteQuote: () => void;
+}
+declare const MessageItemQuote: React.NamedExoticComponent<MessageItemQuoteProps>;
+export default MessageItemQuote;

package/dist/pages/message/components/MessageItemQuote.js

@@ -0,0 +1,83 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ChatAvatar_1 = __importDefault(require("../../../components/ChatAvatar/ChatAvatar"));
+const rn_ui_1 = require("@smart-link/rn-ui");
+// @ts-ignore
+const MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
+const MessageItemQuote = (0, react_1.memo)(props => {
+    const { quoteId, quoteAvatars, quoteTitle, quoteText, onDeleteQuote, } = props;
+    return (<react_native_1.View style={styles.quote}>
+            <ChatAvatar_1.default id={quoteId} url={quoteAvatars} size={(0, rn_ui_1.dp)(32)} name={''}/>
+            <react_native_1.View style={styles.width10}/>
+            <react_native_1.View style={styles.left}>
+                <react_native_1.Text style={styles.name} numberOfLines={1}>{quoteTitle}</react_native_1.Text>
+                <react_native_1.Text style={styles.text} numberOfLines={1}>{quoteText}</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.TouchableOpacity style={styles.delete} onPress={onDeleteQuote}>
+                <MaterialIcons_1.default name="clear" color="#666" size={(0, rn_ui_1.dp)(18)}/>
+            </react_native_1.TouchableOpacity>
+        </react_native_1.View>);
+});
+const styles = react_native_1.StyleSheet.create({
+    quote: {
+        backgroundColor: '#f3f3f3',
+        padding: (0, rn_ui_1.dp)(8),
+        flexDirection: 'row',
+        borderColor: '#eee',
+        borderStyle: 'solid',
+        borderWidth: (0, rn_ui_1.dp)(1),
+        alignItems: 'center',
+    },
+    width10: {
+        width: (0, rn_ui_1.dp)(10),
+    },
+    left: {
+        justifyContent: 'space-between'
+    },
+    name: {
+        width: (0, rn_ui_1.dp)(250),
+        fontSize: (0, rn_ui_1.dp)(12),
+        lineHeight: (0, rn_ui_1.dp)(15),
+        color: '#999',
+    },
+    text: {
+        width: (0, rn_ui_1.dp)(270),
+        fontSize: (0, rn_ui_1.dp)(12),
+        lineHeight: (0, rn_ui_1.dp)(16),
+        color: '#666',
+    },
+    delete: {
+        paddingTop: (0, rn_ui_1.dp)(3),
+        right: (0, rn_ui_1.dp)(10),
+        position: 'absolute',
+    }
+});
+exports.default = MessageItemQuote;

package/dist/pages/message/components/MessageItemTips.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TipsType } from '@smart-link/im-base';
+export type MessageItemTipsProps = {
+    text?: string;
+    style?: any;
+    type?: TipsType;
+};
+declare const MessageItemTips: React.NamedExoticComponent<MessageItemTipsProps>;
+export default MessageItemTips;