@veltra/ai 2.0.0 → 2.1.1

package/dist/components/ai-chat/style2.css

@@ -16,27 +16,267 @@
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
 .u-ai-chat {
+  height: 100%;
+  min-height: 0;
+  font-size: var(--u-font-size-main-default);
+  color: var(--u-text-color-main);
+  background-color: var(--u-bg-color-bottom);
+}
+.u-ai-chat__main {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 var(--u-gap-default);
+}
+.u-ai-chat__main.is-empty::after {
+  content: "";
+  flex: 1;
+}
+.u-ai-chat.is-resizing {
+  cursor: col-resize;
+}
+.u-ai-chat.is-resizing .u-ai-chat__panel-body {
+  pointer-events: none;
+}
+.u-ai-chat__panel {
+  min-width: 0;
+  padding: var(--u-gap-small);
+  padding-left: calc(var(--u-gap-small) / 2);
+  box-sizing: border-box;
+  animation: u-ai-chat-panel-in 0.2s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .u-ai-chat__panel {
+    animation: none;
+  }
+}
+.u-ai-chat__panel-card {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
-  font-size: var(--u-font-size-main-default);
+  overflow: hidden;
+  border-radius: var(--u-radius-large);
+  background-color: var(--u-bg-color-top);
+  box-shadow: var(--u-shadow-sm);
+}
+@keyframes u-ai-chat-panel-in {
+  from {
+    transform: translateX(16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.u-ai-chat__panel-header {
+  flex: none;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--u-gap-small);
+  padding: var(--u-gap-default);
+  padding-bottom: var(--u-gap-small);
+}
+.u-ai-chat__panel-icon {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--u-radius-small);
+  background-color: var(--u-bg-color-middle);
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-ai-chat__panel-icon.is-active {
+  color: var(--u-color-primary);
+}
+.u-ai-chat__panel-icon.is-warning {
+  color: var(--u-color-warning);
+}
+.u-ai-chat__panel-icon.is-success {
+  color: var(--u-color-success);
+}
+.u-ai-chat__panel-icon.is-danger {
+  color: var(--u-color-danger);
+}
+.u-ai-chat__panel-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  color: var(--u-text-color-title);
+}
+.u-ai-chat__panel-close {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--u-text-color-assist);
+  transition: color 0.15s ease, background-color 0.15s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-ai-chat__panel-close:hover {
   color: var(--u-text-color-main);
+  background-color: var(--u-bg-color-hover);
+}
+.u-ai-chat__panel-body {
+  flex: 1;
+  min-height: 0;
+}
+.u-ai-chat__panel-fallback {
+  margin: 0;
+  padding: var(--u-gap-default);
+  font-family: var(--u-font-family-code);
+  font-size: var(--u-font-size-main-small);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.u-ai-chat__tool-call-panel-entry {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--u-gap-small);
+}
+.u-ai-chat__tool-call-panel-hint {
+  color: var(--u-text-color-assist);
+}
+.u-ai-chat__list-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
 }
 .u-ai-chat__list {
   flex: 1;
   min-height: 0;
 }
+.u-ai-chat__list .u-scroll__content {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 .u-ai-chat__welcome {
-  height: 100%;
+  flex: 1;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-end;
   flex-wrap: nowrap;
   color: var(--u-text-color-assist);
-  padding: var(--u-gap-default);
+  padding: var(--u-gap-default) 0;
   text-align: center;
 }
+.u-ai-chat__welcome-inner {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--u-gap-default);
+  width: 100%;
+}
+.u-ai-chat__welcome-item-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  min-height: 54px;
+}
+.u-ai-chat__welcome-item {
+  max-width: 100%;
+  padding: var(--u-gap-small) var(--u-gap-default);
+  border: none;
+  border-radius: var(--u-radius-large);
+  background-color: var(--u-bg-color-top);
+  color: var(--u-text-color-second);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.u-ai-chat__welcome-item:hover {
+  color: var(--u-color-primary);
+  background-color: var(--u-color-primary-light-9);
+}
+.u-ai-chat__welcome--swap-enter-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.u-ai-chat__welcome--swap-leave-active {
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+.u-ai-chat__welcome--swap-enter-from {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.u-ai-chat__welcome--swap-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+.u-ai-chat__working {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--u-gap-small);
+  padding: 0 var(--u-gap-default) var(--u-gap-small);
+}
+.u-ai-chat__working-text {
+  font-size: var(--u-font-size-main-small);
+}
+.u-ai-chat__to-latest {
+  position: absolute;
+  top: var(--u-gap-small);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 4px;
+  padding: 4px 12px;
+  border: none;
+  border-radius: 999px;
+  background-color: var(--u-bg-color-top);
+  color: var(--u-text-color-second);
+  font-size: var(--u-font-size-main-small);
+  box-shadow: 0 2px 8px var(--u-shadow-color-a-20);
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+.u-ai-chat__to-latest:hover {
+  color: var(--u-color-primary);
+}
+.u-ai-chat__to-latest--fade-enter-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.u-ai-chat__to-latest--fade-leave-active {
+  transition: opacity 0.1s ease, transform 0.1s ease;
+}
+.u-ai-chat__to-latest--fade-enter-from {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-4px);
+}
+.u-ai-chat__to-latest--fade-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-4px);
+}
 .u-ai-chat__message {
   padding: var(--u-gap-small) var(--u-gap-default);
 }
