@droppii-org/chat-mobile 0.2.63 → 0.2.65

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -29,10 +29,13 @@ import { LegendChatMessage } from './legend/LegendChatMessage';
 import { LegendChatDay } from './legend/LegendChatDay';
 import { LegendChatLoadEarlier } from './legend/LegendChatLoadEarlier';
 import { useChatDetailContext } from '../../context/ChatDetailContext';
-import { getFlowInputButtonsNode } from '../../utils/flows';
+import { getFlowInputButtonsNodes } from '../../utils/flows';
 import { InputButtonFlow } from '../../components/flows/inputButtons';
 import { useResetFlow, useRunFlow } from '../../hooks/flows/useFlow';
-import type { IRunConversationFlowPayload } from '../../types/flows';
+import type {
+  GroupChild,
+  IRunConversationFlowPayload,
+} from '../../types/flows';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import { ChatEvent, type ScrollToMessagePayload } from '../../types/events';
 import { useMessageStore } from '../../store/message';
@@ -110,6 +113,10 @@ export const ChatListLegend = memo(
     const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
     const rowRefsMap = useRef<Map<string, View | null>>(new Map());
     const [showBadge, setShowBadge] = useState(false);
+    const [highlightedId, setHighlightedId] = useState<string | null>(null);
+    const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+      null
+    );
 
     const { applicationType } = useChatContext();
     const searchMessages = useMessageStore((s) => s.searchMessages);
