react-native-chatbot-ai 0.0.5 → 0.0.6

package/src/assets/svgIcon/IconThinkingStep.tsx

@@ -0,0 +1,35 @@
+import Svg, { G, Mask, Path } from 'react-native-svg';
+
+interface Props {
+  width?: number;
+  height?: number;
+}
+
+export const IconThinkingStep = (props: Props) => {
+  const { width = 24, height = 24 } = props || {};
+  return (
+    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none" {...props}>
+      <Mask id="a" maskUnits="userSpaceOnUse" x={-8} y={-8} width={40} height={40}>
+        <Path d="M32-8H-8v40h40V-8z" fill="#fff" />
+      </Mask>
+      <G mask="url(#a)">
+        <Path
+          d="M5.093 16.972a.976.976 0 01.815.064 8.75 8.75 0 004.37 1.151c4.74 0 8.583-3.692 8.583-8.25s-3.844-8.25-8.583-8.25c-4.739 0-8.583 3.692-8.583 8.25a7.96 7.96 0 001.003 3.877c.139.242.173.53.094.798l-.896 2.92a.344.344 0 00.445.424l2.752-.984z"
+          fill="#D5DBDF"
+        />
+        <Path
+          d="M6.164 8.563a1.376 1.376 0 11-.001 2.75 1.376 1.376 0 01.001-2.75zM10.289 8.563a1.376 1.376 0 11-.001 2.75 1.376 1.376 0 01.001-2.75zM14.414 8.563a1.376 1.376 0 11-.001 2.75 1.376 1.376 0 01.001-2.75z"
+          fill="#fff"
+        />
+        <Path
+          d="M18.9 21.099a.977.977 0 00-.813.064 8.76 8.76 0 01-4.371 1.15c-4.74 0-8.583-3.686-8.583-8.236 0-4.55 3.844-8.236 8.583-8.236 4.739 0 8.583 3.684 8.583 8.236a7.94 7.94 0 01-1.003 3.87c-.139.242-.173.53-.094.799l.894 2.912a.344.344 0 01-.445.424L18.9 21.1z"
+          fill="#002BEB"
+        />
+        <Path
+          d="M9.848 12.704a1.376 1.376 0 11-.281 2.737 1.376 1.376 0 01.281-2.737zM13.989 12.73a1.376 1.376 0 11-.281 2.737 1.376 1.376 0 01.28-2.736zM18.141 12.679a1.376 1.376 0 11-.281 2.737 1.376 1.376 0 01.281-2.737z"
+          fill="#fff"
+        />
+      </G>
+    </Svg>
+  );
+};

package/src/components/chat/ChatEmpty.tsx

@@ -0,0 +1,52 @@
+import { KColors, KContainer, KLabel, KSpacingValue } from '@droppii/libs';
+import { StyleSheet } from 'react-native';
+import { useFetchSuggestions } from '../../hooks/suggestions/useFetchSuggestions';
+import SuggestionItem from './SuggestionItem';
+import { useSendMessage } from '../../hooks/message/useSendMessage';
+import debounce from 'lodash/debounce';
+import { type ISuggestionItem } from '../../types';
+
+const ChatEmpty = () => {
+  const { data } = useFetchSuggestions();
+  const { onSendMessage } = useSendMessage();
+
+  const onPress = debounce((item: ISuggestionItem) => {
+    onSendMessage(item.content);
+  }, 200);
+
+  return (
+    <KContainer.ScrollView contentContainerStyle={styles.container}>
+      <KLabel.Text typo="TextXLgMedium" center>
+        {'Bạn cần hỗ trợ gì hôm nay?'}
+      </KLabel.Text>
+      <KContainer.View center>
+        <KLabel.Text typo="TextMdNormal" center color={KColors.gray.normal}>
+          {'Hãy đặt câu hỏi hoặc chia sẻ vấn đề của bạn.'}
+        </KLabel.Text>
+        <KLabel.Text typo="TextMdNormal" center color={KColors.gray.normal}>
+          {'Xem qua những gợi ý dành cho bạn:'}
+        </KLabel.Text>
+      </KContainer.View>
+      {data?.suggestions?.map((item: ISuggestionItem) => (
+        <SuggestionItem key={item.suggestion_id} item={item} onPressItem={onPress} />
+      ))}
+      <KLabel.Text typo="TextSmNormal" color={KColors.gray.light} textAlign="center">
+        {
+          'Lưu ý: Thông tin từ AI chỉ mang tính tham khảo, cần xác minh với chuyên gia hoặc nguồn uy tín.'
+        }
+      </KLabel.Text>
+    </KContainer.ScrollView>
+  );
+};
+
+export default ChatEmpty;
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: KSpacingValue['0.75rem'],
+    gap: KSpacingValue['0.5rem'],
+  },
+});

