@veltra/ai 1.4.0 → 2.1.0

package/src/components/ai-chat/style.scss

@@ -5,26 +5,314 @@
 $root-name: ai-chat;
 
 @include m.b($root-name) {
-  display: flex;
-  flex-direction: column;
   height: 100%;
   min-height: 0;
   font-size: fn.use-var(font-size-main, default);
   color: fn.use-var(text-color, main);
+  // 底层背景与卡片（输入区 / 侧面板等 bg-color-top 元素）形成柔和对比，替代分割线
+  background-color: fn.use-var(bg-color, bottom);
 
-  @include m.e(list) {
-    flex: 1;
+  // 会话主列（消息列表 + 队列 + 输入区）：内容限宽居中，面板开合时排版不形变
+  @include m.e(main) {
+    min-width: 0;
     min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 fn.use-var(gap, default);
+
+    // 空会话：列表区与末尾占位各分一半剩余空间，输入区垂直居中，
+    // 欢迎区（orb + 快捷提问）贴于输入区上方并与之左对齐；有消息后自动回落到底部
+    @include m.is(empty) {
+      &::after {
+        content: '';
+        flex: 1;
+      }
+    }
   }
 
-  @include m.e(welcome) {
+  // 拖拽中：固定光标，并禁用面板内容指针事件（避免 iframe 等内容吞掉 mousemove）
+  @include m.is(resizing) {
+    cursor: col-resize;
+
+    .u-#{$root-name}__panel-body {
+      pointer-events: none;
+    }
+  }
+
+  // 右侧侧边面板（renderTo: 'panel' 的工具渲染区），宽度由 ULayout 列轨控制。
+  // 悬浮卡片形态：面板本体透明，以内边距让出与会话区的间距（代替生硬的左分割线），
+  // 圆角卡片仅靠底层背景对比与阴影区分；面板元素始终保持整轨宽度，避免宽度观测回环
+  @include m.e(panel) {
+    min-width: 0;
+    padding: fn.use-var(gap, small);
+    padding-left: calc(fn.use-var(gap, small) / 2);
+    box-sizing: border-box;
+    animation: u-ai-chat-panel-in 0.2s ease-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  @include m.e(panel-card) {
+    display: flex;
+    flex-direction: column;
     height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    border-radius: fn.use-var(radius, large);
+    background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow, sm);
+  }
+
+  @keyframes u-ai-chat-panel-in {
+    from {
+      transform: translateX(16px);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  // 面板头部：无下分割线，靠留白与卡片边界区分内容区
+  @include m.e(panel-header) {
+    flex: none;
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+    padding: fn.use-var(gap, default);
+    padding-bottom: fn.use-var(gap, small);
+  }
+
+  // 头部图标做成圆角底托，状态色只作用于图标本身
+  @include m.e(panel-icon) {
+    flex-shrink: 0;
+    width: 26px;
+    height: 26px;
+    border-radius: fn.use-var(radius, small);
+    background-color: fn.use-var(bg-color, middle);
+    font-size: 14px;
     @include m.flex(flex, center, center);
+
+    @include m.is(active) {
+      color: fn.use-var(color, primary);
+    }
+
+    @include m.is(warning) {
+      color: fn.use-var(color, warning);
+    }
+
+    @include m.is(success) {
+      color: fn.use-var(color, success);
+    }
+
+    @include m.is(danger) {
+      color: fn.use-var(color, danger);
+    }
+  }
+
+  @include m.e(panel-title) {
+    flex: 1;
+    min-width: 0;
+    @include m.ellipsis;
+    font-weight: 600;
+    color: fn.use-var(text-color, title);
+  }
+
+  @include m.e(panel-close) {
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    cursor: pointer;
     color: fn.use-var(text-color, assist);
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+    @include m.flex(flex, center, center);
+
+    &:hover {
+      color: fn.use-var(text-color, main);
+      background-color: fn.use-var(bg-color, hover);
+    }
+  }
+
+  @include m.e(panel-body) {
+    flex: 1;
+    min-height: 0;
+  }
+
+  @include m.e(panel-fallback) {
+    margin: 0;
     padding: fn.use-var(gap, default);
+    font-family: fn.use-var(font-family, code);
+    font-size: fn.use-var(font-size-main, small);
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  // 面板工具卡片内的「查看面板」入口
+  @include m.e(tool-call-panel-entry) {
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+  }
+
+  @include m.e(tool-call-panel-hint) {
+    color: fn.use-var(text-color, assist);
+  }
+
+  @include m.e(list-wrap) {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include m.e(list) {
+    flex: 1;
+    min-height: 0;
+
+    // 内容不足一屏时撑满滚动视口并按列排布，空会话欢迎区才能占满整列做底部对齐
+    .u-scroll__content {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  // 欢迎区仅在空会话渲染：占满整列并底部对齐，使其贴在居中的输入区上方
+  @include m.e(welcome) {
+    flex: 1;
+    @include m.flex(flex, center, flex-end);
+    color: fn.use-var(text-color, assist);
+    padding: fn.use-var(gap, default) 0;
     text-align: center;
   }
 
+  @include m.e(welcome-inner) {
+    // 固定锚点：球钉在左侧不动（与输入框左对齐），文本气泡只向右延展
+    //（轮换 / 不同长度文案都不会让球瞬移）
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, default);
+    width: 100%;
+  }
+
+  @include m.e(welcome-item-wrap) {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    // 预留两行高度：长文案换行时行高不抖动
+    min-height: 54px;
+  }
+
+  @include m.e(welcome-item) {
+    max-width: 100%;
+    padding: fn.use-var(gap, small) fn.use-var(gap, default);
+    border: none;
+    border-radius: fn.use-var(radius, large);
+    background-color: fn.use-var(bg-color, top);
+    color: fn.use-var(text-color, second);
+    font-size: 13px;
+    text-align: left;
+    cursor: pointer;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+
+    &:hover {
+      color: fn.use-var(color, primary);
+      background-color: fn.use-var(color, primary, 'light-9');
+    }
+  }
+
+  // 欢迎语逐条轮换的切换过渡
+  @include m.em(welcome, 'swap-enter-active') {
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s ease;
+  }
+
+  @include m.em(welcome, 'swap-leave-active') {
+    transition:
+      opacity 0.12s ease,
+      transform 0.12s ease;
+  }
+
+  @include m.em(welcome, 'swap-enter-from') {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  @include m.em(welcome, 'swap-leave-to') {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  // 生成中的统一工作状态指示（列表末尾）
+  @include m.e(working) {
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+    padding: 0 fn.use-var(gap, default) fn.use-var(gap, small);
+  }
+
+  @include m.e(working-text) {
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  // 「最新消息」悬浮按钮：上翻浏览时出现，点击回到底部
+  @include m.e(to-latest) {
+    position: absolute;
+    top: fn.use-var(gap, small);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+    @include m.flex(flex, center, center);
+    gap: 4px;
+    padding: 4px 12px;
+    border: none;
+    border-radius: 999px;
+    background-color: fn.use-var(bg-color, top);
+    color: fn.use-var(text-color, second);
+    font-size: fn.use-var(font-size-main, small);
+    box-shadow: 0 2px 8px fn.color-a(shadow, 20, color);
+    cursor: pointer;
+    transition: color 0.15s ease;
+
+    &:hover {
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.em(to-latest, 'fade-enter-active') {
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease;
+  }
+
+  @include m.em(to-latest, 'fade-leave-active') {
+    transition:
+      opacity 0.1s ease,
+      transform 0.1s ease;
+  }
+
+  @include m.em(to-latest, 'fade-enter-from') {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+  }
+
+  @include m.em(to-latest, 'fade-leave-to') {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+  }
+
   @include m.e(message) {
     padding: fn.use-var(gap, small) fn.use-var(gap, default);
 
@@ -63,7 +351,33 @@ $root-name: ai-chat;
   }
 
   @include m.e(message-content) {
-    line-height: 1.7;
+    font-size: 13px;
+    line-height: 1.6;
+    // 压缩 markstream 流式排版：正文字号 / 行高 / 标题档位 / 块级间距（变量见 markstream-vue 样式表）
+    --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;
   }
 
   @include m.e(message-status) {
@@ -73,61 +387,92 @@ $root-name: ai-chat;
   }
 
   @include m.e(message-actions) {
-    margin-top: fn.use-var(gap, small);
-    color: fn.use-var(text-color, assist);
-    cursor: pointer;
-    display: inline-flex;
-
-    &:hover {
-      color: fn.use-var(color, primary);
-    }
+    display: flex;
+    flex-wrap: wrap;
+    gap: fn.use-var(gap, small);
   }
 
   // 思考过程
   @include m.e(reasoning) {
-    margin-bottom: fn.use-var(gap, small);
+    margin-bottom: 4px;
     color: fn.use-var(text-color, assist);
 
     @include m.is(expanded) {
       @include m.bem($root-name, 'reasoning-chevron') {
-        transform: rotate(180deg);
+        transform: rotate(90deg);
       }
     }
   }
 
   @include m.e(reasoning-header) {
     @include m.flex(flex, flex-start, center);
-    gap: fn.use-var(gap, small);
+    gap: 4px;
     cursor: pointer;
     user-select: none;
     font-size: fn.use-var(font-size-main, small);
   }
 
+  @include m.e(reasoning-title) {
+    line-height: 1.5;
+  }
+
   @include m.e(reasoning-chevron) {
+    font-size: 12px;
     transition: transform 0.2s;
   }
 
   @include m.e(reasoning-content) {
-    margin-top: fn.use-var(gap, small);
-    padding-left: fn.use-var(gap, default);
+    margin-top: 4px;
+    padding-left: fn.use-var(gap, small);
     border-left: fn.use-var(border-muted);
+  }
+
+  @include m.e(reasoning-text) {
+    padding-right: 4px;
     white-space: pre-wrap;
     word-break: break-word;
     font-size: fn.use-var(font-size-main, small);
-    line-height: 1.6;
+    line-height: 1.55;
   }
 
-  // 工具调用卡片
+  // 工具调用卡片（复用 UCollapseItem：头部经 #header 插槽自定义，body 为折叠内容区）
   @include m.e(tool-call) {
-    margin: fn.use-var(gap, small) 0;
+    margin: 4px 0;
+    background-color: fn.use-var(bg-color, top);
+    font-size: fn.use-var(font-size-main, small);
+
+    // 相邻工具卡片保持紧凑间距（覆盖 UCollapseItem 的兄弟间距）
+    & + #{fn.bem($root-name, tool-call)} {
+      margin-top: 4px;
+    }
+
+    // 覆盖 UCollapseItem 默认头部/内容区节奏，保持紧凑单行头
+    .u-collapse__header {
+      gap: 6px;
+      padding: 5px fn.use-var(gap, small);
+      font-weight: 400;
+      letter-spacing: normal;
+    }
+
+    .u-collapse__content {
+      border-top: fn.use-var(border-muted);
+      padding: fn.use-var(gap, small);
+      line-height: 1.5;
+    }
+  }
+
+  @include m.e(tool-call-chevron) {
+    flex-shrink: 0;
+    font-size: 12px;
+    color: fn.use-var(text-color, assist);
   }
 
   @include m.e(tool-call-status) {
     flex-shrink: 0;
+    font-size: 13px;
 
-    @include m.is(loading) {
+    @include m.is(active) {
       color: fn.use-var(color, primary);
-      animation: u-ai-chat-rotate 1s linear infinite;
     }
 
     @include m.is(warning) {
@@ -144,8 +489,7 @@ $root-name: ai-chat;
   }
 
   @include m.e(tool-call-name) {
-    font-family: fn.use-var(font-family, code);
-    font-size: fn.use-var(font-size-main, small);
+    font-weight: 500;
     color: fn.use-var(text-color, title);
     flex-shrink: 0;
   }
@@ -155,31 +499,34 @@ $root-name: ai-chat;
     min-width: 0;
     @include m.ellipsis;
     color: fn.use-var(text-color, assist);
-    font-size: fn.use-var(font-size-main, small);
   }
 
   @include m.e(tool-call-confirm) {
     flex-shrink: 0;
     @include m.flex(flex, flex-start, center);
-    gap: fn.use-var(gap, small);
+    gap: 4px;
   }
 
   @include m.e(tool-call-section) {
-    font-size: fn.use-var(font-size-main, small);
     color: fn.use-var(text-color, assist);
-    margin: fn.use-var(gap, small) 0;
+    margin-bottom: 4px;
+
+    &:not(:first-child) {
+      margin-top: fn.use-var(gap, small);
+    }
   }
 
   @include m.e(tool-call-code) {
     margin: 0;
-    padding: fn.use-var(gap, small);
-    border-radius: fn.use-var(radius, default);
+    padding: 4px fn.use-var(gap, small);
+    border-radius: fn.use-var(radius, small);
     background-color: fn.use-var(bg-color, bottom);
     font-family: fn.use-var(font-family, code);
     font-size: fn.use-var(font-size-main, small);
+    line-height: 1.5;
     white-space: pre-wrap;
     word-break: break-all;
-    max-height: 240px;
+    max-height: 200px;
     overflow: auto;
   }
 
@@ -339,18 +686,88 @@ $root-name: ai-chat;
     color: fn.use-var(text-color, assist);
   }
 
-  // 输入区
+  // 待发送队列（生成中提交的消息在此排队）
+  @include m.e(queue) {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 800px;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(bg-color, middle);
+    padding: 4px;
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(queue-head) {
+    padding: 2px 6px;
+    color: fn.use-var(text-color, assist);
+  }
+
+  @include m.e(queue-item) {
+    @include m.flex(flex, flex-start, center);
+    gap: 6px;
+    padding: 3px 6px;
+    border-radius: fn.use-var(radius, small);
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+  }
+
+  @include m.e(queue-text) {
+    flex: 1;
+    min-width: 0;
+    @include m.ellipsis;
+    color: fn.use-var(text-color, main);
+  }
+
+  @include m.e(queue-actions) {
+    flex-shrink: 0;
+    @include m.flex(flex, flex-start, center);
+    gap: 2px;
+  }
+
+  @include m.e(queue-action) {
+    @include m.flex(flex, flex-start, center);
+    gap: 2px;
+    border: none;
+    background: none;
+    padding: 1px 4px;
+    border-radius: fn.use-var(radius, small);
+    color: fn.use-var(text-color, assist);
+    font-size: inherit;
+    font-family: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+
+    &:hover {
+      color: fn.use-var(color, primary);
+      background-color: fn.use-var(color, primary, 'light-9');
+    }
+
+    @include m.m(primary) {
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  // 输入区：无边框卡片，聚焦时用柔和的主色描边提示
   @include m.e(input-area) {
     flex-shrink: 0;
-    margin: fn.use-var(gap, default);
-    margin-top: fn.use-var(gap, small);
-    border: fn.use-var(border-muted);
+    width: 100%;
+    max-width: 800px;
+    box-sizing: border-box;
+    margin: fn.use-var(gap, small) 0 fn.use-var(gap, default);
     border-radius: fn.use-var(radius, large);
     background-color: fn.use-var(bg-color, top);
     padding: fn.use-var(gap, small);
+    transition: box-shadow 0.15s ease;
 
     &:focus-within {
-      border-color: fn.use-var(color, primary);
+      box-shadow: 0 0 0 1px fn.use-var(color, primary);
     }
   }
 
@@ -374,13 +791,61 @@ $root-name: ai-chat;
 
   @include m.e(input-toolbar) {
     @include m.flex(flex, space-between, center);
+    gap: fn.use-var(gap, small);
     padding: 0 fn.use-var(gap, small);
   }
 
+  @include m.e(input-toolbar-left) {
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+    flex-shrink: 0;
+  }
+
+  @include m.e(input-toolbar-right) {
+    @include m.flex(flex, flex-end, center);
+    gap: fn.use-var(gap, small);
+    min-width: 0;
+  }
+
+  @include m.e(model-trigger) {
+    @include m.flex(flex, flex-start, center);
+    gap: 4px;
+    max-width: 220px;
+    padding: 2px fn.use-var(gap, small);
+    border: none;
+    border-radius: fn.use-var(radius, default);
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--u-nav-hover-bg);
+    }
+  }
+
+  @include m.e(model-trigger-label) {
+    @include m.ellipsis;
+  }
+
+  @include m.e(model-trigger-reasoning) {
+    flex-shrink: 0;
+    color: fn.use-var(text-color, assist);
+  }
+
+  @include m.e(model-trigger-arrow) {
+    flex-shrink: 0;
+    font-size: 12px;
+    color: fn.use-var(text-color, assist);
+  }
+
   @include m.e(input-attach) {
     color: fn.use-var(text-color, assist);
     cursor: pointer;
     font-size: 18px;
+    flex-shrink: 0;
 
     &:hover {
       color: fn.use-var(color, primary);
@@ -429,11 +894,124 @@ $root-name: ai-chat;
   }
 }
 
-@keyframes u-ai-chat-rotate {
-  from {
-    transform: rotate(0deg);
+// 模型选择面板经 teleport 挂载到 popper 容器，不处于 .u-ai-chat 内，需独立定义
+.u-#{$root-name}__model-panel {
+  padding: 4px;
+  user-select: none;
+
+  .u-#{$root-name}__model-panel-list {
+    min-width: 0;
+  }
+
+  .u-#{$root-name}__model-option-main {
+    padding: 6px 8px;
+    border-radius: calc(fn.use-var(radius, default) + 1px);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--u-nav-hover-bg);
+    }
+  }
+
+  .u-#{$root-name}__model-option-head {
+    @include m.flex(flex, space-between, center);
+    gap: 12px;
+    color: fn.use-var(text-color, main);
+  }
+
+  .u-#{$root-name}__model-option-name {
+    @include m.ellipsis;
+  }
+
+  .u-#{$root-name}__model-option-actions {
+    @include m.flex(flex, flex-start, center);
+    flex-shrink: 0;
+    gap: 6px;
   }
-  to {
-    transform: rotate(360deg);
+
+  .u-#{$root-name}__model-option-check {
+    flex-shrink: 0;
+    font-size: 14px;
+    color: fn.use-var(color, primary);
+
+    @include m.is(hidden) {
+      visibility: hidden;
+    }
+  }
+
+  .u-#{$root-name}__model-option-reasoning {
+    @include m.flex(flex, flex-start, center);
+    gap: 2px;
+    flex-shrink: 0;
+    padding: 1px 6px;
+    border: none;
+    border-radius: fn.use-var(radius, small);
+    background: fn.use-var(color, primary, 'light-9');
+    color: fn.use-var(color, primary);
+    font-size: fn.use-var(font-size-main, small);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background: fn.use-var(color, primary, 'light-7');
+    }
+  }
+
+  .u-#{$root-name}__model-option-reasoning-arrow {
+    font-size: 12px;
+    transition: transform 0.2s ease;
+  }
+
+  .u-#{$root-name}__model-option-reasoning.is-expanded {
+    .u-#{$root-name}__model-option-reasoning-arrow {
+      transform: rotate(180deg);
+    }
+  }
+
+  .u-#{$root-name}__model-option-desc {
+    margin-top: 2px;
+    font-size: fn.use-var(font-size-main, small);
+    color: fn.use-var(text-color, assist);
+  }
+
+  // 内联思考强度：grid 行高 0fr → 1fr 过渡，展开/收起平滑无跳变
+  .u-#{$root-name}__reasoning-levels {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+    @include m.is(expanded) {
+      grid-template-rows: 1fr;
+    }
+  }
+
+  .u-#{$root-name}__reasoning-levels-inner {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .u-#{$root-name}__reasoning-option {
+    @include m.flex(flex, space-between, center);
+    gap: 12px;
+    margin-left: 8px;
+    padding: 5px 8px;
+    border-radius: calc(fn.use-var(radius, default) + 1px);
+    font-size: fn.use-var(font-size-main, small);
+    color: fn.use-var(text-color, main);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background-color: var(--u-nav-hover-bg);
+    }
+
+    @include m.is(active) {
+      color: fn.use-var(color, primary);
+    }
   }
 }