diff options
| author | Adam <[email protected]> | 2026-01-20 05:04:38 -0600 |
|---|---|---|
| committer | Adam <[email protected]> | 2026-01-20 05:21:33 -0600 |
| commit | 353115a895655f3d9f3075cd0516000722e9c6b5 (patch) | |
| tree | a3e93e4d117f3e361302dab982cd6516dbcd9724 | |
| parent | 5f0372183a1f7447de111e170b915783823f4b11 (diff) | |
| download | opencode-353115a895655f3d9f3075cd0516000722e9c6b5.tar.gz opencode-353115a895655f3d9f3075cd0516000722e9c6b5.zip | |
fix(app): user message expand on click
| -rw-r--r-- | packages/ui/src/components/message-part.tsx | 21 |
1 files changed, 18 insertions, 3 deletions
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx index b3fd01c2d..24b1ee393 100644 --- a/packages/ui/src/components/message-part.tsx +++ b/packages/ui/src/components/message-part.tsx @@ -357,6 +357,11 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp setTimeout(() => setCopied(false), 2000) } + const toggleExpanded = () => { + if (!canExpand()) return + setExpanded((value) => !value) + } + return ( <div data-component="user-message" data-expanded={expanded()} data-can-expand={canExpand()}> <Show when={attachments().length > 0}> @@ -388,19 +393,29 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp </div> </Show> <Show when={text()}> - <div data-slot="user-message-text" ref={(el) => (textRef = el)}> + <div data-slot="user-message-text" ref={(el) => (textRef = el)} onClick={toggleExpanded}> <HighlightedText text={text()} references={inlineFiles()} agents={agents()} /> <button data-slot="user-message-expand" type="button" aria-label={expanded() ? "Collapse message" : "Expand message"} - onClick={() => setExpanded((v) => !v)} + onClick={(event) => { + event.stopPropagation() + toggleExpanded() + }} > <Icon name="chevron-down" size="small" /> </button> <div data-slot="user-message-copy-wrapper"> <Tooltip value={copied() ? "Copied!" : "Copy"} placement="top" gutter={8}> - <IconButton icon={copied() ? "check" : "copy"} variant="secondary" onClick={handleCopy} /> + <IconButton + icon={copied() ? "check" : "copy"} + variant="secondary" + onClick={(event) => { + event.stopPropagation() + handleCopy() + }} + /> </Tooltip> </div> </div> |