mirror of
https://github.com/microsoft/vscode.git
synced 2026-02-15 07:28:05 +00:00
clean up css + fix questions carousel reload (#295084)
* clean up css + fix questions carousel reload * fix hygeinee
This commit is contained in:
Justin Chen
GitHub
@@ -3,7 +3,21 @@
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.chat-question-carousel-container {
|
||||
/* question carousel - this is above edits and todos */
|
||||
.interactive-session .interactive-input-part > .chat-question-carousel-widget-container:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* input specific styling */
|
||||
.interactive-session .interactive-input-part > .chat-question-carousel-widget-container .chat-question-carousel-container {
|
||||
margin: 0;
|
||||
border: 1px solid var(--vscode-input-border, transparent);
|
||||
background-color: var(--vscode-editor-background);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* general questions styling */
|
||||
.interactive-session .chat-question-carousel-container {
|
||||
margin: 8px 0;
|
||||
border: 1px solid var(--vscode-chat-requestBorder);
|
||||
border-radius: 4px;
|
||||
@@ -13,474 +27,373 @@
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.chat-question-carousel-summary {
|
||||
/* container and header */
|
||||
.interactive-session .interactive-input-part > .chat-question-carousel-widget-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.chat-question-carousel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--vscode-chat-requestBackground);
|
||||
padding: 8px 16px 10px 16px;
|
||||
overflow: hidden;
|
||||
|
||||
.chat-question-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding-bottom: 5px;
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
border-bottom: 1px solid var(--vscode-chat-requestBorder);
|
||||
|
||||
.chat-question-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
font-weight: 500;
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
margin: 0;
|
||||
|
||||
.chat-question-title-main {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chat-question-title-subtitle {
|
||||
font-weight: normal;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-question-close-container {
|
||||
flex-shrink: 0;
|
||||
|
||||
.monaco-button.chat-question-close {
|
||||
min-width: 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent !important;
|
||||
color: var(--vscode-foreground) !important;
|
||||
}
|
||||
|
||||
.monaco-button.chat-question-close:hover:not(.disabled) {
|
||||
background: var(--vscode-toolbar-hoverBackground) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* questions list and freeform area */
|
||||
.interactive-session .interactive-input-part > .chat-question-carousel-widget-container .chat-question-input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.chat-question-summary-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0;
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
}
|
||||
|
||||
.chat-question-summary-label {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.chat-question-summary-label::after {
|
||||
content: ': ';
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.chat-question-summary-answer-title {
|
||||
color: var(--vscode-foreground);
|
||||
font-weight: 600;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.chat-question-summary-answer-desc {
|
||||
color: var(--vscode-foreground);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.chat-question-summary-skipped {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
font-style: italic;
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
}
|
||||
|
||||
.chat-question-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
min-width: 0;
|
||||
padding-bottom: 5px;
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
border-bottom: 1px solid var(--vscode-chat-requestBorder);
|
||||
|
||||
/* some hackiness to get the focus looking right */
|
||||
.chat-question-list-item:focus:not(.selected),
|
||||
.chat-question-list:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.chat-question-list:focus-visible {
|
||||
outline: 1px solid var(--vscode-focusBorder);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.chat-question-list:focus-within .chat-question-list-item.selected {
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
outline-offset: -1px;
|
||||
outline-color: var(--vscode-focusBorder);
|
||||
}
|
||||
|
||||
.chat-question-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
outline: none;
|
||||
padding: 4px 0;
|
||||
|
||||
.chat-question-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 3px 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
|
||||
.chat-question-list-indicator {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.chat-question-list-indicator.codicon-check {
|
||||
color: var(--vscode-list-activeSelectionForeground, var(--vscode-foreground));
|
||||
}
|
||||
|
||||
/* Label in list item */
|
||||
.chat-question-list-label {
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-question-list-label-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chat-question-list-label-desc {
|
||||
font-weight: normal;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-question-list-item:hover {
|
||||
background-color: var(--vscode-list-hoverBackground);
|
||||
}
|
||||
|
||||
/* Single-select: highlight entire row when selected */
|
||||
.chat-question-list-item.selected {
|
||||
background-color: var(--vscode-list-activeSelectionBackground);
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
|
||||
.chat-question-label {
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
}
|
||||
|
||||
.chat-question-list-label-desc {
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.chat-question-list-indicator.codicon-check {
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
}
|
||||
|
||||
.chat-question-list-number {
|
||||
background-color: transparent;
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
border-color: var(--vscode-list-activeSelectionForeground);
|
||||
border-bottom-color: var(--vscode-list-activeSelectionForeground);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-question-list-item.selected:hover {
|
||||
background-color: var(--vscode-list-activeSelectionBackground);
|
||||
}
|
||||
|
||||
/* Checkbox for multi-select */
|
||||
.chat-question-list-checkbox {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-question-list-checkbox.monaco-custom-toggle {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-question-freeform {
|
||||
margin-left: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.chat-question-freeform-number {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
/* this is probably legacy too */
|
||||
.chat-question-freeform-label {
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.chat-question-freeform-textarea {
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
max-height: 200px;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--vscode-input-border, var(--vscode-chat-requestBorder));
|
||||
background-color: var(--vscode-input-background);
|
||||
color: var(--vscode-input-foreground);
|
||||
border-radius: 4px;
|
||||
resize: none;
|
||||
font-family: var(--vscode-chat-font-family, inherit);
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
box-sizing: border-box;
|
||||
overflow-y: hidden;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.chat-question-freeform-textarea:focus {
|
||||
outline: 1px solid var(--vscode-focusBorder);
|
||||
border-color: var(--vscode-focusBorder);
|
||||
}
|
||||
|
||||
.chat-question-freeform-textarea::placeholder {
|
||||
color: var(--vscode-input-placeholderForeground);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* todo: change to use keybinding service so we don't have to recreate this */
|
||||
.chat-question-list-number,
|
||||
.chat-question-freeform-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 14px;
|
||||
padding: 0px 4px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
background-color: var(--vscode-keybindingLabel-background);
|
||||
color: var(--vscode-keybindingLabel-foreground);
|
||||
border-color: var(--vscode-keybindingLabel-border);
|
||||
border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
|
||||
box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-question-header-row .chat-question-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Close button container in header */
|
||||
.chat-question-close-container {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-question-close-container .monaco-button.chat-question-close {
|
||||
min-width: 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent !important;
|
||||
color: var(--vscode-foreground) !important;
|
||||
}
|
||||
|
||||
.chat-question-close-container .monaco-button.chat-question-close:hover:not(.disabled) {
|
||||
background: var(--vscode-toolbar-hoverBackground) !important;
|
||||
}
|
||||
|
||||
/* Footer row with step indicator and navigation */
|
||||
.chat-question-footer-row {
|
||||
/* footer with step indicator and nav buttons */
|
||||
.interactive-session .interactive-input-part > .chat-question-carousel-widget-container .chat-question-footer-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 16px;
|
||||
border-top: 1px solid var(--vscode-chat-requestBorder);
|
||||
background: var(--vscode-chat-requestBackground);
|
||||
}
|
||||
|
||||
/* Step indicator (e.g., "2/4") */
|
||||
.chat-question-step-indicator {
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
.chat-question-step-indicator {
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.chat-question-carousel-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
.chat-question-carousel-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.chat-question-nav-arrows {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.chat-question-nav-arrows {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow {
|
||||
min-width: 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow {
|
||||
min-width: 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Secondary buttons (prev, next) use gray secondary background */
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-prev,
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-next {
|
||||
background: var(--vscode-button-secondaryBackground) !important;
|
||||
color: var(--vscode-button-secondaryForeground) !important;
|
||||
}
|
||||
/* Secondary buttons (prev, next) use gray secondary background */
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-prev,
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-next {
|
||||
background: var(--vscode-button-secondaryBackground) !important;
|
||||
color: var(--vscode-button-secondaryForeground) !important;
|
||||
}
|
||||
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-prev:hover:not(.disabled),
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-next:hover:not(.disabled) {
|
||||
background: var(--vscode-button-secondaryHoverBackground) !important;
|
||||
}
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-prev:hover:not(.disabled),
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-next:hover:not(.disabled) {
|
||||
background: var(--vscode-button-secondaryHoverBackground) !important;
|
||||
}
|
||||
|
||||
/* Submit button (next on last question) uses primary background */
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-submit {
|
||||
background: var(--vscode-button-background) !important;
|
||||
color: var(--vscode-button-foreground) !important;
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
padding: 0 8px;
|
||||
}
|
||||
/* Submit button (next on last question) uses primary background */
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-submit {
|
||||
background: var(--vscode-button-background) !important;
|
||||
color: var(--vscode-button-foreground) !important;
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-submit:hover:not(.disabled) {
|
||||
background: var(--vscode-button-hoverBackground) !important;
|
||||
}
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-nav-submit:hover:not(.disabled) {
|
||||
background: var(--vscode-button-hoverBackground) !important;
|
||||
}
|
||||
|
||||
/* Close button uses transparent background */
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-close {
|
||||
background: transparent !important;
|
||||
color: var(--vscode-foreground) !important;
|
||||
}
|
||||
/* Close button uses transparent background */
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-close {
|
||||
background: transparent !important;
|
||||
color: var(--vscode-foreground) !important;
|
||||
}
|
||||
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-close:hover:not(.disabled) {
|
||||
background: var(--vscode-toolbar-hoverBackground) !important;
|
||||
}
|
||||
|
||||
.chat-question-carousel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--vscode-chat-requestBackground);
|
||||
padding: 8px 16px 10px 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-question-title {
|
||||
font-weight: 500;
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-question-title-main {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chat-question-title-subtitle {
|
||||
font-weight: normal;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.chat-question-message {
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
color: var(--vscode-foreground);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.chat-question-message p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chat-question-input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* List-style selection UI (similar to QuickPick) */
|
||||
.chat-question-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
outline: none;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.chat-question-list:focus-visible {
|
||||
outline: 1px solid var(--vscode-focusBorder);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.chat-question-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 3px 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.chat-question-list-item:hover {
|
||||
background-color: var(--vscode-list-hoverBackground);
|
||||
}
|
||||
|
||||
.interactive-input-part .chat-question-carousel-widget-container .chat-question-input-container {
|
||||
.chat-question-list-item:focus:not(.selected),
|
||||
.chat-question-list:focus {
|
||||
outline: none;
|
||||
.chat-question-carousel-nav .monaco-button.chat-question-nav-arrow.chat-question-close:hover:not(.disabled) {
|
||||
background: var(--vscode-toolbar-hoverBackground) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Single-select: highlight entire row when selected */
|
||||
.chat-question-list-item.selected {
|
||||
background-color: var(--vscode-list-activeSelectionBackground);
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
}
|
||||
|
||||
.chat-question-list:focus-within .chat-question-list-item.selected {
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
outline-offset: -1px;
|
||||
outline-color: var(--vscode-focusBorder);
|
||||
}
|
||||
|
||||
.chat-question-list-item.selected:hover {
|
||||
background-color: var(--vscode-list-activeSelectionBackground);
|
||||
}
|
||||
|
||||
/* todo: change to use keybinding service so we don't have to recreate this */
|
||||
.chat-question-list-number,
|
||||
.chat-question-freeform-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 14px;
|
||||
padding: 0px 4px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
background-color: var(--vscode-keybindingLabel-background);
|
||||
color: var(--vscode-keybindingLabel-foreground);
|
||||
border-color: var(--vscode-keybindingLabel-border);
|
||||
border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
|
||||
box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-question-freeform-number {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.chat-question-list-item.selected .chat-question-list-number {
|
||||
background-color: transparent;
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
border-color: var(--vscode-list-activeSelectionForeground);
|
||||
border-bottom-color: var(--vscode-list-activeSelectionForeground);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Selection indicator (checkmark) for single select - positioned on right */
|
||||
.chat-question-list-indicator {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.chat-question-list-indicator.codicon-check {
|
||||
color: var(--vscode-list-activeSelectionForeground, var(--vscode-foreground));
|
||||
}
|
||||
|
||||
.chat-question-list-item.selected .chat-question-list-indicator.codicon-check {
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
}
|
||||
|
||||
/* Checkbox for multi-select */
|
||||
.chat-question-list-checkbox {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-question-list-checkbox.monaco-custom-toggle {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Label in list item */
|
||||
.chat-question-list-label {
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
color: var(--vscode-foreground);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-question-list-label-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chat-question-list-label-desc {
|
||||
font-weight: normal;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.chat-question-list-item.selected .chat-question-list-label {
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
}
|
||||
|
||||
.chat-question-list-item.selected .chat-question-list-label-desc {
|
||||
color: var(--vscode-list-activeSelectionForeground);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Legacy styles for backwards compatibility (to be removed) */
|
||||
.chat-question-options {
|
||||
/* summary (after finished) */
|
||||
.interactive-session .chat-question-carousel-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-question-option {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 3px 0;
|
||||
min-width: 0;
|
||||
}
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.chat-question-option input[type="radio"],
|
||||
.chat-question-option input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
border: 1px solid var(--vscode-checkbox-border);
|
||||
background-color: var(--vscode-checkbox-background);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
outline: none;
|
||||
}
|
||||
.chat-question-summary-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0;
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
}
|
||||
|
||||
.chat-question-option input[type="radio"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.chat-question-summary-label {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.chat-question-option input[type="radio"]:checked,
|
||||
.chat-question-option input[type="checkbox"]:checked {
|
||||
background-color: var(--vscode-checkbox-selectBackground, var(--vscode-checkbox-background));
|
||||
}
|
||||
.chat-question-summary-label::after {
|
||||
content: ': ';
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.chat-question-option input[type="checkbox"]:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 6px;
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
border: solid var(--vscode-checkbox-foreground);
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.chat-question-summary-answer-title {
|
||||
color: var(--vscode-foreground);
|
||||
font-weight: 600;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.chat-question-option input[type="radio"]:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--vscode-checkbox-foreground);
|
||||
}
|
||||
.chat-question-summary-answer-desc {
|
||||
color: var(--vscode-foreground);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.chat-question-option input[type="radio"]:focus,
|
||||
.chat-question-option input[type="checkbox"]:focus {
|
||||
outline: 1px solid var(--vscode-focusBorder);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.chat-question-option input[type="radio"]:hover,
|
||||
.chat-question-option input[type="checkbox"]:hover {
|
||||
background-color: var(--vscode-inputOption-hoverBackground);
|
||||
}
|
||||
|
||||
.chat-question-option label {
|
||||
flex: 1;
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
color: var(--vscode-foreground);
|
||||
cursor: pointer;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
.chat-question-freeform {
|
||||
margin-left: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chat-question-freeform-label {
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.chat-question-freeform-textarea {
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
max-height: 200px;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--vscode-input-border, var(--vscode-chat-requestBorder));
|
||||
background-color: var(--vscode-input-background);
|
||||
color: var(--vscode-input-foreground);
|
||||
border-radius: 4px;
|
||||
resize: none;
|
||||
font-family: var(--vscode-chat-font-family, inherit);
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
box-sizing: border-box;
|
||||
overflow-y: hidden;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.chat-question-freeform-textarea:focus {
|
||||
outline: 1px solid var(--vscode-focusBorder);
|
||||
border-color: var(--vscode-focusBorder);
|
||||
}
|
||||
|
||||
.chat-question-freeform-textarea::placeholder {
|
||||
color: var(--vscode-input-placeholderForeground);
|
||||
.chat-question-summary-skipped {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
font-style: italic;
|
||||
font-size: var(--vscode-chat-font-size-body-s);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1935,6 +1935,17 @@ export class ChatWidget extends Disposable implements IChatWidget {
|
||||
this.container.setAttribute('data-session-id', model.sessionId);
|
||||
this.viewModel = this.instantiationService.createInstance(ChatViewModel, model, this._codeBlockModelCollection, undefined);
|
||||
|
||||
// mark any question carousels as used on reload
|
||||
for (const request of model.getRequests()) {
|
||||
if (request.response) {
|
||||
for (const part of request.response.entireResponse.value) {
|
||||
if (part.kind === 'questionCarousel' && !part.isUsed) {
|
||||
part.isUsed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pass input model reference to input part for state syncing
|
||||
this.inputPart.setInputModel(model.inputModel, model.getRequests().length === 0);
|
||||
this.listWidget.setViewModel(this.viewModel);
|
||||
|
||||
@@ -1077,23 +1077,6 @@ have to be updated for changes to the rules above, or to support more deeply nes
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* question carousel - this is above edits and todos */
|
||||
.interactive-session .interactive-input-part > .chat-question-carousel-widget-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.interactive-session .interactive-input-part > .chat-question-carousel-widget-container:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.interactive-session .interactive-input-part > .chat-question-carousel-widget-container .chat-question-carousel-container {
|
||||
margin: 0px;
|
||||
border: 1px solid var(--vscode-input-border, transparent);
|
||||
background-color: var(--vscode-editor-background);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Chat Todo List Widget Container - mirrors chat-editing-session styling */
|
||||
.interactive-session .interactive-input-part > .chat-todo-list-widget-container {
|
||||
margin-bottom: -4px;
|
||||
|
||||
Reference in New Issue
Block a user