@medipha/chat 1.0.14

package/README.md

@@ -0,0 +1,103 @@
+# @medipha/chat
+
+`@medipha/chat` is an embeddable React chat module for Medic-ERP. It uses the
+ERP application's React tree, BrowserRouter, authentication, and Ant Design 4
+installation; it does not use an iframe or create a router.
+
+## Install
+
+```bash
+pnpm add @medipha/chat
+```
+
+## Mount in Medic-ERP
+
+The ERP imports the Ant Design 4 stylesheet exactly once, at its application
+entry point. The chat library deliberately does not import it.
+
+```tsx
+import 'antd/dist/antd.css';
+import { ChatModule } from '@medipha/chat';
+import '@medipha/chat/styles.css';
+
+<Route
+  path="/chat-erp/*"
+  element={
+    <ChatModule
+      accessToken={accessToken}
+      apiUrl={CHAT_API_URL}
+      socketUrl={CHAT_SOCKET_URL}
+      onUnauthorized={handleUnauthorized}
+      onNavigateOutsideChat={handleNavigateOutsideChat}
+    />
+  }
+/>;
+```
+
+The ERP must own the surrounding `BrowserRouter`. `ChatModule` adds only
+relative routes: `/chat-erp` for the conversation list and
+`/chat-erp/:conversationId` for a room.
+
+## `ChatModuleProps`
+
+| Prop                    | Required | Meaning                                                   |
+| ----------------------- | -------- | --------------------------------------------------------- |
+| `accessToken`           | Yes      | Current ERP access token used by chat API/socket clients. |
+| `apiUrl`                | Yes      | Base URL for the Chat HTTP API.                           |
+| `socketUrl`             | Yes      | Socket server URL.                                        |
+| `onUnauthorized`        | No       | ERP callback for an unauthorized chat response.           |
+| `onNavigateOutsideChat` | No       | ERP callback for navigation that leaves chat.             |
+
+Pass a new `accessToken` prop whenever ERP refreshes its credential.
+`ChatModule` updates its internal runtime context from the new prop and never
+writes a token to `localStorage` or `sessionStorage`.
+
+## Nginx SPA fallback
+
+Configure the ERP server so deep links under `/chat-erp/*` return the ERP
+application entry file:
+
+```nginx
+location / {
+  try_files $uri $uri/ /index.html;
+}
+```
+
+## Development and validation
+
+Vite 8 requires Node.js `20.19+` or `22.12+`.
+
+```bash
+pnpm install
+pnpm dev
+```
+
+`pnpm dev` opens the root development playground. It loads `ChatModule`
+directly from `src`, so library code and CSS changes use Vite HMR without a
+library build after every edit. The playground's `BrowserRouter` is
+development-only; it is not part of the published package.
+
+To validate the publishable library:
+
+```bash
+pnpm typecheck
+pnpm build
+npm pack --dry-run
+```
+
+To verify the CRA host after building the library:
+
+```bash
+cd examples/erp-host
+pnpm install
+pnpm build
+```
+
+## Publish
+
+Publish `@medipha/chat-core` before `@medipha/chat`. GitLab CI uses a masked,
+protected `NPM_TOKEN` variable with npm publish permission and runs only for a
+version tag such as `v0.1.0`. Update versions using semantic versioning: patch
+for fixes, minor for backward-compatible features, and major for breaking API
+changes. Create and push the version tag through your normal release process
+after reviewing the working tree.

package/dist/api/client.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @deprecated Import transport functions from `@medipha/chat-core` in new code.
+ * This compatibility re-export keeps the web UI's existing imports unchanged.
+ */
+export * from '@medipha/chat-core';

package/dist/features/composer/attachment-file-helpers.d.ts

