vorqard-ai-sdk 1.0.0

package/src/screens/AIHealthChatScreen.js

@@ -0,0 +1,610 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  KeyboardAvoidingView,
+  Platform,
+  ActivityIndicator,
+  ScrollView,
+  Image,
+  StatusBar,
+  Dimensions,
+  Alert,
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import LinearGradient from 'react-native-linear-gradient';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useHealthChat } from '../hooks/useHealthChat';
+import { MessageBubble, InputPanel } from '../components/ChatComponents';
+
+const { width: SW } = Dimensions.get('window');
+
+const AI_ACTIONS = [
+  {
+    id: 'analyze_report',
+    title: 'Analyze Report',
+    desc: 'Upload and understand your medical reports',
+    icon: 'document-text',
+    colors: ['#EEF2FF', '#DBEAFE'],
+    iconColor: '#3B82F6',
+  },
+  {
+    id: 'explain_prescription',
+    title: 'Explain Prescription',
+    desc: 'Understand your medicines better',
+    icon: 'medical',
+    colors: ['#FFF7ED', '#FFEDD5'],
+    iconColor: '#F97316',
+  },
+  {
+    id: 'book_appointment',
+    title: 'Book Appointment',
+    desc: 'View and manage appointments',
+    icon: 'calendar',
+    colors: ['#FFF1F2', '#FFE4E6'],
+    iconColor: '#EF4444',
+  },
+  {
+    id: 'medical_history',
+    title: 'Medical History',
+    desc: 'View your health history',
+    icon: 'newspaper',
+    colors: ['#F0FDFA', '#CCFBF1'],
+    iconColor: '#14B8A6',
+  },
+  {
+    id: 'find_doctor',
+    title: 'Find Doctor',
+    desc: 'Find the right doctor for you',
+    icon: 'person',
+    colors: ['#F5F3FF', '#EDE9FE'],
+    iconColor: '#8B5CF6',
+  },
+  {
+    id: 'voice_assistant',
+    title: 'Voice Assistant',
+    desc: 'Talk to Vorqard AI with your voice',
+    icon: 'mic',
+    colors: ['#FFF7ED', '#FFEDD5'],
+    iconColor: '#F97316',
+  },
+];
+
+export const AIHealthChatScreen = ({
+  patientName = '',
+  onClose,
+  aiLogo,
+  onAnalyzeReportPress,
+}) => {
+  const {
+    messages,
+    inputText,
+    setInputText,
+    loading,
+    flatListRef,
+    loadChatContext,
+    sendMessage,
+    patientContext,
+    clearChat,
+  } = useHealthChat(patientName);
+
+  const [chatMode, setChatMode] = useState(false); // false = hub view, true = chat view
+
+  useEffect(() => {
+    loadChatContext();
+    // If there are existing messages, jump straight to chat mode
+    if (messages.length > 0) setChatMode(true);
+  }, []);
+
+  // When user sends a message, switch to chat mode
+  const handleSend = (text) => {
+    setChatMode(true);
+    sendMessage(text);
+  };
+
+  // Start a new conversation
+  const handleNewChat = () => {
+    clearChat();
+    setChatMode(false);
+  };
+
+  // ─── Welcome Hero Card ─────────────────────────────────────────────────────
+  const renderHeroCard = () => (
+    <View style={styles.heroCard}>
+      {/* Decorative blob */}
+      <View style={styles.heroBlobRight} />
+      <View style={styles.heroBlobLeft} />
+
+      <View style={styles.heroTopRow}>
+        <View style={styles.heroLeft}>
+          {aiLogo ? (
+            <Image source={aiLogo} style={styles.heroAvatar} />
+          ) : (
+            <View style={styles.heroAvatarFallback}>
+              <Ionicons name="sparkles" size={18} color="#FFF" />
+            </View>
+          )}
+          <View style={{ marginLeft: 10, flex: 1 }}>
+            <Text style={styles.heroGreeting}>
+              Hi {patientName || 'there'}! 👋
+            </Text>
+            <Text style={styles.heroBody}>
+              I see your last visit was for{'\n'}
+              <Text style={styles.heroHighlight}>
+                {patientContext?.diagnosis || '...'}
+              </Text>
+              {'  '}on{' '}
+              <Text style={styles.heroHighlight}>
+                {patientContext?.date || '...'}
+              </Text>.
+            </Text>
+            <Text style={styles.heroSub}>How can I help you today?</Text>
+          </View>
+        </View>
+        {/* Medical clipboard icon */}
+        <View style={styles.heroIllustration}>
+          <Ionicons name="clipboard" size={42} color="#BFDBFE" />
+        </View>
+      </View>
+
+      {/* Snapshot row */}
+      <View style={styles.snapshotRow}>
+        <View style={styles.snapshotItem}>
+          <View style={[styles.snapshotIcon, { backgroundColor: '#EEF2FF' }]}>
+            <Ionicons name="calendar-outline" size={16} color="#3B82F6" />
+          </View>
+          <Text style={styles.snapshotLabel}>Last Visit</Text>
+          <Text style={styles.snapshotValue}>{patientContext?.date || '—'}</Text>
+        </View>
+        <View style={styles.snapshotDivider} />
+        <View style={styles.snapshotItem}>
+          <View style={[styles.snapshotIcon, { backgroundColor: '#F5F3FF' }]}>
+            <Ionicons name="medkit-outline" size={16} color="#8B5CF6" />
+          </View>
+          <Text style={styles.snapshotLabel}>Condition</Text>
+          <Text style={styles.snapshotValue} numberOfLines={1}>
+            {patientContext?.diagnosis || '—'}
+          </Text>
+        </View>
+        <View style={styles.snapshotDivider} />
+        <View style={styles.snapshotItem}>
+          <View style={[styles.snapshotIcon, { backgroundColor: '#ECFDF5' }]}>
+            <Ionicons name="shield-checkmark-outline" size={16} color="#10B981" />
+          </View>
+          <Text style={styles.snapshotLabel}>Status</Text>
+          <Text style={[styles.snapshotValue, { color: '#10B981' }]}>
+            {patientContext?.status || 'Completed'}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+
+  // ─── Actions Grid ──────────────────────────────────────────────────────────
+  const renderActionsGrid = () => (
+    <View style={styles.actionsSection}>
+      <Text style={styles.actionsSectionTitle}>How can I help you?</Text>
+      <View style={styles.actionsGrid}>
+        {AI_ACTIONS.map((action) => (
+          <TouchableOpacity
+            key={action.id}
+            style={styles.actionCard}
+            onPress={() => {
+              if (action.id === 'analyze_report') {
+                if (onAnalyzeReportPress) {
+                  onAnalyzeReportPress();
+                } else {
+                  Alert.alert("Coming Soon", "Report Analysis Coming Soon");
+                }
+              } else if (action.id === 'find_doctor') {
+                Alert.alert("Coming Soon", "Coming Soon");
+              } else if (action.id === 'voice_assistant') {
+                Alert.alert("Coming Soon", "Voice Feature Coming Soon");
+              } else {
+                handleSend(action.title);
+              }
+            }}
+            activeOpacity={0.7}
+          >
+            <LinearGradient
+              colors={action.colors}
+              style={styles.actionIconCircle}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 1 }}
+            >
+              <Ionicons name={action.icon} size={24} color={action.iconColor} />
+            </LinearGradient>
+            <Text style={styles.actionTitle}>{action.title}</Text>
+            <Text style={styles.actionDesc}>{action.desc}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+
+  // ─── Empty state / Today divider ──────────────────────────────────────────
+  const renderTodayState = () => (
+    <View style={styles.todayContainer}>
+      <View style={styles.todayDividerRow}>
+        <View style={styles.todayLine} />
+        <View style={styles.todayBadge}>
+          <Text style={styles.todayBadgeText}>Today</Text>
+        </View>
+        <View style={styles.todayLine} />
+      </View>
+      <View style={styles.emptyStateBox}>
+        <Text style={styles.emptyStateSparkle}>✨  ✦</Text>
+        <Text style={styles.emptyStateTitle}>
+          Your AI health assistant is here to help.
+        </Text>
+        <Text style={styles.emptyStateBody}>
+          Ask anything about your health, reports, medicines and more.
+        </Text>
+      </View>
+    </View>
+  );
+
+  // ─── Hub content (before any chat) ────────────────────────────────────────
+  const renderHubContent = () => (
+    <ScrollView
+      style={styles.hubScroll}
+      contentContainerStyle={styles.hubScrollContent}
+      showsVerticalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+    >
+      {renderHeroCard()}
+      {renderActionsGrid()}
+      {renderTodayState()}
+    </ScrollView>
+  );
+
+  // ─── Chat content (after first message) ───────────────────────────────────
+  const renderChatContent = () => (
+    <FlatList
+      ref={flatListRef}
+      data={messages}
+      keyExtractor={(_, i) => i.toString()}
+      renderItem={({ item }) => (
+        <MessageBubble
+          item={item}
+          aiLogo={aiLogo}
+          onOptionPress={(opt) => handleSend(opt.label)}
+        />
+      )}
+      contentContainerStyle={styles.flatListContent}
+      onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
+      onLayout={() => flatListRef.current?.scrollToEnd({ animated: true })}
+      showsVerticalScrollIndicator={false}
+      ListEmptyComponent={
+        loading ? (
+          <ActivityIndicator style={{ marginTop: 60 }} color="#3B82F6" size="large" />
+        ) : null
+      }
+    />
+  );
+
+  return (
+    <SafeAreaView style={styles.safeArea} edges={['top', 'bottom']}>
+      <StatusBar barStyle="dark-content" backgroundColor="#EEF2FF" />
+
+      {/* ─── Header Bar ───────────────────────────────────────────────────── */}
+      <View style={styles.header}>
+        {onClose ? (
+          <TouchableOpacity onPress={onClose} style={styles.headerBtn} activeOpacity={0.7}>
+            <Ionicons name="arrow-back" size={22} color="#1E293B" />
+          </TouchableOpacity>
+        ) : <View style={styles.headerBtn} />}
+
+        <View style={styles.headerCenter}>
+          {aiLogo ? (
+            <Image source={aiLogo} style={styles.headerLogo} />
+          ) : (
+            <View style={styles.headerLogoFallback}>
+              <Ionicons name="sparkles" size={14} color="#FFF" />
+            </View>
+          )}
+          <Text style={styles.headerTitle}>VORQARD AI</Text>
+        </View>
+
+        <TouchableOpacity onPress={handleNewChat} style={styles.headerBtn} activeOpacity={0.7}>
+          <Ionicons name="add-circle-outline" size={26} color="#6366F1" />
+        </TouchableOpacity>
+      </View>
+
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.flex}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0}
+      >
+        <LinearGradient
+          colors={['#EEF2FF', '#E8EFFE', '#F0F4FF']}
+          style={styles.flex}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+        >
+          {chatMode ? renderChatContent() : renderHubContent()}
+
+          <InputPanel
+            value={inputText}
+            onChangeText={setInputText}
+            onSend={handleSend}
+            loading={loading}
+            onVoicePress={() => {
+              setChatMode(true);
+              sendMessage('Launch Voice Assistant');
+            }}
+            aiLogo={aiLogo}
+          />
+        </LinearGradient>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+const CARD_WIDTH = (SW - 52) / 3;
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: '#EEF2FF',
+  },
+  flex: { flex: 1 },
+
+  // ── Header ─────────────────────────────────────────────────────────────────
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#EEF2FF',
+    elevation: 2,
+    shadowColor: '#C7D2FE',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+  },
+  headerBtn: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  headerLogo: { width: 28, height: 28, borderRadius: 8 },
+  headerLogoFallback: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    backgroundColor: '#6366F1',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerTitle: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#1E293B',
+    letterSpacing: 0.3,
+  },
+
+  // ── Hub scroll ─────────────────────────────────────────────────────────────
+  hubScroll: { flex: 1 },
+  hubScrollContent: { padding: 16, paddingBottom: 8 },
+
+  // ── Hero Card ──────────────────────────────────────────────────────────────
+  heroCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    padding: 18,
+    marginBottom: 16,
+    overflow: 'hidden',
+    shadowColor: '#C7D2FE',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 4,
+  },
+  heroBlobRight: {
+    position: 'absolute',
+    width: 130,
+    height: 130,
+    borderRadius: 65,
+    backgroundColor: 'rgba(147,197,253,0.15)',
+    right: -30,
+    top: -30,
+  },
+  heroBlobLeft: {
+    position: 'absolute',
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: 'rgba(196,181,253,0.12)',
+    left: -20,
+    bottom: 20,
+  },
+  heroTopRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 16,
+  },
+  heroLeft: { flexDirection: 'row', flex: 1 },
+  heroAvatar: { width: 44, height: 44, borderRadius: 12 },
+  heroAvatarFallback: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    backgroundColor: '#6366F1',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  heroGreeting: {
+    fontSize: 17,
+    fontWeight: '800',
+    color: '#1E293B',
+    marginBottom: 4,
+  },
+  heroBody: {
+    fontSize: 13,
+    color: '#475569',
+    lineHeight: 20,
+    marginBottom: 4,
+  },
+  heroHighlight: {
+    fontWeight: '800',
+    color: '#1E293B',
+  },
+  heroSub: {
+    fontSize: 13,
+    color: '#64748B',
+    marginTop: 2,
+  },
+  heroIllustration: {
+    width: 60,
+    height: 60,
+    borderRadius: 16,
+    backgroundColor: '#EEF2FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 8,
+  },
+
+  // ── Snapshot row ───────────────────────────────────────────────────────────
+  snapshotRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: 1,
+    borderTopColor: '#F1F5F9',
+    paddingTop: 14,
+    gap: 0,
+  },
+  snapshotItem: {
+    flex: 1,
+    alignItems: 'center',
+    gap: 3,
+  },
+  snapshotIcon: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 2,
+  },
+  snapshotLabel: {
+    fontSize: 10,
+    color: '#94A3B8',
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: 0.4,
+  },
+  snapshotValue: {
+    fontSize: 12,
+    fontWeight: '800',
+    color: '#1E293B',
+    textAlign: 'center',
+  },
+  snapshotDivider: {
+    width: 1,
+    height: 40,
+    backgroundColor: '#F1F5F9',
+  },
+
+  // ── Actions Grid ───────────────────────────────────────────────────────────
+  actionsSection: { marginBottom: 16 },
+  actionsSectionTitle: {
+    fontSize: 16,
+    fontWeight: '800',
+    color: '#1E293B',
+    marginBottom: 12,
+  },
+  actionsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+  actionCard: {
+    width: CARD_WIDTH,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    padding: 12,
+    alignItems: 'center',
+    shadowColor: '#C7D2FE',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  actionIconCircle: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  actionTitle: {
+    fontSize: 11,
+    fontWeight: '800',
+    color: '#1E293B',
+    textAlign: 'center',
+    marginBottom: 3,
+  },
+  actionDesc: {
+    fontSize: 9.5,
+    color: '#94A3B8',
+    textAlign: 'center',
+    lineHeight: 14,
+    fontWeight: '500',
+  },
+
+  // ── Today / Empty State ────────────────────────────────────────────────────
+  todayContainer: { marginBottom: 8 },
+  todayDividerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 14,
+  },
+  todayLine: { flex: 1, height: 1, backgroundColor: '#E2E8F0' },
+  todayBadge: {
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    marginHorizontal: 8,
+  },
+  todayBadgeText: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#64748B',
+  },
+  emptyStateBox: { alignItems: 'center', paddingVertical: 8 },
+  emptyStateSparkle: { fontSize: 20, marginBottom: 6, letterSpacing: 4 },
+  emptyStateTitle: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#475569',
+    textAlign: 'center',
+    marginBottom: 4,
+  },
+  emptyStateBody: {
+    fontSize: 12,
+    color: '#94A3B8',
+    textAlign: 'center',
+    lineHeight: 18,
+  },
+
+  // ── Chat FlatList ──────────────────────────────────────────────────────────
+  flatListContent: { paddingVertical: 20, paddingHorizontal: 4 },
+});

