@droppii-org/chat-mobile 0.2.107 → 0.2.108

package/src/screens/chat-detail/components/ChatComposerStatusBanner.tsx

@@ -0,0 +1,116 @@
+import { KContainer, KColors, KImage, KButton, KLabel } from '@droppii/libs';
+
+import { trans } from '../../../translation';
+
+export type ComposerStatusVariant =
+  | 'sellerInactive'
+  | 'botStart'
+  | 'notInGroup'
+  | 'sendDenied';
+
+// Priority order matters — mirrors the composer's original if/else chain.
+export const getComposerStatusVariant = ({
+  isDisableCompose,
+  isGroupConversation,
+  isNewBotConversation,
+  isNotInGroup,
+  isSendMessageAllowed,
+}: {
+  isDisableCompose: boolean;
+  isGroupConversation: boolean;
+  isNewBotConversation: boolean;
+  isNotInGroup: boolean;
+  isSendMessageAllowed: boolean;
+}): ComposerStatusVariant | null => {
+  if (isDisableCompose && !isGroupConversation) return 'sellerInactive';
+  if (isNewBotConversation) return 'botStart';
+  if (isNotInGroup) return 'notInGroup';
+  if (!isSendMessageAllowed) return 'sendDenied';
+  return null;
+};
+
+interface ChatComposerStatusBannerProps {
+  variant: ComposerStatusVariant;
+  isRunFlowPending?: boolean;
+  onStartConversationFlow?: () => void;
+  isJoiningGroup?: boolean;
+  onPressJoinGroup?: () => void;
+  sendDeniedReason?: string;
+}
+
+const InfoLine = ({ text }: { text?: string }) => (
+  <>
+    <KContainer.View marginR="0.25rem">
+      <KImage.VectorIcons
+        name="info-circle-o"
+        size={16}
+        color={KColors.palette.gray.w600}
+      />
+    </KContainer.View>
+    <KLabel.Text typo="TextXsNormal">{text}</KLabel.Text>
+  </>
+);
+
+// The composer's non-input states — rendered in place of the input row.
+export const ChatComposerStatusBanner = ({
+  variant,
+  isRunFlowPending,
+  onStartConversationFlow,
+  isJoiningGroup = false,
+  onPressJoinGroup,
+  sendDeniedReason,
+}: ChatComposerStatusBannerProps) => {
+  switch (variant) {
+    case 'sellerInactive':
+      return (
+        <KContainer.View row alignItems justifyContent>
+          <InfoLine text={trans('chat:compose_disabled_seller_inactive')} />
+        </KContainer.View>
+      );
+    case 'botStart':
+      return (
+        <KContainer.View padding={'1.5rem'} paddingB={0}>
+          <KButton.Solid
+            size="md"
+            label={trans('start')}
+            stretch
+            icon={{ vectorName: 'chat-square-o', size: 20 }}
+            loading={isRunFlowPending}
+            onPress={onStartConversationFlow}
+          />
+        </KContainer.View>
+      );
+    case 'notInGroup':
+      return (
+        <KContainer.View
+          paddingH="0.75rem"
+          justifyContent="center"
+          brTW={1}
+          brTC={KColors.border.light}
+        >
+          <KLabel.Text
+            typo="TextSmNormal"
+            textAlign="center"
+            paddingV={'0.75rem'}
+          >
+            {trans('group:not_in_group')}
+          </KLabel.Text>
+          <KButton.Solid
+            size="md"
+            label={trans('group:join')}
+            stretch
+            loading={isJoiningGroup}
+            onPress={onPressJoinGroup}
+          />
+        </KContainer.View>
+      );
+    case 'sendDenied':
+      return (
+        <KContainer.View row alignItems justifyContent paddingT={'1rem'}>
+          <InfoLine text={sendDeniedReason} />
+        </KContainer.View>
+      );
+    default:
+      return null;
+  }
+};

package/src/screens/chat-detail/hooks/useChatComposerAnimation.ts

@@ -1,11 +1,9 @@
 import { useCallback, useEffect } from 'react';
