@repzo/widget-react-native 1.0.0

package/src/ui/screens/chat/ChatView.styles.ts

@@ -0,0 +1,357 @@
+/** Styles for the chat thread: header bar, message list, bubbles and composer. */
+
+import { StyleSheet } from 'react-native';
+
+import { fontSize, palette, radius, spacing } from '../../styles/theme';
+import { START_ALIGN } from '../../utils/rtl';
+
+export const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.md,
+    minHeight: 72,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerIdentity: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm + 2,
+    minWidth: 0,
+  },
+  avatarWrapper: {
+    position: 'relative',
+  },
+  onlineDot: {
+    position: 'absolute',
+    end: -1,
+    bottom: -1,
+    width: 11,
+    height: 11,
+    borderRadius: 5.5,
+    backgroundColor: palette.online,
+    borderWidth: 2,
+    borderColor: palette.white,
+  },
+  headerText: {
+    flex: 1,
+    minWidth: 0,
+  },
+  headerName: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.body,
+    fontWeight: '700',
+  },
+  headerStatus: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.caption,
+    marginTop: 1,
+  },
+  messagesContentEmpty: {
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
+  emptyState: {
+    alignItems: 'center',
+    paddingHorizontal: spacing.xl,
+    paddingVertical: spacing.xxl,
+  },
+  emptyIcon: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: spacing.md,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: palette.textSubtle,
+    fontSize: fontSize.meta,
+    lineHeight: fontSize.meta * 1.4,
+  },
+  messagesContent: {
+    padding: spacing.lg,
+    paddingBottom: spacing.sm,
+    gap: spacing.sm,
+  },
+  loadMore: {
+    alignSelf: 'center',
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+  },
+  loadMoreLabel: {
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+  stateText: {
+    textAlign: 'center',
+    paddingVertical: 40,
+    paddingHorizontal: spacing.xl,
+    color: palette.textSubtle,
+    fontSize: fontSize.meta,
+  },
+  messageRow: {
+    maxWidth: '100%',
+  },
+  messageRowLeft: {
+    alignItems: 'flex-start',
+  },
+  senderLabel: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.caption,
+    fontWeight: '600',
+    color: palette.textMuted,
+    marginBottom: 3,
+    marginStart: spacing.xs,
+  },
+  messageTime: {
+    fontSize: 11,
+    alignSelf: 'flex-end',
+    marginTop: 3,
+  },
+  daySeparator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  dayLine: {
+    flex: 1,
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: palette.border,
+  },
+  dayLabel: {
+    fontSize: fontSize.caption,
+    fontWeight: '600',
+    color: palette.textSubtle,
+  },
+  messageRowRight: {
+    alignItems: 'flex-end',
+  },
+  bubble: {
+    maxWidth: '85%',
+    paddingHorizontal: spacing.md + 2,
+    paddingVertical: spacing.sm + 2,
+  },
+  bubbleVisitor: {
+    borderTopLeftRadius: radius.lg + 4,
+    borderTopRightRadius: radius.lg + 4,
+    borderBottomLeftRadius: radius.lg + 4,
+    borderBottomRightRadius: 4,
+  },
+  // `flex-end` already put this bubble on the other side; its tail follows.
+  bubbleVisitorRTL: {
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: radius.lg + 4,
+  },
+  bubbleAgent: {
+    backgroundColor: palette.surfaceAlt,
+    borderTopLeftRadius: radius.lg + 4,
+    borderTopRightRadius: radius.lg + 4,
+    borderBottomRightRadius: radius.lg + 4,
+    borderBottomLeftRadius: 4,
+  },
+  bubbleAgentRTL: {
+    borderBottomRightRadius: 4,
+    borderBottomLeftRadius: radius.lg + 4,
+  },
+  bubblePending: {
+    opacity: 0.7,
+  },
+  bubbleText: {
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * 1.45,
+  },
+  attachments: {
+    gap: spacing.xs + 2,
+  },
+  attachmentsSpaced: {
+    marginTop: spacing.sm,
+  },
+  attachmentImage: {
+    width: 180,
+    height: 140,
+    borderRadius: radius.md,
+  },
+  attachmentFile: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: radius.md,
+    paddingHorizontal: spacing.sm + 1,
+    paddingVertical: spacing.sm - 1,
+  },
+  attachmentName: {
+    fontSize: fontSize.meta,
+  },
+  failedText: {
+    fontSize: fontSize.caption,
+    marginTop: spacing.xs,
+  },
+  systemRow: {
+    alignItems: 'center',
+    paddingVertical: spacing.sm,
+  },
+  systemText: {
+    maxWidth: '86%',
+    textAlign: 'center',
+    color: palette.textMuted,
+    fontSize: fontSize.caption,
+    lineHeight: fontSize.caption * 1.4,
+  },
+  typingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingVertical: spacing.sm,
+  },
+  typingBubble: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    backgroundColor: palette.surfaceAlt,
+    borderRadius: radius.lg + 4,
+    paddingHorizontal: spacing.md + 2,
+    paddingVertical: spacing.sm,
+  },
+  typingDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: palette.textSubtle,
+  },
+  typingLabel: {
+    fontSize: fontSize.caption,
+    color: palette.textMuted,
+  },
+  offlineBanner: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    backgroundColor: palette.warningBg,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: palette.warningBorder,
+  },
+  offlineText: {
+    fontSize: fontSize.caption,
+    color: palette.warningText,
+    textAlign: 'center',
+  },
+  composerWrapper: {
+    paddingHorizontal: spacing.md,
+    paddingTop: spacing.md,
+    paddingBottom: spacing.md,
+    backgroundColor: palette.white,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: palette.border,
+  },
+  // A near-white fill behind a hairline made the field disappear into the
+  // page; this reads as an input before you tap it.
+  composer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: spacing.sm,
+    minHeight: 48,
+    backgroundColor: palette.surfaceAlt,
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: palette.border,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.xs + 2,
+    paddingVertical: spacing.xs + 2,
+  },
+  composerFocused: {
+    backgroundColor: palette.white,
+  },
+  input: {
+    textAlign: START_ALIGN,
+    flex: 1,
+    fontSize: fontSize.input,
+    lineHeight: fontSize.input * 1.4,
+    color: palette.ink,
+    maxHeight: 120,
+    paddingTop: 6,
+    paddingBottom: 6,
+    padding: 0,
+  },
+  sendButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sendButtonDisabled: {
+    backgroundColor: palette.surfaceAlt,
+  },
+  sendButtonPressed: {
+    opacity: 0.85,
+  },
+  procedureCard: {
+    width: '100%',
+    maxWidth: 320,
+    marginTop: spacing.sm,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    borderRadius: radius.xl,
+    backgroundColor: palette.white,
+    padding: spacing.sm + 2,
+  },
+  procedureToggle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.sm,
+    borderRadius: radius.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.md,
+    minHeight: 44,
+  },
+  procedureToggleLabel: {
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+  procedureToggleHint: {
+    fontSize: fontSize.caption,
+    opacity: 0.85,
+  },
+  procedureTitle: {
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    color: palette.text,
+    marginTop: spacing.sm + 2,
+    marginBottom: spacing.sm,
+  },
+  procedureFields: {
+    gap: spacing.sm,
+  },
+  procedureLabel: {
+    fontSize: fontSize.caption,
+    color: palette.textMuted,
+    marginBottom: spacing.xs,
+  },
+  procedureInput: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.disabled,
+    borderRadius: radius.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm + 2,
+    fontSize: fontSize.input,
+    color: palette.text,
+    minHeight: 44,
+  },
+  procedureSubmit: {
+    marginTop: spacing.sm + 2,
+    borderRadius: radius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: spacing.md,
+    minHeight: 44,
+  },
+  procedureSubmitLabel: {
+    color: palette.white,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+});