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 disable the bubble from the map view create your own custom views.
private var mapGptUI: MapGptDetachableUI? = null
private var chatBubbleUI: MapGptDetachableUI? = null
override fun onCreate(savedInstanceState: Bundle?) {
// Disable the default chat bubble shown on the map
mapGptUI = Dash.controller.createMapGptUI {
showChatBubble = false
}
// MapGptCompose provides access to the default chat bubble so it can
// be repositioned or replaced with a custom chat bubble
chatBubbleUI = Dash.mapGptCompose.attachContent(binding.composeView) {
if (useCustomChatBubble) {
// Create your own chat bubble
MyChatBubble()
} else {
// Use the default chat bubble
Dash.mapGptCompose.ChatBubbleView()
}
}
}
override fun onDestroy() {
mapGptUI?.detach()
mapGptUI = null
chatBubbleUI?.detach()
chatBubbleUI = null
}
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,
) {
// Access the ChatBubbleState from any place in the application
val state = Dash.mapGptCompose.chatBubbleState.collectAsState()
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)
},
)
}