tdesign-react 1.11.2-beta.1 → 1.11.2

package/esm/common/style/web/components/chat/_index.less

@@ -24,6 +24,24 @@
     overflow-y: auto;
     overflow-x: hidden;
 
+    &:hover {
+      &::-webkit-scrollbar-thumb {
+        background-color: @scrollbar-color;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 6px;
+      border: 4px solid transparent;
+      background-clip: border-box;
+      background-color: transparent;
+    }
+
     &--reverse {
       display: flex;
       flex-direction: column-reverse;
@@ -82,18 +100,19 @@
           scrollbar-width: none;
         }
 
+        .@{prefix}-textarea__inner:hover {
+          box-shadow: @chat-input-hover;
+        }
+
         .@{prefix}-textarea__inner.@{prefix}-is-focused {
           border-color: @brand-color;
           background: @bg-color-container;
+          box-shadow: @chat-textarea-shadow-active;
         }
 
         .@{prefix}-textarea__inner::placeholder {
           color: @text-color-secondary;
         }
-
-        .@{prefix}-textarea__inner:hover {
-          box-shadow: @chat-input-hover;
-        }
       }
 
       &__icon {
@@ -150,6 +169,97 @@
     }
   }
 
+  // sender输入框样式
+  &-sender {
+    position: relative;
+    width: 100%;
+
+    &__textarea {
+      position: relative;
+      border: 1px solid @border-level-2-color;
+      border-radius: @chat-sender-radius;
+      padding: @pop-padding-xl;
+      background-color: @bg-color-secondarycontainer;
+
+      &--focus {
+        border-color: @brand-color;
+        background-color: @bg-color-container;
+        box-shadow: @chat-textarea-shadow-active;
+      }
+    }
+
+    &__textarea:hover {
+      border-color: @brand-color;
+      box-shadow: @shadow-1;
+    }
+
+    &__textarea--focus:hover {
+      box-shadow: @chat-textarea-shadow-active;
+    }
+    .@{prefix}-textarea {
+      width: 100%;
+      margin-bottom: @comp-margin-m;
+
+      .@{prefix}-textarea__inner {
+        background-color: rgba(0, 0, 0, 0%);
+        padding: 0;
+        border: 0;
+        scrollbar-width: none;
+        font: @font-body-large;
+        color: @text-color-primary;
+      }
+
+      .@{prefix}-textarea__inner.@{prefix}-is-focused {
+        border: 0;
+      }
+
+      .@{prefix}-textarea__inner::placeholder {
+        font: @font-body-large;
+        color: @text-color-disabled;
+      }
+
+      .@{prefix}-textarea__inner:hover {
+        box-shadow: none;
+      }
+
+      .@{prefix}-textarea__inner:focus {
+        box-shadow: none;
+      }
+    }
+
+    &__footer {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &__button {
+      display: flex;
+      align-items: center;
+
+      & &__default {
+        padding: 0;
+        transform: rotate(-90deg);
+        color: @text-color-anti;
+        width: @comp-size-s;
+        height: @comp-size-s;
+        border-radius: @border-radius-circle;
+        background-color: @brand-color;
+      }
+
+      & &--disabled {
+        background-color: @bg-color-secondarycomponent;
+        color: @bg-color-container;
+      }
+
+      &__stopicon {
+        width: @size-4;
+        height: @size-4;
+        border: 1px solid @bg-color-container;
+        background: @bg-color-container;
+      }
+    }
+  }
+
   &__inner {
     display: flex;
     margin-bottom: @comp-margin-l;
@@ -157,12 +267,18 @@
       flex: 0 0 auto;
     }
     .@{prefix}-chat__content {
+      display: flex;
+      justify-content: center;
       flex: 1 1 auto;
       width: 100%;
 
       &--base {
         padding-top: @comp-paddingTB-xl;
       }
+
+      > .@{prefix}-chat-loading {
+        padding: 0 @comp-paddingLR-m;
+      }
     }
     .@{prefix}-chat__detail {
       max-width: calc(100% - @comp-size-xl);
@@ -172,6 +288,36 @@
     &.model-change {
       justify-content: center;
       margin-top: @comp-margin-xxl;
+      // 模型切换在chat-content中渲染居中对齐覆写样式
+      .@{prefix}-chat__content {
+        align-items: center;
+      }
+      .@{prefix}-chat__text {
+        padding: 0;
+        font-size: @font-size-s;
+        color: @text-color-disabled;
+      }
+      .@{prefix}-chat__notice {
+        // 模型切换为content插槽需要覆盖样式
+        .@{prefix}-chat__text {
+          padding: 0;
+          font-size: @font-size-s;
+          color: @text-color-disabled;
+        }
+
+        background: @bg-color-secondarycontainer;
+        padding: @comp-paddingTB-xxs @comp-paddingLR-s;
+        font-size: @font-size-s;
+        color: @text-color-disabled;
+        border-radius: @border-radius-default;
+        box-sizing: border-box;
+        line-height: 20px;
+        text-align: center;
+
+        span {
+          color: @text-color-placeholder;
+        }
+      }
     }
 
     &.error {
@@ -179,21 +325,6 @@
         color: @error-color;
       }
     }
-    .@{prefix}-chat__notice {
-      // 水平居中
-      background: @bg-color-secondarycontainer;
-      padding: @comp-paddingTB-xxs @comp-paddingLR-s;
-      font-size: @font-size-s;
-      color: @text-color-disabled;
-      border-radius: @border-radius-default;
-      box-sizing: border-box;
-      line-height: 20px;
-      text-align: center;
-
-      span {
-        color: @text-color-placeholder;
-      }
-    }
   }
   // chat布局
   &--normal {
@@ -201,7 +332,6 @@
       flex-direction: row-reverse;
       .@{prefix}-chat__avatar {
         margin-right: 0;
-        // margin-left: @comment-avatar-margin-right;
       }
       .@{prefix}-chat__content {
         align-items: flex-end;
@@ -243,6 +373,20 @@
       width: 100%;
       padding: @pop-padding-xxl;
     }
+    .@{prefix}-chat__text--model-change {
+      background: @bg-color-secondarycontainer;
+      padding: @comp-paddingTB-xxs @comp-paddingLR-s;
+      font-size: @font-size-s;
+      color: @text-color-disabled;
+      border-radius: @border-radius-default;
+      box-sizing: border-box;
+      line-height: 20px;
+      text-align: center;
+
+      span {
+        color: @text-color-placeholder;
+      }
+    }
   }
 
   &__base {
@@ -250,7 +394,7 @@
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: baseline;
-    font: @font-title-small;
+    font: @font-body-medium;
     color: @text-color-placeholder;
     padding-left: @pop-padding-xxl;
   }
