UI: polish Conversation screen
This commit is contained in:
parent
379be5d6c3
commit
27edf0775d
|
|
@ -11,6 +11,7 @@ import androidx.compose.animation.core.tween
|
||||||
import androidx.compose.foundation.background
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.layout.Box
|
||||||
import androidx.compose.foundation.layout.Column
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.PaddingValues
|
||||||
import androidx.compose.foundation.layout.Row
|
import androidx.compose.foundation.layout.Row
|
||||||
import androidx.compose.foundation.layout.Spacer
|
import androidx.compose.foundation.layout.Spacer
|
||||||
import androidx.compose.foundation.layout.fillMaxSize
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
|
@ -131,13 +132,18 @@ fun ConversationScreen(
|
||||||
viewModel.onBackPressed(onNavigateBack)
|
viewModel.onBackPressed(onNavigateBack)
|
||||||
}
|
}
|
||||||
|
|
||||||
Column(
|
Box(
|
||||||
modifier = Modifier
|
modifier = Modifier.fillMaxSize()
|
||||||
.fillMaxSize()
|
|
||||||
) {
|
) {
|
||||||
// System prompt display (collapsible)
|
ConversationMessageList(
|
||||||
|
messages = messages,
|
||||||
|
listState = listState,
|
||||||
|
)
|
||||||
|
|
||||||
selectedModel?.let {
|
selectedModel?.let {
|
||||||
Box(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
|
Box(
|
||||||
|
modifier = Modifier.fillMaxWidth().padding(16.dp).align(Alignment.TopCenter)
|
||||||
|
) {
|
||||||
ModelCardWithSystemPrompt(
|
ModelCardWithSystemPrompt(
|
||||||
model = it,
|
model = it,
|
||||||
loadingMetrics = loadingMetrics,
|
loadingMetrics = loadingMetrics,
|
||||||
|
|
@ -147,18 +153,6 @@ fun ConversationScreen(
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Messages list
|
|
||||||
Box(
|
|
||||||
modifier = Modifier
|
|
||||||
.weight(1f)
|
|
||||||
.fillMaxWidth()
|
|
||||||
) {
|
|
||||||
ConversationMessageList(
|
|
||||||
messages = messages,
|
|
||||||
listState = listState,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Unload confirmation dialog
|
// Unload confirmation dialog
|
||||||
|
|
@ -229,10 +223,8 @@ private fun ConversationMessageList(
|
||||||
) {
|
) {
|
||||||
LazyColumn(
|
LazyColumn(
|
||||||
state = listState,
|
state = listState,
|
||||||
modifier = Modifier
|
modifier = Modifier.fillMaxSize(),
|
||||||
.fillMaxSize()
|
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 16.dp),
|
||||||
.padding(horizontal = 16.dp),
|
|
||||||
reverseLayout = false
|
|
||||||
) {
|
) {
|
||||||
items(
|
items(
|
||||||
items = messages,
|
items = messages,
|
||||||
|
|
@ -436,66 +428,3 @@ private fun PulsatingDots(small: Boolean = false) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Composable
|
|
||||||
private fun ConversationInputField(
|
|
||||||
value: String,
|
|
||||||
onValueChange: (String) -> Unit,
|
|
||||||
onSendClick: () -> Unit,
|
|
||||||
isEnabled: Boolean
|
|
||||||
) {
|
|
||||||
Surface(
|
|
||||||
modifier = Modifier
|
|
||||||
.fillMaxWidth(),
|
|
||||||
shadowElevation = 4.dp,
|
|
||||||
color = MaterialTheme.colorScheme.surface
|
|
||||||
) {
|
|
||||||
Row(
|
|
||||||
modifier = Modifier
|
|
||||||
.fillMaxWidth()
|
|
||||||
.padding(horizontal = 16.dp, vertical = 8.dp),
|
|
||||||
verticalAlignment = Alignment.Bottom
|
|
||||||
) {
|
|
||||||
OutlinedTextField(
|
|
||||||
value = value,
|
|
||||||
onValueChange = onValueChange,
|
|
||||||
modifier = Modifier
|
|
||||||
.weight(1f)
|
|
||||||
.padding(end = 8.dp),
|
|
||||||
placeholder = { Text("Message $APP_NAME...") },
|
|
||||||
maxLines = 5,
|
|
||||||
enabled = isEnabled,
|
|
||||||
colors = TextFieldDefaults.colors(
|
|
||||||
unfocusedContainerColor = Color.Transparent,
|
|
||||||
focusedContainerColor = Color.Transparent
|
|
||||||
),
|
|
||||||
shape = RoundedCornerShape(24.dp)
|
|
||||||
)
|
|
||||||
|
|
||||||
IconButton(
|
|
||||||
onClick = onSendClick,
|
|
||||||
enabled = value.isNotBlank() && isEnabled,
|
|
||||||
modifier = Modifier
|
|
||||||
.padding(bottom = 4.dp)
|
|
||||||
.size(48.dp)
|
|
||||||
) {
|
|
||||||
if (isEnabled) {
|
|
||||||
Icon(
|
|
||||||
imageVector = Icons.Default.Send,
|
|
||||||
contentDescription = "Send message",
|
|
||||||
tint = if (value.isNotBlank())
|
|
||||||
MaterialTheme.colorScheme.primary
|
|
||||||
else
|
|
||||||
MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.5f)
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
CircularProgressIndicator(
|
|
||||||
modifier = Modifier.size(24.dp),
|
|
||||||
strokeWidth = 2.dp,
|
|
||||||
strokeCap = StrokeCap.Round
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue