@droppii-org/chat-mobile 0.2.105 → 0.2.106

package/src/hooks/useInputState.ts

@@ -0,0 +1,57 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useInputStateStore } from '../store';
+import {
+  getActiveTypers,
+  getNextExpiryAt,
+  type InputStateRecord,
+} from '../utils/inputState';
+
+export interface InputStateResult {
+  /**
+   * Whether the indicator belongs on screen. Unlike the sentence this needs no
+   * name, so it can be answered here.
+   */
+  isTyping: boolean;
+  /** Everyone still inside the window, oldest signal first. */
+  typers: readonly InputStateRecord[];
+}
+
+/**
+ * Typing state for one conversation.
+ *
+ * Expiry is read from each record's timestamp rather than tracked with a timer
+ * per user, and the hook schedules a single wake-up at the moment the next
+ * typer falls out of the window. So with A typing at t=0 and B at t=2s the
+ * sentence moves from A, to both, to B alone at t=3s, and disappears at t=5s —
+ * without polling between those points.
+ */
+export const useInputState = (conversationID?: string): InputStateResult => {
+  const state = useInputStateStore((store) =>
+    conversationID ? store.byConversation[conversationID] : undefined
+  );
+  // Bumped by the expiry timer below. Records go stale on a clock rather than
+  // on a store write, so something has to ask the question again.
+  const [tick, setTick] = useState(0);
+
+  const typers = useMemo(
+    // `tick` is not read here — it is a dep so that the expiry timer below can
+    // force a recount. Records fall out of the window on a clock, so `state`
+    // alone would leave an expired typer on screen until the next store write.
+    () => getActiveTypers(state, Date.now()),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state, tick]
+  );
+
+  useEffect(() => {
+    const expiresAt = getNextExpiryAt(state, Date.now());
+    if (expiresAt === null) return;
+
+    const timer = setTimeout(
+      () => setTick((value) => value + 1),
+      Math.max(0, expiresAt - Date.now())
+    );
+    return () => clearTimeout(timer);
+  }, [state, typers]);
+
+  return { isTyping: typers.length > 0, typers };
+};

package/src/hooks/useInputStateBroadcast.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef } from 'react';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+
+/**
+ * Broadcasts this device's composing state for a conversation.
+ *
+ * The SDK throttles the outgoing frames itself, so `notifyTyping` is safe to
+ * call on every keystroke — no debounce here would only duplicate that. What
+ * this hook does own is the start/stop rule: an empty draft counts as stopping,
+ * not as typing, and leaving the screen has to stop too or the peer is left
+ * watching an indicator for a composer nobody is in front of.
+ */
+export const useInputStateBroadcast = (conversationID?: string) => {
+  // Mirrors what we last told the SDK, so a cleared draft or a blur does not
+  // fire a stop frame for a conversation we never announced typing in.
+  const isTypingRef = useRef(false);
+
+  const send = useCallback(
+    (focus: boolean) => {
+      if (!conversationID) return;
+      // Only a repeated *stop* is redundant. A repeated start is the heartbeat
+      // that keeps the peer's TTL window open — suppressing it would let the
+      // indicator expire while the person is still typing.
+      if (!focus && !isTypingRef.current) return;
+
+      isTypingRef.current = focus;
+      OpenIMSDK.changeInputStates({ conversationID, focus }).catch(() => {
+        // Typing state is cosmetic — a failed frame must not surface to the
+        // person typing, and the peer's own 3s window cleans up after it.
+        isTypingRef.current = !focus;
+      });
+    },
+    [conversationID]
+  );
+
+  /** Any draft change: text present means typing, empty means stopped. */
+  const notifyTyping = useCallback(
+    (text?: string) => send(!!text && text.trim().length > 0),
+    [send]
+  );
+
+  /** Explicit stop — message sent, input blurred, screen left. */
+  const notifyStoppedTyping = useCallback(() => send(false), [send]);
+
+  // Switching conversations, or unmounting, stops the previous one.
+  useEffect(() => {
+    return () => {
+      notifyStoppedTyping();
+    };
+  }, [notifyStoppedTyping]);
+
+  return { notifyTyping, notifyStoppedTyping };
+};

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

@@ -59,6 +59,7 @@ import { DFlowState } from '../../types/chat';
 import { useAttachmentMapping } from './hooks/useAttachmentMapping';
 import type { AttachmentType } from '../../types/attachment';
 import { useChatCompose } from '../../hooks/useChatCompose';
+import { useInputStateBroadcast } from '../../hooks/useInputStateBroadcast';
 import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import { openBotMenuSheet } from './BotMenuSheet';
