react-native-chatbot-ai 0.1.19 → 0.1.22

package/lib/typescript/src/utils/textCleaner.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Text Cleaning Utilities
+ * Utilities for cleaning markdown, truncating text, and validating content
+ */
+/**
+ * Remove markdown formatting from text for cleaner copy/share
+ * @param text - Text with markdown formatting
+ * @returns Clean text without markdown
+ */
+export declare const cleanMarkdown: (text: string) => string;
+/**
+ * Truncate text to specified length with suffix
+ * @param text - Text to truncate
+ * @param maxLength - Maximum length
+ * @param suffix - Suffix to add (default: '...')
+ * @returns Truncated text
+ */
+export declare const truncateText: (text: string, maxLength: number, suffix?: string) => string;
+/**
+ * Validate text content
+ * @param text - Text to validate
+ * @param minLength - Minimum length (default: 1)
+ * @param maxLength - Maximum length (default: 100000)
+ * @returns Validation result with error message if invalid
+ */
+export declare const validateContent: (text: string, minLength?: number, maxLength?: number) => {
+    valid: boolean;
+    error?: string;
+};
+//# sourceMappingURL=textCleaner.d.ts.map

package/lib/typescript/src/utils/textCleaner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textCleaner.d.ts","sourceRoot":"","sources":["../../../../src/utils/textCleaner.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,KAAG,MAW5C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACvB,MAAM,MAAM,EACZ,WAAW,MAAM,EACjB,eAAc,KACb,MAGF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAC1B,MAAM,MAAM,EACZ,kBAAa,EACb,kBAAkB,KACjB;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAclC,CAAC"}

package/lib/typescript/src/utils/ui.d.ts