@@ -0,0 +1,22 @@
+import { PendingAttachment } from './pending-attachment';
+export declare const ACCEPT_ATTRIBUTE = ".jpg,.jpeg,.png,.webp,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt";
+export declare const ACCEPTED_FILE_EXTENSIONS: Set<string>;
+export declare const getFileExtension: (file: File) => string;
+export declare const isImageFile: (file: File) => boolean;
+/** Splits staged files into same-kind runs (images vs. documents) so each becomes one grouped message. */
+export declare const groupAttachmentsByKind: (attachments: PendingAttachment[]) => PendingAttachment[][];
+/** Keeps only files with a supported extension; `hasRejectedFiles` tells the caller
+ *  whether to surface a format-not-supported error. */
+export declare const splitValidAttachmentFiles: (files: File[]) => {
+    validFiles: File[];
+    hasRejectedFiles: boolean;
+};
+/** Wraps a validated file as a staged attachment, generating an image preview URL when it
+ *  stages as an image. `forceDocument` (set for files picked via the generic "attach file"
+ *  button, as opposed to the image picker) keeps it a DOCUMENT — a file card, Zalo-style —
+ *  even when the file itself happens to be a photo. */
+export declare const buildPendingAttachment: (file: File, options?: {
+    forceDocument?: boolean;
+}) => PendingAttachment;
+/** Releases a staged attachment's preview URL, if it has one. */
+export declare const revokePendingAttachmentPreview: (attachment: PendingAttachment) => void;

package/dist/features/composer/attachments/attachment-buttons.d.ts

