react-native-chatbot-ai 0.0.4 → 0.0.6

package/src/components/chat/item/ChatUserMessageItem.tsx

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { KColors, KContainer, KLabel, KSpacingValue } from '@droppii/libs';
+import { IMessageItem } from '../../../types';
+import { IconChatArrow } from '../../../assets/svgIcon/IconChatArrow';
+
+interface ChatUserMessageItemProps {
+  item: IMessageItem;
+}
+const ChatUserMessageItem = ({ item }: ChatUserMessageItemProps) => {
+  return (
+    <KContainer.View style={styles.container}>
+      <KContainer.View style={styles.content}>
+        <KLabel.Text typo="TextMdNormal" color={KColors.black}>
+          {item.content}
+        </KLabel.Text>
+      </KContainer.View>
+      <IconChatArrow fill={'#0077FF'} />
+    </KContainer.View>
+  );
+};
+
+export default ChatUserMessageItem;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingHorizontal: KSpacingValue['1rem'],
+    marginVertical: KSpacingValue['0.5rem'],
+  },
+  content: {
+    maxWidth: '70%',
+    paddingHorizontal: KSpacingValue['1rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    backgroundColor: KColors.hexToRgba('#0077FF', 0.1),
+    borderRadius: KSpacingValue['1rem'],
+    borderTopRightRadius: 0,
+  },
+});

package/src/components/chat/item/index.tsx

@@ -0,0 +1,23 @@
+import { IMessageItem, MessageType } from '../../../types';
+import ChatAIAnswerMessageItem from './ChatAIAnswerMessageItem';
+import ChatAIThinkingMessageItem from './ChatAIThinkingMessageItem';
+import ChatUserMessageItem from './ChatUserMessageItem';
+
+interface ChatItemProps {
+  item: IMessageItem;
+  index: number;
+}
+const ChatItem = ({ item, index }: ChatItemProps) => {
+  switch (item.type) {
+    case MessageType.user_message:
+      return <ChatUserMessageItem item={item} />;
+    case MessageType.ai_answer:
+      return <ChatAIAnswerMessageItem item={item} isLast={index === 0} />;
+    case MessageType.ai_thinking:
+      return <ChatAIThinkingMessageItem item={item} />;
+    default:
+      return <ChatUserMessageItem item={item} />;
+  }
+};
+
+export default ChatItem;

package/src/constants/events.ts

@@ -0,0 +1,5 @@
+export const events = {
+  updateOneMessage: 'update_one_message',
+  updateMultipleMessage: 'update_multiple_message',
+  forceUpdateMessages: 'force_update_messages',
+};

package/src/constants/query.ts

@@ -0,0 +1,5 @@
+export const QUERY_KEYS = {
+  GET_SUGGESTIONS: 'GET_SUGGESTIONS',
+  GET_SESSION_BY_ID: 'GET_SESSION_BY_ID',
+  CREATE_SESSION: 'CREATE_SESSION',
+};

package/src/context/ChatContext.tsx

@@ -1,13 +1,18 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 import type { ChatContextType, ChatProviderProps } from '../types/chat';
-import { ChatBotAI } from '../components/chat';
+import ChatBotAI from '../components/chat';
 
-export const ChatContext = createContext<ChatContextType>({});
+export const ChatContext = createContext<ChatContextType>({
+  apiAddress: '',
+  userId: '',
+});
 
