@touchvue/chat 1.0.0-beta.38 → 1.0.0-beta.39

package/theme/components/index.css

@@ -313,23 +313,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: #0062d6;
-  --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;
@@ -356,50 +354,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-delete-height: 2.5em;
-  --edit-delete-padding: 0 1em;
-  --edit-delete-bg: #fff;
-  --edit-delete-border: 1px solid #ddd;
-  --edit-delete-radius: 0.25em;
-  --edit-delete-color: inherit;
-  --edit-delete-gap: 0.5em;
-  --edit-delete-size: 1em;
-  --edit-delete-icon-size: var(--edit-delete-size);
+  --edit-attach-family: 'touchchat-icon';
+  --edit-attach-content: '\e73a';
   --edit-delete-family: 'touchchat-icon';
   --edit-delete-content: '\e73d';
-  --edit-screenshot-height: 2.5em;
-  --edit-screenshot-padding: 0 1em;
-  --edit-screenshot-bg: #fff;
-  --edit-screenshot-border: 1px solid #ddd;
-  --edit-screenshot-radius: 0.25em;
-  --edit-screenshot-color: inherit;
-  --edit-screenshot-gap: 0.5em;
-  --edit-screenshot-size: 1em;
-  --edit-screenshot-icon-size: var(--edit-screenshot-size);
   --edit-screenshot-family: 'touchchat-icon';
   --edit-screenshot-content: '\e73c';
-  --edit-voice-height: 2.5em;
-  --edit-voice-padding: 0 1em;
-  --edit-voice-bg: #fff;
-  --edit-voice-border: 1px solid #ddd;
-  --edit-voice-radius: 0.25em;
-  --edit-voice-color: inherit;
-  --edit-voice-gap: 0.5em;
-  --edit-voice-size: 1em;
-  --edit-voice-icon-size: var(--edit-voice-size);
   --edit-voice-family: 'touchchat-icon';
   --edit-voice-content: '\e73b';
-  --edit-record-height: 2.5em;
-  --edit-record-padding: 0 1em;
-  --edit-record-bg: #fff;
-  --edit-record-border: 1px solid #ddd;
-  --edit-record-radius: 0.25em;
-  --edit-record-color: inherit;
-  --edit-record-gap: 0.5em;
-  --edit-record-size: 1em;
-  --edit-record-icon-size: var(--edit-record-size);
   --edit-record-family: 'touchchat-icon';
-  --edit-record-content: '\e739';
+  --edit-record-content: '\ea42';
   --edit-send-width: 2.5em;
   --edit-send-height: 2.5em;
   --edit-send-bg: var(--color-primary);
@@ -423,7 +387,7 @@
   --edit-stop-color: #fff;
   --edit-stop-size: 1em;
   --edit-stop-family: 'touchchat-icon';
-  --edit-stop-content: '\e60f';
+  --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);
@@ -498,6 +462,7 @@
   font-size: var(--edit-input-size);
 }
 .touchchat-edit-submit {
+  padding: var(--edit-submit-padding);
   display: flex;
   justify-content: space-between;
 }
@@ -509,29 +474,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;
 }
@@ -540,45 +505,41 @@
   font-family: var(--edit-attach-family);
   content: var(--edit-attach-content);
 }