package/src/components/chat/ChatFooter.tsx

@@ -0,0 +1,82 @@
+import { KButton, KColors, KContainer, KImage, KInput, KSpacingValue } from '@droppii/libs';
+import { useCallback, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import debounce from 'lodash/debounce';
+import { useSendMessage } from '../../hooks/message/useSendMessage';
+import useStreamMessageStore from '../../store/streamMessage';
+
+const ChatFooter = () => {
+  const { onSendMessage, stopStream } = useSendMessage();
+  const [message, setMessage] = useState('');
+  const isStreaming = useStreamMessageStore(state => state.isStreaming);
+
+  const debouncedMessage = debounce((message: string) => {
+    setMessage(message);
+  }, 200);
+
+  const onPressSend = useCallback(() => {
+    if (isStreaming) {
+      stopStream();
+      return;
+    }
+    onSendMessage(message?.trim());
+    setMessage('');
+  }, [message, isStreaming]);
+
+  return (
+    <KContainer.View style={styles.container}>
+      <KInput.TextArea
+        paddingV={'0.25rem'}
+        paddingH={'0.25rem'}
+        placeholder="Bạn muốn hỏi gì hôm nay?"
+        clearButtonMode="hidden"
+        onChangeText={debouncedMessage}
+        value={message}
+        multiline
+        style={styles.input}
+      />
+      <KContainer.View style={styles.actions}>
+        <KImage.VectorIcons name="image-o" size={24} color={KColors.gray.dark} />
+        <KImage.VectorIcons name="paperclip-o" size={24} color={KColors.gray.dark} />
+        <KContainer.View flex />
+        <KButton.Solid
+          kind="primary"
+          icon={{
+            vectorName: isStreaming ? 'square-b' : 'send-b',
+            size: 20,
+            tintColor: KColors.white,
+          }}
+          onPress={onPressSend}
+          br="round"
+          disabled={!isStreaming && message.trim() === ''}
+        />
+      </KContainer.View>
+    </KContainer.View>
+  );
+};
+
+export default ChatFooter;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    gap: KSpacingValue['0.5rem'],
+    borderWidth: 1,
+    borderColor: KColors.hexToRgba(KColors.black, 0.15),
+    borderBottomWidth: 0,
+    borderTopLeftRadius: KSpacingValue['1.25rem'],
+    borderTopRightRadius: KSpacingValue['1.25rem'],
+  },
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['1rem'],
+  },
+  sendButton: {
+    alignSelf: 'flex-end',
+  },
+  input: {
+    maxHeight: 100,
+  },
+});

package/src/components/chat/ChatHeader.tsx

