103 lines
2.4 KiB
TypeScript
103 lines
2.4 KiB
TypeScript
|
import { StyleSheet } from 'react-native';
|
||
|
|
import { Spacing, BorderRadius, Theme } from '@/constants/theme';
|
||
|
|
|
||
|
|
export const createStyles = (theme: Theme) => {
|
||
|
|
return StyleSheet.create({
|
||
|
|
header: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
paddingHorizontal: Spacing.lg,
|
||
|
|
paddingVertical: Spacing.md,
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
borderBottomColor: theme.border,
|
||
|
|
},
|
||
|
|
headerStatus: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: Spacing.xs,
|
||
|
|
},
|
||
|
|
statusDot: {
|
||
|
|
width: 8,
|
||
|
|
height: 8,
|
||
|
|
borderRadius: 4,
|
||
|
|
},
|
||
|
|
messagesContainer: {
|
||
|
|
flex: 1,
|
||
|
|
},
|
||
|
|
messagesContent: {
|
||
|
|
padding: Spacing.lg,
|
||
|
|
gap: Spacing.md,
|
||
|
|
paddingBottom: Spacing["2xl"],
|
||
|
|
},
|
||
|
|
messageWrapper: {
|
||
|
|
gap: Spacing.xs,
|
||
|
|
},
|
||
|
|
userMessage: {
|
||
|
|
alignItems: 'flex-end',
|
||
|
|
},
|
||
|
|
assistantMessage: {
|
||
|
|
alignItems: 'flex-start',
|
||
|
|
},
|
||
|
|
messageBubble: {
|
||
|
|
maxWidth: '80%',
|
||
|
|
padding: Spacing.md,
|
||
|
|
borderRadius: BorderRadius.lg,
|
||
|
|
shadowColor: theme.primary,
|
||
|
|
shadowOffset: { width: 0, height: 1 },
|
||
|
|
shadowOpacity: 0.1,
|
||
|
|
shadowRadius: 4,
|
||
|
|
elevation: 2,
|
||
|
|
},
|
||
|
|
messageText: {
|
||
|
|
lineHeight: 22,
|
||
|
|
},
|
||
|
|
messageTime: {
|
||
|
|
paddingHorizontal: Spacing.sm,
|
||
|
|
},
|
||
|
|
typingIndicator: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
gap: Spacing.xs,
|
||
|
|
paddingVertical: Spacing.xs,
|
||
|
|
},
|
||
|
|
typingDot: {
|
||
|
|
width: 8,
|
||
|
|
height: 8,
|
||
|
|
borderRadius: 4,
|
||
|
|
},
|
||
|
|
inputContainer: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'flex-end',
|
||
|
|
gap: Spacing.md,
|
||
|
|
paddingHorizontal: Spacing.lg,
|
||
|
|
paddingVertical: Spacing.md,
|
||
|
|
borderTopWidth: 1,
|
||
|
|
borderTopColor: theme.border,
|
||
|
|
},
|
||
|
|
input: {
|
||
|
|
flex: 1,
|
||
|
|
backgroundColor: theme.backgroundTertiary,
|
||
|
|
borderRadius: BorderRadius.lg,
|
||
|
|
paddingHorizontal: Spacing.lg,
|
||
|
|
paddingVertical: Spacing.md,
|
||
|
|
color: theme.textPrimary,
|
||
|
|
fontSize: 16,
|
||
|
|
maxHeight: 120,
|
||
|
|
},
|
||
|
|
sendButton: {
|
||
|
|
width: 44,
|
||
|
|
height: 44,
|
||
|
|
borderRadius: BorderRadius.lg,
|
||
|
|
backgroundColor: theme.primary,
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginBottom: 2,
|
||
|
|
shadowColor: theme.primary,
|
||
|
|
shadowOffset: { width: 0, height: 2 },
|
||
|
|
shadowOpacity: 0.2,
|
||
|
|
shadowRadius: 8,
|
||
|
|
elevation: 3,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
};
|