Voice and Information Interface
MapGPT's conversational bubble UI highlights voice interaction and informational updates, creating a seamless, integrated platform.
Speech-To-Text (STT)
MapGPT's speech-to-text(STT) converts spoken words into written text. The enabling of STT has significant applications including - enhancing user experience, safety and accessibility.
Informational Updates
MapGPT is proactive in providing informational updates such as - missing microphone permissions, enabling certain feature like wake word etc.
Detaching bubble from MapView
When using the UX Framework, the bubble is attached to the map view at a certain position depending on the applications form factor. With the UX Framework you can detach the bubble from map view to position it more widely on the screen and use it independently of the application.
private var detachableUI: MapGptDetachableUI? = null
override fun onCreate(savedInstanceState: Bundle?) {
detachableUI = Dash.controller.createMapGptUI {
lifecycleOwner = viewLifecycleOwner
chatBubbleContainer = binding.frameMapGptChatBubble // Container in your app to position the bubble
}
detachableUI?.attach()
}
override fun onDestroy() {
detachableUI?.detach()
}
Customizing the bubble
When using the UX Framework, you can customize the look and feel of the chat bubble.
Create your own chat bubble composable
// R.string.showcase_custom_mapgpt_chat_bubble_idle_state = "Speak when you're ready"
// R.dimen.default_margin = 12dp
// R.dimen.mapgpt_bubble_height = 60dp
@Composable
fun MyChatBubble(
modifier: Modifier = Modifier,
state: ChatBubbleState = ChatBubbleState.Idle,
) {
val isDarkTheme = isSystemInDarkTheme()
val customPrimaryTextColor = if (isDarkTheme) Color(0xFFD0D4DA) else Color(0xFF1A1D21)
val customBackground = if (isDarkTheme) Color(0xAA121418) else Color(0xAAF7F8FA)
val text = when (state) {
is ChatBubbleState.StringBubble -> state.text
is ChatBubbleState.ResourceBubble -> stringResource(id = state.stringId)
else -> stringResource(id = R.string.showcase_custom_mapgpt_chat_bubble_idle_state)
}
val defaultMargin = dimensionResource(id = R.dimen.default_margin)
Title7(
text = text,
modifier = modifier
.fillMaxWidth()
.wrapContentWidth()
.padding(horizontal = defaultMargin, vertical = defaultMargin / 2)
.height(dimensionResource(id = R.dimen.mapgpt_bubble_height))
.background(customBackground)
.animateContentSize()
.padding(horizontal = defaultMargin)
.wrapContentHeight(),
color = when (state.source) {
ChatBubbleState.Source.USER -> customPrimaryTextColor
ChatBubbleState.Source.AI -> Color(0xFF3072F5)
ChatBubbleState.Source.ERROR -> Color(0xFFEB252A)
ChatBubbleState.Source.WARNING -> Color(0xFF3072F5)
else -> Color(0xFF05070A)
},
)
}
Inside your application onCreate
Dash.init(
context = this,
accessToken = getString(R.string.mapbox_access_token),
) {
mapGpt {
chatBubbleView = @Composable { modifier: Modifier, state: ChatBubbleState ->
MyChatBubble(modifier, state)
}
}
}