@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
248 lines (245 loc) • 6.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.onwidButtonStyles = exports.createEmbedButtonStyles = exports.EXPANDED_WIDTH = exports.BUTTON_WIDTH = exports.BUTTON_HEIGHT = void 0;
var _reactNative = require("react-native");
const {
width: SCREEN_WIDTH
} = _reactNative.Dimensions.get('window');
// Calculate dynamic dimensions based on screen size
const calculateDimensions = () => {
const isSmallScreen = SCREEN_WIDTH < 375;
const isLargeScreen = SCREEN_WIDTH > 768;
return {
BUTTON_WIDTH: isSmallScreen ? 60 : isLargeScreen ? 60 : 60,
EXPANDED_WIDTH: SCREEN_WIDTH * (isSmallScreen ? 0.9 : isLargeScreen ? 0.7 : 0.8),
BUTTON_HEIGHT: isSmallScreen ? 60 : isLargeScreen ? 60 : 60,
SPACING: {
SMALL: isSmallScreen ? 8 : isLargeScreen ? 16 : 12,
MEDIUM: isSmallScreen ? 12 : isLargeScreen ? 20 : 16,
LARGE: isSmallScreen ? 16 : isLargeScreen ? 24 : 20
},
BORDER_RADIUS: {
SMALL: isSmallScreen ? 20 : isLargeScreen ? 30 : 25,
MEDIUM: isSmallScreen ? 25 : isLargeScreen ? 35 : 30,
LARGE: isSmallScreen ? 30 : isLargeScreen ? 40 : 35
}
};
};
const dimensions = calculateDimensions();
const BUTTON_WIDTH = exports.BUTTON_WIDTH = dimensions.BUTTON_WIDTH;
const EXPANDED_WIDTH = exports.EXPANDED_WIDTH = dimensions.EXPANDED_WIDTH;
const BUTTON_HEIGHT = exports.BUTTON_HEIGHT = dimensions.BUTTON_HEIGHT;
const createEmbedButtonStyles = customStyles => {
const {
buttonWidth = BUTTON_WIDTH,
buttonHeight = BUTTON_HEIGHT,
backgroundColor = 'transparent',
borderRadius = dimensions.BORDER_RADIUS.MEDIUM,
marginBottom = dimensions.SPACING.LARGE,
spacing = dimensions.SPACING
} = customStyles || {};
return _reactNative.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: 100,
padding: 5,
margin: 0,
justifyContent: 'center',
alignItems: 'center',
height: '100%',
width: '100%'
},
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: 20
},
buttonContent: {
flexDirection: 'row',
alignItems: 'center'
// height: '100%',
},
iconImage: {
width: buttonWidth - 10,
height: buttonHeight - 10,
resizeMode: 'contain',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
margin: 0,
padding: 0
},
startCallButton: {
height: 36,
borderRadius: dimensions.BORDER_RADIUS.MEDIUM,
backgroundColor: '#000',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: spacing.SMALL + 1,
minWidth: 80,
maxWidth: '90%'
},
startCallText: {
color: 'white',
fontSize: 12,
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',
gap: 4
},
endCallButton: {
justifyContent: 'center',
alignItems: 'center',
width: 44,
height: 44
},
muteButton: {
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
width: 44,
height: 44
},
micIcon: {
width: 24,
height: 24,
tintColor: 'white'
},
endCallIcon: {
width: 24,
height: 24,
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: 14,
fontWeight: '500',
color: 'white'
},
statusText: {
fontFamily: 'Inter-Regular',
fontSize: 10,
fontWeight: '300',
color: 'white'
},
// Chip styles
chip: {
height: 30,
borderRadius: dimensions.BORDER_RADIUS.SMALL,
marginBottom: 10,
alignSelf: 'flex-end',
overflow: 'hidden',
elevation: 3,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 2
},
chipGradient: {
height: '100%',
paddingHorizontal: spacing.MEDIUM,
paddingVertical: spacing.SMALL / 2,
borderRadius: dimensions.BORDER_RADIUS.SMALL,
justifyContent: 'center',
alignItems: 'center'
},
chipText: {
color: 'white',
fontSize: 12,
fontWeight: '500'
}
});
};
// Default styles export with dynamic dimensions
exports.createEmbedButtonStyles = createEmbedButtonStyles;
const onwidButtonStyles = exports.onwidButtonStyles = createEmbedButtonStyles();
//# sourceMappingURL=EmbedButton.style.js.map