iris/ai-app
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Answer a question card as one act, and mark the press that made it

Browse Source 
Picking an option marked nothing until the answer had crossed the tunnel,
been recorded and come back as an event, so the card sat unchanged for most
of a second after a tap. What the reader has picked is now the card's own
state and shows at once; a Submit at the foot sends every question the tool
is waiting on, greyed until all of them have an answer and a spinner while
the request is out.

Several questions are paged rather than stacked, with the count and a pair
of arrows on the right, because three questions with four described options
each is several screens and the reader scrolls past the one they are
answering to reach the button that sends it.

A permission ask keeps its single tap -- two bare words are not worth a
submit step -- and marks what was pressed until the request settles, so the
mark either stands on the recorded answer or goes away with the failure.

Chevron draws all four directions from one description of the shape, since
the pager needed two more of them.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
irisandClaude Opus 5 committed 2026-09-03 20:04:48 -04:00
1 parent a4d512af26
commit 8dcd2cb708
7 files changed
+299 -127
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/androidApp/src/main/kotlin/com/example/aiapp/AskQuestion.kt
+181 -52
View File
@@ -10,42 +10,174 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.dp
/** One question's answer on its way back, so a card can hand over several at once. */
data class QuestionAnswer(val questionId: String, val answers: List<String>)
/**
* Every question one tool call is waiting on.
* What the reader has settled on for one question, before any of it is sent.
*
* Held here rather than inferred from the transcript, which is what made picking an option feel
* broken: the mark used to appear only when the answer had crossed the tunnel, been recorded and
* come back as an event, so on a phone the card sat unchanged for most of a second after a tap and
* the natural response was to tap again.
*
* Picked options and typed words are one field each because they are alternatives rather than
* parts: answering in the reader's own words is the case no option covers, so typing puts the picks
* away and picking puts the words away, and there is never a draft that means two things.
*/
data class Draft(val picked: Set<String> = emptySet(), val other: String = "") {
val settled: Boolean
get() = picked.isNotEmpty() || other.isNotBlank()
/**
* What goes back, in the order the options were offered rather than the order they were tapped:
* the reader is answering a list, and it should read back as that list.
*/
fun answers(options: List<QuestionOption>): List<String> =
if (other.isNotBlank()) listOf(other.trim())
else options.map { it.label }.filter { it in picked }
}
/**
* Every question one tool call is waiting on, one at a time.
*
* All of it comes from the question events themselves -- what each option means, what picking it
* would produce, whether several may be picked at once. None of it is read out of the call's own
* input, which is one provider's JSON: parsing that here would put that provider's schema in the
* app, where no other provider can reach it and where it drifts the first time the schema moves.
*
* One question on screen with arrows to the others, rather than all of them stacked. A card asking
* three questions with four options and a description each is several screens tall, so the reader
* scrolls past the question they are answering to reach the button that sends it, and never sees
* the whole of any one of them. Paged, each question is a screen and the count says how many are
* left -- which is also what makes "not all of them are answered" something the reader can act on
* rather than something to go hunting for.
*
* Nothing is sent until Submit. Answering is one act even when it is several questions: the tool
* asked them together and is waiting on all of them, and sending each as it was tapped meant the
* reader could not change their mind about the first after reading the third.
*/
@Composable
fun AskUserQuestionBody(
asks: List<TranscriptItem.QuestionCard>,
onAnswer: (questionId: String, answers: List<String>) -> Unit,
onAnswer: (List<QuestionAnswer>, onSettled: () -> Unit) -> Unit,
) {
// Seeded from what was already answered, so a card the reader comes back to shows their
// answers rather than an empty draft over them.
var drafts by
remember(asks.map { it.id }) {
mutableStateOf(
asks.associate { ask ->
ask.id to
Draft(
picked =
ask.answers
.filter { a -> ask.options.any { it.label == a } }
.toSet(),
other =
ask.answers
.firstOrNull { a -> ask.options.none { it.label == a } }
.orEmpty(),
)
}
)
}
var at by remember(asks.map { it.id }) { mutableIntStateOf(0) }
var sending by remember(asks.map { it.id }) { mutableStateOf(false) }
if (asks.isEmpty()) return
val showing = asks[at.coerceIn(0, asks.size - 1)]
val outstanding = asks.filter { it.answers.isEmpty() }
Column(Modifier.fillMaxWidth()) {
asks.forEach { ask ->
if (asks.size > 1) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth(),
) {
Text(
"Question ${at + 1} of ${asks.size}",
style = MaterialTheme.typography.labelSmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.weight(1f),
)
// Disabled at the ends rather than absent, so the pair keeps its place and the
// reader can see that there is nothing further that way.
MarkButton("Previous question", { at-- }, enabled = at > 0) {
Chevron(Pointing.Left, colour = LocalContentColor.current)
}
MarkButton("Next question", { at++ }, enabled = at < asks.size - 1) {
Chevron(Pointing.Right, colour = LocalContentColor.current)
}
}
}
Spacer(Modifier.height(4.dp))
AskedQuestion(
showing,
draft = drafts[showing.id] ?: Draft(),
onDraft = { drafts = drafts + (showing.id to it) },
)
if (outstanding.isNotEmpty()) {
Spacer(Modifier.height(12.dp))
AskedQuestion(ask) { answers -> onAnswer(ask.id, answers) }
// Greyed until every question has an answer, because the tool is waiting on all of
// them: a submit that sent two of three would leave the third one asked and the card
// looking dealt with.
val ready = outstanding.all { drafts[it.id]?.settled == true }
Button(
onClick = {
sending = true
onAnswer(
outstanding.map { ask ->
QuestionAnswer(ask.id, (drafts[ask.id] ?: Draft()).answers(ask.options))
}
) {
// Back to a button whatever happened. A refusal is reported by the screen
// around this, and the draft is still here to send again -- a spinner
// that never stops would be the only sign of a failure this card cannot
// describe.
sending = false
}
},
enabled = ready && !sending,
modifier = Modifier.fillMaxWidth(),
) {
if (sending) {
// In the button rather than beside it, so the row does not change height at
// the moment it is pressed.
CircularProgressIndicator(
Modifier.height(18.dp).width(18.dp),
strokeWidth = 2.dp,
color = LocalContentColor.current,
)
} else {
Text(
if (outstanding.size > 1) "Submit ${outstanding.size} answers" else "Submit"
)
}
}
}
}
}
@@ -56,9 +188,16 @@ fun AskUserQuestionBody(
* The same body wherever a question appears -- on the call that asked it, or as a card of its own
* when nothing did. A question is the same thing either way, and two renderings of it would be two
* places for an answer to go missing.
*
* [draft] is what the reader has picked so far and [onDraft] is how they change it; nothing here
* sends anything. An answered question ignores both and draws what was answered.
*/
@Composable
fun AskedQuestion(ask: TranscriptItem.QuestionCard, onAnswer: (List<String>) -> Unit) {
fun AskedQuestion(
ask: TranscriptItem.QuestionCard,
draft: Draft,
onDraft: (Draft) -> Unit,
) {
Column(Modifier.fillMaxWidth()) {
ask.header?.let { header ->
// Its own line rather than beside the question, because it is a label *for* the
@@ -77,16 +216,20 @@ fun AskedQuestion(ask: TranscriptItem.QuestionCard, onAnswer: (List<String>) ->
// very little without the three it was chosen over. Marked in the same purple that says
// "picked" while the question is still open, so it is one appearance learned once.
val answered = ask.answers.isNotEmpty()
if (ask.multiSelect && !answered) {
MultipleChoice(ask.options, onAnswer)
} else if (ask.options.all { it.description == null && it.preview == null }) {
// What is marked: what was answered once there is an answer, and what the finger has
// chosen until then.
val marked = if (answered) ask.answers.toSet() else draft.picked
// Null once the question is answered: the options stay and stop being pressable.
val onPick: ((String) -> Unit)? =
if (answered) null else { label -> onDraft(pick(draft, label, ask.multiSelect)) }
if (ask.options.all { it.description == null && it.preview == null }) {
// Nothing to read, so nothing to lay out: Allow and Deny are two words, and two words
// do not need a card each.
AnswerOptions(ask.options, ask.answers, onAnswer.takeUnless { answered })
AnswerOptions(ask.options, marked.toList(), onPick)
} else {
ask.options.forEach { option ->
OptionCard(option, selected = option.label in ask.answers) {
if (!answered) onAnswer(listOf(option.label))
OptionCard(option, selected = option.label in marked) {
onPick?.invoke(option.label)
}
}
}
@@ -102,35 +245,24 @@ fun AskedQuestion(ask: TranscriptItem.QuestionCard, onAnswer: (List<String>) ->
modifier = Modifier.padding(top = 8.dp),
)
}
if (!answered) OtherAnswer(onAnswer)
if (!answered) {
OtherAnswer(draft.other) { onDraft(Draft(other = it)) }
}
}
}
/**
* Options that can be chosen together, with one button to send them.
* [label] added to, or taken out of, what [draft] has picked.
*
* The answer goes back as the list it is. What a provider makes of several answers is decided where
* that provider is spoken to -- Claude Code's answers map holds a string, so they are joined there
* -- and nothing on this side has to know that.
* A single-answer question replaces rather than accumulates, and either way picking puts any typed
* words away -- see [Draft].
*/
@Composable
private fun MultipleChoice(options: List<QuestionOption>, onAnswer: (List<String>) -> Unit) {
var chosen by remember { mutableStateOf(setOf<String>()) }
options.forEach { option ->
OptionCard(option, selected = option.label in chosen) {
chosen = if (option.label in chosen) chosen - option.label else chosen + option.label
}
private fun pick(draft: Draft, label: String, multiSelect: Boolean): Draft =
when {
!multiSelect -> Draft(picked = setOf(label))
label in draft.picked -> Draft(picked = draft.picked - label)
else -> Draft(picked = draft.picked + label)
}
Spacer(Modifier.height(4.dp))
OutlinedButton(
// In the order they were offered rather than the order they were tapped: the reader is
// answering a list, and it should read back as that list.
onClick = { onAnswer(options.map { it.label }.filter { it in chosen }) },
enabled = chosen.isNotEmpty(),
) {
Text(if (chosen.size <= 1) "Send answer" else "Send ${chosen.size} answers")
}
}
/**
* One option: what it is called, what it means, and what it would produce.
@@ -208,20 +340,17 @@ private fun Preview(preview: String) {
* cannot tell that it was ever open.
*/
@Composable
private fun OtherAnswer(onAnswer: (List<String>) -> Unit) {
var text by remember { mutableStateOf("") }
Row(Modifier.fillMaxWidth().padding(top = 8.dp)) {
OutlinedTextField(
value = text,
onValueChange = { text = it },
label = { Text("Other") },
singleLine = true,
modifier = Modifier.weight(1f),
)
TextButton(onClick = { onAnswer(listOf(text.trim())) }, enabled = text.isNotBlank()) {
Text("Send")
}
}
private fun OtherAnswer(text: String, onText: (String) -> Unit) {
// No Send of its own: this is one more way to answer the question, and the card's Submit is
// what sends it. A second send button beside the field made the shorter half of the card look
// like the one that finishes it.
OutlinedTextField(
value = text,
onValueChange = onText,
label = { Text("Other") },
singleLine = true,
modifier = Modifier.fillMaxWidth().padding(top = 8.dp),
)
}
/**
@@ -235,10 +364,10 @@ private fun OtherAnswer(onAnswer: (List<String>) -> Unit) {
@Composable
fun AnswerOptions(
options: List<QuestionOption>,
/** What was chosen, marked rather than restated; empty while the question is open. */
/** What is chosen: the answer once there is one, and what the finger has marked until then. */
answers: List<String> = emptyList(),
/** Null once the question is answered -- the buttons stay, and stop being buttons. */
onAnswer: ((List<String>) -> Unit)?,
onPick: ((String) -> Unit)?,
) {
FlowRow(
horizontalArrangement = Arrangement.spacedBy(8.dp),
@@ -248,11 +377,11 @@ fun AnswerOptions(
options.forEach { option ->
val taken = option.label in answers
OutlinedButton(
onClick = { onAnswer?.invoke(listOf(option.label)) },
onClick = { onPick?.invoke(option.label) },
// Disabled rather than removed, so an answered question still shows what it
// offered. Material dims a disabled button's own border and label, which would
// take the mark with it -- both are stated here instead.
enabled = onAnswer != null,
enabled = onPick != null,
border =
BorderStroke(
if (taken) 2.dp else 1.dp,