@@ -3,9 +3,15 @@ import images from '../../assets/images';
 import { ImageBackground, StatusBar, StyleSheet } from 'react-native';
 import { useCallback } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import useSessionStore from '../../store/session';
 
 export const ChatHeader = () => {
   const insets = useSafeAreaInsets();
+  const setSessionId = useSessionStore(state => state.setSessionId);
+
+  const onPressNewSession = () => {
+    setSessionId(undefined);
+  };
 
   const renderStatusBar = useCallback(() => {
     return (
@@ -18,11 +24,15 @@ export const ChatHeader = () => {
     <ImageBackground source={images.bg_header} resizeMode="cover">
       {renderStatusBar()}
       <KContainer.View style={styles.header}>
-        <KImage.VectorIcons name="menu-ai" size={24} color={KColors.white} />
+        <KContainer.Touchable style={styles.button}>
+          <KImage.VectorIcons name="menu-ai-o" size={24} color={KColors.white} />
+        </KContainer.Touchable>
         <KLabel.Text flex typo="TitleBlockMedium" color={KColors.white}>
           {'Chatbot AI'}
         </KLabel.Text>
-        <KImage.VectorIcons name="chat-dot-plus" size={24} color={KColors.white} />
+        <KContainer.Touchable style={styles.button} onPress={onPressNewSession}>
+          <KImage.VectorIcons name="chat-dot-plus-o" size={24} color={KColors.white} />
+        </KContainer.Touchable>
       </KContainer.View>
     </ImageBackground>
   );
@@ -38,4 +48,10 @@ const styles = StyleSheet.create({
     gap: KSpacingValue['0.5rem'],
     alignItems: 'center',
   },
+  button: {
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });

package/src/components/chat/ChatMessageList.tsx

@@ -0,0 +1,33 @@
+import { FlatList, StyleSheet } from 'react-native';
+import ChatEmpty from './ChatEmpty';
+import { useMessage } from '../../hooks/message/useMessage';
+import ChatItem from './item';
+import { KSpacingValue } from '@droppii/libs';
+import type { IMessageItem } from 'src/types';
+
+const ChatMessageList = () => {
+  const { messageState } = useMessage();
+
+  if (!messageState?.messages?.length) {
+    return <ChatEmpty />;
+  }
+  return (
+    <FlatList
+      data={messageState?.messages || []}
+      renderItem={({ item, index }: { item: IMessageItem; index: number }) => <ChatItem item={item} index={index} />}
+      keyExtractor={(item: IMessageItem) => item.id}
+      contentContainerStyle={styles.container}
+      inverted
+    />
+  );
+};
+
+export default ChatMessageList;
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    gap: KSpacingValue['0.5rem'],
+    paddingVertical: KSpacingValue['1rem'],
+  },
+});

package/src/components/chat/SuggestionItem.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { ISuggestionItem } from '../../types/dto';
+import { KColors, KContainer, KImage, KLabel, KRadiusValue, KSpacingValue } from '@droppii/libs';
+import { SuggestionCategory } from '../../types/common';
+import { StyleSheet } from 'react-native';
+
+interface SuggestionItemProps {
+  item: ISuggestionItem;
+  onPressItem: (item: ISuggestionItem) => void;
+}
+
+const SuggestionItem = ({ item, onPressItem }: SuggestionItemProps) => {
+  const icon = useMemo(() => {
+    switch (item.category) {
+      case SuggestionCategory.product:
+        return (
+          <KImage.VectorIcons
+            name="shopping-basket-o"
+            size={16}
+            color={KColors.palette.primary.w400}
+          />
+        );
+      case SuggestionCategory.discount:
+        return (
+          <KImage.VectorIcons name="ticket-percent-o" size={16} color={KColors.danger.normal} />
+        );
+      case SuggestionCategory.gift:
+        return <KImage.VectorIcons name="gift-o" size={16} color={KColors.success.normal} />;
+      case SuggestionCategory.health_advice:
+        return (
+          <KImage.VectorIcons name="heart-rate-o" size={16} color={KColors.secondary.normal} />
+        );
+      case SuggestionCategory.content:
+        return <KImage.VectorIcons name="edit-o" size={16} color={KColors.warning.normal} />;
+      case SuggestionCategory.guide:
+        return <KImage.VectorIcons name="book" size={16} color={KColors.palette.blue.w400} />;
+      default:
+        return <KImage.VectorIcons name="edit-o" size={16} color={KColors.warning.normal} />;
+    }
+  }, [item.category]);
+
+  return (
+    <KContainer.Touchable style={styles.container} onPress={() => onPressItem(item)}>
+      {icon}
+      <KLabel.Text flex typo="TextNmNormal">
+        {item?.content || ''}
+      </KLabel.Text>
+    </KContainer.Touchable>
+  );
+};
+
+export default SuggestionItem;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.75rem'],
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: 6,
+    borderRadius: KRadiusValue['4x'],
+    backgroundColor: KColors.hexToRgba(KColors.gray.dark, 0.05),
+  },
+});

