@droppii-org/chat-mobile 0.2.50 → 0.2.51

package/src/components/StickerPicker/StickerCategoryTabs.tsx

@@ -0,0 +1,103 @@
+import { memo, useEffect, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KColors,
+  KSpacingValue,
+  KRadiusValue,
+} from '@droppii/libs';
+import type { StickerCategory } from '../../types/sticker';
+import { CATEGORY_TAB_HEIGHT, RECENT_CATEGORY_ID } from './constants';
+
+interface Props {
+  categories: StickerCategory[];
+  activeCategory: string;
+  onSelectCategory: (id: string) => void;
+}
+
+export const StickerCategoryTabs = memo(
+  ({ categories, activeCategory, onSelectCategory }: Props) => {
+    const listRef = useRef<any>(null);
+    const pressedFromHereRef = useRef(false);
+
+    useEffect(() => {
+      if (pressedFromHereRef.current) {
+        pressedFromHereRef.current = false;
+        return;
+      }
+      const index = categories.findIndex((c) => c.id === activeCategory);
+      if (index >= 0 && listRef.current) {
+        try {
+          listRef.current.scrollToIndex({
+            index,
+            animated: true,
+            viewPosition: 0.5,
+          });
+        } catch {}
+      }
+    }, [activeCategory, categories]);
+
+    return (
+      <KContainer.FlatList
+        ref={listRef}
+        data={categories}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={(item: StickerCategory) => item.id}
+        renderItem={({ item }: { item: StickerCategory }) => {
+          const isActive = item.id === activeCategory;
+          return (
+            <KContainer.Touchable
+              onPress={() => {
+                pressedFromHereRef.current = true;
+                onSelectCategory(item.id);
+              }}
+              center
+              style={[styles.tab, isActive && styles.tabActive]}
+            >
+              {item?.id === RECENT_CATEGORY_ID ? (
+                <KImage.VectorIcons name="time-circle-b" size={28} />
+              ) : (
+                item?.icon && (
+                  <KImage.Base
+                    uri={item?.icon?.fullUrl}
+                    width={28}
+                    height={28}
+                  />
+                )
+              )}
+            </KContainer.Touchable>
+          );
+        }}
+        style={styles.list}
+        contentContainerStyle={styles.content}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  list: {
+    height: CATEGORY_TAB_HEIGHT,
+  },
+  content: {
+    alignItems: 'center',
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    gap: KSpacingValue['0.75rem'],
+  },
+  tab: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: KSpacingValue['0.25rem'],
+  },
+  tabActive: {
+    borderRadius: KRadiusValue['2x'],
+    backgroundColor: KColors.opacity.grayDark[10],
+    borderWidth: 1,
+    borderColor: KColors.palette.gray.w700,
+  },
+  recentIcon: {
+    fontSize: 22,
+  },
+});

package/src/components/StickerPicker/StickerPickerPlaceholder.tsx

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+import { KColors, KContainer, KRadiusValue } from '@droppii/libs';
+import { STICKER_SIZE } from './constants';
+
+export const StickerPickerPlaceholder = () => (
+  <KContainer.View style={styles.placeholder} />
+);
+
+const styles = StyleSheet.create({
+  placeholder: {
+    width: STICKER_SIZE,
+    height: STICKER_SIZE,
+    borderRadius: KRadiusValue['2x'],
+    backgroundColor: KColors.border.light,
+  },
+});

