@tencentcloud/chat-uikit-react 2.2.4 → 2.2.6

package/dist/esm/index.d.css

@@ -1,1314 +1,1230 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-a, a:link, a:visited, a:hover, a:active {
-  text-decoration: none;
-  color: inherit;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-
-body {
-  line-height: 1;
-}
-
-ol, ul {
-  list-style: none;
-}
-
-blockquote, q {
-  quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: "";
-  content: none;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-html, body {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-* {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.text-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.tui-conversation {
+  flex: 1;
+  box-sizing: border-box;
   overflow: hidden;
-}
-
-.tui-kit {
-  position: relative;
+  min-width: 0;
   display: flex;
-  width: 100%;
-  height: 100%;
-  background-color: #FFFFFF;
+  flex-direction: column;
+  position: relative;
   text-align: initial;
 }
-
-.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(--chat-theme-light-bg-primary);
 }
-.sample-chat-profile {
-  position: absolute;
-  top: 0;
-  z-index: 1;
+[data-uikit-theme=dark] .tui-conversation {
+  background-color: var(--chat-theme-dark-bg-primary);
 }
-.sample-chat-left-container {
-  max-width: 360px;
-  min-width: 360px;
+.tui-conversation .tui-conversation-header {
   display: flex;
-  flex-direction: column;
+  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;
-  width: 100%;
-  height: 100%;
 }
-.sample-chat-h5-container .sample-profile {
+.tui-kit-avatar-edit {
   position: absolute;
   top: 0;
-  z-index: 1;
+  left: 0;
+  background: rgba(0, 0, 0, 0.33);
   width: 100%;
-  max-width: 100%;
-  min-width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  display: none;
+  justify-content: center;
+  align-items: center;
 }
-.sample-chat-h5-container .tui-kit-input-box.tui-kit-input-box--focus {
-  outline: none;
+.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;
 }
-.sample-chat-h5 .tui-message-input .tui-kit-input-box--focus {
-  outline: none;
+.tui-kit-avatar-list-item {
+  padding: 10px;
 }
-.tui-conversation {
-  flex: 1;
-  min-width: 360px;
-  max-width: 400px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  border-right: 1px solid #F9FAFB;
-  text-align: initial;
+.tui-kit-avatar-list-item img {
+  width: 40px;
 }
-.tui-conversation .tui-conversation-header {
-  display: flex;
-  padding: 10px 20px;
+.conversation-list-container {
+  overflow-x: hidden;
+  height: 100%;
 }
-.tui-conversation .tui-conversation-header .tui-conversation-create-icon {
+
+.conversation-preview-container {
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin-left: 10px;
-}
-.tui-conversation .no-result {
+  border: none;
+  width: 100%;
+  height: 64px;
+  cursor: pointer;
+  line-height: 17px;
   padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
 }
-.tui-conversation .no-result-icon {
-  margin: 100px auto 50px;
+[data-uikit-theme=light] .conversation-preview-container {
+  background-color: var(--chat-theme-light-bg-primary);
 }
-.tui-conversation .no-result-message {
-  color: #999999;
-  font-weight: 400;
-  font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 22px;
+[data-uikit-theme=dark] .conversation-preview-container {
+  background-color: var(--chat-theme-dark-bg-primary);
 }
-
-.tui-conversation-h5 {
-  min-width: 100%;
-  width: 100%;
-  max-width: 100%;
+.conversation-preview-container .content {
+  flex: 1 1 auto;
+  text-align: left;
+  margin-left: 10px;
+  min-width: 0;
 }
-.message-default {
-  width: 100%;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  font-family: SF Pro Text;
+.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-uikit-theme=light] .conversation-preview-container .content .title {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-uikit-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: 500;
-  line-height: 17px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 1px 0;
 }
-.message-default .avatar {
-  width: 45px;
+[data-uikit-theme=light] .conversation-preview-container .content .message {
+  color: var(--chat-theme-light-text-secondary);
 }
-.message-default .avatar img {
-  width: 45px;
+[data-uikit-theme=dark] .conversation-preview-container .content .message {
+  color: var(--chat-theme-dark-text-secondary);
 }
-.message-default .content {
+.conversation-preview-container .external {
+  text-align: right;
+  flex: 0 1 auto;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
 }
-.message-default .content .name {
-  display: inline-block;
-  padding-bottom: 3px;
-  max-width: 60%;
+.conversation-preview-container .external .unread {
+  height: 19px;
+  padding: 1px 0;
 }
-
-.in {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  justify-self: flex-start;
-  gap: 10px;
+.conversation-preview-container .external .time {
+  font-family: PingFangSC-Medium;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 1px 0;
 }
-.in .content {
-  align-items: flex-start;
-  flex: 1;
+[data-uikit-theme=light] .conversation-preview-container .external .time {
+  color: var(--chat-theme-light-text-secondary);
 }
-
-.out {
-  flex: 1;
+[data-uikit-theme=dark] .conversation-preview-container .external .time {
+  color: var(--chat-theme-dark-text-secondary);
+}
+.conversation-preview-container .external .more--hover {
   display: flex;
-  gap: 10px;
-  flex-direction: row-reverse;
-  justify-self: flex-end;
+  justify-content: flex-end;
+  flex: 1 1;
 }
-.out .content {
-  align-items: flex-end;
-  flex: 1;
+.conversation-preview-container .external .more--hover .icon-more {
+  transform: scale(1.5);
 }
-
-.tip {
-  justify-self: center !important;
-  width: auto;
+.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;
 }
-
-.bubble {
-  padding: 8px 16px;
+.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;
 }
-.bubble-in {
-  border-radius: 0px 16px 16px 16px;
+[data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
+  color: var(--chat-theme-light-status-danger);
 }
-.bubble-in.group {
-  border-radius: 0px 16px 16px 16px;
+[data-uikit-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
+  color: var(--chat-theme-dark-status-danger);
 }
-.bubble-out {
-  border-radius: 16px 16px 0 16px;
+[data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
+  background-color: var(--chat-theme-light-bg-active);
 }
-
-.message-status {
+[data-uikit-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
+  background-color: var(--chat-theme-dark-bg-active);
+}
+[data-uikit-theme=light] .conversation-preview-container:hover {
+  background-color: var(--chat-theme-light-bg-active);
+}
+[data-uikit-theme=dark] .conversation-preview-container:hover {
+  background-color: var(--chat-theme-dark-bg-active);
+}
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--pin {
+  background-color: var(--chat-theme-light-bg-secondary);
+}
+[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--pin {
+  background-color: var(--chat-theme-dark-bg-secondary);
+}
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--active {
+  background-color: var(--chat-theme-light-bg-active);
+}
+[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--active {
+  background-color: var(--chat-theme-dark-bg-active);
+}
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--active .title {
+  color: var(--chat-theme-light-status-info);
+}
+[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--active .title {
+  color: var(--chat-theme-dark-status-info);
+}
+.conversation-preview-container.conversation-preview-content--unread .unread {
+  width: 16px;
+  height: 13px;
+  border-radius: 16px;
   display: flex;
-  align-items: flex-end;
-  align-self: flex-end;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 5px 1px;
+  font-size: 11px;
+  font-weight: 700;
+  margin: 2px 0 2px auto;
+  color: #fff;
 }
-.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;
-  color: #7A7A7A;
+[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--unread .unread {
+  background-color: var(--chat-theme-light-status-danger);
 }
-
-.message-image, .message-video {
-  position: relative;
+[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--unread .unread {
+  background-color: var(--chat-theme-dark-status-danger);
 }
-.message-image .message-status, .message-video .message-status {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
+.tui-message-input {
+  display: flex;
+  flex-direction: column;
 }
-.message-image .message-status .time, .message-video .message-status .time {
-  color: #FFFFFF;
+.tui-message-input-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 14px 12px;
+  gap: 12px;
 }
-
-.message-text {
+.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;
 }
-.message-text-content {
-  display: inline;
-  word-break: break-word;
-  font-family: PingFangSC-Regular;
+.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: 24px;
-}
-.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;
+  line-height: 17px;
+  padding: 1px 2px;
 }
-
-.message-text,
-.message-tip {
-  font-family: PingFangSC-Regular;
+.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;
 }
-.message-text .text-img,
-.message-tip .text-img {
-  width: 20px;
-  height: 20px;
-  vertical-align: middle;
+[data-uikit-theme=light] .tui-message-input-main .input-box textarea {
+  color: var(--chat-theme-light-text-primary);
 }
-
-.message-image {
-  background: #FFFFFF;
+[data-uikit-theme=dark] .tui-message-input-main .input-box textarea {
+  color: var(--chat-theme-dark-text-primary);
 }
-.message-image img {
-  max-width: 300px;
+.tui-message-input-main .input-box textarea:focus, .tui-message-input-main .input-box textarea:active {
+  border: none;
+  outline: none;
 }
-.message-image .img-h5 {
-  max-width: 200px;
-  max-height: 200px;
+.tui-message-input-main .disabled {
+  display: none;
 }
-.message-image .big-image {
-  max-width: 90%;
-  max-height: 90%;
+.tui-message-input-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
 }
 
-.message-video {
-  max-width: 300px;
+ul li {
+  list-style: none;
 }
-.message-video .snap-video {
+
+.input-plugin-popup {
   position: relative;
-  height: 100%;
-  border-radius: 10px;
 }
-.message-video .snap-video::before {
+.input-plugin-popup-box {
   position: absolute;
-  z-index: 1;
-  content: "";
-  width: 0px;
-  height: 0px;
-  border: 15px solid transparent;
-  border-left: 20px solid #ffffff;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  margin: auto;
-}
-.message-video video {
-  width: 100%;
-  height: 100%;
-  border-radius: 10px;
-}
-.message-video .play-video {
-  max-width: 95%;
-  max-height: 65%;
+  z-index: 2;
+  bottom: 30px;
 }
 
-.message-video.message-video-h5 {
-  max-width: 200px;
-  max-height: 200px;
+.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;
 }
 
-.message-file {
+.emoji-picker .face-list {
+  height: 120px;
+  width: 242px;
+  padding: 10px 5px;
   display: flex;
-  flex-direction: column;
-  border: 1px solid #ddd;
+  flex-wrap: wrap;
+  overflow-y: auto;
 }
-.message-file-main {
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  background: #FFFFFF;
-  border-radius: 4px;
+.emoji-picker .face-list-item {
+  padding: 5px;
+  cursor: pointer;
+  user-select: none;
 }
-.message-file-main .icon {
-  margin-right: 7px;
+.emoji-picker .face-list-item img {
+  width: 20px;
 }
-.message-file-footer {
+.emoji-picker .face-list-item .face-img {
+  width: 38px;
+}
+.emoji-picker .face-tab {
   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;
+  align-items: center;
+  min-width: 265px;
 }
-.message-merger h3 {
-  padding-bottom: 4px;
-  border-bottom: 1px solid #a1a1a1;
+.emoji-picker .face-tab-item {
+  cursor: pointer;
+  width: 24px;
+  padding: 10px;
 }
-.message-merger-list {
-  opacity: 0.6;
+.emoji-picker .face-tab-item img {
+  width: 100%;
 }
-.message-merger-item {
-  padding-top: 4px;
+.emoji-picker .emoji-plugin-right {
+  right: 0;
 }
 
-.meesage-bubble-reply {
-  background: #ECEBEB;
-  padding: 8px 16px;
-}
-.meesage-bubble-reply-in {
-  border-radius: 16px 16px 16px 0;
-}
-.meesage-bubble-reply-out {
-  border-radius: 16px 16px 0px 16px;
+.upload-picker {
+  position: relative;
+  padding: 10px 16px;
+  min-width: 180px;
 }
-.meesage-bubble-reply .message-text {
-  border-radius: none;
-  border: none;
+.upload-picker:hover {
+  color: #147aff;
 }
-.meesage-bubble-reply .bubble {
-  padding: 0;
+.upload-picker input {
+  position: absolute;
+  cursor: pointer;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
 }
-.meesage-bubble-reply .bubble-in {
-  border-radius: 0;
+
+.input-quote {
+  padding: 7px 16px;
+  background: #f9f9f9;
+  display: flex;
+  align-items: center;
 }
-.meesage-bubble-reply-main {
+.input-quote-content {
+  flex: 1;
+  background: #fff;
+  padding: 2px 14px;
   position: relative;
-  padding: 10px 14px;
-  margin-bottom: 10px;
-  background: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  font-weight: 500;
+  font-size: 14px;
+  font-family: PingFangSC-Medium;
+  line-height: 17px;
+  color: #000;
 }
-.meesage-bubble-reply-main::before {
+.input-quote-content::before {
   content: "";
   position: absolute;
   width: 6px;
   height: 100%;
-  background: #D9D9D9;
+  background: #999;
   top: 0;
   left: 0;
 }
-.meesage-bubble-reply-main .title {
+.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: 500;
+  font-weight: 700;
   font-size: 14px;
   line-height: 17px;
-  padding-bottom: 10px;
 }
-.meesage-bubble-reply-main .message-context {
-  opacity: 0.6;
+.tui-forward-main {
+  padding: 0 20px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
 }
-
-.meesage-bubble {
+.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;
-  align-items: flex-end;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
-.meesage-bubble-status {
-  margin: 3px;
+.tui-forward-list-item .info {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 100%;
 }
-.meesage-bubble-context {
+.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;
-  gap: 10px;
 }
-.meesage-bubble-context .message-context {
+.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;
 }
 
-.icon-fail {
-  width: 14px;
-  height: 14px;
-  border-radius: 14px;
-  position: relative;
-  background: #FA5151;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
+.transmitter {
+  padding: 0 10px;
 }
-.icon-fail::before {
-  position: absolute;
-  content: "!";
-  color: #FFFFFF;
-  font-size: 12px;
-  font-family: PingFangSC-Medium;
+.transmitter .icon-send {
+  transform: rotate(90deg);
 }
 
-.message-face {
-  display: flex;
-  flex-direction: column;
+[data-uikit-theme=light] .tui-message-input {
+  background-color: var(--chat-theme-light-bg-primary);
 }
-.message-face .img {
-  max-width: 88px;
+[data-uikit-theme=dark] .tui-message-input {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
+[data-uikit-theme=light] .tui-message-input .tui-kit-input-box--focus {
+  outline: 1px solid var(--chat-theme-light-status-info);
+}
+[data-uikit-theme=dark] .tui-message-input .tui-kit-input-box--focus {
+  outline: 1px solid var(--chat-theme-dark-status-info);
+}
+[data-uikit-theme=light] .tui-message-input .input-box {
+  background-color: var(--chat-theme-light-bg-primary);
+  border: 1px solid var(--chat-theme-light-border-5);
+}
+[data-uikit-theme=dark] .tui-message-input .input-box {
+  background-color: var(--chat-theme-dark-bg-primary);
+  border: 1px solid var(--chat-theme-dark-border-5);
 }
 
-.loading {
-  display: inline-block;
-  position: relative;
+.input-plugin-popup-box {
+  border-radius: 16px;
 }
-.loading .img, .loading video {
-  min-width: 60px;
-  min-height: 60px;
-  max-width: 300px;
-  border-radius: 10px;
+[data-uikit-theme=light] .input-plugin-popup-box {
+  background-color: var(--chat-theme-light-bg-primary);
+  box-shadow: var(--chat-theme-light-box-shadow-1);
 }
-.loading .img-h5, .loading .video-h5 {
-  min-width: 60px;
-  min-height: 60px;
-  max-width: 200px;
-  max-height: 200px;
-  border-radius: 10px;
+[data-uikit-theme=dark] .input-plugin-popup-box {
+  background-color: var(--chat-theme-dark-bg-3);
+  box-shadow: var(--chat-theme-dark-box-shadow-1);
 }
-.loading::before {
-  position: absolute;
-  content: "";
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 10px;
+.message-default {
   width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-.loading::after {
-  position: absolute;
-  content: "";
-  border: 5px solid #f3f3f3;
-  border-top: 5px solid #555;
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
-  display: inline-block;
-  animation: spin 2s linear infinite;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-}
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.message-plugin {
-  width: 32px;
-  margin: 0 5px;
-}
-.message-plugin .icon-more {
-  transform: scale(1.5);
-}
-.message-plugin .plugin-popup-box {
-  bottom: auto;
-  top: 100%;
-  overflow: hidden;
-}
-.message-plugin-box {
-  padding: 6px 0;
-}
-.message-plugin-item {
-  min-width: 144px;
-  padding: 6px 13px;
+  flex: 1;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  font-weight: 500;
-  font-size: 12.8px;
+  cursor: pointer;
+  font-family: SF Pro Text;
+  font-size: 14px;
   font-family: PingFangSC-Medium;
-  line-height: 15px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px;
 }
-.message-plugin-item:hover {
-  background: rgba(0, 110, 255, 0.1);
-  color: #147aff;
+.message-default .avatar {
+  width: 45px;
 }
-.message-plugin-item .del {
-  color: #FF584C;
+.message-default .avatar img {
+  width: 45px;
 }
-
-.message-custom {
+.message-default .content {
   display: flex;
-  word-break: break-all;
+  flex-direction: column;
+  align-items: flex-start;
 }
-.message-custom a {
-  color: #679ce1;
-  text-decoration: none;
-  font-family: PingFangSC-Regular;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 17px;
+.message-default .content .name {
+  display: inline-block;
+  padding-bottom: 3px;
+  max-width: 60%;
 }
-.message-custom p {
-  font-family: PingFangSC-Regular;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 17px;
+[data-uikit-theme=light] .message-default .content .name {
+  color: var(--chat-theme-light-text-primary);
 }
-
-.message-revoke {
-  color: #999999;
+[data-uikit-theme=dark] .message-default .content .name {
+  color: var(--chat-theme-dark-text-primary);
 }
 
-.message-audio {
+.in {
+  flex: 1;
   display: flex;
-  align-items: center;
-}
-.message-audio .out {
-  transform: rotate(180deg);
+  flex-direction: row;
+  justify-self: flex-start;
+  gap: 10px;
 }
-.message-audio-none {
-  display: none;
+.in .content {
+  align-items: flex-start;
+  flex: 1;
 }
-.message-audio-content {
+
+.out {
+  flex: 1;
   display: flex;
-  align-items: center;
   gap: 10px;
-}
-.message-audio-out {
   flex-direction: row-reverse;
+  justify-self: flex-end;
 }
-.message-audio .playing {
-  animation: playingAnimation 1s ease-in-out infinite;
-}
-@keyframes playingAnimation {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.3;
-  }
-  100% {
-    opacity: 1;
-  }
+.out .content {
+  align-items: flex-end;
+  flex: 1;
 }
 
-.high-lighted {
-  animation: highLightedAnimation 1s ease-in-out forwards;
+.tip {
+  justify-self: center !important;
+  width: auto;
 }
 
-@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);
+.bubble {
+  padding: 8px 16px;
 }
-
-.website {
-  color: #147aff !important;
+.bubble-in {
+  border-radius: 0px 16px 16px 16px;
 }
-
-.message-text, .message-custom {
-  border: 1px solid #DDDDDD;
+.bubble-in.group {
+  border-radius: 0px 16px 16px 16px;
 }
-
 .bubble-out {
-  background: #F2F7FF;
-  border: 1px solid #F2F7FF;
+  border-radius: 16px 16px 0 16px;
 }
 
-.meesage-bubble-reply-out {
-  background: #F2F7FF;
-}
-.meesage-bubble-reply-out .meesage-bubble-reply-main .message-text {
-  background: none;
+.message-status {
+  display: flex;
+  align-items: flex-end;
+  align-self: flex-end;
 }
-
-.message-tip {
-  color: #999999;
+.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;
 }
-
-.tip .bubble .edit {
-  color: #147aff;
-  padding: 3px;
+[data-uikit-theme=light] .message-status .time {
+  color: var(--chat-theme-light-text-secondary);
 }
-.plugin {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: 0 8px;
-  gap: 8px;
+[data-uikit-theme=dark] .message-status .time {
+  color: var(--chat-theme-dark-text-secondary);
 }
 
-.plugin-popup {
-  height: 100%;
-  display: flex;
-  align-items: center;
+.message-image, .message-video {
   position: relative;
 }
-.plugin-popup-box {
+.message-image .message-status, .message-video .message-status {
   position: absolute;
-  z-index: 2;
-  bottom: 100%;
-}
-
-.plugin-popup-box {
-  background: #FFFFFF;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-  border-radius: 16px;
+  bottom: 10px;
+  right: 10px;
 }
-.tui-message-input {
-  display: flex;
-  flex-direction: column;
+[data-uikit-theme=light] .message-image .message-status .time, [data-uikit-theme=light] .message-video .message-status .time {
+  color: var(--chat-theme-light-text-primary);
 }
-.tui-message-input-main {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: 14px 12px;
-  gap: 12px;
+[data-uikit-theme=dark] .message-image .message-status .time, [data-uikit-theme=dark] .message-video .message-status .time {
+  color: var(--chat-theme-dark-text-primary);
 }
-.tui-message-input-main .input-box {
-  flex: 1;
+
+.message-text {
   display: flex;
-  padding: 0 8px;
-  position: relative;
-  min-height: 20px;
-  max-height: 200px;
-  border-radius: 15px;
-  overflow: hidden;
-  padding: 10px;
 }
-.tui-message-input-main .input-box .input-visibility-content {
-  word-break: break-all;
-  visibility: hidden;
-  max-width: -webkit-fill-available;
-  font-family: PingFangSC-Medium;
+.message-text-content {
+  display: inline;
+  word-break: break-word;
+  font-family: PingFangSC-Regular;
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
-  line-height: 17px;
-  padding: 1px 2px;
+  line-height: 24px;
 }
-.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;
+.message-text-content-p {
+  white-space: pre-wrap;
+  display: inline;
+  vertical-align: middle;
+}
+[data-uikit-theme=light] .message-text-content-p {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-uikit-theme=dark] .message-text-content-p {
+  color: var(--chat-theme-dark-text-primary);
+}
+.message-text-content .message-status {
+  display: inline-flex;
+  float: right;
+  clear: right;
+}
+
+.message-text,
+.message-tip {
+  font-family: PingFangSC-Regular;
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
-  margin: 9px;
-  resize: none;
-  border: none;
-  background: none;
 }
-.tui-message-input-main .input-box textarea:focus, .tui-message-input-main .input-box textarea:active {
-  border: none;
-  outline: none;
+.message-text .text-img,
+.message-tip .text-img {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
 }
-.tui-message-input-main .disabled {
-  display: none;
+
+.message-image {
+  background: #FFFFFF;
 }
-.tui-message-input-box {
-  flex: 1;
-  display: flex;
-  align-items: center;
+.message-image img {
+  max-width: 300px;
 }
-
-ul li {
-  list-style: none;
+.message-image .img-h5 {
+  max-width: 200px;
+  max-height: 200px;
+}
+.message-image .big-image {
+  max-width: 90%;
+  max-height: 90%;
 }
 
-.input-plugin-popup {
+.message-video {
+  max-width: 300px;
+}
+.message-video .snap-video {
   position: relative;
+  height: 100%;
+  border-radius: 10px;
 }
-.input-plugin-popup-box {
+.message-video .snap-video::before {
   position: absolute;
-  z-index: 2;
-  bottom: 30px;
+  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;
 }
-
-.input-plugin-item {
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 19px;
-  display: flex;
+.message-video video {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
 }
-.input-plugin-item span {
-  padding: 0 17px;
+.message-video .play-video {
+  max-width: 95%;
+  max-height: 65%;
 }
 
-.emoji-picker .face-list {
-  height: 120px;
-  width: 242px;
-  padding: 10px 5px;
+.message-video.message-video-h5 {
+  max-width: 200px;
+  max-height: 200px;
+}
+
+.message-file {
   display: flex;
-  flex-wrap: wrap;
-  overflow-y: auto;
+  flex-direction: column;
+  border: 1px solid #ddd;
 }
-.emoji-picker .face-list-item {
-  padding: 5px;
-  cursor: pointer;
+.message-file-main {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  background: #FFFFFF;
+  border-radius: 4px;
 }
-.emoji-picker .face-list-item img {
-  width: 20px;
+.message-file-main .icon {
+  margin-right: 7px;
 }
-.emoji-picker .face-list-item .face-img {
-  width: 38px;
+.message-file-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
 }
-.emoji-picker .face-tab {
+.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;
-  align-items: center;
-  min-width: 265px;
+  flex-direction: column;
+  background: #ECEBEB;
 }
-.emoji-picker .face-tab-item {
-  cursor: pointer;
-  width: 24px;
-  padding: 10px;
+.message-merger h3 {
+  padding-bottom: 4px;
+  border-bottom: 1px solid #a1a1a1;
 }
-.emoji-picker .face-tab-item img {
-  width: 100%;
+.message-merger-list {
+  opacity: 0.6;
 }
-.emoji-picker .emoji-plugin-right {
-  right: 0;
+.message-merger-item {
+  padding-top: 4px;
 }
 
-.upload-picker {
-  position: relative;
-  padding: 10px 16px;
-  min-width: 180px;
+.meesage-bubble-reply {
+  padding: 8px 16px;
 }
-.upload-picker:hover {
-  color: #147aff;
+[data-uikit-theme=light] .meesage-bubble-reply {
+  background-color: var(--chat-theme-light-bg-secondary);
 }
-.upload-picker input {
-  position: absolute;
-  cursor: pointer;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
+[data-uikit-theme=dark] .meesage-bubble-reply {
+  background-color: var(--chat-theme-dark-bg-secondary);
 }
-
-.input-quote {
-  padding: 7px 16px;
-  background: #F9F9F9;
-  display: flex;
-  align-items: center;
+.meesage-bubble-reply-in {
+  border-radius: 16px 16px 16px 0;
 }
-.input-quote-content {
-  flex: 1;
-  background: #FFFFFF;
-  padding: 2px 14px;
+.meesage-bubble-reply-out {
+  border-radius: 16px 16px 0px 16px;
+}
+.meesage-bubble-reply .message-text {
+  border: none !important;
+}
+.meesage-bubble-reply .bubble {
+  padding: 0;
+}
+.meesage-bubble-reply .bubble-in {
+  border-radius: 0;
+}
+.meesage-bubble-reply-main {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  font-weight: 500;
-  font-size: 14px;
-  font-family: PingFangSC-Medium;
-  line-height: 17px;
-  color: #000000;
+  padding: 10px 14px;
+  margin-bottom: 10px;
 }
-.input-quote-content::before {
+[data-uikit-theme=light] .meesage-bubble-reply-main {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-uikit-theme=dark] .meesage-bubble-reply-main {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
+.meesage-bubble-reply-main::before {
   content: "";
   position: absolute;
   width: 6px;
   height: 100%;
-  background: #999999;
   top: 0;
   left: 0;
 }
-.input-quote-content span {
-  padding-top: 8px;
-  opacity: 0.6;
+[data-uikit-theme=light] .meesage-bubble-reply-main::before {
+  background-color: var(--chat-theme-light-bg-5);
 }
-.input-quote .icon {
-  margin: 0 5px 0 16px;
+[data-uikit-theme=dark] .meesage-bubble-reply-main::before {
+  background-color: var(--chat-theme-dark-bg-5);
+}
+.meesage-bubble-reply-main .title {
+  font-weight: 500;
+  font-size: 14px;
+  padding-bottom: 10px;
+}
+[data-uikit-theme=light] .meesage-bubble-reply-main .title {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-uikit-theme=dark] .meesage-bubble-reply-main .title {
+  color: var(--chat-theme-dark-text-primary);
+}
+.meesage-bubble-reply-main .message-context {
+  opacity: 0.6;
 }
 
-.tui-forward {
-  background: #FFFFFF;
-  border-radius: 16px;
+.meesage-bubble {
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 300px;
-  max-height: 90%;
+  align-items: flex-end;
 }
-.tui-forward-header {
+.meesage-bubble-status {
+  margin: 3px;
+}
+.meesage-bubble-context {
   display: flex;
   align-items: center;
-  padding: 24px 20px;
+  gap: 10px;
 }
-.tui-forward-title {
-  padding: 0 16px;
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 17px;
+.meesage-bubble-context .message-context {
+  flex: 1;
 }
-.tui-forward-main {
-  padding: 0 20px;
-  max-height: calc(100vh - 200px);
-  overflow-y: auto;
+
+.icon-fail {
+  width: 14px;
+  height: 14px;
+  border-radius: 14px;
+  position: relative;
+  background: #FA5151;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
-.tui-forward-main .no-result {
+.icon-fail::before {
+  position: absolute;
+  content: "!";
+  color: #FFFFFF;
+  font-size: 12px;
   font-family: PingFangSC-Medium;
-  font-size: 14px;
-  font-style: normal;
-  line-height: 20px;
-  padding: 10px;
-  text-align: center;
-  color: #999999;
 }
-.tui-forward-search {
-  padding: 10px 15px;
+
+.message-face {
+  display: flex;
+  flex-direction: column;
 }
-.tui-forward-list {
-  padding: 13px 0;
+.message-face .img {
+  max-width: 88px;
 }
-.tui-forward-list-title {
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
+
+.loading {
+  display: inline-block;
+  position: relative;
 }
-.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%;
+.loading .img, .loading video {
+  min-width: 60px;
+  min-height: 60px;
+  max-width: 300px;
+  border-radius: 10px;
 }
-.tui-forward-list-item .info {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
+.loading .img-h5, .loading .video-h5 {
+  min-width: 60px;
+  min-height: 60px;
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 10px;
+}
+.loading::before {
+  position: absolute;
+  content: "";
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
   width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
 }
-.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%;
+.loading::after {
+  position: absolute;
+  content: "";
+  border: 5px solid #f3f3f3;
+  border-top: 5px solid #555;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  animation: spin 2s linear infinite;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
 }
-.tui-forward-footer {
-  background: rgba(249, 249, 249, 0.94);
-  padding: 13px 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
-.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: #FFFFFF;
-  border: none;
+
+.message-plugin {
+  width: 32px;
+  margin: 0 5px;
 }
-.tui-forward-footer-name {
-  flex: 1;
+.message-plugin .icon-more {
+  transform: scale(1.5);
+}
+.message-plugin .plugin-popup-box {
+  bottom: auto;
+  top: 100%;
   overflow: hidden;
-  word-break: break-all;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
 }
-
-.transmitter {
-  padding: 0 10px;
+.message-plugin-box {
+  padding: 6px 0;
 }
-.transmitter .icon-send {
-  transform: rotate(90deg);
+.message-plugin-item {
+  min-width: 144px;
+  padding: 6px 13px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 500;
+  font-size: 12.8px;
+  font-family: PingFangSC-Medium;
+  line-height: 15px;
 }
-
-.tui-message-input .tui-kit-input-box--focus {
-  outline: 1px solid #147AFF;
+.message-plugin-item:hover {
+  background: rgba(0, 110, 255, 0.1);
+  color: #147aff;
 }
-.tui-message-input .input-box {
-  border: 1px solid #D3DAF3;
-  background: #FFFFFF;
+.message-plugin-item .del {
+  color: #FF584C;
 }
 
-.input-plugin-popup-box {
-  background: #FFFFFF;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
-  border-radius: 16px;
-}
-.tui-kit-avatar {
+.message-custom {
   display: flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  flex-shrink: 0;
+  word-break: break-all;
 }
-.tui-kit-avatar.circle .avatar-image {
-  border-radius: 50%;
+.message-custom a {
+  color: #679ce1;
+  text-decoration: none;
+  font-family: PingFangSC-Regular;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
 }
-.tui-kit-avatar.square .avatar-image {
-  border-radius: 4px;
+.message-custom p {
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px;
 }
-.tui-kit-avatar img {
-  width: 100%;
-  height: 100%;
+
+.message-revoke {
+  color: #999999;
 }
-.tui-kit-avatar:hover .tui-kit-avatar-edit {
+
+.message-audio {
   display: flex;
+  align-items: center;
 }
-.tui-kit-avatar-edit {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.33);
-  width: 100%;
-  height: 100%;
-  border-radius: 100%;
+.message-audio .out {
+  transform: rotate(180deg);
+}
+.message-audio-none {
   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);
+.message-audio-content {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100%;
-  min-width: 200px;
-  max-width: 400px;
-  padding: 10px;
+  align-items: center;
+  gap: 10px;
 }
-.tui-kit-avatar-list-item {
-  padding: 10px;
+.message-audio-out {
+  flex-direction: row-reverse;
 }
-.tui-kit-avatar-list-item img {
-  width: 40px;
+.message-audio .playing {
+  animation: playingAnimation 1s ease-in-out infinite;
 }
-.conversation-list-container {
-  overflow-x: hidden;
-  height: 100%;
+@keyframes playingAnimation {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-.conversation-preview-container {
-  display: flex;
-  align-items: center;
-  background-color: #FFFFFF;
-  border: none;
-  width: 100%;
-  height: 64px;
-  cursor: pointer;
-  line-height: 17px;
-  padding: 0 20px;
+.high-lighted {
+  animation: highLightedAnimation 1s ease-in-out forwards;
 }
-.conversation-preview-container .content {
-  flex: 1 1 auto;
-  text-align: left;
-  margin-left: 10px;
-  min-width: 0;
+
+@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 .content .title {
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 17px;
-  font-family: PingFangSC-Medium;
-  padding: 1px 0;
+.progress-box {
   width: 100%;
-  color: #000;
+  height: 5px;
+  display: flex;
+  justify-content: flex-start;
 }
-.conversation-preview-container .content .message {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #7A7A7A;
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  padding: 1px 0;
+.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);
 }
-.conversation-preview-container .external {
-  text-align: right;
-  flex: 0 1 auto;
-  display: flex;
-  flex-direction: column;
+
+.website {
+  color: #147aff !important;
 }
-.conversation-preview-container .external .unread {
-  height: 19px;
-  padding: 1px 0;
+
+[data-uikit-theme=light] .message-text,
+[data-uikit-theme=light] .message-custom {
+  border: 1px solid var(--chat-theme-light-border-5);
 }
-.conversation-preview-container .external .time {
-  color: #7A7A7A;
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  padding: 1px 0;
+[data-uikit-theme=dark] .message-text,
+[data-uikit-theme=dark] .message-custom {
+  border: 1px solid var(--chat-theme-dark-border-5);
 }
-.conversation-preview-container .external .more--hover {
-  display: flex;
-  justify-content: flex-end;
-  flex: 1 1;
+
+[data-uikit-theme=light] .bubble {
+  background-color: var(--chat-theme-light-bg-primary);
 }
-.conversation-preview-container .external .more--hover .icon-more {
-  transform: scale(1.5);
+[data-uikit-theme=dark] .bubble {
+  background-color: var(--chat-theme-dark-bg-primary);
 }
-.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;
+[data-uikit-theme=light] .bubble-out {
+  border: none;
+  background-color: var(--chat-theme-light-bg-secondary);
 }
-.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=dark] .bubble-out {
+  border: none;
+  background-color: var(--chat-theme-dark-bg-secondary);
 }
-.conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
-  background: #147AFF;
-  opacity: 0.6;
-  color: #FFFFFF !important;
+
+.meesage-bubble-reply-out .meesage-bubble-reply-main .message-text {
+  background: none;
 }
-.conversation-preview-container:hover {
-  background-color: rgba(0, 110, 255, 0.1);
+
+[data-uikit-theme=light] .message-tip {
+  color: var(--chat-theme-light-text-secondary);
 }
-.conversation-preview-container.conversation-preview-content--pin {
-  background-color: rgba(242, 242, 242, 0.831372549);
+[data-uikit-theme=dark] .message-tip {
+  color: var(--chat-theme-dark-text-secondary);
 }
-.conversation-preview-container.conversation-preview-content--active {
-  background-color: rgba(0, 110, 255, 0.1);
+
+.tip .bubble .edit {
+  color: #147aff;
+  padding: 3px;
 }
-.conversation-preview-container.conversation-preview-content--active .title {
-  color: rgb(20, 122, 255);
+.plugin {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 8px;
+  gap: 8px;
 }
-.conversation-preview-container.conversation-preview-content--unread .unread {
-  width: 16px;
-  height: 13px;
-  background: #FF3742;
-  border-radius: 16px;
+
+.plugin-popup {
+  height: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
-  padding: 2px 5px 1px;
-  color: #FFFFFF;
-  font-size: 11px;
-  font-weight: 700;
-  margin: 2px 0 2px auto;
+  position: relative;
+}
+.plugin-popup-box {
+  position: absolute;
+  z-index: 2;
+  bottom: 100%;
+}
+
+.plugin-popup-box {
+  border-radius: 16px;
+}
+[data-uikit-theme=light] .plugin-popup-box {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-uikit-theme=dark] .plugin-popup-box {
+  color: var(--chat-theme-dark-text-primary);
+}
+[data-uikit-theme=light] .plugin-popup-box {
+  background-color: var(--chat-theme-light-bg-primary);
+  box-shadow: var(--chat-theme-light-box-shadow-1);
+}
+[data-uikit-theme=dark] .plugin-popup-box {
+  background-color: var(--chat-theme-dark-bg-3);
+  box-shadow: var(--chat-theme-dark-box-shadow-1);
 }
 .tui-chat-header {
   padding: 16px 20px;
@@ -1317,6 +1233,12 @@ ul li {
   justify-content: space-between;
   align-items: center;
 }
+[data-uikit-theme=light] .tui-chat-header {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-uikit-theme=dark] .tui-chat-header {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
 .tui-chat-header-left {
   display: flex;
   align-items: center;
@@ -1333,7 +1255,12 @@ ul li {
   font-style: normal;
   font-weight: 700;
   font-size: 14px;
-  line-height: 17px;
+}
+[data-uikit-theme=light] .tui-chat-header .title {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-uikit-theme=dark] .tui-chat-header .title {
+  color: var(--chat-theme-dark-text-primary);
 }
 .tui-chat-header .system {
   height: 32px;
@@ -1365,6 +1292,12 @@ ul li {
   position: relative;
   padding: 0 20px;
 }
+[data-uikit-theme=light] .message-list {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-uikit-theme=dark] .message-list {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
 .message-list.hide {
   opacity: 0;
 }
@@ -1379,10 +1312,14 @@ ul li {
   font-style: normal;
   font-weight: 500;
   line-height: 17px;
-  color: #999999;
+}
+[data-uikit-theme=light] .message-list .no-more {
+  color: var(--chat-theme-light-text-secondary);
+}
+[data-uikit-theme=dark] .message-list .no-more {
+  color: var(--chat-theme-dark-text-secondary);
 }
 .message-list-time {
-  color: #7a7a7a;
   font-family: PingFangSC-Medium;
   font-size: 12px;
   font-weight: 400;
@@ -1390,31 +1327,33 @@ ul li {
   padding: 10px;
   text-align: center;
 }
+[data-uikit-theme=light] .message-list-time {
+  color: var(--chat-theme-light-text-secondary);
+}
+[data-uikit-theme=dark] .message-list-time {
+  color: var(--chat-theme-dark-text-secondary);
+}
 .tui-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 30%;
-  max-width: 360px;
-  min-width: 360px;
-  height: 100%;
 }
 .tui-profile-header {
   box-sizing: border-box;
   width: 100%;
-  padding: 16px 20px;
+  padding: 15px;
   display: flex;
   align-items: center;
-  line-height: 32px;
 }
 .tui-profile-header h1 {
+  font-size: 16px;
   font-weight: 600;
   padding: 0 11px;
 }
 .tui-profile-main {
   max-width: 100%;
   box-sizing: border-box;
-  padding: 20px;
+  padding: 10px 10px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1438,24 +1377,28 @@ ul li {
 }
 .tui-profile-ID {
   padding: 6px 0;
+  margin: 0;
   display: flex;
   align-items: center;
   font-weight: 400;
   font-size: 12px;
   font-family: PingFangSC-Medium;
   line-height: 14px;
-  color: #666666;
+  color: #666;
+}
+.tui-profile-ID h5 {
+  margin: 0;
 }
 .tui-profile-list {
   box-sizing: border-box;
   width: 100%;
-  padding: 0 20px;
+  padding: 0 15px;
   display: flex;
   flex-direction: column;
   user-select: none;
 }
 .tui-profile-list-item {
-  padding: 20px 0 0;
+  padding: 0;
   cursor: pointer;
 }
 .tui-profile-list-item h4 {
@@ -1464,11 +1407,12 @@ ul li {
   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 #EEEEEE;
+  border-bottom: 1px solid #eee;
 }
 .tui-profile-edit {
   border-bottom: none !important;
@@ -1482,7 +1426,7 @@ ul li {
 }
 .tui-profile-birthday .react-date-picker__calendar .react-calendar__navigation {
   height: 20px !important;
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 .tui-profile-birthday-calendar {
   border: none !important;
@@ -1525,7 +1469,7 @@ ul li {
   box-sizing: border-box;
 }
 .tui-kit-input-box.tui-kit-input-box--focus {
-  outline: 1px solid #147AFF;
+  outline: 1px solid #147aff;
 }
 .tui-kit-input-box.tui-kit-input-border--bottom {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -1544,6 +1488,7 @@ ul li {
   border-radius: 10px;
   border: none;
   box-sizing: border-box;
+  font-size: 14px;
 }
 .tui-kit-input-box .tui-kit-input:focus {
   border: none;
@@ -1563,12 +1508,12 @@ ul li {
   border-left: 1px solid #f9fafb;
 }
 .tui-manage .red {
-  color: #FF584C !important;
+  color: #ff584c !important;
 }
 .tui-manage .tui-manage-title {
   display: flex;
   align-items: center;
-  padding: 24px 20px;
+  padding: 24px 10px;
 }
 .tui-manage .tui-manage-title span {
   margin-right: 10px;
@@ -1599,7 +1544,7 @@ ul li {
   font-size: 12px;
   font-family: PingFangSC-Medium;
   line-height: 14px;
-  color: #666666;
+  color: #666;
   margin-bottom: 30px;
   text-align: center;
 }
@@ -1623,7 +1568,7 @@ ul li {
 }
 
 .tui-manage.tui-h5-manage {
-  border-left: 1px solid #f9fafb;
+  border-left: none;
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -1776,7 +1721,7 @@ ul li {
 .model {
   background: rgba(0, 0, 0, 0.5);
   position: fixed;
-  z-index: 2;
+  z-index: 5;
   width: 100vw;
   top: 0;
   left: 0;