fix(app): user message expand on click
This commit is contained in:
@@ -357,6 +357,11 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
|
|||||||
setTimeout(() => setCopied(false), 2000)
|
setTimeout(() => setCopied(false), 2000)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const toggleExpanded = () => {
|
||||||
|
if (!canExpand()) return
|
||||||
|
setExpanded((value) => !value)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-component="user-message" data-expanded={expanded()} data-can-expand={canExpand()}>
|
<div data-component="user-message" data-expanded={expanded()} data-can-expand={canExpand()}>
|
||||||
<Show when={attachments().length > 0}>
|
<Show when={attachments().length > 0}>
|
||||||
@@ -388,19 +393,29 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
|
|||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={text()}>
|
<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()} />
|
<HighlightedText text={text()} references={inlineFiles()} agents={agents()} />
|
||||||
<button
|
<button
|
||||||
data-slot="user-message-expand"
|
data-slot="user-message-expand"
|
||||||
type="button"
|
type="button"
|
||||||
aria-label={expanded() ? "Collapse message" : "Expand message"}
|
aria-label={expanded() ? "Collapse message" : "Expand message"}
|
||||||
onClick={() => setExpanded((v) => !v)}
|
onClick={(event) => {
|
||||||
|
event.stopPropagation()
|
||||||
|
toggleExpanded()
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Icon name="chevron-down" size="small" />
|
<Icon name="chevron-down" size="small" />
|
||||||
</button>
|
</button>
|
||||||
<div data-slot="user-message-copy-wrapper">
|
<div data-slot="user-message-copy-wrapper">
|
||||||
<Tooltip value={copied() ? "Copied!" : "Copy"} placement="top" gutter={8}>
|
<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>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user