@@ -1,5 +1,9 @@
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
3import androidx.compose.animation.AnimatedVisibility
7import androidx.compose.animation.AnimatedVisibility
4import androidx.compose.animation.core.RepeatMode
8import androidx.compose.animation.core.RepeatMode
5import androidx.compose.animation.core.animateFloat
9import androidx.compose.animation.core.animateFloat
@@ -10,8 +14,10 @@ import androidx.compose.animation.fadeIn
10import androidx.compose.animation.fadeOut
14import androidx.compose.animation.fadeOut
11import androidx.compose.animation.scaleIn
15import androidx.compose.animation.scaleIn
12import androidx.compose.animation.scaleOut
16import androidx.compose.animation.scaleOut
17+import androidx.compose.foundation.ExperimentalFoundationApi
13import androidx.compose.foundation.background
18import androidx.compose.foundation.background
14import androidx.compose.foundation.clickable
19import androidx.compose.foundation.clickable
20+import androidx.compose.foundation.combinedClickable
15import androidx.compose.foundation.layout.Arrangement
21import androidx.compose.foundation.layout.Arrangement
16import androidx.compose.foundation.layout.Box
22import androidx.compose.foundation.layout.Box
17import androidx.compose.foundation.layout.BoxScope
23import androidx.compose.foundation.layout.BoxScope
@@ -20,12 +26,15 @@ import androidx.compose.foundation.layout.Row
20import androidx.compose.foundation.layout.Spacer
26import androidx.compose.foundation.layout.Spacer
21import androidx.compose.foundation.layout.fillMaxSize
27import androidx.compose.foundation.layout.fillMaxSize
22import androidx.compose.foundation.layout.fillMaxWidth
28import androidx.compose.foundation.layout.fillMaxWidth
29+import androidx.compose.foundation.layout.heightIn
23import androidx.compose.foundation.layout.PaddingValues
30import androidx.compose.foundation.layout.PaddingValues
31+import androidx.compose.foundation.layout.WindowInsets
32+import androidx.compose.foundation.layout.ime
24import androidx.compose.foundation.layout.imePadding
33import androidx.compose.foundation.layout.imePadding
25import androidx.compose.foundation.layout.padding
34import androidx.compose.foundation.layout.padding
26import androidx.compose.foundation.layout.size
35import androidx.compose.foundation.layout.size
27import androidx.compose.foundation.lazy.LazyColumn
36import androidx.compose.foundation.lazy.LazyColumn
28−import androidx.compose.foundation.lazy.items
37+import androidx.compose.foundation.lazy.itemsIndexed
29import androidx.compose.foundation.lazy.rememberLazyListState
38import androidx.compose.foundation.lazy.rememberLazyListState
30import androidx.compose.foundation.shape.CircleShape
39import androidx.compose.foundation.shape.CircleShape
31import androidx.compose.foundation.shape.RoundedCornerShape
40import androidx.compose.foundation.shape.RoundedCornerShape
@@ -34,8 +43,10 @@ import androidx.compose.foundation.text.KeyboardOptions
34import androidx.compose.material.icons.Icons
43import androidx.compose.material.icons.Icons
35import androidx.compose.material.icons.automirrored.filled.ArrowBack
44import androidx.compose.material.icons.automirrored.filled.ArrowBack
36import androidx.compose.material.icons.automirrored.filled.Send
45import androidx.compose.material.icons.automirrored.filled.Send
46+import androidx.compose.material.icons.filled.ChatBubbleOutline
37import androidx.compose.material.icons.filled.Close
47import androidx.compose.material.icons.filled.Close
38import androidx.compose.material.icons.filled.KeyboardArrowDown
48import androidx.compose.material.icons.filled.KeyboardArrowDown
49+import androidx.compose.material.icons.filled.KeyboardArrowUp
39import androidx.compose.material.icons.filled.Stop
50import androidx.compose.material.icons.filled.Stop
40import androidx.compose.material3.CircularProgressIndicator
51import androidx.compose.material3.CircularProgressIndicator
41import androidx.compose.material3.ExperimentalMaterial3Api
52import androidx.compose.material3.ExperimentalMaterial3Api
@@ -50,6 +61,7 @@ import androidx.compose.material3.OutlinedTextField
50import androidx.compose.material3.Scaffold
61import androidx.compose.material3.Scaffold
51import androidx.compose.material3.Surface
62import androidx.compose.material3.Surface
52import androidx.compose.material3.Text
63import androidx.compose.material3.Text
64+import androidx.compose.material3.TextButton
53import androidx.compose.material3.TopAppBar
65import androidx.compose.material3.TopAppBar
54import androidx.compose.runtime.Composable
66import androidx.compose.runtime.Composable
55import androidx.compose.runtime.LaunchedEffect
67import androidx.compose.runtime.LaunchedEffect
@@ -63,9 +75,13 @@ import androidx.compose.ui.Alignment
63import androidx.compose.ui.Modifier
75import androidx.compose.ui.Modifier
64import androidx.compose.ui.draw.clip
76import androidx.compose.ui.draw.clip
65import androidx.compose.ui.hapticfeedback.HapticFeedbackType
77import 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
66import androidx.compose.ui.platform.LocalHapticFeedback
81import androidx.compose.ui.platform.LocalHapticFeedback
67import androidx.compose.ui.text.font.FontStyle
82import androidx.compose.ui.text.font.FontStyle
68import androidx.compose.ui.text.input.ImeAction
83import androidx.compose.ui.text.input.ImeAction
84+import androidx.compose.ui.text.style.TextAlign
69import androidx.compose.ui.text.style.TextOverflow
85import androidx.compose.ui.text.style.TextOverflow
70import androidx.compose.ui.unit.dp
86import androidx.compose.ui.unit.dp
71import kotlinx.coroutines.launch
87import kotlinx.coroutines.launch
@@ -73,11 +89,17 @@ import soy.iko.opencode.core.Event
73import soy.iko.opencode.core.UiState
89import soy.iko.opencode.core.UiState
74import soy.iko.opencode.ui.components.MessageBubble
90import soy.iko.opencode.ui.components.MessageBubble
76−@OptIn(ExperimentalMaterial3Api::class)
92+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
77@Composable
93@Composable
78fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
94fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
79 val listState = rememberLazyListState()
95 val listState = rememberLazyListState()
80 val coroutineScope = rememberCoroutineScope()
96 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
82 // Show a jump-to-bottom button once the user scrolls up away from the latest
104 // Show a jump-to-bottom button once the user scrolls up away from the latest
83 // message. derivedStateOf keeps this from recomposing on every pixel of scroll —
105 // message. derivedStateOf keeps this from recomposing on every pixel of scroll —
@@ -91,6 +113,12 @@ 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 }
94 // Track how many messages the user has "seen" (i.e. was at the bottom for). While
122 // Track how many messages the user has "seen" (i.e. was at the bottom for). While
95 // they're scrolled up, any messages beyond that count are unseen — flag the FAB.
123 // they're scrolled up, any messages beyond that count are unseen — flag the FAB.
96 var lastSeenCount by remember { mutableStateOf(0) }
124 var lastSeenCount by remember { mutableStateOf(0) }
@@ -120,11 +148,20 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
120 topBar = {
148 topBar = {
121 TopAppBar(
149 TopAppBar(
122 title = {
150 title = {
151+ val title = state.currentSessionTitle.ifEmpty { "Chat" }
124− text = state.currentSessionTitle.ifEmpty { "Chat" },
153+ text = if (state.messages.isNotEmpty()) "$title (${state.messages.size})" else title,
125 maxLines = 1,
154 maxLines = 1,
126 overflow = TextOverflow.Ellipsis,
155 overflow = TextOverflow.Ellipsis,
156+ modifier = Modifier.combinedClickable(
127− modifier = Modifier.clickable { dispatch(Event.NavigateToSessions) },
157+ onClick = { dispatch(Event.NavigateToSessions) },
159+ state.currentSessionId?.let { id ->
160+ copyToClipboard(context, id)
161+ Toast.makeText(context, "Session ID copied", Toast.LENGTH_SHORT).show()
130 navigationIcon = {
167 navigationIcon = {
@@ -168,22 +205,42 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
169 Box(Modifier.fillMaxWidth().weight(1f)) {
206 Box(Modifier.fillMaxWidth().weight(1f)) {
170 if (state.messages.isEmpty() && !state.loading) {
207 if (state.messages.isEmpty() && !state.loading) {
172− text = "Send a message to start the conversation.",
173− style = MaterialTheme.typography.bodyMedium,
174− color = MaterialTheme.colorScheme.onSurfaceVariant,
175 modifier = Modifier.align(Alignment.Center).padding(32.dp),
209 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,
178 LazyColumn(
227 LazyColumn(
179 state = listState,
228 state = listState,
180 modifier = Modifier.fillMaxSize(),
229 modifier = Modifier.fillMaxSize(),
181 contentPadding = PaddingValues(vertical = 8.dp),
230 contentPadding = PaddingValues(vertical = 8.dp),
183− items(state.messages, key = { it.id }) { message ->
232+ itemsIndexed(state.messages, key = { _, message -> message.id }) { index, 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
184 MessageBubble(
240 MessageBubble(
186 onRetry = { dispatch(Event.SendMessage(message.text)) },
242 onRetry = { dispatch(Event.SendMessage(message.text)) },
243+ compactSpacing = sameSenderAsPrevious,
189 // While the assistant is spinning up but hasn't emitted a streaming
246 // While the assistant is spinning up but hasn't emitted a streaming
@@ -196,16 +253,30 @@ fun ChatScreen(state: UiState, dispatch: (Event) -> Unit) {
198 ScrollToBottomButton(
255 ScrollToBottomButton(
199− visible = showScrollButton,
256+ visible = showScrollButton && !isImeVisible,
200 showBadge = hasUnseenMessages,
257 showBadge = hasUnseenMessages,
201 onClick = {
258 onClick = {
202 coroutineScope.launch {
259 coroutineScope.launch {
203 if (state.messages.isNotEmpty()) {
260 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 })
204− listState.animateScrollToItem(state.messages.size - 1)
266+ state.messages.size - 1
267+ listState.animateScrollToItem(target)
273+ visible = showScrollTop,
275+ coroutineScope.launch {
276+ listState.animateScrollToItem(0)
@@ -245,6 +316,75 @@ 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),
248// Assistant-style bubble with three sequentially-pulsing dots, shown as a stand-in
388// Assistant-style bubble with three sequentially-pulsing dots, shown as a stand-in
249// until the real streaming reply starts. Mirrors MessageBubble's left-aligned,
389// until the real streaming reply starts. Mirrors MessageBubble's left-aligned,
250// surfaceVariant look so it reads as an incoming message.
390// surfaceVariant look so it reads as an incoming message.
@@ -357,19 +497,56 @@ private fun ChatInputBar(
357 onStop: () -> Unit,
497 onStop: () -> Unit,
359 val haptic = LocalHapticFeedback.current
499 val haptic = LocalHapticFeedback.current
500+ val clipboardManager = LocalClipboardManager.current
360 Surface(tonalElevation = 3.dp) {
501 Surface(tonalElevation = 3.dp) {
362 modifier = Modifier.fillMaxWidth().imePadding().padding(horizontal = 12.dp, vertical = 8.dp),
503 modifier = Modifier.fillMaxWidth().imePadding().padding(horizontal = 12.dp, vertical = 8.dp),
506+ modifier = Modifier.fillMaxWidth(),
363 verticalAlignment = Alignment.Bottom,
507 verticalAlignment = Alignment.Bottom,
364 horizontalArrangement = Arrangement.spacedBy(8.dp),
508 horizontalArrangement = Arrangement.spacedBy(8.dp),
366 OutlinedTextField(
510 OutlinedTextField(
367 value = draft,
511 value = draft,
368 onValueChange = onDraftChange,
512 onValueChange = onDraftChange,
369− modifier = Modifier.weight(1f),
513+ modifier = Modifier.weight(1f).heightIn(min = 48.dp),
370 enabled = !loading,
514 enabled = !loading,
371 placeholder = { Text("Message opencode…") },
515 placeholder = { Text("Message opencode…") },
372 maxLines = 5,
516 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(),
373 keyboardOptions = KeyboardOptions(imeAction = ImeAction.Send),
550 keyboardOptions = KeyboardOptions(imeAction = ImeAction.Send),
374 keyboardActions = KeyboardActions(onSend = {
551 keyboardActions = KeyboardActions(onSend = {
375 if (!generating && !loading && draft.isNotBlank()) onSend()
552 if (!generating && !loading && draft.isNotBlank()) onSend()
@@ -397,5 +574,17 @@ 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),