@uzum-tech/ui 1.11.1 → 1.12.0

package/lib/chat/src/ChatMessages.js

@@ -9,6 +9,7 @@ const interface_1 = require("./interface");
 const ChatAttachment_1 = __importDefault(require("./ChatParts/ChatAttachment"));
 const icon_1 = require("../../icon");
 const skeleton_1 = require("../../skeleton");
+const dropdown_1 = require("../../dropdown");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const styles_1 = require("../styles");
 const _mixins_1 = require("../../_mixins");
@@ -65,6 +66,8 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.mergedThemeRef) !== null && _a !== void 0 ? _a : (0, _mixins_1.useTheme)('Chat', '-chat', index_cssr_1.default, styles_1.chatLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Chat');
+        const contextMenuShow = (0, vue_1.ref)(false);
+        const contextMenuMessage = (0, vue_1.ref)();
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut, brandPrimary500, staticGreen, staticRed, textPrimary, textSecondary, textTertiary }, self: { backgroundColor, borderColor, mainBackgroundColor, headerBackgroundColor, headerBorderColor, headerTitleColor, messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, unreadNotificationBackgroundColor, unreadNotificationTextColor, typingIndicatorColor, dateSeparatorColor, dateSeparatorBackgroundColor, borderRadius, errorColor } } = themeRef.value;
             return {
@@ -110,6 +113,50 @@ exports.default = (0, vue_1.defineComponent)({
             var _a;
             (_a = props.onMessageRetry) === null || _a === void 0 ? void 0 : _a.call(props, message);
         };
+        const messageContextMenuOptions = (0, vue_1.computed)(() => {
+            var _a;
+            const message = contextMenuMessage.value;
+            if (!message)
+                return;
+            const bubbleActions = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.bubbleActionsRef) === null || _a === void 0 ? void 0 : _a.value;
+            if (!bubbleActions || bubbleActions.length === 0) {
+                return [];
+            }
+            const result = [];
+            for (const action of bubbleActions) {
+                if (action.visible && !action.visible(message)) {
+                    continue;
+                }
+                const label = typeof action.label === 'function' ? action.label() : action.label;
+                result.push({
+                    label,
+                    key: String(action.key)
+                });
+            }
+            return result;
+        });
+        const handleContextMenuSelect = (key) => {
+            var _a, _b;
+            const message = contextMenuMessage.value;
+            if (!message)
+                return;
+            if (key === interface_1.ChatBubbleActionKey.EDIT) {
+                const startEditing = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.startEditingMessage) === null || _a === void 0 ? void 0 : _a.value;
+                if (startEditing) {
+                    startEditing(message);
+                }
+                contextMenuShow.value = false;
+                return;
+            }
+            const bubbleActions = (_b = UChat === null || UChat === void 0 ? void 0 : UChat.bubbleActionsRef) === null || _b === void 0 ? void 0 : _b.value;
+            if (!bubbleActions)
+                return;
+            const action = bubbleActions.find((action) => action.key === key);
+            if (action) {
+                action.handler(message);
+            }
+            contextMenuShow.value = false;
+        };
         const renderDateSeparator = (date) => {
             return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` },
                 (0, vue_1.h)("span", null, date)));
@@ -135,35 +182,69 @@ exports.default = (0, vue_1.defineComponent)({
                 ] }, message.content && (0, vue_1.h)("span", null, message.content)));
         };
         const renderMessage = (message) => {
+            var _a, _b, _c;
             const isOwn = message.isOwn;
             const attachments = message.attachment
                 ? Array.isArray(message.attachment)
                     ? message.attachment
                     : [message.attachment]
                 : [];
-            return ((0, vue_1.h)("div", { key: message.id, class: [
+            const isContextMenuForThisMessage = contextMenuShow.value && ((_a = contextMenuMessage.value) === null || _a === void 0 ? void 0 : _a.id) === message.id;
+            const hasBubbleActionsSlot = slots.bubbleActions !== undefined;
+            const hasBubbleActionsConfig = ((_b = UChat === null || UChat === void 0 ? void 0 : UChat.bubbleActionsRef) === null || _b === void 0 ? void 0 : _b.value) &&
+                UChat.bubbleActionsRef.value.length > 0;
+            const messageBubbleContent = message.content || attachments.length > 1 ? ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
+                    isOwn
+                        ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own`
+                        : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`
+                ] },
+                attachments.length > 0 && ((0, vue_1.h)(ChatAttachment_1.default, { message: message, attachments: attachments, uploadProps: props.uploadProps, withPadding: true }, {
+                    default: slots.messageAttachment,
+                    'upload-file-title': slots.messageAttachmentTitle,
+                    'upload-file-subtitle': slots.messageAttachmentSubtitle
+                })),
+                message.content && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` }, message.content)))) : attachments.length === 1 ? ((0, vue_1.h)(ChatAttachment_1.default, { message: message, attachments: attachments, uploadProps: props.uploadProps }, {
+                default: slots.messageAttachment,
+                'upload-file-title': slots.messageAttachmentTitle,
+                'upload-file-subtitle': slots.messageAttachmentSubtitle
+            })) : null;
+            const messageContent = ((0, vue_1.h)("div", { key: message.id, class: [
                     `${mergedClsPrefixRef.value}-chat-main__message`,
                     isOwn
                         ? `${mergedClsPrefixRef.value}-chat-main__message--own`
                         : `${mergedClsPrefixRef.value}-chat-main__message--other`
                 ] },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
-                    message.content || attachments.length > 1 ? ((0, vue_1.h)("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
-                            isOwn
-                                ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own`
-                                : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`
-                        ] },
-                        attachments.length > 0 && ((0, vue_1.h)(ChatAttachment_1.default, { message: message, attachments: attachments, uploadProps: props.uploadProps, withPadding: true }, {
-                            default: slots.messageAttachment,
-                            'upload-file-title': slots.messageAttachmentTitle,
-                            'upload-file-subtitle': slots.messageAttachmentSubtitle
-                        })),
-                        message.content && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` }, message.content)))) : attachments.length === 1 ? ((0, vue_1.h)(ChatAttachment_1.default, { message: message, attachments: attachments, uploadProps: props.uploadProps }, {
-                        default: slots.messageAttachment,
-                        'upload-file-title': slots.messageAttachmentTitle,
-                        'upload-file-subtitle': slots.messageAttachmentSubtitle
-                    })) : null,
+                    hasBubbleActionsSlot ? ((0, vue_1.h)("div", { onContextmenu: (e) => {
+                            e.preventDefault();
+                            contextMenuShow.value = false;
+                            void (0, vue_1.nextTick)().then(() => {
+                                contextMenuShow.value = true;
+                                contextMenuMessage.value = message;
+                            });
+                        } }, (_c = slots.bubbleActions) === null || _c === void 0 ? void 0 :
+                        _c.call(slots, message),
+                        messageBubbleContent)) : hasBubbleActionsConfig ? ((0, vue_1.h)(dropdown_1.UDropdown, { show: isContextMenuForThisMessage, onUpdateShow: (show) => {
+                            var _a;
+                            if (!show && ((_a = contextMenuMessage.value) === null || _a === void 0 ? void 0 : _a.id) === message.id) {
+                                contextMenuShow.value = false;
+                            }
+                        }, onClickoutside: () => {
+                            var _a;
+                            if (((_a = contextMenuMessage.value) === null || _a === void 0 ? void 0 : _a.id) === message.id) {
+                                contextMenuShow.value = false;
+                            }
+                        }, trigger: "manual", placement: "bottom-start", options: messageContextMenuOptions.value, onSelect: handleContextMenuSelect }, {
+                        default: () => ((0, vue_1.h)("div", { onContextmenu: (event) => {
+                                event.preventDefault();
+                                contextMenuShow.value = false;
+                                void (0, vue_1.nextTick)().then(() => {
+                                    contextMenuShow.value = true;
+                                    contextMenuMessage.value = message;
+                                });
+                            } }, messageBubbleContent))
+                    })) : (messageBubbleContent),
                     (0, vue_1.h)("div", { class: [
                             `${mergedClsPrefixRef.value}-chat-main__message-meta`,
                             isOwn
@@ -174,7 +255,7 @@ exports.default = (0, vue_1.defineComponent)({
                         ] }, message.status === interface_1.MessageStatus.RETRY ? ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry`, onClick: () => {
                             handleMessageRetry(message);
                         }, style: { cursor: 'pointer' } },
-                        (0, vue_1.h)(icon_1.UIcon, { size: 16, component: statusIconMapper[interface_1.MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`, theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon }),
+                        (0, vue_1.h)(icon_1.UIcon, { size: 16, component: statusIconMapper[interface_1.MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`, theme: themeRef.value.peers.StatusIcon, themeOverrides: themeRef.value.peerOverrides.StatusIcon }),
                         (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text` }, mergedRetryTextRef.value))) : ((0, vue_1.h)(vue_1.Fragment, null,
                         (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, message.timestamp),
                         isOwn && message.status && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-status` }, slots.messageStatus
@@ -182,7 +263,8 @@ exports.default = (0, vue_1.defineComponent)({
                             : statusIconMapper[message.status] && ((0, vue_1.h)(icon_1.UIcon, { size: 16, component: statusIconMapper[message.status], class: [
                                     `${mergedClsPrefixRef.value}-chat-main__message-status-icon`,
                                     `${mergedClsPrefixRef.value}-chat-main__message-status-icon--${String(message.status)}`
-                                ], theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon }))))))))));
+                                ], theme: themeRef.value.peers.StatusIcon, themeOverrides: themeRef.value.peerOverrides.StatusIcon }))))))))));
+            return messageContent;
         };
         const renderTypingIndicator = () => {
             return ((0, vue_1.h)("div", { class: [
@@ -234,6 +316,10 @@ exports.default = (0, vue_1.defineComponent)({
             renderSkeletonMessage,
             renderDateSeparator,
             renderUnreadNotification,
+            contextMenuShow,
+            contextMenuMessage,
+            messageContextMenuOptions,
+            handleContextMenuSelect,
             cssVars: cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -311,7 +397,14 @@ exports.default = (0, vue_1.defineComponent)({
                     padding: '0',
                     background: 'transparent'
                 } },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-main__messages-container` },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-main__messages-container`, onContextmenu: (event) => {
+                        const target = event.target;
+                        const messagesContainer = event.currentTarget;
+                        if (target === messagesContainer) {
+                            event.preventDefault();
+                            this.contextMenuShow = false;
+                        }
+                    } },
                     messagesWithDates.map((item) => {
                         var _a;
                         if (item.type === 'date-separator') {

package/lib/chat/src/ChatParts/MainArea.d.ts

@@ -1,14 +1,18 @@
+import { Ref } from 'vue';
+import { type ChatMessageData } from '../interface';
 declare const _default: import("vue").DefineComponent<{}, {
     renderHeader: () => JSX.Element;
     renderMessages: () => JSX.Element;
+    renderEditingBlock: () => JSX.Element | null;
     renderFooter: () => JSX.Element;
-    messagesBodyRef: import("vue").Ref<HTMLElement | {
+    messagesBodyRef: Ref<HTMLElement | {
         $el: HTMLElement;
     } | undefined>;
-    inputRef: import("vue").Ref<HTMLInputElement | undefined>;
-    inputValue: import("vue").Ref<string>;
+    inputRef: Ref<HTMLInputElement | undefined>;
+    inputValue: Ref<string>;
     handleSendMessage: () => Promise<void>;
     handleMessagesScroll: (e: Event) => void;
     scrollToBottom: () => void;
+    editingMessage: Ref<ChatMessageData | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/chat/src/ChatParts/MainArea.js

@@ -23,13 +23,16 @@ const upload_1 = require("../../../upload");
 const flex_1 = require("../../../flex");
 const _utils_1 = require("../../../_utils");
 const typography_1 = require("../../../typography");
+const list_1 = require("../../../list");
+const _mixins_1 = require("../../../_mixins");
 const ChatMessages_1 = __importDefault(require("../ChatMessages"));
 const icons_1 = require("../../../_internal/icons");
 const SENDING_DELAY = 100;
 exports.default = (0, vue_1.defineComponent)({
     name: 'ChatMainArea',
     setup(_, { slots }) {
-        const { mergedClsPrefixRef, mergedThemeRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, headerShareButtonPropsRef, headerProfileButtonPropsRef, headerCloseButtonPropsRef, headerShareIconPropsRef, headerProfileIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, shareButtonTooltipRef, profileButtonTooltipRef, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, handleFooterInputChange, onAttachmentUpload, onChatClose, onChatShare, onUserProfile, onMessagesScrollToTop, onMessagesScrollToBottom
+        const { localeRef } = (0, _mixins_1.useLocale)('Chat');
+        const { mergedClsPrefixRef, mergedThemeRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, headerShareButtonPropsRef, headerProfileButtonPropsRef, headerCloseButtonPropsRef, headerShareIconPropsRef, headerProfileIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, footerSuffixIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, shareButtonTooltipRef, profileButtonTooltipRef, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, handleFooterInputChange, startEditingMessage: startEditingMessageRef, editMessageIdRef, bubbleActionsRef, onAttachmentUpload, onChatClose, onChatShare, onUserProfile, onMessagesScrollToTop, onMessagesScrollToBottom
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
         const messagesBodyRef = (0, vue_1.ref)();
@@ -40,6 +43,7 @@ exports.default = (0, vue_1.defineComponent)({
         const lastScrollTop = (0, vue_1.ref)(0);
         const scrollTopFired = (0, vue_1.ref)(false);
         const scrollBottomFired = (0, vue_1.ref)(false);
+        const editingMessage = (0, vue_1.ref)(null);
         const unreadMessagesCount = (0, vue_1.computed)(() => {
             if (!messagesRef.value)
                 return 0;
@@ -63,6 +67,10 @@ exports.default = (0, vue_1.defineComponent)({
                 shouldScrollOnLoad.value = true;
                 attachmentFileList.value = [];
                 uploadedAttachmentsMap.value.clear();
+                editingMessage.value = null;
+                if (editMessageIdRef) {
+                    editMessageIdRef.value = null;
+                }
                 if (unreadBeforeRead > 0 &&
                     !notificationsShownSetRef.value.has(newChat.id)) {
                     hasUnreadMessages.value = true;
@@ -194,8 +202,9 @@ exports.default = (0, vue_1.defineComponent)({
                                     buttons.push((0, vue_1.h)(tooltip_1.UTooltip, null, {
                                         trigger: () => ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, circle: true, size: "large" }, shareButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides
                                                 .Button, onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }), {
-                                            default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, shareIconProps, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides
-                                                    .Icon }), {
+                                            default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, shareIconProps, { theme: mergedThemeRef.value.peers
+                                                    .HeaderShareIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                    .HeaderShareIcon }), {
                                                 default: () => ((0, vue_1.h)(icons_1.ArrowHookUpRight, null))
                                             }))
                                         })),
@@ -204,8 +213,9 @@ exports.default = (0, vue_1.defineComponent)({
                                     buttons.push((0, vue_1.h)(tooltip_1.UTooltip, null, {
                                         trigger: () => ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, circle: true, size: "large" }, profileButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides
                                                 .Button, onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }), {
-                                            default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, profileIconProps, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides
-                                                    .Icon }), {
+                                            default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, profileIconProps, { theme: mergedThemeRef.value.peers
+                                                    .HeaderProfileIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                    .HeaderProfileIcon }), {
                                                 default: () => (0, vue_1.h)(icons_1.PersonNote, null)
                                             }))
                                         })),
@@ -226,9 +236,33 @@ exports.default = (0, vue_1.defineComponent)({
                 messageAttachment: slots.messageAttachment,
                 messageAttachmentTitle: slots.messageAttachmentTitle,
                 messageAttachmentSubtitle: slots.messageAttachmentSubtitle,
-                messageStatus: slots.messageStatus
+                messageStatus: slots.messageStatus,
+                bubbleActions: slots.bubbleActions
             }));
         };
+        const startEditingMessage = (message) => {
+            editingMessage.value = message;
+            if (editMessageIdRef) {
+                editMessageIdRef.value = message.id;
+            }
+            inputValue.value =
+                typeof message.content === 'string' ? message.content : '';
+            attachmentFileList.value = [];
+            uploadedAttachmentsMap.value.clear();
+        };
+        const cancelEditingMessage = () => {
+            editingMessage.value = null;
+            if (editMessageIdRef) {
+                editMessageIdRef.value = null;
+            }
+            inputValue.value = '';
+            if (selectedChatRef.value) {
+                inputValue.value = chatInputs.value[selectedChatRef.value.id] || '';
+            }
+        };
+        if (startEditingMessageRef) {
+            startEditingMessageRef.value = startEditingMessage;
+        }
         const isSending = (0, vue_1.ref)(false);
         const handleSendMessage = () => __awaiter(this, void 0, void 0, function* () {
             if (isSending.value) {
@@ -236,6 +270,36 @@ exports.default = (0, vue_1.defineComponent)({
             }
             const hasContent = inputValue.value.trim();
             const hasAttachments = attachmentFileList.value.length > 0;
+            if ((editMessageIdRef === null || editMessageIdRef === void 0 ? void 0 : editMessageIdRef.value) && hasContent) {
+                isSending.value = true;
+                try {
+                    const messageToEdit = editingMessage.value;
+                    if (messageToEdit) {
+                        const updatedMessage = Object.assign(Object.assign({}, messageToEdit), { content: inputValue.value.trim() });
+                        const bubbleActions = bubbleActionsRef === null || bubbleActionsRef === void 0 ? void 0 : bubbleActionsRef.value;
+                        if (bubbleActions) {
+                            const editAction = bubbleActions.find((action) => action.key === interface_1.ChatBubbleActionKey.EDIT);
+                            if (editAction) {
+                                editAction.handler(updatedMessage);
+                            }
+                        }
+                    }
+                    editingMessage.value = null;
+                    if (editMessageIdRef) {
+                        editMessageIdRef.value = null;
+                    }
+                    inputValue.value = '';
+                    if (selectedChatRef.value) {
+                        chatInputs.value[selectedChatRef.value.id] = '';
+                    }
+                }
+                finally {
+                    setTimeout(() => {
+                        isSending.value = false;
+                    }, SENDING_DELAY);
+                }
+                return;
+            }
             if ((hasContent || hasAttachments) &&
                 selectedChatRef.value &&
                 handleMessageSend) {
@@ -296,17 +360,37 @@ exports.default = (0, vue_1.defineComponent)({
                 }))();
             }
         };
+        const renderEditingBlock = () => {
+            if (!(editMessageIdRef === null || editMessageIdRef === void 0 ? void 0 : editMessageIdRef.value) || !editingMessage.value)
+                return null;
+            return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__editing-block` },
+                (0, vue_1.h)(list_1.UList, { bordered: true }, {
+                    default: () => {
+                        var _a;
+                        return ((0, vue_1.h)(list_1.UListItem, { header: { text: localeRef.value.editingTitle }, description: { text: ((_a = editingMessage.value) === null || _a === void 0 ? void 0 : _a.content) || '' } }, {
+                            suffix: () => ((0, vue_1.h)(button_1.UButton, { text: true, circle: true, size: "small", onClick: cancelEditingMessage, theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button }, {
+                                icon: () => ((0, vue_1.h)(icon_1.UIcon, { size: 16 }, {
+                                    default: () => (0, vue_1.h)(icons_1.CloseIcon, null)
+                                }))
+                            }))
+                        }));
+                    }
+                })));
+        };
         const renderFooter = () => {
             return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__footer` },
                 (0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, multiple: true, defaultUpload: false, fileList: attachmentFileList.value, onUpdateFileList: handleFileListUpdate }, footerUploadPropsRef.value), {
-                    default: () => ((0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
+                    default: () => ((0, vue_1.h)(flex_1.UFlex, { align: "end", size: "small", wrap: false, class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
                         default: () => ((0, vue_1.h)(vue_1.Fragment, null,
                             (0, vue_1.h)(upload_1.UUploadTrigger, { abstract: true }, {
                                 default: ({ handleClick }) => {
                                     var _a;
-                                    return ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { disabled: (_a = footerInputPropsRef.value) === null || _a === void 0 ? void 0 : _a.disabled, theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: handleClick }), {
-                                        default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
-                                            default: () => (0, vue_1.h)(icons_1.AttachIcon, null)
+                                    return ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { disabled: ((_a = footerInputPropsRef.value) === null || _a === void 0 ? void 0 : _a.disabled) ||
+                                            !!(editMessageIdRef === null || editMessageIdRef === void 0 ? void 0 : editMessageIdRef.value), theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: handleClick }), {
+                                        default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers
+                                                .FooterAttachIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                .FooterAttachIcon }), {
+                                            default: () => (0, _utils_1.resolveSlot)(slots.footerAttachIcon, () => [(0, vue_1.h)(icons_1.AttachIcon, null)])
                                         }))
                                     }));
                                 }
@@ -322,20 +406,32 @@ exports.default = (0, vue_1.defineComponent)({
                                         e.stopPropagation();
                                         void handleSendMessage();
                                     }
-                                } }))))
+                                } }), {
+                                prefix: () => renderEditingBlock(),
+                                suffix: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 24, class: `${mergedClsPrefixRef.value}-chat-main__input-suffix` }, footerSuffixIconPropsRef.value, { theme: mergedThemeRef.value.peers.FooterSuffixIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                        .FooterSuffixIcon, onClick: () => {
+                                        void handleSendMessage();
+                                    } }), {
+                                    default: () => (0, _utils_1.resolveSlot)(slots.footerSuffixIcon, () => [
+                                        (0, vue_1.h)(icons_1.SendFilled, null)
+                                    ])
+                                }))
+                            })))
                     }))
                 })));
         };
         return {
             renderHeader,
             renderMessages,
+            renderEditingBlock,
             renderFooter,
             messagesBodyRef,
             inputRef,
             inputValue,
             handleSendMessage,
             handleMessagesScroll,
-            scrollToBottom
+            scrollToBottom,
+            editingMessage
         };
     },
     render() {

package/lib/chat/src/ChatParts/Sidebar.d.ts

@@ -38,6 +38,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             footerBorderColor: string;
             inputBackgroundColor: string;
             inputBorderColor: string;
+            inputSuffixColor: string;
             unreadNotificationBackgroundColor: string;
             unreadNotificationTextColor: string;
             typingIndicatorColor: string;
@@ -572,14 +573,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 iconSizeLarge: string;
                 rippleDuration: string;
             }, any>;
