@touchvue/chat 1.0.0-beta.4 → 1.0.0-beta.40

package/theme/index.css

@@ -124,6 +124,15 @@
   border-radius: 0 0.5em 0.5em 0.5em;
   border: var(--ai-bubble-border);
 }
+.no-bobble-border {
+  padding: 0;
+}
+.no-bobble-border:after {
+  display: none;
+}
+.no-bobble-border:before {
+  display: none;
+}
 .touchchat-ai-avatar-pic {
   width: var(--ai-avatar-pic-width);
   height: var(--ai-avatar-pic-height);
@@ -213,7 +222,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);
@@ -297,7 +306,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;
@@ -306,23 +316,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;
@@ -333,7 +341,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);
@@ -349,6 +357,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);
@@ -366,38 +384,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;
@@ -421,28 +477,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;
 }
@@ -451,6 +508,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);
@@ -497,6 +674,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);
 }
@@ -512,6 +712,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);
@@ -575,6 +779,77 @@
   flex-direction: column;
   gap: 1em;
 }
+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;
@@ -703,6 +978,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;
@@ -772,12 +1048,12 @@
   --add-lite-icon-size: var(--add-lite-size);
   --add-lite-icon-family: var(--add-lite-family);
   --add-lite-icon-content: '\e600';
-  --add-lite-color: inherit;
-  --add-lite-border: none;
-  --add-lite-hover-bg: rgba(0, 0, 0, 0.1);
+  --add-lite-color: #1361ff;
+  --add-lite-border: 1px solid var(--add-lite-color);
+  --add-lite-hover-bg: rgba(19, 97, 255, 0.1);
   --add-lite-hover-color: var(--add-lite-color);
   --add-lite-hover-border: var(--add-lite-border);
-  --add-lite-active-bg: rgba(0, 0, 0, 0.3);
+  --add-lite-active-bg: rgba(19, 97, 255, 0.3);
   --add-lite-active-color: var(--add-lite-color);
   --add-lite-active-border: var(--add-lite-border);
   --history-gap: 1em;
@@ -877,14 +1153,16 @@
 .touchchat {
   display: flex;
   flex-direction: column;
+  width: 100%;
   height: 100%;
+  position: relative;
 }
 .touchchat-header {
   padding: var(--header-padding);
   display: flex;
   align-items: center;
   gap: var(--header-gap);
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   background-color: #ffffff;
@@ -894,6 +1172,8 @@
   flex: 1;
   display: flex;
   min-height: 0;
+  width: 100%;
+  height: 100%;
 }
 .touchchat-side {
   box-sizing: border-box;
@@ -956,7 +1236,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);
@@ -1015,14 +1294,14 @@
 }
 .touchchat-add-lite {
   box-sizing: border-box;
-  width: var(--add-lite-width);
-  height: var(--add-lite-height);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--add-lite-radius);
   color: var(--add-lite-color);
   border: var(--add-lite-border);
+  padding: 0 1em;
+  cursor: pointer;
 }
 .touchchat-add-lite:hover {
   color: var(--add-lite-hover-color);
@@ -1043,7 +1322,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;
@@ -1161,7 +1445,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;
@@ -1348,6 +1632,9 @@
 .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);
@@ -1454,6 +1741,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;
 }
@@ -1733,6 +2092,464 @@
   -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);
+}
+.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;