-import { Keyboard } from 'react-native';
 import {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { useKeyboardState } from 'react-native-keyboard-controller';
 
 const ACCESSORY_ANIMATION_MS = 250;
 
@@ -17,7 +15,6 @@ interface UseChatComposerAnimationProps {
 interface UseChatComposerAnimationReturn {
   attachmentHeightSV: any;
   accessorySlotStyle: any;
-  toggleAttachmentVisibility: () => void;
   openAttachment: () => void;
   openWithHeight: (height: number) => void;
   closeAttachment: (speedUp?: boolean, immediate?: boolean) => void;
@@ -30,8 +27,6 @@ export const useChatComposerAnimation = ({
   const panelHeightSV = useSharedValue(panelHeight);
   const attachmentHeightSV = useSharedValue(0);
 
-  const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
-
   useEffect(() => {
     panelHeightSV.value = panelHeight;
   }, [panelHeight, panelHeightSV]);
@@ -71,33 +66,9 @@ export const useChatComposerAnimation = ({
     [attachmentHeightSV, onAttachmentOpenChange]
   );
 
-  const toggleAttachmentVisibility = useCallback(() => {
-    // Use animated value as source of truth, not stale state
-    const isOpen = attachmentHeightSV.value > 0;
-
-    if (isOpen) {
-      closeAttachment();
-      return;
-    }
-
-    if (isKeyboardVisible) {
-      Keyboard.dismiss();
-      onAttachmentOpenChange(true);
-    }
-
-    openAttachment();
-  }, [
-    closeAttachment,
-    isKeyboardVisible,
-    onAttachmentOpenChange,
-    openAttachment,
-    attachmentHeightSV,
-  ]);
-
   return {
     attachmentHeightSV,
     accessorySlotStyle,
-    toggleAttachmentVisibility,
     openAttachment,
     openWithHeight,
     closeAttachment,

package/src/screens/chat-detail/hooks/useChatComposerState.ts

@@ -1,8 +1,15 @@
-import { useState, useMemo, useRef } from 'react';
+import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import { Platform } from 'react-native';
+
+const IS_IOS = Platform.OS === 'ios';
+const INPUT_LINE_HEIGHT = 22.4;
+const WRAPPED_HEIGHT_THRESHOLD = IS_IOS
+  ? INPUT_LINE_HEIGHT + 4
+  : INPUT_LINE_HEIGHT + 12;
 
 // 'mention' is used only for mutual-exclusion (closing attachment/sticker
 // when the mention picker opens) — the mention picker itself renders as its
-// own absolutely-positioned sibling in ChatComposer, not through this
+// own absolutely-positioned sibling in ChatComposerInputArea, not through this
 // state's render slot, since it must float above the input while the
 // keyboard stays open (attachment/sticker intentionally take over the
 // keyboard area, which the mention picker must not do).
@@ -18,6 +25,9 @@ interface UseChatComposerStateReturn {
   isInputWrapped: boolean;
   setIsInputWrapped: (wrapped: boolean) => void;
   isMultilineInput: boolean;
+  handleInputContentSizeChange: (event: {
+    nativeEvent: { contentSize: { height: number } };
+  }) => void;
   inputRef: React.RefObject<any>;
 }
 
@@ -38,6 +48,18 @@ export const useChatComposerState = (
     return value.includes('\n') || isInputWrapped;
   }, [isInputWrapped, value]);
 
+  const handleInputContentSizeChange = useCallback(
+    (event: { nativeEvent: { contentSize: { height: number } } }) => {
+      const { height } = event.nativeEvent.contentSize;
+      setIsInputWrapped(height > WRAPPED_HEIGHT_THRESHOLD);
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!value) setIsInputWrapped(false);
+  }, [value]);
+
   return {
     activePanelType,
     setActivePanelType,
@@ -48,6 +70,7 @@ export const useChatComposerState = (
     isInputWrapped,
     setIsInputWrapped,
     isMultilineInput,
+    handleInputContentSizeChange,
     inputRef,
   };
 };

package/src/screens/chat-detail/hooks/useComposerBotMenu.tsx

@@ -0,0 +1,140 @@
+import { useCallback, useMemo } from 'react';
+import { KContainer, KColors, KLabel } from '@droppii/libs';
+
+import { trans } from '../../../translation';
+import { UIUtils } from '../../../utils/UIUtils';
+import {
+  useCloseSupportSession,
+  useResetFlow,
+  useRunFlow,
+} from '../../../hooks/flows/useFlow';
+import type { InputButtonItem } from '../../../types/flows';
+import { DEFAULT_BUTTON_ID, isContextButton } from '../../../utils/flows';
+import { DFlowState } from '../../../types/chat';
+import { useChatDetailContext } from '../../../context/ChatDetailContext';
+import { openBotMenuSheet } from '../BotMenuSheet';
+
+export const useComposerBotMenu = () => {
+  const {
+    isBotConversation,
+    conversationFlow,
+    conversationFlowMainMenu,
+    flowState,
+  } = useChatDetailContext();
+  const { mutate: runFlow, isPending } = useRunFlow();
+  const { mutate: resetFlow } = useResetFlow();
+  const { mutateAsync: closeSupportSession } = useCloseSupportSession();
+
+  const onStartConversationFlow = useCallback(() => {
+    runFlow({
+      groupId: conversationFlow?.flowCurrentStep?.id || '',
+      actionId: null,
+      childId: null,
+      plainText: trans('start'),
+    });
+  }, [runFlow, conversationFlow]);
+
+  const botMenuOptions = useMemo(() => {
+    const apiOptions =
+      conversationFlowMainMenu?.filter(
+        (item) => !isContextButton(item.label)
+      ) || [];
+
+    const hasDefaultButton = apiOptions.some(
+      (item) => item.id === DEFAULT_BUTTON_ID
+    );
+
+    if (hasDefaultButton) return apiOptions;
+
+    return [...apiOptions, { id: DEFAULT_BUTTON_ID, label: trans('restart') }];
+  }, [conversationFlowMainMenu]);
+
+  const hasBotMenuOptions = isBotConversation && botMenuOptions.length > 0;
+
+  const runBotMenuOption = useCallback(
+    (item: InputButtonItem) => {
+      if (item.id === DEFAULT_BUTTON_ID) {
+        resetFlow();
+        return;
+      }
+      runFlow({
+        actionId: item.id,
+        groupId: '',
+        childId: '',
+        plainText: item.label,
+      });
+    },
+    [runFlow, resetFlow]
+  );
+
+  const handleSelectBotMenuOption = useCallback(
+    (item: InputButtonItem) => {
+      if (flowState === DFlowState.CS) {
+        UIUtils.popup.open({
+          header: {
+            title: { text: trans('chat:end_support_session_title') },
+            alignment: 'center',
+          },
+          body: {
+            renderContent: () => (
+              <KContainer.View padding={'1rem'}>
+                <KLabel.RichText
+                  typo="TextMdNormal"
+                  textAlign="center"
+                  color={KColors.gray.dark}
+                  richTextOptions={{
+                    i18nKey: trans('chat:end_support_session_desc'),
+                    components: {
+                      bold: (
+                        <KLabel.Text
+                          typo="TextMdBold"
+                          color={KColors.gray.dark}
+                        />
+                      ),
+                    },
+                  }}
+                />
+              </KContainer.View>
+            ),
+          },
+          actions: {
+            buttons: [
+              {
+                label: trans('chat:end_support_session_secondary'),
+                kind: 'light',
+                onPress: () => {},
+              },
+              {
+                label: trans('chat:end_support_session_primary'),
+                kind: 'danger',
+                onPress: async () => {
+                  await closeSupportSession();
+                  runBotMenuOption(item);
+                },
+              },
+            ],
+            type: 'horizontal-button',
+          },
+        });
+        return;
+      }
+      runBotMenuOption(item);
+    },
+    [flowState, runBotMenuOption, closeSupportSession]
+  );
+
+  const handleOpenBotMenu = useCallback(() => {
+    if (!hasBotMenuOptions) return;
+    openBotMenuSheet({
+      options: botMenuOptions,
+      onSelect: handleSelectBotMenuOption,
+    });
+  }, [hasBotMenuOptions, botMenuOptions, handleSelectBotMenuOption]);
+
+  return {
+    hasBotMenuOptions,
+    handleOpenBotMenu,
+    onStartConversationFlow,
+    isRunFlowPending: isPending,
+  };
+};

package/src/screens/chat-detail/hooks/useComposerPanelActions.ts

@@ -0,0 +1,57 @@
+import { useMemo, useRef } from 'react';
+import { debounce } from 'lodash';
+
+import { DEFAULT_PANNEL_ACTIONS } from '../constants';
+import { DChatPannelActionItemType, type DChatPannelAction } from '../types';
+
+interface UseComposerPanelActionsProps {
+  pannelActions?: DChatPannelAction[];
+  addImages?: () => void;
+  addFiles?: () => void;
+}
+
+// Resolves the attachment panel's actions, wiring Gallery/Documents to
+// debounced pickers unless the consumer supplied its own onPress.
+export const useComposerPanelActions = ({
+  pannelActions,
+  addImages,
+  addFiles,
+}: UseComposerPanelActionsProps) => {
+  const addImagesRef = useRef(addImages);
+  addImagesRef.current = addImages;
+  const debouncedImagePickerRef = useRef(
+    debounce(() => addImagesRef.current?.(), 300, {
+      leading: true,
+      trailing: false,
+    })
+  );
+
+  const addFilesRef = useRef(addFiles);
+  addFilesRef.current = addFiles;
+  const debouncedFilePickerRef = useRef(
+    debounce(() => addFilesRef.current?.(), 300, {
+      leading: true,
+      trailing: false,
+    })
+  );
+
+  return useMemo(() => {
+    return (pannelActions || DEFAULT_PANNEL_ACTIONS)?.map((p) => {
+      let onPress;
+      switch (p.id) {
+        case DChatPannelActionItemType.Gallery:
+          onPress = debouncedImagePickerRef.current;
+          break;
+        case DChatPannelActionItemType.Documents:
+          onPress = debouncedFilePickerRef.current;
+          break;
+        default:
+          break;
+      }
+      return {
+        ...p,
+        onPress: p.onPress || onPress,
+      };
+    });
+  }, [pannelActions]);
+};

package/src/screens/chat-detail/hooks/useComposerPanelDismiss.ts

@@ -0,0 +1,111 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import type { GestureResponderEvent, ViewProps } from 'react-native';
+
+import type { ComposerPanelController } from '../types';
+import {
+  IDLE_DISMISS_TOUCH,
+  isPressSwallowed,
+  markDismissTouchDragged,
+  moveDismissTouch,
+  shouldDismissOnRelease,
+  startDismissTouch,
+  type DismissTouch,
+} from '../../../utils/composerPanelDismissGesture';
+
+export type DismissAreaTouchProps = Pick<
+  ViewProps,
+  'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'onTouchCancel'
+>;
+
+// Tap-outside dismiss for the composer's attachment/sticker panel
+// (DROPPII-30577).
+//
+// While a panel is open the timeline's content is made non-hittable
+// (`isComposerPanelOpen` → `pointerEvents: 'none'` on the list content), so a
+// tap can never reach a bubble — JS touchables and RNGH gestures alike — yet
+// the scroll view itself still receives the touch and scrolls. Tap vs drag is
+// read from plain touch events on a View wrapping the list; they observe the
+// touch without claiming the JS responder, which on iOS would disable the
+// scroll view's pan (RCTScrollView disables it while an ancestor holds the
+// responder).
+//
+// `pointerEvents` only lands after a React round-trip (open → effect →
+// setState → list re-render), so a tap right after opening a heavy panel can
+// still reach a bubble. `shouldSwallowPress` closes that gap synchronously: it
+// is true for every press belonging to a touch that began with the panel
+// open — while it is down and for SWALLOW_AFTER_RELEASE_MS after it lifts,
+// since RNGH gesture callbacks arrive after touchEnd.
+export const useComposerPanelDismiss = () => {
+  const panelControllerRef = useRef<ComposerPanelController | null>(null);
+  const touchRef = useRef<DismissTouch>(IDLE_DISMISS_TOUCH);
+  const swallowPressRef = useRef(false);
+  // null while the tracked touch is down.
+  const releasedAtRef = useRef<number | null>(null);
+  const [isComposerPanelOpen, setIsComposerPanelOpen] = useState(false);
+
+  const dismissAreaTouchProps = useMemo<DismissAreaTouchProps>(
+    () => ({
+      onTouchStart: (event: GestureResponderEvent) => {
+        const panelOpen = !!panelControllerRef.current?.isOpen();
+        // A second finger must not restart the tracked touch, but a press it
+        // makes while the panel is open is still swallowed.
+        if (event.nativeEvent.touches.length > 1) {
+          if (panelOpen) swallowPressRef.current = true;
+          return;
+        }
+        touchRef.current = startDismissTouch(
+          panelOpen,
+          event.nativeEvent.pageX,
+          event.nativeEvent.pageY
+        );
+        swallowPressRef.current = panelOpen;
+        releasedAtRef.current = null;
+      },
+      onTouchMove: (event: GestureResponderEvent) => {
+        touchRef.current = moveDismissTouch(
+          touchRef.current,
+          event.nativeEvent.pageX,
+          event.nativeEvent.pageY
+        );
+      },
+      onTouchEnd: (event: GestureResponderEvent) => {
+        if (event.nativeEvent.touches.length > 0) return;
+        if (shouldDismissOnRelease(touchRef.current)) {
+          panelControllerRef.current?.close();
+        }
+        touchRef.current = IDLE_DISMISS_TOUCH;
+        releasedAtRef.current = Date.now();
+      },
+      // The scroll view took the touch over (pan began) — not a tap.
+      onTouchCancel: () => {
+        touchRef.current = IDLE_DISMISS_TOUCH;
+        releasedAtRef.current = Date.now();
+      },
+    }),
+    []
+  );
+
+  // The list's onScrollBeginDrag — a drag signal on both platforms.
+  const notifyScrollBeginDrag = useCallback(() => {
+    touchRef.current = markDismissTouchDragged(touchRef.current);
+  }, []);
+
+  const shouldSwallowPress = useCallback(
+    () =>
+      isPressSwallowed(
+        swallowPressRef.current,
+        releasedAtRef.current,
+        Date.now()
+      ),
+    []
+  );
+
+  return {
+    panelControllerRef,
+    isComposerPanelOpen,
+    onComposerPanelOpenChange: setIsComposerPanelOpen,
+    dismissAreaTouchProps,
+    notifyScrollBeginDrag,
+    shouldSwallowPress,
+  };
+};