Skip to content

feat(vertexai): enable edge-to-edge #2661

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 6, 2025
Merged

feat(vertexai): enable edge-to-edge #2661

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ca892a4
feat: enable edge-to-edge
thatfiredev Mar 5, 2025
4928afc
refactor: fix padding in ChatScreen
thatfiredev Mar 5, 2025
640c272
refactor: reuse chat ui for function calling
thatfiredev Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
refactor: reuse chat ui for function calling
  • Loading branch information
@thatfiredev
thatfiredev committed Mar 6, 2025
commit 640c2723599b4f0491951c76ad9a67daa2e8c815
30 changes: 0 additions & 30 deletions ...n/com/google/firebase/quickstart/vertexai/feature/functioncalling/FunctionsChatMessage.kt
View file
Open in desktop

This file was deleted.

184 changes: 17 additions & 167 deletions ...in/com/google/firebase/quickstart/vertexai/feature/functioncalling/FunctionsChatScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,46 +16,20 @@

package com.google.firebase.quickstart.vertexai.feature.functioncalling

import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Send
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.google.firebase.quickstart.vertexai.GenerativeViewModelFactory
import com.google.firebase.quickstart.vertexai.R
import com.google.firebase.quickstart.vertexai.feature.chat.ChatList
import com.google.firebase.quickstart.vertexai.feature.chat.MessageInput
import kotlinx.coroutines.launch

