vorqard-ai-sdk 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vorqard-ai-sdk",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Standalone React Native SDK for VORQARD AI Health Assistant and Report Analyzer",
   "main": "src/index.js",
   "repository": {
@@ -19,8 +19,9 @@
     "react-native-linear-gradient": "*",
     "react-native-safe-area-context": "*",
     "react-native-vector-icons": "*",
-    "react-native-vision-camera": "*",
-    "react-native-webrtc": "*"
+    "react-native-webrtc": "*",
+    "expo-av": "*",
+    "react-native-live-audio-stream": "*"
   },
   "keywords": [
     "vorqard",
@@ -30,10 +31,5 @@
     "healthcare"
   ],
   "author": "VORQARD Developer",
-  "license": "Abhivorn Technologies",
-  "dependencies": {
-    "expo-av": "^16.0.8",
-    "expo-file-system": "~18.0.0",
-    "react-native-live-audio-stream": "^1.1.1"
-  }
+  "license": "Abhivorn Technologies"
 }

package/src/components/UICards.js

@@ -1,239 +1,599 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-
-export const UICardContainer = ({ action, onAction }) => {
-  if (!action) return null;
-
-  switch (action.type) {
-    case 'selection':
-      return <SelectionCard action={action} onAction={onAction} />;
-    case 'slot_selection':
-      return <SlotSelectionCard action={action} onAction={onAction} />;
-    case 'booking_success':
-      return <BookingSuccessCard action={action} onAction={onAction} />;
-    case 'appointments_list':
-      return <AppointmentsListCard action={action} onAction={onAction} />;
-    default:
-      return null;
-  }
-};
-
-const SelectionCard = ({ action, onAction }) => {
-  return (
-    <View style={styles.card}>
-      <Text style={styles.title}>{action.title || 'Please Select'}</Text>
-      {action.options?.map((opt, i) => (
-        <TouchableOpacity
-          key={opt.id || i}
-          style={styles.doctorItem}
-          onPress={() => onAction(opt.label || opt.name)}
-        >
-          {opt.profile_picture ? (
-            <Image source={{ uri: opt.profile_picture }} style={styles.docImg} />
-          ) : (
-            <View style={styles.docAvatar}>
-              <Ionicons name="person" size={20} color="#fff" />
-            </View>
-          )}
-          <View style={styles.docInfo}>
-            <Text style={styles.docName}>{opt.name || opt.label}</Text>
-            {opt.specialty && <Text style={styles.docSpec}>{opt.specialty}</Text>}
-            <View style={styles.docMetaRow}>
-              {opt.experience && <Text style={styles.docMeta}>{opt.experience} yrs exp</Text>}
-              {opt.consultation_fee && <Text style={styles.docMeta}> • ₹{opt.consultation_fee}</Text>}
-            </View>
-          </View>
-        </TouchableOpacity>
-      ))}
-    </View>
-  );
-};
-
-const SlotSelectionCard = ({ action, onAction }) => {
-  return (
-    <View style={styles.card}>
-      <Text style={styles.title}>{action.title || 'Select Time'}</Text>
-      <Text style={styles.subtitle}>{action.selected_date}</Text>
-      <View style={styles.slotGrid}>
-        {action.options?.map((opt, i) => (
-          <TouchableOpacity
-            key={opt.id || i}
-            style={styles.slotBtn}
-            onPress={() => onAction(opt.label)}
-          >
-            <Text style={styles.slotText}>{opt.label}</Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-    </View>
-  );
-};
-
-const BookingSuccessCard = ({ action, onAction }) => {
-  return (
-    <View style={styles.successCard}>
-      <View style={styles.successIcon}>
-        <Ionicons name="checkmark-circle" size={48} color="#10B981" />
-      </View>
-      <Text style={styles.successTitle}>Booking Confirmed!</Text>
-      <View style={styles.detailRow}>
-        <Ionicons name="person-outline" size={16} color="rgba(255,255,255,0.7)" />
-        <Text style={styles.detailText}>{action.doctor}</Text>
-      </View>
-      <View style={styles.detailRow}>
-        <Ionicons name="calendar-outline" size={16} color="rgba(255,255,255,0.7)" />
-        <Text style={styles.detailText}>{action.date} at {action.slot}</Text>
-      </View>
-    </View>
-  );
-};
-
-const AppointmentsListCard = ({ action, onAction }) => {
-  if (!action.appointments || action.appointments.length === 0) {
-    return (
-      <View style={styles.card}>
-        <Text style={styles.title}>Your Appointments</Text>
-        <Text style={styles.detailText}>No upcoming appointments found.</Text>
-      </View>
-    );
-  }
-  return (
-    <View style={styles.card}>
-      <Text style={styles.title}>Your Appointments</Text>
-      {action.appointments.map((appt, i) => (
-        <View key={appt.id || i} style={styles.apptItem}>
-          <Text style={styles.docName}>{appt.doctor}</Text>
-          <Text style={styles.docSpec}>{appt.specialty}</Text>
-          <View style={styles.detailRow}>
-            <Ionicons name="calendar-outline" size={14} color="#818CF8" />
-            <Text style={styles.detailText}>{appt.date} at {appt.time}</Text>
-          </View>
-        </View>
-      ))}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: 'rgba(255,255,255,0.08)',
-    borderRadius: 16,
-    padding: 16,
-    marginVertical: 10,
-    borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.15)',
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: '#fff',
-    marginBottom: 4,
-  },
-  subtitle: {
-    fontSize: 13,
-    color: 'rgba(255,255,255,0.6)',
-    marginBottom: 12,
-  },
-  doctorItem: {
-    flexDirection: 'row',
-    backgroundColor: 'rgba(0,0,0,0.2)',
-    padding: 12,
-    borderRadius: 12,
-    marginTop: 8,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.05)',
-  },
-  docImg: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    marginRight: 12,
-  },
-  docAvatar: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    backgroundColor: 'rgba(99,102,241,0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12,
-  },
-  docInfo: {
-    flex: 1,
-  },
-  docName: {
-    fontSize: 15,
-    fontWeight: 'bold',
-    color: '#fff',
-  },
-  docSpec: {
-    fontSize: 12,
-    color: '#818CF8',
-    marginTop: 2,
-  },
-  docMetaRow: {
-    flexDirection: 'row',
-    marginTop: 4,
-  },
-  docMeta: {
-    fontSize: 11,
-    color: 'rgba(255,255,255,0.5)',
-  },
-  slotGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 8,
-  },
-  slotBtn: {
-    backgroundColor: 'rgba(99,102,241,0.2)',
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: 'rgba(99,102,241,0.4)',
-  },
-  slotText: {
-    color: '#E0E7FF',
-    fontSize: 13,
-    fontWeight: '600',
-  },
-  successCard: {
-    backgroundColor: 'rgba(16,185,129,0.1)',
-    borderRadius: 16,
-    padding: 20,
-    marginVertical: 10,
-    borderWidth: 1,
-    borderColor: 'rgba(16,185,129,0.3)',
-    alignItems: 'center',
-  },
-  successIcon: {
-    marginBottom: 8,
-  },
-  successTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#34D399',
-    marginBottom: 16,
-  },
-  detailRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 6,
-    gap: 6,
-    width: '100%',
-  },
-  detailText: {
-    fontSize: 14,
-    color: 'rgba(255,255,255,0.8)',
-  },
-  apptItem: {
-    backgroundColor: 'rgba(0,0,0,0.2)',
-    padding: 12,
-    borderRadius: 12,
-    marginTop: 8,
-    borderLeftWidth: 3,
-    borderLeftColor: '#818CF8',
-  },
-});
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Linking, ScrollView } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+// Rich card components (already built for the chat UI, reused here)
+import { SpecialtySelectionCard } from './cards/SpecialtySelectionCard';
+import { DoctorSelectionList } from './cards/DoctorCards';
+import { SlotSelectionCard } from './cards/SlotSelectionCard';
+import { BookingConfirmationCard } from './cards/BookingConfirmationCard';
+
+/**
+ * UICardContainer — renders the backend-driven ui_action payload.
+ *
+ * Interaction text conventions (sent via sendUIInteraction → DataChannel):
+ *   specialty_cards      →  opt.id            e.g. "Cardiology"
+ *   doctor_cards         →  "doctor:<id>"     e.g. "doctor:5"
+ *   provider_selection   →  "doctor:<id>"     VORQARD tap
+ *                        →  "nearby:<id>"     Nearby tap
+ *   nearby_details       →  navigation via Linking (no DataChannel)
+ *   slot_cards (slot)    →  opt.label         e.g. "10:30"
+ *   slot_cards (date)    →  "date:YYYY-MM-DD" from date picker
+ *   payment_card         →  opt.id            "cash" | "upi" | "card"
+ *   booking_success      →  no interaction
+ */
+export const UICardContainer = ({ action, onAction }) => {
+  if (!action) return null;
+
+  switch (action.type) {
+
+    // ── Phase 3/4: existing cards ─────────────────────────────────────────────
+
+    case 'specialty_cards':
+      return (
+        <SpecialtySelectionCard
+          options={action.items}
+          onOptionPress={(opt) => onAction(opt.id)}
+        />
+      );
+
+    case 'doctor_cards':
+      return (
+        <DoctorSelectionList
+          options={action.items}
+          onOptionPress={(opt) => onAction(`doctor:${opt.id}`)}
+        />
+      );
+
+    case 'slot_cards':
+      return (
+        <SlotSelectionCard
+          doctor={action.doctor}
+          selectedDate={action.date}
+          options={action.items}
+          onOptionPress={(opt) => onAction(opt.label)}
+        />
+      );
+
+    case 'confirmation_card':
+      return (
+        <BookingConfirmationCard
+          ui={{
+            doctor: action.doctor,
+            date: action.date,
+            slot: action.slot,
+            options: action.items,
+          }}
+          onOptionPress={(opt) => onAction(opt.id)}
+        />
+      );
+
+    case 'booking_success':
+      return <BookingSuccessCard action={action} />;
+
+    // ── Phase 5: two-category provider selection ──────────────────────────────
+
+    case 'provider_selection':
+      return (
+        <ProviderSelectionCard
+          action={action}
+          onVorqardPress={(doc) => onAction(`doctor:${doc.id}`)}
+          onNearbyPress={(p) => onAction(`nearby:${p.id}`)}
+        />
+      );
+
+    case 'nearby_details':
+      return <NearbyDetailsCard action={action} />;
+
+    // ── Phase 6: payment ──────────────────────────────────────────────────────
+
+    case 'payment_card':
+      return (
+        <PaymentCard
+          action={action}
+          onMethodPress={(opt) => onAction(opt.id)}
+        />
+      );
+
+    // ── Legacy / Gemini-path cards (backwards compat) ─────────────────────────
+
+    case 'selection':
+      return <LegacySelectionCard action={action} onAction={onAction} />;
+
+    case 'slot_selection':
+      return <LegacySlotCard action={action} onAction={onAction} />;
+
+    case 'appointments_list':
+      return <AppointmentsListCard action={action} onAction={onAction} />;
+
+    default:
+      return null;
+  }
+};
+
+// ── Booking success (shared by both paths) ────────────────────────────────────
+
+const BookingSuccessCard = ({ action }) => (
+  <View style={styles.successCard}>
+    <View style={styles.successIcon}>
+      <Ionicons name="checkmark-circle" size={48} color="#10B981" />
+    </View>
+    <Text style={styles.successTitle}>Booking Confirmed!</Text>
+    <View style={styles.detailRow}>
+      <Ionicons name="person-outline" size={16} color="rgba(255,255,255,0.7)" />
+      <Text style={styles.detailText}>{action.doctor}</Text>
+    </View>
+    <View style={styles.detailRow}>
+      <Ionicons name="calendar-outline" size={16} color="rgba(255,255,255,0.7)" />
+      <Text style={styles.detailText}>{action.date} at {action.slot}</Text>
+    </View>
+  </View>
+);
+
+// ── Phase 5: Provider Selection (Our Services + Nearby) ──────────────────────
+
+const ProviderSelectionCard = ({ action, onVorqardPress, onNearbyPress }) => {
+  const [tab, setTab] = useState('our_services');
+  const vorqardList = action.our_services || [];
+  const nearbyList = action.nearby || [];
+
+  return (
+    <View style={styles.card}>
+      <Text style={styles.title}>{action.title || 'Find a Provider'}</Text>
+
+      {/* Tab strip */}
+      <View style={styles.tabRow}>
+        <TouchableOpacity
+          style={[styles.tab, tab === 'our_services' && styles.tabActive]}
+          onPress={() => setTab('our_services')}
+        >
+          <Ionicons name="shield-checkmark-outline" size={14} color={tab === 'our_services' ? '#818CF8' : 'rgba(255,255,255,0.5)'} />
+          <Text style={[styles.tabText, tab === 'our_services' && styles.tabTextActive]}>
+            Our Services ({vorqardList.length})
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.tab, tab === 'nearby' && styles.tabActive]}
+          onPress={() => setTab('nearby')}
+        >
+          <Ionicons name="location-outline" size={14} color={tab === 'nearby' ? '#818CF8' : 'rgba(255,255,255,0.5)'} />
+          <Text style={[styles.tabText, tab === 'nearby' && styles.tabTextActive]}>
+            Nearby ({nearbyList.length})
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      {tab === 'our_services' ? (
+        vorqardList.length === 0 ? (
+          <Text style={styles.emptyText}>No VORQARD specialists found in this area.</Text>
+        ) : (
+          vorqardList.map((doc, i) => (
+            <TouchableOpacity key={doc.id || i} style={styles.doctorItem} onPress={() => onVorqardPress(doc)}>
+              {doc.profile_picture
+                ? <Image source={{ uri: doc.profile_picture }} style={styles.docImg} />
+                : <View style={styles.docAvatar}><Ionicons name="person" size={20} color="#fff" /></View>
+              }
+              <View style={styles.docInfo}>
+                <Text style={styles.docName}>{doc.name}</Text>
+                <Text style={styles.docSpec}>{doc.specialty}</Text>
+                <View style={styles.docMetaRow}>
+                  {doc.consultation_fee > 0 && <Text style={styles.docMeta}>₹{doc.consultation_fee}</Text>}
+                  {doc.distance != null && <Text style={styles.docMeta}> • {doc.distance} km</Text>}
+                  {doc.rating > 0 && <Text style={styles.docMeta}> • ⭐ {doc.rating}</Text>}
+                </View>
+              </View>
+              <View style={styles.bookBadge}>
+                <Text style={styles.bookBadgeText}>Book</Text>
+              </View>
+            </TouchableOpacity>
+          ))
+        )
+      ) : (
+        nearbyList.length === 0 ? (
+          <Text style={styles.emptyText}>No nearby clinics found in this area.</Text>
+        ) : (
+          nearbyList.map((p, i) => (
+            <TouchableOpacity key={p.id || i} style={styles.nearbyItem} onPress={() => onNearbyPress(p)}>
+              <View style={styles.nearbyIcon}>
+                <Ionicons name="business-outline" size={22} color="#818CF8" />
+              </View>
+              <View style={styles.docInfo}>
+                <Text style={styles.docName}>{p.name}</Text>
+                {p.address ? <Text style={styles.docSpec} numberOfLines={1}>{p.address}</Text> : null}
+                <View style={styles.docMetaRow}>
+                  {p.distance != null && <Text style={styles.docMeta}>{p.distance} km away</Text>}
+                  {p.phone ? <Text style={styles.docMeta}> • {p.phone}</Text> : null}
+                </View>
+              </View>
+              <Ionicons name="chevron-forward" size={16} color="rgba(255,255,255,0.4)" />
+            </TouchableOpacity>
+          ))
+        )
+      )}
+    </View>
+  );
+};
+
+// ── Phase 5: Nearby Details (info-only, no booking) ───────────────────────────
+
+const NearbyDetailsCard = ({ action }) => {
+  const p = action.provider || {};
+  const openMaps = () => {
+    if (p.maps_url) Linking.openURL(p.maps_url).catch(() => {});
+  };
+  const callPhone = () => {
+    if (p.phone) Linking.openURL(`tel:${p.phone}`).catch(() => {});
+  };
+
+  return (
+    <View style={[styles.card, styles.nearbyDetailCard]}>
+      <View style={styles.nearbyDetailHeader}>
+        <Ionicons name="business" size={28} color="#818CF8" />
+        <Text style={[styles.title, { marginLeft: 10 }]}>{p.name || 'Nearby Clinic'}</Text>
+      </View>
+
+      {p.address ? (
+        <View style={styles.detailRow}>
+          <Ionicons name="location-outline" size={16} color="rgba(255,255,255,0.6)" />
+          <Text style={styles.detailText}>{p.address}</Text>
+        </View>
+      ) : null}
+
+      {p.distance != null ? (
+        <View style={styles.detailRow}>
+          <Ionicons name="navigate-outline" size={16} color="rgba(255,255,255,0.6)" />
+          <Text style={styles.detailText}>{p.distance} km away</Text>
+        </View>
+      ) : null}
+
+      {p.phone ? (
+        <View style={styles.detailRow}>
+          <Ionicons name="call-outline" size={16} color="rgba(255,255,255,0.6)" />
+          <Text style={styles.detailText}>{p.phone}</Text>
+        </View>
+      ) : null}
+
+      <View style={styles.nearbyBtnRow}>
+        {p.phone ? (
+          <TouchableOpacity style={styles.nearbyBtn} onPress={callPhone}>
+            <Ionicons name="call" size={16} color="#fff" />
+            <Text style={styles.nearbyBtnText}>Call</Text>
+          </TouchableOpacity>
+        ) : null}
+        {p.maps_url ? (
+          <TouchableOpacity style={[styles.nearbyBtn, styles.navBtn]} onPress={openMaps}>
+            <Ionicons name="navigate" size={16} color="#fff" />
+            <Text style={styles.nearbyBtnText}>Navigate</Text>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+
+      <View style={styles.nearbyNoBookNotice}>
+        <Ionicons name="information-circle-outline" size={14} color="rgba(255,255,255,0.4)" />
+        <Text style={styles.nearbyNoBookText}>Booking not available — visit or call directly.</Text>
+      </View>
+    </View>
+  );
+};
+
+// ── Phase 6: Payment Card ─────────────────────────────────────────────────────
+
+const PaymentCard = ({ action, onMethodPress }) => {
+  const doc = action.doctor || {};
+  return (
+    <View style={[styles.card, styles.paymentCard]}>
+      <Text style={styles.title}>{action.title || 'Payment'}</Text>
+
+      {/* Appointment summary */}
+      <View style={styles.paymentSummary}>
+        <View style={styles.detailRow}>
+          <Ionicons name="person-outline" size={15} color="rgba(255,255,255,0.6)" />
+          <Text style={styles.detailText}>{doc.name || 'Doctor'}</Text>
+        </View>
+        <View style={styles.detailRow}>
+          <Ionicons name="calendar-outline" size={15} color="rgba(255,255,255,0.6)" />
+          <Text style={styles.detailText}>{action.date} at {action.slot}</Text>
+        </View>
+        <View style={[styles.detailRow, styles.amountRow]}>
+          <Ionicons name="cash-outline" size={15} color="#10B981" />
+          <Text style={styles.amountText}>₹{action.amount || 0}</Text>
+        </View>
+      </View>
+
+      {/* Payment options */}
+      <Text style={styles.subtitle}>Choose payment method</Text>
+      {(action.items || []).map((opt, i) => (
+        <TouchableOpacity key={opt.id || i} style={styles.paymentBtn} onPress={() => onMethodPress(opt)}>
+          <Ionicons name={opt.icon || 'card-outline'} size={20} color="#818CF8" />
+          <Text style={styles.paymentBtnText}>{opt.label}</Text>
+          <Ionicons name="chevron-forward" size={16} color="rgba(255,255,255,0.4)" />
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+// ── Legacy cards (kept for Gemini-routed queries) ─────────────────────────────
+
+const LegacySelectionCard = ({ action, onAction }) => (
+  <View style={styles.card}>
+    <Text style={styles.title}>{action.title || 'Please Select'}</Text>
+    {action.options?.map((opt, i) => (
+      <TouchableOpacity
+        key={opt.id || i}
+        style={styles.doctorItem}
+        onPress={() => onAction(opt.label || opt.name)}
+      >
+        {opt.profile_picture ? (
+          <Image source={{ uri: opt.profile_picture }} style={styles.docImg} />
+        ) : (
+          <View style={styles.docAvatar}>
+            <Ionicons name="person" size={20} color="#fff" />
+          </View>
+        )}
+        <View style={styles.docInfo}>
+          <Text style={styles.docName}>{opt.name || opt.label}</Text>
+          {opt.specialty && <Text style={styles.docSpec}>{opt.specialty}</Text>}
+          <View style={styles.docMetaRow}>
+            {opt.experience && <Text style={styles.docMeta}>{opt.experience} yrs exp</Text>}
+            {opt.consultation_fee && <Text style={styles.docMeta}> • ₹{opt.consultation_fee}</Text>}
+          </View>
+        </View>
+      </TouchableOpacity>
+    ))}
+  </View>
+);
+
+const LegacySlotCard = ({ action, onAction }) => (
+  <View style={styles.card}>
+    <Text style={styles.title}>{action.title || 'Select Time'}</Text>
+    <Text style={styles.subtitle}>{action.selected_date}</Text>
+    <View style={styles.slotGrid}>
+      {action.options?.map((opt, i) => (
+        <TouchableOpacity
+          key={opt.id || i}
+          style={styles.slotBtn}
+          onPress={() => onAction(opt.label)}
+        >
+          <Text style={styles.slotText}>{opt.label}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  </View>
+);
+
+const AppointmentsListCard = ({ action, onAction }) => {
+  if (!action.appointments || action.appointments.length === 0) {
+    return (
+      <View style={styles.card}>
+        <Text style={styles.title}>Your Appointments</Text>
+        <Text style={styles.detailText}>No upcoming appointments found.</Text>
+      </View>
+    );
+  }
+  return (
+    <View style={styles.card}>
+      <Text style={styles.title}>Your Appointments</Text>
+      {action.appointments.map((appt, i) => (
+        <View key={appt.id || i} style={styles.apptItem}>
+          <Text style={styles.docName}>{appt.doctor}</Text>
+          <Text style={styles.docSpec}>{appt.specialty}</Text>
+          <View style={styles.detailRow}>
+            <Ionicons name="calendar-outline" size={14} color="#818CF8" />
+            <Text style={styles.detailText}>{appt.date} at {appt.time}</Text>
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    borderRadius: 16,
+    padding: 16,
+    marginVertical: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.15)',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#fff',
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 13,
+    color: 'rgba(255,255,255,0.6)',
+    marginBottom: 12,
+  },
+  doctorItem: {
+    flexDirection: 'row',
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.05)',
+  },
+  docImg: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    marginRight: 12,
+  },
+  docAvatar: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(99,102,241,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  docInfo: { flex: 1 },
+  docName: { fontSize: 15, fontWeight: 'bold', color: '#fff' },
+  docSpec: { fontSize: 12, color: '#818CF8', marginTop: 2 },
+  docMetaRow: { flexDirection: 'row', marginTop: 4 },
+  docMeta: { fontSize: 11, color: 'rgba(255,255,255,0.5)' },
+  slotGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+  slotBtn: {
+    backgroundColor: 'rgba(99,102,241,0.2)',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(99,102,241,0.4)',
+  },
+  slotText: { color: '#E0E7FF', fontSize: 13, fontWeight: '600' },
+  successCard: {
+    backgroundColor: 'rgba(16,185,129,0.1)',
+    borderRadius: 16,
+    padding: 20,
+    marginVertical: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(16,185,129,0.3)',
+    alignItems: 'center',
+  },
+  successIcon: { marginBottom: 8 },
+  successTitle: { fontSize: 18, fontWeight: 'bold', color: '#34D399', marginBottom: 16 },
+  detailRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 6,
+    gap: 6,
+    width: '100%',
+  },
+  detailText: { fontSize: 14, color: 'rgba(255,255,255,0.8)' },
+  apptItem: {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    borderLeftWidth: 3,
+    borderLeftColor: '#818CF8',
+  },
+
+  // ── Provider Selection ────────────────────────────────────────────────────
+  tabRow: {
+    flexDirection: 'row',
+    marginBottom: 12,
+    gap: 8,
+  },
+  tab: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4,
+    paddingVertical: 8,
+    borderRadius: 10,
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+  },
+  tabActive: {
+    backgroundColor: 'rgba(99,102,241,0.2)',
+    borderColor: 'rgba(99,102,241,0.5)',
+  },
+  tabText: { fontSize: 12, color: 'rgba(255,255,255,0.5)', fontWeight: '600' },
+  tabTextActive: { color: '#818CF8' },
+  nearbyItem: {
+    flexDirection: 'row',
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    alignItems: 'center',
+    gap: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.05)',
+  },
+  nearbyIcon: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(99,102,241,0.15)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bookBadge: {
+    backgroundColor: 'rgba(99,102,241,0.3)',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(99,102,241,0.5)',
+  },
+  bookBadgeText: { color: '#A5B4FC', fontSize: 12, fontWeight: '700' },
+  emptyText: { color: 'rgba(255,255,255,0.4)', fontSize: 13, textAlign: 'center', marginTop: 12 },
+
+  // ── Nearby Details ────────────────────────────────────────────────────────
+  nearbyDetailCard: {
+    borderColor: 'rgba(99,102,241,0.3)',
+  },
+  nearbyDetailHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  nearbyBtnRow: {
+    flexDirection: 'row',
+    gap: 10,
+    marginTop: 14,
+  },
+  nearbyBtn: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    backgroundColor: 'rgba(99,102,241,0.25)',
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(99,102,241,0.4)',
+  },
+  navBtn: {
+    backgroundColor: 'rgba(16,185,129,0.2)',
+    borderColor: 'rgba(16,185,129,0.4)',
+  },
+  nearbyBtnText: { color: '#fff', fontSize: 14, fontWeight: '600' },
+  nearbyNoBookNotice: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+    marginTop: 12,
+  },
+  nearbyNoBookText: { color: 'rgba(255,255,255,0.35)', fontSize: 11 },
+
+  // ── Payment Card ──────────────────────────────────────────────────────────
+  paymentCard: {
+    borderColor: 'rgba(16,185,129,0.25)',
+  },
+  paymentSummary: {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 14,
+    gap: 6,
+  },
+  amountRow: { marginTop: 4 },
+  amountText: { fontSize: 20, fontWeight: 'bold', color: '#34D399', marginLeft: 6 },
+  paymentBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    padding: 14,
+    borderRadius: 12,
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+  },
+  paymentBtnText: { flex: 1, color: '#fff', fontSize: 15, fontWeight: '600' },
+});

package/src/hooks/useRealtimeVoice.js

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { Platform, PermissionsAndroid } from 'react-native';
 import { mediaDevices, RTCPeerConnection, RTCSessionDescription } from 'react-native-webrtc';
-import { Audio } from 'expo-av';
+
 
 export const VOICE_STATE = {
   IDLE:       'idle',
@@ -30,14 +30,6 @@ export const useRealtimeVoice = ({ onMessageAdded, backendUrl, userToken } = {})
       setAiResponse('');
       setUiAction(null);
       
-      // 1. Audio Session permissions (mostly needed for iOS routing)
-      const { status } = await Audio.requestPermissionsAsync();
-      if (status !== 'granted') {
-        setError('Microphone permission denied by Expo AV.');
-        setVoiceState(VOICE_STATE.ERROR);
-        return;
-      }
-
       // 1b. Explicitly request Android microphone permission using PermissionsAndroid
       if (Platform.OS === 'android') {
         const granted = await PermissionsAndroid.request(
@@ -57,13 +49,22 @@ export const useRealtimeVoice = ({ onMessageAdded, backendUrl, userToken } = {})
         }
       }
       
-      await Audio.setAudioModeAsync({
-        allowsRecordingIOS: true,
-        playsInSilentModeIOS: true,
-        playThroughEarpieceAndroid: false, // FORCE SPEAKERPHONE ON ANDROID
-        staysActiveInBackground: true,
-      });
-
+      // 1c. Force audio to loudspeaker instead of earpiece using expo-av (if available)
+      try {
+        const { Audio } = require('expo-av');
+        if (Audio) {
+          await Audio.setAudioModeAsync({
+            allowsRecordingIOS: true,
+            playsInSilentModeIOS: true,
+            staysActiveInBackground: true,
+            shouldRouteThroughEarpieceAndroid: false, // Force Speakerphone
+          });
+          console.log('[WebRTC] Audio routed to main loudspeaker via expo-av');
+        }
+      } catch (audioErr) {
+        console.log('[WebRTC] expo-av not found or failed, using default routing.');
+      }
+      
       // 2. Setup WebRTC Peer Connection
       const pc = new RTCPeerConnection({
         iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
@@ -101,13 +102,15 @@ export const useRealtimeVoice = ({ onMessageAdded, backendUrl, userToken } = {})
             setVoiceState(VOICE_STATE.PROCESSING);
           } else if (data.type === 'response_partial') {
             setAiResponse(prev => prev + data.text);
-            setVoiceState(VOICE_STATE.SPEAKING);
+            // Only transition to SPEAKING once — avoid re-rendering on every character
+            setVoiceState(prev => prev === VOICE_STATE.SPEAKING ? prev : VOICE_STATE.SPEAKING);
           } else if (data.type === 'response') {
             setAiResponse(data.text);
             setVoiceState(VOICE_STATE.SPEAKING);
           } else if (data.type === 'interrupted') {
             setAiResponse('');
             setTranscript('');
+            setUiAction(null);
             setVoiceState(VOICE_STATE.LISTENING);
           } else if (data.type === 'turn_complete') {
             setAiResponse('');
@@ -228,9 +231,7 @@ export const useRealtimeVoice = ({ onMessageAdded, backendUrl, userToken } = {})
       dcRef.current.close();
       dcRef.current = null;
     }
-    try {
-      await Audio.setAudioModeAsync({ allowsRecordingIOS: false });
-    } catch (_) {}
+
     
     setVoiceState(VOICE_STATE.IDLE);
   }, []);

package/src/screens/AIVoiceAssistantScreen.js

@@ -24,7 +24,7 @@
  *  └──────────────────────────────┘
  */
 
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef, useCallback, useState } from 'react';
 import {
   View,
   Text,
@@ -363,6 +363,8 @@ export const AIVoiceAssistantScreen = ({
   } = useRealtimeVoice({ onMessageAdded, backendUrl, userToken });
 
   const scrollRef = useRef(null);
+  const scrollTimerRef = useRef(null);
+  const hasStartedRef = useRef(false);
   const cfg = STATE_CFG[voiceState] || STATE_CFG[VOICE_STATE.IDLE];
 
   const isListening = voiceState === VOICE_STATE.LISTENING;
@@ -385,16 +387,26 @@ export const AIVoiceAssistantScreen = ({
     }
   }, [voiceState, interrupt, startListening]);
 
-  // Auto-start listening when the screen opens
+  // Auto-start on mount only — guard against unstable parent props re-triggering startListening
   useEffect(() => {
-    startListening();
+    if (!hasStartedRef.current) {
+      hasStartedRef.current = true;
+      startListening();
+    }
   }, [startListening]);
 
-  // Auto-scroll transcript when new content appears
+  // Auto-scroll debounced — fires at most once per 150ms to avoid thrashing on every character
   useEffect(() => {
     if (transcript || aiResponse) {
-      setTimeout(() => scrollRef.current?.scrollToEnd({ animated: true }), 100);
+      if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current);
+      scrollTimerRef.current = setTimeout(
+        () => scrollRef.current?.scrollToEnd({ animated: true }),
+        150
+      );
     }
+    return () => {
+      if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current);
+    };
   }, [transcript, aiResponse]);
 
   const displayName = patientName || 'there';