@droppii-org/chat-mobile 0.2.78 → 0.2.80

package/src/components/messages/linkMessage/index.tsx

@@ -7,11 +7,12 @@ import {
   KColors,
   KSpacingValue,
 } from '@droppii/libs';
-import { formatMessageTime } from '../types';
 import type { BaseLegendMessageProps } from '../types';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { parseUrlMetadata } from '../../../utils/messageUtils';
 import { messageStyles } from '../styles';
+import { getTailCornerStyle } from '../bubbleTail.utils';
+import { BubbleTailRow } from '../BubbleTailRow';
 
 const renderTextWithLinks = (
   content: string,
@@ -61,22 +62,22 @@ export const LinkMessage = memo(
   ({
     message,
     isOutgoing,
-    createdAtTime,
     onPressUrl,
     isHighlighted,
+    groupPosition,
   }: BaseLegendMessageProps & { onPressUrl?: (url: string) => void }) => {
     const content = message?.urlTextElem?.content;
     const urls = message?.urlTextElem?.urls ?? [];
     const metadata = parseUrlMetadata(message.ex);
-    const timeLabel = formatMessageTime(createdAtTime);
 
     return (
-      <>
+      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
         <KContainer.View
           style={[
             styles.bubble,
             isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
             isHighlighted && messageStyles.bubbleHighlighted,
+            getTailCornerStyle(isOutgoing, groupPosition),
           ]}
         >
           {!!content?.trim() && (
@@ -131,19 +132,7 @@ export const LinkMessage = memo(
             </KContainer.Touchable>
           )}
         </KContainer.View>
-
-        <KContainer.View row alignItems style={styles.timeLabel}>
-          {!isOutgoing && timeLabel ? (
-            <KLabel.Text
-              typo="TextXsNormal"
-              color={CHAT_BUBBLE_COLORS.timestamp}
-              marginL="0.25rem"
-            >
-              {timeLabel}
-            </KLabel.Text>
-          ) : null}
-        </KContainer.View>
-      </>
+      </BubbleTailRow>
     );
   }
 );
@@ -184,5 +173,4 @@ const styles = StyleSheet.create({
     paddingVertical: KSpacingValue['0.5rem'],
     gap: 2,
   },
-  timeLabel: { gap: 4, marginTop: 2 },
 });

package/src/components/messages/mergedMessage/index.tsx

@@ -2,9 +2,16 @@ import { memo } from 'react';
 import { KContainer } from '@droppii/libs';
 import { MergedImageGrid } from '../../MergedImageGrid';
 import { messageStyles } from '../styles';
+import { getTailCornerStyle } from '../bubbleTail.utils';
+import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
 export const MergedMessage = memo(
-  ({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => {
+  ({
+    message,
+    isOutgoing,
+    onMediaPress,
+    groupPosition,
+  }: BaseLegendMessageProps) => {
     const mergeElem = (message as any).mergeElem;
 
     if (!mergeElem?.multiMessage) {
@@ -17,20 +24,25 @@ export const MergedMessage = memo(
     );
 
     return (
-      <KContainer.View
-        style={[
-          messageStyles.bubble,
-          isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
-        ]}
-      >
-        {imageMessages.length > 0 && (
-          <MergedImageGrid
-            images={imageMessages}
-            maxDisplay={3}
-            onMediaPress={onMediaPress}
-          />
-        )}
-      </KContainer.View>
+      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+        <KContainer.View
+          style={[
+            messageStyles.bubble,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.bubbleReceived,
+            getTailCornerStyle(isOutgoing, groupPosition),
+          ]}
+        >
+          {imageMessages.length > 0 && (
+            <MergedImageGrid
+              images={imageMessages}
+              maxDisplay={3}
+              onMediaPress={onMediaPress}
+            />
+          )}
+        </KContainer.View>
+      </BubbleTailRow>
     );
   }
 );

package/src/components/messages/quotedMessage/index.tsx

@@ -1,6 +1,8 @@
 import { memo, useCallback, useMemo } from 'react';
 import { messageStyles } from '../styles';
-import { formatMessageTime, type BaseLegendMessageProps } from '../types';
+import { getTailCornerStyle } from '../bubbleTail.utils';
+import { BubbleTailRow } from '../BubbleTailRow';
+import { type BaseLegendMessageProps } from '../types';
 import {
   KColors,
   KContainer,
@@ -25,7 +27,7 @@ import { ChatEvent } from '../../../types/events';
 interface QuotedMessageProps extends BaseLegendMessageProps {}
 
 const QuotedMessage = memo((props: QuotedMessageProps) => {
-  const { message, isOutgoing, createdAtTime, isHighlighted } = props || {};
+  const { message, isOutgoing, isHighlighted, groupPosition } = props || {};
 
   const { conversation } = useChatDetailContext();
 
@@ -35,8 +37,6 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
 
   const messagePreview = getMessagePreviewParts(quotedMessage);
 
-  const timeLabel = formatMessageTime(createdAtTime);
-
   const imageUrl = useMemo(() => {
     switch (quotedMessage?.contentType) {
       case MessageType.PictureMessage:
@@ -64,13 +64,14 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
   }, [quotedMessage]);
 
   return (
-    <>
+    <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
       <KContainer.View
         style={[
           messageStyles.bubble,
           styles.container,
           isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
           isHighlighted && messageStyles.bubbleHighlighted,
+          getTailCornerStyle(isOutgoing, groupPosition),
         ]}
       >
         <KContainer.Touchable
@@ -128,19 +129,7 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
           {message?.quoteElem?.text || ''}
         </KLabel.Text>
       </KContainer.View>
-
-      <KContainer.View row alignItems style={styles.timeLabel}>
-        {!isOutgoing && timeLabel ? (
-          <KLabel.Text
-            typo="TextXsNormal"
-            color={CHAT_BUBBLE_COLORS.timestamp}
-            marginL="0.25rem"
-          >
-            {timeLabel}
-          </KLabel.Text>
-        ) : null}
-      </KContainer.View>
-    </>
+    </BubbleTailRow>
   );
 });
 
@@ -198,5 +187,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  timeLabel: { gap: 4, marginTop: 2 },
 });

package/src/components/messages/revokedMessage/index.tsx

@@ -3,21 +3,30 @@ import { KContainer, KLabel } from '@droppii/libs';
 import { trans } from '../../../translation';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
+import { getTailCornerStyle } from '../bubbleTail.utils';
+import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
 
-export const RevokedMessage = memo(({ isOutgoing }: BaseLegendMessageProps) => {
-  return (
-    <KContainer.View
-      style={[
-        messageStyles.bubble,
-        isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
-      ]}
-    >
-      <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.timestamp}>
-        {trans('msg_type_revoke')}
-      </KLabel.Text>
-    </KContainer.View>
-  );
-});
+export const RevokedMessage = memo(
+  ({ isOutgoing, groupPosition }: BaseLegendMessageProps) => {
+    return (
+      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+        <KContainer.View
+          style={[
+            messageStyles.bubble,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.bubbleReceived,
+            getTailCornerStyle(isOutgoing, groupPosition),
+          ]}
+        >
+          <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.timestamp}>
+            {trans('msg_type_revoke')}
+          </KLabel.Text>
+        </KContainer.View>
+      </BubbleTailRow>
+    );
+  }
+);
 
 RevokedMessage.displayName = 'RevokedMessage';

package/src/components/messages/stickerMessage/index.tsx

@@ -2,19 +2,24 @@ import { memo } from 'react';
 import type { BaseLegendMessageProps } from '../types';
 import { KContainer, KImage } from '@droppii/libs';
 import { StyleSheet } from 'react-native';
+import { BubbleTailRow } from '../BubbleTailRow';
 
 export const STICKER_SIZE = 120;
-export const StickerMessage = memo(({ message }: BaseLegendMessageProps) => {
-  return (
-    <KContainer.View style={styles.message}>
-      <KImage.Base
-        uri={message?.stickerElem?.content || ''}
-        width={STICKER_SIZE}
-        height={STICKER_SIZE}
-      />
-    </KContainer.View>
-  );
-});
+export const StickerMessage = memo(
+  ({ message, isOutgoing }: BaseLegendMessageProps) => {
+    return (
+      <BubbleTailRow isOutgoing={isOutgoing} withTail={false}>
+        <KContainer.View style={styles.message}>
+          <KImage.Base
+            uri={message?.stickerElem?.content || ''}
+            width={STICKER_SIZE}
+            height={STICKER_SIZE}
+          />
+        </KContainer.View>
+      </BubbleTailRow>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   message: {

package/src/components/messages/textMessage/index.tsx

@@ -3,25 +3,24 @@ import { KContainer, KLabel } from '@droppii/libs';
 import { getMessageText } from '../../../utils/legendListMessage';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
-import { formatMessageTime } from '../types';
+import { getTailCornerStyle } from '../bubbleTail.utils';
+import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
-import { StyleSheet } from 'react-native';
 export const TextMessage = memo(
   ({
     message,
     isOutgoing,
-    createdAtTime,
     isHighlighted,
+    groupPosition,
   }: BaseLegendMessageProps) => {
     const messageText = getMessageText(message);
-    const timeLabel = formatMessageTime(createdAtTime);
 
     if (!messageText?.trim()) {
       return null;
     }
 
     return (
-      <>
+      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
         <KContainer.View
           style={[
             messageStyles.bubble,
@@ -29,31 +28,16 @@ export const TextMessage = memo(
               ? messageStyles.bubbleSent
               : messageStyles.bubbleReceived,
             isHighlighted && messageStyles.bubbleHighlighted,
+            getTailCornerStyle(isOutgoing, groupPosition),
           ]}
         >
           <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
             {messageText}
           </KLabel.Text>
         </KContainer.View>
-
-        <KContainer.View row alignItems style={styles.timeLabel}>
-          {!isOutgoing && timeLabel ? (
-            <KLabel.Text
-              typo="TextXsNormal"
-              color={CHAT_BUBBLE_COLORS.timestamp}
-              marginL={'0.25rem'}
-            >
-              {timeLabel}
-            </KLabel.Text>
-          ) : null}
-        </KContainer.View>
-      </>
+      </BubbleTailRow>
     );
   }
 );
 
 TextMessage.displayName = 'TextMessage';
-
-const styles = StyleSheet.create({
-  timeLabel: { gap: 4, marginTop: 2 },
-});

package/src/components/messages/types.ts

@@ -1,11 +1,14 @@
 import type { MediaItem } from '../../hooks/useMediaViewer';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import type { GroupPosition } from '../../utils/legendListMessage';
 
 export interface BaseLegendMessageProps {
   message: MessageItem;
   isOutgoing: boolean;
   createdAtTime: number;
   isHighlighted?: boolean;
+  /** Position within its same-sender cluster — drives the bubble tail. */
+  groupPosition?: GroupPosition;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
 }
 

package/src/components/messages/videoMessage/index.tsx

@@ -6,6 +6,7 @@ import ChatImageDimens, {
 } from '../../../utils/chatImageDimens';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
+import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
 const formatDuration = (durationMs: number): string => {
   const totalSeconds = Math.floor(durationMs / 1000);
@@ -15,7 +16,7 @@ const formatDuration = (durationMs: number): string => {
 };
 
 export const VideoMessage = memo(
-  ({ message, onMediaPress }: BaseLegendMessageProps) => {
+  ({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => {
     const videoElem = message?.videoElem;
     const videoUrl = videoElem?.videoUrl;
     const duration = videoElem?.duration;
@@ -29,13 +30,15 @@ export const VideoMessage = memo(
 
     if (!videoUrl) {
       return (
-        <KContainer.View
-          style={[messageStyles.bubble, messageStyles.videoPlaceholder]}
-        >
-          <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
-            📹 [Video unavailable]
-          </KLabel.Text>
-        </KContainer.View>
+        <BubbleTailRow isOutgoing={isOutgoing} withTail={false}>
+          <KContainer.View
+            style={[messageStyles.bubble, messageStyles.videoPlaceholder]}
+          >
+            <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
+              📹 [Video unavailable]
+            </KLabel.Text>
+          </KContainer.View>
+        </BubbleTailRow>
       );
     }
 
@@ -44,7 +47,7 @@ export const VideoMessage = memo(
     );
 
     return (
-      <>
+      <BubbleTailRow isOutgoing={isOutgoing} withTail={false}>
         <KContainer.Touchable
           onPress={handlePress}
           style={[
@@ -80,7 +83,7 @@ export const VideoMessage = memo(
             </KContainer.View>
           )}
         </KContainer.Touchable>
-      </>
+      </BubbleTailRow>
     );
   }
 );

package/src/core/useChatListener.ts

@@ -256,9 +256,23 @@ export const useChatListener = () => {
 
   const markGroupJoined = useCallback(
     (groupID: string) => {
+      // Mirror of removeGroupConversation: leaving marks the conversation
+      // `isNotInGroup`, which keeps it out of the inbox, so rejoining has to
+      // clear that flag. This runs on the WS event rather than on joinGroup's
+      // API success because isJoinGroup only reports true once the incremental
+      // sync behind that event has landed.
+      useConversationStore
+        .getState()
+        .updateConversation(getConversationID(SessionType.Group, groupID), {
+          isNotInGroup: false,
+        });
+
       queryClient.invalidateQueries({
         queryKey: conversationQueryKeys.joinedGroup(groupID),
       });
+      queryClient.invalidateQueries({
+        queryKey: conversationQueryKeys.lists(),
+      });
 
       queryClient.setQueriesData<{
         pages: {

package/src/hooks/groups/useDismissGroup.tsx

@@ -14,6 +14,7 @@ export function useDismissGroup({ onSuccess }: UseDismissGroupProps) {
         header: {
           title: { text: trans('group:dismiss_confirm_title') },
           alignment: 'center',
+          showCloseButton: true,
         },
         body: {
           renderContent: () => {

package/src/hooks/groups/useGroupAccessGuard.ts

@@ -0,0 +1,182 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { DeviceEventEmitter } from 'react-native';
+import OpenIMSDK, {
+  GroupStatus,
+  GroupVisibility,
+} from '@droppii/openim-rn-client-sdk';
+import { useQueryClient } from '@tanstack/react-query';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
+import { ChatEvent, type GroupRemovedPayload } from '../../types/events';
+import { conversationQueryKeys } from '../query-keys';
+
+type GroupAccessState =
+  /** Pre-access check still running — render nothing yet. */
+  | 'checking'
+  /** Member of the group, or not a group conversation at all. */
+  | 'allowed'
+  /** Non-member of a public group: may read, may not participate. */
+  | 'view-only'
+  /** No access: the block modal was shown and `onBlocked` fired. */
+  | 'blocked';
+
+type EvaluationResult = { state: Exclude<GroupAccessState, 'checking'> };
+
+/**
+ * Resolves whether the current user may open `groupID`, per the group-access
+ * spec: private non-members and dismissed groups are blocked outright, while
+ * public non-members drop to a read-only view.
+ */
+const evaluateAccess = async (groupID: string): Promise<EvaluationResult> => {
+  const info = (await OpenIMSDK.getSpecifiedGroupsInfo([groupID]))?.[0];
+  if (!info) return { state: 'blocked' };
+  if (info.status === GroupStatus.Dismissed) return { state: 'blocked' };
+
+  const isMember = await OpenIMSDK.isJoinGroup(groupID);
+  if (isMember) return { state: 'allowed' };
+
+  return info.visibility === GroupVisibility.Public
+    ? { state: 'view-only' }
+    : { state: 'blocked' };
+};
+
+type Params = {
+  groupID?: string;
+  /** Navigate away from the chat screen. Called once, after the block modal. */
+  onBlocked: () => void;
+};
+
+export const useGroupAccessGuard = ({ groupID, onBlocked }: Params) => {
+  const queryClient = useQueryClient();
+
+  // The conversation is dropped from the store immediately before GroupRemoved
+  // is emitted, so `groupID` can fall back to empty exactly when the guard
+  // needs it. Latch the last known id; it is replaced whenever the caller
+  // supplies a different non-empty one. (A group → 1-1 switch inside a single
+  // mount would keep the stale id, but ChatDetail remounts per conversation.)
+  const groupIdRef = useRef(groupID);
+  if (groupID) groupIdRef.current = groupID;
+  const activeGroupId = groupIdRef.current;
+
+  const [accessState, setAccessState] = useState<GroupAccessState>(() =>
+    activeGroupId ? 'checking' : 'allowed'
+  );
+
+  // OnGroupDismissed fires twice for the group owner (once on API success,
+  // once when the WS notification lands), so blocking must be idempotent.
+  const hasBlockedRef = useRef(false);
+  const onBlockedRef = useRef(onBlocked);
+  onBlockedRef.current = onBlocked;
+
+  const block = useCallback(() => {
+    if (hasBlockedRef.current) return;
+    hasBlockedRef.current = true;
+
+    setAccessState('blocked');
+    UIUtils.alert.open({
+      title: trans('group:access_blocked_title'),
+      message: trans('group:access_blocked_desc'),
+      primaryIndex: 0,
+      buttonType: 'horizontal-button',
+      // Drop any alert raised while this one is up rather than stacking it —
+      // OnGroupDismissed fires twice for the group owner.
+      ignoreStack: true,
+      // Force an acknowledgement: dismissing by tapping outside would leave the
+      // user sitting in a conversation they cannot access.
+      touchOutsideToDismiss: false,
+      buttons: [
+        {
+          label: trans('group:access_blocked_button'),
+          kind: 'primary',
+          onPress: () => onBlockedRef.current(),
+        },
+      ],
+    });
+  }, []);
+
+  const applyResult = useCallback(
+    (result: EvaluationResult) => {
+      if (result.state === 'blocked') {
+        block();
+        return;
+      }
+      setAccessState(result.state);
+    },
+    [block]
+  );
+
+  // Pre-access check.
+  useEffect(() => {
+    if (!activeGroupId) {
+      setAccessState('allowed');
+      return;
+    }
+
+    let cancelled = false;
+    hasBlockedRef.current = false;
+    setAccessState('checking');
+
+    evaluateAccess(activeGroupId)
+      .then((result) => {
+        if (cancelled) return;
+        applyResult(result);
+      })
+      .catch((error) => {
+        console.error('useGroupAccessGuard: access check failed', error);
+        // A failed lookup is not proof of lost access — leave the screen open
+        // rather than ejecting the user on a transient SDK error.
+        if (!cancelled) setAccessState('allowed');
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [activeGroupId, applyResult]);
+
+  // Membership lost while the screen is open.
+  useEffect(() => {
+    if (!activeGroupId) return;
+
+    const sub = DeviceEventEmitter.addListener(
+      ChatEvent.GroupRemoved,
+      (payload: GroupRemovedPayload) => {
+        if (payload.groupID !== activeGroupId) return;
+
+        // A dismissed group is gone for everyone — no need to re-check.
+        if (payload.reason === 'dismissed') {
+          block();
+          return;
+        }
+
+        // Left or kicked. `reason` cannot tell the two apart — OnJoinedGroupDeleted
+        // reports both as 'left' — so decide on visibility instead: a public group
+        // stays readable, a private one does not.
+        evaluateAccess(activeGroupId)
+          .then(applyResult)
+          .catch(() => block());
+      }
+    );
+
+    return () => sub.remove();
+  }, [activeGroupId, block, applyResult]);
+
+  // The composer derives membership from the joinedGroup query alone, never
+  // from this hook. Refresh that query whenever the guard's own verdict flips
+  // so the two cannot disagree.
+  const isViewOnly = accessState === 'view-only';
+  const wasViewOnlyRef = useRef(isViewOnly);
+
+  useEffect(() => {
+    if (wasViewOnlyRef.current === isViewOnly) return;
+    wasViewOnlyRef.current = isViewOnly;
+    if (!activeGroupId) return;
+
+    queryClient.invalidateQueries({
+      queryKey: conversationQueryKeys.joinedGroup(activeGroupId),
+    });
+  }, [isViewOnly, activeGroupId, queryClient]);
+
+  return {
+    isCheckingAccess: accessState === 'checking',
+  };
+};

package/src/screens/ChatInfo/ChatInfoDescriptionRow.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { StyleSheet, type TextLayoutEvent } from 'react-native';
 import { KContainer, KLabel, KColors } from '@droppii/libs';
 import { trans } from '../../translation';
@@ -47,6 +47,10 @@ const ChatInfoDescriptionRow = memo(
       paddingH: '0.75rem' as const,
     };
 
+    useEffect(() => {
+      setDisplayedText(introduction);
+    }, [introduction]);
+
     if (!introduction) {
       return null;
     }