@Composable
Expand All @@ -66,9 +40,20 @@ internal fun FunctionsChatRoute(
val listState = rememberLazyListState()
val coroutineScope = rememberCoroutineScope()

Scaffold(
bottomBar = {
FunctionMessageInput(
Column(
modifier = Modifier
.fillMaxSize()
) {
ChatList(
chatUiState.messages,
listState,
modifier = Modifier.fillMaxSize()
.weight(0.5f)
)
Box(
contentAlignment = Alignment.BottomCenter
) {
MessageInput(
onSendMessage = { inputText ->
chatViewModel.sendMessage(inputText)
},
Expand All @@ -79,141 +64,6 @@ internal fun FunctionsChatRoute(
}
)
}
) { paddingValues ->
Column(
modifier = Modifier
.padding(paddingValues)
.fillMaxSize()
) {
// Messages List
FunctionChatList(chatUiState.messages, listState)
}
}
}

@Composable
fun FunctionChatList(
chatMessages: List<FunctionsChatMessage>,
listState: LazyListState
) {
LazyColumn(
reverseLayout = true,
state = listState
) {
items(chatMessages.reversed()) { message ->
FunctionChatBubbleItem(message)
}
}
}

@Composable
fun FunctionChatBubbleItem(
chatMessage: FunctionsChatMessage
) {
val isModelMessage = chatMessage.participant == Participant.MODEL ||
chatMessage.participant == Participant.ERROR

val backgroundColor = when (chatMessage.participant) {
Participant.MODEL -> MaterialTheme.colorScheme.primaryContainer
Participant.USER -> MaterialTheme.colorScheme.tertiaryContainer
Participant.ERROR -> MaterialTheme.colorScheme.errorContainer
}

val bubbleShape = if (isModelMessage) {
RoundedCornerShape(4.dp, 20.dp, 20.dp, 20.dp)
} else {
RoundedCornerShape(20.dp, 4.dp, 20.dp, 20.dp)
}

val horizontalAlignment = if (isModelMessage) {
Alignment.Start
} else {
Alignment.End
}

Column(
horizontalAlignment = horizontalAlignment,
modifier = Modifier
.padding(horizontal = 8.dp, vertical = 4.dp)
.fillMaxWidth()
) {
Text(
text = chatMessage.participant.name,
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.padding(bottom = 4.dp)
)
Row {
if (chatMessage.isPending) {
CircularProgressIndicator(
modifier = Modifier
.align(Alignment.CenterVertically)
.padding(all = 8.dp)
)
}
BoxWithConstraints {
Card(
colors = CardDefaults.cardColors(containerColor = backgroundColor),
shape = bubbleShape,
modifier = Modifier.widthIn(0.dp, maxWidth * 0.9f)
) {
Text(
text = chatMessage.text,
modifier = Modifier.padding(16.dp)
)
}
}
}
}
}

@Composable
fun FunctionMessageInput(
onSendMessage: (String) -> Unit,
resetScroll: () -> Unit = {}
) {
var userMessage by rememberSaveable { mutableStateOf("") }

ElevatedCard(
modifier = Modifier
.fillMaxWidth()
) {
Row(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
) {
OutlinedTextField(
value = userMessage,
label = { Text(stringResource(R.string.chat_label)) },
onValueChange = { userMessage = it },
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Sentences
),
modifier = Modifier
.align(Alignment.CenterVertically)
.fillMaxWidth()
.weight(0.85f)
)
IconButton(
onClick = {
if (userMessage.isNotBlank()) {
onSendMessage(userMessage)
userMessage = ""
resetScroll()
}
},
modifier = Modifier
.padding(start = 16.dp)
.align(Alignment.CenterVertically)
.fillMaxWidth()
.weight(0.15f)
) {
Icon(
Icons.Default.Send,
contentDescription = stringResource(R.string.action_send),
modifier = Modifier
)
}
}
}
}
39 changes: 0 additions & 39 deletions ...n/com/google/firebase/quickstart/vertexai/feature/functioncalling/FunctionsChatUiState.kt
View file
Open in desktop

This file was deleted.

19 changes: 10 additions & 9 deletions ...com/google/firebase/quickstart/vertexai/feature/functioncalling/FunctionsChatViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@ package com.google.firebase.quickstart.vertexai.feature.functioncalling

import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.google.firebase.quickstart.vertexai.feature.chat.ChatMessage
import com.google.firebase.quickstart.vertexai.feature.chat.ChatUiState
import com.google.firebase.quickstart.vertexai.feature.chat.Participant
import com.google.firebase.vertexai.GenerativeModel
import com.google.firebase.vertexai.type.FunctionResponsePart
import com.google.firebase.vertexai.type.InvalidStateException
import com.google.firebase.vertexai.type.asTextOrNull
import com.google.firebase.vertexai.type.content
import kotlinx.coroutines.flow.MutableStateFlow
Expand All @@ -29,7 +31,6 @@ import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.launch
import kotlinx.serialization.json.JsonPrimitive
import kotlinx.serialization.json.buildJsonObject
import java.lang.IllegalArgumentException

class FunctionsChatViewModel(
private val generativeModel: GenerativeModel
Expand All @@ -45,26 +46,26 @@ class FunctionsChatViewModel(
)
)

private val _uiState: MutableStateFlow<FunctionsChatUiState> =
private val _uiState: MutableStateFlow<ChatUiState> =
MutableStateFlow(
FunctionsChatUiState(
ChatUiState(
chat.history.map { content ->
// Map the initial messages
FunctionsChatMessage(
ChatMessage(
text = content.parts.first().asTextOrNull() ?: "",
participant = if (content.role == "user") Participant.USER else Participant.MODEL,
isPending = false
)
}
)
)
val uiState: StateFlow<FunctionsChatUiState> =
val uiState: StateFlow<ChatUiState> =
_uiState.asStateFlow()

fun sendMessage(userMessage: String) {
// Add a pending message
_uiState.value.addMessage(
FunctionsChatMessage(
ChatMessage(
text = userMessage,
participant = Participant.USER,
isPending = true
Expand Down Expand Up @@ -105,7 +106,7 @@ class FunctionsChatViewModel(

response.text?.let { modelResponse ->
_uiState.value.addMessage(
FunctionsChatMessage(
ChatMessage(
text = modelResponse,
participant = Participant.MODEL,
isPending = false
Expand All @@ -115,7 +116,7 @@ class FunctionsChatViewModel(
} catch (e: Exception) {
_uiState.value.replaceLastPendingMessage()
_uiState.value.addMessage(
FunctionsChatMessage(
ChatMessage(
text = e.localizedMessage,
participant = Participant.ERROR
)
Expand Down