Change the text color of AI bot and have AI initiate the chat

Author: regflchang

src/components/ChatBox.tsx

@@ -1,4 +1,4 @@
-import React, {useRef, useState} from 'react';
+import React, {useRef, useState, useEffect} from 'react';
 import {
   View,
   Text,
@@ -27,17 +27,22 @@ const ChatBox: React.FC = () => {
 
   const generateAIResponse = () => {
     const responses = [
-      "I'm here to help!",
-      "That's interesting. Can you tell me more?",
-      'I see. What do you think?',
-      'Great question! Let me think...',
-      'Hmm, let me look into that.',
+      '我在這裡協助你！',
+      '這聽起來很有趣，可以多跟我分享嗎？',
+      '了解了！你的想法是什麼呢？',
+      '嗯...讓我查查看。',
+      '我們一起努力吧！',
+      '加油！你做得很好！',
+      '聽起來你很認真呢！',
+      '繼續保持這個好習慣吧！',
     ];
     return responses[Math.floor(Math.random() * responses.length)];
   };
 
   const sendMessage = () => {
-    if (message.trim() === '') {return;}
+    if (message.trim() === '') {
+      return;
+    }
 
     setMessages(prev => [
       ...prev,
@@ -53,6 +58,11 @@ const ChatBox: React.FC = () => {
     }, 1000);
   };
 
+  useEffect(() => {
+    const initialWelcome = '嗨！我是你的小幫手，有需要幫忙的地方嗎？🦕';
+    setMessages([{id: generateUniqueId(), text: initialWelcome, sender: 'ai'}]);
+  }, []);
+
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -72,7 +82,12 @@ const ChatBox: React.FC = () => {
               styles.chatBubble,
               item.sender === 'user' ? styles.userBubble : styles.aiBubble,
             ]}>
-            <Text style={styles.chatText}>{item.text}</Text>
+            <Text
+              style={
+                item.sender === 'user' ? styles.chatTextUser : styles.chatTextAI
+              }>
+              {item.text}
+            </Text>
           </View>
         ))}
       </ScrollView>
@@ -125,10 +140,14 @@ const styles = StyleSheet.create({
     backgroundColor: '#e0e0e0',
     alignSelf: 'flex-start',
   },
-  chatText: {
+  chatTextUser: {
     color: '#fff',
     fontSize: 16,
   },
+  chatTextAI: {
+    color: '#333',
+    fontSize: 16,
+  },
   chatInputContainer: {
     flexDirection: 'row',
     alignItems: 'center',