Draw verbatim text on its own dark surface
A command, a tool's output and a code block in a reply are the one thing on this screen that is not somebody's prose, and they now say so: Mocha's Crust, which sits below Base, so the same colour is one clear step down both on the page where a reply is drawn and on the card where a tool call is. The renderer's code background was `surfaceVariant`, which is exactly a card's own fill -- a fenced block inside a tool call had no background at all, and one in a reply read as a step *up* out of the page. Tool output takes the monospace face with it. It is column-aligned far more often than it is prose -- a listing, a diff, a table of numbers -- and a proportional font silently destroys the alignment that carried the meaning. `RawBlock` is a composable rather than a modifier because the inset is part of it: monospace text against the edge of a tinted block reads as clipping. A call with neither a subject nor any other field draws nothing at all rather than an empty tinted rectangle. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
446d3b9c21
commit
e76617e210
5 files changed
+85
-10
No files matched your search
@@ -0,0 +1,38 @@
|
||||
package com.example.aiapp
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.ColumnScope
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
/**
|
||||
* Verbatim text, on the surface that says so: a command about to be run, what a tool printed.
|
||||
*
|
||||
* A composable rather than a modifier repeated at each site, because the inset is part of it --
|
||||
* monospace text drawn hard against the edge of a tinted block reads as a clipping fault, and three
|
||||
* copies of "clip, fill, pad" drift apart the first time one of them is adjusted.
|
||||
*
|
||||
* The colour is [rawSurface], which is also what a code block inside a reply is given; that is the
|
||||
* point of having one name for it. Markdown's blocks are painted by the renderer rather than by
|
||||
* this, since it draws its own, but they are the same colour on purpose.
|
||||
*/
|
||||
@Composable
|
||||
fun RawBlock(modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit) {
|
||||
Column(
|
||||
modifier
|
||||
.fillMaxWidth()
|
||||
// Smaller than a card's radius, and deliberately: this sits *inside* one, and a
|
||||
// rounded rectangle drawn at the same radius as the rounded rectangle behind it reads
|
||||
// as a misprint rather than as nesting.
|
||||
.clip(MaterialTheme.shapes.extraSmall)
|
||||
.background(rawSurface)
|
||||
.padding(horizontal = 8.dp, vertical = 6.dp),
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user