@touchvue/chat 1.0.0-beta.54 → 1.0.0-beta.55

package/theme/index.css

@@ -1010,6 +1010,7 @@ table.touchchat-table tr:hover {
   --action-icon-content: var(--quote-close-fill-content);
 }
 .touchchat-action-item.value-right-arrow {
+  cursor: pointer;
   --action-icon-content: var(--ai-may-like-item-icon-content);
   color: var(--ai-may-like-item-icon-color);
 }
@@ -1661,6 +1662,7 @@ table.touchchat-table tr:hover {
   --user-avatar-pic-width: 2.5em;
   --user-avatar-pic-height: auto;
   --user-avatar-pic-radius: 50%;
+  --user-file-avatar-padding-top: 4em;
   --user-bubble-bg: var(--color-primary);
   --user-bubble-color: #fff;
   --user-bubble-padding: 1em 1.5em;
@@ -1711,6 +1713,27 @@ table.touchchat-table tr:hover {
   --user-send-active-bg: #005fc7;
   --user-send-active-color: var(--user-send-color);
   --user-send-active-border: var(--user-send-border);
+  --audio-icon-width: 2em;
+  --audio-icon-height: 2em;
+  --audio-icon-bg: #fff;
+  --audio-icon-radius: 50%;
+  --audio-icon-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.1);
+  --audio-icon-color: #0077fa;
+  --audio-icon-size: 1em;
+  --audio-duration-margin: 0 0 0 1em;
+  --audio-wave-gap: 0.2em;
+  --audio-wave-margin: 0 0 0 0.5em;
+  --audio-wave-width: 0.2em;
+  --audio-wave-height: 0.2em;
+  --audio-wave-bg: #fff;
+  --audio-wave-radius: 0.2em;
+  --audio-wave-start-height: 0.2em;
+  --audio-wave-end-height: 1.25em;
+  --audio-wave-during: 0.2s;
+  --viewed-color: var(--color-primary);
+  --viewed-radius: 50%;
+  --viewed-margin: 0 0 1.7em auto;
+  --viewed-width: 1.5em;
 }
 .touchchat-user {
   display: flex;
@@ -1732,7 +1755,7 @@ table.touchchat-table tr:hover {
   order: 2;
 }
 .file-user-avatar {
-  padding-top: 4em;
+  padding-top: var(--user-file-avatar-padding-top);
 }
 .touchchat-user-avatar-pic {
   width: var(--user-avatar-pic-width);
@@ -1740,7 +1763,7 @@ table.touchchat-table tr:hover {
   border-radius: var(--user-avatar-pic-radius);
   order: 2;
 }
-.touch-user-wrapper {
+.touchchat-user-wrapper {
   display: flex;
   align-items: flex-end;
 }
@@ -1765,6 +1788,15 @@ table.touchchat-table tr:hover {
   background: var(--user-bubble-arrow-bg);
   background-size: var(--user-bubble-arrow-bg-size);
 }
+.touchchat-user-bubble.is-link {
+  cursor: pointer;
+}
+.touchchat-user-bubble.is-link:hover {
+  filter: brightness(1.2);
+}
+.touchchat-user-bubble.is-link:active {
+  filter: brightness(0.8);
+}
 .touchchat-user-bubble-text {
   font-size: var(--user-bubble-text-size);
   font-weight: var(--user-bubble-text-weight);
@@ -1847,6 +1879,93 @@ table.touchchat-table tr:hover {
 .touchchat-user-send-text {
   font-size: var(--user-send-size);
 }
+.touchchat-audio {
+  display: flex;
+  align-items: center;
+}
+.touchchat-audio-icon {
+  flex-shrink: 0;
+  width: var(--audio-icon-width);
+  height: var(--audio-icon-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--audio-icon-bg);
+  border-radius: var(--audio-icon-radius);
+  box-shadow: var(--audio-icon-shadow);
+}
+.touchchat-audio-icon-play {
+  font-family: 'touchchat-icon';
+  font-size: var(--audio-icon-size);
+  color: var(--audio-icon-color);
+}
+.touchchat-audio-icon-play:before {
+  content: '\e619';
+}
+.touchchat-audio-icon-pause {
+  font-family: 'touchchat-icon';
+  font-size: var(--audio-icon-size);
+  color: var(--audio-icon-color);
+}
+.touchchat-audio-icon-pause:before {
+  content: '\e618';
+}
+.touchchat-audio-duration {
+  margin: var(--audio-duration-margin);
+}
+.touchchat-audio-wave {
+  display: flex;
+  align-items: center;
+  gap: var(--audio-wave-gap);
+  margin: var(--audio-wave-margin);
+}
+.touchchat-audio-wave-bar {
+  width: var(--audio-wave-width);
+  height: var(--audio-wave-start-height);
+  background: var(--audio-wave-bg);
+  border-radius: var(--audio-wave-radius);
+  transition: height var(--audio-wave-during);
+}
+.touchchat-audio-wave.is-playing .touchchat-audio-wave-bar {
+  animation: wave 0.8s ease-in-out infinite;
+}
+.touchchat-audio-wave.is-playing .touchchat-audio-wave-bar:nth-child(1) {
+  animation-delay: 0s;
+}
+.touchchat-audio-wave.is-playing .touchchat-audio-wave-bar:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.touchchat-audio-wave.is-playing .touchchat-audio-wave-bar:nth-child(3) {
+  animation-delay: 0.2s;
+}
+.touchchat-audio-wave.is-playing .touchchat-audio-wave-bar:nth-child(4) {
+  animation-delay: 0.3s;
+}
+@keyframes wave {
+  0%,
+  100% {
+    height: var(--audio-wave-start-height);
+  }
+  50% {
+    height: var(--audio-wave-end-height);
+  }
+}
+.touchchat-viewed {
+  padding: 0.15em;
+  width: var(--viewed-width);
+  height: var(--viewed-width);
+  border: 0.15em solid var(--viewed-color);
+  border-radius: var(--viewed-radius);
+  margin: var(--viewed-margin);
+  box-sizing: border-box;
+  align-self: flex-end;
+}
+.touchchat-viewed-wrapper {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--viewed-radius);
+  background: conic-gradient(var(--viewed-color) 0%, var(--viewed-color) var(--value), transparent var(--value), transparent 100%);
+}
 .step-container {
   font-family: Arial, sans-serif;
 }
@@ -2328,12 +2447,25 @@ table.touchchat-table tr:hover {
   gap: 0.75em;
 }
 .quote-content-text {
+  cursor: pointer;
   border-radius: 0.5em;
   background: #eaecf0b3;
   font-size: 1em;
   padding: 0.625em 0.5em 0.6875em 0.875em;
   color: #434c59;
 }
+.quote-highlight {
+  animation: quote-flash 1s ease-in-out 2;
+}
+@keyframes quote-flash {
+  0%,
+  100% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: rgba(59, 130, 246, 0.15);
+  }
+}
 .image-file {
   --image-file-pd: 0.75em;
 }
@@ -2651,6 +2783,21 @@ table.touchchat-table tr:hover {
   min-width: 8.125em;
   font-size: 0.875em;
   outline: none;
+  white-space: nowrap;
+}
+.touchchat-custom-select .touchchat-select-measure {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  visibility: hidden;
+  overflow: hidden;
+}
+.touchchat-custom-select .touchchat-select-measure .touchchat-select-measure-item {
+  display: inline-block;
+  white-space: nowrap;
+  padding: 0.625em 0.875em;
+  font-size: 0.875em;
+  font-weight: 500;
 }
 .touchchat-custom-select .touchchat-select-trigger {
   display: flex;
@@ -2693,7 +2840,8 @@ table.touchchat-table tr:hover {
 .touchchat-custom-select .touchchat-select-dropdown {
   position: absolute;
   left: 0;
-  right: 0;
+  min-width: 100%;
+  width: max-content;
   background: white;
   border: 1px solid #e0e0e0;
   border-radius: 0.5em;
@@ -2717,6 +2865,7 @@ table.touchchat-table tr:hover {
   cursor: pointer;
   transition: background-color 0.2s ease;
   color: #444;
+  white-space: nowrap;
 }
 .touchchat-custom-select .touchchat-select-option:hover {
   background-color: #f5f7fa;

package/theme/skin/default.css

@@ -1010,6 +1010,7 @@ table.touchchat-table tr:hover {
   --action-icon-content: var(--quote-close-fill-content);
 }
 .touchchat-action-item.value-right-arrow {
+  cursor: pointer;
   --action-icon-content: var(--ai-may-like-item-icon-content);
   color: var(--ai-may-like-item-icon-color);
 }
@@ -1661,6 +1662,7 @@ table.touchchat-table tr:hover {
   --user-avatar-pic-width: 2.5em;
   --user-avatar-pic-height: auto;
   --user-avatar-pic-radius: 50%;
+  --user-file-avatar-padding-top: 4em;
   --user-bubble-bg: var(--color-primary);
   --user-bubble-color: #fff;
   --user-bubble-padding: 1em 1.5em;
@@ -1711,6 +1713,27 @@ table.touchchat-table tr:hover {
   --user-send-active-bg: #005fc7;
   --user-send-active-color: var(--user-send-color);
   --user-send-active-border: var(--user-send-border);
+  --audio-icon-width: 2em;
+  --audio-icon-height: 2em;
+  --audio-icon-bg: #fff;
+  --audio-icon-radius: 50%;
+  --audio-icon-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.1);
+  --audio-icon-color: #0077fa;
+  --audio-icon-size: 1em;
+  --audio-duration-margin: 0 0 0 1em;
+  --audio-wave-gap: 0.2em;
+  --audio-wave-margin: 0 0 0 0.5em;
+  --audio-wave-width: 0.2em;
+  --audio-wave-height: 0.2em;
+  --audio-wave-bg: #fff;
+  --audio-wave-radius: 0.2em;
+  --audio-wave-start-height: 0.2em;
+  --audio-wave-end-height: 1.25em;
+  --audio-wave-during: 0.2s;
+  --viewed-color: var(--color-primary);
+  --viewed-radius: 50%;
+  --viewed-margin: 0 0 1.7em auto;
+  --viewed-width: 1.5em;
 }
 .touchchat-user {
   display: flex;
@@ -1732,7 +1755,7 @@ table.touchchat-table tr:hover {
   order: 2;
 }
 .file-user-avatar {
-  padding-top: 4em;
+  padding-top: var(--user-file-avatar-padding-top);
 }
 .touchchat-user-avatar-pic {
   width: var(--user-avatar-pic-width);
@@ -1740,7 +1763,7 @@ table.touchchat-table tr:hover {
   border-radius: var(--user-avatar-pic-radius);
   order: 2;
 }
-.touch-user-wrapper {
+.touchchat-user-wrapper {
   display: flex;
   align-items: flex-end;
 }
@@ -1765,6 +1788,15 @@ table.touchchat-table tr:hover {
   background: var(--user-bubble-arrow-bg);
   background-size: var(--user-bubble-arrow-bg-size);
 }
+.touchchat-user-bubble.is-link {
+  cursor: pointer;
+}
+.touchchat-user-bubble.is-link:hover {
+  filter: brightness(1.2);
+}
+.touchchat-user-bubble.is-link:active {
+  filter: brightness(0.8);
+}
 .touchchat-user-bubble-text {
   font-size: var(--user-bubble-text-size);
   font-weight: var(--user-bubble-text-weight);
@@ -1847,6 +1879,93 @@ table.touchchat-table tr:hover {
 .touchchat-user-send-text {
   font-size: var(--user-send-size);
 }
+.touchchat-audio {
+  display: flex;
+  align-items: center;
+}
+.touchchat-audio-icon {
+  flex-shrink: 0;
+  width: var(--audio-icon-width);
+  height: var(--audio-icon-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--audio-icon-bg);
+  border-radius: var(--audio-icon-radius);
+  box-shadow: var(--audio-icon-shadow);
+}
+.touchchat-audio-icon-play {
+  font-family: 'touchchat-icon';
+  font-size: var(--audio-icon-size);
+  color: var(--audio-icon-color);
+}
+.touchchat-audio-icon-play:before {
+  content: '\e619';
+}
+.touchchat-audio-icon-pause {
+  font-family: 'touchchat-icon';
+  font-size: var(--audio-icon-size);
+  color: var(--audio-icon-color);
+}
+.touchchat-audio-icon-pause:before {
+  content: '\e618';
+}
+.touchchat-audio-duration {
+  margin: var(--audio-duration-margin);
+}
+.touchchat-audio-wave {
+  display: flex;
+  align-items: center;
+  gap: var(--audio-wave-gap);
+  margin: var(--audio-wave-margin);
+}
+.touchchat-audio-wave-bar {
+  width: var(--audio-wave-width);
+  height: var(--audio-wave-start-height);
+  background: var(--audio-wave-bg);
+  border-radius: var(--audio-wave-radius);
+  transition: height var(--audio-wave-during);
+}
+.touchchat-audio-wave.is-playing .touchchat-audio-wave-bar {
+  animation: wave 0.8s ease-in-out infinite;
+}
+.touchchat-audio-wave.is-playing .touchchat-audio-wave-bar:nth-child(1) {
+  animation-delay: 0s;
+}
+.touchchat-audio-wave.is-playing .touchchat-audio-wave-bar:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.touchchat-audio-wave.is-playing .touchchat-audio-wave-bar:nth-child(3) {
+  animation-delay: 0.2s;
+}
+.touchchat-audio-wave.is-playing .touchchat-audio-wave-bar:nth-child(4) {
+  animation-delay: 0.3s;
+}
+@keyframes wave {
+  0%,
+  100% {
+    height: var(--audio-wave-start-height);
+  }
+  50% {
+    height: var(--audio-wave-end-height);
+  }
+}
+.touchchat-viewed {
+  padding: 0.15em;
+  width: var(--viewed-width);
+  height: var(--viewed-width);
+  border: 0.15em solid var(--viewed-color);
+  border-radius: var(--viewed-radius);
+  margin: var(--viewed-margin);
+  box-sizing: border-box;
+  align-self: flex-end;
+}
+.touchchat-viewed-wrapper {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--viewed-radius);
+  background: conic-gradient(var(--viewed-color) 0%, var(--viewed-color) var(--value), transparent var(--value), transparent 100%);
+}
 .step-container {
   font-family: Arial, sans-serif;
 }
@@ -2328,12 +2447,25 @@ table.touchchat-table tr:hover {
   gap: 0.75em;
 }
 .quote-content-text {
+  cursor: pointer;
   border-radius: 0.5em;
   background: #eaecf0b3;
   font-size: 1em;
   padding: 0.625em 0.5em 0.6875em 0.875em;
   color: #434c59;
 }
+.quote-highlight {
+  animation: quote-flash 1s ease-in-out 2;
+}
+@keyframes quote-flash {
+  0%,
+  100% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: rgba(59, 130, 246, 0.15);
+  }
+}
 .image-file {
   --image-file-pd: 0.75em;
 }
@@ -2651,6 +2783,21 @@ table.touchchat-table tr:hover {
   min-width: 8.125em;
   font-size: 0.875em;
   outline: none;
+  white-space: nowrap;
+}
+.touchchat-custom-select .touchchat-select-measure {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  visibility: hidden;
+  overflow: hidden;
+}
+.touchchat-custom-select .touchchat-select-measure .touchchat-select-measure-item {
+  display: inline-block;
+  white-space: nowrap;
+  padding: 0.625em 0.875em;
+  font-size: 0.875em;
+  font-weight: 500;
 }
 .touchchat-custom-select .touchchat-select-trigger {
   display: flex;
@@ -2693,7 +2840,8 @@ table.touchchat-table tr:hover {
 .touchchat-custom-select .touchchat-select-dropdown {
   position: absolute;
   left: 0;
-  right: 0;
+  min-width: 100%;
+  width: max-content;
   background: white;
   border: 1px solid #e0e0e0;
   border-radius: 0.5em;
@@ -2717,6 +2865,7 @@ table.touchchat-table tr:hover {
   cursor: pointer;
   transition: background-color 0.2s ease;
   color: #444;
+  white-space: nowrap;
 }
 .touchchat-custom-select .touchchat-select-option:hover {
   background-color: #f5f7fa;