@revrag-ai/embed-react-native
Version:
A powerful React Native library for integrating AI-powered voice agents into mobile applications. Features real-time voice communication, intelligent speech processing, customizable UI components, and comprehensive event handling for building conversation
426 lines (412 loc) • 10.8 kB
JavaScript
"use strict";
import { StyleSheet, Dimensions } from 'react-native';
const {
width: SCREEN_WIDTH
} = Dimensions.get('window');
// Enhanced responsive breakpoints
const getScreenCategory = () => {
if (SCREEN_WIDTH < 320) return 'extraSmall';
if (SCREEN_WIDTH < 375) return 'small';
if (SCREEN_WIDTH < 414) return 'medium';
if (SCREEN_WIDTH < 768) return 'large';
if (SCREEN_WIDTH < 1024) return 'tablet';
return 'desktop';
};
// Responsive scaling functions
const scaleSize = (size, factor = 1) => {
const baseWidth = 375; // iPhone X base width
const scale = SCREEN_WIDTH / baseWidth;
return Math.round(size * scale * factor);
};
const scaleFontSize = size => {
const scale = SCREEN_WIDTH / 375;
const scaledSize = size * scale;
// Ensure font sizes don't get too small or too large
return Math.max(10, Math.min(scaledSize, size * 1.3));
};
// Calculate dynamic dimensions based on screen size
const calculateDimensions = () => {
const screenCategory = getScreenCategory();
const screenScale = SCREEN_WIDTH / 375;
// Base dimensions that scale with screen size
const baseButtonSize = 60;
const buttonSize = scaleSize(baseButtonSize, 0.9);
// Responsive spacing system
const baseSpacing = {
xs: 4,
sm: 8,
md: 12,
lg: 16,
xl: 20,
xxl: 24
};
const spacing = Object.entries(baseSpacing).reduce((acc, [key, value]) => {
acc[key] = scaleSize(value);
return acc;
}, {});
// Responsive border radius
const baseBorderRadius = {
xs: 4,
sm: 8,
md: 12,
lg: 16,
xl: 20,
xxl: 24,
round: 100
};
const borderRadius = Object.entries(baseBorderRadius).reduce((acc, [key, value]) => {
acc[key] = key === 'round' ? 100 : scaleSize(value);
return acc;
}, {});
// Responsive font sizes
const baseFontSizes = {
xs: 10,
sm: 12,
md: 14,
lg: 16,
xl: 18,
xxl: 20
};
const fontSizes = Object.entries(baseFontSizes).reduce((acc, [key, value]) => {
acc[key] = scaleFontSize(value);
return acc;
}, {});
// Icon sizes
const baseIconSizes = {
xs: 16,
sm: 20,
md: 24,
lg: 28,
xl: 32
};
const iconSizes = Object.entries(baseIconSizes).reduce((acc, [key, value]) => {
acc[key] = scaleSize(value);
return acc;
}, {});
return {
BUTTON_WIDTH: buttonSize,
BUTTON_HEIGHT: buttonSize,
EXPANDED_WIDTH: SCREEN_WIDTH * (screenCategory === 'extraSmall' ? 0.95 : screenCategory === 'small' ? 0.9 : screenCategory === 'tablet' ? 0.7 : 0.8),
SPACING: {
SMALL: spacing.sm,
MEDIUM: spacing.md,
LARGE: spacing.lg,
EXTRA_SMALL: spacing.xs,
EXTRA_LARGE: spacing.xl,
EXTRA_EXTRA_LARGE: spacing.xxl
},
BORDER_RADIUS: {
SMALL: borderRadius.sm,
MEDIUM: borderRadius.md,
LARGE: borderRadius.lg,
EXTRA_SMALL: borderRadius.xs,
EXTRA_LARGE: borderRadius.xl,
ROUND: borderRadius.round
},
FONT_SIZES: fontSizes,
ICON_SIZES: iconSizes,
SCREEN_CATEGORY: screenCategory,
SCALE_FACTOR: screenScale
};
};
const dimensions = calculateDimensions();
export const BUTTON_WIDTH = dimensions.BUTTON_WIDTH;
export const EXPANDED_WIDTH = dimensions.EXPANDED_WIDTH;
export const BUTTON_HEIGHT = dimensions.BUTTON_HEIGHT;
export const createEmbedButtonStyles = customStyles => {
const {
buttonWidth = BUTTON_WIDTH,
buttonHeight = BUTTON_HEIGHT,
backgroundColor = 'transparent',
borderRadius = dimensions.BORDER_RADIUS.MEDIUM,
marginBottom = dimensions.SPACING.LARGE,
spacing = dimensions.SPACING,
fontSizes = dimensions.FONT_SIZES,
iconSizes = dimensions.ICON_SIZES
} = customStyles || {};
// Dynamic button sizes for different elements
const actionButtonSize = scaleSize(44);
const chipHeight = scaleSize(30);
const startCallButtonHeight = scaleSize(36);
const startCallButtonMinWidth = scaleSize(80);
// Dynamic gaps and paddings
// const buttonContainerGap = scaleSize(4);
const pressablePadding = scaleSize(5);
const chipMarginBottom = scaleSize(10);
const popupPadding = {
vertical: scaleSize(2),
horizontal: scaleSize(10)
};
// Dynamic shadow values
const shadowOffset = {
width: 0,
height: scaleSize(2)
};
const shadowRadius = scaleSize(2);
return StyleSheet.create({
container: {
position: 'absolute',
bottom: 0,
right: 0,
height: '100%',
width: '100%',
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-end',
padding: spacing.MEDIUM,
backgroundColor: 'transparent',
pointerEvents: 'box-none'
},
button: {
width: buttonWidth,
height: buttonHeight,
borderRadius: borderRadius,
marginBottom: marginBottom,
backgroundColor: backgroundColor
},
pressable: {
borderRadius: dimensions.BORDER_RADIUS.ROUND,
padding: pressablePadding,
margin: 0,
justifyContent: 'center',
alignItems: 'center'
},
menu: {
position: 'absolute',
top: 0,
backgroundColor: 'white',
borderRadius: dimensions.BORDER_RADIUS.SMALL,
padding: spacing.MEDIUM
},
menuLeft: {
right: '100%',
marginRight: spacing.SMALL
},
menuRight: {
left: '100%',
marginLeft: spacing.SMALL
},
iconText: {
color: 'white',
fontSize: fontSizes.lg
},
buttonContent: {
flexDirection: 'row',
alignItems: 'center'
},
iconImage: {
width: buttonWidth - scaleSize(10),
height: buttonHeight - scaleSize(10),
resizeMode: 'contain',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
margin: 0,
padding: 0
},
startCallButton: {
height: startCallButtonHeight,
borderRadius: dimensions.BORDER_RADIUS.EXTRA_LARGE,
backgroundColor: '#000',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: (spacing.SMALL || 10) + scaleSize(1),
minWidth: startCallButtonMinWidth,
maxWidth: '100%'
},
startCallText: {
color: 'white',
fontSize: fontSizes.sm,
fontWeight: '500'
},
rowContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
margin: 0,
padding: 0
},
linearGradient: {
flex: 1,
borderRadius: dimensions.BORDER_RADIUS.LARGE,
flexDirection: 'row',
width: BUTTON_WIDTH
},
buttonContainer: {
flexDirection: 'row',
alignItems: 'center'
},
endCallButton: {
justifyContent: 'center',
alignItems: 'center',
width: actionButtonSize,
height: actionButtonSize
},
muteButton: {
borderRadius: dimensions.BORDER_RADIUS.ROUND,
justifyContent: 'center',
alignItems: 'center',
width: actionButtonSize,
height: actionButtonSize
},
micIcon: {
width: iconSizes.md,
height: iconSizes.md,
tintColor: 'white'
},
endCallIcon: {
width: iconSizes.md,
height: iconSizes.md,
tintColor: 'white'
},
buttonImage: {
width: '100%',
height: '100%',
resizeMode: 'contain'
},
// New styles for expanded button layout
expandedContent: {
flexDirection: 'row',
flex: 1,
alignItems: 'center',
width: '100%',
justifyContent: 'space-between'
},
leftSection: {
alignItems: 'flex-start'
},
centerSection: {
alignItems: 'center',
height: '100%'
},
rightSection: {
justifyContent: 'flex-end',
alignItems: 'center'
},
agentInfoContainer: {
height: BUTTON_HEIGHT,
flexDirection: 'row',
alignItems: 'center',
overflow: 'hidden'
},
agentTextContainer: {
justifyContent: 'center',
height: '100%',
flex: 1
},
agentNameText: {
fontFamily: 'Inter-Medium',
fontSize: fontSizes.lg,
fontWeight: '500',
color: 'white'
},
statusText: {
fontFamily: 'Inter-Regular',
fontSize: 9,
fontWeight: '300',
color: 'white'
},
// Chip styles
chip: {
height: chipHeight,
borderRadius: dimensions.BORDER_RADIUS.SMALL,
marginBottom: chipMarginBottom,
alignSelf: 'flex-end',
overflow: 'hidden',
elevation: 3,
shadowColor: '#000',
shadowOffset: shadowOffset,
shadowOpacity: 0.3,
shadowRadius: shadowRadius
},
chipGradient: {
height: '100%',
paddingHorizontal: spacing.MEDIUM,
paddingVertical: (spacing.SMALL || 10) / 2,
borderRadius: dimensions.BORDER_RADIUS.SMALL
},
chipText: {
color: 'white',
fontSize: fontSizes.sm,
fontWeight: '500'
},
// Additional styles extracted from inline styles
popupText: {
color: 'white',
fontSize: fontSizes.xs,
fontWeight: '500'
},
popupContainer: {
position: 'absolute',
borderRadius: dimensions.BORDER_RADIUS.EXTRA_SMALL,
paddingVertical: popupPadding.vertical,
paddingHorizontal: popupPadding.horizontal,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
bottom: BUTTON_HEIGHT + scaleSize(50),
right: scaleSize(10)
},
expandedLinearGradient: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 0,
paddingLeft: 0,
paddingRight: spacing.EXTRA_SMALL
},
collapsedLinearGradient: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 0,
paddingLeft: 0,
paddingRight: 0
},
iconContainer: {
flexShrink: 0,
width: BUTTON_WIDTH,
padding: 0,
margin: 0
},
expandedContentContainer: {
flex: 1,
flexDirection: 'row',
height: BUTTON_HEIGHT - scaleSize(10),
marginLeft: 0,
marginRight: 0
},
leftContentSection: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-start',
paddingLeft: 0,
paddingRight: spacing.EXTRA_SMALL || 0
},
middleContentSection: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: spacing.EXTRA_SMALL
},
rightContentSection: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
paddingLeft: spacing.EXTRA_SMALL
},
leftAlignedText: {
flexShrink: 1,
textAlign: 'left'
}
});
};
// Default styles export with dynamic dimensions
export const onwidButtonStyles = createEmbedButtonStyles();
// Export additional responsive utilities
export const responsiveUtils = {
scaleSize,
scaleFontSize,
getScreenCategory,
dimensions
};
//# sourceMappingURL=EmbedButton.style.js.map