@tencentcloud/chat-uikit-react 2.2.5 → 2.2.6

package/dist/esm/index.d.css

@@ -1,1762 +1,1230 @@
-.tui-kit {
-  position: relative;
+.tui-conversation {
+  flex: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
   display: flex;
-  width: 100%;
-  height: 100%;
+  flex-direction: column;
+  position: relative;
   text-align: initial;
 }
-[data-chat-theme=light] .tui-kit {
+[data-uikit-theme=light] .tui-conversation {
   background-color: var(--chat-theme-light-bg-primary);
 }
-[data-chat-theme=dark] .tui-kit {
+[data-uikit-theme=dark] .tui-conversation {
   background-color: var(--chat-theme-dark-bg-primary);
 }
-
-.sample-chat {
-  position: relative;
-  margin: 0 auto;
-  width: calc(100% - 20rem);
-  min-width: 850px;
-  height: 86%;
-  box-sizing: border-box;
-  border-radius: 12px;
-  overflow: hidden;
-}
-.sample-chat-profile {
-  position: absolute;
-  top: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-}
-.sample-chat-left-container {
-  max-width: 360px;
-  min-width: 360px;
+.tui-conversation .tui-conversation-header {
   display: flex;
-  flex-direction: column;
-  position: relative;
+  padding: 10px 20px;
 }
-.sample-chat-tab {
+.tui-conversation .tui-conversation-header .tui-conversation-create-icon {
   display: flex;
   align-items: center;
-  justify-content: space-around;
-  margin: 12px;
+  justify-content: center;
+  margin-left: 10px;
 }
-.sample-chat-tab-container {
+.tui-conversation .no-result {
+  padding: 0 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
 }
-.sample-chat-tab-text {
-  font-size: 15px;
-  line-height: 25px;
-  text-align: center;
+.tui-conversation .no-result-icon {
+  margin: 100px auto 50px;
 }
-.sample-chat-tab-active {
-  color: #147aff;
+.tui-conversation .no-result-message {
+  color: #999;
+  font-weight: 400;
+  font-size: 16px;
+  font-family: PingFangSC-Medium;
+  line-height: 22px;
 }
 
-.tuikit-container {
-  display: flex;
-  height: 100%;
-  position: relative;
-  text-align: initial;
-  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);
+.tui-conversation-h5 .tui-conversation-header {
+  padding: 10px;
 }
-
-.tui-chat-default {
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-  background-position-x: -17px;
-  background-position-y: 173px;
-  padding: 100px 40px 0;
+.tui-conversation-h5 .conversation-list-container .conversation-preview-container {
+  padding: 0 10px;
 }
-.tui-chat-default header {
+.tui-kit-avatar {
   display: flex;
   align-items: center;
-  font-size: 1.75rem;
-  font-family: PingFangSC-Medium;
-  font-weight: 500;
-  color: #000;
-  letter-spacing: 0;
-}
-.tui-chat-default header img {
-  width: 32px;
-  margin: 0 10px;
-}
-.tui-chat-default .content {
-  max-width: 393px;
-  font-size: 16px;
-  line-height: 24px;
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  color: #666;
-  letter-spacing: 0;
-  padding: 36px 0 20px;
-}
-.tui-chat-default .link {
-  font-size: 14px;
-  line-height: 20px;
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  color: #666;
-  letter-spacing: 0;
-}
-.tui-chat-default .link a {
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  color: #006eff;
-  letter-spacing: 0;
-  text-decoration: none;
-  padding: 0 5px;
-}
-
-body #webpack-dev-server-client-overlay {
-  display: none !important;
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
 }
-.App {
-  height: 100%;
+.tui-kit-avatar.circle .avatar-image {
+  border-radius: 50%;
 }
-
-#root {
-  width: 100%;
-  height: 100%;
-  margin: 0;
+.tui-kit-avatar.square .avatar-image {
+  border-radius: 4px;
 }
-
-.sample-chat-h5 {
-  position: relative;
+.tui-kit-avatar img {
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
-.sample-chat-h5-container {
+.tui-kit-avatar:hover .tui-kit-avatar-edit {
   display: flex;
-  flex-direction: column;
+}
+.tui-kit-avatar-edit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.33);
   width: 100%;
   height: 100%;
+  border-radius: 100%;
+  display: none;
+  justify-content: center;
+  align-items: center;
 }
-.sample-chat-h5-container .sample-profile {
+.tui-kit-avatar-list {
   position: absolute;
-  top: 0;
-  z-index: 1;
+  z-index: 2;
+  top: 100%;
+  background: #FFFFFF;
+  border-radius: 5px;
+  box-shadow: 0 11px 20px 0 rgb(0, 0, 0);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   width: 100%;
-  max-width: 100%;
-  min-width: 100%;
+  min-width: 200px;
+  max-width: 400px;
+  padding: 10px;
 }
-.sample-chat-h5-container .tui-kit-input-box.tui-kit-input-box--focus {
-  outline: none;
+.tui-kit-avatar-list-item {
+  padding: 10px;
 }
-.sample-chat-h5 .tui-message-input .tui-kit-input-box--focus {
-  outline: none;
+.tui-kit-avatar-list-item img {
+  width: 40px;
 }
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-/* Document
-   ========================================================================== */
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+.conversation-list-container {
+  overflow-x: hidden;
+  height: 100%;
 }
 
-/* Sections
-   ========================================================================== */
-/**
- * Remove the margin in all browsers.
- */
-body {
-  margin: 0;
+.conversation-preview-container {
+  display: flex;
+  align-items: center;
+  border: none;
+  width: 100%;
+  height: 64px;
+  cursor: pointer;
+  line-height: 17px;
+  padding: 0 20px;
 }
-
-/**
- * Render the `main` element consistently in IE.
- */
-main {
-  display: block;
+[data-uikit-theme=light] .conversation-preview-container {
+  background-color: var(--chat-theme-light-bg-primary);
 }
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+[data-uikit-theme=dark] .conversation-preview-container {
+  background-color: var(--chat-theme-dark-bg-primary);
 }
-
-/* Grouping content
-   ========================================================================== */
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
+.conversation-preview-container .content {
+  flex: 1 1 auto;
+  text-align: left;
+  margin-left: 10px;
+  min-width: 0;
 }
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-pre {
-  /* stylelint-disable-next-line font-family-no-duplicate-names */
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+.conversation-preview-container .content .title {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 17px;
+  font-family: PingFangSC-Medium;
+  padding: 1px 0;
+  width: 100%;
 }
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * Remove the gray background on active links in IE 10.
- */
-a {
-  background-color: transparent;
+[data-uikit-theme=light] .conversation-preview-container .content .title {
+  color: var(--chat-theme-light-text-primary);
 }
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
+[data-uikit-theme=dark] .conversation-preview-container .content .title {
+  color: var(--chat-theme-dark-text-primary);
 }
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-b,
-strong {
-  font-weight: bolder;
+.conversation-preview-container .content .message {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFangSC-Medium;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 1px 0;
 }
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+[data-uikit-theme=light] .conversation-preview-container .content .message {
+  color: var(--chat-theme-light-text-secondary);
 }
-
-/**
- * Add the correct font size in all browsers.
- */
-small {
-  font-size: 80%;
+[data-uikit-theme=dark] .conversation-preview-container .content .message {
+  color: var(--chat-theme-dark-text-secondary);
 }
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
+.conversation-preview-container .external {
+  text-align: right;
+  flex: 0 1 auto;
+  display: flex;
+  flex-direction: column;
 }
-
-sub {
-  bottom: -0.25em;
+.conversation-preview-container .external .unread {
+  height: 19px;
+  padding: 1px 0;
 }
-
-sup {
-  top: -0.5em;
+.conversation-preview-container .external .time {
+  font-family: PingFangSC-Medium;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 1px 0;
 }
-
-/* Embedded content
-   ========================================================================== */
-/**
- * Remove the border on images inside links in IE 10.
- */
-img {
-  border-style: none;
+[data-uikit-theme=light] .conversation-preview-container .external .time {
+  color: var(--chat-theme-light-text-secondary);
 }
-
-/* Forms
-   ========================================================================== */
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
+[data-uikit-theme=dark] .conversation-preview-container .external .time {
+  color: var(--chat-theme-dark-text-secondary);
 }
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-button,
-input { /* 1 */
-  overflow: visible;
+.conversation-preview-container .external .more--hover {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1 1;
 }
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-button,
-select { /* 1 */
-  text-transform: none;
+.conversation-preview-container .external .more--hover .icon-more {
+  transform: scale(1.5);
 }
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-  -webkit-appearance: button;
+.conversation-preview-container .external .more--hover .more-handle-box {
+  top: 0;
+  right: 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  bottom: initial;
+  padding: 14px 0;
+  box-sizing: border-box;
+  text-align: start;
+  white-space: nowrap;
 }
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
+.conversation-preview-container .external .more--hover .more-handle-box .more-handle-item {
+  font-size: 16px;
+  font-family: PingFangSC-Medium;
+  line-height: 19px;
+  padding: 6px 16px;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
 }
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-button:-moz-focusring,
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring {
-  outline: 1px dotted ButtonText;
+[data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
+  color: var(--chat-theme-light-status-danger);
 }
-
-/**
- * Correct the padding in Firefox.
- */
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
+[data-uikit-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
+  color: var(--chat-theme-dark-status-danger);
 }
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
+[data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
+  background-color: var(--chat-theme-light-bg-active);
 }
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-progress {
-  vertical-align: baseline;
+[data-uikit-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
+  background-color: var(--chat-theme-dark-bg-active);
 }
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-textarea {
-  overflow: auto;
+[data-uikit-theme=light] .conversation-preview-container:hover {
+  background-color: var(--chat-theme-light-bg-active);
 }
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-[type=checkbox],
-[type=radio] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
+[data-uikit-theme=dark] .conversation-preview-container:hover {
+  background-color: var(--chat-theme-dark-bg-active);
 }
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
-  height: auto;
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--pin {
+  background-color: var(--chat-theme-light-bg-secondary);
 }
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-[type=search] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
+[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--pin {
+  background-color: var(--chat-theme-dark-bg-secondary);
 }
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--active {
+  background-color: var(--chat-theme-light-bg-active);
 }
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-/**
- * Add the correct display in IE 10+.
- */
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-[hidden] {
-  display: none;
-}
-
-:root {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-@font-face {
-  font-family: iconfont;
-  src: url("./assets/fonts/iconfont.woff2?t=1722856322648") format("woff2"), url("./assets/fonts/iconfont.woff?t=1722856322648") format("woff"), url("./assets/fonts/iconfont.ttf?t=1722856322648") format("truetype");
-}
-.iconfont {
-  font-family: iconfont, Arial, sans-serif !important;
-  font-size: 20px;
-  font-style: normal;
-  line-height: 1;
-  vertical-align: bottom;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-stroke-width: 0.2px;
-  -moz-osx-font-smoothing: grayscale;
+[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--active {
+  background-color: var(--chat-theme-dark-bg-active);
 }
-
-:root {
-  --chat-theme-light-bg-5: #999;
-  --chat-theme-light-bg-4: #b3b3b3;
-  --chat-theme-light-bg-3: #e5e7eb;
-  --chat-theme-light-bg-2: #f0f0f0;
-  --chat-theme-light-bg-1: #fff;
-  --chat-theme-light-bg-primary: #fff;
-  --chat-theme-light-bg-secondary: #f0f0f0;
-  --chat-theme-light-bg-active: #e6f1ff;
-  --chat-theme-light-text-5: #000;
-  --chat-theme-light-text-4: #666;
-  --chat-theme-light-text-3: #7a7a7a;
-  --chat-theme-light-text-2: #7a7a7a;
-  --chat-theme-light-text-1: #7a7a7a;
-  --chat-theme-light-text-primary: #000;
-  --chat-theme-light-text-secondary: #7a7a7a;
-  --chat-theme-light-status-info: #147aff;
-  --chat-theme-light-status-success: #34c759;
-  --chat-theme-light-status-danger: #ff3742;
-  --chat-theme-light-border-5: #e0e0e0;
-  --chat-theme-light-box-shadow-1: rgba(0, 0, 0, 0.24) 0 3px 8px;
-  color-scheme: light dark;
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--active .title {
+  color: var(--chat-theme-light-status-info);
 }
-
-:root {
-  --chat-theme-dark-bg-5: #76777e;
-  --chat-theme-dark-bg-4: #5d5e67;
-  --chat-theme-dark-bg-3: #454650;
-  --chat-theme-dark-bg-2: #2e303a;
-  --chat-theme-dark-bg-1: #191b26;
-  --chat-theme-dark-bg-primary: #191b26;
-  --chat-theme-dark-bg-secondary: #2e303a;
-  --chat-theme-dark-bg-active: #4e4e4e;
-  --chat-theme-dark-text-5: #000;
-  --chat-theme-dark-text-4: #666;
-  --chat-theme-dark-text-3: #7a7a7a;
-  --chat-theme-dark-text-2: #7a7a7a;
-  --chat-theme-dark-text-1: #7a7a7a;
-  --chat-theme-dark-text-primary: #fff;
-  --chat-theme-dark-text-secondary: #8b8b8b;
-  --chat-theme-dark-status-info: #147aff;
-  --chat-theme-dark-status-success: #34c759;
-  --chat-theme-dark-status-danger: #ff3742;
-  --chat-theme-dark-border-5: #4e4e4e;
-  --chat-theme-dark-box-shadow-1: rgba(203, 203, 203, 0.755) 0 3px 8px;
-  color-scheme: light dark;
+[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--active .title {
+  color: var(--chat-theme-dark-status-info);
 }
-.tui-conversation {
-  flex: 1;
-  box-sizing: border-box;
-  overflow: hidden;
-  min-width: 0;
+.conversation-preview-container.conversation-preview-content--unread .unread {
+  width: 16px;
+  height: 13px;
+  border-radius: 16px;
   display: flex;
-  flex-direction: column;
-  position: relative;
-  text-align: initial;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 5px 1px;
+  font-size: 11px;
+  font-weight: 700;
+  margin: 2px 0 2px auto;
+  color: #fff;
 }
-[data-chat-theme=light] .tui-conversation {
-  background-color: var(--chat-theme-light-bg-primary);
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--unread .unread {
+  background-color: var(--chat-theme-light-status-danger);
 }
-[data-chat-theme=dark] .tui-conversation {
-  background-color: var(--chat-theme-dark-bg-primary);
+[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--unread .unread {
+  background-color: var(--chat-theme-dark-status-danger);
 }
-.tui-conversation .tui-conversation-header {
+.tui-message-input {
   display: flex;
-  padding: 10px 20px;
+  flex-direction: column;
 }
-.tui-conversation .tui-conversation-header .tui-conversation-create-icon {
+.tui-message-input-main {
+  flex: 1;
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin-left: 10px;
+  padding: 14px 12px;
+  gap: 12px;
 }
-.tui-conversation .no-result {
-  padding: 0 20px;
+.tui-message-input-main .input-box {
+  flex: 1;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.tui-conversation .no-result-icon {
-  margin: 100px auto 50px;
-}
-.tui-conversation .no-result-message {
-  color: #999;
-  font-weight: 400;
-  font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 22px;
-}
-
-.tui-conversation-h5 .tui-conversation-header {
+  position: relative;
+  min-height: 20px;
+  max-height: 200px;
+  border-radius: 15px;
+  overflow: hidden;
   padding: 10px;
 }
-.tui-conversation-h5 .conversation-list-container .conversation-preview-container {
-  padding: 0 10px;
+.tui-message-input-main .input-box .input-visibility-content {
+  min-height: 20px;
+  word-break: break-all;
+  visibility: hidden;
+  max-width: -webkit-fill-available;
+  font-family: PingFangSC-Medium;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  padding: 1px 2px;
 }
-.message-default {
-  width: 100%;
+.tui-message-input-main .input-box textarea {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: -webkit-fill-available;
+  height: -webkit-fill-available;
   flex: 1;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  font-family: SF Pro Text;
-  font-size: 14px;
   font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 500;
+  font-size: 14px;
   line-height: 17px;
+  margin: 9px;
+  resize: none;
+  border: none;
+  background: none;
 }
-.message-default .avatar {
-  width: 45px;
-}
-.message-default .avatar img {
-  width: 45px;
-}
-.message-default .content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.message-default .content .name {
-  display: inline-block;
-  padding-bottom: 3px;
-  max-width: 60%;
-}
-[data-chat-theme=light] .message-default .content .name {
+[data-uikit-theme=light] .tui-message-input-main .input-box textarea {
   color: var(--chat-theme-light-text-primary);
 }
-[data-chat-theme=dark] .message-default .content .name {
+[data-uikit-theme=dark] .tui-message-input-main .input-box textarea {
   color: var(--chat-theme-dark-text-primary);
 }
-
-.in {
+.tui-message-input-main .input-box textarea:focus, .tui-message-input-main .input-box textarea:active {
+  border: none;
+  outline: none;
+}
+.tui-message-input-main .disabled {
+  display: none;
+}
+.tui-message-input-box {
   flex: 1;
   display: flex;
-  flex-direction: row;
-  justify-self: flex-start;
-  gap: 10px;
+  align-items: center;
 }
-.in .content {
-  align-items: flex-start;
-  flex: 1;
+
+ul li {
+  list-style: none;
 }
 
-.out {
-  flex: 1;
-  display: flex;
-  gap: 10px;
-  flex-direction: row-reverse;
-  justify-self: flex-end;
+.input-plugin-popup {
+  position: relative;
 }
-.out .content {
-  align-items: flex-end;
-  flex: 1;
+.input-plugin-popup-box {
+  position: absolute;
+  z-index: 2;
+  bottom: 30px;
 }
 
-.tip {
-  justify-self: center !important;
-  width: auto;
+.input-plugin-item {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  font-family: PingFangSC-Medium;
+  line-height: 19px;
+  display: flex;
+}
+.input-plugin-item span {
+  padding: 0 17px;
 }
 
-.bubble {
-  padding: 8px 16px;
+.emoji-picker .face-list {
+  height: 120px;
+  width: 242px;
+  padding: 10px 5px;
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
 }
-.bubble-in {
-  border-radius: 0px 16px 16px 16px;
+.emoji-picker .face-list-item {
+  padding: 5px;
+  cursor: pointer;
+  user-select: none;
 }
-.bubble-in.group {
-  border-radius: 0px 16px 16px 16px;
+.emoji-picker .face-list-item img {
+  width: 20px;
 }
-.bubble-out {
-  border-radius: 16px 16px 0 16px;
+.emoji-picker .face-list-item .face-img {
+  width: 38px;
 }
-
-.message-status {
+.emoji-picker .face-tab {
   display: flex;
-  align-items: flex-end;
-  align-self: flex-end;
+  align-items: center;
+  min-width: 265px;
 }
-.message-status .time {
-  width: max-content;
-  font-weight: 400;
-  padding: 5px 0 0 10px;
-  font-size: 12px;
-  font-family: PingFangSC-Medium;
-  line-height: 14px;
-  text-align: right;
+.emoji-picker .face-tab-item {
+  cursor: pointer;
+  width: 24px;
+  padding: 10px;
 }
-[data-chat-theme=light] .message-status .time {
-  color: var(--chat-theme-light-text-secondary);
+.emoji-picker .face-tab-item img {
+  width: 100%;
 }
-[data-chat-theme=dark] .message-status .time {
-  color: var(--chat-theme-dark-text-secondary);
+.emoji-picker .emoji-plugin-right {
+  right: 0;
 }
 
-.message-image, .message-video {
+.upload-picker {
   position: relative;
+  padding: 10px 16px;
+  min-width: 180px;
 }
-.message-image .message-status, .message-video .message-status {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-}
-[data-chat-theme=light] .message-image .message-status .time, [data-chat-theme=light] .message-video .message-status .time {
-  color: var(--chat-theme-light-text-primary);
+.upload-picker:hover {
+  color: #147aff;
 }
-[data-chat-theme=dark] .message-image .message-status .time, [data-chat-theme=dark] .message-video .message-status .time {
-  color: var(--chat-theme-dark-text-primary);
+.upload-picker input {
+  position: absolute;
+  cursor: pointer;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
 }
 
-.message-text {
+.input-quote {
+  padding: 7px 16px;
+  background: #f9f9f9;
   display: flex;
+  align-items: center;
 }
-.message-text-content {
-  display: inline;
-  word-break: break-word;
-  font-family: PingFangSC-Regular;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 24px;
-}
-.message-text-content-p {
-  white-space: pre-wrap;
-  display: inline;
-  vertical-align: middle;
-}
-[data-chat-theme=light] .message-text-content-p {
-  color: var(--chat-theme-light-text-primary);
-}
-[data-chat-theme=dark] .message-text-content-p {
-  color: var(--chat-theme-dark-text-primary);
-}
-.message-text-content .message-status {
-  display: inline-flex;
-  float: right;
-  clear: right;
-}
-
-.message-text,
-.message-tip {
-  font-family: PingFangSC-Regular;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 17px;
-}
-.message-text .text-img,
-.message-tip .text-img {
-  width: 20px;
-  height: 20px;
-  vertical-align: middle;
-}
-
-.message-image {
-  background: #FFFFFF;
-}
-.message-image img {
-  max-width: 300px;
-}
-.message-image .img-h5 {
-  max-width: 200px;
-  max-height: 200px;
-}
-.message-image .big-image {
-  max-width: 90%;
-  max-height: 90%;
-}
-
-.message-video {
-  max-width: 300px;
-}
-.message-video .snap-video {
+.input-quote-content {
+  flex: 1;
+  background: #fff;
+  padding: 2px 14px;
   position: relative;
-  height: 100%;
-  border-radius: 10px;
-}
-.message-video .snap-video::before {
-  position: absolute;
-  z-index: 1;
-  content: "";
-  width: 0px;
-  height: 0px;
-  border: 15px solid transparent;
-  border-left: 20px solid #ffffff;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  margin: auto;
-}
-.message-video video {
-  width: 100%;
-  height: 100%;
-  border-radius: 10px;
-}
-.message-video .play-video {
-  max-width: 95%;
-  max-height: 65%;
-}
-
-.message-video.message-video-h5 {
-  max-width: 200px;
-  max-height: 200px;
-}
-
-.message-file {
   display: flex;
   flex-direction: column;
-  border: 1px solid #ddd;
-}
-.message-file-main {
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  background: #FFFFFF;
-  border-radius: 4px;
-}
-.message-file-main .icon {
-  margin-right: 7px;
-}
-.message-file-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-}
-.message-file-footer .time {
-  padding-top: 10px;
-}
-.message-file-size {
-  padding-top: 10px;
-  font-weight: 400;
-  font-size: 12px;
+  font-weight: 500;
+  font-size: 14px;
   font-family: PingFangSC-Medium;
-  line-height: 14px;
-  color: #7A7A7A;
-}
-
-.message-merger {
-  display: flex;
-  flex-direction: column;
-  background: #ECEBEB;
-}
-.message-merger h3 {
-  padding-bottom: 4px;
-  border-bottom: 1px solid #a1a1a1;
-}
-.message-merger-list {
-  opacity: 0.6;
-}
-.message-merger-item {
-  padding-top: 4px;
-}
-
-.meesage-bubble-reply {
-  padding: 8px 16px;
-}
-[data-chat-theme=light] .meesage-bubble-reply {
-  background-color: var(--chat-theme-light-bg-secondary);
-}
-[data-chat-theme=dark] .meesage-bubble-reply {
-  background-color: var(--chat-theme-dark-bg-secondary);
-}
-.meesage-bubble-reply-in {
-  border-radius: 16px 16px 16px 0;
-}
-.meesage-bubble-reply-out {
-  border-radius: 16px 16px 0px 16px;
-}
-.meesage-bubble-reply .message-text {
-  border: none !important;
-}
-.meesage-bubble-reply .bubble {
-  padding: 0;
-}
-.meesage-bubble-reply .bubble-in {
-  border-radius: 0;
-}
-.meesage-bubble-reply-main {
-  position: relative;
-  padding: 10px 14px;
-  margin-bottom: 10px;
-}
-[data-chat-theme=light] .meesage-bubble-reply-main {
-  background-color: var(--chat-theme-light-bg-primary);
-}
-[data-chat-theme=dark] .meesage-bubble-reply-main {
-  background-color: var(--chat-theme-dark-bg-primary);
+  line-height: 17px;
+  color: #000;
 }
-.meesage-bubble-reply-main::before {
+.input-quote-content::before {
   content: "";
   position: absolute;
   width: 6px;
   height: 100%;
+  background: #999;
   top: 0;
   left: 0;
 }
-[data-chat-theme=light] .meesage-bubble-reply-main::before {
-  background-color: var(--chat-theme-light-bg-5);
-}
-[data-chat-theme=dark] .meesage-bubble-reply-main::before {
-  background-color: var(--chat-theme-dark-bg-5);
-}
-.meesage-bubble-reply-main .title {
-  font-weight: 500;
-  font-size: 14px;
-  padding-bottom: 10px;
-}
-[data-chat-theme=light] .meesage-bubble-reply-main .title {
-  color: var(--chat-theme-light-text-primary);
-}
-[data-chat-theme=dark] .meesage-bubble-reply-main .title {
-  color: var(--chat-theme-dark-text-primary);
-}
-.meesage-bubble-reply-main .message-context {
+.input-quote-content span {
+  padding-top: 8px;
   opacity: 0.6;
 }
+.input-quote .icon {
+  margin: 0 5px 0 16px;
+}
 
-.meesage-bubble {
+.tui-forward {
+  background: #fff;
+  border-radius: 16px;
   display: flex;
-  align-items: flex-end;
-}
-.meesage-bubble-status {
-  margin: 3px;
+  flex-direction: column;
+  overflow: hidden;
+  width: 300px;
+  max-height: 90%;
 }
-.meesage-bubble-context {
+.tui-forward-header {
   display: flex;
   align-items: center;
-  gap: 10px;
-}
-.meesage-bubble-context .message-context {
-  flex: 1;
-}
-
-.icon-fail {
-  width: 14px;
-  height: 14px;
-  border-radius: 14px;
-  position: relative;
-  background: #FA5151;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
+  padding: 24px 20px;
 }
-.icon-fail::before {
-  position: absolute;
-  content: "!";
-  color: #FFFFFF;
-  font-size: 12px;
+.tui-forward-title {
+  padding: 0 16px;
   font-family: PingFangSC-Medium;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 17px;
 }
-
-.message-face {
-  display: flex;
-  flex-direction: column;
-}
-.message-face .img {
-  max-width: 88px;
-}
-
-.loading {
-  display: inline-block;
-  position: relative;
-}
-.loading .img, .loading video {
-  min-width: 60px;
-  min-height: 60px;
-  max-width: 300px;
-  border-radius: 10px;
-}
-.loading .img-h5, .loading .video-h5 {
-  min-width: 60px;
-  min-height: 60px;
-  max-width: 200px;
-  max-height: 200px;
-  border-radius: 10px;
-}
-.loading::before {
-  position: absolute;
-  content: "";
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 10px;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-.loading::after {
-  position: absolute;
-  content: "";
-  border: 5px solid #f3f3f3;
-  border-top: 5px solid #555;
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
-  display: inline-block;
-  animation: spin 2s linear infinite;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-}
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.tui-forward-main {
+  padding: 0 20px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
 }
-
-.message-plugin {
-  width: 32px;
-  margin: 0 5px;
+.tui-forward-main .no-result {
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  font-style: normal;
+  line-height: 20px;
+  padding: 10px;
+  text-align: center;
+  color: #999;
 }
-.message-plugin .icon-more {
-  transform: scale(1.5);
+.tui-forward-search {
+  padding: 10px 15px;
 }
-.message-plugin .plugin-popup-box {
-  bottom: auto;
-  top: 100%;
-  overflow: hidden;
+.tui-forward-list {
+  padding: 13px 0;
 }
-.message-plugin-box {
-  padding: 6px 0;
+.tui-forward-list-title {
+  font-family: PingFangSC-Medium;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
 }
-.message-plugin-item {
-  min-width: 144px;
-  padding: 6px 13px;
+.tui-forward-list-item {
+  padding: 6px 0;
+  font-family: PingFangSC-Medium;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-weight: 500;
-  font-size: 12.8px;
-  font-family: PingFangSC-Medium;
-  line-height: 15px;
+  width: 100%;
 }
-.message-plugin-item:hover {
-  background: rgba(0, 110, 255, 0.1);
-  color: #147aff;
+.tui-forward-list-item .info {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 100%;
 }
-.message-plugin-item .del {
-  color: #FF584C;
+.tui-forward-list-item .info-nick {
+  padding: 0 13px;
+  font-family: PingFangSC-Medium;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  min-width: 180px;
+  max-width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 80%;
 }
-
-.message-custom {
+.tui-forward-footer {
+  background: rgba(249, 249, 249, 0.94);
+  padding: 13px 10px;
   display: flex;
-  word-break: break-all;
+  justify-content: space-between;
+  align-items: center;
 }
-.message-custom a {
-  color: #679ce1;
-  text-decoration: none;
-  font-family: PingFangSC-Regular;
+.tui-forward-footer .button {
+  cursor: pointer;
+  background: #0365f9;
+  border-radius: 31px;
+  padding: 10px 21px;
+  font-family: PingFangSC-Medium;
   font-style: normal;
-  font-weight: 500;
+  font-weight: 400;
   font-size: 14px;
-  line-height: 17px;
+  line-height: 20px;
+  color: #fff;
+  border: none;
 }
-.message-custom p {
-  font-family: PingFangSC-Regular;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 17px;
+.tui-forward-footer-name {
+  flex: 1;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
 }
 
-.message-revoke {
-  color: #999999;
+.transmitter {
+  padding: 0 10px;
 }
-
-.message-audio {
-  display: flex;
-  align-items: center;
+.transmitter .icon-send {
+  transform: rotate(90deg);
 }
-.message-audio .out {
-  transform: rotate(180deg);
+
+[data-uikit-theme=light] .tui-message-input {
+  background-color: var(--chat-theme-light-bg-primary);
 }
-.message-audio-none {
-  display: none;
+[data-uikit-theme=dark] .tui-message-input {
+  background-color: var(--chat-theme-dark-bg-primary);
 }
-.message-audio-content {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+[data-uikit-theme=light] .tui-message-input .tui-kit-input-box--focus {
+  outline: 1px solid var(--chat-theme-light-status-info);
 }
-.message-audio-out {
-  flex-direction: row-reverse;
+[data-uikit-theme=dark] .tui-message-input .tui-kit-input-box--focus {
+  outline: 1px solid var(--chat-theme-dark-status-info);
 }
-.message-audio .playing {
-  animation: playingAnimation 1s ease-in-out infinite;
+[data-uikit-theme=light] .tui-message-input .input-box {
+  background-color: var(--chat-theme-light-bg-primary);
+  border: 1px solid var(--chat-theme-light-border-5);
 }
-@keyframes playingAnimation {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.3;
-  }
-  100% {
-    opacity: 1;
-  }
+[data-uikit-theme=dark] .tui-message-input .input-box {
+  background-color: var(--chat-theme-dark-bg-primary);
+  border: 1px solid var(--chat-theme-dark-border-5);
 }
 
-.high-lighted {
-  animation: highLightedAnimation 1s ease-in-out forwards;
+.input-plugin-popup-box {
+  border-radius: 16px;
 }
-
-@keyframes highLightedAnimation {
-  0% {
-    opacity: 1;
-    color: #ff9c19;
-  }
-  25% {
-    opacity: 0.3;
-  }
-  50% {
-    color: #ff9c19;
-    opacity: 1;
-  }
-  75% {
-    opacity: 0.3;
-  }
-  100% {
-    color: #ff9c19;
-    opacity: 1;
-  }
+[data-uikit-theme=light] .input-plugin-popup-box {
+  background-color: var(--chat-theme-light-bg-primary);
+  box-shadow: var(--chat-theme-light-box-shadow-1);
 }
-.progress-box {
+[data-uikit-theme=dark] .input-plugin-popup-box {
+  background-color: var(--chat-theme-dark-bg-3);
+  box-shadow: var(--chat-theme-dark-box-shadow-1);
+}
+.message-default {
   width: 100%;
-  height: 5px;
+  flex: 1;
   display: flex;
-  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  font-family: SF Pro Text;
+  font-size: 14px;
+  font-family: PingFangSC-Medium;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px;
 }
-.progress-box .progress {
+.message-default .avatar {
+  width: 45px;
+}
+.message-default .avatar img {
+  width: 45px;
+}
+.message-default .content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.message-default .content .name {
   display: inline-block;
-  width: 0;
-  background: #147aff;
-  height: 5px;
-  border-radius: 2px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  padding-bottom: 3px;
+  max-width: 60%;
+}
+[data-uikit-theme=light] .message-default .content .name {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-uikit-theme=dark] .message-default .content .name {
+  color: var(--chat-theme-dark-text-primary);
 }
 
-.website {
-  color: #147aff !important;
+.in {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-self: flex-start;
+  gap: 10px;
+}
+.in .content {
+  align-items: flex-start;
+  flex: 1;
 }
 
-[data-chat-theme=light] .message-text,
-[data-chat-theme=light] .message-custom {
-  border: 1px solid var(--chat-theme-light-border-5);
+.out {
+  flex: 1;
+  display: flex;
+  gap: 10px;
+  flex-direction: row-reverse;
+  justify-self: flex-end;
 }
-[data-chat-theme=dark] .message-text,
-[data-chat-theme=dark] .message-custom {
-  border: 1px solid var(--chat-theme-dark-border-5);
+.out .content {
+  align-items: flex-end;
+  flex: 1;
 }
 
-[data-chat-theme=light] .bubble {
-  background-color: var(--chat-theme-light-bg-primary);
+.tip {
+  justify-self: center !important;
+  width: auto;
 }
-[data-chat-theme=dark] .bubble {
-  background-color: var(--chat-theme-dark-bg-primary);
+
+.bubble {
+  padding: 8px 16px;
 }
-[data-chat-theme=light] .bubble-out {
-  border: none;
-  background-color: var(--chat-theme-light-bg-secondary);
+.bubble-in {
+  border-radius: 0px 16px 16px 16px;
 }
-[data-chat-theme=dark] .bubble-out {
-  border: none;
-  background-color: var(--chat-theme-dark-bg-secondary);
+.bubble-in.group {
+  border-radius: 0px 16px 16px 16px;
 }
-
-.meesage-bubble-reply-out .meesage-bubble-reply-main .message-text {
-  background: none;
+.bubble-out {
+  border-radius: 16px 16px 0 16px;
 }
 
-[data-chat-theme=light] .message-tip {
+.message-status {
+  display: flex;
+  align-items: flex-end;
+  align-self: flex-end;
+}
+.message-status .time {
+  width: max-content;
+  font-weight: 400;
+  padding: 5px 0 0 10px;
+  font-size: 12px;
+  font-family: PingFangSC-Medium;
+  line-height: 14px;
+  text-align: right;
+}
+[data-uikit-theme=light] .message-status .time {
   color: var(--chat-theme-light-text-secondary);
 }
-[data-chat-theme=dark] .message-tip {
+[data-uikit-theme=dark] .message-status .time {
   color: var(--chat-theme-dark-text-secondary);
 }
 
-.tip .bubble .edit {
-  color: #147aff;
-  padding: 3px;
+.message-image, .message-video {
+  position: relative;
 }
-.plugin {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: 0 8px;
-  gap: 8px;
+.message-image .message-status, .message-video .message-status {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+[data-uikit-theme=light] .message-image .message-status .time, [data-uikit-theme=light] .message-video .message-status .time {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-uikit-theme=dark] .message-image .message-status .time, [data-uikit-theme=dark] .message-video .message-status .time {
+  color: var(--chat-theme-dark-text-primary);
 }
 
-.plugin-popup {
-  height: 100%;
+.message-text {
   display: flex;
-  align-items: center;
-  position: relative;
 }
-.plugin-popup-box {
-  position: absolute;
-  z-index: 2;
-  bottom: 100%;
+.message-text-content {
+  display: inline;
+  word-break: break-word;
+  font-family: PingFangSC-Regular;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
 }
-
-.plugin-popup-box {
-  border-radius: 16px;
+.message-text-content-p {
+  white-space: pre-wrap;
+  display: inline;
+  vertical-align: middle;
 }
-[data-chat-theme=light] .plugin-popup-box {
+[data-uikit-theme=light] .message-text-content-p {
   color: var(--chat-theme-light-text-primary);
 }
-[data-chat-theme=dark] .plugin-popup-box {
+[data-uikit-theme=dark] .message-text-content-p {
   color: var(--chat-theme-dark-text-primary);
 }
-[data-chat-theme=light] .plugin-popup-box {
-  background-color: var(--chat-theme-light-bg-primary);
-  box-shadow: var(--chat-theme-light-box-shadow-1);
+.message-text-content .message-status {
+  display: inline-flex;
+  float: right;
+  clear: right;
 }
-[data-chat-theme=dark] .plugin-popup-box {
-  background-color: var(--chat-theme-dark-bg-3);
-  box-shadow: var(--chat-theme-dark-box-shadow-1);
+
+.message-text,
+.message-tip {
+  font-family: PingFangSC-Regular;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
 }
-.tui-message-input {
-  display: flex;
-  flex-direction: column;
+.message-text .text-img,
+.message-tip .text-img {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
 }
-.tui-message-input-main {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: 14px 12px;
-  gap: 12px;
+
+.message-image {
+  background: #FFFFFF;
 }
-.tui-message-input-main .input-box {
-  flex: 1;
-  display: flex;
-  position: relative;
-  min-height: 20px;
+.message-image img {
+  max-width: 300px;
+}
+.message-image .img-h5 {
+  max-width: 200px;
   max-height: 200px;
-  border-radius: 15px;
-  overflow: hidden;
-  padding: 10px;
 }
-.tui-message-input-main .input-box .input-visibility-content {
-  min-height: 20px;
-  word-break: break-all;
-  visibility: hidden;
-  max-width: -webkit-fill-available;
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 17px;
-  padding: 1px 2px;
+.message-image .big-image {
+  max-width: 90%;
+  max-height: 90%;
 }
-.tui-message-input-main .input-box textarea {
+
+.message-video {
+  max-width: 300px;
+}
+.message-video .snap-video {
+  position: relative;
+  height: 100%;
+  border-radius: 10px;
+}
+.message-video .snap-video::before {
   position: absolute;
+  z-index: 1;
+  content: "";
+  width: 0px;
+  height: 0px;
+  border: 15px solid transparent;
+  border-left: 20px solid #ffffff;
   top: 0;
   left: 0;
-  width: -webkit-fill-available;
-  height: -webkit-fill-available;
-  flex: 1;
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 17px;
-  margin: 9px;
-  resize: none;
-  border: none;
-  background: none;
+  bottom: 0;
+  right: 0;
+  margin: auto;
 }
-[data-chat-theme=light] .tui-message-input-main .input-box textarea {
-  color: var(--chat-theme-light-text-primary);
+.message-video video {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
 }
-[data-chat-theme=dark] .tui-message-input-main .input-box textarea {
-  color: var(--chat-theme-dark-text-primary);
+.message-video .play-video {
+  max-width: 95%;
+  max-height: 65%;
 }
-.tui-message-input-main .input-box textarea:focus, .tui-message-input-main .input-box textarea:active {
-  border: none;
-  outline: none;
+
+.message-video.message-video-h5 {
+  max-width: 200px;
+  max-height: 200px;
 }
-.tui-message-input-main .disabled {
-  display: none;
+
+.message-file {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ddd;
 }
-.tui-message-input-box {
-  flex: 1;
+.message-file-main {
   display: flex;
   align-items: center;
+  padding: 12px;
+  background: #FFFFFF;
+  border-radius: 4px;
 }
-
-ul li {
-  list-style: none;
+.message-file-main .icon {
+  margin-right: 7px;
 }
-
-.input-plugin-popup {
-  position: relative;
+.message-file-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
 }
-.input-plugin-popup-box {
-  position: absolute;
-  z-index: 2;
-  bottom: 30px;
+.message-file-footer .time {
+  padding-top: 10px;
 }
-
-.input-plugin-item {
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
+.message-file-size {
+  padding-top: 10px;
+  font-weight: 400;
+  font-size: 12px;
   font-family: PingFangSC-Medium;
-  line-height: 19px;
-  display: flex;
-}
-.input-plugin-item span {
-  padding: 0 17px;
+  line-height: 14px;
+  color: #7A7A7A;
 }
 
-.emoji-picker .face-list {
-  height: 120px;
-  width: 242px;
-  padding: 10px 5px;
+.message-merger {
   display: flex;
-  flex-wrap: wrap;
-  overflow-y: auto;
+  flex-direction: column;
+  background: #ECEBEB;
 }
-.emoji-picker .face-list-item {
-  padding: 5px;
-  cursor: pointer;
-  user-select: none;
+.message-merger h3 {
+  padding-bottom: 4px;
+  border-bottom: 1px solid #a1a1a1;
 }
-.emoji-picker .face-list-item img {
-  width: 20px;
+.message-merger-list {
+  opacity: 0.6;
 }
-.emoji-picker .face-list-item .face-img {
-  width: 38px;
+.message-merger-item {
+  padding-top: 4px;
 }
-.emoji-picker .face-tab {
-  display: flex;
-  align-items: center;
-  min-width: 265px;
+
+.meesage-bubble-reply {
+  padding: 8px 16px;
 }
-.emoji-picker .face-tab-item {
-  cursor: pointer;
-  width: 24px;
-  padding: 10px;
+[data-uikit-theme=light] .meesage-bubble-reply {
+  background-color: var(--chat-theme-light-bg-secondary);
 }
-.emoji-picker .face-tab-item img {
-  width: 100%;
+[data-uikit-theme=dark] .meesage-bubble-reply {
+  background-color: var(--chat-theme-dark-bg-secondary);
 }
-.emoji-picker .emoji-plugin-right {
-  right: 0;
+.meesage-bubble-reply-in {
+  border-radius: 16px 16px 16px 0;
 }
-
-.upload-picker {
-  position: relative;
-  padding: 10px 16px;
-  min-width: 180px;
+.meesage-bubble-reply-out {
+  border-radius: 16px 16px 0px 16px;
 }
-.upload-picker:hover {
-  color: #147aff;
+.meesage-bubble-reply .message-text {
+  border: none !important;
 }
-.upload-picker input {
-  position: absolute;
-  cursor: pointer;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
+.meesage-bubble-reply .bubble {
+  padding: 0;
 }
-
-.input-quote {
-  padding: 7px 16px;
-  background: #f9f9f9;
-  display: flex;
-  align-items: center;
+.meesage-bubble-reply .bubble-in {
+  border-radius: 0;
 }
-.input-quote-content {
-  flex: 1;
-  background: #fff;
-  padding: 2px 14px;
+.meesage-bubble-reply-main {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  font-weight: 500;
-  font-size: 14px;
-  font-family: PingFangSC-Medium;
-  line-height: 17px;
-  color: #000;
+  padding: 10px 14px;
+  margin-bottom: 10px;
 }
-.input-quote-content::before {
+[data-uikit-theme=light] .meesage-bubble-reply-main {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-uikit-theme=dark] .meesage-bubble-reply-main {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
+.meesage-bubble-reply-main::before {
   content: "";
   position: absolute;
   width: 6px;
   height: 100%;
-  background: #999;
   top: 0;
   left: 0;
 }
-.input-quote-content span {
-  padding-top: 8px;
-  opacity: 0.6;
-}
-.input-quote .icon {
-  margin: 0 5px 0 16px;
-}
-
-.tui-forward {
-  background: #fff;
-  border-radius: 16px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 300px;
-  max-height: 90%;
-}
-.tui-forward-header {
-  display: flex;
-  align-items: center;
-  padding: 24px 20px;
-}
-.tui-forward-title {
-  padding: 0 16px;
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 17px;
+[data-uikit-theme=light] .meesage-bubble-reply-main::before {
+  background-color: var(--chat-theme-light-bg-5);
 }
-.tui-forward-main {
-  padding: 0 20px;
-  max-height: calc(100vh - 200px);
-  overflow-y: auto;
+[data-uikit-theme=dark] .meesage-bubble-reply-main::before {
+  background-color: var(--chat-theme-dark-bg-5);
 }
-.tui-forward-main .no-result {
-  font-family: PingFangSC-Medium;
+.meesage-bubble-reply-main .title {
+  font-weight: 500;
   font-size: 14px;
-  font-style: normal;
-  line-height: 20px;
-  padding: 10px;
-  text-align: center;
-  color: #999;
-}
-.tui-forward-search {
-  padding: 10px 15px;
+  padding-bottom: 10px;
 }
-.tui-forward-list {
-  padding: 13px 0;
+[data-uikit-theme=light] .meesage-bubble-reply-main .title {
+  color: var(--chat-theme-light-text-primary);
 }
-.tui-forward-list-title {
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
+[data-uikit-theme=dark] .meesage-bubble-reply-main .title {
+  color: var(--chat-theme-dark-text-primary);
 }
-.tui-forward-list-item {
-  padding: 6px 0;
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
+.meesage-bubble-reply-main .message-context {
+  opacity: 0.6;
 }
-.tui-forward-list-item .info {
+
+.meesage-bubble {
   display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  width: 100%;
+  align-items: flex-end;
 }
-.tui-forward-list-item .info-nick {
-  padding: 0 13px;
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  min-width: 180px;
-  max-width: 300px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: 80%;
+.meesage-bubble-status {
+  margin: 3px;
 }
-.tui-forward-footer {
-  background: rgba(249, 249, 249, 0.94);
-  padding: 13px 10px;
+.meesage-bubble-context {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 10px;
 }
-.tui-forward-footer .button {
-  cursor: pointer;
-  background: #0365f9;
-  border-radius: 31px;
-  padding: 10px 21px;
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: #fff;
-  border: none;
-}
-.tui-forward-footer-name {
+.meesage-bubble-context .message-context {
   flex: 1;
-  overflow: hidden;
-  word-break: break-all;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
 }
 
-.transmitter {
-  padding: 0 10px;
+.icon-fail {
+  width: 14px;
+  height: 14px;
+  border-radius: 14px;
+  position: relative;
+  background: #FA5151;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
-.transmitter .icon-send {
-  transform: rotate(90deg);
+.icon-fail::before {
+  position: absolute;
+  content: "!";
+  color: #FFFFFF;
+  font-size: 12px;
+  font-family: PingFangSC-Medium;
 }
 
-[data-chat-theme=light] .tui-message-input {
-  background-color: var(--chat-theme-light-bg-primary);
-}
-[data-chat-theme=dark] .tui-message-input {
-  background-color: var(--chat-theme-dark-bg-primary);
-}
-[data-chat-theme=light] .tui-message-input .tui-kit-input-box--focus {
-  outline: 1px solid var(--chat-theme-light-status-info);
-}
-[data-chat-theme=dark] .tui-message-input .tui-kit-input-box--focus {
-  outline: 1px solid var(--chat-theme-dark-status-info);
-}
-[data-chat-theme=light] .tui-message-input .input-box {
-  background-color: var(--chat-theme-light-bg-primary);
-  border: 1px solid var(--chat-theme-light-border-5);
+.message-face {
+  display: flex;
+  flex-direction: column;
 }
-[data-chat-theme=dark] .tui-message-input .input-box {
-  background-color: var(--chat-theme-dark-bg-primary);
-  border: 1px solid var(--chat-theme-dark-border-5);
+.message-face .img {
+  max-width: 88px;
 }
 
-.input-plugin-popup-box {
-  border-radius: 16px;
-}
-[data-chat-theme=light] .input-plugin-popup-box {
-  background-color: var(--chat-theme-light-bg-primary);
-  box-shadow: var(--chat-theme-light-box-shadow-1);
-}
-[data-chat-theme=dark] .input-plugin-popup-box {
-  background-color: var(--chat-theme-dark-bg-3);
-  box-shadow: var(--chat-theme-dark-box-shadow-1);
-}
-.tui-kit-avatar {
-  display: flex;
-  align-items: center;
+.loading {
+  display: inline-block;
   position: relative;
-  cursor: pointer;
-  flex-shrink: 0;
 }
-.tui-kit-avatar.circle .avatar-image {
-  border-radius: 50%;
+.loading .img, .loading video {
+  min-width: 60px;
+  min-height: 60px;
+  max-width: 300px;
+  border-radius: 10px;
 }
-.tui-kit-avatar.square .avatar-image {
-  border-radius: 4px;
+.loading .img-h5, .loading .video-h5 {
+  min-width: 60px;
+  min-height: 60px;
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 10px;
 }
-.tui-kit-avatar img {
+.loading::before {
+  position: absolute;
+  content: "";
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
   width: 100%;
   height: 100%;
+  top: 0;
+  left: 0;
 }
-.tui-kit-avatar:hover .tui-kit-avatar-edit {
-  display: flex;
-}
-.tui-kit-avatar-edit {
+.loading::after {
   position: absolute;
+  content: "";
+  border: 5px solid #f3f3f3;
+  border-top: 5px solid #555;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  animation: spin 2s linear infinite;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.33);
-  width: 100%;
-  height: 100%;
-  border-radius: 100%;
-  display: none;
-  justify-content: center;
-  align-items: center;
+  right: 0;
+  bottom: 0;
+  margin: auto;
 }
-.tui-kit-avatar-list {
-  position: absolute;
-  z-index: 2;
-  top: 100%;
-  background: #FFFFFF;
-  border-radius: 5px;
-  box-shadow: 0 11px 20px 0 rgb(0, 0, 0);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100%;
-  min-width: 200px;
-  max-width: 400px;
-  padding: 10px;
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.message-plugin {
+  width: 32px;
+  margin: 0 5px;
 }
-.tui-kit-avatar-list-item {
-  padding: 10px;
+.message-plugin .icon-more {
+  transform: scale(1.5);
 }
-.tui-kit-avatar-list-item img {
-  width: 40px;
+.message-plugin .plugin-popup-box {
+  bottom: auto;
+  top: 100%;
+  overflow: hidden;
 }
-.conversation-list-container {
-  overflow-x: hidden;
-  height: 100%;
+.message-plugin-box {
+  padding: 6px 0;
 }
-
-.conversation-preview-container {
+.message-plugin-item {
+  min-width: 144px;
+  padding: 6px 13px;
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  border: none;
-  width: 100%;
-  height: 64px;
-  cursor: pointer;
-  line-height: 17px;
-  padding: 0 20px;
+  font-weight: 500;
+  font-size: 12.8px;
+  font-family: PingFangSC-Medium;
+  line-height: 15px;
 }
-[data-chat-theme=light] .conversation-preview-container {
-  background-color: var(--chat-theme-light-bg-primary);
+.message-plugin-item:hover {
+  background: rgba(0, 110, 255, 0.1);
+  color: #147aff;
 }
-[data-chat-theme=dark] .conversation-preview-container {
-  background-color: var(--chat-theme-dark-bg-primary);
+.message-plugin-item .del {
+  color: #FF584C;
 }
-.conversation-preview-container .content {
-  flex: 1 1 auto;
-  text-align: left;
-  margin-left: 10px;
-  min-width: 0;
+
+.message-custom {
+  display: flex;
+  word-break: break-all;
 }
-.conversation-preview-container .content .title {
+.message-custom a {
+  color: #679ce1;
+  text-decoration: none;
+  font-family: PingFangSC-Regular;
   font-style: normal;
-  font-weight: 700;
+  font-weight: 500;
   font-size: 14px;
   line-height: 17px;
-  font-family: PingFangSC-Medium;
-  padding: 1px 0;
-  width: 100%;
-}
-[data-chat-theme=light] .conversation-preview-container .content .title {
-  color: var(--chat-theme-light-text-primary);
-}
-[data-chat-theme=dark] .conversation-preview-container .content .title {
-  color: var(--chat-theme-dark-text-primary);
 }
-.conversation-preview-container .content .message {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: PingFangSC-Medium;
+.message-custom p {
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
   font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  padding: 1px 0;
-}
-[data-chat-theme=light] .conversation-preview-container .content .message {
-  color: var(--chat-theme-light-text-secondary);
+  font-weight: 500;
+  line-height: 17px;
 }
-[data-chat-theme=dark] .conversation-preview-container .content .message {
-  color: var(--chat-theme-dark-text-secondary);
+
+.message-revoke {
+  color: #999999;
 }
-.conversation-preview-container .external {
-  text-align: right;
-  flex: 0 1 auto;
+
+.message-audio {
   display: flex;
-  flex-direction: column;
+  align-items: center;
 }
-.conversation-preview-container .external .unread {
-  height: 19px;
-  padding: 1px 0;
+.message-audio .out {
+  transform: rotate(180deg);
 }
-.conversation-preview-container .external .time {
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  padding: 1px 0;
+.message-audio-none {
+  display: none;
 }
-[data-chat-theme=light] .conversation-preview-container .external .time {
-  color: var(--chat-theme-light-text-secondary);
+.message-audio-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
-[data-chat-theme=dark] .conversation-preview-container .external .time {
-  color: var(--chat-theme-dark-text-secondary);
+.message-audio-out {
+  flex-direction: row-reverse;
 }
-.conversation-preview-container .external .more--hover {
-  display: flex;
-  justify-content: flex-end;
-  flex: 1 1;
+.message-audio .playing {
+  animation: playingAnimation 1s ease-in-out infinite;
 }
-.conversation-preview-container .external .more--hover .icon-more {
-  transform: scale(1.5);
+@keyframes playingAnimation {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
 }
-.conversation-preview-container .external .more--hover .more-handle-box {
-  top: 0;
-  right: 0;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  bottom: initial;
-  padding: 14px 0;
-  box-sizing: border-box;
-  text-align: start;
-  white-space: nowrap;
+
+.high-lighted {
+  animation: highLightedAnimation 1s ease-in-out forwards;
 }
-.conversation-preview-container .external .more--hover .more-handle-box .more-handle-item {
-  font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 19px;
-  padding: 6px 16px;
-  cursor: pointer;
-  font-weight: 500;
-  box-sizing: border-box;
+
+@keyframes highLightedAnimation {
+  0% {
+    opacity: 1;
+    color: #ff9c19;
+  }
+  25% {
+    opacity: 0.3;
+  }
+  50% {
+    color: #ff9c19;
+    opacity: 1;
+  }
+  75% {
+    opacity: 0.3;
+  }
+  100% {
+    color: #ff9c19;
+    opacity: 1;
+  }
 }
-[data-chat-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
-  color: var(--chat-theme-light-status-danger);
+.progress-box {
+  width: 100%;
+  height: 5px;
+  display: flex;
+  justify-content: flex-start;
 }
-[data-chat-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
-  color: var(--chat-theme-dark-status-danger);
+.progress-box .progress {
+  display: inline-block;
+  width: 0;
+  background: #147aff;
+  height: 5px;
+  border-radius: 2px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
 }
-[data-chat-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
-  background-color: var(--chat-theme-light-bg-active);
+
+.website {
+  color: #147aff !important;
 }
-[data-chat-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
-  background-color: var(--chat-theme-dark-bg-active);
+
+[data-uikit-theme=light] .message-text,
+[data-uikit-theme=light] .message-custom {
+  border: 1px solid var(--chat-theme-light-border-5);
 }
-[data-chat-theme=light] .conversation-preview-container:hover {
-  background-color: var(--chat-theme-light-bg-active);
+[data-uikit-theme=dark] .message-text,
+[data-uikit-theme=dark] .message-custom {
+  border: 1px solid var(--chat-theme-dark-border-5);
 }
-[data-chat-theme=dark] .conversation-preview-container:hover {
-  background-color: var(--chat-theme-dark-bg-active);
+
+[data-uikit-theme=light] .bubble {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-uikit-theme=dark] .bubble {
+  background-color: var(--chat-theme-dark-bg-primary);
 }
-[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--pin {
+[data-uikit-theme=light] .bubble-out {
+  border: none;
   background-color: var(--chat-theme-light-bg-secondary);
 }
-[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--pin {
+[data-uikit-theme=dark] .bubble-out {
+  border: none;
   background-color: var(--chat-theme-dark-bg-secondary);
 }
-[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--active {
-  background-color: var(--chat-theme-light-bg-active);
+
+.meesage-bubble-reply-out .meesage-bubble-reply-main .message-text {
+  background: none;
 }
-[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--active {
-  background-color: var(--chat-theme-dark-bg-active);
+
+[data-uikit-theme=light] .message-tip {
+  color: var(--chat-theme-light-text-secondary);
 }
-[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--active .title {
-  color: var(--chat-theme-light-status-info);
+[data-uikit-theme=dark] .message-tip {
+  color: var(--chat-theme-dark-text-secondary);
 }
-[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--active .title {
-  color: var(--chat-theme-dark-status-info);
+
+.tip .bubble .edit {
+  color: #147aff;
+  padding: 3px;
 }
-.conversation-preview-container.conversation-preview-content--unread .unread {
-  width: 16px;
-  height: 13px;
-  border-radius: 16px;
+.plugin {
   display: flex;
-  justify-content: center;
   align-items: center;
-  padding: 2px 5px 1px;
-  font-size: 11px;
-  font-weight: 700;
-  margin: 2px 0 2px auto;
-  color: #fff;
+  height: 100%;
+  padding: 0 8px;
+  gap: 8px;
 }
-[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--unread .unread {
-  background-color: var(--chat-theme-light-status-danger);
+
+.plugin-popup {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
 }
-[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--unread .unread {
-  background-color: var(--chat-theme-dark-status-danger);
+.plugin-popup-box {
+  position: absolute;
+  z-index: 2;
+  bottom: 100%;
+}
+
+.plugin-popup-box {
+  border-radius: 16px;
+}
+[data-uikit-theme=light] .plugin-popup-box {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-uikit-theme=dark] .plugin-popup-box {
+  color: var(--chat-theme-dark-text-primary);
+}
+[data-uikit-theme=light] .plugin-popup-box {
+  background-color: var(--chat-theme-light-bg-primary);
+  box-shadow: var(--chat-theme-light-box-shadow-1);
+}
+[data-uikit-theme=dark] .plugin-popup-box {
+  background-color: var(--chat-theme-dark-bg-3);
+  box-shadow: var(--chat-theme-dark-box-shadow-1);
 }
 .tui-chat-header {
   padding: 16px 20px;
@@ -1765,10 +1233,10 @@ ul li {
   justify-content: space-between;
   align-items: center;
 }
-[data-chat-theme=light] .tui-chat-header {
+[data-uikit-theme=light] .tui-chat-header {
   background-color: var(--chat-theme-light-bg-primary);
 }
-[data-chat-theme=dark] .tui-chat-header {
+[data-uikit-theme=dark] .tui-chat-header {
   background-color: var(--chat-theme-dark-bg-primary);
 }
 .tui-chat-header-left {
@@ -1788,10 +1256,10 @@ ul li {
   font-weight: 700;
   font-size: 14px;
 }
-[data-chat-theme=light] .tui-chat-header .title {
+[data-uikit-theme=light] .tui-chat-header .title {
   color: var(--chat-theme-light-text-primary);
 }
-[data-chat-theme=dark] .tui-chat-header .title {
+[data-uikit-theme=dark] .tui-chat-header .title {
   color: var(--chat-theme-dark-text-primary);
 }
 .tui-chat-header .system {
@@ -1824,10 +1292,10 @@ ul li {
   position: relative;
   padding: 0 20px;
 }
-[data-chat-theme=light] .message-list {
+[data-uikit-theme=light] .message-list {
   background-color: var(--chat-theme-light-bg-primary);
 }
-[data-chat-theme=dark] .message-list {
+[data-uikit-theme=dark] .message-list {
   background-color: var(--chat-theme-dark-bg-primary);
 }
 .message-list.hide {
@@ -1845,10 +1313,10 @@ ul li {
   font-weight: 500;
   line-height: 17px;
 }
-[data-chat-theme=light] .message-list .no-more {
+[data-uikit-theme=light] .message-list .no-more {
   color: var(--chat-theme-light-text-secondary);
 }
-[data-chat-theme=dark] .message-list .no-more {
+[data-uikit-theme=dark] .message-list .no-more {
   color: var(--chat-theme-dark-text-secondary);
 }
 .message-list-time {
@@ -1859,10 +1327,10 @@ ul li {
   padding: 10px;
   text-align: center;
 }
-[data-chat-theme=light] .message-list-time {
+[data-uikit-theme=light] .message-list-time {
   color: var(--chat-theme-light-text-secondary);
 }
-[data-chat-theme=dark] .message-list-time {
+[data-uikit-theme=dark] .message-list-time {
   color: var(--chat-theme-dark-text-secondary);
 }
 .tui-profile {