-            Icon: import("../../../_mixins").Theme<"Icon", {
-                color: string;
-                opacity1Depth: string;
-                opacity2Depth: string;
-                opacity3Depth: string;
-                opacity4Depth: string;
-                opacity5Depth: string;
-            }, any>;
             List: import("../../../_mixins").Theme<"List", {
                 iconSize: string;
                 iconSpace: string;
@@ -675,6 +668,46 @@ declare const _default: import("vue").DefineComponent<{}, {
                 codeColor: string;
                 codeBorder: string;
             }, any>;
+            StatusIcon: import("../../../_mixins").Theme<"Icon", {
+                color: string;
+                opacity1Depth: string;
+                opacity2Depth: string;
+                opacity3Depth: string;
+                opacity4Depth: string;
+                opacity5Depth: string;
+            }, any>;
+            FooterAttachIcon: import("../../../_mixins").Theme<"Icon", {
+                color: string;
+                opacity1Depth: string;
+                opacity2Depth: string;
+                opacity3Depth: string;
+                opacity4Depth: string;
+                opacity5Depth: string;
+            }, any>;
+            FooterSuffixIcon: import("../../../_mixins").Theme<"Icon", {
+                color: string;
+                opacity1Depth: string;
+                opacity2Depth: string;
+                opacity3Depth: string;
+                opacity4Depth: string;
+                opacity5Depth: string;
+            }, any>;
+            HeaderShareIcon: import("../../../_mixins").Theme<"Icon", {
+                color: string;
+                opacity1Depth: string;
+                opacity2Depth: string;
+                opacity3Depth: string;
+                opacity4Depth: string;
+                opacity5Depth: string;
+            }, any>;
+            HeaderProfileIcon: import("../../../_mixins").Theme<"Icon", {
+                color: string;
+                opacity1Depth: string;
+                opacity2Depth: string;
+                opacity3Depth: string;
+                opacity4Depth: string;
+                opacity5Depth: string;
+            }, any>;
         };
         peerOverrides: {
             Input?: {
@@ -894,17 +927,37 @@ declare const _default: import("vue").DefineComponent<{}, {
                     [x: string]: any;
                 } | undefined;
             } | undefined;
-            Icon?: {
+            List?: {
                 peers?: {
                     [x: string]: any;
                 } | undefined;
             } | undefined;
-            List?: {
+            Typography?: {
                 peers?: {
                     [x: string]: any;
                 } | undefined;
             } | undefined;
-            Typography?: {
+            StatusIcon?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+            FooterAttachIcon?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+            FooterSuffixIcon?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+            HeaderShareIcon?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+            HeaderProfileIcon?: {
                 peers?: {
                     [x: string]: any;
                 } | undefined;

package/lib/chat/src/interface.d.ts

@@ -25,6 +25,11 @@ export declare enum ChatMarkType {
     EVENT = "event",
     DIVIDER = "divider"
 }
+export declare enum ChatBubbleActionKey {
+    EDIT = "edit",
+    COPY = "copy",
+    DELETE = "delete"
+}
 export type ChatId = string | number | symbol;
 export interface ChatListItemData {
     id: ChatId;
@@ -150,6 +155,7 @@ export interface ChatProps {
     footerUploadProps?: Partial<UploadProps>;
     footerUploadTriggerProps?: any;
     footerIconProps?: Partial<IconProps>;
+    footerSuffixIconProps?: Partial<IconProps>;
     emptyProps?: Partial<EmptyProps>;
     retryText?: string;
     typingText?: string;
@@ -164,6 +170,7 @@ export interface ChatProps {
     onChatSelect?: OnChatSelect;
     onMessageSend?: OnMessageSend;
     onMessageRetry?: (message: ChatMessageData) => void;
+    bubbleActions?: ChatBubbleAction[];
     onAttachmentUpload?: OnAttachmentUpload;
     onAttachmentDownload?: OnAttachmentDownload;
     onFilterChange?: OnFilterChange;
@@ -190,6 +197,7 @@ export interface ChatSlots {
     messageAttachment?: (message: ChatMessageData) => VNodeChild;
     messageAttachmentTitle?: (file: any) => VNodeChild;
     messageAttachmentSubtitle?: (file: any) => VNodeChild;
+    bubbleActions?: (message: ChatMessageData) => VNodeChild;
 }
 export interface ChatListItemSlots {
     avatar?: () => VNodeChild;
@@ -203,6 +211,12 @@ export interface ChatMessageSlots {
     timestamp?: () => VNodeChild;
     status?: () => VNodeChild;
 }
+export interface ChatBubbleAction {
+    key: ChatBubbleActionKey | string;
+    label: string | (() => VNodeChild);
+    handler: (message: ChatMessageData) => void;
+    visible?: (message: ChatMessageData) => boolean;
+}
 export interface ChatListHeaderProps {
     title?: string | (() => VNodeChild);
     actions?: Array<() => VNodeChild>;
@@ -282,6 +296,7 @@ export declare const chatInjectionKey: InjectionKey<{
     footerUploadPropsRef: Ref<Partial<UploadProps> | undefined>;
     footerUploadTriggerPropsRef: Ref<Record<string, any> | undefined>;
     footerIconPropsRef: Ref<Partial<IconProps> | undefined>;
+    footerSuffixIconPropsRef: Ref<Partial<IconProps> | undefined>;
     inputPlaceholderRef: Ref<string>;
     retryTextRef: Ref<string>;
     typingTextRef: Ref<string>;
@@ -295,6 +310,9 @@ export declare const chatInjectionKey: InjectionKey<{
     handleChatSelect: (chatId: ChatId) => void;
     handleMessageSend: (content: string, attachments?: ChatAttachment[]) => void;
     handleMessageRetry: (message: ChatMessageData) => void;
+    startEditingMessage?: Ref<((message: ChatMessageData) => void) | undefined>;
+    editMessageIdRef?: Ref<ChatId | null>;
+    bubbleActionsRef?: Ref<ChatBubbleAction[] | undefined>;
     handleFooterInputChange: (value: string, chatId: ChatId) => void;
     markMessagesAsRead?: (chatId: ChatId) => void;
     handleFilterChange: (filter: {

package/lib/chat/src/interface.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.chatInjectionKey = exports.ChatMarkType = exports.ChatMessageType = exports.MessageStatus = void 0;
+exports.chatInjectionKey = exports.ChatBubbleActionKey = exports.ChatMarkType = exports.ChatMessageType = exports.MessageStatus = void 0;
 const _utils_1 = require("../../_utils");
 var MessageStatus;
 (function (MessageStatus) {
@@ -22,4 +22,10 @@ var ChatMarkType;
     ChatMarkType["EVENT"] = "event";
     ChatMarkType["DIVIDER"] = "divider";
 })(ChatMarkType || (exports.ChatMarkType = ChatMarkType = {}));
+var ChatBubbleActionKey;
+(function (ChatBubbleActionKey) {
+    ChatBubbleActionKey["EDIT"] = "edit";
+    ChatBubbleActionKey["COPY"] = "copy";
+    ChatBubbleActionKey["DELETE"] = "delete";
+})(ChatBubbleActionKey || (exports.ChatBubbleActionKey = ChatBubbleActionKey = {}));
 exports.chatInjectionKey = (0, _utils_1.createInjectionKey)('chat');