@touchvue/chat 1.0.0-beta.5 → 1.0.0-beta.50

package/theme/components/index.css

@@ -219,7 +219,7 @@
   border: var(--ai-think-toggle-active-border);
 }
 .touchchat-ai-think-toggle.is-expand:before {
-  content: var(--ai-think-toggle-expand-content);
+  transform: rotate(180);
 }
 .touchchat-ai-think-toggle-icon:before {
   font-family: var(--ai-think-toggle-family);
@@ -290,6 +290,22 @@
   opacity: 0;
   overflow: hidden;
 }
+.touchchat-ai-may-like {
+  margin-top: 0.5em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4em;
+}
+.touchchat-ai-may-like .touchchat-ai-may-like-item {
+  display: inline-block;
+  cursor: pointer;
+  background-color: #ededed;
+  padding: 0.5em 0.8em;
+  border-radius: 0.8em;
+}
+.touchchat-ai-may-like .touchchat-ai-may-like-item:hover {
+  background-color: #d6d6d6;
+}
 @keyframes loading {
   0% {
     transform: rotate(0deg);
@@ -303,7 +319,8 @@
   padding: 0.5em 1em;
 }
 .touchchat {
-  --edit-margin: 1em;
+  --edit-margin: 0;
+  --edit-padding: 0.75em;
   --edit-gap: 1em;
   --edit-border: 1px solid #ddd;
   --edit-radius: 0.5em;
@@ -312,23 +329,21 @@
   --edit-input-bg: none;
   --edit-input-lh: 1.5em;
   --edit-input-padding: 1em;
-  --edit-submit-padding: 0 0.5em 0.5em;
+  --edit-submit-padding: 0;
   --edit-submit-gap: 0.5em;
-  --edit-attach-width: 2.5em;
-  --edit-attach-height: 2.5em;
-  --edit-attach-bg: #fff;
-  --edit-attach-border: 1px solid #ddd;
-  --edit-attach-radius: 0.25em;
-  --edit-attach-color: inherit;
-  --edit-attach-size: 1em;
-  --edit-attach-family: 'touchchat-icon';
-  --edit-attach-content: '\e610';
-  --edit-attach-hover-bg: rgba(0, 0, 0, 0.1);
-  --edit-attach-hover-color: var(--edit-attach-color);
-  --edit-attach-hover-border: var(--edit-attach-border);
-  --edit-attach-active-bg: rgba(0, 0, 0, 0.3);
-  --edit-attach-active-color: var(--edit-attach-color);
-  --edit-attach-active-border: var(--edit-attach-border);
+  --edit-button-width: 2.5em;
+  --edit-button-height: 2.5em;
+  --edit-button-bg: #fff;
+  --edit-button-border: 1px solid #ddd;
+  --edit-button-radius: 0.25em;
+  --edit-button-color: inherit;
+  --edit-button-size: 1em;
+  --edit-button-hover-bg: rgba(0, 0, 0, 0.1);
+  --edit-button-hover-color: var(--edit-button-color);
+  --edit-button-hover-border: #0062d6;
+  --edit-button-active-bg: rgba(0, 0, 0, 0.3);
+  --edit-button-active-color: var(--edit-button-color);
+  --edit-button-active-border: var(--edit-button-border);
   --edit-think-height: 2.5em;
   --edit-think-padding: 0 1em;
   --edit-think-bg: #fff;
@@ -339,7 +354,7 @@
   --edit-think-size: 1em;
   --edit-think-icon-size: var(--edit-think-size);
   --edit-think-family: 'touchchat-icon';
-  --edit-think-content: '\e607';
+  --edit-think-content: '\e73e';
   --edit-think-hover-bg: rgba(0, 0, 0, 0.1);
   --edit-think-hover-color: var(--edit-think-color);
   --edit-think-hover-border: var(--edit-think-border);
@@ -355,6 +370,16 @@
   --edit-think-on-active-bg: var(--edit-think-active-bg);
   --edit-think-on-active-color: var(--edit-think-on-color);
   --edit-think-on-active-border: var(--edit-think-on-border);
+  --edit-attach-family: 'touchchat-icon';
+  --edit-attach-content: '\e73a';
+  --edit-delete-family: 'touchchat-icon';
+  --edit-delete-content: '\e73d';
+  --edit-screenshot-family: 'touchchat-icon';
+  --edit-screenshot-content: '\e73c';
+  --edit-voice-family: 'touchchat-icon';
+  --edit-voice-content: '\e73b';
+  --edit-record-family: 'touchchat-icon';
+  --edit-record-content: '\ea42';
   --edit-send-width: 2.5em;
   --edit-send-height: 2.5em;
   --edit-send-bg: var(--color-primary);
@@ -372,38 +397,76 @@
   --edit-send-active-border: var(--edit-send-border);
   --edit-stop-width: 2.5em;
   --edit-stop-height: 2.5em;
-  --edit-stop-bg: var(--color-primary);
+  --edit-stop-bg: #333333;
   --edit-stop-border: 0 none;
   --edit-stop-radius: 0.25em;
   --edit-stop-color: #fff;
   --edit-stop-size: 1em;
   --edit-stop-family: 'touchchat-icon';
-  --edit-stop-content: '\e60f';
-  --edit-stop-hover-bg: #2e91ff;
+  --edit-stop-content: '\e70c';
+  --edit-stop-hover-bg: #4d4d4d;
   --edit-stop-hover-color: var(--edit-stop-color);
   --edit-stop-hover-border: var(--edit-stop-border);
-  --edit-stop-active-bg: #005fc7;
+  --edit-stop-active-bg: #1a1a1a;
   --edit-stop-active-color: var(--edit-stop-color);
   --edit-stop-active-border: var(--edit-stop-border);
 }
 .touchchat-edit {
   margin: var(--edit-margin);
+  padding: var(--edit-padding);
   display: flex;
   flex-direction: column;
   gap: var(--edit-gap);
   border: var(--edit-border);
   border-radius: var(--edit-radius);
-  overflow: hidden;
+  overflow: visible;
 }
 .touchchat-edit:has(textarea:focus) {
   border: var(--edit-focus-border);
 }
+.touchchat-edit-mark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  border-radius: 0.5em;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(0.625em);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.touchchat-edit-mark > div {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.touchchat-edit-mark p {
+  font-family: 'PingFang SC';
+  font-size: 0.875em;
+  font-style: normal;
+  line-height: 1.375em;
+  text-align: center;
+}
+.touchchat-edit-mark .touchchat-edit-title {
+  color: var(--text-icon-text-icon, #1d2129);
+  font-weight: 600;
+  margin: 0.5em 0;
+}
+.touchchat-edit-mark .touchchat-edit-text {
+  color: var(--text-icon-text-icon, #86909c);
+  font-weight: 400;
+}
 .touchchat-edit-input {
   border: 0 none;
   background: var(--edit-input-bg);
 }
 .touchchat-edit-input textarea {
-  padding: var(--edit-input-padding);
   resize: none;
   vertical-align: top;
   font-family: inherit;
@@ -427,28 +490,29 @@
   display: inline-flex;
   gap: var(--edit-submit-gap);
 }
-.touchchat-edit-attach {
-  border: var(--edit-attach-border);
-  width: var(--edit-attach-width);
-  height: var(--edit-attach-height);
-  background: var(--edit-attach-bg);
+.touchchat-edit-button {
+  border: var(--edit-button-border);
+  width: var(--edit-button-width);
+  height: var(--edit-button-height);
+  background: var(--edit-button-bg);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--edit-attach-radius);
-  color: var(--edit-attach-color);
+  border-radius: var(--edit-button-radius);
+  color: var(--edit-button-color);
+  position: relative;
 }
-.touchchat-edit-attach:hover {
-  background: var(--edit-attach-hover-bg);
-  color: var(--edit-attach-hover-color);
-  border: var(--edit-attach-hover-border);
+.touchchat-edit-button:hover {
+  background: var(--edit-button-hover-bg);
+  color: var(--edit-button-hover-color);
+  border: var(--edit-button-hover-border);
 }
-.touchchat-edit-attach:active {
-  background: var(--edit-attach-active-bg);
-  color: var(--edit-attach-active-color);
-  border: var(--edit-attach-active-border);
+.touchchat-edit-button:active {
+  background: var(--edit-button-active-bg);
+  color: var(--edit-button-active-color);
+  border: var(--edit-button-active-border);
 }
-.touchchat-edit-attach.is-dis {
+.touchchat-edit-button.is-dis {
   opacity: 0.4;
   pointer-events: none;
 }
@@ -457,6 +521,126 @@
   font-family: var(--edit-attach-family);
   content: var(--edit-attach-content);
 }
+.touchchat-edit-tooltip {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 0.5em 1em;
+  border-radius: 0.25em;
+  margin-bottom: 0.5em;
+  white-space: nowrap;
+  line-height: 1.5em;
+  transform: translateX(-50%);
+}
+.touchchat-edit-tooltip::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 100%;
+  border-width: 0.375em;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+}
+.touchchat-edit-tooltip.align-left {
+  left: 0;
+  transform: translateX(0);
+  text-align: left;
+}
+.touchchat-edit-tooltip.align-left::before {
+  left: 0.875em;
+  transform: translateX(0);
+}
+.touchchat-edit-button:hover .touchchat-edit-tooltip {
+  display: block;
+}
+@keyframes lightUp {
+  0% {
+    stroke-opacity: 0.2;
+  }
+  20% {
+    stroke-opacity: 1;
+  }
+  100% {
+    stroke-opacity: 0.2;
+  }
+}
+/* 为每根竖线添加动画，设置不同的延迟时间 */
+.touchchat-voice-bar-1 {
+  animation: lightUp 2s infinite;
+}
+.touchchat-voice-bar-2 {
+  animation: lightUp 2s infinite;
+  animation-delay: 0.4s;
+}
+.touchchat-voice-bar-3 {
+  animation: lightUp 2s infinite;
+  animation-delay: 0.8s;
+}
+.touchchat-voice-bar-4 {
+  animation: lightUp 2s infinite;
+  animation-delay: 1.2s;
+}
+.touchchat-voice-bar-5 {
+  animation: lightUp 2s infinite;
+  animation-delay: 1.6s;
+}
+/* 语音波形起伏动画：每个波形高度随机变化，模拟实时声音波动 */
+@keyframes wavePulse {
+  0%,
+  100% {
+    height: 8px;
+    y: -4px;
+  }
+  25% {
+    height: 4px;
+    y: -2px;
+  }
+  50% {
+    height: 12px;
+    y: -6px;
+  }
+  75% {
+    height: 6px;
+    y: -3px;
+  }
+}
+/* 按钮呼吸阴影：增强交互感，暗示“可点击”状态 */
+@keyframes shadowBreath {
+  0%,
+  100% {
+    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
+  }
+  50% {
+    filter: drop-shadow(0 3px 4px rgba(64, 158, 255, 0.3));
+  }
+}
+/* 为不同波形添加动画延迟，避免同步起伏，更真实 */
+.touchchat-edit-rlvoice-wave-1 {
+  animation: wavePulse 1.2s ease-in-out infinite;
+}
+.touchchat-edit-rlvoice-wave-2 {
+  animation: wavePulse 1.5s ease-in-out infinite 0.2s;
+}
+.touchchat-edit-rlvoice-wave-3 {
+  animation: wavePulse 1.1s ease-in-out infinite 0.4s;
+}
+.touchchat-edit-rlvoice-wave-4 {
+  animation: wavePulse 1.3s ease-in-out infinite 0.1s;
+}
+.touchchat-edit-rlvoice-wave-5 {
+  animation: wavePulse 1.4s ease-in-out infinite 0.3s;
+}
+.touchchat-edit-rlvoice-wave-6 {
+  animation: wavePulse 1.2s ease-in-out infinite 0.5s;
+}
+/* 麦克风主体添加呼吸阴影 */
+.touchchat-edit-rlvoice-mic-body {
+  animation: shadowBreath 2s ease-in-out infinite;
+}
 .touchchat-edit-think {
   border: var(--edit-think-border);
   height: var(--edit-think-height);
@@ -503,6 +687,29 @@
   font-family: var(--edit-think-family);
   content: var(--edit-think-content);
 }
+.touchchat-edit-delete-icon:before {
+  font-size: var(--edit-delete-icon-size);
+  font-family: var(--edit-delete-family);
+  content: var(--edit-delete-content);
+}
+.touchchat-edit-screenshot {
+  position: relative;
+}
+.touchchat-edit-screenshot-icon:before {
+  font-size: var(--edit-screenshot-icon-size);
+  font-family: var(--edit-screenshot-family);
+  content: var(--edit-screenshot-content);
+}
+.touchchat-edit-voice-icon:before {
+  font-size: var(--edit-voice-icon-size);
+  font-family: var(--edit-voice-family);
+  content: var(--edit-voice-content);
+}
+.touchchat-edit-record-icon:before {
+  font-size: var(--edit-record-icon-size);
+  font-family: var(--edit-record-family);
+  content: var(--edit-record-content);
+}
 .touchchat-edit-think-text {
   font-size: var(--edit-think-size);
 }
@@ -518,6 +725,10 @@
   justify-content: center;
   border-radius: var(--edit-send-radius);
 }
+.touchchat-edit-send[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
 .touchchat-edit-send:hover {
   background: var(--edit-send-hover-bg);
   color: var(--edit-send-hover-color);
@@ -581,6 +792,122 @@
   flex-direction: column;
   gap: 1em;
 }
+.touchchat-dialog-content .touchchat-list-box {
+  display: flex;
+}
+.touchchat-dialog-content .touchchat-list-box .touchchat-list-check {
+  padding: 0 1em;
+}
+.touchchat-dialog-content .touchchat-list-box .touchchat-list-check input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  cursor: pointer;
+  position: relative;
+}
+.touchchat-dialog-content .touchchat-list-box .touchchat-list-check input[type='checkbox']:checked {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+.touchchat-dialog-content .touchchat-list-box .touchchat-list-check input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 7px;
+  border: solid #fff;
+  /* 加粗线条 */
+  border-width: 0 2.5px 2.5px 0;
+  transform: translate(-50%, -65%) rotate(45deg);
+}
+.touchchat-dialog-content .touchchat-list-box .touchchat-list-content {
+  flex: 1;
+}
+.touchchat-dialog-content .touchchat-list-box .touchchat-list-content.status-select {
+  background-color: #eee;
+}
+.touchchat-dialog-content .touchchat-list-box .touchchat-list-content.select-mode * {
+  pointer-events: none;
+}
+.touchchat-dialog-withDraw {
+  text-align: center;
+  color: #868686;
+}
+table.touchchat-table {
+  width: 100%;
+  border-collapse: separate;
+  margin: 1em 0;
+  font-size: 0.9em;
+}
+table.touchchat-table th,
+table.touchchat-table td {
+  padding: 0.75em 1em;
+  border: 1px solid #ddd;
+  text-align: left;
+  vertical-align: top;
+}
+table.touchchat-table th {
+  background-color: #f5f5f5;
+  font-weight: bold;
+}
+table.touchchat-table tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+table.touchchat-table tr:hover {
+  background-color: #f1f1f1;
+}
+.delete-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+.delete-dialog {
+  background-color: white;
+  border-radius: 0.5em;
+  padding: 1.25em;
+  width: 18.75em;
+}
+.delete-dialog-title {
+  font-size: 1.125em;
+  font-weight: bold;
+  margin-bottom: 0.9375em;
+}
+.delete-dialog-content {
+  font-size: 0.875em;
+  color: #666;
+  margin-bottom: 1.25em;
+}
+.delete-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.625em;
+}
+.delete-dialog-cancel {
+  padding: 0.5em 1em;
+  background-color: #f0f0f0;
+  border: none;
+  border-radius: 0.25em;
+  cursor: pointer;
+}
+.delete-dialog-confirm {
+  padding: 0.5em 1em;
+  background-color: #ff4d4f;
+  color: white;
+  border: none;
+  border-radius: 0.25em;
+  cursor: pointer;
+}
 .touchchat {
   --action-item-width: 1.5em;
   --action-item-height: 1.5em;
@@ -602,16 +929,25 @@
   --action-refresh-content: '\e606';
   --action-good-content: '\e60a';
   --action-bad-content: '\e601';
+  --action-quote-content: '\e616';
+  --action-share-content: '\e615';
+  --action-enter-content: '\e673';
   --action-good-on-content: '\e60e';
   --action-bad-on-content: '\e60d';
   --action-good-on-color: red;
   --action-bad-on-color: red;
+  --user-read-on-color: #3bb346;
   --action-tip-padding: 0.5em 1em;
   --action-tip-bg: rgba(0, 0, 0, 0.9);
   --action-tip-color: #fff;
   --action-tip-lh: 1.3em;
   --action-tip-radius: 0.25em;
   --action-tip-arrow-size: 0.4em;
+  --user-read-content: '\ea42';
+  --user-is-read-content: '\e63c';
+  --quote-close-fill-content: '\e724';
+  --ai-may-like-item-icon-content: '\e72c';
+  --ai-may-like-item-icon-color: #000;
 }
 .touchchat-action-item {
   position: relative;
@@ -649,6 +985,35 @@
 .touchchat-action-item.value-refresh {
   --action-icon-content: var(--action-refresh-content);
 }
+.touchchat-action-item.value-quote {
+  --action-icon-content: var(--action-quote-content);
+}
+.touchchat-action-item.value-enter {
+  --action-icon-content: var(--action-enter-content);
+}
+.touchchat-action-item.value-share {
+  --action-icon-content: var(--action-share-content);
+}
+.touchchat-action-item.value-read {
+  --action-icon-content: var(--user-read-content);
+  --action-item-height: 1em;
+}
+.touchchat-action-item.value-read.is-read {
+  --action-icon-content: var(--user-is-read-content);
+  color: var(--user-read-on-color);
+  --action-item-height: 1em;
+}
+.touchchat-action-item.value-close-fill {
+  --action-icon-content: var(--quote-close-fill-content);
+}
+.touchchat-action-item.value-right-arrow {
+  --action-icon-content: var(--ai-may-like-item-icon-content);
+  color: var(--ai-may-like-item-icon-color);
+}
+.touchchat-action-item.value-right-arrow:hover {
+  background-color: transparent;
+  color: var(--ai-may-like-item-icon-color);
+}
 .touchchat-action-item.value-good.is-on {
   --action-icon-content: var(--action-good-on-content);
   color: var(--action-good-on-color);
@@ -709,6 +1074,7 @@
   --tooltip-radius: 0.25em;
   --tooltip-lh: 1.3em;
   --tooltip-arrow-size: 0.4em;
+  --main-padding: 1em;
   --side-width: 18em;
   --side-bg: #f7f8fa;
   --side-padding: 1em;
@@ -883,7 +1249,9 @@
 .touchchat {
   display: flex;
   flex-direction: column;
+  width: 100%;
   height: 100%;
+  position: relative;
 }
 .touchchat-header {
   padding: var(--header-padding);
@@ -900,6 +1268,8 @@
   flex: 1;
   display: flex;
   min-height: 0;
+  width: 100%;
+  height: 100%;
 }
 .touchchat-side {
   box-sizing: border-box;
@@ -962,7 +1332,6 @@
   font-size: var(--add-icon-size);
   font-family: var(--add-icon-family);
   content: var(--add-icon-content);
-  vertical-align: top;
 }
 .touchchat-add-text {
   font-size: var(--add-size);
@@ -1049,7 +1418,12 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  width: calc(100% - var(--side-width));
   height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  padding: var(--main-padding);
+  background-color: #ffffff;
 }
 .touchchat-history {
   flex: 1;
@@ -1167,7 +1541,7 @@
   content: '';
   position: absolute;
   top: 100%;
-  left: 50%;
+  left: 0.75em;
   margin-left: calc(-1 * var(--tooltip-arrow-size));
   border-width: var(--tooltip-arrow-size);
   border-style: solid;
@@ -1354,12 +1728,19 @@
 .touchchat-user-avatar {
   order: 2;
 }
+.file-user-avatar {
+  padding-top: 4em;
+}
 .touchchat-user-avatar-pic {
   width: var(--user-avatar-pic-width);
   height: var(--user-avatar-pic-height);
   border-radius: var(--user-avatar-pic-radius);
   order: 2;
 }
+.touch-user-wrapper {
+  display: flex;
+  align-items: flex-end;
+}
 .touchchat-user-bubble {
   flex: 1;
   background: var(--user-bubble-bg);
@@ -1386,6 +1767,9 @@
   font-weight: var(--user-bubble-text-weight);
   font-family: var(--user-bubble-text-family);
 }
+.touchchat-action-item.value-read.no-hover:hover {
+  background: transparent;
+}
 .touchchat-user-edit {
   border: var(--user-edit-border);
   overflow: hidden;
@@ -1460,6 +1844,78 @@
 .touchchat-user-send-text {
   font-size: var(--user-send-size);
 }
+.step-container {
+  font-family: Arial, sans-serif;
+}
+.step-item {
+  display: flex;
+  margin-bottom: 1.25em;
+  align-items: flex-start;
+  position: relative;
+  /* 为连接线定位做准备 */
+}
+.step-marker {
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: bold;
+  margin-right: 1em;
+  flex-shrink: 0;
+}
+.completed .step-marker {
+  background: var(--Brand-Brand-, #0077fa);
+}
+.ongoing .step-marker {
+  background: var(--Brand-Brand-, #0077fa);
+}
+.ongoing .step-content h3 {
+  color: var(--Brand-Brand-, #0077fa);
+}
+.check-icon {
+  font-size: 1.125em;
+}
+.step-content {
+  flex: 1;
+  margin-bottom: 1em;
+}
+.step-content h3 {
+  margin-top: 0;
+  font-size: 1.125em;
+  font-weight: 600;
+  margin-bottom: 0.5em;
+}
+.step-content p {
+  margin: 0.25em 0;
+  line-height: 1.5;
+  color: #333;
+}
+/* 修改连接线样式 */
+.step-connector {
+  position: absolute;
+  left: 0.75em;
+  top: 2em;
+  height: calc(100% - 1.25em);
+  width: 2px;
+  background: var(--Brand-Brand-, #0077fa);
+  border-radius: 2px;
+}
+/* 最后一个 step-item 不显示连接线 */
+.step-item:last-child .step-connector {
+  display: none;
+}
+.step-item:last-child,
+.step-item:last-child .step-content {
+  margin-bottom: 0;
+}
+.touchchat-agents {
+  display: flex;
+  flex-direction: column;
+  gap: var(--history-group-gap);
+}
 .card-container {
   padding-top: 0.75em;
 }
@@ -1739,6 +2195,476 @@
   -moz-box-orient: vertical;
   line-clamp: 2;
 }
+.file-content {
+  --file-content-pd: 0.75em;
+  --file-content-gap: 0.75em;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  overflow: visible;
+}
+.file-content-scroll {
+  display: flex;
+  overflow-x: auto;
+  align-items: flex-start;
+  gap: var(--file-content-gap);
+  padding: 0.5em 0;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  /* IE 和 Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+.file-content-scroll::-webkit-scrollbar {
+  display: none;
+}
+.file-content-right-tip,
+.file-content-left-tip {
+  position: absolute;
+  top: 0;
+  width: 3.25em;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.625em;
+}
+.file-content-right-tip {
+  right: 0;
+  justify-content: flex-end;
+  background: linear-gradient(270deg, #fff 55.88%, rgba(255, 255, 255, 0.7) 80.15%, rgba(255, 255, 255, 0) 100%);
+}
+.file-content-left-tip {
+  left: 0;
+  justify-content: flex-start;
+  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 55.88%, rgba(255, 255, 255, 0.7) 80.15%, #fff 100%);
+}
+.file-content-left-tip .file-content-svg {
+  transform: rotate(180deg);
+}
+.file-content-svg {
+  display: flex;
+  width: 1em;
+  height: 1em;
+  padding: 0.25em;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 0.375em;
+  border: 1px solid var(--Border-Border-, #d8dce4);
+  background: var(--Neutral-colors-White, #fff);
+}
+.quote-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75em;
+}
+.quote-content-text {
+  border-radius: 0.5em;
+  background: #eaecf0b3;
+  font-size: 1em;
+  padding: 0.625em 0.5em 0.6875em 0.875em;
+  color: #434c59;
+}
+.image-file {
+  --image-file-pd: 0.75em;
+}
+.image-file-content {
+  position: relative;
+  width: 3.5em;
+  height: 3.5em;
+  cursor: pointer;
+}
+.image-file-content img {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  border-radius: 0.5em;
+}
+.image-file-content .image-file-colse {
+  position: absolute;
+  right: -0.4375em;
+  top: -0.4375em;
+  width: 0.9375em;
+  height: 0.9375em;
+  background-color: rgba(0, 0, 0, 0.7);
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  display: none;
+}
+.image-file-content .img-file-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  border-radius: 0.5em;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.image-file-content .img-file-loading .img-file-title,
+.image-file-content .img-file-loading .img-file-error {
+  color: var(--text-icon-text-icon, #fff);
+  text-align: center;
+  font-family: 'PingFang SC';
+  font-size: 0.75em;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25em;
+}
+.image-file-content .img-file-loading .img-file-error {
+  margin-top: 0.375em;
+  color: var(--Danger-Danger-, #f93920);
+}
+.image-file-content .img-file-loading svg {
+  animation: 0.5s loading steps(32) infinite;
+}
+.image-file-content .img-error-loading svg {
+  animation: null;
+}
+.image-file-content .img-error-loading:hover {
+  opacity: 0.8;
+}
+.image-file-content:hover .image-file-colse {
+  display: flex;
+}
+.image-preview-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+.image-preview-content {
+  max-width: 90%;
+  max-height: 90%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.image-preview-content img {
+  max-width: 100%;
+  max-height: 100%;
+}
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.pdf-file {
+  --danger-color: #fc4253;
+  --success-color: #1d77ff;
+  --text-icon: #1d2129;
+  --text-icon-info: #86909c;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  flex-shrink: 0;
+  padding: 0.75em;
+  border-radius: 0.5em;
+  border: 1px solid var(--Border-Border-, #eaecf0);
+  background: var(--Fill-Fill--, #f7f8fa);
+  position: relative;
+  overflow: visible;
+}
+.pdf-file:hover .pdf-file-colse {
+  display: flex;
+}
+.pdf-file-img {
+  width: 1.625em;
+  height: 1.625em;
+  flex-shrink: 0;
+}
+.pdf-file-reset {
+  cursor: pointer;
+}
+.pdf-file-reset:hover {
+  opacity: 0.5;
+}
+.pdf-file-center {
+  width: 11em;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex: 1 0 0;
+  overflow: visible;
+  position: relative;
+}
+.pdf-file-center p {
+  font-family: 'PingFang SC';
+  font-size: 0.75em;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25em;
+}
+.pdf-file-title {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-icon, #1d2129);
+}
+.pdf-file-info {
+  color: var(--text-icon-info, #86909c);
+}
+.pdf-file-progress {
+  border-radius: 6.1875em;
+  width: 100%;
+  height: 0.1875em;
+  position: absolute;
+  bottom: 0;
+  left: 2.875em;
+}
+.pdf-file-colse {
+  position: absolute;
+  cursor: pointer;
+  right: -0.4375em;
+  top: -0.4375em;
+  width: 0.9375em;
+  height: 0.9375em;
+  background-color: rgba(0, 0, 0, 0.7);
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  display: none;
+}
+.pdf-file-tooltip {
+  position: absolute;
+  top: -4em;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+  font-size: 0.75em;
+  z-index: 1000;
+  max-width: 18.75em;
+  word-break: break-all;
+  white-space: normal;
+}
+.pdf-file-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -0.3125em;
+  border-width: 0.3125em;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+}
+.pdf-error {
+  background: linear-gradient(0deg, rgba(252, 66, 83, 0.05) 0%, rgba(252, 66, 83, 0.05) 100%), #fff;
+}
+.pdf-error .pdf-file-title {
+  color: var(--danger-color, #fc4253);
+}
+.pdf-error .pdf-file-progress {
+  background: var(--danger-color, #fc4253);
+}
+.pdf-success .pdf-file-title {
+  color: var(--text-icon, #1d2129);
+}
+.pdf-success .pdf-file-progress {
+  background: var(--success-color, #1d77ff);
+}
+.pdf-success .pdf-file-reset {
+  opacity: 0;
+}
+.screenshot-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.1);
+  z-index: 9999;
+}
+.selection-area {
+  position: absolute;
+  border: 0.25em dashed #0077fa;
+  background-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+}
+.screenshot-actions {
+  position: fixed;
+  bottom: 1.25em;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 1.25em;
+}
+.screenshot-actions button {
+  padding: 0.5em 1em;
+  cursor: pointer;
+}
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+}
+.dialog {
+  background-color: white;
+  width: 30%;
+  border-radius: 0.25em;
+  overflow: hidden;
+}
+.dialog-header {
+  padding: 0.9375em;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #ebeef5;
+}
+.dialog-header h3 {
+  margin: 0;
+  font-size: 1.125em;
+  color: #303133;
+}
+.dialog-body {
+  padding: 1.25em 0.9375em;
+  border-bottom: 1px solid #ebeef5;
+}
+.dialog-body p {
+  margin: 0;
+  color: #606266;
+}
+.dialog-footer {
+  padding: 0.9375em;
+  text-align: right;
+}
+.hang-up-button {
+  padding: 0.5em 1em;
+  font-size: 0.875em;
+  cursor: pointer;
+  background-color: #f56c6c;
+  color: white;
+  border: none;
+  border-radius: 0.25em;
+}
+.hang-up-button:hover {
+  background-color: #f78989;
+}
+.transcription-result {
+  margin-top: 1.25em;
+  padding: 0.9375em;
+  border: 1px solid #ebeef5;
+  border-radius: 0.25em;
+}
+.transcription-result h4 {
+  margin-top: 0;
+  color: #303133;
+}
+.transcription-result p {
+  color: #606266;
+}
+.touchchat-custom-select {
+  position: relative;
+  display: inline-block;
+  min-width: 8.125em;
+  font-size: 0.875em;
+  outline: none;
+}
+.touchchat-custom-select .touchchat-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: linear-gradient(to bottom, #ffffff, #f7f7f7);
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5em;
+  padding: 0.625em 0.875em;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 1px 0.125em rgba(0, 0, 0, 0.05);
+}
+.touchchat-custom-select .touchchat-select-trigger:hover {
+  background: linear-gradient(to bottom, #ffffff, #fafafa);
+  border-color: #d0d0d0;
+  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.08);
+}
+.touchchat-custom-select .touchchat-select-trigger.is-focused {
+  border-color: #409eff;
+  box-shadow: 0 0 0 0.1875em rgba(64, 158, 255, 0.15);
+}
+.touchchat-custom-select .touchchat-select-text {
+  color: #444;
+  font-weight: 500;
+  flex-grow: 1;
+}
+.touchchat-custom-select .touchchat-select-icon {
+  width: 0;
+  height: 0;
+  border-left: 0.375em solid transparent;
+  border-right: 0.375em solid transparent;
+  border-top: 0.375em solid #666;
+  margin-left: 0.5em;
+  transition: transform 0.3s ease;
+}
+.touchchat-custom-select .touchchat-select-icon.is-open {
+  transform: rotate(180deg);
+}
+.touchchat-custom-select .touchchat-select-dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5em;
+  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  margin-top: 0.25em;
+  max-height: 12.5em;
+  overflow-y: auto;
+}
+.touchchat-custom-select .touchchat-select-dropdown.is-upward {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.25em;
+}
+.touchchat-custom-select .touchchat-select-dropdown:not(.is-upward) {
+  top: 100%;
+}
+.touchchat-custom-select .touchchat-select-option {
+  padding: 0.625em 0.875em;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  color: #444;
+}
+.touchchat-custom-select .touchchat-select-option:hover {
+  background-color: #f5f7fa;
+}
+.touchchat-custom-select .touchchat-select-option.is-selected {
+  background-color: #e6f7ff;
+  color: #1890ff;
+  font-weight: 500;
+}
+.touchchat-custom-select .touchchat-select-option:first-child {
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
+}
+.touchchat-custom-select .touchchat-select-option:last-child {
+  border-bottom-left-radius: 0.5em;
+  border-bottom-right-radius: 0.5em;
+}
 :root {
   --color-primary: #0077fa;
   --color-primary-plain: #f0f7ff;