@@ -69,7 +309,32 @@
   display: block;
 }
 .u-ai-chat__message-content {
-  line-height: 1.7;
+  font-size: 13px;
+  line-height: 1.6;
+  --ms-text-body: 13px;
+  --ms-leading-body: 1.6;
+  --ms-text-h1: 1.55em;
+  --ms-text-h2: 1.35em;
+  --ms-text-h3: 1.15em;
+  --ms-text-h4: 1em;
+  --ms-text-h5: 1em;
+  --ms-text-h6: 1em;
+  --ms-flow-heading-1-mt: 0.9em;
+  --ms-flow-heading-1-mb: 0.35em;
+  --ms-flow-heading-2-mt: 0.8em;
+  --ms-flow-heading-2-mb: 0.3em;
+  --ms-flow-heading-3-mt: 0.7em;
+  --ms-flow-heading-3-mb: 0.25em;
+  --ms-flow-paragraph-y: 0.55em;
+  --ms-flow-list-y: 0.45em;
+  --ms-flow-list-item-y: 0.08em;
+  --ms-flow-list-indent: 1.3em;
+  --ms-flow-codeblock-y: 0.7em;
+  --ms-flow-blockquote-y: 0.55em;
+  --ms-flow-table-y: 0.7em;
+  --ms-flow-hr-y: 0.9em;
+  --ms-flow-admonition-y: 0.7em;
+  --ms-flow-diagram-y: 0.7em;
 }
 .u-ai-chat__message-status {
   margin-top: var(--u-gap-small);
@@ -77,52 +342,76 @@
   font-size: var(--u-font-size-main-small);
 }
 .u-ai-chat__message-actions {
-  margin-top: var(--u-gap-small);
-  color: var(--u-text-color-assist);
-  cursor: pointer;
-  display: inline-flex;
-}
-.u-ai-chat__message-actions:hover {
-  color: var(--u-color-primary);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--u-gap-small);
 }
 .u-ai-chat__reasoning {
-  margin-bottom: var(--u-gap-small);
+  margin-bottom: 4px;
   color: var(--u-text-color-assist);
 }
 .u-ai-chat__reasoning.is-expanded .u-ai-chat__reasoning-chevron {
-  transform: rotate(180deg);
+  transform: rotate(90deg);
 }
 .u-ai-chat__reasoning-header {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
-  gap: var(--u-gap-small);
+  gap: 4px;
   cursor: pointer;
   user-select: none;
   font-size: var(--u-font-size-main-small);
 }
+.u-ai-chat__reasoning-title {
+  line-height: 1.5;
+}
 .u-ai-chat__reasoning-chevron {
+  font-size: 12px;
   transition: transform 0.2s;
 }
 .u-ai-chat__reasoning-content {
-  margin-top: var(--u-gap-small);
-  padding-left: var(--u-gap-default);
+  margin-top: 4px;
+  padding-left: var(--u-gap-small);
   border-left: var(--u-border-muted);
+}
+.u-ai-chat__reasoning-text {
+  padding-right: 4px;
   white-space: pre-wrap;
   word-break: break-word;
   font-size: var(--u-font-size-main-small);
-  line-height: 1.6;
+  line-height: 1.55;
 }
 .u-ai-chat__tool-call {
-  margin: var(--u-gap-small) 0;
+  margin: 4px 0;
+  background-color: var(--u-bg-color-top);
+  font-size: var(--u-font-size-main-small);
+}
+.u-ai-chat__tool-call + .u-ai-chat__tool-call {
+  margin-top: 4px;
+}
+.u-ai-chat__tool-call .u-collapse__header {
+  gap: 6px;
+  padding: 5px var(--u-gap-small);
+  font-weight: 400;
+  letter-spacing: normal;
+}
+.u-ai-chat__tool-call .u-collapse__content {
+  border-top: var(--u-border-muted);
+  padding: var(--u-gap-small);
+  line-height: 1.5;
+}
+.u-ai-chat__tool-call-chevron {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: var(--u-text-color-assist);
 }
 .u-ai-chat__tool-call-status {
   flex-shrink: 0;
+  font-size: 13px;
 }