-export const ChatProvider = ({ children }: ChatProviderProps) => {
+export const useChatContext = () => useContext(ChatContext);
+
+export const ChatProvider = (props: ChatProviderProps) => {
+  const { apiAddress, userId } = props;
   return (
-    <ChatContext.Provider value={{}}>
-      {children}
+    <ChatContext.Provider value={{ apiAddress, userId }}>
       <ChatBotAI />
     </ChatContext.Provider>
   );

package/src/hooks/message/useMessage.ts

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useState } from 'react';
+import useSessionStore from '../../store/session';
+import { useFetchSessionById } from '../session/useFetchSessionById';
+import { IMessageItem, SessionDetailResponse } from '../../types/dto';
+import { DeviceEventEmitter } from 'react-native';
+import { events } from '../../constants/events';
+
+const initialState = {
+  id: '',
+  title: '',
+  created_at: '',
+  updated_at: '',
+  metadata: {
+    source: '',
+  },
+  shared: false,
+  messages: [],
+};
+export const useMessage = () => {
+  const sessionId = useSessionStore(state => state.sessionId);
+  const { mutateAsync: getSessionById } = useFetchSessionById();
+  const [loadState, setLoadState] = useState<SessionDetailResponse>(initialState);
+
+  const onGetSessionById = useCallback(async () => {
+    if (!sessionId) return;
+    const res = await getSessionById(sessionId);
+    if (!res) return;
+    setLoadState(prev => ({
+      ...res,
+      messages: res?.messages?.length > 0 ? res.messages.reverse() : prev.messages,
+    }));
+  }, [sessionId]);
+
+  useEffect(() => {
+    if (!sessionId) {
+      setLoadState(initialState);
+      return;
+    }
+    onGetSessionById();
+  }, [sessionId]);
+
+  useEffect(() => {
+    const subOneMessage = DeviceEventEmitter.addListener(
+      events.updateOneMessage,
+      (messageItem: IMessageItem) => {
+        setLoadState(prev => ({
+          ...prev,
+          messages: [messageItem, ...prev.messages],
+        }));
+      }
+    );
+    const subMultipleMessage = DeviceEventEmitter.addListener(
+      events.updateMultipleMessage,
+      (messageItems: IMessageItem[]) => {
+        setLoadState(prev => {
+          const existingIds = new Set(prev.messages.map(m => m?.id));
+          const filtered = messageItems.filter(m => !existingIds.has(m?.id)).reverse();
+          console.log('🚀 ~ useEffect ~ filtered:', prev.messages);
+          return {
+            ...prev,
+            messages: [...filtered, ...prev.messages],
+          };
+        });
+      }
+    );
+    const subForceUpdateMessages = DeviceEventEmitter.addListener(
+      events.forceUpdateMessages,
+      (messages: IMessageItem[]) => {
+        setLoadState(prev => {
+          const merged = prev.messages.map(msg => {
+            const update = messages.find(u => u.id === msg.id);
+            return update ? { ...msg, ...update } : msg;
+          });
+
+          const existingIds = new Set(prev.messages.map(m => m.id));
+          const newItems = messages.filter(u => !existingIds.has(u.id));
+          return {
+            ...prev,
+            messages: [...newItems, ...merged],
+          };
+        });
+      }
+    );
+    return () => {
+      subOneMessage.remove();
+      subMultipleMessage.remove();
+      subForceUpdateMessages.remove();
+    };
+  }, []);
+
+  return {
+    messageState: loadState,
+  };
+};

package/src/hooks/message/useSendMessage.ts

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import useSessionStore from '../../store/session';
+import { useStreamMessage } from './useStreamMessage';
+import { events } from '../../constants/events';
+import { DeviceEventEmitter } from 'react-native';
+import { IMessageItem, MessageType, RoleType } from '../../types';
+import dayjs from 'dayjs';
+import { useCreateSession } from '../session/useCreateSession';
+
+export const useSendMessage = () => {
+  const { startStream, stopStream } = useStreamMessage();
+  const { mutateAsync: createSession } = useCreateSession();
+
+  const onSendMessage = useCallback(
+    async (message: string) => {
+      const messageItem: IMessageItem = {
+        id: dayjs().valueOf().toString(),
+        attachments: [],
+        type: MessageType.user_message,
+        created_at: dayjs().toISOString(),
+        modified_at: dayjs().toISOString(),
+        content: message,
+        additional_kwargs: {},
+        response_metadata: {},
+        name: null,
+        role: RoleType.user,
+        metadata: {},
+      };
+      DeviceEventEmitter.emit(events.updateOneMessage, messageItem);
+
+      let latestSessionId;
+      if (!useSessionStore.getState().sessionId) {
+        const resSession = await createSession({ title: message });
+        if (!resSession) return;
+        useSessionStore.getState().setSessionId(resSession.id);
+        latestSessionId = resSession.id;
+      }
+      startStream(
+        {
+          content: message,
+          stream: true,
+          attachments: [],
+          metadata: {
+            source: 'user',
+          },
+          manual_retry_attempts: 0,
+        },
+        latestSessionId
+      );
+    },
+    [startStream]
+  );
+
+  return {
+    onSendMessage,
+    stopStream,
+  };
+};

package/src/hooks/message/useStreamMessage.ts

@@ -0,0 +1,130 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useChatContext } from '../../context/ChatContext';
+import { ENDPOINTS } from '../../services/endpoints';
+import { type IMessageItem, type StreamMessageRequest } from '../../types';
+import EventSource from 'react-native-sse';
+import useStreamMessageStore from '../../store/streamMessage';
+import throttle from 'lodash/throttle';
+import { DeviceEventEmitter } from 'react-native';
+import { events } from '../../constants/events';
+import useSessionStore from '../../store/session';
+
+export const useStreamMessage = () => {
+  const sessionId = useSessionStore(state => state.sessionId);
+  const esRef = useRef<EventSource | null>(null);
+  const sessionIdRef = useRef<string | undefined>(sessionId);
+  const { apiAddress } = useChatContext();
+  const setStreamMessage = useStreamMessageStore(state => state.setStreamMessage);
+  const setIsStreaming = useStreamMessageStore(state => state.setIsStreaming);
+
+  useEffect(() => {
+    sessionIdRef.current = sessionId;
+  }, [sessionId]);
+
+  const startStream = useCallback(
+    (payload: StreamMessageRequest, latestSessionId?: string) => {
+      const token = (global as any)?.accessToken;
+      const currentSessionId = latestSessionId || sessionIdRef.current;
+
+      if (!currentSessionId || !token) return;
+
+      if (esRef.current) {
+        esRef.current.close();
+        esRef.current = null;
+      }
+
+      const url = `${apiAddress}${ENDPOINTS.assistantService.getStreamMessage(currentSessionId)}`;
+
+      const es = new EventSource(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(payload),
+      });
+
+      es.addEventListener('open', () => {
+        console.log('🔵 Stream opened');
+        setIsStreaming(true);
+        setStreamMessage({});
+      });
+
+      let buffers: Record<string, IMessageItem> = {};
+
+      const throttledFlush = throttle(
+        () => {
+          DeviceEventEmitter.emit(
+            events.updateMultipleMessage,
+            Object.values(buffers).map(m => ({ ...m, content: '' }))
+          );
+          setStreamMessage(buffers);
+        },
+        300,
+        { leading: true, trailing: true }
+      );
+
+      es.addEventListener('message', event => {
+        console.log('📩 Stream message:', typeof event.data, JSON?.parse?.(event?.data || '{}'));
+        try {
+          const data = JSON?.parse?.(event?.data || '{}');
+          if (!!data?.is_done) {
+            console.log('✅ Stream done');
+            es.close();
+            setIsStreaming(false);
+          } else {
+            const message = data?.messages as IMessageItem;
+            if (!message?.id) return;
+            if (buffers?.[message?.id]) {
+              buffers[message?.id] = {
+                ...message,
+                content: [buffers?.[message?.id]?.content || '', message?.content || ''].join(''),
+              };
+            } else {
+              buffers[message?.id] = message;
+            }
+            throttledFlush();
+          }
+        } catch (error) {
+          es.close();
+          setIsStreaming(false);
+        }
+      });
+
+      es.addEventListener('error', err => {
+        console.log('❌ Stream error:', err);
+        setIsStreaming(false);
+      });
+
+      es.addEventListener('close', () => {
+        console.log('🔴 Stream closed');
+        DeviceEventEmitter.emit(events.forceUpdateMessages, Object.values(buffers));
+        buffers = {};
+        setIsStreaming(false);
+      });
+
+      esRef.current = es;
+    },
+    [apiAddress]
+  );
+
+  const stopStream = useCallback(() => {
+    if (esRef.current) {
+      console.log('🛑 Closing stream');
+      esRef.current.close();
+      esRef.current = null;
+      setIsStreaming(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      stopStream();
+    };
+  }, [stopStream]);
+
+  return {
+    startStream,
+    stopStream,
+  };
+};

