@theia/ai-chat-ui 1.55.1 → 1.57.0-next.112

package/src/browser/style/index.css

@@ -132,6 +132,20 @@ div:last-child > .theia-ChatNode {
   font-size: var(--theia-code-font-size);
 }
 
+.theia-RequestNode > p div {
+  display: inline;
+}
+
+.theia-RequestNode .theia-RequestNode-AgentLabel,
+.theia-RequestNode .theia-RequestNode-VariableLabel {
+  padding: calc(var(--theia-ui-padding) * 2 / 3);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  border-radius: calc(var(--theia-ui-padding) * 2 / 3);
+  background: var(--theia-badge-background);
+  color: var(--theia-badge-foreground);
+}
+
 .chat-input-widget {
   align-items: flex-end;
   display: flex;
@@ -139,50 +153,191 @@ div:last-child > .theia-ChatNode {
 }
 
 .theia-ChatInput {
+  margin-top: 16px;
   position: relative;
   width: 100%;
   box-sizing: border-box;
   gap: 4px;
 }
 
-.theia-ChatInput-Editor-Box {
-  margin-bottom: 2px;
-  padding: 10px;
+.theia-ChatInput-ChangeSet-Box {
+  margin: 0 16px -5px 16px;
+  padding: 2px;
+  padding-bottom: 12px;
   height: auto;
+  border: var(--theia-border-width) solid var(--theia-dropdown-border);
+  border-radius: 4px 4px 0 0;
+  background-color: var(--theia-activityBar-background);
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
+}
+
+.theia-ChatInput-ChangeSet-Header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 4px;
+}
+
+.theia-ChatInput-ChangeSet-Box h3 {
+  font-size: 12px;
+  color: var(--theia-disabledForeground);
+  padding-top: 0;
+  margin: 0;
+  display: flex;
+}
+
+.theia-ChatInput-ChangeSet-Header-Actions button {
+  font-size: 12px;
+  padding: 2px 4px;
+  min-width: 40px;
+  margin-left: 6px;
+}
+
+.theia-ChatInput-ChangeSet-List ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 4px;
+}
+
+.theia-ChatInput-ChangeSet-List ul li {
+  display: flex;
+  flex-direction: row;
+  line-height: 18px;
+  padding: 0;
+  padding-top: 2px;
+  margin: 0 2px 2px 0px;
+  border-radius: 4px;
+  position: relative;
+}
+
+.theia-ChatInput-ChangeSet-List ul li:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-ChatInput-ChangeSet-Actions {
+  display: none;
+  position: absolute;
+  right: 8px;
+  top: 2px;
+  gap: 4px;
+}
+
+.theia-ChatInput-ChangeSet-List ul {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.theia-ChatInput-ChangeSet-List ul li {
+  cursor: pointer;
+}
+
+.theia-ChatInput-ChangeSet-List ul li:hover .theia-ChatInput-ChangeSet-Actions {
+  display: flex;
+}
+
+.theia-ChatInput-ChangeSet-List .theia-ChatInput-ChangeSet-Icon {
+  padding-left: 2px;
+  padding-right: 4px;
+  min-width: var(--theia-icon-size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.theia-ChatInput-ChangeSet-List .theia-ChatInput-ChangeSet-Icon::before {
+  text-align: center;
+  margin-right: 4px;
+  font-size: calc(var(--theia-content-font-size) * 0.8);
+}
+
+.theia-ChatInput-ChangeSet-List
+  .theia-ChatInput-ChangeSet-Icon.codicon::before {
+  font-size: var(--theia-ui-font-size1);
+}
+
+.theia-ChatInput-ChangeSet-Actions .action {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.theia-ChatInput-ChangeSet-additionalInfo {
+  margin-left: 8px;
+  color: var(--theia-disabledForeground);
+}
+
+.theia-ChatInput-ChangeSet-title {
+  white-space: nowrap;
+  overflow: visible;
+}
+
+.theia-ChatInput-ChangeSet-Header-Actions,
+.theia-ChatInput-ChangeSet-Box h3,
+.theia-ChatInput-ChangeSet-additionalInfo {
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.theia-ChatInput-Editor {
-  width: 100%;
+.theia-ChatInput-ChangeSet-Header-Actions .codicon.action {
+  font-size: 18px;
+  height: 20px;
+  vertical-align: middle;
+  margin-left: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.theia-ChatInput-ChangeSet-Header-Actions .codicon.action:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-ChatInput-ChangeSet-title.rejected {
+  text-decoration: line-through;
+}
+
+.theia-ChatInput-ChangeSet-title.add.pending {
+  color: var(--theia-charts-green);
+}
+.theia-ChatInput-ChangeSet-title.modify.pending {
+  color: var(--theia-charts-orange);
+}
+.theia-ChatInput-ChangeSet-title.delete.pending {
+  color: var(--theia-charts-red);
+}
+
+.theia-ChatInput-Editor-Box {
+  margin: 0 16px 16px 16px;
+  padding: 2px;
   height: auto;
   border: var(--theia-border-width) solid var(--theia-dropdown-border);
   border-radius: 4px;
+  background-color: var(--theia-editor-background);
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
+  justify-content: flex-end;
   overflow: hidden;
 }
 
-.theia-ChatInput-Editor:has(.monaco-editor.focused) {
+.theia-ChatInput-Editor-Box:has(.monaco-editor.focused) {
   border-color: var(--theia-focusBorder);
 }
 
-.theia-ChatInput-Editor .monaco-editor {
-  display: flex;
+.theia-ChatInput-Editor {
   width: 100%;
-  height: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column-reverse;
   overflow: hidden;
+  transition: height 0.05s ease-in-out;
   position: relative;
 }
 
 .theia-ChatInput-Editor-Placeholder {
   position: absolute;
-  top: -3px;
-  left: 19px;
+  top: 9px;
+  left: 8px;
   right: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
   color: var(--theia-descriptionForeground);
@@ -194,6 +349,14 @@ div:last-child > .theia-ChatNode {
   display: none;
 }
 
+.theia-ChatInput-Editor .monaco-editor {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
 .theia-ChatInput-Editor .monaco-editor .margin,
 .theia-ChatInput-Editor .monaco-editor .monaco-editor-background,
 .theia-ChatInput-Editor .monaco-editor .inputarea.ime-input {
@@ -201,36 +364,52 @@ div:last-child > .theia-ChatNode {
 }
 
 .theia-ChatInputOptions {
-  position: absolute;
-  bottom: 31px;
-  right: 26px;
-  width: 10px;
-  height: 10px;
+  width: 100%;
+  height: 25px;
+  padding-left: 6px;
+  padding-right: 6px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.theia-ChatInputOptions .theia-ChatInputOptions-left,
+.theia-ChatInputOptions .theia-ChatInputOptions-right {
+  display: flex;
+}
+.theia-ChatInputOptions .theia-ChatInputOptions-right {
+  margin-right: 12px;
 }
 
 .theia-ChatInputOptions .option {
   width: 21px;
   height: 21px;
-  margin-top: 2px;
+  padding: 2px;
   display: inline-block;
   box-sizing: border-box;
   user-select: none;
   background-repeat: no-repeat;
   background-position: center;
+  border-radius: 5px;
   border: var(--theia-border-width) solid transparent;
-  opacity: 0.7;
   cursor: pointer;
 }
 
+.theia-ChatInputOptions .option.disabled {
+  cursor: default;
+  opacity: var(--theia-mod-disabled-opacity);
+  pointer-events: none;
+}
+
 .theia-ChatInputOptions .option:hover {
   opacity: 1;
+  background-color: var(--theia-toolbar-hoverBackground);
 }
 
 .theia-CodePartRenderer-root {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  border: 1px solid var(--theia-input-border);
+  border: var(--theia-border-width) solid var(--theia-input-border);
   border-radius: 4px;
 }
 
@@ -264,6 +443,33 @@ div:last-child > .theia-ChatNode {
   background-color: var(--theia-input-border);
 }
 
+.theia-QuestionPartRenderer-root {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: var(--theia-border-width) solid
+    var(--theia-sideBarSectionHeader-border);
+  padding: 8px 12px 12px;
+  border-radius: 5px;
+  margin: 0 0 8px 0;
+}
+.theia-QuestionPartRenderer-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.theia-QuestionPartRenderer-option {
+  min-width: 100px;
+  flex: 1 1 auto;
+  margin: 0;
+}
+.theia-QuestionPartRenderer-option.selected:disabled:hover {
+  background-color: var(--theia-button-disabledBackground);
+}
+.theia-QuestionPartRenderer-option:disabled:not(.selected) {
+  background-color: var(--theia-button-secondaryBackground);
+}
+
 .theia-toolCall {
   font-weight: normal;
   color: var(--theia-descriptionForeground);
@@ -288,6 +494,21 @@ div:last-child > .theia-ChatNode {
   overflow: auto;
 }
 
+.collapsible-arguments {
+  display: inline-block;
+}
+
+.collapsible-arguments .collapsible-arguments-summary {
+  display: inline-block;
+  white-space: nowrap;
+  text-decoration: underline;
+}
+
+details[open].collapsible-arguments,
+details[open].collapsible-arguments .collapsible-arguments-summary {
+  display: unset;
+}
+
 .theia-ResponseNode-ProgressMessage {
   font-weight: normal;
   color: var(--theia-descriptionForeground);