-.u-ai-chat__tool-call-status.is-loading {
+.u-ai-chat__tool-call-status.is-active {
   color: var(--u-color-primary);
-  animation: u-ai-chat-rotate 1s linear infinite;
 }
 .u-ai-chat__tool-call-status.is-warning {
   color: var(--u-color-warning);
@@ -134,8 +423,7 @@
   color: var(--u-color-danger);
 }
 .u-ai-chat__tool-call-name {
-  font-family: var(--u-font-family-code);
-  font-size: var(--u-font-size-main-small);
+  font-weight: 500;
   color: var(--u-text-color-title);
   flex-shrink: 0;
 }
@@ -146,7 +434,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--u-text-color-assist);
-  font-size: var(--u-font-size-main-small);
 }
 .u-ai-chat__tool-call-confirm {
   flex-shrink: 0;
@@ -154,23 +441,26 @@
   justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
-  gap: var(--u-gap-small);
+  gap: 4px;
 }
 .u-ai-chat__tool-call-section {
-  font-size: var(--u-font-size-main-small);
   color: var(--u-text-color-assist);
-  margin: var(--u-gap-small) 0;
+  margin-bottom: 4px;
+}
+.u-ai-chat__tool-call-section:not(:first-child) {
+  margin-top: var(--u-gap-small);
 }
 .u-ai-chat__tool-call-code {
   margin: 0;
-  padding: var(--u-gap-small);
-  border-radius: var(--u-radius-default);
+  padding: 4px var(--u-gap-small);
+  border-radius: var(--u-radius-small);
   background-color: var(--u-bg-color-bottom);
   font-family: var(--u-font-family-code);
   font-size: var(--u-font-size-main-small);
+  line-height: 1.5;
   white-space: pre-wrap;
   word-break: break-all;
-  max-height: 240px;
+  max-height: 200px;
   overflow: auto;
 }
 .u-ai-chat__ask-question {
@@ -326,17 +616,86 @@
 .u-ai-chat__ask-question-status {
   color: var(--u-text-color-assist);
 }
+.u-ai-chat__queue {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 800px;
+  box-sizing: border-box;
+  margin-bottom: 4px;
+  border-radius: var(--u-radius-default);
+  background-color: var(--u-bg-color-middle);
+  padding: 4px;
+  font-size: var(--u-font-size-main-small);
+}
+.u-ai-chat__queue-head {
+  padding: 2px 6px;
+  color: var(--u-text-color-assist);
+}
+.u-ai-chat__queue-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 6px;
+  padding: 3px 6px;
+  border-radius: var(--u-radius-small);
+}
+.u-ai-chat__queue-item:hover {
+  background-color: var(--u-bg-color-hover);
+}
+.u-ai-chat__queue-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--u-text-color-main);
+}
+.u-ai-chat__queue-actions {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 2px;
+}
+.u-ai-chat__queue-action {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 2px;
+  border: none;
+  background: none;
+  padding: 1px 4px;
+  border-radius: var(--u-radius-small);
+  color: var(--u-text-color-assist);
+  font-size: inherit;
+  font-family: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.u-ai-chat__queue-action:hover {
+  color: var(--u-color-primary);
+  background-color: var(--u-color-primary-light-9);
+}
+.u-ai-chat__queue-action--primary {
+  color: var(--u-color-primary);
+}
 .u-ai-chat__input-area {
   flex-shrink: 0;
-  margin: var(--u-gap-default);
-  margin-top: var(--u-gap-small);
-  border: var(--u-border-muted);
+  width: 100%;
+  max-width: 800px;
+  box-sizing: border-box;
+  margin: var(--u-gap-small) 0 var(--u-gap-default);
   border-radius: var(--u-radius-large);
   background-color: var(--u-bg-color-top);
   padding: var(--u-gap-small);
+  transition: box-shadow 0.15s ease;
 }
 .u-ai-chat__input-area:focus-within {
-  border-color: var(--u-color-primary);
+  box-shadow: 0 0 0 1px var(--u-color-primary);
 }
 .u-ai-chat__input {
   width: 100%;
@@ -458,28 +817,20 @@
   font-size: 12px;
 }
 
-@keyframes u-ai-chat-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 .u-ai-chat__model-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
   padding: 4px;
   user-select: none;
 }