@@ -261,11 +405,11 @@
   }
   // 消息样式
   &__text {
-    padding: @pop-padding-xl @pop-padding-xxl;
+    padding: @comp-paddingTB-m @comp-paddingLR-l;
     font: @font-body-large;
     word-break: break-all;
 
-    & &__user pre {
+    & &--user pre {
       color: @text-color-secondary;
       margin: 0;
       white-space: pre-wrap;
@@ -273,13 +417,16 @@
 
     &__assistant {
       color: @text-color-primary;
+      line-height: 2;
 
+      p,
+      ul,
       ol {
-        padding-inline-start: 20px;
+        line-height: 1.5;
+      }
 
-        li {
-          list-style: decimal;
-        }
+      ol {
+        padding-inline-start: 20px;
       }
 
       img {
@@ -302,12 +449,14 @@
         border-left: 2px solid @gray-color-3;
         background: @gray-color-1;
         color: @font-gray-1;
-        padding: @comp-paddingTB-m @comp-paddingTB-m @comp-paddingTB-m @comp-size-xs;
+        padding: @comp-paddingTB-m @comp-paddingTB-m @comp-paddingTB-m
+          @comp-size-xs;
         margin: @comp-margin-l 0;
       }
 
       hr {
-        opacity: 0;
+        opacity: 1;
+        border: 1px solid @border-level-1-color;
       }
     }
 
@@ -326,13 +475,6 @@
         border-radius: @border-radius-extraLarge;
       }
     }
-
-    &--variant--outline {
-      .@{prefix}-chat__text {
-        border: 1px solid @border-level-2-color;
-        border-radius: @border-radius-extraLarge;
-      }
-    }
   }
 
   &__actions-margin {
@@ -350,7 +492,7 @@
     overflow: hidden;
 
     & .@{prefix}-button {
-      padding: @pop-padding-s;
+      padding: @comp-paddingTB-xs @comp-paddingLR-xs;
       width: @comp-size-xxxs;
       height: @comp-size-xxxs;
       box-sizing: content-box;
@@ -366,7 +508,7 @@
       color: @brand-color;
     }
     & .@{prefix}-button:hover {
-      background-color: @chat-actions-hover;
+      background-color: @bg-color-secondarycontainer-hover;
     }
     & .@{prefix}-space .@{prefix}-space-item {
       height: @comp-size-xs;
@@ -398,7 +540,195 @@
 
   &__copy-btn {
     color: @code-font-color-base;
-    // margin-left: auto;
     cursor: pointer;
   }
 }
+
+// 思维链样式
+.@{prefix}-chat__detail {
+  .@{prefix}-chat__text--variant--outline & {
+    border: 1px solid @border-level-2-color;
+    border-radius: @border-radius-extraLarge;
+  }
+  .model-change.@{prefix}-chat__text--variant--outline & {
+    border: none;
+  }
+
+  &-reasoning {
+    .@{prefix}-chat__text--variant--text & {
+      padding-top: @comp-paddingTB-m;
+      ~ .@{prefix}-chat__text {
+        padding-right: 0;
+      }
+    }
+    .@{prefix}-chat__text--variant--outline & {
+      .@{prefix}-collapse {
+        background: none;
+      }
+    }
+    .@{prefix}-collapse {
+      background: none;
+    }
+    .@{prefix}-collapse-panel {
+      margin-left: @comp-margin-l;
+      .@{prefix}-chat__text--variant--outline & {
+        margin-left: 0;
+        padding: @comp-paddingTB-m @comp-paddingLR-l;
+        // 移除 t-chat__text 的边框
+        .@{prefix}-chat__text {
+          border: none;
+        }
+      }
+
+      &__icon {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+      }
+
+      &__header {
+        padding: @comp-paddingTB-s @comp-paddingTB-m;
+        font: @font-body-medium;
+      }
+
+      &__wrapper {
+        background-color: @bg-color-secondarycontainer;
+        border-radius: @border-radius-medium;
+        .@{prefix}-fake-arrow {
+          color: @text-color-secondary;
+          transform: rotate(180deg) scale(1.125);
+        }
+      }
+
+      &__icon--active {
+        .@{prefix}-fake-arrow {
+          transform: rotate(0deg) scale(1.125);
+        }
+      }
+
+      &__content {
+        background-color: @bg-color-secondarycontainer;
+        padding: 0 @comp-paddingTB-m @comp-paddingTB-s @comp-paddingTB-m;
+        .@{prefix}-chat__text {
+          padding: 0;
+          .@{prefix}-chat__text--assistant {
+            color: @text-color-placeholder;
+            font-weight: 400;
+            font-size: @font-size-base;
+          }
+        }
+      }
+    }
+  }
+}
+
+.@{prefix}-chat-loading {
+  display: flex;
+  align-items: center;
+
+  &__indicator {
+    &--moving {
+      position: relative;
+      width: 14px;
+      height: 14px;
+
+      .@{prefix}-chat-loading__dot {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        border-radius: @border-radius-circle;
+        background-color: @brand-color;
+
+        &--top {
+          top: -4px;
+          left: 3px;
+          animation: dot-moving-top .6s ease-in-out alternate infinite;
+        }
+
+        &--left {
+          bottom: -5px;
+          left: -5px;
+          animation: dot-moving-left .6s ease-in-out alternate infinite;
+        }
+
+        &--right {
+          bottom: -5px;
+          right: -5px;
+          animation: dot-moving-right .6s ease-in-out alternate infinite;
+        }
+      }
+    }
+
+    &--gradient {
+      width: 14px;
+      height: 14px;
+      background-color: transparent;
+      border-radius: @border-radius-circle;
+      border: 1.5px solid @brand-color;
+      animation: border-gradient-color .6s ease-in-out alternate infinite;
+      box-sizing: border-box;
+    }
+
+    @keyframes border-gradient-color {
+      0% {
+        border-color: @brand-color;
+        border-width: 1.5px;
+      }
+
+      50% {
+        border-color: @brand-color-8;
+        border-width: 3px;
+      }
+
+      100% {
+        border-color: @brand-color-6;
+        border-width: 4px;
+      }
+    }
+
+    @keyframes dot-moving-top {
+      0% {
+        transform: scale(1);
+        top: -4px;
+      }
+
+      100% {
+        transform: scale(1.75);
+        top: 3px;
+      }
+    }
+
+    @keyframes dot-moving-left {
+      0% {
+        transform: scale(1);
+        bottom: -4px;
+        left: -4px;
+      }
+
+      100% {
+        transform: scale(1.75);
+        bottom: 3px;
+        left: 3px;
+      }
+    }
+
+    @keyframes dot-moving-right {
+      0% {
+        transform: scale(1);
+        bottom: -4px;
+        right: -4px;
+      }
+
+      100% {
+        transform: scale(1.75);
+        bottom: 3px;
+        right: 3px;
+      }
+    }
+  }
+
+  &__text {
+    margin-left: 8px;
+  }
+}

package/esm/common/style/web/components/chat/_var.less

@@ -13,16 +13,6 @@
 
 @import "../../_variables.less";
 
-// :root[theme-mode="light"] {
-//   --td-code-bg-color-page: @gray-color-14;
-//   --td-code-font-base: @font-white-1;
-// }
-
-// :root[theme-mode="dark"] {
-//   --td-code-bg-color-page: @gray-color-14;
-//   --td-code-font-base: @font-white-1;
-// }
-
 // 颜色
 @comment-bg-color-secondary: @bg-color-secondarycontainer;
 @comment-text-color-default: @text-color-primary;
@@ -53,5 +43,7 @@
 @code-font-color-base: @font-white-1;
 @chat-refresh-line: #e7e7e7;
 @chat-input-hover: inset 0px 2px 4px -1px rgba(0, 0, 0, .12), 0px 4px 5px 0px rgba(0, 0, 0, .08), 0px 1px 10px 0px rgba(0, 0, 0, .05);
-@chat-actions-hover: rgba(238, 238, 238, 1);
 @chat-action-icon-padding: 3px;
+@chat-sender-radius: calc(@border-radius-extraLarge + @border-radius-small + @border-radius-small); // 16px的圆角
+//shadow
+@chat-textarea-shadow-active: 0 0 0 2px @brand-color-focus;

package/esm/common/style/web/components/form/_index.less

@@ -58,7 +58,7 @@
       text-align: right;
     }
 