package/src/hooks/session/useCreateSession.ts

@@ -0,0 +1,23 @@
+import { useMutation } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../constants/query';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import { BaseResponse } from '../../types/common';
+import { CreateSessionRequest, CreateSessionResponse } from '../../types/dto';
+
+const MAX_TITLE_LENGTH = 300;
+
+export const useCreateSession = () =>
+  useMutation({
+    mutationKey: [QUERY_KEYS.CREATE_SESSION],
+    mutationFn: async (payload: CreateSessionRequest) => {
+      const res = await apiInstance?.post<BaseResponse<CreateSessionResponse>>(
+        ENDPOINTS.assistantService.createSession,
+        {
+          ...payload,
+          title: payload.title.slice(0, MAX_TITLE_LENGTH),
+        }
+      );
+      return res?.data?.data;
+    },
+  });

package/src/hooks/session/useFetchSessionById.ts

@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../constants/query';
+import { apiInstance } from '../../services';
+import { BaseResponse } from '../../types/common';
+import { SessionDetailResponse } from '../../types/dto';
+import { ENDPOINTS } from '../../services/endpoints';
+
+export const useFetchSessionById = () =>
+  useMutation({
+    mutationKey: [QUERY_KEYS.GET_SESSION_BY_ID],
+    mutationFn: async (sessionId: string) => {
+      const res = await apiInstance?.get<BaseResponse<SessionDetailResponse>>(
+        ENDPOINTS.assistantService.getSessionById(sessionId)
+      );
+      return res?.data?.data;
+    },
+  });

