Skip to content
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

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

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 all commits
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
64 changes: 39 additions & 25 deletions vertexai/app/src/main/kotlin/com/google/firebase/quickstart/vertexai/MainActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,12 @@ package com.google.firebase.quickstart.vertexai
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import androidx.navigation.compose.NavHost
Expand All @@ -38,39 +42,49 @@ class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

enableEdgeToEdge()
setContent {
GenerativeAISample {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
val navController = rememberNavController()
Scaffold(
modifier = Modifier
.fillMaxSize()
.navigationBarsPadding(),
) { innerPadding ->
val navController = rememberNavController()

NavHost(navController = navController, startDestination = "menu") {
composable("menu") {
MenuScreen(onItemClicked = { routeId ->
navController.navigate(routeId)
})
}
composable("summarize") {
SummarizeRoute()
}
composable("photo_reasoning") {
PhotoReasoningRoute()
}
composable("chat") {
ChatRoute()
}
composable("functions_chat") {
FunctionsChatRoute()
}
composable("audio") {
AudioRoute()
}
composable("images") {
ImagenRoute()
NavHost(
modifier = Modifier.padding(innerPadding),
navController = navController,
startDestination = "menu"
) {
composable("menu") {
MenuScreen(onItemClicked = { routeId ->
navController.navigate(routeId)
})
}
composable("summarize") {
SummarizeRoute()
}
composable("photo_reasoning") {
PhotoReasoningRoute()
}
composable("chat") {
ChatRoute()
}
composable("functions_chat") {
FunctionsChatRoute()
}
composable("audio") {
AudioRoute()
}
composable("images") {
ImagenRoute()
}
}
}
}
Expand Down
32 changes: 19 additions & 13 deletions ...ai/app/src/main/kotlin/com/google/firebase/quickstart/vertexai/feature/chat/ChatScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@

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

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
Expand Down Expand Up @@ -66,8 +68,19 @@ internal fun ChatRoute(
val listState = rememberLazyListState()
val coroutineScope = rememberCoroutineScope()

Scaffold(
bottomBar = {
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,26 +92,19 @@ internal fun ChatRoute(
}
)
}
) { paddingValues ->
Column(
modifier = Modifier
.padding(paddingValues)
.fillMaxSize()
) {
// Messages List
ChatList(chatUiState.messages, listState)
}
}
}

@Composable
fun ChatList(
chatMessages: List<ChatMessage>,
listState: LazyListState
listState: LazyListState,
modifier: Modifier = Modifier
) {
LazyColumn(
reverseLayout = true,
state = listState
state = listState,
modifier = modifier
) {
items(chatMessages.reversed()) { message ->
ChatBubbleItem(message)
Expand Down
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
)
}
}
}
}
Loading