@droppii-org/chat-mobile 0.2.11 → 0.2.13

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -15,6 +15,7 @@ interface LegendChatMessageProps {
   isOutgoing: boolean;
   createdAtTime: number;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
+  onPressUrl?: (url: string) => void;
 }
 
 // OpenIM message types (not all exposed as MessageType enum)
@@ -41,6 +42,7 @@ export const LegendChatMessage = memo(
     isOutgoing,
     createdAtTime,
     onMediaPress,
+    onPressUrl,
   }: LegendChatMessageProps) => {
     const MessageComponent =
       messageComponentMap[message?.contentType] ?? TextMessage;
@@ -53,6 +55,8 @@ export const LegendChatMessage = memo(
     ];
     const hasMediaPress =
       mediaTypes.includes(message?.contentType) && onMediaPress;
+    const hasUrlPress =
+      onPressUrl && message?.contentType === MessageType.UrlTextMessage;
 
     const props: any = {
       message,
@@ -63,6 +67,9 @@ export const LegendChatMessage = memo(
     if (hasMediaPress) {
       props.onMediaPress = onMediaPress;
     }
+    if (hasUrlPress) {
+      props.onPressUrl = onPressUrl;
+    }
 
     return <MessageComponent {...props} />;
   }

package/src/screens/chat-detail/types.ts

@@ -1,7 +1,11 @@
 import type { ReactNode } from 'react';
 
 import type { MediaItem } from '../../hooks/useMediaViewer';
-import type { DConversationItem, DMessageItem } from '../../types/chat';
+import type {
+  DChatApplicationType,
+  DConversationItem,
+  DMessageItem,
+} from '../../types/chat';
 import type { IUrlMetadata } from '../../types/common';
 import type { PeerType } from '@droppii/openim-rn-client-sdk';
 
@@ -75,6 +79,7 @@ export interface ChatComposerProps {
   renderQuickActions?: ChatQuickActionsProps['renderQuickActions'];
   renderAttachmentAction?: ChatAttachmentPanelProps['renderAction'];
   attachmentColumns?: number;
+  isEmptyMessage: boolean;
 }
 
 export interface ChatListProps {
@@ -89,6 +94,7 @@ export interface ChatListProps {
   isLoadingNewer?: boolean;
   hasMoreNewer?: boolean;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
+  onPressUrl?: (url: string) => void;
 }
 
 export interface ChatDetailProps extends Omit<
@@ -108,25 +114,17 @@ export interface ChatDetailProps extends Omit<
   avatarUri?: string | null;
   avatarFullName?: string;
   peerType?: PeerType;
-  applicationType?: DConversationItem['applicationType'];
+  applicationType?: DChatApplicationType;
   showAddMember?: boolean;
   getSubtitle?: (conversation: DConversationItem) => string | undefined;
   renderChat?: (item: DMessageItem) => ReactNode;
   showQuickActions?: boolean;
   showAttachmentActions?: boolean;
-  onLoadEarlier?: () => void;
-  isLoading?: boolean;
-  isLoadingEarlier?: boolean;
-  hasMoreEarlier?: boolean;
-  onLoadNewer?: () => void;
-  isLoadingNewer?: boolean;
-  hasMoreNewer?: boolean;
   quickActions?: DChatQuickAction[];
   getQuickActions?: (
     conversation: DConversationItem
   ) => DChatQuickAction[] | undefined;
   attachmentActions?: DChatAttachmentAction[];
-  inputValue?: string;
   inputPlaceholder?: string;
   onChangeInput?: (text: string) => void;
   onSend?: () => void;
@@ -138,4 +136,5 @@ export interface ChatDetailProps extends Omit<
   renderQuickActions?: ChatQuickActionsProps['renderQuickActions'];
   renderAttachmentAction?: ChatAttachmentPanelProps['renderAction'];
   attachmentColumns?: number;
+  onPressUrl?: (url: string) => void;
 }

package/src/screens/inbox/Inbox.tsx

@@ -5,7 +5,6 @@ import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
 import { MessagesTab } from './MessagesTab';
 
 interface InboxProps {
-  applicationType: string;
   onPressThread?: (item: string) => void;
   onPressSearch?: () => void;
   onPressEdit?: () => void;
@@ -15,13 +14,7 @@ interface InboxProps {
 type TabRoute = { key: string; title: string };
 
 const Inbox = memo(
-  ({
-    applicationType,
-    onPressThread,
-    onPressSearch,
-    onPressEdit,
-    onPressGroup,
-  }: InboxProps) => {
+  ({ onPressThread, onPressSearch, onPressEdit, onPressGroup }: InboxProps) => {
     const [index, setIndex] = useState(0);
     const [routes] = useState<TabRoute[]>([
       { key: 'messages', title: 'Tin nhắn' },
@@ -30,16 +23,11 @@ const Inbox = memo(
     const renderScene = useCallback(
       ({ route }: { route: TabRoute }) => {
         if (route.key === 'messages') {
-          return (
-            <MessagesTab
-              applicationType={applicationType}
-              onPressThread={onPressThread}
-            />
-          );
+          return <MessagesTab onPressThread={onPressThread} />;
         }
         return null;
       },
-      [applicationType, onPressThread]
+      [onPressThread]
     );
 
     const renderTabBar = useCallback(

package/src/screens/inbox/MessagesTab.tsx

@@ -4,69 +4,68 @@ import { KContainer, KDivider, KLabel, KColors } from '@droppii/libs';
 import { useConversationList } from '../../hooks/useConversationList';
 import { ThreadCard } from '../../components/ThreadCard';
 import { useConversationStore } from '../../store';
+import { useChatContext } from '../../context';
 
 interface MessagesTabProps {
-  applicationType: string;
   onPressThread?: (item: string) => void;
 }
 
 const Separator = () => <KDivider type="line" size="hairline" />;
 const keyExtractor = (item: string) => item;
 
-export const MessagesTab = memo(
-  ({ applicationType, onPressThread }: MessagesTabProps) => {
-    const data = useConversationStore((state) => state.list);
+export const MessagesTab = memo(({ onPressThread }: MessagesTabProps) => {
+  const data = useConversationStore((state) => state.list);
+  const applicationType = useChatContext().applicationType;
 
-    const { isLoading, refetch, isRefetching } = useConversationList({
-      applicationType,
-      page: 1,
-    });
+  const { isLoading, refetch, isRefetching } = useConversationList({
+    applicationType,
+    page: 1,
+  });
 
-    const handleThreadPress = useCallback(
-      (params: { item: string; event: GestureResponderEvent }) => {
-        onPressThread?.(params.item);
-      },
-      [onPressThread]
-    );
+  const handleThreadPress = useCallback(
+    (params: { item: string; event: GestureResponderEvent }) => {
+      onPressThread?.(params.item);
+    },
+    [onPressThread]
+  );
 
-    const renderItem = useCallback(
-      ({ item }: { item: string }) => (
-        <ThreadCard item={item} onPress={handleThreadPress} />
-      ),
-      [handleThreadPress]
-    );
+  const renderItem = useCallback(
+    ({ item }: { item: string }) => (
+      <ThreadCard item={item} onPress={handleThreadPress} />
+    ),
+    [handleThreadPress]
+  );
 
-    const LoadingComponent = (
-      <KContainer.View center flex paddingV="3rem">
-        <ActivityIndicator size="large" color={KColors.palette.primary.w400} />
-      </KContainer.View>
-    );
+  const LoadingComponent = (
+    <KContainer.View center flex paddingV="3rem">
+      <ActivityIndicator size="large" color={KColors.palette.primary.w400} />
+    </KContainer.View>
+  );
 
-    const EmptyComponent = isLoading ? null : (
-      <KContainer.View center flex paddingV="3rem">
-        <KLabel.Text typo="TextSmNormal" color={KColors.palette.gray.w400}>
-          Không có tin nhắn nào
-        </KLabel.Text>
-      </KContainer.View>
-    );
+  const EmptyComponent = isLoading ? null : (
+    <KContainer.View center flex paddingV="3rem">
+      <KLabel.Text typo="TextSmNormal" color={KColors.palette.gray.w400}>
+        Không có tin nhắn nào
+      </KLabel.Text>
+    </KContainer.View>
+  );
 
-    if (isLoading && data.length === 0) {
-      return LoadingComponent;
-    }
-
-    return (
-      <KContainer.FlatList
-        data={data}
-        renderItem={renderItem}
-        keyExtractor={keyExtractor}
-        ItemSeparatorComponent={Separator}
-        ListEmptyComponent={EmptyComponent}
-        refreshing={isRefetching}
-        onRefresh={refetch}
-        showsVerticalScrollIndicator={false}
-      />
-    );
+  if (isLoading && data.length === 0) {
+    return LoadingComponent;
   }
-);
+
+  return (
+    <KContainer.FlatList
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      ItemSeparatorComponent={Separator}
+      ListEmptyComponent={EmptyComponent}
+      refreshing={isRefetching}
+      onRefresh={refetch}
+      showsVerticalScrollIndicator={false}
+    />
+  );
+});
 
 MessagesTab.displayName = 'MessagesTab';

package/src/services/endpoints.ts

@@ -16,6 +16,12 @@ export const ENDPOINTS = {
     get urlMetadata() {
       return getApiEndpoint('urlMetadata');
     },
+    conversationFlow: (id: string) =>
+      `${getApiEndpoint('conversationFlow')}/${id}`,
+    resetConversationFlow: (id: string) =>
+      `${getApiEndpoint('conversationFlow')}/${id}/bot-flows/reset`,
+    runConversationFlow: (id: string) =>
+      `${getApiEndpoint('conversationFlow')}/${id}/bot-flows/run`,
   },
   uploaderService: {
     get uploadImage() {

package/src/translation/resources/i18n.ts

@@ -21,6 +21,8 @@ const i18nKey: Record<string, string> = {
   'msg_type_file': '[File đính kèm]',
   'msg_type_link': '[Liên kết]',
   'msg_type_revoke': 'Đã thu hồi tin nhắn',
+  'start': 'Bắt đầu',
+  'restart': 'Bắt đầu lại',
 };
 
 export default {

package/src/types/chat.ts

@@ -5,6 +5,11 @@ import {
 } from '@droppii/openim-rn-client-sdk';
 import type { PropsWithChildren } from 'react';
 import type { IUrlMetadata } from './common';
+import type {
+  IConversationFlow,
+  IConversationFlowStep,
+  IRunConversationFlowPayload,
+} from './flows';
 
 export const EventProvider = {
   ga: 'ga',
@@ -66,7 +71,7 @@ export interface DConversationItem extends ConversationItem {
   conversationId: string;
   chatCategory: DChatCategory;
   chatType: PeerType;
-  applicationType: string;
+  applicationType: DChatApplicationType;
   memberRole: DMemberRole;
   pinnedAt: string | null;
   isMuted: boolean;
@@ -123,6 +128,7 @@ export interface IMessageItemEx {
     content: string;
   };
   urlMetadata?: IUrlMetadata;
+  flow?: IRunConversationFlowPayload;
 }
 
 export interface MessageStore {
@@ -135,3 +141,12 @@ export interface MessageStore {
   deleteOneMessage: (clientMsgID: string) => void;
   reset: () => void;
 }
+
+export interface ChatDetailContextType {
+  conversationFlow?: IConversationFlow;
+  refetchConversationFlow: () => void;
+  isBotConversation: boolean;
+  setConverationFlowStep: (step: IConversationFlowStep) => void;
+}
+
+export interface ChatDetailProviderProps extends PropsWithChildren {}

package/src/types/flows.ts

@@ -0,0 +1,102 @@
+import type { PeerType } from '@droppii/openim-rn-client-sdk';
+import type { DChatApplicationType, DChatCategory } from './chat';
+
+/** START NODE TYPE */
+export const NodeTypes = {
+  BubbleText: 'bubble-text',
+  BubbleImage: 'bubble-image',
+  InputText: 'input-text',
+  InputButtons: 'input-buttons',
+  LogicCsTeam: 'logic-cs-team',
+} as const;
+
+export type NodeTypes = (typeof NodeTypes)[keyof typeof NodeTypes];
+
+export const ReactFlowsNodeTypes = {
+  Group: 'group',
+  Start: 'start',
+} as const;
+
+export type ReactFlowsNodeTypes =
+  (typeof ReactFlowsNodeTypes)[keyof typeof ReactFlowsNodeTypes];
+
+export interface BaseNodeData {
+  id: string;
+  type: NodeTypes;
+  parentId: string;
+}
+
+export interface BubbleTextNodeData {
+  content?: string;
+  plainText?: string;
+}
+
+export interface BubbleImageNodeData {
+  sourceType: 'link' | 'upload' | 'giphy' | 'unsplash' | 'icon';
+  url?: string;
+  onClickLink?: boolean;
+}
+
+export interface InputButtonItem {
+  id: string;
+  label: string;
+}
+
+export interface LogicCsTeamNodeData {
+  csTeamId?: string;
+}
+
+export interface InputButtonsNodeData {
+  buttons?: InputButtonItem[];
+}
+
+export interface InputTextNodeData {
+  longText?: boolean;
+  placeholder?: string;
+  buttonLabel?: string;
+}
+
+export type NodeDataMap = {
+  [NodeTypes.BubbleText]: BubbleTextNodeData;
+  [NodeTypes.BubbleImage]: BubbleImageNodeData;
+  [NodeTypes.InputText]: InputTextNodeData;
+  [NodeTypes.InputButtons]: InputButtonsNodeData;
+  [NodeTypes.LogicCsTeam]: LogicCsTeamNodeData;
+};
+
+export type GroupChild<T extends NodeTypes = NodeTypes> = {
+  data: NodeDataMap[T];
+} & BaseNodeData;
+
+export interface GroupNodeData {
+  label: string;
+  children: GroupChild[];
+}
+
+/** END NODE TYPE */
+
+export interface IConversationFlowStep {
+  id: string;
+  type: ReactFlowsNodeTypes;
+  data: GroupNodeData;
+}
+
+export interface IConversationFlow {
+  conversationId: string;
+  chatCategory: DChatCategory;
+  chatType: PeerType;
+  applicationType: DChatApplicationType;
+  flowCurrentStep: IConversationFlowStep | null;
+}
+
+export interface IRunConversationFlowResponse {
+  flowNextStep: IConversationFlowStep | null;
+}
+
+export interface IRunConversationFlowPayload {
+  groupId: string;
+  childId: string | null;
+  actionId: string | null;
+  //for send msg
+  plainText?: string;
+}

package/src/utils/flows.ts

@@ -0,0 +1,18 @@
+import {
+  NodeTypes,
+  type GroupChild,
+  type IConversationFlowStep,
+} from '../types/flows';
+
+export const getFlowInputButtonsNode = (
+  step?: IConversationFlowStep | null
+) => {
+  if (!step) return null;
+  const childrenNode = step?.data?.children || [];
+  const inputButtonsNode = childrenNode?.find(
+    (f) => f.type === NodeTypes.InputButtons
+  ) as GroupChild<'input-buttons'>;
+  return inputButtonsNode;
+};
+
+export const DEFAULT_BUTTON_ID = 'default-item-button';

package/src/utils/url.ts

@@ -1,4 +1,33 @@
-const URL_REGEX = /\bhttps?:\/\/[^\s<>"']*[^\s<>"',.!?()[\]{}]/g;
+// Generic TLDs
+const GENERIC_TLDS =
+  'com|net|org|edu|gov|mil|int|biz|info|name|pro|mobi|travel|jobs|museum|coop|aero';
+
+// New gTLDs (popular tech/startup)
+const NEW_TLDS =
+  'io|app|dev|ai|co|me|tv|cc|gg|ly|fm|im|link|click|page|live|site|web|xyz|' +
+  'tech|digital|online|store|shop|cloud|media|news|blog|studio|agency|' +
+  'design|finance|health|legal|academy|solutions|ventures|capital|group';
+
+// Country codes (Vietnam + Southeast Asia + popular worldwide)
+const CC_TLDS =
+  'vn|jp|kr|cn|sg|th|ph|id|my|tw|hk|' +
+  'uk|us|ca|au|de|fr|it|es|nl|ru|br|in|' +
+  'ac|ad|ae|am|at|az|ba|be|bg|bh|bn|by|bz|' +
+  'ch|cl|cz|dk|dz|ec|ee|eg|es|eu|fi|ga|ge|' +
+  'gr|gt|hr|hu|ie|il|iq|ir|is|jo|ke|kh|kw|' +
+  'kz|la|lb|li|lk|lt|lu|lv|ma|mc|md|mk|mm|' +
+  'mn|mo|mt|mx|mz|na|ng|no|np|nz|om|pa|pe|' +
+  'pk|pl|pt|qa|ro|rs|sa|se|sk|sl|sr|sv|sy|' +
+  'tn|to|tr|tt|ua|ug|uy|uz|va|vc|ve|vu|ws|za|zm|zw';
+
+const TLD_LIST = `${GENERIC_TLDS}|${NEW_TLDS}|${CC_TLDS}`;
+
+// Matches: https://... | http://... | www.... | bare domain with known TLD (t.me, droppii.com)
+const URL_REGEX = new RegExp(
+  `\\b(?:https?:\\/\\/|www\\.)[^\\s<>"']*[^\\s<>"',.!?()[\\]{}]` +
+    `|\\b[a-zA-Z0-9][\\w-]*(?:\\.[a-zA-Z0-9][\\w-]*)*\\.(?:${TLD_LIST})(?:[/?#][^\\s<>"']*[^\\s<>"',.!?()[\\]{}])?(?=\\s|$|[,!?()\\[\\]{}"'])`,
+  'g'
+);
 
 export function extractUrls(text: string): string[] {
   return text.match(URL_REGEX) ?? [];