@@ -111,6 +112,9 @@ export const ChatComposer = memo(
     const { mutateAsync: closeSupportSession } = useCloseSupportSession();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
+    const { notifyTyping, notifyStoppedTyping } = useInputStateBroadcast(
+      conversation?.conversationID
+    );
     const { allowed: isSendMessageAllowed, reason: sendDeniedReason } =
       useCanSendMessage();
 
@@ -226,6 +230,9 @@ export const ChatComposer = memo(
       // "ghost" mention anchored past the end of an empty string). See
       // useMentionComposer.clear()'s doc comment.
       mentionComposer.clear();
+      // Stop before awaiting the send: the peer should lose the indicator as
+      // the message goes out, not once it round-trips.
+      notifyStoppedTyping();
       try {
         await compose.send(mentionsToSend);
       } catch (error) {
@@ -248,6 +255,7 @@ export const ChatComposer = memo(
       sendDeniedReason,
       mentionComposer.mentions,
       mentionComposer.clear,
+      notifyStoppedTyping,
       inputRef,
     ]);
 
@@ -324,12 +332,19 @@ export const ChatComposer = memo(
 
     const handleInputBlur = useCallback(() => {
       setIsInputFocused(false);
-    }, [setIsInputFocused]);
+      notifyStoppedTyping();
+    }, [setIsInputFocused, notifyStoppedTyping]);
 
     // Routes through mentionComposer instead of compose.setText directly —
     // it owns the atomic-delete/reconcile pipeline and calls compose.setText
     // itself once the corrected text is known (see useMentionComposer).
-    const handleChangeText = mentionComposer.handleChangeText;
+    const handleChangeText = useCallback(
+      (text?: string) => {
+        notifyTyping(text);
+        mentionComposer.handleChangeText(text);
+      },
+      [notifyTyping, mentionComposer]
+    );
 
     const handleInputContentSizeChange = useCallback(
       (event: { nativeEvent: { contentSize: { height: number } } }) => {

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

@@ -68,6 +68,7 @@ import { resolveImageDisplayDims } from '../../components/messages/imageMessage'
 import ChatImageDimens, {
   CHAT_IMAGE_VIEW_SOURCE,
 } from '../../utils/chatImageDimens';
+import { ChatTypingIndicator } from './ChatTypingIndicator';
 
 // Cluster spacing: a wide gap after the message that closes a cluster, a tight
 // one between messages inside it. These override the flat margin on the row
@@ -1020,6 +1021,7 @@ export const ChatListLegend = memo(
             {showBadge && <KContainer.View style={styles.badge} />}
           </KContainer.Touchable>
         </Animated.View>
+        <ChatTypingIndicator />
       </KContainer.View>
     );
   }

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

@@ -0,0 +1,89 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KColors, KContainer, KLabel, KSpacingValue } from '@droppii/libs';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
+import { TypingDots } from '../../components/TypingDots';
+import { useChatDetailContext } from '../../context/ChatDetailContext';
+import { useGroupMemberName } from '../../hooks/groups/useGroupMemberName';
+import { useInputState } from '../../hooks/useInputState';
+import { resolveTypingText } from '../../utils/inputState';
+import { trans } from '../../translation';
+
+/**
+ * "<name> đang nhập..." above the composer, with the bouncing dots.
+ *
+ * Renders nothing while nobody is typing — an empty row would reserve height
+ * and nudge the message list every time somebody started or stopped.
+ */
+export const ChatTypingIndicator = memo(() => {
+  const { conversation } = useChatDetailContext();
+  const isGroup = conversation?.peerType === PeerType.Group;
+
+  const { isTyping, typers } = useInputState(conversation?.conversationID);
+
+  // Only the first typer is ever named — past one person the copy collapses to
+  // "Nhiều người", so a single lookup covers every case.
+  const firstTyperId = typers[0]?.userID;
+  const memberName = useGroupMemberName(
+    isGroup ? conversation?.groupID : undefined,
+    isGroup ? firstTyperId : undefined
+  );
+
+  // A 1:1 or bot thread is named after its only other participant, so the
+  // conversation's own name is the answer and no lookup is needed.
+  // A key plus its values, not a finished string: the name renders bold while
+  // the rest does not, so RichText needs the pieces apart.
+  const copy = resolveTypingText(
+    typers.length,
+    isGroup ? memberName : conversation?.showName
+  );
+
+  if (!isTyping) return null;
+
+  // Dots go up the moment somebody types; the sentence follows once the name
+  // resolves. Waiting for the name would hold the whole indicator back on a
+  // network round-trip the dots do not depend on.
+  return (
+    <KContainer.View row style={styles.row}>
+      {!!copy && (
+        <KLabel.RichText
+          typo="TextXsNormal"
+          color={KColors.gray.light}
+          numberOfLines={1}
+          richTextOptions={{
+            i18nKey: trans(copy.key),
+            values: copy.values,
+            components: {
+              bold: (
+                <KLabel.Text typo="TextXsBold" color={KColors.gray.light} />
+              ),
+            },
+          }}
+        />
+      )}
+      <TypingDots
+        fill={KColors.gray.light}
+        width={13}
+        height={5.91}
+        style={styles.dot}
+      />
+    </KContainer.View>
+  );
+});
+
+ChatTypingIndicator.displayName = 'ChatTypingIndicator';
+
+const styles = StyleSheet.create({
+  row: {
+    paddingHorizontal: KSpacingValue['0.5rem'],
+    paddingVertical: 2,
+    gap: 2,
+    alignItems: 'flex-end',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+  },
+  dot: {
+    marginBottom: 3,
+  },
+});

package/src/store/index.ts

@@ -1,3 +1,4 @@
 export * from './storeConfig';
 export * from './user';
 export * from './conversation';
+export * from './inputState';

package/src/store/inputState.ts

@@ -0,0 +1,76 @@
+import { create } from 'zustand';
+import type { ConversationInputStatus } from '@droppii/openim-rn-client-sdk';
+import type {
+  ConversationInputState,
+  InputStateMap,
+} from '../utils/inputState';
+
+export interface InputStateStore {
+  /** conversationID -> userID -> record. */
+  byConversation: InputStateMap;
+  /**
+   * Apply one OnInputStatusChanged payload.
+   *
+   * A non-empty `platformIDs` means that user is composing; an empty list is
+   * how the SDK reports that they stopped, so it removes them outright rather
+   * than storing an inactive record.
+   */
+  applyInputStatus: (status: ConversationInputStatus) => void;
+  /** Remove one user now — their message arrived, or they went idle. */
+  removeTyper: (conversationID: string, userID: string) => void;
+}
+
+const withoutUser = (
+  state: ConversationInputState,
+  userID: string
+): ConversationInputState | undefined => {
+  const next = { ...state };
+  delete next[userID];
+  // Undefined rather than an empty object, so a leftover record can never read
+  // as "somebody is typing".
+  return Object.keys(next).length > 0 ? next : undefined;
+};
+
+export const useInputStateStore = create<InputStateStore>()((set) => ({
+  byConversation: {},
+
+  applyInputStatus({ conversationID, userID, platformIDs }) {
+    if (!conversationID || !userID) return;
+
+    set((state) => {
+      const current = state.byConversation[conversationID];
+
+      if (!platformIDs || platformIDs.length === 0) {
+        if (!current?.[userID]) return state;
+        const remaining = withoutUser(current, userID);
+        const byConversation = { ...state.byConversation };
+        if (remaining) byConversation[conversationID] = remaining;
+        else delete byConversation[conversationID];
+        return { byConversation };
+      }
+
+      return {
+        byConversation: {
+          ...state.byConversation,
+          [conversationID]: {
+            ...current,
+            [userID]: { userID, platformIDs, updatedAt: Date.now() },
+          },
+        },
+      };
+    });
+  },
+
+  removeTyper(conversationID, userID) {
+    set((state) => {
+      const current = state.byConversation[conversationID];
+      if (!current?.[userID]) return state;
+
+      const remaining = withoutUser(current, userID);
+      const byConversation = { ...state.byConversation };
+      if (remaining) byConversation[conversationID] = remaining;
+      else delete byConversation[conversationID];
+      return { byConversation };
+    });
+  },
+}));

package/src/translation/resources/i18n.ts

@@ -1,6 +1,8 @@
 const i18nKey: Record<string, string> = {
   'thread_card_bot_crm_name': 'Droppii Hỗ Trợ',
   'thread_card_fallback_name': 'Người dùng',
+  'chat:typing_single': '<bold>{{name}}</bold> đang nhập',
+  'chat:typing_multiple': 'Nhiều người đang nhập',
   'chat:file_too_large':
     'Tệp tải lên không hợp lệ. Kích thước tệp không được vượt quá {{maxSize}}MB',
   'chat:file_max_count': 'Chỉ có thể đính kèm tối đa 3 tệp',

package/src/utils/inputState.ts

@@ -0,0 +1,104 @@
+import type { Platform } from '@droppii/openim-rn-client-sdk';
+
+/** A typer drops out this long after their last signal — BR-002. */
+export const INPUT_STATE_TTL = 3_000;
+
+/** A single name longer than this is truncated before it goes in the sentence. */
+const TYPING_NAME_MAX_LENGTH = 30;
+
+export interface InputStateRecord {
+  userID: string;
+  /** Devices that user is composing from. An empty list means they stopped. */
+  platformIDs: Platform[];
+  /** When their most recent signal arrived — the clock the TTL runs against. */
+  updatedAt: number;
+}
+
+/** userID -> record, for one conversation. */
+export type ConversationInputState = Readonly<Record<string, InputStateRecord>>;
+
+/** conversationID -> that conversation's typers. */
+export type InputStateMap = Readonly<Record<string, ConversationInputState>>;
+
+const EMPTY_TYPERS: readonly InputStateRecord[] = [];
+
+/**
+ * Typers still inside the TTL window, oldest signal first.
+ *
+ * Expiry is derived from `updatedAt` rather than driven by one timer per user:
+ * the whole point is that each typer runs on their own clock. With A typing at
+ * t=0 and B at t=2s, A has to drop at t=3s while B stays until t=5s — a single
+ * shared timer reset by the newest signal would keep both alive to t=5s.
+ */
+export const getActiveTypers = (
+  state: ConversationInputState | undefined,
+  now: number
+): readonly InputStateRecord[] => {
+  if (!state) return EMPTY_TYPERS;
+
+  const active = Object.values(state).filter(
+    (record) =>
+      record.platformIDs.length > 0 && now - record.updatedAt < INPUT_STATE_TTL
+  );
+
+  if (active.length === 0) return EMPTY_TYPERS;
+  return active.sort((a, b) => a.updatedAt - b.updatedAt);
+};
+
+/**
+ * When the next active typer falls out of the window, or null if none will.
+ *
+ * The caller uses this to wake up exactly once per expiry instead of polling.
+ */
+export const getNextExpiryAt = (
+  state: ConversationInputState | undefined,
+  now: number
+): number | null => {
+  const active = getActiveTypers(state, now);
+  if (active.length === 0) return null;
+
+  // Sorted oldest first, so the first entry expires first.
+  return active[0]!.updatedAt + INPUT_STATE_TTL;
+};
+
+export const truncateTypingName = (name: string): string =>
+  name.length > TYPING_NAME_MAX_LENGTH
+    ? `${name.slice(0, TYPING_NAME_MAX_LENGTH)}...`
+    : name;
+
+/**
+ * Which copy to render, as a key plus its values.
+ *
+ * Deliberately not a finished string: the name is styled differently from the
+ * rest of the sentence, so the caller needs the pieces separately to hand them
+ * to a rich-text renderer. Keeping translation out of here also leaves this
+ * module free of any dependency on the i18n layer.
+ */
+export interface TypingTextDescriptor {
+  key: string;
+  values?: Record<string, string>;
+}
+
+export const TYPING_TEXT_KEYS = {
+  single: 'chat:typing_single',
+  multiple: 'chat:typing_multiple',
+} as const;
+
+/**
+ * Copy for a set of typers, or null when the indicator should be hidden.
+ *
+ * Only one typer is ever named. Beyond that the sentence collapses, so the
+ * caller never has to resolve a second name.
+ */
+export const resolveTypingText = (
+  typerCount: number,
+  singleName?: string
+): TypingTextDescriptor | null => {
+  if (typerCount === 0) return null;
+  if (typerCount > 1) return { key: TYPING_TEXT_KEYS.multiple };
+  if (!singleName) return null;
+  return {
+    key: TYPING_TEXT_KEYS.single,
+    values: { name: truncateTypingName(singleName) },
+  };
+};

package/src/utils/message.ts

@@ -119,6 +119,21 @@ export const hasNewHistoryMessages = (
   });
 };
 
+/**
+ * Conversation ids a message could be filed under.
+ *
+ * A 1:1 id is built from both participants and their order is not recoverable
+ * from the message alone, so both spellings come back — `belongsToConversation`
+ * compares against both for exactly the same reason.
+ */
+export const conversationIdsOfMessage = (message: MessageItem): string[] =>
+  message.sessionType === SessionType.Group
+    ? [getConversationID(SessionType.Group, message.groupID)]
+    : [
+        getConversationID(SessionType.Single, message.sendID, message.recvID),
+        getConversationID(SessionType.Single, message.recvID, message.sendID),
+      ];
+
 export const belongsToConversation = (
   message: MessageItem,
   conversationId?: string,