@@ -0,0 +1,8 @@
+interface AttachmentButtonsProps {
+    onAttach?: () => void;
+    onAttachImages?: () => void;
+}
+/** Composer toolbar's file/image buttons — both just forward to the parent's staged-
+ *  attachment flow (picking files/images happens outside the composer). */
+export declare function AttachmentButtons({ onAttach, onAttachImages }: AttachmentButtonsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/composer/conversation-composer.d.ts

@@ -0,0 +1,20 @@
+import { ChatUser, MessageContent } from '../../utils/chat';
+interface ConversationComposerProps {
+    conversationName: string;
+    members: ChatUser[];
+    canMentionAll: boolean;
+    /** Enables @mentions; turned off for 1-1 chats where there's nobody to tag. */
+    enableMentions?: boolean;
+    disabled?: boolean;
+    /** Allows sending with an empty editor (attachments staged in the parent are the payload). */
+    hasPendingAttachments?: boolean;
+    onSubmit: (content: MessageContent) => void;
+    onError?: (message: string) => void;
+    onAttach?: () => void;
+    onAttachImages?: () => void;
+    onTypingStart?: () => void;
+    onTypingStop?: () => void;
+}
+/** Rich-text composer that emits backend message content, with real @mentions. */
+export declare function ConversationComposer({ conversationName, members, canMentionAll, enableMentions, disabled, hasPendingAttachments, onSubmit, onError, onAttach, onAttachImages, onTypingStart, onTypingStop, }: ConversationComposerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/composer/editor/font-size-extension.d.ts

@@ -0,0 +1,18 @@
+import { Extension } from '@tiptap/core';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /** Sets the fontSize attribute on the textStyle mark over the current selection. */
+            setFontSize: (fontSize: string) => ReturnType;
+            /** Clears the fontSize attribute, falling back to the editor's base size. */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+/**
+ * No stable official `@tiptap/extension-font-size` exists yet for this TipTap version
+ * (only a `3.0.0-next.*` prerelease) — this mirrors `@tiptap/extension-color`'s own
+ * approach (extend the shared `textStyle` mark with one more attribute) so `color` and
+ * `fontSize` compose on the same mark instead of fighting over it.
+ */
+export declare const FontSize: Extension<any, any>;

package/dist/features/composer/editor/mention-suggestion-list.d.ts

@@ -0,0 +1,15 @@
+export interface MentionItem {
+    id: string;
+    label: string;
+    fallbackName?: string;
+    avatarUrl?: string | null;
+    isAll?: boolean;
+}
+interface MentionSuggestionListProps {
+    items: MentionItem[];
+    selectedIndex: number;
+    onSelect: (index: number) => void;
+}
+/** Zalo-style @mention dropdown: hint row, an "@All" option, then members with avatars. */
+export declare function MentionSuggestionList({ items, selectedIndex, onSelect }: MentionSuggestionListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/features/composer/editor/paste-text-style.d.ts

@@ -0,0 +1,5 @@
+/** Sanitizes pasted HTML's inline `color`/`font-size` down to whichever of our fixed
+ *  swatches/sizes they exactly match, or strips them entirely otherwise — done at paste
+ *  time so what lands in the composer already matches what will actually be sent, instead
+ *  of only being caught by the same check later at send time. */
+export declare function sanitizePastedTextStyle(html: string): string;

package/dist/features/composer/emoji/emoji-picker-button.d.ts

@@ -0,0 +1,9 @@
+import { Editor } from '@tiptap/core';
+interface EmojiPickerButtonProps {
+    editor: Editor | null | undefined;
+}
+/** Composer toolbar's smiley button: toggles a native-emoji picker popover and inserts
+ *  the picked emoji at the cursor. Stays open after a pick so several emoji can be
+ *  chosen in a row. */
+export declare function EmojiPickerButton({ editor }: EmojiPickerButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/composer/emoji/emoji-shortcode-extension.d.ts

@@ -0,0 +1,9 @@
+import { Extension } from '@tiptap/core';
+/**
+ * Replaces chat emoticon shortcodes (":v", ":)", "<3", ...) with the matching emoji.
+ *
+ * Runs on a short pause after typing, not on every keystroke: firing instantly would
+ * convert ":)" the moment its two characters appear, before the user can extend it into
+ * ":)))" — the extra parens would then just land as literal text after the emoji.
+ */
+export declare const EmojiShortcodeExtension: Extension<any, any>;

package/dist/features/composer/emoji/emoji-shortcodes.d.ts

@@ -0,0 +1,2 @@
+/** Messenger/Zalo-style emoticon shortcodes auto-replaced while typing (e.g. ":v" -> 😆). */
+export declare const EMOJI_SHORTCODES: Record<string, string>;

package/dist/features/composer/format-bar/format-bar.d.ts

@@ -0,0 +1,14 @@
+import { Editor } from '@tiptap/core';
+import { ReactNode } from 'react';
+interface FormatBarProps {
+    editor: Editor | null | undefined;
+    isEnlarged: boolean;
+    onToggleEnlarged: () => void;
+    /** Rendered at the right edge of the bar — the same send button shown in the input
+     *  row when this bar is closed. */
+    sendButton: ReactNode;
+}
+/** Rich-text format bar shown while the composer's "Định dạng" toggle is on: bold/italic/
+ *  underline/strike, font size, text color, clear, lists, undo/redo, and the enlarge toggle. */
+export declare function FormatBar({ editor, isEnlarged, onToggleEnlarged, sendButton }: FormatBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/composer/more-menu/more-menu.d.ts

@@ -0,0 +1,4 @@
+/** The composer's "..." button: opens a small menu (currently just "Tạo công việc").
+ *  "Tạo công việc" is still scaffolded and just shows a "coming soon" toast, since
+ *  there's no backend for it yet. */
+export declare function MoreMenu(): import("react/jsx-runtime").JSX.Element;

package/dist/features/composer/pending-attachment.d.ts

@@ -0,0 +1,10 @@
+/** A file staged in the composer, not yet sent. */
+export interface PendingAttachment {
+    file: File;
+    previewUrl?: string;
+    /** Whether this stages as an IMAGE message (inline preview) or a DOCUMENT (file card) —
+     *  resolved once at staging time (see buildPendingAttachment) so every later step
+     *  (grouping, the outgoing message's own `type`, the upload request) agrees on it,
+     *  instead of each re-deriving it from the file's extension. */
+    isImage: boolean;
+}

package/dist/features/composer/reply/composer-reply-banner.d.ts

@@ -0,0 +1,11 @@
+import { ChatMessage } from '../../../utils/chat';
+interface ComposerReplyBannerProps {
+    target: ChatMessage;
+    avatarUrl?: string | null;
+    senderName: string;
+    onCancel: () => void;
+}
+/** Shown above the composer while replying to a message: sender avatar/name + a short
+ *  preview of what's being replied to, with a button to cancel the reply. */
+export declare function ComposerReplyBanner({ target, avatarUrl, senderName, onCancel }: ComposerReplyBannerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/composer/reply/use-reply-target.d.ts

@@ -0,0 +1,12 @@
+import { ChatMessage } from '../../../utils/chat';
+/**
+ * Tracks the message the composer is currently replying to — set from a bubble's
+ * "Reply" action, read by the composer's reply banner and included in the next send,
+ * cleared on submit or when its target message is removed/recalled.
+ */
+export declare function useReplyTarget(): {
+    replyTarget: ChatMessage | null;
+    startReply: (message: ChatMessage) => void;
+    clearReply: () => void;
+    clearIfTarget: (messageId: string) => void;
+};

package/dist/features/composer/stickers.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Sticker tray content. Rendered large and sent immediately on tap (unlike the emoji
+ * picker, which inserts into the compose box). Backed by emoji glyphs for now — swap
+ * for real sticker image assets later without changing the composer/bubble contract.
+ */
+export declare const STICKERS: string[];

package/dist/features/composer/toolbar/composer-toolbar.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core';
+import { ReactNode } from 'react';
+interface ComposerToolbarProps {
+    editor: Editor | null | undefined;
+    onAttach?: () => void;
+    onAttachImages?: () => void;
+    isFormatOpen: boolean;
+    onToggleFormat: () => void;
+    isEnlarged: boolean;
+    onToggleEnlarged: () => void;
+    /** Shared send button — rendered here (on the format bar) when it's open, or by the
+     *  parent composer's input row otherwise; never both at once. */
+    sendButton: ReactNode;
+}
+/** Composer toolbar row: attach file/image, the "Định dạng" toggle, the emoji picker, and
+ *  the "..." more menu — plus the format bar it reveals underneath when toggled open. Each
+ *  button's own popover/panel lives in its own feature folder; this just arranges them. */
+export declare function ComposerToolbar({ editor, onAttach, onAttachImages, isFormatOpen, onToggleFormat, isEnlarged, onToggleEnlarged, sendButton, }: ComposerToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/composer/typing/use-typing-notifier.d.ts

@@ -0,0 +1,11 @@
+interface UseTypingNotifierOptions {
+    onTypingStart?: () => void;
+    onTypingStop?: () => void;
+}
+/** Emits typing:start at most once per burst of edits, then typing:stop after ~5s of
+ *  inactivity, a send, or unmount — whichever comes first. */
+export declare function useTypingNotifier({ onTypingStart, onTypingStop }: UseTypingNotifierOptions): {
+    notifyTyping: () => void;
+    stopTyping: () => void;
+};
+export {};

package/dist/features/composer/use-attachment-upload.d.ts

@@ -0,0 +1,4 @@
+import { ChatMessage } from '../../utils/chat';
+/** Uploads a message's staged files, then emits it as a normal outgoing message. Used both
+ *  for sending a fresh attachment message and for retrying one that previously failed. */
+export declare function useAttachmentUpload(emitOutgoingMessage: (message: ChatMessage) => void, markMessageFailed: (message: ChatMessage, failureStage: 'upload' | 'send') => void, mergeOutgoingMessage: (message: ChatMessage) => void): (message: ChatMessage) => Promise<void>;

package/dist/features/composer/use-pending-attachments.d.ts

@@ -0,0 +1,16 @@
+import { PendingAttachment } from './pending-attachment';
+/**
+ * Owns the files staged in the composer before send: validating/adding picked files,
+ * removing one, and clearing the whole batch — either after a successful send (files are
+ * already handed off, no preview URLs to release) or when discarding them outright (e.g.
+ * switching conversations), which does release every preview URL.
+ */
+export declare function usePendingAttachments(): {
+    pendingAttachments: PendingAttachment[];
+    addFiles: (files: File[], options?: {
+        forceDocument?: boolean;
+    }) => boolean;
+    removeAt: (index: number) => void;
+    clear: () => void;
+    discardAll: () => void;
+};

package/dist/features/create-conversation/create-conversation-panel.d.ts

@@ -0,0 +1,9 @@
+import { Conversation } from '../../utils/chat';
+interface CreateConversationPanelProps {
+    currentUserId: string | null;
+    onClose: () => void;
+    onCreated: (conversation: Conversation) => void;
+}
+/** Modal panel to start a direct chat or create a named group conversation. */
+export declare function CreateConversationPanel({ currentUserId, onClose, onCreated, }: CreateConversationPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/create-conversation/tabs/create-group-tab.d.ts

@@ -0,0 +1,13 @@
+import { ChatUser } from '../../../utils/chat';
+interface CreateGroupTabProps {
+    users: ChatUser[];
+    groupTitle: string;
+    isCreating: boolean;
+    isLoadingUsers: boolean;
+    error: string;
+    onSubmit: (title: string, memberIds: string[], isVerified: boolean) => void;
+}
+/** "Nhóm" tab — check off members, submit to create the group (title input lives in the
+ *  parent panel, above the department/branch filters). */
+export declare function CreateGroupTab({ users, groupTitle, isCreating, isLoadingUsers, error, onSubmit, }: CreateGroupTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/create-conversation/tabs/direct-chat-tab.d.ts

@@ -0,0 +1,12 @@
+import { ChatUser } from '../../../utils/chat';
+interface DirectChatTabProps {
+    users: ChatUser[];
+    isCreating: boolean;
+    /** True while the list for the current filters is being fetched. */
+    isLoadingUsers: boolean;
+    error: string;
+    onSelectUser: (user: ChatUser) => void;
+}
+/** "Trò chuyện" tab — pick a user to start (or reuse) a direct conversation with. */
+export declare function DirectChatTab({ users, isCreating, isLoadingUsers, error, onSelectUser, }: DirectChatTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/create-conversation/tabs/selected-members-modal.d.ts

@@ -0,0 +1,11 @@
+import { ChatUser } from '../../../utils/chat';
+interface SelectedMembersModalProps {
+    users: ChatUser[];
+    onClose: () => void;
+    onRemove: (user: ChatUser) => void;
+}
+/** Read-only-ish review of who's picked so far for the new group, opened from the
+ *  "Đã chọn N thành viên" count — each row can also be unchecked without hunting it
+ *  back down in the (possibly filtered/paginated) main list. */
+export declare function SelectedMembersModal({ users, onClose, onRemove }: SelectedMembersModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/files/file-attachment.d.ts

@@ -0,0 +1,24 @@
+import { ChatMessageAttachment } from '../../utils/chat';
+interface FileAttachmentProps {
+    attachment: ChatMessageAttachment;
+    /** Optional secondary line (e.g. sender · time) shown under the file name. */
+    meta?: string;
+    /** When provided, a "share" (forward) button is shown as the first action. */
+    onShare?: () => void;
+    /** When provided, a 4th action jumps back to the message this attachment was sent in. */
+    onJumpToMessage?: () => void;
+    /**
+     * Settings/archive layout: the whole card is clickable to preview and gets a subtle hover
+     * zoom. Chat bubbles leave this off. The action row is always on the same line as the
+     * size · time text regardless of this flag — only the clickable-card/hover behavior
+     * differs by variant now.
+     */
+    inline?: boolean;
+}
+/**
+ * Reusable file card: type icon + wrapping name + size, with Preview (opens the file in a
+ * new tab) and Download actions, plus optional Share. Used in chat bubbles, the settings
+ * document list, and the archive.
+ */
+export declare function FileAttachment({ attachment, meta, onShare, onJumpToMessage, inline }: FileAttachmentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/forward/forward-dialog.d.ts

@@ -0,0 +1,11 @@
+import { ChatMessage } from '../../utils/chat';
+interface ForwardDialogProps {
+    source: ChatMessage;
+    onClose: () => void;
+    onForward: (targetConversationIds: string[], note: string) => void;
+}
+/** Zalo-style forward picker: choose one or more conversations to forward a message into.
+ *  Built on the shared settings-modal shell/list/checkbox components (same ones the
+ *  add-member and create-group pickers use) instead of one-off markup. */
+export declare function ForwardDialog({ source, onClose, onForward }: ForwardDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/forward/use-forward-message.d.ts

@@ -0,0 +1,21 @@
+interface UseForwardMessageOptions {
+    /** Called once a forward has actually been emitted — re-pins the scroll, since a
+     *  forwarded image resizes its bubble once it loads and can otherwise settle mid-list
+     *  instead of following down, same as a normal send. */
+    onForwarded: () => void;
+}
+/**
+ * Owns the "Chuyển tiếp" (forward) submit flow: the socket calls that send the staged
+ * message on to the picked conversations, with an optional note sent ahead of it.
+ * Which message is staged (and whether ForwardDialog is open) comes from the shared
+ * `forwardStore` — `openForward`/`closeForward`/`clearIfTarget` are that store's actions
+ * directly, re-exported here only so existing call sites don't need to change.
+ */
+export declare function useForwardMessage({ onForwarded }: UseForwardMessageOptions): {
+    forwardSource: import('../../utils/chat').ChatMessage | null;
+    openForward: (message: import('../../utils/chat').ChatMessage) => void;
+    closeForward: () => void;
+    clearIfTarget: (messageId: string) => void;
+    submitForward: (targetConversationIds: string[], note: string) => void;
+};
+export {};

package/dist/features/media-preview/media-preview-modal.d.ts

@@ -0,0 +1,23 @@
+export interface MediaPreviewItem {
+    id: string;
+    url: string;
+    createdAt: string;
+    name?: string | null;
+}
+export interface MediaPreviewState {
+    items: MediaPreviewItem[];
+    index: number;
+}
+interface MediaPreviewModalProps {
+    state: MediaPreviewState;
+    onClose: () => void;
+    onIndexChange: (index: number) => void;
+}
+/**
+ * Zalo-style fullscreen photo viewer: current image large + a thumbnail rail (grouped by
+ * day). The rail's own arrows move to the prev/next image too (same as the main ones) —
+ * the active thumbnail auto-scrolls into view, so one pair of controls covers both.
+ * Reused by chat bubbles, the settings media teaser, and the archive ("Kho lưu trữ").
+ */
+export declare function MediaPreviewModal({ state, onClose, onIndexChange }: MediaPreviewModalProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/features/media-preview/use-image-lightbox.d.ts

@@ -0,0 +1,16 @@
+import { flattenFileEntries } from '../../pages/Setting/archive/archive-helpers';
+import { ChatMessage } from '../../utils/chat';
+import { MediaPreviewState } from './media-preview-modal';
+/**
+ * Owns the fullscreen media-preview overlay. `openFromBubble` resolves a bubble image
+ * click to its position in the conversation's full media archive ("Kho lưu trữ") so the
+ * rail shows every image, not just this message's own — falling back to just that
+ * message's own images if the archive hasn't loaded (or doesn't have this image) yet.
+ */
+export declare function useImageLightbox(): {
+    imageLightbox: MediaPreviewState | null;
+    openItems: (items: MediaPreviewState["items"], index: number) => void;
+    openFromBubble: (message: ChatMessage, mediaArchiveItems: Parameters<typeof flattenFileEntries>[0], urls: string[], clickedIndex: number) => void;
+    setIndex: (index: number) => void;
+    close: () => void;
+};

package/dist/features/message-list/bubble/message-actions/message-actions-menu.d.ts

@@ -0,0 +1,27 @@
+interface MessageActionsMenuProps {
+    canRemove: boolean;
+    removeLabel: string;
+    isRemoving: boolean;
+    canManagePins: boolean;
+    /** Whether the message has copyable text — false for image/file-only messages. */
+    canCopy: boolean;
+    canForward: boolean;
+    isPinned: boolean;
+    isMenuOpen: boolean;
+    menuPosition: {
+        top?: number;
+        bottom?: number;
+        left: number;
+    } | null;
+    onReply: () => void;
+    onForward: () => void;
+    onOpenMenu: (triggerRect: DOMRect) => void;
+    onCloseMenu: () => void;
+    onCopyMessage: () => void;
+    onTogglePin: () => void;
+    onViewDetails: () => void;
+    onRemove: () => void;
+}
+/** Reply/forward buttons plus the "..." options menu (copy / pin / details / recall). */
+export declare function MessageActionsMenu({ canRemove, removeLabel, isRemoving, canManagePins, canCopy, canForward, isPinned, isMenuOpen, menuPosition, onReply, onForward, onOpenMenu, onCloseMenu, onCopyMessage, onTogglePin, onViewDetails, onRemove, }: MessageActionsMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/message-list/bubble/message-bubble.d.ts

@@ -0,0 +1,53 @@
+import { ChatMessage } from '../../../utils/chat';
+import { ReactionType } from '@medipha/chat-core';
+export interface MessageBubbleProps {
+    message: ChatMessage;
+    isMine: boolean;
+    /** Shows the sender's name above incoming bubbles — group chats only (Zalo/Messenger-style). */
+    isGroup: boolean;
+    isFocused: boolean;
+    isLatestMessage: boolean;
+    showDayDivider: boolean;
+    isReactionPickerOpen: boolean;
+    myReactionType: ReactionType | null;
+    onOpenReactionPicker: () => void;
+    onCloseReactionPickerIfSelf: () => void;
+    onApplyReaction: (type: ReactionType) => void;
+    onRemoveReaction: () => void;
+    onOpenReactionModal: () => void;
+    canManagePins: boolean;
+    isPinned: boolean;
+    onTogglePin: () => void;
+    isMenuOpen: boolean;
+    menuPosition: {
+        top?: number;
+        bottom?: number;
+        left: number;
+    } | null;
+    onOpenMenu: (triggerRect: DOMRect) => void;
+    onCloseMenu: () => void;
+    onCopyMessage: () => void;
+    onViewDetails: () => void;
+    canRemove: boolean;
+    removeLabel: string;
+    isRemoving: boolean;
+    onRemove: () => void;
+    onReply: () => void;
+    onForward: () => void;
+    onJumpToReply: (replyMessageId: string) => void;
+    onOpenMentionCard: (userId: string, fallbackName?: string) => void;
+    onOpenSystemMembers: (messageId: string, totalCount: number, actionLabel: string) => void;
+    onOpenImageLightbox: (urls: string[], index: number) => void;
+    onImageSettled: () => void;
+    onRetry: () => void;
+    /** Failed send never reached the server (no `id`) — this is a local-only delete, not a recall. */
+    onDeleteFailed: () => void;
+    /** Resolves a userId to their avatar photo URL, or null to fall back to initials. */
+    resolveUserAvatar?: (userId?: string) => string | null;
+    /** Opens the account-info modal for the sender when their avatar is clicked. */
+    onOpenUserProfile?: (userId: string) => void;
+}
+/** Renders one message: day divider, SYSTEM notice, reply/forward context, bubble body
+ *  (delegated to MessageContentBody), reaction badge/picker (MessageReactions), action buttons
+ *  and options menu (MessageActionsMenu), and the trailing timestamp/status/retry. */
+export declare function MessageBubble({ message, isMine, isGroup, isFocused, isLatestMessage, showDayDivider, isReactionPickerOpen, myReactionType, onOpenReactionPicker, onCloseReactionPickerIfSelf, onApplyReaction, onRemoveReaction, onOpenReactionModal, canManagePins, isPinned, onTogglePin, isMenuOpen, menuPosition, onOpenMenu, onCloseMenu, onCopyMessage, onViewDetails, canRemove, removeLabel, isRemoving, onRemove, onReply, onForward, onJumpToReply, onOpenMentionCard, onOpenSystemMembers, onOpenImageLightbox, onImageSettled, onRetry, onDeleteFailed, resolveUserAvatar, onOpenUserProfile, }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/message-list/bubble/message-content-body.d.ts

@@ -0,0 +1,12 @@
+import { ChatMessage } from '../../../utils/chat';
+interface MessageContentBodyProps {
+    message: ChatMessage;
+    isLatestMessage: boolean;
+    onOpenImageLightbox: (urls: string[], index: number) => void;
+    onImageSettled: () => void;
+    onOpenMentionCard: (userId: string, fallbackName?: string) => void;
+}
+/** The bubble's inner content: image grid, document attachment(s), or marked-up text
+ *  with clickable links/mentions — whichever the message type calls for. */
+export declare function MessageContentBody({ message, isLatestMessage, onOpenImageLightbox, onImageSettled, onOpenMentionCard, }: MessageContentBodyProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/message-list/bubble/message-reactions.d.ts

@@ -0,0 +1,18 @@
+import { ReactionType } from '@medipha/chat-core';
+import { ChatMessage } from '../../../utils/chat';
+interface MessageReactionsProps {
+    message: ChatMessage;
+    isPickerOpen: boolean;
+    myReactionType: ReactionType | null;
+    onOpenPicker: () => void;
+    onClosePickerIfSelf: () => void;
+    onApplyReaction: (type: ReactionType) => void;
+    onRemoveReaction: () => void;
+    onOpenModal: () => void;
+}
+/** Compact aggregate reaction badge plus a separate hover-triggered picker for applying a type.
+ *  Messenger-style trigger: shows a generic smiley until you've reacted, then shows your
+ *  own reaction's emoji instead — clicking it directly re-applies that same reaction, and
+ *  hovering still opens the picker to switch to a different one. */
+export declare function MessageReactions({ message, isPickerOpen, myReactionType, onOpenPicker, onClosePickerIfSelf, onApplyReaction, onRemoveReaction, onOpenModal, }: MessageReactionsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/features/message-list/bubble/rich-message-content.d.ts

@@ -0,0 +1,8 @@
+import { RichMessageDocument } from '../../../utils/chat';
+interface RichMessageContentProps {
+    content: RichMessageDocument;
+    onOpenMentionCard: (userId: string, fallbackName?: string) => void;
+}
+/** Renders backend rich content with the same Tiptap structure as the composer, read-only. */
+export declare function RichMessageContent({ content, onOpenMentionCard }: RichMessageContentProps): import("react/jsx-runtime").JSX.Element;
+export {};