TokenTrace / client /src /css /pages /chat.scss
cccmmd
init: TokenTrace - LLM interpretability toolbox
76b5743
Raw
History Blame Contribute Delete
2.6 kB
// Chat 页:共用左栏见 _chat-input-panel.scss;此处仅右栏续写栈与 Chat 专有控件
@use 'app-pages';
@use '../base/narrow-ios-form-font-tail' as ios-form-font;
@use 'chat-input-panel';
@use 'breakpoints' as *;
@use 'generation-status';
@use 'tool-calling-pending' as tcp;
@use 'lmf-readout' as lmf;
// 双实例:与下方 LMF 视觉上同一阅读区(同色、同字号行高、单一内边距,无分隔缝)
.chat-right-stack {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
width: 100%;
box-sizing: border-box;
background: var(--text-area-bg);
color: var(--text-color);
padding: 20px;
overflow: visible;
position: relative;
}
.chat-readout-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
// 为右下角 Copy 按钮留白,避免挡住末行
padding-bottom: 2.5rem;
}
.chat-right-stack .semantic-debug-info {
background-color: var(--panel-bg);
}
.chat-segments-container {
flex: 0 0 auto;
display: flex;
flex-direction: column;
}
.chat-segment-input-text {
@include lmf.lmf-readout-text;
margin: 0;
padding: 0;
border: none;
background: transparent;
color: var(--token-truncated-color);
white-space: pre-wrap;
word-break: break-word;
font-family: inherit;
&.tool-calling-pending-text {
@include tcp.tool-calling-pending-text;
}
}
.chat-segment-output {
min-height: 0;
}
.chat-segment-output-host {
min-height: 0;
}
.chat-segment-output-host .LMF {
padding: 0;
// 多段连续阅读区:覆盖全局 min-height:350px,高度随续写内容收缩
min-height: 0;
}
.chat-streaming-preview {
@include lmf.lmf-readout-text;
flex: 0 0 auto;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: transparent;
}
:root[data-theme='dark'] {
.chat-segment-input-text,
.chat-streaming-preview {
font-weight: 300;
}
}
.chat-copy-fulltext-btn {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 50;
background-color: var(--text-area-bg);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
:root[data-theme='dark'] .chat-copy-fulltext-btn {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
@media (max-width: $breakpoint-mobile) {
.chat-right-stack {
padding: 15px 12px;
}
.chat-copy-fulltext-btn {
right: 12px;
bottom: 15px;
}
.chat-segment-output-host .LMF.minimap-enabled {
padding-right: calc(12px + var(--minimap-width));
}
}
// 保持在本文件末尾;说明见 responsive.narrow-ios-form-font
@include ios-form-font.apply;