vorqard-ai-sdk 1.0.0

package/src/components/ChatStyles.js

@@ -0,0 +1,759 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export const styles = StyleSheet.create({
+  // ── Bubble ────────────────────────────────────────────────────────────────
+  bubbleContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginVertical: 6,
+    paddingHorizontal: 14,
+    gap: 10,
+  },
+  userAlign: { justifyContent: 'flex-end' },
+  assistantAlign: { justifyContent: 'flex-start' },
+
+  avatarImage: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  },
+  avatarFallback: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: '#6366F1',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bubble: {
+    maxWidth: SCREEN_WIDTH * 0.76,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 20,
+  },
+  userBubble: { borderBottomRightRadius: 4 },
+  assistantBubble: {
+    backgroundColor: '#FFFFFF',
+    borderBottomLeftRadius: 4,
+    shadowColor: '#C7D2FE',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  userText: {
+    fontSize: 14,
+    lineHeight: 21,
+    color: '#FFF',
+    fontWeight: '500',
+  },
+  assistantText: {
+    fontSize: 14,
+    lineHeight: 21,
+    color: '#1E293B',
+    fontWeight: '500',
+  },
+  highlightText: {
+    color: '#3B82F6',
+    fontWeight: '800',
+  },
+  userTime: {
+    fontSize: 9,
+    color: 'rgba(255,255,255,0.65)',
+    marginTop: 4,
+    alignSelf: 'flex-end',
+  },
+  assistantTime: {
+    fontSize: 9,
+    color: '#94A3B8',
+    marginTop: 4,
+    alignSelf: 'flex-end',
+  },
+
+  // ── Input Panel ───────────────────────────────────────────────────────────
+  inputOuterContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: 'transparent',
+  },
+  inputBorderGradient: {
+    borderRadius: 30,
+    padding: 1.5,
+  },
+  inputInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 29,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    gap: 6,
+  },
+  textInput: {
+    flex: 1,
+    fontSize: 14,
+    color: '#334155',
+    paddingVertical: 8,
+    maxHeight: 100,
+  },
+  rightIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  iconBtn: {
+    width: 34,
+    height: 34,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sendButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  optionsContainer: {
+    marginTop: 8,
+    gap: 6,
+    width: '100%',
+  },
+  optionButton: {
+    backgroundColor: '#EEF2FF',
+    borderColor: '#C7D2FE',
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#C7D2FE',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 1,
+  },
+  optionButtonText: {
+    fontSize: 14,
+    color: '#4F46E5',
+    fontWeight: '600',
+  },
+
+  // ── Rich Card Styling (Doctor Type Selection) ─────────────────────────────
+  typeSelectionGrid: {
+    flexDirection: 'row',
+    marginTop: 10,
+    gap: 10,
+    width: '100%',
+  },
+  typeCard: {
+    flex: 1,
+    backgroundColor: '#FFF',
+    borderWidth: 1.5,
+    borderRadius: 18,
+    padding: 12,
+    alignItems: 'center',
+    elevation: 3,
+    shadowColor: '#93C5FD',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+  },
+  typeCardHospital: {
+    borderColor: '#BFDBFE',
+  },
+  typeCardIndividual: {
+    borderColor: '#A7F3D0',
+  },
+  typeIconContainer: {
+    width: 54,
+    height: 54,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  typeTitle: {
+    fontSize: 12,
+    fontWeight: '700',
+    marginBottom: 4,
+    textAlign: 'center',
+  },
+  typeSub: {
+    fontSize: 9.5,
+    color: '#64748B',
+    textAlign: 'center',
+    lineHeight: 13,
+    marginBottom: 10,
+  },
+  typeArrowCircle: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 'auto',
+  },
+
+  // ── Rich Card Styling (Hospital Selection List) ───────────────────────────
+  hospitalListContainer: {
+    marginTop: 8,
+    gap: 8,
+    width: '100%',
+  },
+  hospitalCard: {
+    flexDirection: 'row',
+    backgroundColor: '#FFF',
+    borderColor: '#E2E8F0',
+    borderWidth: 1,
+    borderRadius: 16,
+    padding: 12,
+    alignItems: 'center',
+    elevation: 2,
+    shadowColor: '#CBD5E1',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+  },
+  hospitalLogoBox: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    backgroundColor: '#EFF6FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  hospitalLogoImage: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+  },
+  hospitalLogo: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+  },
+  hospitalDetails: {
+    flex: 1,
+    marginLeft: 12,
+    marginRight: 6,
+  },
+  hospitalName: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#1E293B',
+  },
+  hospitalAddress: {
+    fontSize: 11,
+    color: '#64748B',
+    marginTop: 1,
+  },
+  hospitalRatingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 3,
+    gap: 3,
+  },
+  hospitalRatingText: {
+    fontSize: 10.5,
+    fontWeight: '600',
+    color: '#64748B',
+  },
+  chevronRight: {
+    alignSelf: 'center',
+  },
+
+  // ── Rich Card Styling (Doctor Selection List) ─────────────────────────────
+  doctorListContainer: {
+    marginTop: 8,
+    gap: 8,
+    width: '100%',
+  },
+  doctorCard: {
+    flexDirection: 'row',
+    backgroundColor: '#FFF',
+    borderColor: '#E2E8F0',
+    borderWidth: 1,
+    borderRadius: 16,
+    padding: 10,
+    alignItems: 'center',
+    elevation: 2,
+    shadowColor: '#CBD5E1',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+  },
+  doctorAvatar: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: '#F1F5F9',
+  },
+  doctorDetails: {
+    flex: 1,
+    marginLeft: 10,
+    marginRight: 4,
+  },
+  doctorName: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#1E293B',
+  },
+  doctorSpecialty: {
+    fontSize: 11,
+    color: '#3B82F6',
+    fontWeight: '600',
+    marginTop: 1,
+  },
+  doctorExp: {
+    fontSize: 10.5,
+    color: '#64748B',
+    marginTop: 1,
+  },
+  doctorRatingCol: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    marginRight: 4,
+  },
+  doctorRatingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+  },
+  doctorRatingValue: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#1E293B',
+  },
+  doctorReviewsCount: {
+    fontSize: 9.5,
+    color: '#94A3B8',
+    marginTop: 2,
+  },
+  viewAllButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 10,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 12,
+    backgroundColor: '#F8FAFC',
+    gap: 4,
+    marginTop: 2,
+  },
+  viewAllText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#4F46E5',
+  },
+
+  // ── Rich Card Styling (Doctor Profile Card) ───────────────────────────────
+  profileCard: {
+    marginTop: 10,
+    backgroundColor: '#FFF',
+    borderRadius: 20,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    elevation: 3,
+    shadowColor: '#C7D2FE',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    width: '100%',
+  },
+  profileHeader: {
+    alignItems: 'center',
+    marginBottom: 14,
+  },
+  profileAvatar: {
+    width: 68,
+    height: 68,
+    borderRadius: 34,
+    backgroundColor: '#F1F5F9',
+    marginBottom: 8,
+  },
+  profileName: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: '#1E293B',
+  },
+  profileTitleSub: {
+    fontSize: 12,
+    color: '#4F46E5',
+    fontWeight: '600',
+    marginTop: 2,
+  },
+  profileExperienceText: {
+    fontSize: 11,
+    color: '#64748B',
+    marginTop: 2,
+  },
+  badgeRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: '#F8FAFC',
+    borderRadius: 14,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    marginBottom: 14,
+  },
+  badgeItem: {
+    flex: 1,
+    alignItems: 'center',
+    gap: 1.5,
+  },
+  badgeVal: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#1E293B',
+  },
+  badgeLabel: {
+    fontSize: 9,
+    color: '#94A3B8',
+    fontWeight: '600',
+  },
+  badgeDivider: {
+    width: 1,
+    backgroundColor: '#E2E8F0',
+    marginVertical: 4,
+  },
+  aboutSection: {
+    marginBottom: 14,
+  },
+  aboutTitle: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#1E293B',
+    marginBottom: 4,
+  },
+  aboutBody: {
+    fontSize: 11,
+    color: '#64748B',
+    lineHeight: 16,
+  },
+  hospitalSection: {
+    marginBottom: 16,
+  },
+  profileHospitalCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F8FAFC',
+    borderRadius: 12,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: '#F1F5F9',
+  },
+  hospitalIconCircle: {
+    width: 32,
+    height: 32,
+    borderRadius: 10,
+    backgroundColor: '#EEF2FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  profileHospitalName: {
+    fontSize: 11.5,
+    fontWeight: '700',
+    color: '#1E293B',
+  },
+  profileHospitalAddress: {
+    fontSize: 10,
+    color: '#94A3B8',
+    marginTop: 1,
+  },
+  profileActionRow: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+  profileBtn: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  profileBtnConfirm: {
+    backgroundColor: '#4F46E5',
+  },
+  profileBtnCancel: {
+    backgroundColor: '#FEF2F2',
+    borderWidth: 1,
+    borderColor: '#FCA5A5',
+  },
+  profileBtnText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+
+  // ── Rich Card Styling (Slot Selection picker) ─────────────────────────────
+  slotPickerCard: {
+    marginTop: 10,
+    backgroundColor: '#FFF',
+    borderRadius: 20,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    elevation: 3,
+    shadowColor: '#C7D2FE',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    width: '100%',
+  },
+  miniDocRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9',
+    paddingBottom: 10,
+    marginBottom: 12,
+  },
+  miniDocAvatar: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: '#F1F5F9',
+  },
+  miniDocName: {
+    fontSize: 12.5,
+    fontWeight: '700',
+    color: '#1E293B',
+  },
+  miniDocSpecialty: {
+    fontSize: 10.5,
+    color: '#3B82F6',
+    fontWeight: '600',
+  },
+  miniDocRating: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2.5,
+  },
+  miniDocRatingVal: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#1E293B',
+  },
+  pickerHeading: {
+    fontSize: 11.5,
+    fontWeight: '700',
+    color: '#1E293B',
+    marginBottom: 8,
+  },
+  datePickerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 14,
+  },
+  dateItem: {
+    width: (SCREEN_WIDTH * 0.76 - 32 - 16) / 5,
+    paddingVertical: 8,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#FFF',
+    alignItems: 'center',
+  },
+  dateItemActive: {
+    backgroundColor: '#4F46E5',
+    borderColor: '#4F46E5',
+  },
+  dayNameText: {
+    fontSize: 9.5,
+    color: '#94A3B8',
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  dayNameTextActive: {
+    color: 'rgba(255,255,255,0.8)',
+  },
+  dayNumText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#1E293B',
+    marginTop: 2,
+  },
+  dayNumTextActive: {
+    color: '#FFF',
+  },
+  noSlotsText: {
+    fontSize: 11,
+    color: '#EF4444',
+    textAlign: 'center',
+    marginVertical: 10,
+    fontWeight: '600',
+  },
+  slotsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+  },
+  slotButton: {
+    width: (SCREEN_WIDTH * 0.76 - 32 - 12) / 3,
+    paddingVertical: 8,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  slotBtnText: {
+    fontSize: 10.5,
+    color: '#334155',
+    fontWeight: '600',
+  },
+
+  // ── Rich Card Styling (Booking Confirmation) ─────────────────────────────
+  confirmCard: {
+    marginTop: 10,
+    backgroundColor: '#FFF',
+    borderRadius: 20,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    elevation: 3,
+    shadowColor: '#C7D2FE',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    width: '100%',
+  },
+  confirmHeading: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#1E293B',
+    marginBottom: 10,
+    textAlign: 'center',
+  },
+  confirmDocRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F8FAFC',
+    padding: 8,
+    borderRadius: 12,
+    marginBottom: 12,
+  },
+  confirmDocAvatar: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: '#F1F5F9',
+  },
+  confirmDocName: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#1E293B',
+  },
+  confirmDocSpecialty: {
+    fontSize: 10,
+    color: '#64748B',
+    marginTop: 1,
+  },
+  confirmDetailsBox: {
+    backgroundColor: '#F8FAFC',
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 14,
+    gap: 8,
+  },
+  confirmDetailItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  confirmDetailText: {
+    fontSize: 11.5,
+    fontWeight: '600',
+    color: '#334155',
+  },
+  confirmActionRow: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  confirmBtn: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  confirmBtnOk: {
+    backgroundColor: '#10B981',
+  },
+  confirmBtnCancel: {
+    backgroundColor: '#FEF2F2',
+    borderWidth: 1,
+    borderColor: '#FCA5A5',
+  },
+  confirmBtnText: {
+    fontSize: 11.5,
+    fontWeight: '700',
+  },
+  bookedBanner: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    backgroundColor: '#ECFDF5',
+    borderWidth: 1,
+    borderColor: '#6EE7B7',
+    borderRadius: 10,
+    paddingVertical: 10,
+  },
+  bookedBannerText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#059669',
+  },
+  profileStatsRow: {
+    flexDirection: 'row',
+    marginTop: 12,
+    marginBottom: 16,
+    gap: 10,
+  },
+  profileStatBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 10,
+    borderRadius: 12,
+    gap: 6,
+  },
+  profileStatLabel: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  profileHeaderRight: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  profileRatingBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F59E0B',
+    alignSelf: 'flex-start',
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 6,
+    marginTop: 6,
+    gap: 3,
+  },
+  profileRatingText: {
+    fontSize: 10,
+    fontWeight: '700',
+    color: '#FFF',
+  },
+  profileReviewText: {
+    fontSize: 9,
+    color: '#FFF',
+    opacity: 0.9,
+  },
+});