mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-12-23 10:11:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix: desktop layout

Browse source
This commit is contained in:
Adam 2025-12-12 14:44:04 -06:00
parent 41e234c6d0
commit ccdd77032a
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
2 changed files with 79 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

24
packages/ui/src/components/session-turn.css
View file

@ -29,20 +29,32 @@
gap: 32px;
}
[data-slot="session-turn-sticky-header"] {
position: sticky;
top: 0;
background-color: var(--background-stronger);
z-index: 20;
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 8px;
}
[data-slot="session-turn-message-header"] {
display: flex;
align-items: center;
gap: 8px;
align-self: stretch;
position: sticky;
top: 0;
background-color: var(--background-stronger);
z-index: 20;
height: 32px;
}
[data-slot="session-turn-message-content"] {
margin-top: -24px;
/* [data-slot="session-turn-message-content"] { */
/* } */
[data-slot="session-turn-response-trigger"] {
width: calc(100% + 9px);
margin-left: -9px;
padding-left: 9px;
}
[data-slot="session-turn-message-title"] {

121
packages/ui/src/components/session-turn.tsx
View file

@ -73,6 +73,12 @@ export function SessionTurn(
}
}
function handleInteraction() {
if (working()) {
setUserScrolled(true)
}
}
createEffect(() => {
if (!working()) {
setUserScrolled(false)
@ -90,7 +96,7 @@ export function SessionTurn(
return (
<div data-component="session-turn" class={props.classes?.root}>
<div ref={scrollRef} onScroll={handleScroll} data-slot="session-turn-content" class={props.classes?.content}>
<div ref={contentRef}>
<div ref={contentRef} onClick={handleInteraction}>
<Show when={message()}>
{(message) => {
const assistantMessages = createMemo(() => {
@ -233,35 +239,29 @@ export function SessionTurn(
data-slot="session-turn-message-container"
class={props.classes?.container}
>
{/* Title */}
<div data-slot="session-turn-message-header">
<div data-slot="session-turn-message-title">
<Switch>
<Match when={working()}>
<Typewriter as="h1" text={message().summary?.title} data-slot="session-turn-typewriter" />
</Match>
<Match when={true}>
<h1>{message().summary?.title}</h1>
</Match>
</Switch>
{/* Sticky Header */}
<div data-slot="session-turn-sticky-header">
<div data-slot="session-turn-message-header">
<div data-slot="session-turn-message-title">
<Switch>
<Match when={working()}>
<Typewriter as="h1" text={message().summary?.title} data-slot="session-turn-typewriter" />
</Match>
<Match when={true}>
<h1>{message().summary?.title}</h1>
</Match>
</Switch>
</div>
</div>
</div>
<div data-slot="session-turn-message-content">
<Message message={message()} parts={parts()} />
</div>
{/* Response */}
<div data-slot="session-turn-response-section">
<Collapsible
variant="ghost"
open={store.detailsExpanded}
onOpenChange={(open) => setStore("detailsExpanded", open)}
data-slot="session-turn-collapsible"
>
<Collapsible.Trigger
as={Button}
<div data-slot="session-turn-message-content">
<Message message={message()} parts={parts()} />
</div>
<div data-slot="session-turn-response-trigger">
<Button
data-slot="session-turn-collapsible-trigger-content"
variant="ghost"
size="small"
onClick={() => setStore("detailsExpanded", !store.detailsExpanded)}
>
<Show when={working()}>
<Spinner />
@ -274,41 +274,42 @@ export function SessionTurn(
<span>·</span>
<span>{store.duration}</span>
<Icon name="chevron-grabber-vertical" size="small" />
</Collapsible.Trigger>
<Collapsible.Content>
<div data-slot="session-turn-collapsible-content-inner">
<For each={assistantMessages()}>
{(assistantMessage) => {
const parts = createMemo(() => data.store.part[assistantMessage.id] ?? [])
const last = createMemo(() =>
parts()
.filter((p) => p?.type === "text")
.at(-1),
)
return (
<Switch>
<Match when={lastTextPartShown() && lastTextPart()?.id === last()?.id}>
<Message
message={assistantMessage}
parts={parts().filter((p) => p?.id !== last()?.id)}
/>
</Match>
<Match when={true}>
<Message message={assistantMessage} parts={parts()} />
</Match>
</Switch>
)
}}
</For>
<Show when={error()}>
<Card variant="error" class="error-card">
{error()?.data?.message as string}
</Card>
</Show>
</div>
</Collapsible.Content>
</Collapsible>
</Button>
</div>
</div>
{/* Response */}
<Show when={store.detailsExpanded}>
<div data-slot="session-turn-collapsible-content-inner">
<For each={assistantMessages()}>
{(assistantMessage) => {
const parts = createMemo(() => data.store.part[assistantMessage.id] ?? [])
const last = createMemo(() =>
parts()
.filter((p) => p?.type === "text")
.at(-1),
)
return (
<Switch>
<Match when={lastTextPartShown() && lastTextPart()?.id === last()?.id}>
<Message
message={assistantMessage}
parts={parts().filter((p) => p?.id !== last()?.id)}
/>
</Match>
<Match when={true}>
<Message message={assistantMessage} parts={parts()} />
</Match>
</Switch>
)
}}
</For>
<Show when={error()}>
<Card variant="error" class="error-card">
{error()?.data?.message as string}
</Card>
</Show>
</div>
</Show>
{/* Summary */}
<Show when={!working()}>
<div data-slot="session-turn-summary-section">