package/src/hooks/suggestions/useFetchSuggestions.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../constants/query';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import { BaseResponse } from '../../types/common';
+import { SuggetionResponse } from '../../types/dto';
+
+export const useFetchSuggestions = () =>
+  useQuery({
+    queryKey: [QUERY_KEYS.GET_SUGGESTIONS],
+    queryFn: async () => {
+      const res = await apiInstance?.get<BaseResponse<SuggetionResponse>>(
+        ENDPOINTS.assistantService.getSuggestions
+      );
+      return res?.data?.data;
+    },
+    enabled: !!apiInstance,
+  });

package/src/ignore.d.ts

@@ -1,2 +1,3 @@
 declare module '@droppii/libs/*';
-declare module '@droppii/libs';
+declare module '@droppii/libs';
+declare module '*';

package/src/index.ts

@@ -0,0 +1,4 @@
+import { ChatProvider } from './context/ChatContext';
+
+export * from './services';
+export { ChatProvider as ChatBotAI };

package/src/services/endpoints.ts

@@ -0,0 +1,9 @@
+export const ENDPOINTS = {
+  assistantService: {
+    getSuggestions: '/assistant-service/v1/app/chat/prompt-suggestions',
+    getSessionById: (sessionId: string) => `/assistant-service/v1/app/chat/sessions/${sessionId}`,
+    getStreamMessage: (sessionId: string) =>
+      `/assistant-service/v1/app/chat/sessions/${sessionId}/stream`,
+    createSession: '/assistant-service/v1/app/chat/sessions',
+  },
+};

package/src/store/session.ts

@@ -0,0 +1,9 @@
+import { create } from 'zustand';
+import { SessionStore } from '../types/chat';
+
+const useSessionStore = create<SessionStore>(set => ({
+  sessionId: undefined,
+  setSessionId: sessionId => set({ sessionId }),
+}));
+
+export default useSessionStore;

package/src/store/streamMessage.ts

@@ -0,0 +1,24 @@
+import { create } from 'zustand';
+import { StreamMessageStore } from '../types/chat';
+import { IMessageItem } from '../types';
+
+const useStreamMessageStore = create<StreamMessageStore>(set => ({
+  isStreaming: false,
+  setIsStreaming: isStreaming => set({ isStreaming }),
+  streamMessage: {},
+  setStreamMessage: (streamMessage: Record<string, IMessageItem>) => {
+    if (!streamMessage || Object.keys(streamMessage).length === 0) return;
+
+    set(state => {
+      const updated = { ...state.streamMessage };
+
+      for (const [id, msg] of Object.entries(streamMessage)) {
+        updated[id] = msg;
+      }
+
+      return { streamMessage: updated };
+    });
+  },
+}));
+
+export default useStreamMessageStore;