package/src/components/chat/index.tsx

@@ -1,12 +1,26 @@
 import { KContainer } from '@droppii/libs';
 import ChatHeader from './ChatHeader';
+import ChatMessageList from './ChatMessageList';
+import ChatFooter from './ChatFooter';
+import { KeyboardAvoidingView, Platform, StyleSheet } from 'react-native';
 
 const ChatBotAI = () => {
   return (
     <KContainer.Page>
-      <ChatHeader />
+      <KeyboardAvoidingView
+        style={styles.container}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <ChatHeader />
+        <ChatMessageList />
+        <ChatFooter />
+      </KeyboardAvoidingView>
     </KContainer.Page>
   );
 };
 
 export default ChatBotAI;
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

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

@@ -0,0 +1,84 @@
+import { KColors, KContainer, KLabel, KSpacingValue } from '@droppii/libs';
+import { IMessageItem } from '../../../types';
+import Markdown, { MarkdownProps } from 'react-native-markdown-display';
+import { StyleSheet } from 'react-native';
+import useStreamMessageStore from '../../../store/streamMessage';
+import { useEffect, useRef, useState } from 'react';
+
+interface ChatAIAnswerMessageItemProps {
+  item: IMessageItem;
+  isLast?: boolean;
+}
+const markDownRules: MarkdownProps['rules'] = {
+  body: (node: any, children: any, _: any, styles: any) => (
+    <KContainer.View key={node.key} style={styles}>
+      {children}
+    </KContainer.View>
+  ),
+  paragraph: (node: any, children: any, _: any, styles: any) => (
+    <KLabel.Text key={node.key} typo="TextMdNormal" style={styles} color={KColors.black}>
+      {children}
+    </KLabel.Text>
+  ),
+  span: (node: any, children: any, _: any, styles: any) => (
+    <KLabel.Text key={node.key} typo="TextMdNormal" style={styles} color={KColors.black}>
+      {children}
+    </KLabel.Text>
+  ),
+  strong: (node: any, children: any, _: any, styles: any) => (
+    <KLabel.Text key={node.key} typo="TextMdBold" style={styles} color={KColors.black}>
+      {children}
+    </KLabel.Text>
+  ),
+};
+
+const ChatAIAnswerMessageItem = ({ item, isLast = false }: ChatAIAnswerMessageItemProps) => {
+  const streamMessage = useStreamMessageStore(state => state.streamMessage?.[item.id]);
+
+  const [display, setDisplay] = useState('');
+  const indexRef = useRef(0);
+
+  useEffect(() => {
+    if (!streamMessage) {
+      indexRef.current = 0;
+      setDisplay(item.content);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      const remaining = streamMessage.content.slice(indexRef.current);
+      if (remaining.length === 0) {
+        clearInterval(interval);
+        return;
+      }
+
+      const chunkSize = 10;
+      const chunk = remaining.slice(0, chunkSize);
+
+      setDisplay(prev => prev + chunk);
+      indexRef.current += chunk.length;
+    }, 20);
+
+    return () => clearInterval(interval);
+  }, [streamMessage, item]);
+  return (
+    <KContainer.View style={styles.container}>
+      <Markdown rules={markDownRules}>{display}</Markdown>
+      <KContainer.VisibleView visible={isLast && !streamMessage}>
+        <KLabel.Text typo="TextSmNormal" color={KColors.gray.light} textAlign="center">
+          {
+            'Lưu ý: Thông tin từ AI chỉ mang tính tham khảo, cần xác minh với chuyên gia hoặc nguồn uy tín.'
+          }
+        </KLabel.Text>
+      </KContainer.VisibleView>
+    </KContainer.View>
+  );
+};
+export default ChatAIAnswerMessageItem;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['1rem'],
+    gap: KSpacingValue['0.5rem'],
+  },
+});

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

