> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/ja/navigation/llms.txt)

# 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.

![MapGPT screenshot showing speech to text transcription.](https://docs.mapbox.com/android/ja/assets/ideal-img/dash-sdk-mapgt-transcription.3b0e58c.480.png)

### Informational Updates

MapGPT is proactive in providing informational updates such as - missing microphone permissions, enabling certain feature like wake word etc.

![MapGPT screenshot showing informational messages.](https://docs.mapbox.com/android/ja/assets/ideal-img/dash-sdk-mapgpt-information.fabc5b2.480.png)

### 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.

```kotlin
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

```kotlin
// 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)
        },
    )
}
```