package/src/components/StickerPicker/StickerPickerRowItem.tsx

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+import { KContainer, KImage } from '@droppii/libs';
+import { STICKER_SIZE, STICKER_GAP } from './constants';
+import type { StickerItem, StickerRow } from '../../types/sticker';
+import { StickerPickerPlaceholder } from './StickerPickerPlaceholder';
+
+interface Props {
+  row: StickerRow;
+  onSelectSticker: (sticker: StickerItem) => void;
+}
+
+export const StickerPickerRowItem = ({ row, onSelectSticker }: Props) => (
+  <KContainer.View row style={styles.row}>
+    {row.map((sticker, i) => (
+      <KContainer.View
+        key={i}
+        style={i < row.length - 1 ? styles.cell : undefined}
+      >
+        {sticker ? (
+          <KContainer.Touchable onPress={() => onSelectSticker(sticker)}>
+            <KImage.Base
+              uri={sticker.file.fullUrl}
+              width={STICKER_SIZE}
+              height={STICKER_SIZE}
+            />
+          </KContainer.Touchable>
+        ) : (
+          <StickerPickerPlaceholder />
+        )}
+      </KContainer.View>
+    ))}
+  </KContainer.View>
+);
+
+const styles = StyleSheet.create({
+  row: {
+    marginBottom: STICKER_GAP,
+    paddingHorizontal: 12,
+  },
+  cell: {
+    marginRight: STICKER_GAP,
+  },
+});

package/src/components/StickerPicker/StickerSectionList.tsx

@@ -0,0 +1,141 @@
+import { forwardRef, useCallback, useRef } from 'react';
+import {
+  SectionList,
+  StyleSheet,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+} from 'react-native';
+import { KColors, KLabel, KSpacingValue } from '@droppii/libs';
+import type { StickerItem, StickerRow } from '../../types/sticker';
+import { StickerPickerRowItem } from './StickerPickerRowItem';
+import { STICKER_PICKER_CONTENT_HEIGHT } from './constants';
+
+export interface StickerPickerSection {
+  categoryId: string;
+  title: string;
+  data: StickerRow[];
+}
+
+interface Props {
+  sections: StickerPickerSection[];
+  onSectionVisible: (categoryId: string) => void;
+  onActiveCategoryChange: (categoryId: string) => void;
+  onSelectSticker: (sticker: StickerItem) => void;
+}
+
+const AT_BOTTOM_THRESHOLD = 8;
+
+const VIEWABILITY_CONFIG = { itemVisiblePercentThreshold: 10 };
+
+export const StickerSectionList = forwardRef<any, Props>(
+  (
+    { sections, onSectionVisible, onActiveCategoryChange, onSelectSticker },
+    ref
+  ) => {
+    const onSectionVisibleRef = useRef(onSectionVisible);
+    onSectionVisibleRef.current = onSectionVisible;
+
+    const onActiveCategoryChangeRef = useRef(onActiveCategoryChange);
+    onActiveCategoryChangeRef.current = onActiveCategoryChange;
+
+    const sectionsRef = useRef(sections);
+    sectionsRef.current = sections;
+
+    const isAtBottomRef = useRef(false);
+
+    const onScroll = useCallback(
+      (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
+        isAtBottomRef.current =
+          contentOffset.y + layoutMeasurement.height >=
+          contentSize.height - AT_BOTTOM_THRESHOLD;
+      },
+      []
+    );
+
+    const renderItem = useCallback(
+      ({ item }: { item: StickerRow; section: StickerPickerSection }) => (
+        <StickerPickerRowItem row={item} onSelectSticker={onSelectSticker} />
+      ),
+      [onSelectSticker]
+    );
+
+    const renderSectionHeader = useCallback(
+      ({ section }: { section: StickerPickerSection }) => (
+        <KLabel.Text
+          typo="TitleSection"
+          style={styles.sectionHeader}
+          color={KColors.gray.light}
+        >
+          {section.title}
+        </KLabel.Text>
+      ),
+      []
+    );
+
+    const onViewableItemsChanged = useCallback((args: any) => {
+      const { viewableItems } = args;
+      if (!viewableItems.length) return;
+
+      // Trigger lazy load for all currently visible sections
+      const seenCategories = new Set<string>();
+      viewableItems.forEach((vi: any) => {
+        const cat = (vi.section as StickerPickerSection)?.categoryId;
+        if (cat && !seenCategories.has(cat)) {
+          seenCategories.add(cat);
+          onSectionVisibleRef.current(cat);
+        }
+      });
+
+      // When at the bottom of the list, force the last section as active.
+      // This handles the edge case where the last section has few items and
+      // its header never reaches the top of the viewport.
+      if (isAtBottomRef.current) {
+        const lastSection = sectionsRef.current[sectionsRef.current.length - 1];
+        if (lastSection) {
+          onActiveCategoryChangeRef.current(lastSection.categoryId);
+        }
+        return;
+      }
+
+      // Otherwise use the first visible item's section (symmetric for both
+      // scroll directions: switches when the section header enters from either end).
+      const firstVisible = viewableItems.find((vi: any) => vi.section != null);
+      const categoryId = (firstVisible?.section as StickerPickerSection)
+        ?.categoryId;
+      if (categoryId) {
+        onActiveCategoryChangeRef.current(categoryId);
+      }
+    }, []);
+
+    return (
+      <SectionList
+        ref={ref}
+        sections={sections}
+        renderItem={renderItem}
+        renderSectionHeader={renderSectionHeader}
+        keyExtractor={(_, index) => String(index)}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+        onViewableItemsChanged={onViewableItemsChanged}
+        viewabilityConfig={VIEWABILITY_CONFIG}
+        removeClippedSubviews
+        initialNumToRender={8}
+        maxToRenderPerBatch={8}
+        style={styles.list}
+        showsVerticalScrollIndicator={false}
+        stickySectionHeadersEnabled={false}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  list: {
+    height: STICKER_PICKER_CONTENT_HEIGHT,
+  },
+  sectionHeader: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.25rem'],
+  },
+});