@@ -0,0 +1,130 @@
+import { KContainer, KLabel, KColors, KSpacingValue, KListItem } from '@droppii/libs';
+import type { IMessageItem } from '../../../types';
+import { StyleSheet } from 'react-native';
+import Markdown, { type MarkdownProps } from 'react-native-markdown-display';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { IconThinkingStep } from '../../../assets/svgIcon/IconThinkingStep';
+import { IconChatArrow } from '../../../assets/svgIcon/IconChatArrow';
+import useStreamMessageStore from '../../../store/streamMessage';
+
+interface ChatAIThinkingMessageItemProps {
+  item: IMessageItem;
+}
+
+const markDownRules: MarkdownProps['rules'] = {
+  body: (node: any, children: any, _: any, styles: any) => (
+    <KContainer.View key={node.key} style={styles}>
+      {children}
+    </KContainer.View>
+  ),
+  paragraph: (node: any, children: any, _: any, styles: any) => (
+    <KLabel.Text key={node.key} typo="TextSmNormal" style={styles} color={KColors.black}>
+      {children}
+    </KLabel.Text>
+  ),
+  span: (node: any, children: any, _: any, styles: any) => (
+    <KLabel.Text key={node.key} typo="TextSmNormal" style={styles} color={KColors.black}>
+      {children}
+    </KLabel.Text>
+  ),
+  strong: (node: any, children: any, _: any, styles: any) => (
+    <KLabel.Text key={node.key} typo="TextSmBold" style={styles} color={KColors.black}>
+      {children}
+    </KLabel.Text>
+  ),
+};
+
+const ChatAIThinkingMessageItem = ({ item }: ChatAIThinkingMessageItemProps) => {
+  const streamMessage = useStreamMessageStore(state => state.streamMessage?.[item.id]);
+
+  const [display, setDisplay] = useState('');
+  const indexRef = useRef(0);
+
+  const renderHeader = useCallback(() => {
+    return (
+      <KContainer.View style={styles.header}>
+        <IconThinkingStep />
+        <KLabel.Text typo="TextSmBold" color={KColors.gray.normal}>
+          {'Phân tích'}
+        </KLabel.Text>
+      </KContainer.View>
+    );
+  }, []);
+
+  useEffect(() => {
+    if (!streamMessage) {
+      indexRef.current = 0;
+      setDisplay(item.content);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      const remaining = streamMessage.content.slice(indexRef.current);
+      if (remaining.length === 0) {
+        clearInterval(interval);
+        return;
+      }
+
+      const chunkSize = 2;
+      const chunk = remaining.slice(0, chunkSize);
+
+      setDisplay(prev => prev + chunk);
+      indexRef.current += chunk.length;
+    }, 20);
+
+    return () => clearInterval(interval);
+  }, [streamMessage, item]);
+
+  return (
+    <KListItem.Accordion
+      header={renderHeader}
+      key={item.id.toString()}
+      containerStyle={styles.container}
+      headerStyle={styles.mHeader}
+      value={!!streamMessage}
+    >
+      <KContainer.View style={styles.contentContainer}>
+        <KContainer.View style={styles.arrow}>
+          <IconChatArrow fill={'#0077FF'} />
+        </KContainer.View>
+        <KContainer.View style={styles.content}>
+          <Markdown rules={markDownRules}>{display}</Markdown>
+        </KContainer.View>
+      </KContainer.View>
+    </KListItem.Accordion>
+  );
+};
+
+export default ChatAIThinkingMessageItem;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['1rem'],
+    borderBottomWidth: 0,
+    paddingVertical: 0,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: KSpacingValue['0.25rem'],
+    gap: KSpacingValue['0.5rem'],
+  },
+  mHeader: {
+    paddingVertical: 0,
+    marginBottom: KSpacingValue['0.25rem'],
+  },
+  contentContainer: {
+    flexDirection: 'row',
+  },
+  content: {
+    maxWidth: '90%',
+    paddingHorizontal: KSpacingValue['1rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    backgroundColor: KColors.hexToRgba('#0077FF', 0.1),
+    borderRadius: KSpacingValue['1rem'],
+    borderTopLeftRadius: 0,
+  },
+  arrow: {
+    transform: [{ rotateY: '180deg' }],
+  },
+});

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,12 +1,19 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 import type { ChatContextType, ChatProviderProps } from '../types/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>
   );
 };