package/src/types/chat.ts

@@ -1,5 +1,23 @@
-import type { PropsWithChildren } from 'react';
+import { IMessageItem } from './dto';
 
-export interface ChatContextType {}
+export interface ChatContextType {
+  apiAddress: string;
+  userId: string;
+}
 
-export interface ChatProviderProps extends PropsWithChildren {}
+export interface ChatProviderProps {
+  apiAddress: string;
+  userId: string;
+}
+
+export interface SessionStore {
+  sessionId?: string;
+  setSessionId: (sessionId: string | undefined) => void;
+}
+
+export interface StreamMessageStore {
+  isStreaming: boolean;
+  setIsStreaming: (isStreaming: boolean) => void;
+  streamMessage: Record<string, IMessageItem>;
+  setStreamMessage: (streamMessage: Record<string, IMessageItem>) => void;
+}

package/src/types/common.ts

@@ -0,0 +1,32 @@
+export interface BaseResponse<T> {
+  statusCode: number;
+  message: any;
+  data: T;
+}
+
+export interface Pageable {
+  pageNumber: number;
+  totalPages: number;
+  pageSize: number;
+  totalElements: number;
+}
+
+export enum SuggestionCategory {
+  product = 'product',
+  discount = 'discount',
+  gift = 'gift',
+  health_advice = 'health_advice',
+  content = 'content',
+  guide = 'guide',
+}
+
+export enum MessageType {
+  user_message = 'user-message',
+  ai_thinking = 'ai-thinking',
+  ai_answer = 'ai-answer',
+}
+
+export enum RoleType {
+  user = 'user',
+  ai = 'ai',
+}

package/src/types/dto.ts

@@ -0,0 +1,74 @@
+import { MessageType, RoleType, SuggestionCategory } from './common';
+
+export interface ISuggestionItem {
+  content: string;
+  category: SuggestionCategory;
+  suggestion_id: string;
+}
+
+export interface SuggetionResponse {
+  group_suggestion_id: string;
+  suggestions: ISuggestionItem[];
+}
+
+export interface IMessageItem {
+  id: string;
+  content: string;
+  additional_kwargs: Record<string, any>;
+  response_metadata: Record<string, any>;
+  type: MessageType;
+  name: string | null;
+  role: RoleType;
+  metadata: Record<string, any>;
+  created_at: string;
+  modified_at: string;
+  attachments: any[];
+}
+
+export interface SessionDetailResponse {
+  id: string;
+  title: string;
+  created_at: string;
+  updated_at: string;
+  metadata: {
+    source: string;
+  };
+  shared: boolean;
+  messages: IMessageItem[];
+}
+
+export interface IAttachment {
+  type: 'image' | 'file';
+  source_type: 'url';
+  data: string;
+  name?: string;
+  size?: number;
+  loading?: boolean;
+  mime_type: 'image/jpeg' | 'image/png' | 'image/webp' | 'image/jpg' | 'application/pdf';
+}
+
+export interface StreamMessageRequest {
+  content: string;
+  stream: boolean;
+  attachments: IAttachment[];
+  clicked_suggestion_id?: string;
+  metadata: {
+    source: 'user';
+  };
+  manual_retry_attempts: number;
+  retried_message_id?: string;
+}
+
+export interface CreateSessionRequest {
+  title: string;
+}
+
+export interface CreateSessionResponse {
+  id: string;
+  title: string;
+  created_at: string;
+  updated_at: string;
+  metadata: {
+    source: string;
+  };
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './common';
+export * from './dto';
+export * from './chat';

package/lib/module/utils/index.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=index.js.map

package/lib/module/utils/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":"","ignoreList":[]}

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

@@ -1 +0,0 @@
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":""}

package/src/index.tsx

@@ -1,2 +0,0 @@
-export { ChatBotAI } from './components/chat';
-export * from './services';