package/src/screens/AIReportAnalysisScreen.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity, Text } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+import { useReportAnalysis } from '../hooks/useReportAnalysis';
+import { UploadArea, ImagePreview, ResultsPanel } from '../components/ReportAnalysisComponents';
+
+export const AIReportAnalysisScreen = ({ onClose, onChatWithAIPress }) => {
+  const {
+    selectedImage,
+    loading,
+    result,
+    fadeAnim,
+    pickFromGallery,
+    captureWithCamera,
+    analyzeReport,
+    clearImage,
+  } = useReportAnalysis();
+
+  return (
+    <View style={styles.container}>
+      <LinearGradient colors={['#071428', '#0D2248']} style={styles.header}>
+        {onClose && (
+          <TouchableOpacity onPress={onClose} style={styles.backBtn}>
+            <Ionicons name="arrow-back" size={22} color="#fff" />
+          </TouchableOpacity>
+        )}
+        <View style={{ flex: 1, alignItems: 'center', marginRight: onClose ? 36 : 0 }}>
+          <Text style={styles.headerTitle}>AI Report Analysis</Text>
+          <Text style={styles.headerSub}>Powered by Gemini Vision</Text>
+        </View>
+      </LinearGradient>
+
+      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scroll}>
+        {!selectedImage ? (
+          <UploadArea captureWithCamera={captureWithCamera} pickFromGallery={pickFromGallery} />
+        ) : (
+          <ImagePreview
+            selectedImage={selectedImage}
+            clearImage={clearImage}
+            analyzeReport={analyzeReport}
+            loading={loading}
+          />
+        )}
+
+        {loading && (
+          <View style={styles.loadingCard}>
+            <ActivityIndicator size="large" color="#2563EB" />
+            <Text style={styles.loadingText}>Gemini AI is reading your report...</Text>
+            <Text style={styles.loadingSubText}>This may take a few seconds</Text>
+          </View>
+        )}
+
+        {result && !loading && (
+          <ResultsPanel 
+            result={result} 
+            fadeAnim={fadeAnim} 
+            onChatWithAIPress={onChatWithAIPress} 
+          />
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#F8FAFC' },
+  header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 16 },
+  backBtn: { width: 36, height: 36, justifyContent: 'center', alignItems: 'center' },
+  headerTitle: { color: '#fff', fontSize: 16, fontWeight: 'bold', textAlign: 'center' },
+  headerSub: { color: '#60A5FA', fontSize: 10, textAlign: 'center', marginTop: 2 },
+  scroll: { padding: 20, paddingBottom: 40 },
+  loadingCard: { backgroundColor: '#fff', borderRadius: 16, padding: 30, alignItems: 'center', marginBottom: 16, elevation: 3 },
+  loadingText: { fontSize: 15, fontWeight: '600', color: '#1E293B', marginTop: 16 },
+  loadingSubText: { fontSize: 13, color: '#94A3B8', marginTop: 4 },
+});