@@ -143,9 +150,9 @@ export const ChatListLegend = memo(
 
           const message = item as MessageItem;
           const isOutgoing = message.sendID === currentUserId;
-          const isLastIncoming =
-            !isOutgoing &&
+          const isLastMessage =
             (message.clientMsgID || message.serverMsgID) === lastMessageId;
+          const isLastIncoming = !isOutgoing && isLastMessage;
           const messageId =
             message.clientMsgID ||
             message.serverMsgID ||
@@ -158,9 +165,13 @@ export const ChatListLegend = memo(
 
           const { dayStart, createdAt } = messageData;
 
-          let flowInputButtonsNode = null;
-          if (isLastIncoming && isBotConversation) {
-            flowInputButtonsNode = getFlowInputButtonsNode(
+          let flowInputButtonsNodes: GroupChild<'input-buttons'>[] = [];
+          if (
+            ((isLastMessage && conversationFlow?.havingBotMessage === false) ||
+              isLastIncoming) &&
+            isBotConversation
+          ) {
+            flowInputButtonsNodes = getFlowInputButtonsNodes(
               conversationFlow?.flowCurrentStep
             );
           }
@@ -193,15 +204,16 @@ export const ChatListLegend = memo(
                       : undefined
                   }
                   customMessageItemFactory={customMessageItemFactory}
+                  isHighlighted={highlightedId === messageId}
                 />
-                {!!flowInputButtonsNode && (
-                  <InputButtonFlow
-                    nodeData={flowInputButtonsNode}
-                    onResetFlow={onResetFlow}
-                    onRunFlow={onRunFlow}
-                  />
-                )}
               </KContainer.View>
+              {flowInputButtonsNodes && flowInputButtonsNodes.length > 0 && (
+                <InputButtonFlow
+                  nodeData={flowInputButtonsNodes}
+                  onResetFlow={onResetFlow}
+                  onRunFlow={onRunFlow}
+                />
+              )}
             </>
           );
         } catch (error) {
@@ -229,7 +241,9 @@ export const ChatListLegend = memo(
         onResetFlow,
         onRunFlow,
         conversationFlow?.flowCurrentStep,
+        conversationFlow?.havingBotMessage,
         retryMessage,
+        highlightedId,
       ]
     );
 
@@ -320,10 +334,13 @@ export const ChatListLegend = memo(
 
         const isOutgoing = message.sendID === currentUserId;
         const isLastIncoming = !isOutgoing && messageId === lastMessageId;
+        const flowInputButtonsNodes = getFlowInputButtonsNodes(
+          conversationFlow?.flowCurrentStep
+        );
         if (
           isLastIncoming &&
           isBotConversation &&
-          getFlowInputButtonsNode(conversationFlow?.flowCurrentStep)
+          flowInputButtonsNodes.length > 0
         ) {
           return undefined;
         }
@@ -427,11 +444,21 @@ export const ChatListLegend = memo(
 
           if (index >= 0) {
             try {
-              listRef.current?.scrollToIndex({
-                index,
-                animated: true,
-                viewPosition: 0.5,
-              });
+              listRef.current
+                ?.scrollToIndex({
+                  index,
+                  animated: true,
+                  viewPosition: 0.5,
+                })
+                .finally(() => {
+                  if (highlightTimerRef.current)
+                    clearTimeout(highlightTimerRef.current);
+                  setHighlightedId(clientMessageId);
+                  highlightTimerRef.current = setTimeout(
+                    () => setHighlightedId(null),
+                    5000
+                  );
+                });
             } catch {
               // scrollToIndex throws if item not rendered yet — force refetch messages
               searchMessages({
@@ -487,7 +514,7 @@ export const ChatListLegend = memo(
           getFixedItemSize={getFixedItemSize}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
           recycleItems={false}
-          extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}`}
+          extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}-${highlightedId ?? ''}`}
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}
           maintainScrollAtEnd={true}

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -35,6 +35,7 @@ interface LegendChatMessageProps {
   onPress?: (message: MessageItem) => void;
   onLongPress?: () => void;
   customMessageItemFactory?: (m: MessageItem) => ReactNode;
+  isHighlighted?: boolean;
 }
 
 const messageComponentMap: Partial<
@@ -69,6 +70,7 @@ export const LegendChatMessage = memo(
     onPress,
     onLongPress,
     customMessageItemFactory,
+    isHighlighted,
   }: LegendChatMessageProps) => {
     const handlePress = useCallback(() => {
       onPress?.(message);
@@ -107,6 +109,7 @@ export const LegendChatMessage = memo(
               createdAtTime={createdAtTime}
               onMediaPress={hasMediaPress ? onMediaPress : undefined}
               onPressUrl={hasUrlPress ? onPressUrl : undefined}
+              isHighlighted={isHighlighted}
             />
           </LongPressWrapper>
 

package/src/store/message.ts

@@ -224,6 +224,8 @@ export const markMessageRevoked = (clientMsgID: string) => {
     .getState()
     .updateOneMessage({ clientMsgID, contentType: MessageType.RevokeMessage });
 
+  DeviceEventEmitter.emit(ChatEvent.MessageRevoked, { clientMsgID });
+
   revokeQuotedReferences(clientMsgID);
 };
 

package/src/translation/resources/i18n.ts

@@ -122,9 +122,14 @@ const i18nKey: Record<string, string> = {
   'all': 'Tất cả',
   'contacts': 'Liên hệ',
   'messages': 'Tin nhắn',
-  'search:empty_description':
-    'Không tìm thấy kết quả nào\nHãy thử lại với cách viết hoặc kết hợp cụm từ khác phù hợp hơn.',
+  'search:empty_description': 'Không tìm thấy kết quả nào',
+  'search:empty_hint':
+    'Bạn có thể tìm kiếm theo liên hệ hoặc nội dung tin nhắn',
+  'search_message:empty_hint': 'Bạn có thể tìm kiếm theo nội dung tin nhắn',
+  'search_conversation:empty_hint': 'Bạn có thể tìm kiếm theo liên hệ',
   'view_all': 'Xem tất cả',
+  'search_message:revoked_message': 'Tin nhắn đã được thu hồi',
+  'chat:no_send_permission': 'Bạn không có quyền gửi tin nhắn',
 };
 
 export default {

package/src/types/chat.ts

@@ -1,4 +1,5 @@
 import {
+  GroupPermission,
   MessageType,
   type ConversationItem,
   type MessageItem,
@@ -205,13 +206,18 @@ export interface MessageStore {
 export interface ChatDetailContextType {
   conversationFlow?: IConversationFlow;
   isBotConversation: boolean;
-  setConverationFlowStep: (step?: IConversationFlowStep) => void;
+  setConverationFlowStep: (
+    step?: IConversationFlowStep,
+    isEnd?: boolean,
+    havingBotMessage?: boolean
+  ) => void;
   flowState?: DFlowState;
   runButtonContext: (stringContext: DFlowContext) => Promise<boolean>;
   conversation?: ConversationItem;
   quotedMessage?: MessageItem;
   setQuotedMessage: (item?: MessageItem) => void;
   conversationFlowMainMenu?: InputButtonItem[];
+  groupPermissions: GroupPermission[];
 }
 
 export interface ChatDetailProviderProps extends PropsWithChildren {}

package/src/types/events.ts

@@ -1,8 +1,20 @@
+import type { GroupPermission } from '@droppii/openim-rn-client-sdk';
+
 export enum ChatEvent {
   ScrollToMessage = 'chat:scroll_to_message',
   ScrollToBottom = 'chat:scroll_to_bottom',
+  MessageRevoked = 'chat:message_revoked',
+  GroupPermissionUpdated = 'chat:group_permission_updated',
 }
 
 export interface ScrollToMessagePayload {
   clientMessageId: string;
 }
+
+export interface MessageRevokedPayload {
+  clientMsgID: string;
+}
+
+export interface GroupPermissionUpdatedPayload {
+  permissions: GroupPermission[];
+}

package/src/types/flows.ts

@@ -91,10 +91,14 @@ export interface IConversationFlow {
   chatType: PeerType;
   applicationType: DChatApplicationType;
   flowCurrentStep: IConversationFlowStep | null;
+  havingBotMessage: boolean;
+  flowIsEnd: boolean;
 }
 
 export interface IRunConversationFlowResponse {
   flowNextStep: IConversationFlowStep | null;
+  isEnd: boolean;
+  havingBotMessage: boolean;
 }
 
 export interface IRunConversationFlowPayload {

package/src/utils/flows.ts

@@ -4,15 +4,14 @@ import {
   type IConversationFlowStep,
 } from '../types/flows';
 
-export const getFlowInputButtonsNode = (
+export const getFlowInputButtonsNodes = (
   step?: IConversationFlowStep | null
 ) => {
-  if (!step) return null;
+  if (!step) return [];
   const childrenNode = step?.data?.children || [];
-  const inputButtonsNode = childrenNode?.find(
-    (f) => f.type === NodeTypes.InputButtons
-  ) as GroupChild<'input-buttons'>;
-  return inputButtonsNode;
+  const inputButtonsNodes =
+    childrenNode?.filter?.((f) => f.type === NodeTypes.InputButtons) || [];
+  return inputButtonsNodes as GroupChild<'input-buttons'>[];
 };
 
 export const DEFAULT_BUTTON_ID = 'default-item-button';

package/src/utils/highlightSearch.ts

@@ -0,0 +1,48 @@
+export interface HighlightResult {
+  before: string;
+  match: string;
+  after: string;
+}
+
+export const highlightSearch = (
+  text: string,
+  keyword: string,
+  maxLength = 30
+): HighlightResult | null => {
+  if (!keyword) return null;
+
+  const lowerText = text.toLowerCase();
+  const lowerKeyword = keyword.toLowerCase();
+  const index = lowerText.indexOf(lowerKeyword);
+
+  if (index === -1) return null;
+
+  const before = text.slice(0, index);
+  const match = text.slice(index, index + keyword.length);
+  const after = text.slice(index + keyword.length);
+
+  if (keyword.length >= maxLength) {
+    return { before: '', match: match.slice(0, maxLength), after: '' };
+  }
+
+  const remain = maxLength - match.length;
+  let left = Math.floor(remain / 2);
+  let right = remain - left;
+
+  if (before.length < left) {
+    right += left - before.length;
+    left = before.length;
+  }
+
+  if (after.length < right) {
+    left += right - after.length;
+    right = after.length;
+  }
+
+  const displayedBefore =
+    before.length > left ? '…' + before.slice(before.length - left) : before;
+  const displayedAfter =
+    after.length > right ? after.slice(0, right) + '…' : after;
+
+  return { before: displayedBefore, match, after: displayedAfter };
+};

package/src/utils/messageUtils.ts

@@ -216,6 +216,21 @@ export const getPinnedMessagePreview = (
   }
 };
 
+export const getSenderName = (
+  message: MessageItem,
+  currentUserId?: string,
+  conversation?: ConversationItem
+): string => {
+  const sender =
+    currentUserId && message.sendID === currentUserId
+      ? 'Bạn'
+      : message?.senderNickname ||
+        (conversation?.peerType === PeerType.Bot
+          ? conversation?.showName || ''
+          : undefined);
+  return sender || '';
+};
+
 export interface GetLastMessageTextParams {
   message: MessageItem | undefined;
   currentUserId?: string;
@@ -233,13 +248,7 @@ export const getLastMessageText = ({
   const preview = getMessagePreview(message);
   if (!preview) return '';
 
-  const sender =
-    currentUserId && message.sendID === currentUserId
-      ? 'Bạn'
-      : message.senderNickname ||
-        (conversation?.peerType === PeerType.Bot
-          ? conversation?.showName || ''
-          : undefined);
+  const sender = getSenderName(message, currentUserId, conversation);
 
   if (!sender) return preview;