-.u-ai-chat__model-panel .u-ai-chat__model-option {
+.u-ai-chat__model-panel .u-ai-chat__model-panel-list {
+  min-width: 0;
+}
+.u-ai-chat__model-panel .u-ai-chat__model-option-main {
   padding: 6px 8px;
   border-radius: calc(var(--u-radius-default) + 1px);
   cursor: pointer;
   transition: background-color 0.15s ease;
 }
-.u-ai-chat__model-panel .u-ai-chat__model-option:hover {
+.u-ai-chat__model-panel .u-ai-chat__model-option-main:hover {
   background-color: var(--u-nav-hover-bg);
 }
 .u-ai-chat__model-panel .u-ai-chat__model-option-head {
@@ -487,58 +838,90 @@
   justify-content: space-between;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 16px;
+  gap: 12px;
   color: var(--u-text-color-main);
 }
+.u-ai-chat__model-panel .u-ai-chat__model-option-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.u-ai-chat__model-panel .u-ai-chat__model-option-actions {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  gap: 6px;
+}
 .u-ai-chat__model-panel .u-ai-chat__model-option-check {
   flex-shrink: 0;
   font-size: 14px;
   color: var(--u-color-primary);
 }
-.u-ai-chat__model-panel .u-ai-chat__model-option-desc {
-  margin-top: 2px;
-  font-size: var(--u-font-size-main-small);
-  color: var(--u-text-color-assist);
-}
-.u-ai-chat__model-panel .u-ai-chat__model-divider {
-  height: 0;
-  margin: 4px 8px;
-  border-top: 1px solid var(--u-border-color);
+.u-ai-chat__model-panel .u-ai-chat__model-option-check.is-hidden {
+  visibility: hidden;
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-row {
+.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
-  padding: 6px 8px;
-  border-radius: calc(var(--u-radius-default) + 1px);
-  color: var(--u-text-color-main);
+  gap: 2px;
+  flex-shrink: 0;
+  padding: 1px 6px;
+  border: none;
+  border-radius: var(--u-radius-small);
+  background: var(--u-color-primary-light-9);
+  color: var(--u-color-primary);
+  font-size: var(--u-font-size-main-small);
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-row:hover {
-  background-color: var(--u-nav-hover-bg);
+.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning:hover {
+  background: var(--u-color-primary-light-7);
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-row-value {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 4px;
+.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning-arrow {
+  font-size: 12px;
+  transition: transform 0.2s ease;
+}
+.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning.is-expanded .u-ai-chat__model-option-reasoning-arrow {
+  transform: rotate(180deg);
+}
+.u-ai-chat__model-panel .u-ai-chat__model-option-desc {
+  margin-top: 2px;
+  font-size: var(--u-font-size-main-small);
   color: var(--u-text-color-assist);
 }
+.u-ai-chat__model-panel .u-ai-chat__reasoning-levels {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.u-ai-chat__model-panel .u-ai-chat__reasoning-levels.is-expanded {
+  grid-template-rows: 1fr;
+}
+.u-ai-chat__model-panel .u-ai-chat__reasoning-levels-inner {
+  min-height: 0;
+  overflow: hidden;
+}
 .u-ai-chat__model-panel .u-ai-chat__reasoning-option {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 16px;
-  padding: 6px 8px 6px 20px;
+  gap: 12px;
+  margin-left: 8px;
+  padding: 5px 8px;
   border-radius: calc(var(--u-radius-default) + 1px);
+  font-size: var(--u-font-size-main-small);
   color: var(--u-text-color-main);
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 .u-ai-chat__model-panel .u-ai-chat__reasoning-option:hover {
   background-color: var(--u-nav-hover-bg);
 }
+.u-ai-chat__model-panel .u-ai-chat__reasoning-option.is-active {
+  color: var(--u-color-primary);
+}