الخطوة 5 في تطبيق الجوال: اللمسات الأخيرة

أضف اللمسات الأخيرة: مؤشر الكتابة، والتمرير التلقائي، والطوابع الزمنية.

ما ستتعلمه

• استخدام ActivityIndicator لإظهار تغذية راجعة أثناء التحميل
• التمرير التلقائي باستخدام مرجع FlatList
• تنسيق الطوابع الزمنية

الخطوة 1: التمرير التلقائي إلى الأسفل

عند وصول رسائل جديدة، ينبغي أن تنتقل الدردشة تلقائيًا إلى الأسفل لعرضها.

import { useRef } from "react";

const flatListRef = useRef<FlatList>(null);

<FlatList
  ref={flatListRef}
  onContentSizeChange={() => flatListRef.current?.scrollToEnd()}
/>

• يُستدعى onContentSizeChange عند تغيّر ارتفاع محتوى القائمة (رسائل جديدة)
• يمرّر scrollToEnd() القائمة إلى أسفلها

الخطوة 2: مؤشر الكتابة

أظهر مؤشرًا عندما يولّد الذكاء الاصطناعي استجابة:

import { ActivityIndicator } from "react-native";

{loading && (
  <View style={styles.typingIndicator}>
    <ActivityIndicator size="small" color="#007AFF" />
    <Text style={styles.typingText}>AI is typing...</Text>
  </View>
)}

الأنماط:

typingIndicator: {
  flexDirection: "row",
  alignItems: "center",
  paddingHorizontal: 16,
  paddingVertical: 8,
},
typingText: { marginLeft: 8, color: "#666", fontSize: 14 },

الخطوة 3: الطوابع الزمنية للرسائل

أظهر وقت إرسال كل رسالة:

const renderMessage = ({ item }: { item: Message }) => {
  const isUser = item.sender === "user";
  return (
    <View style={[styles.bubble, isUser ? styles.userBubble : styles.aiBubble]}>
      <Text style={[styles.bubbleText, isUser ? styles.userText : styles.aiText]}>
        {item.content}
      </Text>
      {item.timestamp && (
        <Text style={styles.timestamp}>
          {new Date(item.timestamp).toLocaleTimeString()}
        </Text>
      )}
    </View>
  );
};

الأنماط:

timestamp: {
  fontSize: 11,
  color: "#999",
  marginTop: 4,
  alignSelf: "flex-end",
},

• يحوّل new Date(item.timestamp) سلسلة الطابع الزمني بصيغة ISO إلى كائن Date
• ينسّق .toLocaleTimeString() الوقت بالشكل "10:30:45 AM"

الخطوة 4: الإدخال متعدد الأسطر

دع حقل الإدخال يتمدد عندما يكتب المستخدم رسالة طويلة:

<TextInput
  multiline
  maxHeight={100}
/>

الخطوة 5: ملف App.tsx النهائي

يضم ملف App.tsx الكامل في مجلد mobile/ كل هذه الميزات مجتمعة.

التحقق

1. أرسل رسالة → تنتقل القائمة تلقائيًا إلى الأسفل لعرضها
2. تظهر عبارة "AI is typing..." أثناء الانتظار
3. تظهر استجابة الذكاء الاصطناعي مع طابعها الزمني
4. مرّر إلى أعلى الرسائل القديمة وأرسل رسالة جديدة → تعود القائمة إلى الأسفل تلقائيًا
5. رسالة طويلة في حقل الإدخال → يزداد ارتفاع الحقل