@uzum-tech/ui 1.11.2 → 1.12.0

package/es/chat/src/ChatMessages.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed, inject, Fragment } from 'vue';
-import { MessageStatus, ChatMessageType, ChatMarkType, chatInjectionKey } from './interface';
+import { h, defineComponent, computed, inject, Fragment, ref, nextTick } from 'vue';
+import { MessageStatus, ChatMessageType, ChatMarkType, ChatBubbleActionKey, chatInjectionKey } from './interface';
 import ChatAttachmentComponent from './ChatParts/ChatAttachment';
 import { UIcon } from '../../icon';
 import { USkeleton } from '../../skeleton';
+import { UDropdown } from '../../dropdown';
 import style from './styles/index.cssr';
 import { chatLight } from '../styles';
 import { useConfig, useTheme, useThemeClass, useLocale } from '../../_mixins';
@@ -59,6 +60,8 @@ export default defineComponent({
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.mergedThemeRef) !== null && _a !== void 0 ? _a : useTheme('Chat', '-chat', style, chatLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Chat');
+        const contextMenuShow = ref(false);
+        const contextMenuMessage = ref();
         const cssVarsRef = 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 {
@@ -104,6 +107,50 @@ export default defineComponent({
             var _a;
             (_a = props.onMessageRetry) === null || _a === void 0 ? void 0 : _a.call(props, message);
         };
+        const messageContextMenuOptions = 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 === 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 (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` },
                 h("span", null, date)));
@@ -129,35 +176,69 @@ export default defineComponent({
                 ] }, message.content && 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 (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 ? (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 && (h(ChatAttachmentComponent, { message: message, attachments: attachments, uploadProps: props.uploadProps, withPadding: true }, {
+                    default: slots.messageAttachment,
+                    'upload-file-title': slots.messageAttachmentTitle,
+                    'upload-file-subtitle': slots.messageAttachmentSubtitle
+                })),
+                message.content && (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` }, message.content)))) : attachments.length === 1 ? (h(ChatAttachmentComponent, { message: message, attachments: attachments, uploadProps: props.uploadProps }, {
+                default: slots.messageAttachment,
+                'upload-file-title': slots.messageAttachmentTitle,
+                'upload-file-subtitle': slots.messageAttachmentSubtitle
+            })) : null;
+            const messageContent = (h("div", { key: message.id, class: [
                     `${mergedClsPrefixRef.value}-chat-main__message`,
                     isOwn
                         ? `${mergedClsPrefixRef.value}-chat-main__message--own`
                         : `${mergedClsPrefixRef.value}-chat-main__message--other`
                 ] },
                 h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
-                    message.content || attachments.length > 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 && (h(ChatAttachmentComponent, { message: message, attachments: attachments, uploadProps: props.uploadProps, withPadding: true }, {
-                            default: slots.messageAttachment,
-                            'upload-file-title': slots.messageAttachmentTitle,
-                            'upload-file-subtitle': slots.messageAttachmentSubtitle
-                        })),
-                        message.content && (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` }, message.content)))) : attachments.length === 1 ? (h(ChatAttachmentComponent, { message: message, attachments: attachments, uploadProps: props.uploadProps }, {
-                        default: slots.messageAttachment,
-                        'upload-file-title': slots.messageAttachmentTitle,
-                        'upload-file-subtitle': slots.messageAttachmentSubtitle
-                    })) : null,
+                    hasBubbleActionsSlot ? (h("div", { onContextmenu: (e) => {
+                            e.preventDefault();
+                            contextMenuShow.value = false;
+                            void nextTick().then(() => {
+                                contextMenuShow.value = true;
+                                contextMenuMessage.value = message;
+                            });
+                        } }, (_c = slots.bubbleActions) === null || _c === void 0 ? void 0 :
+                        _c.call(slots, message),
+                        messageBubbleContent)) : hasBubbleActionsConfig ? (h(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: () => (h("div", { onContextmenu: (event) => {
+                                event.preventDefault();
+                                contextMenuShow.value = false;
+                                void nextTick().then(() => {
+                                    contextMenuShow.value = true;
+                                    contextMenuMessage.value = message;
+                                });
+                            } }, messageBubbleContent))
+                    })) : (messageBubbleContent),
                     h("div", { class: [
                             `${mergedClsPrefixRef.value}-chat-main__message-meta`,
                             isOwn
@@ -168,7 +249,7 @@ export default defineComponent({
                         ] }, message.status === MessageStatus.RETRY ? (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry`, onClick: () => {
                             handleMessageRetry(message);
                         }, style: { cursor: 'pointer' } },
-                        h(UIcon, { size: 16, component: statusIconMapper[MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`, theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon }),
+                        h(UIcon, { size: 16, component: statusIconMapper[MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`, theme: themeRef.value.peers.StatusIcon, themeOverrides: themeRef.value.peerOverrides.StatusIcon }),
                         h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text` }, mergedRetryTextRef.value))) : (h(Fragment, null,
                         h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, message.timestamp),
                         isOwn && message.status && (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-status` }, slots.messageStatus
@@ -176,7 +257,8 @@ export default defineComponent({
                             : statusIconMapper[message.status] && (h(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 (h("div", { class: [
@@ -228,6 +310,10 @@ export default 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
@@ -305,7 +391,14 @@ export default defineComponent({
                     padding: '0',
                     background: 'transparent'
                 } },
-                h("div", { class: `${mergedClsPrefixRef}-chat-main__messages-container` },
+                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/es/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/es/chat/src/ChatParts/MainArea.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { h, defineComponent, inject, computed, ref, watch, nextTick, Fragment } from 'vue';
-import { MessageStatus, ChatMessageType, chatInjectionKey } from '../interface';
+import { MessageStatus, ChatMessageType, ChatBubbleActionKey, chatInjectionKey } from '../interface';
 import { UInput } from '../../../input';
 import { UButton } from '../../../button';
 import { UIcon } from '../../../icon';
@@ -18,13 +18,16 @@ import { UUpload, UUploadTrigger } from '../../../upload';
 import { UFlex } from '../../../flex';
 import { resolveSlot } from '../../../_utils';
 import { UText } from '../../../typography';
+import { UList, UListItem } from '../../../list';
+import { useLocale } from '../../../_mixins';
 import UChatMessages from '../ChatMessages';
-import { ArrowHookUpRight, PersonNote, AttachIcon } from '../../../_internal/icons';
+import { ArrowHookUpRight, PersonNote, AttachIcon, SendFilled, CloseIcon } from '../../../_internal/icons';
 const SENDING_DELAY = 100;
 export default 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 } = 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
          } = inject(chatInjectionKey);
         const messagesBodyRef = ref();
@@ -35,6 +38,7 @@ export default defineComponent({
         const lastScrollTop = ref(0);
         const scrollTopFired = ref(false);
         const scrollBottomFired = ref(false);
+        const editingMessage = ref(null);
         const unreadMessagesCount = computed(() => {
             if (!messagesRef.value)
                 return 0;
@@ -58,6 +62,10 @@ export default 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;
@@ -189,8 +197,9 @@ export default defineComponent({
                                     buttons.push(h(UTooltip, null, {
                                         trigger: () => (h(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: () => (h(UIcon, Object.assign({ size: 20 }, shareIconProps, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides
-                                                    .Icon }), {
+                                            default: () => (h(UIcon, Object.assign({ size: 20 }, shareIconProps, { theme: mergedThemeRef.value.peers
+                                                    .HeaderShareIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                    .HeaderShareIcon }), {
                                                 default: () => (h(ArrowHookUpRight, null))
                                             }))
                                         })),
@@ -199,8 +208,9 @@ export default defineComponent({
                                     buttons.push(h(UTooltip, null, {
                                         trigger: () => (h(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: () => (h(UIcon, Object.assign({ size: 20 }, profileIconProps, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides
-                                                    .Icon }), {
+                                            default: () => (h(UIcon, Object.assign({ size: 20 }, profileIconProps, { theme: mergedThemeRef.value.peers
+                                                    .HeaderProfileIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                    .HeaderProfileIcon }), {
                                                 default: () => h(PersonNote, null)
                                             }))
                                         })),
@@ -221,9 +231,33 @@ export default 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 = ref(false);
         const handleSendMessage = () => __awaiter(this, void 0, void 0, function* () {
             if (isSending.value) {
@@ -231,6 +265,36 @@ export default 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 === 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) {
@@ -291,17 +355,37 @@ export default defineComponent({
                 }))();
             }
         };
+        const renderEditingBlock = () => {
+            if (!(editMessageIdRef === null || editMessageIdRef === void 0 ? void 0 : editMessageIdRef.value) || !editingMessage.value)
+                return null;
+            return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__editing-block` },
+                h(UList, { bordered: true }, {
+                    default: () => {
+                        var _a;
+                        return (h(UListItem, { header: { text: localeRef.value.editingTitle }, description: { text: ((_a = editingMessage.value) === null || _a === void 0 ? void 0 : _a.content) || '' } }, {
+                            suffix: () => (h(UButton, { text: true, circle: true, size: "small", onClick: cancelEditingMessage, theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button }, {
+                                icon: () => (h(UIcon, { size: 16 }, {
+                                    default: () => h(CloseIcon, null)
+                                }))
+                            }))
+                        }));
+                    }
+                })));
+        };
         const renderFooter = () => {
             return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__footer` },
                 h(UUpload, Object.assign({ abstract: true, multiple: true, defaultUpload: false, fileList: attachmentFileList.value, onUpdateFileList: handleFileListUpdate }, footerUploadPropsRef.value), {
-                    default: () => (h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
+                    default: () => (h(UFlex, { align: "end", size: "small", wrap: false, class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
                         default: () => (h(Fragment, null,
                             h(UUploadTrigger, { abstract: true }, {
                                 default: ({ handleClick }) => {
                                     var _a;
-                                    return (h(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: () => (h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
-                                            default: () => h(AttachIcon, null)
+                                    return (h(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: () => (h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers
+                                                .FooterAttachIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                .FooterAttachIcon }), {
+                                            default: () => resolveSlot(slots.footerAttachIcon, () => [h(AttachIcon, null)])
                                         }))
                                     }));
                                 }
@@ -317,20 +401,32 @@ export default defineComponent({
                                         e.stopPropagation();
                                         void handleSendMessage();
                                     }
-                                } }))))
+                                } }), {
+                                prefix: () => renderEditingBlock(),
+                                suffix: () => (h(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: () => resolveSlot(slots.footerSuffixIcon, () => [
+                                        h(SendFilled, null)
+                                    ])
+                                }))
+                            })))
                     }))
                 })));
         };
         return {
             renderHeader,
             renderMessages,
+            renderEditingBlock,
             renderFooter,
             messagesBodyRef,
             inputRef,
             inputValue,
             handleSendMessage,
             handleMessagesScroll,
-            scrollToBottom
+            scrollToBottom,
+            editingMessage
         };
     },
     render() {

package/es/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/es/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/es/chat/src/interface.js

@@ -19,4 +19,10 @@ export var ChatMarkType;
     ChatMarkType["EVENT"] = "event";
     ChatMarkType["DIVIDER"] = "divider";
 })(ChatMarkType || (ChatMarkType = {}));
+export var ChatBubbleActionKey;
+(function (ChatBubbleActionKey) {
+    ChatBubbleActionKey["EDIT"] = "edit";
+    ChatBubbleActionKey["COPY"] = "copy";
+    ChatBubbleActionKey["DELETE"] = "delete";
+})(ChatBubbleActionKey || (ChatBubbleActionKey = {}));
 export const chatInjectionKey = createInjectionKey('chat');