@droppii-org/chat-mobile 0.2.106 → 0.2.108

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

@@ -0,0 +1,198 @@
+import { useCallback, useMemo, type RefObject } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KColors, KImage } from '@droppii/libs';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
+
+import { ChatQuickActions } from '../ChatQuickActions';
+import { ChatLinkPreview } from '../ChatLinkPreview';
+import { ChatCurrentQuotedMessage } from '../ChatCurrentQuotedMessage';
+import { ChatMessageInput } from './ChatMessageInput';
+import { MentionSuggestionList } from './MentionSuggestionList';
+import { AttachmentPreview } from '../../../components/AttachmentPreview';
+import { DEFAULT_QUICK_ACTIONS } from '../constants';
+import { useChatDetailContext } from '../../../context/ChatDetailContext';
+import { useAttachmentMapping } from '../hooks/useAttachmentMapping';
+import type { ActivePanelType } from '../hooks/useChatComposerState';
+import type { useMentionComposer } from '../hooks/useMentionComposer';
+import type { useChatCompose } from '../../../hooks/useChatCompose';
+import type { AttachmentType } from '../../../types/attachment';
+
+interface ChatComposerInputAreaProps {
+  compose: ReturnType<typeof useChatCompose>;
+  mentionComposer: ReturnType<typeof useMentionComposer>;
+  activePanelType: ActivePanelType;
+  isAttachmentOpen: boolean;
+  isInputFocused: boolean;
+  isMultilineInput: boolean;
+  inputRef: RefObject<any>;
+  onToggleAttachment: () => void;
+  onToggleSticker: () => void;
+  onChangeText: (text?: string) => void;
+  onInputFocus: () => void;
+  onInputBlur: () => void;
+  onInputContentSizeChange: (event: {
+    nativeEvent: { contentSize: { height: number } };
+  }) => void;
+  onOpenBotMenu?: () => void;
+  onSend: () => void;
+}
+
+// The composer's normal state: quoted message, previews, mention picker and
+// the input row (attachment toggle / input / send).
+export const ChatComposerInputArea = ({
+  compose,
+  mentionComposer,
+  activePanelType,
+  isAttachmentOpen,
+  isInputFocused,
+  isMultilineInput,
+  inputRef,
+  onToggleAttachment,
+  onToggleSticker,
+  onChangeText,
+  onInputFocus,
+  onInputBlur,
+  onInputContentSizeChange,
+  onOpenBotMenu,
+  onSend,
+}: ChatComposerInputAreaProps) => {
+  const insets = useSafeAreaInsets();
+  const { conversation } = useChatDetailContext();
+
+  const inputRowStyle = useMemo(
+    () => ({ paddingBottom: isAttachmentOpen ? 8 : insets.bottom + 12 }),
+    [insets.bottom, isAttachmentOpen]
+  );
+
+  const attachments = useAttachmentMapping({
+    selectedImages: compose.selectedImages,
+    selectedFiles: compose.selectedFiles,
+  });
+
+  const onRemove = useCallback(
+    (type: AttachmentType, data: unknown) => {
+      if (type === 'file') return compose.removeFile(data as string);
+      return compose.removeImage(data as number);
+    },
+    [compose]
+  );
+
+  return (
+    <KContainer.View background={'#F9F9FA'}>
+      <ChatCurrentQuotedMessage />
+      <KContainer.VisibleView visible={conversation?.peerType === PeerType.Bot}>
+        <ChatQuickActions
+          visible
+          actions={DEFAULT_QUICK_ACTIONS}
+          onActionPress={(action) =>
+            console.log('[ChatComposer] quick action:', action.id)
+          }
+        />
+      </KContainer.VisibleView>
+      {compose.showLinkPreview && (
+        <ChatLinkPreview
+          metadata={compose.urlMetadata}
+          isLoading={compose.isMetadataLoading}
+          onDismiss={compose.dismissPreview}
+        />
+      )}
+
+      <AttachmentPreview
+        visible={compose.isImagePreviewVisible || compose.isFilePreviewVisible}
+        attachments={attachments}
+        onRemove={onRemove}
+      />
+
+      <KContainer.View style={styles.inputRowWrapper}>
+        <KContainer.VisibleView visible={mentionComposer.isPanelOpen}>
+          <KContainer.View style={styles.mentionPanel}>
+            <MentionSuggestionList
+              suggestions={mentionComposer.suggestions}
+              isSearching={mentionComposer.isSearching}
+              isLoadingMore={mentionComposer.isLoadingMore}
+              hasMore={mentionComposer.hasMore}
+              onLoadMore={mentionComposer.loadMore}
+              onSelect={mentionComposer.selectSuggestion}
+            />
+          </KContainer.View>
+        </KContainer.VisibleView>
+
+        <KContainer.View
+          row
+          alignItems
+          paddingH="0.75rem"
+          paddingT="0.75rem"
+          paddingB="0.75rem"
+          style={inputRowStyle}
+        >
+          <KContainer.Touchable onPress={onToggleAttachment} center br="round">
+            <KImage.VectorIcons
+              name={
+                activePanelType === 'attachment'
+                  ? 'close-circle-b'
+                  : 'plus-circle-o'
+              }
+              size={24}
+              color={
+                activePanelType === 'attachment'
+                  ? KColors.palette.primary.w400
+                  : KColors.palette.gray.w600
+              }
+            />
+          </KContainer.Touchable>
+
+          <ChatMessageInput
+            value={compose.text}
+            placeholder="Nhập tin nhắn..."
+            onChangeText={onChangeText}
+            onFocus={onInputFocus}
+            onBlur={onInputBlur}
+            onContentSizeChange={onInputContentSizeChange}
+            onSelectionChange={mentionComposer.handleSelectionChange}
+            mentions={mentionComposer.mentions}
+            isInputFocused={isInputFocused}
+            isMultilineInput={isMultilineInput}
+            inputRef={inputRef}
+            onEmojiPress={onToggleSticker}
+            onSuggestPress={onOpenBotMenu}
+            activePanelType={activePanelType}
+          />
+
+          <KContainer.Touchable
+            onPress={compose.isUploading ? undefined : onSend}
+            pointerEvents={compose.isUploading ? 'none' : 'auto'}
+            width={40}
+            height={40}
+            center
+            br="round"
+            background={
+              compose.isUploading
+                ? KColors.palette.primary.w100
+                : KColors.palette.primary.w400
+            }
+            marginL="0.75rem"
+            opacity={compose.isUploading ? 0.25 : 1}
+          >
+            <KImage.VectorIcons name="send-b" size={20} color={KColors.white} />
+          </KContainer.Touchable>
+        </KContainer.View>
+      </KContainer.View>
+    </KContainer.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputRowWrapper: {
+    position: 'relative',
+  },
+  // Floats above the input row without going through the accessorySlot
+  // (attachment/sticker) render path — that slot intentionally takes over
+  // the keyboard area, which the mention picker must not do (finding #5).
+  mentionPanel: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: '100%',
+  },
+});

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]);
+};