@@ -1,4 +1,5 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import type { KPopupProps, KToastBarProps } from '@droppii/libs';
+import { KBottomSheetPropsEnhance } from '../types';
 declare class UIUtils {
     toast: {
         open: (params: KToastBarProps & {
@@ -6,6 +7,16 @@ declare class UIUtils {
         }) => void;
         dismiss: () => void;
         showError: (error: any, withToast?: boolean) => any;
+        showSuccess: (message: string) => void;
+    };
+    bottomSheet: {
+        open: (params: KBottomSheetPropsEnhance) => void;
+        dismiss: () => void;
+    };
+    popup: {
+        open: (params: KPopupProps) => void;
+        dismiss: () => void;
+        dismissAll: () => void;
     };
 }
 declare const _default: UIUtils;

package/lib/typescript/src/utils/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/utils/ui.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpD,cAAM,OAAO;IACX,KAAK;uBAGO,cAAc,GAAG;YAAE,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;SAAE;;2BAOxD,GAAG;MAWtB;CACH;;AAED,wBAA6B"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/utils/ui.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEpD,cAAM,OAAO;IACX,KAAK;uBAGO,cAAc,GAAG;YAAE,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;SAAE;;2BAOxD,GAAG;+BAWC,MAAM;MAO7B;IACF,WAAW;uBACM,wBAAwB;;MAMvC;IACF,KAAK;uBACY,WAAW;;;MAS1B;CACH;;AAED,wBAA6B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-chatbot-ai",
-  "version": "0.1.19",
+  "version": "0.1.22",
   "description": "React Native library for Chatbot AI",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -80,11 +80,9 @@
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
-    "i18next": "^25.6.1",
     "jest": "^29.7.0",
     "lodash": "^4.17.21",
     "prettier": "^3.6.2",
-    "react-i18next": "^16.2.4",
     "react-native-builder-bob": "^0.40.13",
     "react-native-file-viewer": "^2.1.5",
     "react-native-image-crop-picker": "^0.51.1",
@@ -98,13 +96,14 @@
     "@droppii/libs": "*",
     "@react-native-documents/picker": "*",
     "@tanstack/react-query": "*",
-    "i18next": "*",
     "react": "*",
-    "react-i18next": "*",
     "react-native": "*",
     "react-native-blob-util": "*",
     "react-native-file-viewer": "*",
-    "react-native-popup-menu": "*"
+    "react-native-keyboard-controller": "*",
+    "react-native-popup-menu": "*",
+    "react-native-share": "*",
+    "react-native-track-player": "*"
   },
   "workspaces": [
     "example"
@@ -173,6 +172,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
+    "@react-native-clipboard/clipboard": "^1.16.0",
     "axios": "^1.12.2",
     "dayjs": "^1.11.18",
     "lodash": "^4.17.21",

package/src/components/Drawer/DeleteSessionPopup.tsx

@@ -0,0 +1,121 @@
+import { useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KLabel, KColors, KSpacingValue } from '@droppii/libs';
+import { useDeleteSession } from '../../hooks/session/useDeleteSession';
+import UIUtils from '../../utils/ui';
+import { trans } from '../../translation';
+import { SessionSearchItem } from '../../types/dto';
+import useSessionStore from '../../store/session';
+import { SessionLogType } from '../../types';
+import { GAEvents } from '../../constants/events';
+
+const truncateText = (text: string, maxLength: number) => {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + '…';
+};
+
+interface DeleteContentProps {
+  session: SessionSearchItem;
+  onConfirmRef: React.RefObject<(() => Promise<void>) | null>;
+}
+
+const DeleteContent = ({ session, onConfirmRef }: DeleteContentProps) => {
+  const { mutateAsync: deleteSession } = useDeleteSession();
+  const currentSessionId = useSessionStore((state) => state.sessionId);
+  const setSessionId = useSessionStore((state) => state.setSessionId);
+
+  // Expose handleConfirm via ref
+  onConfirmRef.current = useCallback(async () => {
+    try {
+      await deleteSession(session.id);
+
+      // If the deleted session is the current active session, clear it
+      if (currentSessionId === session.id) {
+        setSessionId(undefined, SessionLogType.newChatBtn);
+      }
+
+      UIUtils.toast.showSuccess(trans('chatbot:delete_session_success'));
+      UIUtils.popup.dismiss();
+    } catch (err) {
+      UIUtils.toast.showError(err);
+    }
+  }, [session.id, currentSessionId, deleteSession, setSessionId]);
+
+  const truncatedName = truncateText(session.title, 50);
+  const descriptionTemplate = trans('chatbot:delete_session_description');
+  const parts = descriptionTemplate.split('{sessionName}');
+
+  return (
+    // @ts-ignore
+    <KContainer.View style={styles.container}>
+      {/* @ts-ignore */}
+      <KLabel.Text typo="TextMdNormal" color={KColors.gray.dark}>
+        {parts[0]}
+        {/* @ts-ignore */}
+        <KLabel.Text typo="TextMdBold" color={KColors.gray.dark}>
+          {truncatedName}
+        </KLabel.Text>
+        {parts[1]}
+      </KLabel.Text>
+    </KContainer.View>
+  );
+};
+
+export const openDeleteSessionPopup = (
+  session: SessionSearchItem,
+  logGA?: (event: string, params?: any) => void
+) => {
+  const onConfirmRef = { current: null } as React.RefObject<
+    (() => Promise<void>) | null
+  >;
+
+  UIUtils.popup.open({
+    header: {
+      title: {
+        text: trans('chatbot:delete_session_title'),
+      },
+      showCloseButton: false,
+    },
+    body: {
+      scrollable: false,
+      renderContent: () => (
+        <DeleteContent session={session} onConfirmRef={onConfirmRef} />
+      ),
+    },
+    actions: {
+      type: 'horizontal-button',
+      buttons: [
+        {
+          kind: 'light',
+          label: trans('chatbot:delete_session_cancel'),
+          weight: 'medium',
+          onPress: () => {
+            UIUtils.popup.dismiss();
+            logGA?.(GAEvents.deleteChatModalDeleteBtnTap, {
+              conversation_id: session.id,
+              button: 'cancel',
+            });
+          },
+        },
+        {
+          kind: 'danger',
+          label: trans('chatbot:delete_session_confirm'),
+          weight: 'medium',
+          onPress: () => {
+            onConfirmRef.current?.();
+            logGA?.(GAEvents.deleteChatModalDeleteBtnTap, {
+              conversation_id: session.id,
+              button: 'delete',
+            });
+          },
+        },
+      ],
+    },
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: KSpacingValue['1rem'],
+  },
+});

package/src/components/Drawer/DrawerContent.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
-import { StyleSheet } from 'react-native';
-import { KContainer } from '@droppii/libs';
+import { StyleSheet, Platform } from 'react-native';
+import { KContainer, KSpacingValue } from '@droppii/libs';
 import debounce from 'lodash/debounce';
 import useSessionStore from '../../store/session';
 import { useChatContext } from '../../context/ChatContext';
@@ -9,11 +9,13 @@ import { SessionSearchItem } from '../../types/dto';
 import NewChatButton from './NewChatButton';
 import SearchInput from './SearchInput';
 import SessionList from './SessionList';
+import { SessionLogType } from '../../types';
+import { GAEvents } from '../../constants/events';
 
 const DrawerContent = () => {
   const setSessionId = useSessionStore((state) => state.setSessionId);
   const sessionId = useSessionStore((state) => state.sessionId);
-  const { closeDrawer } = useChatContext();
+  const { closeDrawer, logGA } = useChatContext();
   const [searchQuery, setSearchQuery] = useState('');
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
   const debounceRef = useRef(
@@ -30,6 +32,16 @@ const DrawerContent = () => {
     };
   }, [searchQuery]);
 
+  const onSearchCallback = useCallback(
+    (isSuccess?: boolean) => {
+      logGA(GAEvents.sidebarSearchConversationSend, {
+        content: debouncedSearchTerm,
+        search_result: isSuccess ? 'yes' : null,
+      });
+    },
+    [logGA, debouncedSearchTerm]
+  );
+
   const {
     data,
     isLoading,
@@ -38,7 +50,7 @@ const DrawerContent = () => {
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-  } = useSearchSessions(true, debouncedSearchTerm);
+  } = useSearchSessions(true, debouncedSearchTerm, onSearchCallback);
 
   const sessions = useMemo(() => {
     return (data?.pages.flatMap(
@@ -47,13 +59,16 @@ const DrawerContent = () => {
   }, [data]);
 
   const onPressNewSession = useCallback(() => {
-    setSessionId(undefined);
+    setSessionId(undefined, SessionLogType.newChatBtn);
     closeDrawer();
-  }, [setSessionId, closeDrawer]);
+    logGA(GAEvents.newChatCreateBtnTap, {
+      button_type: 'sidebar',
+    });
+  }, [setSessionId, closeDrawer, logGA]);
 
   const onPressSession = useCallback(
     (item: SessionSearchItem) => {
-      setSessionId(item.id);
+      setSessionId(item.id, SessionLogType.oldChat);
       closeDrawer();
     },
     [setSessionId, closeDrawer]
@@ -88,6 +103,7 @@ const styles = StyleSheet.create({
   drawerContainer: {
     flex: 1,
     backgroundColor: 'white',
+    paddingTop: Platform.OS === 'android' ? KSpacingValue['2rem'] : 0,
   },
 });
 

package/src/components/Drawer/RenameSessionPopup.tsx

@@ -0,0 +1,145 @@
+import { useState, useCallback } from 'react';
+import { useRenameSession } from '../../hooks/session/useRenameSession';
+import UIUtils from '../../utils/ui';
+import { trans } from '../../translation';
+import { SessionSearchItem } from '../../types/dto';
+import { StyleSheet, Keyboard } from 'react-native';
+import {
+  KButton,
+  KColors,
+  KContainer,
+  KInput,
+  KLabel,
+  KSpacingValue,
+} from '@droppii/libs';
+import { useChatContext } from '../../context/ChatContext';
+
+const MAX_LENGTH = 250;
+const MIN_LENGTH = 1;
+
+interface RenameSessionPopupProps {
+  session: SessionSearchItem;
+}
+
+const RenameSessionPopup = ({ session }: RenameSessionPopupProps) => {
+  const [value, setValue] = useState(session.title);
+  const [confirmDisabled, setConfirmDisabled] = useState(true);
+  const { mutateAsync: renameSession } = useRenameSession();
+  const { openDrawer } = useChatContext();
+
+  const onChangeText = useCallback(
+    (text: string) => {
+      const newText = text.slice(0, MAX_LENGTH);
+      setValue(newText);
+
+      const disabled =
+        newText.trim().length < MIN_LENGTH ||
+        newText.length > MAX_LENGTH ||
+        newText.trim() === session.title.trim();
+
+      setConfirmDisabled(disabled);
+    },
+    [session.title]
+  );
+
+  const onClear = useCallback(() => {
+    setValue('');
+    setConfirmDisabled(true);
+  }, []);
+
+  const handleConfirm = useCallback(async () => {
+    const trimmed = value.trim();
+    if (
+      confirmDisabled ||
+      !trimmed ||
+      trimmed.length < MIN_LENGTH ||
+      trimmed.length > MAX_LENGTH ||
+      trimmed === session.title.trim()
+    ) {
+      return;
+    }
+
+    try {
+      await renameSession({
+        sessionId: session.id,
+        title: trimmed,
+      });
+      Keyboard.dismiss();
+      UIUtils.toast.showSuccess(trans('chatbot:rename_session_success'));
+      UIUtils.popup.dismiss();
+      setTimeout(() => {
+        openDrawer();
+      }, 500);
+    } catch (err) {
+      UIUtils.toast.showError(err);
+    }
+  }, [confirmDisabled, value, session, renameSession, openDrawer]);
+
+  return (
+    <KContainer.View>
+      <KContainer.View style={[styles.searchInputWrapper]}>
+        <KInput.TextBox
+          placeholder={trans('chatbot:rename_session_placeholder')}
+          value={value}
+          onChangeText={onChangeText}
+          onClear={onClear}
+          border="entire"
+          radius="borderless"
+          withBorder
+          height={160}
+          maxLength={MAX_LENGTH}
+          paddingV="0.5rem"
+          multiline
+          textAlignVertical="top"
+        />
+        <KLabel.Text color={KColors.gray.light}>
+          {value.trim().length === 0
+            ? `Tối đa ${MAX_LENGTH} ký tự`
+            : `Còn ${MAX_LENGTH - value.length}/${MAX_LENGTH} ký tự`}
+        </KLabel.Text>
+      </KContainer.View>
+
+      <KContainer.View style={styles.divider} />
+      <KContainer.View style={styles.buttonConfirm}>
+        <KButton.Solid
+          label={trans('rename_session_confirm')}
+          stretch
+          size="lg"
+          marginT="1rem"
+          disabled={confirmDisabled}
+          onPress={handleConfirm}
+        />
+      </KContainer.View>
+    </KContainer.View>
+  );
+};
+
+export const openRenameSessionPopup = (session: SessionSearchItem) => {
+  UIUtils.popup.open({
+    header: {
+      title: { text: trans('chatbot:rename_session_title') },
+      showCloseButton: true,
+      alignment: 'left',
+    },
+    body: {
+      scrollable: false,
+      renderContent: () => <RenameSessionPopup session={session} />,
+    },
+  });
+};
+
+const styles = StyleSheet.create({
+  searchInputWrapper: {
+    marginHorizontal: KSpacingValue['1rem'],
+    marginBottom: KSpacingValue['0.75rem'],
+    paddingTop: KSpacingValue['0.25rem'],
+  },
+  divider: {
+    height: 1,
+    backgroundColor: KColors.border.light,
+  },
+  buttonConfirm: {
+    padding: KSpacingValue['1rem'],
+    paddingTop: 0,
+  },
+});

package/src/components/Drawer/SearchInput.tsx

@@ -1,6 +1,8 @@
-import { memo } from 'react';
+import { useCallback, memo } from 'react';
 import { StyleSheet } from 'react-native';
 import { KContainer, KInput, KColors, KSpacingValue } from '@droppii/libs';
+import { useChatContext } from '../../context/ChatContext';
+import { GAEvents } from '../../constants/events';
 
 interface SearchInputProps {
   value: string;
@@ -8,10 +10,16 @@ interface SearchInputProps {
 }
 
 const SearchInput = memo<SearchInputProps>(({ value, onChangeText }) => {
+  const logGA = useChatContext().logGA;
+
+  const onFocus = useCallback(() => {
+    logGA(GAEvents.sidebarSearchConversationTap);
+  }, [logGA]);
+
   return (
     <KContainer.View style={styles.searchInputWrapper}>
       <KInput.TextBox
-        placeholder={'Tìm kiếm đoạn chát'}
+        placeholder={'Tìm kiếm đoạn chat'}
         value={value}
         onChangeText={onChangeText}
         searchIconLeftColor={KColors.gray.normal}
@@ -20,6 +28,7 @@ const SearchInput = memo<SearchInputProps>(({ value, onChangeText }) => {
         radius="borderless"
         withBorder
         height={40}
+        onFocus={onFocus}
       />
     </KContainer.View>
   );

package/src/components/Drawer/SessionItem.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 import {
   KContainer,
@@ -8,6 +8,8 @@ import {
   KImage,
 } from '@droppii/libs';
 import { SessionSearchItem } from '../../types/dto';
+import { openSessionOptionsBottomSheet } from './SessionOptionsBottomSheet';
+import { useChatContext } from '../../context/ChatContext';
 
 interface SessionItemProps {
   item: SessionSearchItem;
@@ -16,14 +18,23 @@ interface SessionItemProps {
 }
 
 const SessionItem = memo<SessionItemProps>(({ item, isActive, onPress }) => {
+  const { closeDrawer, logGA } = useChatContext();
+
+  const handlePressOptions = useCallback(() => {
+    openSessionOptionsBottomSheet(item, closeDrawer, logGA);
+  }, [item, closeDrawer, logGA]);
+
   return (
+    // @ts-ignore
     <KContainer.View
       style={[styles.sessionItem, isActive && styles.sessionItemActive]}
     >
+      {/* @ts-ignore */}
       <KContainer.Touchable
         style={styles.sessionItemTouchable}
         onPress={() => onPress(item)}
       >
+        {/* @ts-ignore */}
         <KLabel.Text
           typo="TextMdNormal"
           color={KColors.gray.dark}
@@ -32,12 +43,15 @@ const SessionItem = memo<SessionItemProps>(({ item, isActive, onPress }) => {
           {item.title}
         </KLabel.Text>
       </KContainer.Touchable>
-      <KImage.VectorIcons
-        name="more-horizontal-b"
-        size={20}
-        color={KColors.gray.dark}
-        style={styles.menuIcon}
-      />
+      {/* @ts-ignore */}
+      <KContainer.Touchable onPress={handlePressOptions}>
+        <KImage.VectorIcons
+          name="more-horizontal-b"
+          size={20}
+          color={KColors.gray.dark}
+          style={styles.menuIcon}
+        />
+      </KContainer.Touchable>
     </KContainer.View>
   );
 });
@@ -55,7 +69,7 @@ const styles = StyleSheet.create({
     // marginVertical: KSpacingValue['0.25rem'],
   },
   sessionItemActive: {
-    backgroundColor: KColors.primary.lightest,
+    backgroundColor: KColors.hexToRgba(KColors.primary.normal, 0.1),
   },
   sessionItemTouchable: {
     flex: 1,

package/src/components/Drawer/SessionList.tsx

@@ -41,14 +41,12 @@ const SessionList = memo<SessionListProps>(
     const keyExtractor = useCallback((item: SessionSearchItem) => item.id, []);
 
     return (
-      /* @ts-expect-error - FlashList type issue */
       <FlashList
         data={sessions}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
         contentContainerStyle={styles.listContainer}
         refreshControl={
-          /* @ts-expect-error - React Native RefreshControl type issue */
           <RefreshControl refreshing={isRefetching} onRefresh={onRefresh} />
         }
         onEndReached={onEndReached}