diff options
Diffstat (limited to 'packages/web/src/components')
7 files changed, 50 insertions, 21 deletions
diff --git a/packages/web/src/components/share/content-bash.module.css b/packages/web/src/components/share/content-bash.module.css index 0d7453156..0915282d7 100644 --- a/packages/web/src/components/share/content-bash.module.css +++ b/packages/web/src/components/share/content-bash.module.css @@ -1,10 +1,5 @@ .root { - width: 100%; - max-width: var(--sm-tool-width); - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; + display: contents; [data-slot="expand-button"] { flex: 0 0 auto; @@ -13,8 +8,6 @@ } [data-slot="body"] { - display: flex; - flex-direction: column; border: 1px solid var(--sl-color-divider); border-radius: 0.25rem; overflow: hidden; diff --git a/packages/web/src/components/share/content-code.module.css b/packages/web/src/components/share/content-code.module.css index 6ad138b5f..ec159d646 100644 --- a/packages/web/src/components/share/content-code.module.css +++ b/packages/web/src/components/share/content-code.module.css @@ -1,5 +1,4 @@ .root { - max-width: var(--md-tool-width); border: 1px solid var(--sl-color-divider); background-color: var(--sl-color-bg-surface); border-radius: 0.25rem; diff --git a/packages/web/src/components/share/content-error.module.css b/packages/web/src/components/share/content-error.module.css index 70645d6b4..6303be633 100644 --- a/packages/web/src/components/share/content-error.module.css +++ b/packages/web/src/components/share/content-error.module.css @@ -7,7 +7,6 @@ align-items: flex-start; gap: 1rem; align-self: flex-start; - max-width: var(--md-tool-width); [data-section="content"] { pre { diff --git a/packages/web/src/components/share/content-markdown.module.css b/packages/web/src/components/share/content-markdown.module.css index da1aa1128..0e6b83620 100644 --- a/packages/web/src/components/share/content-markdown.module.css +++ b/packages/web/src/components/share/content-markdown.module.css @@ -7,7 +7,6 @@ align-items: flex-start; gap: 1rem; align-self: flex-start; - max-width: var(--md-tool-width); &[data-highlight="true"] { background-color: var(--sl-color-blue-low); diff --git a/packages/web/src/components/share/content-text.module.css b/packages/web/src/components/share/content-text.module.css index f8d0b0b93..203f0d06d 100644 --- a/packages/web/src/components/share/content-text.module.css +++ b/packages/web/src/components/share/content-text.module.css @@ -8,7 +8,6 @@ align-items: flex-start; gap: 1rem; align-self: flex-start; - max-width: var(--md-tool-width); font-size: 0.875rem; &[data-compact] { diff --git a/packages/web/src/components/share/part.module.css b/packages/web/src/components/share/part.module.css index bf843bc0d..df8102f5d 100644 --- a/packages/web/src/components/share/part.module.css +++ b/packages/web/src/components/share/part.module.css @@ -101,10 +101,7 @@ } [data-component="content"] { - display: flex; - flex-direction: column; - gap: 1rem; - flex-grow: 1; + min-width: 0; } [data-component="spacer"] { @@ -117,6 +114,24 @@ color: var(--sl-color-text-dimmed); } + [data-component="user-text"] { + min-width: 0; + display: flex; + flex-direction: column; + gap: 1rem; + flex-grow: 1; + max-width: var(--md-tool-width); + } + + [data-component="assistant-text"] { + min-width: 0; + display: flex; + flex-direction: column; + gap: 1rem; + flex-grow: 1; + max-width: var(--md-tool-width); + } + [data-component="step-start"] { display: flex; flex-direction: column; @@ -195,6 +210,31 @@ align-items: flex-start; gap: 0.375rem; padding-bottom: 1rem; + + &[data-tool="bash"] { + max-width: var(--sm-tool-width); + } + + &[data-tool="error"] { + max-width: var(--md-tool-width); + } + + &[data-tool="read"], + &[data-tool="edit"], + &[data-tool="list"], + &[data-tool="glob"], + &[data-tool="grep"], + &[data-tool="write"], + &[data-tool="webfetch"] { + [data-component="tool-result"] { + max-width: var(--sm-tool-width); + } + } + &[data-tool="edit"] { + [data-component="tool-result"] { + max-width: var(--lg-tool-width); + } + } } [data-component="tool-title"] { diff --git a/packages/web/src/components/share/part.tsx b/packages/web/src/components/share/part.tsx index fbc1ae16d..e155332ad 100644 --- a/packages/web/src/components/share/part.tsx +++ b/packages/web/src/components/share/part.tsx @@ -126,13 +126,13 @@ export function Part(props: PartProps) { </div> <div data-component="content"> {props.message.role === "user" && props.part.type === "text" && ( - <> + <div data-component="user-text"> <ContentText text={props.part.text} expand={props.last} /> <Spacer /> - </> + </div> )} {props.message.role === "assistant" && props.part.type === "text" && ( - <> + <div data-component="assistant-text"> <ContentMarkdown expand={props.last} text={props.part.text} /> {props.last && props.message.role === "assistant" && props.message.time.completed && ( <Footer @@ -144,7 +144,7 @@ export function Part(props: PartProps) { </Footer> )} <Spacer /> - </> + </div> )} {props.message.role === "user" && props.part.type === "file" && ( <div data-component="attachment"> @@ -159,7 +159,7 @@ export function Part(props: PartProps) { </div> )} {props.part.type === "tool" && props.part.state.status === "error" && ( - <div data-component="tool"> + <div data-component="tool" data-tool="error"> <ContentError>{formatErrorString(props.part.state.error)}</ContentError> </div> )} |