-.touchchat-edit-attach-tip {
+.touchchat-edit-tooltip {
   display: none;
   position: absolute;
   bottom: 100%;
-  left: 0;
+  left: 50%;
   background-color: rgba(0, 0, 0, 0.8);
   color: white;
-  padding: 1em;
+  padding: 0.5em 1em;
   border-radius: 0.25em;
   margin-bottom: 0.5em;
-  width: 20em;
-  height: 6em;
-}
-.touchchat-edit-attach-tip p {
-  text-align: left;
-}
-.touchchat-edit-voice-tip {
-  left: -100%;
-  width: 6em;
-  height: auto;
-}
-.touchchat-edit-voice-tip p {
-  text-align: center;
-}
-/* 创建小箭头 */
-.touchchat-edit-attach-tip::before,
-.touchchat-edit-attach-tip::after {
-  content: '';
-  position: absolute;
-  left: 1.25em;
+  white-space: nowrap;
+  line-height: 1.5em;
   transform: translateX(-50%);
 }
-/* 创建小箭头 */
-.touchchat-edit-voice-tip::before,
-.touchchat-edit-voice-tip::after {
+.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% {
@@ -664,22 +625,6 @@
 .touchchat-edit-rlvoice-mic-body {
   animation: shadowBreath 2s ease-in-out infinite;
 }
-/* 小箭头外框 */
-.touchchat-edit-attach-tip::before {
-  top: 100%;
-  border-width: 0.375em;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
-}
-.touchchat-edit-attach-tip::after {
-  top: calc(100% - 1px);
-  border-width: 0.375em;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
-}
-.touchchat-edit-attach:hover .touchchat-edit-attach-tip {
-  display: block;
-}
 .touchchat-edit-think {
   border: var(--edit-think-border);
   height: var(--edit-think-height);
@@ -731,6 +676,9 @@
   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);
@@ -761,6 +709,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);
@@ -2148,9 +2100,9 @@ table.touchchat-table tr:hover {
 .file-content-scroll {
   display: flex;
   overflow-x: auto;
-  overflow-y: hidden;
   align-items: flex-start;
   gap: var(--file-content-gap);
+  padding: 0.5em 0;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
   /* IE 和 Edge */
@@ -2213,10 +2165,10 @@ table.touchchat-table tr:hover {
 }
 .image-file-content .image-file-colse {
   position: absolute;
-  right: -0.3125em;
-  top: -0.3125em;
-  width: 0.625em;
-  height: 0.625em;
+  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;
@@ -2363,10 +2315,10 @@ table.touchchat-table tr:hover {
 .pdf-file-colse {
   position: absolute;
   cursor: pointer;
-  right: -0.3125em;
-  top: -0.3125em;
-  width: 0.625em;
-  height: 0.625em;
+  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;

package/theme/index.css

@@ -316,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: #0062d6;
-  --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;
@@ -359,50 +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-delete-height: 2.5em;
-  --edit-delete-padding: 0 1em;
-  --edit-delete-bg: #fff;
-  --edit-delete-border: 1px solid #ddd;
-  --edit-delete-radius: 0.25em;
-  --edit-delete-color: inherit;
-  --edit-delete-gap: 0.5em;
-  --edit-delete-size: 1em;
-  --edit-delete-icon-size: var(--edit-delete-size);
+  --edit-attach-family: 'touchchat-icon';
+  --edit-attach-content: '\e73a';
   --edit-delete-family: 'touchchat-icon';
   --edit-delete-content: '\e73d';
-  --edit-screenshot-height: 2.5em;
-  --edit-screenshot-padding: 0 1em;
-  --edit-screenshot-bg: #fff;
-  --edit-screenshot-border: 1px solid #ddd;
-  --edit-screenshot-radius: 0.25em;
-  --edit-screenshot-color: inherit;
-  --edit-screenshot-gap: 0.5em;
-  --edit-screenshot-size: 1em;
-  --edit-screenshot-icon-size: var(--edit-screenshot-size);
   --edit-screenshot-family: 'touchchat-icon';
   --edit-screenshot-content: '\e73c';
-  --edit-voice-height: 2.5em;
-  --edit-voice-padding: 0 1em;
-  --edit-voice-bg: #fff;
-  --edit-voice-border: 1px solid #ddd;
-  --edit-voice-radius: 0.25em;
-  --edit-voice-color: inherit;
-  --edit-voice-gap: 0.5em;
-  --edit-voice-size: 1em;
-  --edit-voice-icon-size: var(--edit-voice-size);
   --edit-voice-family: 'touchchat-icon';
   --edit-voice-content: '\e73b';
-  --edit-record-height: 2.5em;
-  --edit-record-padding: 0 1em;
-  --edit-record-bg: #fff;
-  --edit-record-border: 1px solid #ddd;
-  --edit-record-radius: 0.25em;
-  --edit-record-color: inherit;
-  --edit-record-gap: 0.5em;
-  --edit-record-size: 1em;
-  --edit-record-icon-size: var(--edit-record-size);
   --edit-record-family: 'touchchat-icon';
-  --edit-record-content: '\e739';
+  --edit-record-content: '\ea42';
   --edit-send-width: 2.5em;
   --edit-send-height: 2.5em;
   --edit-send-bg: var(--color-primary);
@@ -426,7 +390,7 @@
   --edit-stop-color: #fff;
   --edit-stop-size: 1em;
   --edit-stop-family: 'touchchat-icon';
-  --edit-stop-content: '\e60f';
+  --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);
@@ -501,6 +465,7 @@
   font-size: var(--edit-input-size);
 }
 .touchchat-edit-submit {
+  padding: var(--edit-submit-padding);
   display: flex;
   justify-content: space-between;
 }
@@ -512,29 +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;
 }
@@ -543,45 +508,41 @@
   font-family: var(--edit-attach-family);
   content: var(--edit-attach-content);
 }
-.touchchat-edit-attach-tip {
+.touchchat-edit-tooltip {
   display: none;
   position: absolute;
   bottom: 100%;
-  left: 0;
+  left: 50%;
   background-color: rgba(0, 0, 0, 0.8);
   color: white;
-  padding: 1em;
+  padding: 0.5em 1em;
   border-radius: 0.25em;
   margin-bottom: 0.5em;
-  width: 20em;
-  height: 6em;
-}
-.touchchat-edit-attach-tip p {
-  text-align: left;
-}
-.touchchat-edit-voice-tip {
-  left: -100%;
-  width: 6em;
-  height: auto;
-}
-.touchchat-edit-voice-tip p {
-  text-align: center;
-}
-/* 创建小箭头 */
-.touchchat-edit-attach-tip::before,
-.touchchat-edit-attach-tip::after {
-  content: '';
-  position: absolute;
-  left: 1.25em;
+  white-space: nowrap;
+  line-height: 1.5em;
   transform: translateX(-50%);
 }
-/* 创建小箭头 */
-.touchchat-edit-voice-tip::before,
-.touchchat-edit-voice-tip::after {
+.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% {
@@ -667,22 +628,6 @@
 .touchchat-edit-rlvoice-mic-body {
   animation: shadowBreath 2s ease-in-out infinite;
 }
-/* 小箭头外框 */
-.touchchat-edit-attach-tip::before {
-  top: 100%;
-  border-width: 0.375em;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
-}
-.touchchat-edit-attach-tip::after {
-  top: calc(100% - 1px);
-  border-width: 0.375em;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
-}
-.touchchat-edit-attach:hover .touchchat-edit-attach-tip {
-  display: block;
-}
 .touchchat-edit-think {
   border: var(--edit-think-border);
   height: var(--edit-think-height);
@@ -734,6 +679,9 @@
   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);
@@ -764,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);
@@ -2151,9 +2103,9 @@ table.touchchat-table tr:hover {
 .file-content-scroll {
   display: flex;
   overflow-x: auto;
-  overflow-y: hidden;
   align-items: flex-start;
   gap: var(--file-content-gap);
+  padding: 0.5em 0;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
   /* IE 和 Edge */
@@ -2216,10 +2168,10 @@ table.touchchat-table tr:hover {
 }
 .image-file-content .image-file-colse {
   position: absolute;
-  right: -0.3125em;
-  top: -0.3125em;
-  width: 0.625em;
-  height: 0.625em;
+  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;
@@ -2366,10 +2318,10 @@ table.touchchat-table tr:hover {
 .pdf-file-colse {
   position: absolute;
   cursor: pointer;
-  right: -0.3125em;
-  top: -0.3125em;
-  width: 0.625em;
-  height: 0.625em;
+  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;