package/src/components/StickerPicker/constants.ts

@@ -0,0 +1,20 @@
+import { KDims } from '@droppii/libs';
+
+export const STICKER_COLUMNS = 4;
+export const STICKER_HORIZONTAL_PADDING = 12;
+export const STICKER_GAP = 8;
+
+export const STICKER_SIZE = Math.floor(
+  (KDims.width -
+    STICKER_HORIZONTAL_PADDING * 2 -
+    STICKER_GAP * (STICKER_COLUMNS - 1)) /
+    STICKER_COLUMNS
+);
+export const STICKER_ROW_HEIGHT = STICKER_SIZE + STICKER_GAP;
+export const CATEGORY_TAB_HEIGHT = 52;
+export const STICKER_SECTION_HEADER_HEIGHT = 36;
+export const STICKER_PICKER_CONTENT_HEIGHT = 260;
+export const STICKER_PICKER_HEIGHT =
+  CATEGORY_TAB_HEIGHT + STICKER_PICKER_CONTENT_HEIGHT;
+
+export const RECENT_CATEGORY_ID = 'recent';

package/src/components/StickerPicker/index.tsx

@@ -0,0 +1,166 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { KColors, KContainer } from '@droppii/libs';
+import type {
+  StickerCategory,
+  StickerItem,
+  StickerRow,
+} from '../../types/sticker';
+import { useStickerCategories } from '../../hooks/stickers/useStickerCategories';
+import { useStickerHistory } from '../../hooks/stickers/useStickerHistory';
+import { useFetchStickerByCategory } from '../../hooks/stickers/useFetchStickerByCategory';
+import {
+  RECENT_CATEGORY_ID,
+  STICKER_COLUMNS,
+  STICKER_PICKER_HEIGHT,
+} from './constants';
+import { StickerCategoryTabs } from './StickerCategoryTabs';
+import {
+  StickerSectionList,
+  type StickerPickerSection,
+} from './StickerSectionList';
+import { trans } from '../../translation';
+
+interface Props {
+  onSelectSticker: (sticker: StickerItem) => void;
+}
+
+const chunkIntoRows = (items: StickerItem[], columns: number): StickerRow[] => {
+  const rows: StickerRow[] = [];
+  for (let i = 0; i < items.length; i += columns) {
+    rows.push(items.slice(i, i + columns));
+  }
+  return rows;
+};
+
+const makePlaceholderRows = (count: number, columns: number): StickerRow[] => {
+  const rows: StickerRow[] = [];
+  for (let i = 0; i < count; i += columns) {
+    const rowSize = Math.min(columns, count - i);
+    rows.push(Array.from({ length: rowSize }, () => null));
+  }
+  return rows;
+};
+
+export const StickerPicker = ({ onSelectSticker }: Props) => {
+  const { data: categoriesData } = useStickerCategories();
+  const { data: recentStickers } = useStickerHistory();
+  const { mutateAsync: fetchStickersByCategory } = useFetchStickerByCategory();
+
+  const allCategories = useMemo<StickerCategory[]>(() => {
+    const recent: StickerCategory = {
+      id: RECENT_CATEGORY_ID,
+      name: trans('recent'),
+      icon: null,
+      stickerCount: 0,
+    };
+    return [recent, ...(categoriesData || [])];
+  }, [categoriesData]);
+
+  const [activeCategory, setActiveCategory] = useState(RECENT_CATEGORY_ID);
+  const [sectionDataMap, setSectionDataMap] = useState<
+    Record<string, StickerRow[]>
+  >({});
+
+  const loadedIdsRef = useRef(new Set<string>([RECENT_CATEGORY_ID]));
+  const sectionListRef = useRef<any>(null);
+  const suppressCategoryChangeRef = useRef(false);
+  const suppressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Populate recent section when history data arrives
+  useEffect(() => {
+    if (recentStickers) {
+      setSectionDataMap((prev) => ({
+        ...prev,
+        [RECENT_CATEGORY_ID]: chunkIntoRows(recentStickers, STICKER_COLUMNS),
+      }));
+    }
+  }, [recentStickers]);
+
+  // Cleanup suppress timer on unmount
+  useEffect(() => {
+    return () => {
+      if (suppressTimerRef.current) clearTimeout(suppressTimerRef.current);
+    };
+  }, []);
+
+  const sections = useMemo<StickerPickerSection[]>(
+    () =>
+      allCategories.map((cat) => ({
+        categoryId: cat.id,
+        title: cat.name,
+        data:
+          sectionDataMap[cat.id] ??
+          makePlaceholderRows(cat.stickerCount, STICKER_COLUMNS),
+      })),
+    [allCategories, sectionDataMap]
+  );
+
+  const handleSectionVisible = useCallback(
+    async (categoryId: string) => {
+      if (categoryId === RECENT_CATEGORY_ID) return;
+      if (loadedIdsRef.current.has(categoryId)) return;
+      loadedIdsRef.current.add(categoryId);
+
+      try {
+        const stickers = await fetchStickersByCategory(categoryId);
+        setSectionDataMap((prev) => ({
+          ...prev,
+          [categoryId]: chunkIntoRows(stickers, STICKER_COLUMNS),
+        }));
+      } catch {
+        loadedIdsRef.current.delete(categoryId);
+      }
+    },
+    [fetchStickersByCategory]
+  );
+
+  const handleActiveCategoryChange = useCallback((categoryId: string) => {
+    if (suppressCategoryChangeRef.current) return;
+    setActiveCategory(categoryId);
+  }, []);
+
+  const handleCategoryPress = useCallback(
+    (categoryId: string) => {
+      setActiveCategory(categoryId);
+
+      suppressCategoryChangeRef.current = true;
+      if (suppressTimerRef.current) clearTimeout(suppressTimerRef.current);
+      suppressTimerRef.current = setTimeout(() => {
+        suppressCategoryChangeRef.current = false;
+      }, 600);
+
+      const sectionIndex = allCategories.findIndex((c) => c.id === categoryId);
+      if (sectionIndex >= 0 && sectionListRef.current) {
+        try {
+          sectionListRef.current.scrollToLocation({
+            sectionIndex,
+            itemIndex: 0,
+            animated: true,
+            viewOffset: 0,
+          });
+        } catch {}
+      }
+    },
+    [allCategories]
+  );
+
+  return (
+    <KContainer.View
+      style={{ height: STICKER_PICKER_HEIGHT }}
+      background={KColors.white}
+    >
+      <StickerCategoryTabs
+        categories={allCategories}
+        activeCategory={activeCategory}
+        onSelectCategory={handleCategoryPress}
+      />
+      <StickerSectionList
+        ref={sectionListRef}
+        sections={sections}
+        onSectionVisible={handleSectionVisible}
+        onActiveCategoryChange={handleActiveCategoryChange}
+        onSelectSticker={onSelectSticker}
+      />
+    </KContainer.View>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import type { BaseLegendMessageProps } from '../types';
+import { KContainer, KImage } from '@droppii/libs';
+import { StyleSheet } from 'react-native';
+
+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>
+  );
+});
+
+const styles = StyleSheet.create({
+  message: {
+    width: STICKER_SIZE,
+    height: STICKER_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/config/api-endpoints.ts

@@ -17,6 +17,9 @@ export interface ApiEndpoints {
   imageUpload: string;
   bot: string;
   uploadFcmToken: string;
+  stickerCategories: string;
+  stickersByCategory: string;
+  stickerHistory: string;
 }
 
 const DEFAULT_ENDPOINTS: ApiEndpoints = {
@@ -25,6 +28,9 @@ const DEFAULT_ENDPOINTS: ApiEndpoints = {
   imageUpload: '/uploader-service/v1/uploader/permanently',
   bot: '/chat-service/v1/app/bots/',
   uploadFcmToken: '/chat-service/third/fcm_update_token',
+  stickerCategories: '/chat-service/v1/app/sticker-categories',
+  stickersByCategory: '/chat-service/v1/app/sticker-categories',
+  stickerHistory: '/chat-service/v1/app/stickers/history',
 };
 
 let endpoints: ApiEndpoints = { ...DEFAULT_ENDPOINTS };

package/src/hooks/conversation/useGetConversationDetail.ts

@@ -3,7 +3,7 @@ import OpenIMSDK, { SessionType } from '@droppii/openim-rn-client-sdk';
 import { useConversationStore } from '../../store/conversation';
 import { apiInstance } from '../../services/apis';
 import type { BaseResponse } from '../../types/auth';
-import type { DBotStatus } from '../../types/chat';
+import type { DBotStatus, DConversationTarget } from '../../types/chat';
 import { conversationQueryKeys } from '../query-keys';
 import { ENDPOINTS } from '../../services/endpoints';
 
@@ -46,6 +46,25 @@ export const useGetStatusConversationBot = (botId?: string) => {
     refetchOnMount: 'always',
   });
 };
+export const useGetConversationTarget = (conversationId?: string) =>
+  useQuery({
+    queryKey: conversationQueryKeys.conversationTarget(conversationId || ''),
+    queryFn: async () => {
+      try {
+        const res = await apiInstance?.get<BaseResponse<DConversationTarget>>(
+          ENDPOINTS.chatService.getConversationTarget(conversationId || '')
+        );
+        return res?.data?.data || undefined;
+      } catch {
+        return undefined; // fail-open: unresolved status => compose stays enabled
+      }
+    },
+    enabled: !!conversationId,
+    staleTime: 0,
+    gcTime: 0,
+    refetchOnMount: 'always',
+  });
+
 export const useGetOneConversation = ({
   targetUserId,
   targetGroupId,

package/src/hooks/flows/useGetConversationFlowMainMenu.ts

@@ -12,7 +12,7 @@ export const useGetConversationFlowMainMenu = (conversationId?: string) => {
       const res = await apiInstance?.get<BaseResponse<InputButtonItem[]>>(
         ENDPOINTS.chatService.conversationFlowMainMenu(conversationId || '')
       );
-      return res?.data?.data || undefined;
+      return res?.data?.data || ([] as InputButtonItem[]);
     },
     enabled: !!conversationId,
   });