yx-web-sdk 0.0.18 → 0.0.20

package/dist/ait-person-popover/index.js

@@ -1,4 +1,4 @@
-import { A as AitPersonPopover } from "../index-sJcDnl5D.mjs";
+import { A as AitPersonPopover } from "../index-Dwglj7_M.mjs";
 export {
   AitPersonPopover,
   AitPersonPopover as default

package/dist/chat-card/index.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../index.vue_vue_type_style_index_0_lang-oO4NDv0U.mjs";
+import { _ as _sfc_main } from "../index.vue_vue_type_style_index_0_lang-CBpDXwwP.mjs";
 export {
   _sfc_main as ChatCard,
   _sfc_main as default

package/dist/chat-content/index.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../index.vue_vue_type_style_index_0_lang-BdIDeEyF.mjs";
+import { _ as _sfc_main } from "../index.vue_vue_type_style_index_0_lang-QCNj8WyS.mjs";
 export {
   _sfc_main as ChatContent,
   _sfc_main as default

package/dist/chat-page/index.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../index.vue_vue_type_style_index_0_lang-BxxUcry3.mjs";
+import { _ as _sfc_main } from "../index.vue_vue_type_style_index_0_lang-E3PcX8MA.mjs";
 export {
   _sfc_main as ChatPage,
   _sfc_main as default

package/dist/chat-room/index.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../index.vue_vue_type_script_setup_true_lang-0YeDxfed.mjs";
+import { _ as _sfc_main } from "../index.vue_vue_type_script_setup_true_lang-C18d9C8W.mjs";
 export {
   _sfc_main as ChatRoom,
   _sfc_main as default

package/dist/common-avatar/index.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../index.vue_vue_type_style_index_0_lang-UfvEW_0n.mjs";
+import { _ as _sfc_main } from "../index.vue_vue_type_style_index_0_lang-BaKNB-4q.mjs";
 export {
   _sfc_main as CommonAvatar,
   _sfc_main as default

package/dist/components/chat-card/index.vue.d.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     myAccid?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    revokeMessage: (msg: QChatMessage) => any;
     resendText: (msg: QChatMessage) => any;
     resendImg: (msg: QChatMessage) => any;
     resendFile: (msg: QChatMessage) => any;
@@ -13,6 +14,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     contextMenuSwitch: (bol: boolean) => any;
     quoteMsgClick: (msg: QChatMessage) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRevokeMessage?: ((msg: QChatMessage) => any) | undefined;
     onResendText?: ((msg: QChatMessage) => any) | undefined;
     onResendImg?: ((msg: QChatMessage) => any) | undefined;
     onResendFile?: ((msg: QChatMessage) => any) | undefined;

package/dist/{chat-page → components/img-info-wrapper}/index.vue.d.ts

@@ -1,6 +1,6 @@
+import type { UploadFileResult } from 'nim-web-sdk-ng/dist/v1/QCHAT_BROWSER_SDK/CloudStorageServiceInterface';
 type __VLS_Props = {
-    myAccid?: string;
-    myAvatar?: string;
+    attach: UploadFileResult | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/img-info-wrapper/index.js

@@ -0,0 +1 @@
+

package/dist/index/style2.css

@@ -1,175 +1,43 @@
-.yx-chatroomWrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.yx-chatroomWrapper .chatroomContent {
-  flex: 1;
-  padding: 24px;
-  overflow-y: auto;
-}
-.yx-chatroomWrapper .chatroomContent.is-scroll-locked {
-  overflow: hidden;
-}
-.yx-chatroomWrapper .chatroomContentNoMore {
-  text-align: center;
-  height: 21px;
-  line-height: 21px;
-}
-.yx-chatroomWrapper .emptyChatroomContent {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-end;
-}
-.yx-chatroomWrapper .emptyChatroomContent h1 {
-  color: var(--theme-text);
-  margin: 0;
-  font-size: 24px;
-}
-.yx-chatroomWrapper .emptyChatroomContent div {
-  font-size: 16px;
-  color: #b3b7bc;
-}
-.yx-chatroomWrapper .chatroomControllerContainer {
-  padding: 0px 12px 12px;
-  width: 100%;
-}
-.yx-chatroomWrapper .chatroomInputQuoteWrapper {
-  font-size: 16px;
-  color: var(--theme-text-secondary, #9c9db4);
+@charset "UTF-8";
+.yx-channel-notice {
+  background: var(--theme-im-n-bg, #dbe2fa);
+  border-radius: 6px;
+  padding: 13px 16px;
+  color: var(--theme-primary, #000);
   display: flex;
-  flex-direction: column;
-  gap: 12px;
-  border-bottom: 1px solid var(--theme-line, #e3e3ee);
-  padding-bottom: 12px;
-  margin-bottom: 12px;
-  position: relative;
-}
-.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteDeleteBtn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  color: var(--theme-text, #252b3a);
-}
-.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteText {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteText .chatroomInputQuoteTextName {
-  color: var(--theme-text, #252b3a);
+  align-items: center;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
-.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteText .chatroomInputQuoteTextBody {
-  color: var(--theme-text, #252b3a);
-  word-break: break-all;
-  white-space: pre-wrap;
-  text-align: left;
   max-width: 100%;
-  width: -moz-fit-content;
-  width: fit-content;
-  overflow: hidden;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-}
-.yx-chatroomWrapper .chatroomInputQuoteWrapper .quoteImg {
-  user-drag: none;
-  -webkit-user-drag: none;
-  pointer-events: none;
-}
-.yx-chatroomWrapper {
-  --input-controller-height: 34px;
-}
-.yx-chatroomWrapper .chatroomControllerWrapper {
-  padding: 12px;
-  border-radius: 8px;
-  background-color: var(--theme-default-bg, #fff);
   width: 100%;
-  color: var(--theme-line, #e3e3ee);
-  border: 1px solid var(--theme-line, #e3e3ee);
-  box-shadow: var(--theme-chat-input-shadow, 0px 1px 3px 0px rgba(29, 31, 58, 0.0196078431), 0px 2px 6px 0px rgba(29, 31, 58, 0.0196078431), 0px 4px 12px 0px rgba(29, 31, 58, 0.0196078431), 0px 8px 24px 0px rgba(29, 31, 58, 0.0392156863));
-}
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputWrapper {
-  display: flex;
-}
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputLeft {
-  align-self: flex-end;
-  min-height: var(--input-controller-height);
-  display: flex;
-  align-items: center;
-}
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputLeft .chatroomButtonSmile {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-}
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.yx-chatroomWrapper .chatroomControllerWrapper .lineSeparator {
-  width: 1px;
-  height: 24px;
-  background-color: var(--theme-line, #e3e3ee);
-  margin-top: 3px;
-  margin-bottom: 3px;
-}
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButtonArrowUp {
-  width: var(--input-controller-height);
-  height: var(--input-controller-height);
-  padding: 0;
-  background-color: var(--theme-btn-primary, #000);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButtonArrowUp[disabled] {
-  background-color: var(--theme-disabled-tag-border1, #cccccc);
+.yx-channel-notice .yx-channel-notice-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 16px;
+  flex-shrink: 0;
 }
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButtonArrowUp [aria-label=arrow-up] {
-  color: var(--theme-light-text, #fff);
-}
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput {
-  align-self: center;
+.yx-channel-notice .yx-channel-notice-text {
   flex: 1;
-  height: 100%;
-  line-height: 100%;
-  border-radius: 8px;
-  border: none;
-  outline: none;
-  resize: none;
-  color: var(--theme-text, #252b3a);
-  background-color: var(--theme-default-bg, #fff);
-  font-size: 16px;
+  min-width: 0;
+  overflow: hidden;
 }
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput::-moz-placeholder {
-  color: var(--theme-placeholder, #9c9db4);
+.yx-channel-notice .yx-channel-notice-text-inner {
+  line-height: 22px;
+  display: inline-flex;
+  white-space: nowrap;
 }
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput:-ms-input-placeholder {
-  color: var(--theme-placeholder, #9c9db4);
+.yx-channel-notice .yx-channel-notice-text-inner.yx-channel-notice-text--scroll {
+  animation: yx-notice-scroll var(--yx-notice-duration, 15s) linear infinite;
 }
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput::placeholder {
-  color: var(--theme-placeholder, #9c9db4);
+.yx-channel-notice .yx-channel-notice-text-item {
+  flex-shrink: 0;
+  padding-right: 2em; /* 两段文字之间的间隔 */
 }
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput:active, .yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput:focus {
-  border: none;
-  outline: none;
-  box-shadow: none;
+@keyframes yx-notice-scroll {
+0% {
+    transform: translateX(0);
+}
+100% {
+    transform: translateX(-50%);
 }
-.yx-chatroomWrapper .chatroomControllerWrapper .chatroomController {
-  min-height: var(--input-controller-height);
-  display: flex;
-  align-items: flex-end;
-  gap: 12px;
 }

package/dist/index/style4.css

@@ -1,94 +1,89 @@
-@charset "UTF-8";
-.yx-chatCardWrapper {
+.yx-chatroomWrapper {
   width: 100%;
+  height: 100%;
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
 }
-.yx-chatCardWrapper:not(:first-child) {
-  margin-top: 10px;
+.yx-chatroomWrapper .chatroomContent {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
 }
-.yx-chatCardWrapper.reverse {
-  flex-direction: row-reverse;
+.yx-chatroomWrapper .chatroomContent.is-scroll-locked {
+  overflow: hidden;
 }
-.yx-chatCardWrapper.reverse .chatCardContent {
-  flex-direction: row-reverse;
-  margin-left: 0;
-  margin-right: 12px;
+.yx-chatroomWrapper .chatroomContentNoMore {
+  text-align: center;
+  height: 21px;
+  line-height: 21px;
 }
-.yx-chatCardWrapper.reverse .chatCardInfo {
+.yx-chatroomWrapper .emptyChatroomContent {
+  width: 100%;
+  height: 100%;
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
 }
-.yx-chatCardWrapper.reverse .chatCardMainContent {
-  display: flex;
-  flex-direction: row-reverse;
+.yx-chatroomWrapper .emptyChatroomContent h1 {
+  color: var(--theme-text);
+  margin: 0;
+  font-size: 24px;
 }
-.yx-chatCardWrapper.reverse .chatCardStatus {
-  margin-right: 10px;
-  margin-left: 0;
+.yx-chatroomWrapper .emptyChatroomContent div {
+  font-size: 16px;
+  color: #b3b7bc;
 }
-.yx-chatCardWrapper .chatCardContent {
-  flex: 1;
-  margin-left: 12px;
-  display: flex;
-  align-items: center;
+.yx-chatroomWrapper .chatroomControllerContainer {
+  padding: 0px 12px 12px;
+  width: 100%;
 }
-.yx-chatCardWrapper .chatCardInfo {
-  font-size: 12px;
-  color: var(--theme-text, #252b3a);
-  text-align: left;
-  margin-bottom: 3px;
+.yx-chatroomWrapper .chatroomInputQuoteWrapper {
+  font-size: 16px;
+  color: var(--theme-text-secondary, #9c9db4);
   display: flex;
-  align-items: baseline;
-  gap: 8px;
+  flex-direction: column;
+  gap: 12px;
+  border-bottom: 1px solid var(--theme-line, #e3e3ee);
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  position: relative;
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteAttachBox {
+  padding-left: 20px;
+  position: relative;
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteAttachBox:before {
+  position: absolute;
+  left: 0;
+  top: 0.5em;
+  bottom: 0.5em;
+  content: "";
+  display: block;
+  width: 4px;
+  border-radius: 4px;
+  background-color: var(--theme-line, #e3e3ee);
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteDeleteBtn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: var(--theme-text, #252b3a);
 }
-.yx-chatCardWrapper .chatCardInfo .chatCardInfoName {
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteText {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteText .chatroomInputQuoteTextName {
   color: var(--theme-text, #252b3a);
-  font-weight: 500;
-  font-size: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
-  max-width: 375px;
-}
-.yx-chatCardWrapper .chatCardInfo .chatCardInfoTime {
-  color: var(--theme-placeholder, #9c9db4);
-  font-size: 14px;
-}
-.yx-chatCardWrapper .chatCardStatus {
-  margin-left: 10px;
-}
-.yx-chatCardWrapper .chatCardMainContent.myMsg .textMsg {
-  color: var(--theme-light-text, #fff);
-  background-color: var(--theme-btn-primary, #000);
-}
-.yx-chatCardWrapper .chatCardMainContent.otherMsg .textMsg {
-  background-color: var(--theme-area, #f1f1f8);
-}
-.yx-chatCardWrapper .textMsg {
-  font-size: 16px;
-  padding: 12px 16px;
-  color: var(--theme-text, #252b3a);
-  word-break: break-all;
-  white-space: pre-wrap;
-  text-align: left;
-  border-radius: 8px;
-  max-width: 100%;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.yx-chatCardWrapper .textMsg a {
-  color: var(--theme-link, #2951e0) !important;
-}
-.yx-chatCardWrapper .chatCardQuoteMsg {
-  margin-top: 8px;
-  font-size: 16px;
-  padding: 12px 16px;
-  background-color: var(--theme-home-tab-bg-color, #f2f2f2);
-  border-radius: 8px;
 }
-.yx-chatCardWrapper .chatCardQuoteMsg .quoteMsgText {
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteText .chatroomInputQuoteTextBody {
   color: var(--theme-text, #252b3a);
   word-break: break-all;
   white-space: pre-wrap;
@@ -96,73 +91,135 @@
   max-width: 100%;
   width: -moz-fit-content;
   width: fit-content;
+  overflow: hidden;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   display: -webkit-box;
-  overflow: hidden;
 }
-.yx-chatCardWrapper .chatCardQuoteMsg .quoteMsgImg {
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .quoteImg {
   user-drag: none;
   -webkit-user-drag: none;
+  pointer-events: none;
 }
-.yx-chatCardWrapper .fileMsg {
-  width: -moz-fit-content;
-  width: fit-content;
-  background-color: #23252c;
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  overflow: hidden;
+}
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg:hover .chatroomInputAttachmentWrapperImgMask {
+  display: block;
+}
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg:hover .chatroomInputAttachmentDeleteBtn {
+  display: block;
+}
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg .chatroomInputAttachmentWrapperImgMask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  display: none;
+}
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg .chatroomInputAttachmentDeleteBtn {
+  position: absolute;
+  right: 50%;
+  top: 50%;
+  transform: translateY(-50%) translateX(50%);
+  color: var(--theme-text, #252b3a);
+  z-index: 1;
+  display: none;
+}
+.yx-chatroomWrapper .chatroomInputAttachmentWrapperImg .chatroomInputAttachmentDeleteBtn svg {
+  color: #fff;
+}
+.yx-chatroomWrapper {
+  --input-controller-height: 34px;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper {
+  padding: 12px;
+  border-radius: 8px;
+  background-color: var(--theme-default-bg, #fff);
+  width: 100%;
+  color: var(--theme-line, #e3e3ee);
+  border: 1px solid var(--theme-line, #e3e3ee);
+  box-shadow: var(--theme-chat-input-shadow, 0px 1px 3px 0px rgba(29, 31, 58, 0.0196078431), 0px 2px 6px 0px rgba(29, 31, 58, 0.0196078431), 0px 4px 12px 0px rgba(29, 31, 58, 0.0196078431), 0px 8px 24px 0px rgba(29, 31, 58, 0.0392156863));
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputWrapper {
+  display: flex;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputLeft {
+  align-self: flex-end;
+  min-height: var(--input-controller-height);
   display: flex;
   align-items: center;
-  padding: 12px 16px;
-  border-radius: 8px;
 }
-.yx-chatCardWrapper .fileMsg .fileMsgContent {
-  min-width: 175px;
-  margin-left: 20px;
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputLeft .chatroomButtonSmile {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButton {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
+  align-items: center;
+  justify-content: center;
 }
-.yx-chatCardWrapper .fileMsg .fileMsgName {
-  color: var(--theme-text);
+.yx-chatroomWrapper .chatroomControllerWrapper .lineSeparator {
+  width: 1px;
+  height: 24px;
+  background-color: var(--theme-line, #e3e3ee);
+  margin-top: 3px;
+  margin-bottom: 3px;
 }
-.yx-chatCardWrapper .fileMsg .fileMsgSize {
-  color: #6e6f74;
-}
-
-/* 文本消息自定义右键菜单（Teleport 到 body，根节点 yx- 前缀，不嵌套以便选中 body 下节点） */
-.yx-chatCardTextMsgContextMenu {
-  position: fixed;
-  z-index: 9999;
-  min-width: 100px;
-  padding: 4px 0;
-  background: var(--theme-default-bg, #fff);
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  border: 1px solid var(--theme-line, #e3e3ee);
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButtonArrowUp {
+  width: var(--input-controller-height);
+  height: var(--input-controller-height);
+  padding: 0;
+  background-color: var(--theme-btn-primary, #000);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.yx-chatCardTextMsgContextMenu .yx-chatCardTextMsgContextMenu-item {
-  padding: 6px 12px;
-  font-size: 14px;
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButtonArrowUp[disabled] {
+  background-color: var(--theme-disabled-tag-border1, #cccccc);
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButtonArrowUp [aria-label=arrow-up] {
+  color: var(--theme-light-text, #fff);
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput {
+  align-self: center;
+  flex: 1;
+  height: 100%;
+  line-height: 100%;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  resize: none;
   color: var(--theme-text, #252b3a);
-  cursor: pointer;
-  white-space: nowrap;
+  background-color: var(--theme-default-bg, #fff);
+  font-size: 16px;
 }
-.yx-chatCardTextMsgContextMenu .yx-chatCardTextMsgContextMenu-item:hover {
-  background: var(--theme-area, #f5f5f5);
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput::-moz-placeholder {
+  color: var(--theme-placeholder, #9c9db4);
 }
-
-/* 闪烁动画：只执行一次 */
-.yx-flash-a-moment .flash-target {
-  animation: flash-a-moment 1s ease-in-out 1 forwards;
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput:-ms-input-placeholder {
+  color: var(--theme-placeholder, #9c9db4);
 }
-@keyframes flash-a-moment {
-0% {
-    opacity: 1;
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput::placeholder {
+  color: var(--theme-placeholder, #9c9db4);
 }
-50% {
-    opacity: 0.6;
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput:active, .yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput:focus {
+  border: none;
+  outline: none;
+  box-shadow: none;
 }
-100% {
-    opacity: 1;
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomController {
+  min-height: var(--input-controller-height);
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
 }
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputUpload .anticon-loading {
+  color: var(--theme-text, #252b3a);
 }