@tencentcloud/chat-uikit-react 2.2.5 → 2.2.7

package/dist/cjs/index.d.css

@@ -1,942 +1,1068 @@
-.tui-kit {
-  position: relative;
+.tui-conversation {
+  flex: 1 1 auto;
+  min-width: 0;
   display: flex;
-  width: 100%;
-  height: 100%;
+  flex-direction: column;
+  position: relative;
   text-align: initial;
+  overflow: auto;
 }
-[data-chat-theme=light] .tui-kit {
-  background-color: var(--chat-theme-light-bg-primary);
-}
-[data-chat-theme=dark] .tui-kit {
-  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;
+[data-uikit-theme=light] .tui-conversation {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-.sample-chat-profile {
-  position: absolute;
-  top: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
+[data-uikit-theme=dark] .tui-conversation {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-.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: #fff;
+  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(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/* 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(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * Add the correct font size in all browsers.
- */
-small {
-  font-size: 80%;
+[data-uikit-theme=dark] .conversation-preview-container .content .message {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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 0 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(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/* 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(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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;
+  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;
+[data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box {
+  background-color: var(--uikit-theme-light-dropdown-color-default);
+  box-shadow: 0 0 10px var(--uikit-theme-light-shadow-color);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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=dark] .conversation-preview-container .external .more--hover .more-handle-box {
+  background-color: var(--uikit-theme-dark-dropdown-color-default);
+  box-shadow: 0 0 10px var(--uikit-theme-dark-shadow-color);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * Correct the padding in Firefox.
- */
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
+.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;
 }
-
-/**
- * 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 {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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 {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-textarea {
-  overflow: auto;
+[data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
+  color: var(--uikit-theme-light-text-color-error);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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 .external .more--hover .more-handle-box .more-handle-item.delete {
+  color: var(--uikit-theme-dark-text-color-error);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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 .external .more--hover .more-handle-box .more-handle-item:hover {
+  background-color: var(--uikit-theme-light-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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 .external .more--hover .more-handle-box .more-handle-item:hover {
+  background-color: var(--uikit-theme-dark-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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:hover {
+  background-color: var(--uikit-theme-light-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * 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 */
+[data-uikit-theme=dark] .conversation-preview-container:hover {
+  background-color: var(--uikit-theme-dark-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/* Interactive
-   ========================================================================== */
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-details {
-  display: block;
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--pin {
+  transition: background-color 0.3s ease-in-out;
 }
-
-/*
- * Add the correct display in all browsers.
- */
-summary {
-  display: list-item;
+[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--pin {
+  transition: background-color 0.3s ease-in-out;
 }
-
-/* Misc
-   ========================================================================== */
-/**
- * Add the correct display in IE 10+.
- */
-template {
-  display: none;
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--active {
+  background-color: var(--uikit-theme-light-list-color-active);
+  transition: background-color 0.3s ease-in-out;
 }
-
-/**
- * Add the correct display in IE 10.
- */
-[hidden] {
-  display: none;
+[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--active {
+  background-color: var(--uikit-theme-dark-list-color-active);
+  transition: background-color 0.3s ease-in-out;
 }
-
-:root {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.conversation-preview-container.conversation-preview-content--unread .unread {
+  height: 13px;
+  border-radius: 16px;
+  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;
 }
-
-@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");
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--unread .unread {
+  background-color: var(--uikit-theme-light-text-color-error);
+  transition: background-color 0.3s ease-in-out;
 }
-.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;
-}
-
-: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;
-}
-
-: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--unread .unread {
+  background-color: var(--uikit-theme-dark-text-color-error);
+  transition: background-color 0.3s ease-in-out;
 }
-.tui-conversation {
-  flex: 1;
-  box-sizing: border-box;
-  overflow: hidden;
-  min-width: 0;
+.tui-message-input {
   display: flex;
   flex-direction: column;
-  position: relative;
-  text-align: initial;
-}
-[data-chat-theme=light] .tui-conversation {
-  background-color: var(--chat-theme-light-bg-primary);
-}
-[data-chat-theme=dark] .tui-conversation {
-  background-color: var(--chat-theme-dark-bg-primary);
-}
-.tui-conversation .tui-conversation-header {
-  display: flex;
-  padding: 10px 20px;
 }
-.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;
+[data-uikit-theme=light] .tui-message-input-main .input-box textarea {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-.message-default .content .name {
-  display: inline-block;
-  padding-bottom: 3px;
-  max-width: 60%;
+[data-uikit-theme=dark] .tui-message-input-main .input-box textarea {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=light] .message-default .content .name {
-  color: var(--chat-theme-light-text-primary);
+.tui-message-input-main .input-box textarea:focus, .tui-message-input-main .input-box textarea:active {
+  border: none;
+  outline: none;
 }
-[data-chat-theme=dark] .message-default .content .name {
-  color: var(--chat-theme-dark-text-primary);
+.tui-message-input-main .disabled {
+  display: none;
 }
-
-.in {
+.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);
+[data-uikit-theme=light] .upload-picker {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[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);
+[data-uikit-theme=dark] .upload-picker {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-
-.message-text {
-  display: flex;
+[data-uikit-theme=light] .upload-picker:hover {
+  background-color: var(--uikit-theme-light-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
-.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;
+[data-uikit-theme=dark] .upload-picker:hover {
+  background-color: var(--uikit-theme-dark-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
-.message-text-content-p {
-  white-space: pre-wrap;
-  display: inline;
-  vertical-align: middle;
+.upload-picker input {
+  position: absolute;
+  cursor: pointer;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
 }
-[data-chat-theme=light] .message-text-content-p {
-  color: var(--chat-theme-light-text-primary);
+
+.input-quote {
+  padding: 7px 16px;
+  display: flex;
+  align-items: center;
 }
-[data-chat-theme=dark] .message-text-content-p {
-  color: var(--chat-theme-dark-text-primary);
+[data-uikit-theme=light] .input-quote {
+  background: var(--uikit-theme-light-bg-color-bubble-reciprocal);
+  transition: background-color 0.3s ease-in-out;
 }
-.message-text-content .message-status {
-  display: inline-flex;
-  float: right;
-  clear: right;
+[data-uikit-theme=dark] .input-quote {
+  background: var(--uikit-theme-dark-bg-color-bubble-reciprocal);
+  transition: background-color 0.3s ease-in-out;
 }
-
-.message-text,
-.message-tip {
-  font-family: PingFangSC-Regular;
-  font-style: normal;
+.input-quote-content {
+  flex: 1;
+  background: #fff;
+  padding: 2px 14px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
+  color: #000;
 }
-.message-text .text-img,
-.message-tip .text-img {
-  width: 20px;
-  height: 20px;
-  vertical-align: middle;
-}
-
-.message-image {
-  background: #FFFFFF;
+.input-quote-content::before {
+  content: "";
+  position: absolute;
+  width: 6px;
+  height: 100%;
+  background: #999;
+  top: 0;
+  left: 0;
 }
-.message-image img {
-  max-width: 300px;
+.input-quote-content span {
+  padding-top: 8px;
+  opacity: 0.6;
 }
-.message-image .img-h5 {
-  max-width: 200px;
-  max-height: 200px;
+.input-quote .icon {
+  margin: 0 5px 0 16px;
 }
-.message-image .big-image {
-  max-width: 90%;
+
+.tui-forward {
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 300px;
   max-height: 90%;
 }
-
-.message-video {
-  max-width: 300px;
+[data-uikit-theme=light] .tui-forward {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-.message-video .snap-video {
-  position: relative;
-  height: 100%;
-  border-radius: 10px;
+[data-uikit-theme=dark] .tui-forward {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-.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;
+.tui-forward-header {
+  display: flex;
+  align-items: center;
+  padding: 24px 20px;
 }
-.message-video video {
-  width: 100%;
-  height: 100%;
-  border-radius: 10px;
+[data-uikit-theme=light] .tui-forward-header {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-.message-video .play-video {
-  max-width: 95%;
-  max-height: 65%;
+[data-uikit-theme=dark] .tui-forward-header {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-
-.message-video.message-video-h5 {
-  max-width: 200px;
-  max-height: 200px;
+.tui-forward-title {
+  padding: 0 16px;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
 }
-
-.message-file {
+.tui-forward-main {
+  padding: 0 20px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+.tui-forward-main .no-result {
+  font-size: 14px;
+  padding: 10px;
+  text-align: center;
+}
+[data-uikit-theme=light] .tui-forward-main .no-result {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-forward-main .no-result {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-forward-search {
+  padding: 10px 15px;
+}
+.tui-forward-list {
+  padding: 13px 0;
+}
+.tui-forward-list-title {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+}
+.tui-forward-list-item {
+  padding: 6px 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
   display: flex;
-  flex-direction: column;
-  border: 1px solid #ddd;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
-.message-file-main {
+.tui-forward-list-item .info {
   display: flex;
   align-items: center;
-  padding: 12px;
-  background: #FFFFFF;
-  border-radius: 4px;
+  flex-shrink: 0;
 }
-.message-file-main .icon {
-  margin-right: 7px;
+.tui-forward-list-item .info-nick {
+  padding: 0 13px;
+  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-file-footer {
+.tui-forward-footer {
+  padding: 13px 10px;
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: center;
 }
-.message-file-footer .time {
-  padding-top: 10px;
+[data-uikit-theme=light] .tui-forward-footer {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-.message-file-size {
-  padding-top: 10px;
-  font-weight: 400;
-  font-size: 12px;
-  font-family: PingFangSC-Medium;
-  line-height: 14px;
-  color: #7A7A7A;
+[data-uikit-theme=dark] .tui-forward-footer {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-
-.message-merger {
-  display: flex;
-  flex-direction: column;
-  background: #ECEBEB;
+.tui-forward-footer .button {
+  cursor: pointer;
+  background: #0365f9;
+  border-radius: 31px;
+  padding: 10px 21px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: #fff;
+  border: none;
 }
-.message-merger h3 {
-  padding-bottom: 4px;
-  border-bottom: 1px solid #a1a1a1;
+.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-merger-list {
-  opacity: 0.6;
+[data-uikit-theme=light] .tui-forward-footer-name {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-.message-merger-item {
-  padding-top: 4px;
+[data-uikit-theme=dark] .tui-forward-footer-name {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
-.meesage-bubble-reply {
-  padding: 8px 16px;
+.transmitter {
+  padding: 0 10px;
 }
-[data-chat-theme=light] .meesage-bubble-reply {
-  background-color: var(--chat-theme-light-bg-secondary);
+.transmitter .icon-send {
+  transform: rotate(90deg);
 }
-[data-chat-theme=dark] .meesage-bubble-reply {
-  background-color: var(--chat-theme-dark-bg-secondary);
+
+[data-uikit-theme=light] .tui-message-input {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-.meesage-bubble-reply-in {
-  border-radius: 16px 16px 16px 0;
+[data-uikit-theme=dark] .tui-message-input {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-.meesage-bubble-reply-out {
-  border-radius: 16px 16px 0px 16px;
+[data-uikit-theme=light] .tui-message-input .tui-kit-input-box--focus {
+  outline: 1px solid var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
 }
-.meesage-bubble-reply .message-text {
-  border: none !important;
+[data-uikit-theme=dark] .tui-message-input .tui-kit-input-box--focus {
+  outline: 1px solid var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
 }
-.meesage-bubble-reply .bubble {
-  padding: 0;
+[data-uikit-theme=light] .tui-message-input .input-box {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  border: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-.meesage-bubble-reply .bubble-in {
-  border-radius: 0;
+[data-uikit-theme=dark] .tui-message-input .input-box {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  border: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-.meesage-bubble-reply-main {
-  position: relative;
-  padding: 10px 14px;
-  margin-bottom: 10px;
+
+.input-plugin-popup-box {
+  border-radius: 16px;
 }
-[data-chat-theme=light] .meesage-bubble-reply-main {
-  background-color: var(--chat-theme-light-bg-primary);
+[data-uikit-theme=light] .input-plugin-popup-box {
+  background-color: var(--uikit-theme-light-dropdown-color-default);
+  box-shadow: 0 0 10px 0 var(--uikit-theme-light-shadow-color);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .meesage-bubble-reply-main {
-  background-color: var(--chat-theme-dark-bg-primary);
+[data-uikit-theme=dark] .input-plugin-popup-box {
+  background-color: var(--uikit-theme-dark-dropdown-color-default);
+  box-shadow: 0 0 10px 0 var(--uikit-theme-dark-shadow-color);
+  transition: background-color 0.3s ease-in-out;
 }
-.meesage-bubble-reply-main::before {
-  content: "";
-  position: absolute;
-  width: 6px;
-  height: 100%;
-  top: 0;
-  left: 0;
+
+.input-icon {
+  width: 20px;
+  height: 20px;
 }
-[data-chat-theme=light] .meesage-bubble-reply-main::before {
-  background-color: var(--chat-theme-light-bg-5);
+[data-uikit-theme=light] .input-icon {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .meesage-bubble-reply-main::before {
-  background-color: var(--chat-theme-dark-bg-5);
+[data-uikit-theme=dark] .input-icon {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-.meesage-bubble-reply-main .title {
-  font-weight: 500;
+.message-default {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
   font-size: 14px;
-  padding-bottom: 10px;
+  font-family: PingFangSC-Medium;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px;
+}
+.message-default .avatar {
+  width: 45px;
 }
-[data-chat-theme=light] .meesage-bubble-reply-main .title {
-  color: var(--chat-theme-light-text-primary);
+.message-default .avatar img {
+  width: 45px;
 }
-[data-chat-theme=dark] .meesage-bubble-reply-main .title {
-  color: var(--chat-theme-dark-text-primary);
+.message-default .content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
-.meesage-bubble-reply-main .message-context {
-  opacity: 0.6;
+.message-default .content .name {
+  display: inline-block;
+  padding-bottom: 3px;
+  max-width: 60%;
+}
+[data-uikit-theme=light] .message-default .content .name {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .message-default .content .name {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
-.meesage-bubble {
+.in {
+  flex: 1;
   display: flex;
-  align-items: flex-end;
+  flex-direction: row;
+  justify-self: flex-start;
+  gap: 10px;
 }
-.meesage-bubble-status {
-  margin: 3px;
+.in .content {
+  align-items: flex-start;
+  flex: 1;
 }
-.meesage-bubble-context {
+
+.out {
+  flex: 1;
   display: flex;
-  align-items: center;
   gap: 10px;
+  flex-direction: row-reverse;
+  justify-self: flex-end;
 }
-.meesage-bubble-context .message-context {
+.out .content {
+  align-items: flex-end;
   flex: 1;
 }
 
-.icon-fail {
-  width: 14px;
-  height: 14px;
-  border-radius: 14px;
-  position: relative;
-  background: #FA5151;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-.icon-fail::before {
-  position: absolute;
-  content: "!";
-  color: #FFFFFF;
-  font-size: 12px;
-  font-family: PingFangSC-Medium;
+.tip {
+  justify-self: center !important;
+  width: auto;
 }
 
-.message-face {
-  display: flex;
+.bubble {
+  padding: 8px 16px;
+}
+.bubble-in {
+  border-radius: 0 16px 16px;
+}
+.bubble-in.group {
+  border-radius: 0 16px 16px;
+}
+.bubble-out {
+  border-radius: 16px 16px 0;
+}
+
+.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;
+  line-height: 14px;
+  text-align: right;
+}
+[data-uikit-theme=light] .message-status .time {
+  color: var(--uikit-theme-light-text-color-anti-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .message-status .time {
+  color: var(--uikit-theme-dark-text-color-anti-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .bubble-in .message-status .time {
+  color: var(--uikit-theme-light-text-color-tertiary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .bubble-in .message-status .time {
+  color: var(--uikit-theme-dark-text-color-tertiary);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.message-image,
+.message-video {
+  position: relative;
+}
+.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(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .message-image .message-status .time,
+[data-uikit-theme=dark] .message-video .message-status .time {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.message-text {
+  display: flex;
+}
+.message-text-content {
+  display: inline;
+  word-break: break-word;
+  font-weight: 500;
+  font-size: 14px;
+}
+.message-text-content-p {
+  white-space: pre-wrap;
+  display: inline;
+  vertical-align: middle;
+}
+.message-text-content .message-status {
+  display: inline-flex;
+  float: right;
+  clear: right;
+}
+
+.message-text,
+.message-tip {
+  font-weight: 500;
+  font-size: 14px;
+}
+.message-text .text-img,
+.message-tip .text-img {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+
+.message-image {
+  background: transparent;
+}
+.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 {
+  position: relative;
+  height: 100%;
+  border-radius: 10px;
+}
+.message-video .snap-video::before {
+  position: absolute;
+  z-index: 1;
+  content: "";
+  width: 0;
+  height: 0;
+  border: 15px solid transparent;
+  border-left: 20px solid #fff;
+  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: #fff;
+  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-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-uikit-theme=light] .meesage-bubble-reply {
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .meesage-bubble-reply {
+  transition: background-color 0.3s ease-in-out;
+}
+.meesage-bubble-reply-in {
+  border-radius: 16px 16px 16px 0;
+}
+.meesage-bubble-reply-out {
+  border-radius: 16px 16px 0;
+}
+.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-uikit-theme=light] .meesage-bubble-reply-main {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .meesage-bubble-reply-main {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+.meesage-bubble-reply-main::before {
+  content: "";
+  position: absolute;
+  width: 6px;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+[data-uikit-theme=light] .meesage-bubble-reply-main::before {
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .meesage-bubble-reply-main::before {
+  transition: background-color 0.3s ease-in-out;
+}
+.meesage-bubble-reply-main .title {
+  font-weight: 500;
+  font-size: 14px;
+  padding-bottom: 10px;
+}
+[data-uikit-theme=light] .meesage-bubble-reply-main .title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .meesage-bubble-reply-main .title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.meesage-bubble-reply-main .message-context {
+  opacity: 0.6;
+}
+
+.meesage-bubble {
+  display: flex;
+  align-items: flex-end;
+}
+.meesage-bubble-status {
+  margin: 3px;
+}
+.meesage-bubble-context {
+  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;
+}
+.icon-fail::before {
+  position: absolute;
+  content: "!";
+  color: #fff;
+  font-size: 12px;
+  font-family: PingFangSC-Medium;
+}
+
+.message-face {
+  display: flex;
   flex-direction: column;
 }
 .message-face .img {
@@ -947,13 +1073,15 @@ template {
   display: inline-block;
   position: relative;
 }
-.loading .img, .loading video {
+.loading .img,
+.loading video {
   min-width: 60px;
   min-height: 60px;
   max-width: 300px;
   border-radius: 10px;
 }
-.loading .img-h5, .loading .video-h5 {
+.loading .img-h5,
+.loading .video-h5 {
   min-width: 60px;
   min-height: 60px;
   max-width: 200px;
@@ -1021,12 +1149,29 @@ template {
   font-family: PingFangSC-Medium;
   line-height: 15px;
 }
-.message-plugin-item:hover {
-  background: rgba(0, 110, 255, 0.1);
-  color: #147aff;
+[data-uikit-theme=light] .message-plugin-item {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .message-plugin-item {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .message-plugin-item:hover {
+  background: var(--uikit-theme-light-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
-.message-plugin-item .del {
-  color: #FF584C;
+[data-uikit-theme=dark] .message-plugin-item:hover {
+  background: var(--uikit-theme-dark-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .message-plugin-item .del {
+  color: var(--uikit-theme-light-text-color-error);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .message-plugin-item .del {
+  color: var(--uikit-theme-dark-text-color-error);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .message-custom {
@@ -1051,7 +1196,7 @@ template {
 }
 
 .message-revoke {
-  color: #999999;
+  color: #999;
 }
 
 .message-audio {
@@ -1077,686 +1222,141 @@ template {
 }
 @keyframes playingAnimation {
   0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.3;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.high-lighted {
-  animation: highLightedAnimation 1s ease-in-out forwards;
-}
-
-@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;
-  }
-}
-.progress-box {
-  width: 100%;
-  height: 5px;
-  display: flex;
-  justify-content: flex-start;
-}
-.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);
-}
-
-.website {
-  color: #147aff !important;
-}
-
-[data-chat-theme=light] .message-text,
-[data-chat-theme=light] .message-custom {
-  border: 1px solid var(--chat-theme-light-border-5);
-}
-[data-chat-theme=dark] .message-text,
-[data-chat-theme=dark] .message-custom {
-  border: 1px solid var(--chat-theme-dark-border-5);
-}
-
-[data-chat-theme=light] .bubble {
-  background-color: var(--chat-theme-light-bg-primary);
-}
-[data-chat-theme=dark] .bubble {
-  background-color: var(--chat-theme-dark-bg-primary);
-}
-[data-chat-theme=light] .bubble-out {
-  border: none;
-  background-color: var(--chat-theme-light-bg-secondary);
-}
-[data-chat-theme=dark] .bubble-out {
-  border: none;
-  background-color: var(--chat-theme-dark-bg-secondary);
-}
-
-.meesage-bubble-reply-out .meesage-bubble-reply-main .message-text {
-  background: none;
-}
-
-[data-chat-theme=light] .message-tip {
-  color: var(--chat-theme-light-text-secondary);
-}
-[data-chat-theme=dark] .message-tip {
-  color: var(--chat-theme-dark-text-secondary);
-}
-
-.tip .bubble .edit {
-  color: #147aff;
-  padding: 3px;
-}
-.plugin {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: 0 8px;
-  gap: 8px;
-}
-
-.plugin-popup {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-.plugin-popup-box {
-  position: absolute;
-  z-index: 2;
-  bottom: 100%;
-}
-
-.plugin-popup-box {
-  border-radius: 16px;
-}
-[data-chat-theme=light] .plugin-popup-box {
-  color: var(--chat-theme-light-text-primary);
-}
-[data-chat-theme=dark] .plugin-popup-box {
-  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);
-}
-[data-chat-theme=dark] .plugin-popup-box {
-  background-color: var(--chat-theme-dark-bg-3);
-  box-shadow: var(--chat-theme-dark-box-shadow-1);
-}
-.tui-message-input {
-  display: flex;
-  flex-direction: column;
-}
-.tui-message-input-main {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: 14px 12px;
-  gap: 12px;
-}
-.tui-message-input-main .input-box {
-  flex: 1;
-  display: flex;
-  position: relative;
-  min-height: 20px;
-  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;
-}
-.tui-message-input-main .input-box textarea {
-  position: absolute;
-  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;
-}
-[data-chat-theme=light] .tui-message-input-main .input-box textarea {
-  color: var(--chat-theme-light-text-primary);
-}
-[data-chat-theme=dark] .tui-message-input-main .input-box textarea {
-  color: var(--chat-theme-dark-text-primary);
-}
-.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;
-  align-items: center;
-}
-
-ul li {
-  list-style: none;
-}
-
-.input-plugin-popup {
-  position: relative;
-}
-.input-plugin-popup-box {
-  position: absolute;
-  z-index: 2;
-  bottom: 30px;
-}
-
-.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;
-}
-
-.emoji-picker .face-list {
-  height: 120px;
-  width: 242px;
-  padding: 10px 5px;
-  display: flex;
-  flex-wrap: wrap;
-  overflow-y: auto;
-}
-.emoji-picker .face-list-item {
-  padding: 5px;
-  cursor: pointer;
-  user-select: none;
-}
-.emoji-picker .face-list-item img {
-  width: 20px;
-}
-.emoji-picker .face-list-item .face-img {
-  width: 38px;
-}
-.emoji-picker .face-tab {
-  display: flex;
-  align-items: center;
-  min-width: 265px;
-}
-.emoji-picker .face-tab-item {
-  cursor: pointer;
-  width: 24px;
-  padding: 10px;
-}
-.emoji-picker .face-tab-item img {
-  width: 100%;
-}
-.emoji-picker .emoji-plugin-right {
-  right: 0;
-}
-
-.upload-picker {
-  position: relative;
-  padding: 10px 16px;
-  min-width: 180px;
-}
-.upload-picker:hover {
-  color: #147aff;
-}
-.upload-picker input {
-  position: absolute;
-  cursor: pointer;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.input-quote {
-  padding: 7px 16px;
-  background: #f9f9f9;
-  display: flex;
-  align-items: center;
-}
-.input-quote-content {
-  flex: 1;
-  background: #fff;
-  padding: 2px 14px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-weight: 500;
-  font-size: 14px;
-  font-family: PingFangSC-Medium;
-  line-height: 17px;
-  color: #000;
-}
-.input-quote-content::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;
-}
-.tui-forward-main {
-  padding: 0 20px;
-  max-height: calc(100vh - 200px);
-  overflow-y: auto;
-}
-.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;
-}
-.tui-forward-search {
-  padding: 10px 15px;
-}
-.tui-forward-list {
-  padding: 13px 0;
-}
-.tui-forward-list-title {
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-}
-.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%;
-}
-.tui-forward-list-item .info {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  width: 100%;
-}
-.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%;
-}
-.tui-forward-footer {
-  background: rgba(249, 249, 249, 0.94);
-  padding: 13px 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.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 {
-  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;
-}
-.transmitter .icon-send {
-  transform: rotate(90deg);
-}
-
-[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);
-}
-[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);
-}
-
-.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;
-  position: relative;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.tui-kit-avatar.circle .avatar-image {
-  border-radius: 50%;
-}
-.tui-kit-avatar.square .avatar-image {
-  border-radius: 4px;
-}
-.tui-kit-avatar img {
-  width: 100%;
-  height: 100%;
-}
-.tui-kit-avatar:hover .tui-kit-avatar-edit {
-  display: flex;
-}
-.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;
-}
-.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;
-}
-.tui-kit-avatar-list-item {
-  padding: 10px;
-}
-.tui-kit-avatar-list-item img {
-  width: 40px;
-}
-.conversation-list-container {
-  overflow-x: hidden;
-  height: 100%;
-}
-
-.conversation-preview-container {
-  display: flex;
-  align-items: center;
-  border: none;
-  width: 100%;
-  height: 64px;
-  cursor: pointer;
-  line-height: 17px;
-  padding: 0 20px;
-}
-[data-chat-theme=light] .conversation-preview-container {
-  background-color: var(--chat-theme-light-bg-primary);
-}
-[data-chat-theme=dark] .conversation-preview-container {
-  background-color: var(--chat-theme-dark-bg-primary);
-}
-.conversation-preview-container .content {
-  flex: 1 1 auto;
-  text-align: left;
-  margin-left: 10px;
-  min-width: 0;
-}
-.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%;
-}
-[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;
-  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);
-}
-[data-chat-theme=dark] .conversation-preview-container .content .message {
-  color: var(--chat-theme-dark-text-secondary);
-}
-.conversation-preview-container .external {
-  text-align: right;
-  flex: 0 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-.conversation-preview-container .external .unread {
-  height: 19px;
-  padding: 1px 0;
-}
-.conversation-preview-container .external .time {
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  padding: 1px 0;
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
 }
-[data-chat-theme=light] .conversation-preview-container .external .time {
-  color: var(--chat-theme-light-text-secondary);
+
+.high-lighted {
+  animation: highLightedAnimation 1s ease-in-out forwards;
 }
-[data-chat-theme=dark] .conversation-preview-container .external .time {
-  color: var(--chat-theme-dark-text-secondary);
+
+@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;
+  }
 }
-.conversation-preview-container .external .more--hover {
+.progress-box {
+  width: 100%;
+  height: 5px;
   display: flex;
-  justify-content: flex-end;
-  flex: 1 1;
+  justify-content: flex-start;
 }
-.conversation-preview-container .external .more--hover .icon-more {
-  transform: scale(1.5);
+.progress-box .progress {
+  display: inline-block;
+  width: 0;
+  background: #147aff;
+  height: 5px;
+  border-radius: 2px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
 }
-.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;
+
+.website {
+  color: #147aff !important;
 }
-.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;
+
+[data-uikit-theme=light] .message-custom {
+  border: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
-  color: var(--chat-theme-light-status-danger);
+[data-uikit-theme=dark] .message-custom {
+  border: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
-  color: var(--chat-theme-dark-status-danger);
+
+[data-uikit-theme=light] .bubble {
+  background-color: var(--uikit-theme-light-bg-color-bubble-reciprocal);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[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);
+[data-uikit-theme=dark] .bubble {
+  background-color: var(--uikit-theme-dark-bg-color-bubble-reciprocal);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[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] .bubble-out {
+  border: none;
+  background-color: var(--uikit-theme-light-bg-color-bubble-own);
+  color: var(--uikit-theme-light-text-color-anti-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=light] .conversation-preview-container:hover {
-  background-color: var(--chat-theme-light-bg-active);
+[data-uikit-theme=dark] .bubble-out {
+  border: none;
+  background-color: var(--uikit-theme-dark-bg-color-bubble-own);
+  color: var(--uikit-theme-dark-text-color-anti-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .conversation-preview-container:hover {
-  background-color: var(--chat-theme-dark-bg-active);
+
+.meesage-bubble-reply-out .meesage-bubble-reply-main .message-text {
+  background: none;
 }
-[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--pin {
-  background-color: var(--chat-theme-light-bg-secondary);
+
+[data-uikit-theme=light] .message-tip {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--pin {
-  background-color: var(--chat-theme-dark-bg-secondary);
+[data-uikit-theme=dark] .message-tip {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--active {
-  background-color: var(--chat-theme-light-bg-active);
+
+.tip .bubble .edit {
+  color: #147aff;
+  padding: 3px;
 }
-[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--active {
-  background-color: var(--chat-theme-dark-bg-active);
+.plugin {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 8px;
+  gap: 8px;
 }
-[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--active .title {
-  color: var(--chat-theme-light-status-info);
+
+.plugin-popup {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
 }
-[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--active .title {
-  color: var(--chat-theme-dark-status-info);
+.plugin-popup-box {
+  position: absolute;
+  z-index: 2;
+  bottom: 100%;
 }
-.conversation-preview-container.conversation-preview-content--unread .unread {
-  width: 16px;
-  height: 13px;
+
+.plugin-popup-box {
   border-radius: 16px;
-  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;
+  overflow: hidden;
 }
-[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--unread .unread {
-  background-color: var(--chat-theme-light-status-danger);
+[data-uikit-theme=light] .plugin-popup-box {
+  background-color: var(--uikit-theme-light-dropdown-color-default);
+  box-shadow: 0 0 10px 0 var(--uikit-theme-light-shadow-color);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--unread .unread {
-  background-color: var(--chat-theme-dark-status-danger);
+[data-uikit-theme=dark] .plugin-popup-box {
+  background-color: var(--uikit-theme-dark-dropdown-color-default);
+  box-shadow: 0 0 10px 0 var(--uikit-theme-dark-shadow-color);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-chat-header {
   padding: 16px 20px;
@@ -1765,11 +1365,13 @@ ul li {
   justify-content: space-between;
   align-items: center;
 }
-[data-chat-theme=light] .tui-chat-header {
-  background-color: var(--chat-theme-light-bg-primary);
+[data-uikit-theme=light] .tui-chat-header {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .tui-chat-header {
-  background-color: var(--chat-theme-dark-bg-primary);
+[data-uikit-theme=dark] .tui-chat-header {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-chat-header-left {
   display: flex;
@@ -1779,20 +1381,28 @@ ul li {
   flex: 1;
   padding: 0 8px;
 }
+.tui-chat-header .call-btn-container {
+  display: flex;
+  margin-right: 10px;
+}
+.tui-chat-header .call-btn-container .call-btn {
+  margin-right: 16px;
+}
 .tui-chat-header-right .header-handle-more {
   padding: 10px 3px;
 }
 .tui-chat-header .title {
-  font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 700;
   font-size: 14px;
 }
-[data-chat-theme=light] .tui-chat-header .title {
-  color: var(--chat-theme-light-text-primary);
+[data-uikit-theme=light] .tui-chat-header .title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .tui-chat-header .title {
-  color: var(--chat-theme-dark-text-primary);
+[data-uikit-theme=dark] .tui-chat-header .title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-chat-header .system {
   height: 32px;
@@ -1805,9 +1415,21 @@ ul li {
   display: flex;
   flex-direction: column;
   position: relative;
-  background: #FFFFFF;
 }
-ul, li, div, p, label, span {
+[data-uikit-theme=light] .chat {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .chat {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+ul,
+li,
+div,
+p,
+label,
+span {
   margin: 0;
   padding: 0;
 }
@@ -1819,16 +1441,17 @@ ul li {
 .message-list {
   flex: 1;
   height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   position: relative;
   padding: 0 20px;
 }
-[data-chat-theme=light] .message-list {
-  background-color: var(--chat-theme-light-bg-primary);
+[data-uikit-theme=light] .message-list {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .message-list {
-  background-color: var(--chat-theme-dark-bg-primary);
+[data-uikit-theme=dark] .message-list {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .message-list.hide {
   opacity: 0;
@@ -1845,31 +1468,42 @@ ul li {
   font-weight: 500;
   line-height: 17px;
 }
-[data-chat-theme=light] .message-list .no-more {
-  color: var(--chat-theme-light-text-secondary);
+[data-uikit-theme=light] .message-list .no-more {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .message-list .no-more {
-  color: var(--chat-theme-dark-text-secondary);
+[data-uikit-theme=dark] .message-list .no-more {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 .message-list-time {
-  font-family: PingFangSC-Medium;
   font-size: 12px;
   font-weight: 400;
   line-height: 14px;
   padding: 10px;
   text-align: center;
 }
-[data-chat-theme=light] .message-list-time {
-  color: var(--chat-theme-light-text-secondary);
+[data-uikit-theme=light] .message-list-time {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-chat-theme=dark] .message-list-time {
-  color: var(--chat-theme-dark-text-secondary);
+[data-uikit-theme=dark] .message-list-time {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+[data-uikit-theme=light] .tui-profile {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-profile {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-profile-header {
   box-sizing: border-box;
   width: 100%;
@@ -1900,7 +1534,6 @@ ul li {
 .tui-profile-nick {
   font-weight: 700;
   font-size: 24px;
-  font-family: PingFangSC-Medium;
   line-height: 29px;
   text-align: center;
 }
@@ -1908,15 +1541,18 @@ ul li {
   padding-left: 25px;
 }
 .tui-profile-ID {
-  padding: 6px 0;
-  margin: 0;
+  margin: 6px 0;
   display: flex;
   align-items: center;
-  font-weight: 400;
   font-size: 12px;
-  font-family: PingFangSC-Medium;
-  line-height: 14px;
-  color: #666;
+}
+[data-uikit-theme=light] .tui-profile-ID {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-profile-ID {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-profile-ID h5 {
   margin: 0;
@@ -1934,17 +1570,19 @@ ul li {
   cursor: pointer;
 }
 .tui-profile-list-item h4 {
-  padding-bottom: 3px;
-  font-weight: 400;
   font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 22px;
   margin: 10px 0;
-  color: rgba(0, 0, 0, 0.6);
 }
 .tui-profile-div-with-edit {
-  padding: 4px 0;
-  border-bottom: 1px solid #eee;
+  height: auto !important;
+}
+[data-uikit-theme=light] .tui-profile-div-with-edit {
+  border-bottom: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-profile-div-with-edit {
+  border-bottom: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-profile-edit {
   border-bottom: none !important;
@@ -1964,11 +1602,13 @@ ul li {
   border: none !important;
 }
 
-.tui-profile {
-  background: #ffffff;
+[data-uikit-theme=light] .tui-profile {
+  background: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-.tui-profile-header {
-  background: #f9fafb;
+[data-uikit-theme=dark] .tui-profile {
+  background: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .conversation-search-result.no-result {
   padding: 0 20px;
@@ -1995,20 +1635,40 @@ ul li {
   display: flex;
   align-items: center;
   border-radius: 10px;
-  background: rgba(249, 249, 249, 0.94);
   padding: 0 8px;
   height: 36px;
   box-sizing: border-box;
 }
-.tui-kit-input-box.tui-kit-input-box--focus {
-  outline: 1px solid #147aff;
+[data-uikit-theme=light] .tui-kit-input-box {
+  background-color: var(--uikit-theme-light-bg-color-input);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-input-box {
+  background-color: var(--uikit-theme-dark-bg-color-input);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .tui-kit-input-box.tui-kit-input-box--focus {
+  outline: 1px solid var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-input-box.tui-kit-input-box--focus {
+  outline: 1px solid var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-kit-input-box.tui-kit-input-border--bottom {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: #fff;
   outline: none;
   border-radius: 0;
 }
+[data-uikit-theme=light] .tui-kit-input-box.tui-kit-input-border--bottom {
+  border-bottom: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-input-box.tui-kit-input-border--bottom {
+  border-bottom: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-kit-input-box .tui-kit-input {
   margin-left: 6px;
   margin-right: auto;
@@ -2022,22 +1682,47 @@ ul li {
   box-sizing: border-box;
   font-size: 14px;
 }
+[data-uikit-theme=light] .tui-kit-input-box .tui-kit-input {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-input-box .tui-kit-input {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-kit-input-box .tui-kit-input:focus {
   border: none;
   outline: none;
 }
 .tui-kit-input-box .tui-kit-input::placeholder {
-  font-weight: 400;
-  color: rgba(67, 60, 63, 0.6);
   padding: 2px 0;
 }
+[data-uikit-theme=light] .tui-kit-input-box .tui-kit-input::placeholder {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-input-box .tui-kit-input::placeholder {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-manage {
   display: flex;
   flex-direction: column;
   width: 22%;
   max-width: 300px;
   min-width: 200px;
-  border-left: 1px solid #f9fafb;
+}
+[data-uikit-theme=light] .tui-manage {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  border-left: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-manage {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  border-left: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-manage .red {
   color: #ff584c !important;
@@ -2051,8 +1736,6 @@ ul li {
   margin-right: 10px;
   font-weight: 700;
   font-size: 14px;
-  font-family: PingFangSC-Medium;
-  line-height: 17px;
 }
 .tui-manage .tui-manage-container .tui-manage-info {
   display: flex;
@@ -2067,26 +1750,27 @@ ul li {
   text-align: center;
   font-weight: 700;
   font-size: 24px;
-  font-family: PingFangSC-Medium;
-  line-height: 29px;
   margin-bottom: 10px;
 }
 .tui-manage .tui-manage-container .tui-manage-info .info-id {
-  font-weight: 400;
   font-size: 12px;
-  font-family: PingFangSC-Medium;
-  line-height: 14px;
   color: #666;
   margin-bottom: 30px;
   text-align: center;
 }
 .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
   display: flex;
-  background: rgba(249, 249, 249, 0.94);
   align-items: center;
   justify-content: space-between;
   padding: 10px;
-  box-sizing: border-box;
+}
+[data-uikit-theme=light] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
+  background: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
+  background: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box:nth-child(2) {
   margin-top: 10px;
@@ -2094,9 +1778,14 @@ ul li {
 }
 .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box .manage-handle-title {
   font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 22px;
-  color: rgba(0, 0, 0, 0.6);
+}
+[data-uikit-theme=light] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box .manage-handle-title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box .manage-handle-title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .tui-manage.tui-h5-manage {
@@ -2110,7 +1799,14 @@ ul li {
   max-width: 100%;
   min-width: 100%;
   z-index: 1;
-  background: #fff;
+}
+[data-uikit-theme=light] .tui-manage.tui-h5-manage {
+  background: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-manage.tui-h5-manage {
+  background: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .popup {
   opacity: 0;
@@ -2144,18 +1840,37 @@ ul li {
   opacity: 0;
 }
 
-.info {
-  background: #FFFFFF;
+[data-uikit-theme=light] .info {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .info {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
-.warn {
-  color: #FFFFFF;
-  background: #faad14;
+[data-uikit-theme=light] .warn {
+  background-color: var(--uikit-theme-light-text-color-warning);
+  color: #fff;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .warn {
+  background-color: var(--uikit-theme-dark-text-color-warning);
+  color: #fff;
+  transition: background-color 0.3s ease-in-out;
 }
 
-.error {
-  color: #FFFFFF;
-  background: #ff4d4f;
+[data-uikit-theme=light] .error {
+  background-color: var(--uikit-theme-light-text-color-error);
+  color: #fff;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .error {
+  background-color: var(--uikit-theme-dark-text-color-error);
+  color: #fff;
+  transition: background-color 0.3s ease-in-out;
 }
 .div-with-edit {
   flex: 1;
@@ -2177,12 +1892,12 @@ ul li {
   position: relative;
   word-break: break-all;
 }
-.div-with-edit .show:hover .icon-edit {
-  display: flex;
-}
 .div-with-edit .show .icon-edit {
   display: none;
 }
+.div-with-edit .show:hover .icon-edit {
+  display: flex;
+}
 .div-with-edit .icon {
   margin-left: 10px;
   width: 25px;
@@ -2193,9 +1908,16 @@ ul li {
   align-items: center;
   justify-content: space-between;
   position: relative;
-  border-bottom: 1px solid #EEEEEE;
   padding: 0 10px;
 }
+[data-uikit-theme=light] .div-with-edit .edit {
+  border-bottom: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .div-with-edit .edit {
+  border-bottom: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .div-with-edit .edit input {
   flex: 1;
   font-size: inherit;
@@ -2207,20 +1929,32 @@ ul li {
 }
 .div-with-edit .edit .select {
   position: absolute;
-  box-sizing: border-box;
   min-width: 100%;
   z-index: 2;
-  background: #FFFFFF;
-  box-shadow: 0 11px 20px 0 rgb(0, 0, 0);
   top: 100%;
   border-radius: 5px;
   padding: 10px 0;
 }
+[data-uikit-theme=light] .div-with-edit .edit .select {
+  background: var(--uikit-theme-light-dropdown-color-default);
+  box-shadow: 0 11px 20px 0 var(--uikit-theme-light-shadow-color);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .div-with-edit .edit .select {
+  background: var(--uikit-theme-dark-dropdown-color-default);
+  box-shadow: 0 11px 20px 0 var(--uikit-theme-dark-shadow-color);
+  transition: background-color 0.3s ease-in-out;
+}
 .div-with-edit .edit .select-list-item {
   padding: 7px 10px;
 }
-.div-with-edit .edit .select-list-item:hover {
-  background: #f2f7ff;
+[data-uikit-theme=light] .div-with-edit .edit .select-list-item:hover {
+  background: var(--uikit-theme-light-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .div-with-edit .edit .select-list-item:hover {
+  background: var(--uikit-theme-dark-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-kit-icon {
   display: flex;
@@ -2331,10 +2065,16 @@ ul li {
   display: flex;
   flex-direction: column;
   position: relative;
-  border-right: 1px solid #F9FAFB;
   text-align: initial;
-  overflow-y: scroll;
-  overflow-x: hidden;
+  overflow: hidden scroll;
+}
+[data-uikit-theme=light] .tui-contacts-list {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts-list {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-contacts-list .tui-contacts-title {
   display: flex;
@@ -2343,6 +2083,7 @@ ul li {
 .tui-contacts-list .tui-contacts-list-title {
   display: flex;
   padding: 10px 20px;
+  cursor: pointer;
 }
 .tui-contacts-list .tui-contacts-list-icon {
   display: flex;
@@ -2350,15 +2091,24 @@ ul li {
   justify-content: center;
   margin-right: 20px;
 }
+.tui-contacts-list .tui-contacts-list-icon .contacts-list-icon {
+  font-size: 12px;
+}
+[data-uikit-theme=light] .tui-contacts-list .tui-contacts-list-icon .contacts-list-icon {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts-list .tui-contacts-list-icon .contacts-list-icon {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contacts-list .tui-contacts-list-item {
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: 10px 20px;
   text-align: center;
-  font-family: PingFangSC-Medium;
   font-size: 14px;
-  line-height: 20px;
 }
 .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-card {
   display: flex;
@@ -2371,6 +2121,11 @@ ul li {
 .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-container {
   margin-left: 10px;
 }
+.tui-contacts-list .tui-contacts-list-item .text-ellipsis, .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-name, .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-text {
   color: #999;
   font-size: 12px;
@@ -2381,22 +2136,11 @@ ul li {
   font-size: 12px;
   text-align: left;
 }
-.tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-name {
-  color: #000;
-  font-weight: 400;
-  text-align: left;
-}
-.tui-contacts-list .text-ellipsis, .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-text, .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .tui-contacts-list .application-btn {
   width: 30px;
   height: 14px;
   padding: 5px;
   border-radius: 15px;
-  border: none;
   font-size: 10px;
   text-align: center;
   line-height: 14px;
@@ -2404,8 +2148,8 @@ ul li {
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid #006EFF;
-  background: #006EFF;
+  border: 1px solid #006eff;
+  background: #006eff;
   color: #fff;
 }
 
@@ -2423,10 +2167,17 @@ ul li {
   height: 100%;
   display: flex;
   padding: 60px;
-  box-sizing: border-box;
   flex-direction: column;
   overflow: hidden;
 }
+[data-uikit-theme=light] .tui-contact-info {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contact-info {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contact-info .tui-contact-info-header {
   padding-bottom: 15px;
   border-bottom: 1px solid #ddd;
@@ -2446,30 +2197,50 @@ ul li {
   font-size: 24px;
   padding: 15px;
 }
+[data-uikit-theme=light] .tui-contact-info .tui-contact-info-header .header-container .header-container-name {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contact-info .tui-contact-info-header .header-container .header-container-name {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contact-info .tui-contact-info-header .header-container .header-container-text {
+  margin-top: 20px;
   font-size: 16px;
-  line-height: 50px;
-  font-weight: 400;
-  color: #999999;
   word-break: break-all;
 }
+[data-uikit-theme=light] .tui-contact-info .tui-contact-info-header .header-container .header-container-text {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contact-info .tui-contact-info-header .header-container .header-container-text {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contact-info .tui-contact-info-content {
   padding: 15px 0;
   overflow: hidden;
 }
+[data-uikit-theme=light] .tui-contact-info .tui-contact-info-content {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contact-info .tui-contact-info-content {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contact-info .tui-contact-info-content .content-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 6px 0;
   font-size: 16px;
-  font-weight: 400;
   min-height: 56px;
 }
 .tui-contact-info .tui-contact-info-content .content-item-wording {
   padding: 6px 0;
   font-size: 16px;
-  font-weight: 400;
   min-height: 56px;
 }
 .tui-contact-info .tui-contact-info-content .content-item-wording-text {
@@ -2484,14 +2255,12 @@ ul li {
   width: 95%;
 }
 .tui-contact-info .tui-contact-info-content .content-item-label {
-  color: #999;
   margin-right: 5px;
 }
 .tui-contact-info .tui-contact-info-content .content-item-text {
   flex: 1;
   display: flex;
   flex-direction: row;
-  color: #333;
   overflow: hidden;
 }
 .tui-contact-info .tui-contact-info-content .content-btn-container {
@@ -2501,30 +2270,36 @@ ul li {
 }
 .tui-contact-info .tui-contact-info-content .content-btn-container .content-item-btn {
   margin: 15px;
-  width: 122px;
-  height: 26px;
   padding: 8px 20px;
   border-radius: 25px;
   border: none;
   font-size: 14px;
   text-align: center;
-  line-height: 26px;
-  font-weight: 400;
   letter-spacing: 0;
   min-width: 100px;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
 }
-.tui-contact-info .tui-contact-info-content .content-btn-container .delete-btn {
-  border: 1px solid #e54545;
-  background: transparent;
-  color: #e54545;
+[data-uikit-theme=light] .tui-contact-info .tui-contact-info-content .content-btn-container .delete-btn {
+  color: var(--uikit-theme-light-text-color-error);
+  border: 1px solid;
+  transition: background-color 0.3s ease-in-out;
 }
-.tui-contact-info .tui-contact-info-content .content-btn-container .confirm-btn {
-  border: 1px solid #006eff;
-  background: #006eff;
+[data-uikit-theme=dark] .tui-contact-info .tui-contact-info-content .content-btn-container .delete-btn {
+  color: var(--uikit-theme-dark-text-color-error);
+  border: 1px solid;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .tui-contact-info .tui-contact-info-content .content-btn-container .confirm-btn {
+  color: #fff;
+  background-color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contact-info .tui-contact-info-content .content-btn-container .confirm-btn {
   color: #fff;
+  background-color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .tui-contact-info-h5 {
@@ -2540,6 +2315,14 @@ ul li {
   text-align: initial;
   overflow: hidden;
 }
+[data-uikit-theme=light] .tui-contacts {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contacts .tui-contacts-header {
   position: relative;
   display: flex;
@@ -2550,8 +2333,7 @@ ul li {
   width: 100%;
 }
 .tui-contacts .tui-contacts-add {
-  display: flex;
-  color: #147AFF;
+  color: #147aff;
   font-size: 20px;
   align-items: center;
   cursor: pointer;
@@ -2565,22 +2347,33 @@ ul li {
 }
 .tui-contacts .tui-contacts-add-header {
   align-items: center;
-  background-color: #f9fafb;
   display: flex;
   flex-direction: row;
   padding: 16px 20px;
   text-align: center;
   margin-bottom: 10px;
 }
+[data-uikit-theme=light] .tui-contacts .tui-contacts-add-header {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts .tui-contacts-add-header {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contacts .tui-contacts-add-header .tui-contacts-add-header-title {
-  color: #000;
-  font-family: PingFangSC-Medium;
   font-size: 20px;
   font-weight: 600;
-  letter-spacing: -0.41px;
-  line-height: 32px;
   margin-left: 10px;
 }
+[data-uikit-theme=light] .tui-contacts .tui-contacts-add-header .tui-contacts-add-header-title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts .tui-contacts-add-header .tui-contacts-add-header-title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contacts .no-result {
   padding: 0 20px;
   display: flex;
@@ -2591,12 +2384,17 @@ ul li {
   margin: 100px auto 50px;
 }
 .tui-contacts .no-result-message {
-  color: #999999;
-  font-weight: 400;
   font-size: 16px;
-  font-family: PingFangSC-Medium;
   line-height: 22px;
 }
+[data-uikit-theme=light] .tui-contacts .no-result-message {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts .no-result-message {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
 
 .tui-contacts-h5 {
   min-width: 100%;