-    &--required {
+    &--required:not(.@{prefix}-form__label--required-right) {
       label::before {
         display: inline-block;
         margin-right: @form-label-margin-right-required;
@@ -68,6 +68,16 @@
       }
     }
 
+    &--required-right {
+      label::after {
+        display: inline-block;
+        margin-left: @form-label-margin-left-required;
+        color: @form-color-error;
+        line-height: @form-label-line-height;
+        content: "*";
+      }
+    }
+
     &--colon {
       label::after {
         content: ":";

package/esm/common/style/web/components/form/_var.less

@@ -35,6 +35,7 @@
 
 @form-label-line-height: @text-line-height-base;
 @form-label-padding-right: @comp-paddingLR-xl;
+@form-label-margin-left-required: @comp-margin-xs;
 @form-label-margin-right-required: @comp-margin-xs;
 @form-label-margin-colon: 0 @comp-margin-xxs;
 @form-status-margin: 0 @comp-margin-s;

package/esm/common/style/web/components/table/_index.less

@@ -63,6 +63,10 @@
   background-color: @table-bg;
   position: relative;
 
+  .@{prefix}-popup:not(.@{prefix}-tooltip)[data-popper-placement^="top"] .@{prefix}-popup__arrow {
+    bottom: calc(-@popup-arrow-width / 2);
+  }
+
   &:focus-visible {
     outline: none;
   }

package/esm/common/style/web/components/table/_mixin.less

@@ -41,8 +41,8 @@
 
 .t-table-vertical-align(@pos) {
   &.@{prefix}-vertical-align-@{pos} {
-    th,
-    td {
+    th:not(.@{prefix}-table__cell-check),
+    td:not(.@{prefix}-table__cell-check) {
       vertical-align: @pos;
     }
   }

package/esm/date-picker/DatePicker.js

@@ -80,7 +80,7 @@ import '../input/style/index.js';
 import '../input/type.js';
 import '../loading/index.js';
 import '../loading/Loading.js';
-import '../_chunks/dep-24b783df.js';
+import '../_chunks/dep-0a2b8e36.js';
 import '../hooks/useDomRefCallback.js';
 import '../loading/defaultProps.js';
 import '../loading/plugin.js';
@@ -160,7 +160,7 @@ import './base/Table.js';
 import './base/Cell.js';
 import '../time-picker/index.js';
 import '../time-picker/TimePicker.js';
-import '../_chunks/dep-9fa03acc.js';
+import '../_chunks/dep-69d78d9b.js';
 import '../time-picker/hooks/useTimePickerTextConfig.js';
 import '../hooks/useDebounce.js';
 import '../hooks/usePersistFn.js';

package/esm/date-picker/DatePickerPanel.js

@@ -56,7 +56,7 @@ import '../loading/index.js';
 import '../loading/Loading.js';
 import '../common/Portal.js';
 import 'react-dom';
-import '../_chunks/dep-24b783df.js';
+import '../_chunks/dep-0a2b8e36.js';
 import '../_chunks/dep-a1cc61b2.js';
 import '../loading/defaultProps.js';
 import '../loading/plugin.js';
@@ -158,7 +158,7 @@ import './base/Table.js';
 import './base/Cell.js';
 import '../time-picker/index.js';
 import '../time-picker/TimePicker.js';
-import '../_chunks/dep-9fa03acc.js';
+import '../_chunks/dep-69d78d9b.js';
 import '../time-picker/hooks/useTimePickerTextConfig.js';
 import '../hooks/useDebounce.js';
 import '../hooks/usePersistFn.js';

package/esm/date-picker/DateRangePicker.js

@@ -97,7 +97,7 @@ import '../_util/setStyle.js';
 import '../common/FakeArrow.js';
 import '../loading/index.js';
 import '../loading/Loading.js';
-import '../_chunks/dep-24b783df.js';
+import '../_chunks/dep-0a2b8e36.js';
 import '../loading/defaultProps.js';
 import '../loading/plugin.js';
 import '../loading/style/index.js';
@@ -166,7 +166,7 @@ import './base/Table.js';
 import './base/Cell.js';
 import '../time-picker/index.js';
 import '../time-picker/TimePicker.js';
-import '../_chunks/dep-9fa03acc.js';
+import '../_chunks/dep-69d78d9b.js';
 import '../time-picker/hooks/useTimePickerTextConfig.js';
 import '../hooks/useDebounce.js';
 import '../hooks/usePersistFn.js';

package/esm/date-picker/DateRangePickerPanel.js

@@ -57,7 +57,7 @@ import '../loading/index.js';
 import '../loading/Loading.js';
 import '../common/Portal.js';
 import 'react-dom';
-import '../_chunks/dep-24b783df.js';
+import '../_chunks/dep-0a2b8e36.js';
 import '../_chunks/dep-a1cc61b2.js';
 import '../loading/defaultProps.js';
 import '../loading/plugin.js';
@@ -159,7 +159,7 @@ import './base/Table.js';
 import './base/Cell.js';
 import '../time-picker/index.js';
 import '../time-picker/TimePicker.js';
-import '../_chunks/dep-9fa03acc.js';
+import '../_chunks/dep-69d78d9b.js';
 import '../time-picker/hooks/useTimePickerTextConfig.js';
 import '../hooks/useDebounce.js';
 import '../hooks/usePersistFn.js';

package/esm/date-picker/base/Footer.js

@@ -35,7 +35,7 @@ import '../../loading/index.js';
 import '../../loading/Loading.js';
 import '../../common/Portal.js';
 import 'react-dom';
-import '../../_chunks/dep-24b783df.js';
+import '../../_chunks/dep-0a2b8e36.js';
 import '../../_chunks/dep-a1cc61b2.js';
 import '../../_chunks/dep-8f3fee3e.js';
 import '../../loading/defaultProps.js';