diff options
| author | opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> | 2026-01-30 17:58:31 +0000 |
|---|---|---|
| committer | opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> | 2026-01-30 17:58:31 +0000 |
| commit | fe66ca163cbb9d689cf296c4c2f7a63414c1cf45 (patch) | |
| tree | e330cc07e4ce3b68f64592f7c123cfa1ce77ef23 /packages/ui/src/components/session-turn.css | |
| parent | 20619a6a26ec0cfc2707b7ed13387715e9f9cdaa (diff) | |
| download | opencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.tar.gz opencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.zip | |
chore: generate
Diffstat (limited to 'packages/ui/src/components/session-turn.css')
| -rw-r--r-- | packages/ui/src/components/session-turn.css | 1139 |
1 files changed, 561 insertions, 578 deletions
diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css index db73e801e..088b377cb 100644 --- a/packages/ui/src/components/session-turn.css +++ b/packages/ui/src/components/session-turn.css @@ -1,580 +1,563 @@ [data-component="session-turn"] { - --session-turn-sticky-height: 0px; - --sticky-header-height: calc( - var(--session-title-height, 0px) + - var(--session-turn-sticky-height, 0px) + - 24px - ); - /* flex: 1; */ - height: 100%; - min-height: 0; - min-width: 0; - display: flex; - align-items: flex-start; - justify-content: flex-start; - - [data-slot="session-turn-content"] { - flex-grow: 1; - width: 100%; - height: 100%; - min-width: 0; - overflow-y: auto; - scrollbar-width: none; - } - - [data-slot="session-turn-content"]::-webkit-scrollbar { - display: none; - } - - [data-slot="session-turn-message-container"] { - display: flex; - flex-direction: column; - align-items: flex-start; - align-self: stretch; - min-width: 0; - gap: 18px; - overflow-anchor: none; - - [data-slot="session-turn-badge"] { - display: inline-flex; - align-items: center; - padding: 2px 6px; - border-radius: 4px; - font-family: var(--font-family-mono); - font-size: var(--font-size-x-small); - font-weight: var(--font-weight-medium); - line-height: var(--line-height-normal); - white-space: nowrap; - color: var(--text-base); - background: var(--surface-raised-base); - } - } - - [data-slot="session-turn-attachments"] { - width: 100%; - min-width: 0; - align-self: stretch; - } - - [data-slot="session-turn-sticky"] { - width: calc(100% + 9px); - position: sticky; - top: var(--session-title-height, 0px); - z-index: 20; - background-color: var(--background-stronger); - margin-left: -9px; - padding-left: 9px; - /* padding-bottom: 12px; */ - display: flex; - flex-direction: column; - gap: 12px; - - &::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: var(--background-stronger); - z-index: -1; - } - - &::after { - content: ""; - position: absolute; - top: 100%; - left: 0; - right: 0; - height: 32px; - background: linear-gradient( - to bottom, - var(--background-stronger), - transparent - ); - pointer-events: none; - } - } - - [data-slot="session-turn-message-header"] { - display: flex; - align-items: center; - align-self: stretch; - height: 32px; - } - - [data-slot="session-turn-message-content"] { - margin-top: 0; - max-width: 100%; - } - - [data-component="user-message"] [data-slot="user-message-text"] { - max-height: var(--user-message-collapsed-height, 64px); - transition: max-height 200ms cubic-bezier(0.25, 0, 0.5, 1); - } - - [data-component="user-message"][data-expanded="true"] - [data-slot="user-message-text"] { - max-height: 2000px; - } - - [data-component="user-message"][data-can-expand="true"] - [data-slot="user-message-text"] { - padding-right: 36px; - padding-bottom: 28px; - } - - [data-component="user-message"][data-can-expand="true"]:not( - [data-expanded="true"] - ) - [data-slot="user-message-text"]::after { - content: ""; - position: absolute; - left: 0; - right: 0; - height: 8px; - bottom: 0px; - background: - linear-gradient(to bottom, transparent, var(--surface-weak)), - linear-gradient(to bottom, transparent, var(--surface-weak)); - pointer-events: none; - } - - [data-component="user-message"] - [data-slot="user-message-text"] - [data-slot="user-message-expand"] { - display: none; - position: absolute; - bottom: 6px; - right: 6px; - padding: 0; - } - - [data-component="user-message"][data-can-expand="true"] - [data-slot="user-message-text"] - [data-slot="user-message-expand"], - [data-component="user-message"][data-expanded="true"] - [data-slot="user-message-text"] - [data-slot="user-message-expand"] { - display: inline-flex; - align-items: center; - justify-content: center; - height: 22px; - width: 22px; - border: none; - border-radius: 6px; - background: transparent; - cursor: pointer; - color: var(--text-weak); - } - - [data-component="user-message"] - [data-slot="user-message-text"] - [data-slot="user-message-expand"]:hover { - background: var(--surface-raised-base); - color: var(--text-base); - } - - [data-slot="session-turn-user-badges"] { - display: flex; - align-items: center; - gap: 6px; - padding-left: 16px; - } - - [data-slot="session-turn-message-title"] { - width: 100%; - font-size: var(--font-size-large); - font-weight: 500; - color: var(--text-strong); - overflow: hidden; - text-overflow: ellipsis; - min-width: 0; - white-space: nowrap; - } - - [data-slot="session-turn-message-title"] h1 { - overflow: hidden; - text-overflow: ellipsis; - min-width: 0; - white-space: nowrap; - font-size: inherit; - font-weight: inherit; - } - - [data-slot="session-turn-typewriter"] { - overflow: hidden; - text-overflow: ellipsis; - min-width: 0; - white-space: nowrap; - } - - [data-slot="session-turn-summary-section"] { - width: 100%; - display: flex; - flex-direction: column; - gap: 24px; - align-items: flex-start; - align-self: stretch; - } - - [data-slot="session-turn-summary-header"] { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 4px; - align-self: stretch; - - [data-slot="session-turn-response"] { - position: relative; - width: 100%; - } - - [data-slot="session-turn-response-copy-wrapper"] { - position: absolute; - top: 8px; - right: 8px; - opacity: 0; - transition: opacity 0.15s ease; - z-index: 1; - } - - [data-slot="session-turn-response"]:hover - [data-slot="session-turn-response-copy-wrapper"] { - opacity: 1; - } - - p { - font-size: var(--font-size-base); - line-height: var(--line-height-x-large); - } - } - - [data-slot="session-turn-summary-title"] { - font-size: 13px; - /* text-12-medium */ - font-weight: 500; - color: var(--text-weak); - } - - [data-slot="session-turn-markdown"], - [data-slot="session-turn-accordion"] [data-slot="accordion-content"] { - -webkit-user-select: text; - user-select: text; - } - - [data-slot="session-turn-markdown"] { - &[data-diffs="true"] { - font-size: 15px; - } - - &[data-fade="true"] > * { - animation: fadeUp 0.4s ease-out forwards; - opacity: 0; - - &:nth-child(1) { - animation-delay: 0.1s; - } - - &:nth-child(2) { - animation-delay: 0.2s; - } - - &:nth-child(3) { - animation-delay: 0.3s; - } - - &:nth-child(4) { - animation-delay: 0.4s; - } - - &:nth-child(5) { - animation-delay: 0.5s; - } - - &:nth-child(6) { - animation-delay: 0.6s; - } - - &:nth-child(7) { - animation-delay: 0.7s; - } - - &:nth-child(8) { - animation-delay: 0.8s; - } - - &:nth-child(9) { - animation-delay: 0.9s; - } - - &:nth-child(10) { - animation-delay: 1s; - } - - &:nth-child(11) { - animation-delay: 1.1s; - } - - &:nth-child(12) { - animation-delay: 1.2s; - } - - &:nth-child(13) { - animation-delay: 1.3s; - } - - &:nth-child(14) { - animation-delay: 1.4s; - } - - &:nth-child(15) { - animation-delay: 1.5s; - } - - &:nth-child(16) { - animation-delay: 1.6s; - } - - &:nth-child(17) { - animation-delay: 1.7s; - } - - &:nth-child(18) { - animation-delay: 1.8s; - } - - &:nth-child(19) { - animation-delay: 1.9s; - } - - &:nth-child(20) { - animation-delay: 2s; - } - - &:nth-child(21) { - animation-delay: 2.1s; - } - - &:nth-child(22) { - animation-delay: 2.2s; - } - - &:nth-child(23) { - animation-delay: 2.3s; - } - - &:nth-child(24) { - animation-delay: 2.4s; - } - - &:nth-child(25) { - animation-delay: 2.5s; - } - - &:nth-child(26) { - animation-delay: 2.6s; - } - - &:nth-child(27) { - animation-delay: 2.7s; - } - - &:nth-child(28) { - animation-delay: 2.8s; - } - - &:nth-child(29) { - animation-delay: 2.9s; - } - - &:nth-child(30) { - animation-delay: 3s; - } - } - } - - [data-slot="session-turn-summary-section"] { - position: relative; - - [data-slot="session-turn-summary-copy"] { - position: absolute; - top: 0; - right: 0; - opacity: 0; - transition: opacity 0.15s ease; - } - - &:hover [data-slot="session-turn-summary-copy"] { - opacity: 1; - } - } - - [data-slot="session-turn-accordion"] { - width: 100%; - } - - [data-component="sticky-accordion-header"] { - top: var(--sticky-header-height, 0px); - - &[data-expanded]::before { - top: calc(-1 * var(--sticky-header-height, 0px)); - } - } - - [data-slot="session-turn-accordion-trigger-content"] { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - gap: 20px; - - [data-expandable="false"] { - pointer-events: none; - } - } - - [data-slot="session-turn-file-info"] { - flex-grow: 1; - display: flex; - align-items: center; - gap: 20px; - min-width: 0; - } - - [data-slot="session-turn-file-icon"] { - flex-shrink: 0; - width: 16px; - height: 16px; - } - - [data-slot="session-turn-file-path"] { - display: flex; - flex-grow: 1; - min-width: 0; - } - - [data-slot="session-turn-directory"] { - color: var(--text-base); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - direction: rtl; - text-align: left; - } - - [data-slot="session-turn-filename"] { - color: var(--text-strong); - flex-shrink: 0; - } - - [data-slot="session-turn-accordion-actions"] { - flex-shrink: 0; - display: flex; - gap: 16px; - align-items: center; - justify-content: flex-end; - color: var(--icon-base); - } - - [data-slot="session-turn-accordion-content"] { - max-height: 240px; - /* max-h-60 */ - overflow-y: auto; - scrollbar-width: none; - } - - [data-slot="session-turn-accordion-content"]::-webkit-scrollbar { - display: none; - } - - [data-slot="session-turn-response-section"] { - width: calc(100% + 9px); - min-width: 0; - margin-left: -9px; - padding-left: 9px; - } - - [data-slot="session-turn-collapsible"] { - gap: 32px; - overflow: visible; - } - - [data-slot="session-turn-collapsible-trigger-content"] { - max-width: 100%; - display: flex; - align-items: center; - gap: 8px; - color: var(--text-weak); - - [data-slot="session-turn-trigger-icon"] { - color: var(--icon-base); - } - - [data-component="spinner"] { - width: 12px; - height: 12px; - margin-right: 4px; - } - - [data-component="icon"] { - width: 14px; - height: 14px; - } - } - - [data-slot="session-turn-retry-message"] { - font-weight: 500; - color: var(--syntax-critical); - } - - [data-slot="session-turn-retry-seconds"] { - color: var(--text-weak); - } - - [data-slot="session-turn-retry-attempt"] { - color: var(--text-weak); - } - - [data-slot="session-turn-status-text"] { - overflow: hidden; - text-overflow: ellipsis; - } - - [data-slot="session-turn-details-text"] { - font-size: 13px; - /* text-12-medium */ - font-weight: 500; - } - - .error-card { - color: var(--text-on-critical-base); - max-height: 240px; - overflow-y: auto; - } - - [data-slot="session-turn-collapsible-content-inner"] { - width: 100%; - min-width: 0; - display: flex; - flex-direction: column; - align-self: stretch; - gap: 12px; - margin-left: 12px; - padding-left: 12px; - padding-right: 12px; - border-left: 1px solid var(--border-base); - - > :first-child > [data-component="markdown"]:first-child { - margin-top: 0; - } - } - - [data-slot="session-turn-permission-parts"] { - width: 100%; - min-width: 0; - display: flex; - flex-direction: column; - gap: 12px; - } + --session-turn-sticky-height: 0px; + --sticky-header-height: calc(var(--session-title-height, 0px) + var(--session-turn-sticky-height, 0px) + 24px); + /* flex: 1; */ + height: 100%; + min-height: 0; + min-width: 0; + display: flex; + align-items: flex-start; + justify-content: flex-start; + + [data-slot="session-turn-content"] { + flex-grow: 1; + width: 100%; + height: 100%; + min-width: 0; + overflow-y: auto; + scrollbar-width: none; + } + + [data-slot="session-turn-content"]::-webkit-scrollbar { + display: none; + } + + [data-slot="session-turn-message-container"] { + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + min-width: 0; + gap: 18px; + overflow-anchor: none; + + [data-slot="session-turn-badge"] { + display: inline-flex; + align-items: center; + padding: 2px 6px; + border-radius: 4px; + font-family: var(--font-family-mono); + font-size: var(--font-size-x-small); + font-weight: var(--font-weight-medium); + line-height: var(--line-height-normal); + white-space: nowrap; + color: var(--text-base); + background: var(--surface-raised-base); + } + } + + [data-slot="session-turn-attachments"] { + width: 100%; + min-width: 0; + align-self: stretch; + } + + [data-slot="session-turn-sticky"] { + width: calc(100% + 9px); + position: sticky; + top: var(--session-title-height, 0px); + z-index: 20; + background-color: var(--background-stronger); + margin-left: -9px; + padding-left: 9px; + /* padding-bottom: 12px; */ + display: flex; + flex-direction: column; + gap: 12px; + + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: var(--background-stronger); + z-index: -1; + } + + &::after { + content: ""; + position: absolute; + top: 100%; + left: 0; + right: 0; + height: 32px; + background: linear-gradient(to bottom, var(--background-stronger), transparent); + pointer-events: none; + } + } + + [data-slot="session-turn-message-header"] { + display: flex; + align-items: center; + align-self: stretch; + height: 32px; + } + + [data-slot="session-turn-message-content"] { + margin-top: 0; + max-width: 100%; + } + + [data-component="user-message"] [data-slot="user-message-text"] { + max-height: var(--user-message-collapsed-height, 64px); + transition: max-height 200ms cubic-bezier(0.25, 0, 0.5, 1); + } + + [data-component="user-message"][data-expanded="true"] [data-slot="user-message-text"] { + max-height: 2000px; + } + + [data-component="user-message"][data-can-expand="true"] [data-slot="user-message-text"] { + padding-right: 36px; + padding-bottom: 28px; + } + + [data-component="user-message"][data-can-expand="true"]:not([data-expanded="true"]) + [data-slot="user-message-text"]::after { + content: ""; + position: absolute; + left: 0; + right: 0; + height: 8px; + bottom: 0px; + background: + linear-gradient(to bottom, transparent, var(--surface-weak)), + linear-gradient(to bottom, transparent, var(--surface-weak)); + pointer-events: none; + } + + [data-component="user-message"] [data-slot="user-message-text"] [data-slot="user-message-expand"] { + display: none; + position: absolute; + bottom: 6px; + right: 6px; + padding: 0; + } + + [data-component="user-message"][data-can-expand="true"] + [data-slot="user-message-text"] + [data-slot="user-message-expand"], + [data-component="user-message"][data-expanded="true"] + [data-slot="user-message-text"] + [data-slot="user-message-expand"] { + display: inline-flex; + align-items: center; + justify-content: center; + height: 22px; + width: 22px; + border: none; + border-radius: 6px; + background: transparent; + cursor: pointer; + color: var(--text-weak); + } + + [data-component="user-message"] [data-slot="user-message-text"] [data-slot="user-message-expand"]:hover { + background: var(--surface-raised-base); + color: var(--text-base); + } + + [data-slot="session-turn-user-badges"] { + display: flex; + align-items: center; + gap: 6px; + padding-left: 16px; + } + + [data-slot="session-turn-message-title"] { + width: 100%; + font-size: var(--font-size-large); + font-weight: 500; + color: var(--text-strong); + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; + white-space: nowrap; + } + + [data-slot="session-turn-message-title"] h1 { + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; + white-space: nowrap; + font-size: inherit; + font-weight: inherit; + } + + [data-slot="session-turn-typewriter"] { + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; + white-space: nowrap; + } + + [data-slot="session-turn-summary-section"] { + width: 100%; + display: flex; + flex-direction: column; + gap: 24px; + align-items: flex-start; + align-self: stretch; + } + + [data-slot="session-turn-summary-header"] { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + align-self: stretch; + + [data-slot="session-turn-response"] { + position: relative; + width: 100%; + } + + [data-slot="session-turn-response-copy-wrapper"] { + position: absolute; + top: 8px; + right: 8px; + opacity: 0; + transition: opacity 0.15s ease; + z-index: 1; + } + + [data-slot="session-turn-response"]:hover [data-slot="session-turn-response-copy-wrapper"] { + opacity: 1; + } + + p { + font-size: var(--font-size-base); + line-height: var(--line-height-x-large); + } + } + + [data-slot="session-turn-summary-title"] { + font-size: 13px; + /* text-12-medium */ + font-weight: 500; + color: var(--text-weak); + } + + [data-slot="session-turn-markdown"], + [data-slot="session-turn-accordion"] [data-slot="accordion-content"] { + -webkit-user-select: text; + user-select: text; + } + + [data-slot="session-turn-markdown"] { + &[data-diffs="true"] { + font-size: 15px; + } + + &[data-fade="true"] > * { + animation: fadeUp 0.4s ease-out forwards; + opacity: 0; + + &:nth-child(1) { + animation-delay: 0.1s; + } + + &:nth-child(2) { + animation-delay: 0.2s; + } + + &:nth-child(3) { + animation-delay: 0.3s; + } + + &:nth-child(4) { + animation-delay: 0.4s; + } + + &:nth-child(5) { + animation-delay: 0.5s; + } + + &:nth-child(6) { + animation-delay: 0.6s; + } + + &:nth-child(7) { + animation-delay: 0.7s; + } + + &:nth-child(8) { + animation-delay: 0.8s; + } + + &:nth-child(9) { + animation-delay: 0.9s; + } + + &:nth-child(10) { + animation-delay: 1s; + } + + &:nth-child(11) { + animation-delay: 1.1s; + } + + &:nth-child(12) { + animation-delay: 1.2s; + } + + &:nth-child(13) { + animation-delay: 1.3s; + } + + &:nth-child(14) { + animation-delay: 1.4s; + } + + &:nth-child(15) { + animation-delay: 1.5s; + } + + &:nth-child(16) { + animation-delay: 1.6s; + } + + &:nth-child(17) { + animation-delay: 1.7s; + } + + &:nth-child(18) { + animation-delay: 1.8s; + } + + &:nth-child(19) { + animation-delay: 1.9s; + } + + &:nth-child(20) { + animation-delay: 2s; + } + + &:nth-child(21) { + animation-delay: 2.1s; + } + + &:nth-child(22) { + animation-delay: 2.2s; + } + + &:nth-child(23) { + animation-delay: 2.3s; + } + + &:nth-child(24) { + animation-delay: 2.4s; + } + + &:nth-child(25) { + animation-delay: 2.5s; + } + + &:nth-child(26) { + animation-delay: 2.6s; + } + + &:nth-child(27) { + animation-delay: 2.7s; + } + + &:nth-child(28) { + animation-delay: 2.8s; + } + + &:nth-child(29) { + animation-delay: 2.9s; + } + + &:nth-child(30) { + animation-delay: 3s; + } + } + } + + [data-slot="session-turn-summary-section"] { + position: relative; + + [data-slot="session-turn-summary-copy"] { + position: absolute; + top: 0; + right: 0; + opacity: 0; + transition: opacity 0.15s ease; + } + + &:hover [data-slot="session-turn-summary-copy"] { + opacity: 1; + } + } + + [data-slot="session-turn-accordion"] { + width: 100%; + } + + [data-component="sticky-accordion-header"] { + top: var(--sticky-header-height, 0px); + + &[data-expanded]::before { + top: calc(-1 * var(--sticky-header-height, 0px)); + } + } + + [data-slot="session-turn-accordion-trigger-content"] { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + gap: 20px; + + [data-expandable="false"] { + pointer-events: none; + } + } + + [data-slot="session-turn-file-info"] { + flex-grow: 1; + display: flex; + align-items: center; + gap: 20px; + min-width: 0; + } + + [data-slot="session-turn-file-icon"] { + flex-shrink: 0; + width: 16px; + height: 16px; + } + + [data-slot="session-turn-file-path"] { + display: flex; + flex-grow: 1; + min-width: 0; + } + + [data-slot="session-turn-directory"] { + color: var(--text-base); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + direction: rtl; + text-align: left; + } + + [data-slot="session-turn-filename"] { + color: var(--text-strong); + flex-shrink: 0; + } + + [data-slot="session-turn-accordion-actions"] { + flex-shrink: 0; + display: flex; + gap: 16px; + align-items: center; + justify-content: flex-end; + color: var(--icon-base); + } + + [data-slot="session-turn-accordion-content"] { + max-height: 240px; + /* max-h-60 */ + overflow-y: auto; + scrollbar-width: none; + } + + [data-slot="session-turn-accordion-content"]::-webkit-scrollbar { + display: none; + } + + [data-slot="session-turn-response-section"] { + width: calc(100% + 9px); + min-width: 0; + margin-left: -9px; + padding-left: 9px; + } + + [data-slot="session-turn-collapsible"] { + gap: 32px; + overflow: visible; + } + + [data-slot="session-turn-collapsible-trigger-content"] { + max-width: 100%; + display: flex; + align-items: center; + gap: 8px; + color: var(--text-weak); + + [data-slot="session-turn-trigger-icon"] { + color: var(--icon-base); + } + + [data-component="spinner"] { + width: 12px; + height: 12px; + margin-right: 4px; + } + + [data-component="icon"] { + width: 14px; + height: 14px; + } + } + + [data-slot="session-turn-retry-message"] { + font-weight: 500; + color: var(--syntax-critical); + } + + [data-slot="session-turn-retry-seconds"] { + color: var(--text-weak); + } + + [data-slot="session-turn-retry-attempt"] { + color: var(--text-weak); + } + + [data-slot="session-turn-status-text"] { + overflow: hidden; + text-overflow: ellipsis; + } + + [data-slot="session-turn-details-text"] { + font-size: 13px; + /* text-12-medium */ + font-weight: 500; + } + + .error-card { + color: var(--text-on-critical-base); + max-height: 240px; + overflow-y: auto; + } + + [data-slot="session-turn-collapsible-content-inner"] { + width: 100%; + min-width: 0; + display: flex; + flex-direction: column; + align-self: stretch; + gap: 12px; + margin-left: 12px; + padding-left: 12px; + padding-right: 12px; + border-left: 1px solid var(--border-base); + + > :first-child > [data-component="markdown"]:first-child { + margin-top: 0; + } + } + + [data-slot="session-turn-permission-parts"] { + width: 100%; + min-width: 0; + display: flex; + flex-direction: column; + gap: 12px; + } } |
