@@ -1,57 +1,38 @@
1package soy.iko.opencode.ui.screens
1package soy.iko.opencode.ui.screens
3−import android.content.ClipData
4−import android.content.ClipboardManager
5−import android.content.Context
6−import android.widget.Toast
7import androidx.compose.animation.AnimatedVisibility
3import androidx.compose.animation.AnimatedVisibility
8−import androidx.compose.animation.core.RepeatMode
9−import androidx.compose.animation.core.animateFloat
10−import androidx.compose.animation.core.infiniteRepeatable
11−import androidx.compose.animation.core.rememberInfiniteTransition
12−import androidx.compose.animation.core.tween
13import androidx.compose.animation.fadeIn
4import androidx.compose.animation.fadeIn
14import androidx.compose.animation.fadeOut
5import androidx.compose.animation.fadeOut
15import androidx.compose.animation.scaleIn
6import androidx.compose.animation.scaleIn
16import androidx.compose.animation.scaleOut
7import androidx.compose.animation.scaleOut
17−import androidx.compose.foundation.ExperimentalFoundationApi
18import androidx.compose.foundation.background
8import androidx.compose.foundation.background
19import androidx.compose.foundation.clickable
9import androidx.compose.foundation.clickable
20−import androidx.compose.foundation.combinedClickable
21import androidx.compose.foundation.layout.Arrangement
10import androidx.compose.foundation.layout.Arrangement
22import androidx.compose.foundation.layout.Box
11import androidx.compose.foundation.layout.Box
23import androidx.compose.foundation.layout.BoxScope
12import androidx.compose.foundation.layout.BoxScope
24import androidx.compose.foundation.layout.Column
13import androidx.compose.foundation.layout.Column
25import androidx.compose.foundation.layout.Row
14import androidx.compose.foundation.layout.Row
26−import androidx.compose.foundation.layout.Spacer
27import androidx.compose.foundation.layout.fillMaxSize
15import androidx.compose.foundation.layout.fillMaxSize
28import androidx.compose.foundation.layout.fillMaxWidth
16import androidx.compose.foundation.layout.fillMaxWidth
29−import androidx.compose.foundation.layout.heightIn
30import androidx.compose.foundation.layout.PaddingValues
17import androidx.compose.foundation.layout.PaddingValues
31−import androidx.compose.foundation.layout.WindowInsets
32−import androidx.compose.foundation.layout.ime
33import androidx.compose.foundation.layout.imePadding
18import androidx.compose.foundation.layout.imePadding
34import androidx.compose.foundation.layout.padding
19import androidx.compose.foundation.layout.padding
35import androidx.compose.foundation.layout.size
20import androidx.compose.foundation.layout.size
36import androidx.compose.foundation.lazy.LazyColumn
21import androidx.compose.foundation.lazy.LazyColumn
37−import androidx.compose.foundation.lazy.itemsIndexed
22+import androidx.compose.foundation.lazy.items
38import androidx.compose.foundation.lazy.rememberLazyListState
23import androidx.compose.foundation.lazy.rememberLazyListState
39import androidx.compose.foundation.shape.CircleShape
24import androidx.compose.foundation.shape.CircleShape
40−import androidx.compose.foundation.shape.RoundedCornerShape
41import androidx.compose.foundation.text.KeyboardActions
25import androidx.compose.foundation.text.KeyboardActions
42import androidx.compose.foundation.text.KeyboardOptions
26import androidx.compose.foundation.text.KeyboardOptions
43import androidx.compose.material.icons.Icons
27import androidx.compose.material.icons.Icons
44import androidx.compose.material.icons.automirrored.filled.ArrowBack
28import androidx.compose.material.icons.automirrored.filled.ArrowBack
45import androidx.compose.material.icons.automirrored.filled.Send
29import androidx.compose.material.icons.automirrored.filled.Send
46−import androidx.compose.material.icons.filled.ChatBubbleOutline
47import androidx.compose.material.icons.filled.Close
30import androidx.compose.material.icons.filled.Close
48import androidx.compose.material.icons.filled.KeyboardArrowDown
31import androidx.compose.material.icons.filled.KeyboardArrowDown
49−import androidx.compose.material.icons.filled.KeyboardArrowUp
50import androidx.compose.material.icons.filled.Stop
32import androidx.compose.material.icons.filled.Stop
51import androidx.compose.material3.CircularProgressIndicator
33import androidx.compose.material3.CircularProgressIndicator
52import androidx.compose.material3.ExperimentalMaterial3Api
34import androidx.compose.material3.ExperimentalMaterial3Api
53import androidx.compose.material3.FilledIconButton
35import androidx.compose.material3.FilledIconButton
54−import androidx.compose.material3.FilledTonalButton
55import androidx.compose.material3.FloatingActionButton
36import androidx.compose.material3.FloatingActionButton
56import androidx.compose.material3.Icon
37import androidx.compose.material3.Icon
57import androidx.compose.material3.IconButton
38import androidx.compose.material3.IconButton
@@ -61,7 +42,6 @@ import androidx.compose.material3.OutlinedTextField
61import androidx.compose.material3.Scaffold
42import androidx.compose.material3.Scaffold
62import androidx.compose.material3.Surface
43import androidx.compose.material3.Surface
63import androidx.compose.material3.Text
44import androidx.compose.material3.Text
64−import androidx.compose.material3.TextButton
65import androidx.compose.material3.TopAppBar
45import androidx.compose.material3.TopAppBar
66import androidx.compose.runtime.Composable
46import androidx.compose.runtime.Composable
67import androidx.compose.runtime.LaunchedEffect
47import androidx.compose.runtime.LaunchedEffect
@@ -75,13 +55,8 @@ import androidx.compose.ui.Alignment
75import androidx.compose.ui.Modifier
55import androidx.compose.ui.Modifier
76import androidx.compose.ui.draw.clip
56import androidx.compose.ui.draw.clip
77import androidx.compose.ui.hapticfeedback.HapticFeedbackType
57import androidx.compose.ui.hapticfeedback.HapticFeedbackType
78−import androidx.compose.ui.platform.LocalClipboardManager
79−import androidx.compose.ui.platform.LocalContext
80−import androidx.compose.ui.platform.LocalDensity
81import androidx.compose.ui.platform.LocalHapticFeedback
58import androidx.compose.ui.platform.LocalHapticFeedback
82−import androidx.compose.ui.text.font.FontStyle
83import androidx.compose.ui.text.input.ImeAction
59import androidx.compose.ui.text.input.ImeAction
84−import androidx.compose.ui.text.style.TextAlign
85import androidx.compose.ui.text.style.TextOverflow
60import androidx.compose.ui.text.style.TextOverflow
86import androidx.compose.ui.unit.dp
61import androidx.compose.ui.unit.dp
87import kotlinx.coroutines.launch
62import kotlinx.coroutines.launch
@@ -89,17 +64,11 @@ import soy.iko.opencode.core.Event
89import soy.iko.opencode.core.UiState
64import soy.iko.opencode.core.UiState
90import soy.iko.opencode.ui.components.MessageBubble
65import soy.iko.opencode.ui.components.MessageBubble
92−@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
67+@OptIn(ExperimentalMaterial3Api::class)
93@Composable
68@Composable
94fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
69fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
95 val listState = rememberLazyListState()
70 val listState = rememberLazyListState()
96 val coroutineScope = rememberCoroutineScope()
71 val coroutineScope = rememberCoroutineScope()
97− val context = LocalContext.current
99− // Hide the jump-to-bottom FAB while the keyboard is up: it would otherwise
100− // sit over the top of the IME. Reading the ime inset bottom during composition
101− // observes snapshot state, so this flips as the keyboard opens/closes.
102− val isImeVisible = WindowInsets.ime.getBottom(LocalDensity.current) > 0
104 // Show a jump-to-bottom button once the user scrolls up away from the latest
73 // Show a jump-to-bottom button once the user scrolls up away from the latest
105 // message. derivedStateOf keeps this from recomposing on every pixel of scroll —
74 // message. derivedStateOf keeps this from recomposing on every pixel of scroll —
@@ -113,12 +82,6 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
116− // Offer a jump-to-top shortcut once the conversation is long and the user has
117− // scrolled a few messages down — saves flick-scrolling back through history.
118− val showScrollTop by remember {
119− derivedStateOf { state.messages.size > 10 && listState.firstVisibleItemIndex > 3 }
122 // Track how many messages the user has "seen" (i.e. was at the bottom for). While
85 // Track how many messages the user has "seen" (i.e. was at the bottom for). While
123 // they're scrolled up, any messages beyond that count are unseen — flag the FAB.
86 // they're scrolled up, any messages beyond that count are unseen — flag the FAB.
124 var lastSeenCount by remember { mutableStateOf(0) }
87 var lastSeenCount by remember { mutableStateOf(0) }
@@ -148,20 +111,11 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
148 topBar = {
111 topBar = {
149 TopAppBar(
112 TopAppBar(
150 title = {
113 title = {
151− val title = state.currentSessionTitle.ifEmpty { "Chat" }
153− text = if (state.messages.isNotEmpty()) "$title (${state.messages.size})" else title,
115+ text = state.currentSessionTitle.ifEmpty { "Chat" },
154 maxLines = 1,
116 maxLines = 1,
155 overflow = TextOverflow.Ellipsis,
117 overflow = TextOverflow.Ellipsis,
156− modifier = Modifier.combinedClickable(
157− onClick = { dispatch(Event.NavigateToSessions) },
118+ modifier = Modifier.clickable { dispatch(Event.NavigateToSessions) },
159− state.currentSessionId?.let { id ->
160− copyToClipboard(context, id)
161− Toast.makeText(context, "Session ID copied", Toast.LENGTH_SHORT).show()
167 navigationIcon = {
121 navigationIcon = {
@@ -205,78 +159,33 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
206 Box(Modifier.fillMaxWidth().weight(1f)) {
160 Box(Modifier.fillMaxWidth().weight(1f)) {
207 if (state.messages.isEmpty() && !state.loading) {
161 if (state.messages.isEmpty() && !state.loading) {
163+ text = "Send a message to start the conversation.",
164+ style = MaterialTheme.typography.bodyMedium,
165+ color = MaterialTheme.colorScheme.onSurfaceVariant,
209 modifier = Modifier.align(Alignment.Center).padding(32.dp),
166 modifier = Modifier.align(Alignment.Center).padding(32.dp),
210− horizontalAlignment = Alignment.CenterHorizontally,
213− Icons.Filled.ChatBubbleOutline,
214− contentDescription = null,
215− modifier = Modifier.size(48.dp),
216− tint = MaterialTheme.colorScheme.primary.copy(alpha = 0.5f),
218− Spacer(Modifier.size(16.dp))
220− text = "Send a message to start the conversation.",
221− style = MaterialTheme.typography.bodyMedium,
222− color = MaterialTheme.colorScheme.onSurfaceVariant,
223− textAlign = TextAlign.Center,
227 LazyColumn(
169 LazyColumn(
228 state = listState,
170 state = listState,
229 modifier = Modifier.fillMaxSize(),
171 modifier = Modifier.fillMaxSize(),
230 contentPadding = PaddingValues(vertical = 8.dp),
172 contentPadding = PaddingValues(vertical = 8.dp),
232− itemsIndexed(state.messages, key = { _, message -> message.id }) { index, message ->
174+ items(state.messages, key = { it.id }) { message ->
233− // Insert a date separator whenever a message falls on a different
234− // calendar day than the one before it (and above the first message).
235− val previous = state.messages.getOrNull(index - 1)
236− if (shouldShowDateSeparator(previous, message)) {
237− DateSeparator(message.time)
239− val sameSenderAsPrevious = index > 0 && state.messages[index - 1].isUser == message.isUser
240− MessageBubble(
175+ MessageBubble(message)
242− onRetry = { dispatch(Event.SendMessage(message.text)) },
243− compactSpacing = sameSenderAsPrevious,
246− // While the assistant is spinning up but hasn't emitted a streaming
247− // message yet (only the user's message is present), show a typing
248− // indicator so the wait doesn't look like a stall.
249− if (state.generating && state.messages.none { it.streaming }) {
250− item(key = "typing-indicator") {
255 ScrollToBottomButton(
178 ScrollToBottomButton(
256− visible = showScrollButton && !isImeVisible,
179+ visible = showScrollButton,
257 showBadge = hasUnseenMessages,
180 showBadge = hasUnseenMessages,
258 onClick = {
181 onClick = {
259 coroutineScope.launch {
182 coroutineScope.launch {
260 if (state.messages.isNotEmpty()) {
183 if (state.messages.isNotEmpty()) {
261− // When the typing indicator is showing it occupies the item
262− // just past the last message, so scroll one further to reach it.
263− val target = if (state.generating && state.messages.none { it.streaming })
266− state.messages.size - 1
184+ listState.animateScrollToItem(state.messages.size - 1)
267− listState.animateScrollToItem(target)
273− visible = showScrollTop,
275− coroutineScope.launch {
276− listState.animateScrollToItem(0)
@@ -316,123 +225,6 @@ private fun BoxScope.ScrollToBottomButton(visible: Boolean, showBadge: Boolean,
319−// Mirror of ScrollToBottomButton, pinned to the top-start corner. Same BoxScope
320−// extension trick so the top-level AnimatedVisibility overload resolves cleanly.
322−private fun BoxScope.ScrollToTopButton(visible: Boolean, onClick: () -> Unit) {
325− modifier = Modifier.align(Alignment.TopStart),
326− enter = scaleIn() + fadeIn(),
327− exit = scaleOut() + fadeOut(),
329− Box(Modifier.padding(16.dp)) {
330− FloatingActionButton(
332− modifier = Modifier.size(44.dp),
335− Icons.Filled.KeyboardArrowUp,
336− contentDescription = "Scroll to top",
343−private fun copyToClipboard(context: Context, text: String) {
344− val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
345− clipboard.setPrimaryClip(ClipData.newPlainText("session", text))
348−private val dateSeparatorFormat = java.time.format.DateTimeFormatter.ofPattern("MMM d")
350−/** Convert an epoch-millis timestamp to the local calendar day it falls on. */
351−private fun localDayOf(epochMillis: Long): java.time.LocalDate =
352− java.time.Instant.ofEpochMilli(epochMillis)
353− .atZone(java.time.ZoneId.systemDefault())
357− * A separator is shown above a message when it starts a new calendar day — i.e. the
358− * first timestamped message, or one whose day differs from the previous message's.
359− * Messages without a valid time (time <= 0) never get one.
361−private fun shouldShowDateSeparator(previous: soy.iko.opencode.core.MessageView?, current: soy.iko.opencode.core.MessageView): Boolean {
362− if (current.time <= 0) return false
363− if (previous == null || previous.time <= 0) return true
364− return localDayOf(previous.time) != localDayOf(current.time)
367−/** Human-friendly day label: "Today", "Yesterday", or "MMM d" (e.g. "Jul 8"). */
368−private fun dateSeparatorLabel(day: java.time.LocalDate): String {
369− val today = java.time.LocalDate.now()
372− today.minusDays(1) -> "Yesterday"
373− else -> day.format(dateSeparatorFormat)
378−private fun DateSeparator(epochMillis: Long) {
380− text = dateSeparatorLabel(localDayOf(epochMillis)),
381− style = MaterialTheme.typography.labelSmall,
382− color = MaterialTheme.colorScheme.onSurfaceVariant,
383− textAlign = TextAlign.Center,
384− modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp),
388−// Assistant-style bubble with three sequentially-pulsing dots, shown as a stand-in
389−// until the real streaming reply starts. Mirrors MessageBubble's left-aligned,
390−// surfaceVariant look so it reads as an incoming message.
392−private fun TypingIndicator() {
393− val shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp, bottomStart = 4.dp, bottomEnd = 16.dp)
394− val transition = rememberInfiniteTransition(label = "typing")
396− modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 4.dp),
397− horizontalArrangement = Arrangement.Start,
402− .background(MaterialTheme.colorScheme.surfaceVariant)
403− .padding(horizontal = 14.dp, vertical = 12.dp),
404− verticalAlignment = Alignment.CenterVertically,
405− horizontalArrangement = Arrangement.spacedBy(6.dp),
409− style = MaterialTheme.typography.bodyMedium.copy(fontStyle = FontStyle.Italic),
410− color = MaterialTheme.colorScheme.onSurfaceVariant,
412− Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
413− // Stagger the three dots so they fade in and out in sequence.
414− listOf(0, 150, 300).forEach { staggerMs ->
415− val alpha by transition.animateFloat(
416− initialValue = 0.2f,
418− animationSpec = infiniteRepeatable(
419− animation = tween(durationMillis = 600, delayMillis = staggerMs),
420− repeatMode = RepeatMode.Reverse,
428− .background(MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = alpha)),
436@Composable
228@Composable
437private fun ReconnectingBanner() {
229private fun ReconnectingBanner() {
@@ -497,70 +289,27 @@ private fun ChatInputBar(
497 onStop: () -> Unit,
289 onStop: () -> Unit,
499 val haptic = LocalHapticFeedback.current
291 val haptic = LocalHapticFeedback.current
500− val clipboardManager = LocalClipboardManager.current
501 Surface(tonalElevation = 3.dp) {
292 Surface(tonalElevation = 3.dp) {
503− modifier = Modifier.fillMaxWidth().imePadding().padding(horizontal = 12.dp, vertical = 8.dp),
506− modifier = Modifier.fillMaxWidth(),
294+ modifier = Modifier.fillMaxWidth().imePadding().padding(horizontal = 12.dp, vertical = 8.dp),
507 verticalAlignment = Alignment.Bottom,
295 verticalAlignment = Alignment.Bottom,
508 horizontalArrangement = Arrangement.spacedBy(8.dp),
296 horizontalArrangement = Arrangement.spacedBy(8.dp),
510 OutlinedTextField(
298 OutlinedTextField(
511 value = draft,
299 value = draft,
512 onValueChange = onDraftChange,
300 onValueChange = onDraftChange,
513− modifier = Modifier.weight(1f).heightIn(min = 48.dp),
301+ modifier = Modifier.weight(1f),
514 enabled = !loading,
302 enabled = !loading,
515 placeholder = { Text("Message opencode…") },
303 placeholder = { Text("Message opencode…") },
516 maxLines = 5,
304 maxLines = 5,
517− // Offer a quick way to wipe the draft once there's something to clear
518− // and we're not mid-generation (where the field is a poor place to fuss).
519− trailingIcon = if (draft.isNotEmpty() && !generating) {
522− onClick = { onDraftChange("") },
523− modifier = Modifier.size(20.dp),
527− contentDescription = "Clear draft",
528− modifier = Modifier.size(16.dp),
535− // Surface a running count once the draft gets long, so the user has a
536− // sense of scale before sending a wall of text.
537− supportingText = if (draft.length > 500) {
540− text = "${draft.length} characters",
541− style = MaterialTheme.typography.labelSmall,
542− color = MaterialTheme.colorScheme.onSurfaceVariant,
543− textAlign = TextAlign.End,
544− modifier = Modifier.fillMaxWidth(),
550 keyboardOptions = KeyboardOptions(imeAction = ImeAction.Send),
305 keyboardOptions = KeyboardOptions(imeAction = ImeAction.Send),
551 keyboardActions = KeyboardActions(onSend = {
306 keyboardActions = KeyboardActions(onSend = {
552 if (!generating && !loading && draft.isNotBlank()) onSend()
307 if (!generating && !loading && draft.isNotBlank()) onSend()
555 if (generating) {
310 if (generating) {
556− FilledTonalButton(onClick = onStop) {
311+ FilledIconButton(onClick = onStop) {
559− contentDescription = null,
312+ Icon(Icons.Filled.Stop, contentDescription = "Stop generating")
560− modifier = Modifier.size(18.dp),
562− Spacer(Modifier.size(6.dp))
566 FilledIconButton(
315 FilledIconButton(
@@ -574,17 +323,5 @@ private fun ChatInputBar(
577− // With nothing typed yet, offer a one-tap way to drop in clipboard contents.
578− if (draft.isEmpty() && !generating && !loading) {
581− clipboardManager.getText()?.text?.let { onDraftChange(it) }
583− contentPadding = PaddingValues(0.dp),