@tencentcloud/chat-uikit-react 2.2.7 → 2.2.9

package/dist/esm/index.d.css

@@ -1,299 +1,3 @@
-.tui-conversation {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  text-align: initial;
-  overflow: auto;
-}
-[data-uikit-theme=light] .tui-conversation {
-  background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
-}
-[data-uikit-theme=dark] .tui-conversation {
-  background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
-}
-.tui-conversation .tui-conversation-header {
-  display: flex;
-  padding: 10px 20px;
-}
-.tui-conversation .tui-conversation-header .tui-conversation-create-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 10px;
-}
-.tui-conversation .no-result {
-  padding: 0 20px;
-  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 {
-  padding: 10px;
-}
-.tui-conversation-h5 .conversation-list-container .conversation-preview-container {
-  padding: 0 10px;
-}
-.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: #fff;
-  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-uikit-theme=light] .conversation-preview-container {
-  background-color: var(--uikit-theme-light-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
-}
-[data-uikit-theme=dark] .conversation-preview-container {
-  background-color: var(--uikit-theme-dark-bg-color-operate);
-  transition: background-color 0.3s ease-in-out;
-}
-.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-uikit-theme=light] .conversation-preview-container .content .title {
-  color: var(--uikit-theme-light-text-color-primary);
-  transition: background-color 0.3s ease-in-out;
-}
-[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;
-}
-.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-uikit-theme=light] .conversation-preview-container .content .message {
-  color: var(--uikit-theme-light-text-color-secondary);
-  transition: background-color 0.3s ease-in-out;
-}
-[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;
-}
-.conversation-preview-container .external {
-  text-align: right;
-  flex: 0 0 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;
-}
-[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;
-}
-[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;
-}
-.conversation-preview-container .external .more--hover {
-  display: flex;
-  justify-content: flex-end;
-  flex: 1 1;
-}
-.conversation-preview-container .external .more--hover .icon-more {
-  transform: scale(1.5);
-}
-.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;
-}
-[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;
-}
-[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;
-}
-.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] .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;
-}
-[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;
-}
-[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;
-}
-[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;
-}
-[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;
-}
-[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;
-}
-[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;
-}
-[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;
-}
-[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--pin {
-  transition: background-color 0.3s ease-in-out;
-}
-[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--pin {
-  transition: background-color 0.3s ease-in-out;
-}
-[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;
-}
-[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;
-}
-.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;
-}
-[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;
-}
-[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-message-input {
   display: flex;
   flex-direction: column;
@@ -661,12 +365,12 @@ ul li {
   transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=light] .tui-message-input .input-box {
-  background-color: var(--uikit-theme-light-bg-color-operate);
+  background-color: var(--uikit-theme-light-bg-color-input);
   border: 1px solid var(--uikit-theme-light-stroke-color-primary);
   transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .tui-message-input .input-box {
-  background-color: var(--uikit-theme-dark-bg-color-operate);
+  background-color: var(--uikit-theme-dark-bg-color-input);
   border: 1px solid var(--uikit-theme-dark-stroke-color-primary);
   transition: background-color 0.3s ease-in-out;
 }
@@ -963,9 +667,11 @@ ul li {
   padding: 8px 16px;
 }
 [data-uikit-theme=light] .meesage-bubble-reply {
+  background-color: var(--uikit-theme-light-bg-color-bubble-own);
   transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .meesage-bubble-reply {
+  background-color: var(--uikit-theme-dark-bg-color-bubble-own);
   transition: background-color 0.3s ease-in-out;
 }
 .meesage-bubble-reply-in {
@@ -1388,9 +1094,6 @@ ul li {
 .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-style: normal;
   font-weight: 700;
@@ -1491,14 +1194,808 @@ ul li {
   color: var(--uikit-theme-dark-text-color-secondary);
   transition: background-color 0.3s ease-in-out;
 }
-.tui-profile {
+.uikit-chat-list__header {
   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;
+  overflow: hidden;
+  flex-direction: row;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  min-width: 0;
+}
+[data-uikit-theme=light] .uikit-chat-list__header {
+  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] .uikit-chat-list__header {
+  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;
+}
+.uikit-chat-list__header .uikit-conversation-search + .uikit-conversation-create-container .uikit-conversation-create-button {
+  margin-left: 0;
+}
+.uikit-chat-list__header .uikit-chat-list__header__left,
+.uikit-chat-list__header .uikit-chat-list__header__right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.uikit-chat-list__container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden auto;
+  box-sizing: border-box;
+  min-width: 0;
+  text-align: initial;
+}
+[data-uikit-theme=light] .uikit-chat-list__container {
+  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] .uikit-chat-list__container {
+  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;
+}
+.tui-kit-input-box {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  padding: 0 8px;
+  height: 36px;
+  box-sizing: border-box;
+}
+[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 {
+  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;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: transparent;
+  border-radius: 10px;
+  border: none;
+  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 {
+  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;
+}
+.uikit-conversation-search-input {
+  height: 36px;
+  align-self: stretch;
+  margin: 10px;
+  box-sizing: border-box;
+}
+[data-uikit-theme=light] .uikit-conversation-search-input {
+  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] .uikit-conversation-search-input {
+  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;
+}
+.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: #fff;
+  border-radius: 5px;
+  box-shadow: 0 11px 20px 0 rgb(0, 0, 0.3);
+  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;
+}
+.uikit-conversation-actions {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1 1;
+}
+.uikit-conversation-actions .uikit-conversation-actions__container {
+  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;
+}
+.uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item {
+  font-size: 16px;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: PingFangSC-Medium;
+  line-height: 19px;
+  padding: 6px 16px;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
+}
+[data-uikit-theme=light] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item:hover {
+  background-color: var(--uikit-theme-light-dropdown-color-active);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item:hover {
+  background-color: var(--uikit-theme-dark-dropdown-color-active);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item--delete {
+  color: var(--uikit-theme-light-text-color-error);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item--delete {
+  color: var(--uikit-theme-dark-text-color-error);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-actions .uikit-conversation-actions__popup-icon {
+  transform: scale(1.5);
+}
+.uikit-conversation-preview {
+  display: flex;
+  align-items: center;
+  border: none;
+  height: 64px;
+  cursor: pointer;
+  line-height: 17px;
+  padding: 0 20px;
+  flex: 0 0 auto;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: PingFangSC-Medium;
+}
+[data-uikit-theme=light] .uikit-conversation-preview {
+  background-color: var(--uikit-theme-light-list-color-default);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview {
+  background-color: var(--uikit-theme-dark-list-color-default);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-preview:hover {
+  background-color: var(--uikit-theme-light-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview:hover {
+  background-color: var(--uikit-theme-dark-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-preview.uikit-conversation-preview--mobile {
+  padding: 0 10px;
+}
+[data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--pin {
+  background-color: var(--uikit-theme-light-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--pin {
+  background-color: var(--uikit-theme-dark-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--active {
+  background-color: var(--uikit-theme-light-list-color-active);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--active {
+  background-color: var(--uikit-theme-dark-list-color-active);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--active .uikit-conversation-preview__title {
+  color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--active .uikit-conversation-preview__title {
+  color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-preview.uikit-conversation-preview--unread .uikit-conversation-preview__unread {
+  color: #fff;
+}
+[data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--unread .uikit-conversation-preview__unread {
+  background-color: var(--uikit-theme-light-text-color-error);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--unread .uikit-conversation-preview__unread {
+  background-color: var(--uikit-theme-dark-text-color-error);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-preview .uikit-conversation-preview__content {
+  flex: 1 1 auto;
+  text-align: left;
+  margin-left: 10px;
+  min-width: 0;
+}
+.uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 17px;
+  padding: 1px 0;
+  width: 100%;
+}
+[data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--normal {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--normal {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--highlight {
+  color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--highlight {
+  color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__abstract {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 1px 0;
+}
+[data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__abstract {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__abstract {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-preview .uikit-conversation-preview__external {
+  text-align: right;
+  flex: 0 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+.uikit-conversation-preview .uikit-conversation-preview__external .uikit-conversation-preview__unread {
+  box-sizing: border-box;
+  height: 16px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 5px;
+  font-size: 11px;
+  font-weight: 700;
+  margin: 2px 0 2px auto;
+}
+.uikit-conversation-preview .uikit-conversation-preview__external .uikit-conversation-preview__time {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 1px 0;
+  text-wrap: nowrap;
+}
+[data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__external .uikit-conversation-preview__time {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__external .uikit-conversation-preview__time {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-search-result {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: auto;
+}
+[data-uikit-theme=light] .uikit-conversation-search-result {
+  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] .uikit-conversation-search-result {
+  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;
+}
+.uikit-conversation-search {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+}
+[data-uikit-theme=light] .uikit-conversation-search {
+  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] .uikit-conversation-search {
+  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;
+}
+.uikit-conversation-search.uikit-conversation-search--active {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.uikit-conversation-create-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tui-conversation-create {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+[data-uikit-theme=light] .tui-conversation-create {
+  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] .tui-conversation-create {
+  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;
+}
+
+.tui-conversation-create-header {
+  display: flex;
+  flex-direction: row;
+  padding: 16px 20px;
+  align-items: center;
+  text-align: center;
+}
+[data-uikit-theme=light] .tui-conversation-create-header {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create-header {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-conversation-create-header .title {
+  margin-left: 10px;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 32px;
+  letter-spacing: -0.41px;
+}
+[data-uikit-theme=light] .tui-conversation-create-header .title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create-header .title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.tui-conversation-create-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tui-conversation-create-search-input {
+  margin: 10px;
+}
+
+.tui-user {
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+}
+[data-uikit-theme=light] .tui-user:hover {
+  background-color: var(--uikit-theme-light-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-user:hover {
+  background-color: var(--uikit-theme-dark-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-user .tui-user-name {
+  margin-left: 10px;
+  font-size: 14px;
+  width: 80%;
+  text-align: left;
+}
+[data-uikit-theme=light] .tui-user .tui-user-name {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-user .tui-user-name {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-user .tui-user-name.active {
+  font-weight: 600;
+  font-size: 14px;
+}
+[data-uikit-theme=light] .tui-user .tui-user-name.active {
+  color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-user .tui-user-name.active {
+  color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.tui-user-checkbox-label .tui-user-checkbox {
+  margin-left: auto;
+}
+.tui-user-checkbox-label input[type=checkbox] {
+  cursor: pointer;
+}
+
+.tui-conversation-create-next-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 20px auto 10px;
+}
+.tui-conversation-create-next-container .tui-conversation-create-next {
+  cursor: pointer;
+  text-align: center;
+  border-radius: 31px;
+  font-size: 14px;
+  color: #fff;
+  padding: 12px 36px;
+}
+[data-uikit-theme=light] .tui-conversation-create-next-container .tui-conversation-create-next {
+  background-color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create-next-container .tui-conversation-create-next {
+  background-color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.tui-conversation-create-select-list-container {
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: 0 10px;
+}
+.tui-conversation-create-select-list-container .tui-conversation-create-select-list {
+  position: relative;
+}
+.tui-conversation-create-select-list-container .tui-conversation-create-select-list .tui-group-container {
+  width: 100%;
+}
+.tui-conversation-create-select-list-container .tui-conversation-create-select-list .tui-group-box .title {
+  font-weight: 600;
+  font-size: 14px;
+  padding: 10px;
+}
+[data-uikit-theme=light] .tui-conversation-create-select-list-container .tui-conversation-create-select-list .tui-group-box .title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create-select-list-container .tui-conversation-create-select-list .tui-group-box .title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.conversation-create-select-view {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+}
+[data-uikit-theme=light] .conversation-create-select-view {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .conversation-create-select-view {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.conversation-create-select-view .select-view-info {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: calc((100% - 10px) / 5);
+  padding: 6px;
+  box-sizing: border-box;
+  position: relative;
+}
+.conversation-create-select-view .select-view-info .select-view-info-close {
+  position: absolute;
+  right: 15px;
+  top: 6px;
+  z-index: 2;
+}
+.conversation-create-select-view .select-view-info .select-view-info-nick {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  text-align: center;
+}
+.tui-conversation-create-group-detail {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+  overflow-y: scroll;
+}
+[data-uikit-theme=light] .tui-conversation-create-group-detail {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create-group-detail {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-conversation-create-group-detail .create-group-box {
+  padding: 10px 0;
+}
+.tui-conversation-create-group-detail .input-group-text {
+  font-size: 14px;
+}
+.tui-conversation-create-group-detail .create-group-name .input-group-name {
+  font-weight: 700;
+  font-size: 14px;
+}
+.tui-conversation-create-group-detail .input-group-title {
+  width: 106px;
+  font-size: 14px;
+}
+.tui-conversation-create-group-detail .create-group-illustrate {
+  font-size: 12px;
+  text-align: justify;
+  padding-left: 8px;
+}
+.tui-conversation-create-group-detail .create-group-portrait .create-group-portrait-title {
+  font-weight: 600;
+  font-size: 14px;
+  padding: 20px 0 20px 8px;
+}
+.tui-conversation-create-group-detail .create-group-portrait .create-group-portrait-info-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+  padding: 0 10px;
+}
+.tui-conversation-create-group-detail .create-group-portrait .create-group-portrait-info-container .create-group-portrait-info {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+  box-sizing: border-box;
+}
+.tui-conversation-create-group-detail .create-group-portrait .create-group-portrait-info-container .create-group-portrait-info-nick {
+  font-size: 12px;
+  margin-top: 6px;
+}
+.tui-conversation-group-type-info {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+  overflow-y: scroll;
+}
+[data-uikit-theme=light] .tui-conversation-group-type-info {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-group-type-info {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-conversation-group-type-info .group-type-info-box {
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  padding: 12px 16px;
+  margin-top: 12px;
+  cursor: pointer;
+}
+[data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-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;
+}
+[data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-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;
+}
+.tui-conversation-group-type-info .group-type-info-box:hover {
+  border: 1px solid #147aff;
+}
+.tui-conversation-group-type-info .group-type-info-box.group-type-info-box--active {
+  border: 1px solid #147aff;
+}
+.tui-conversation-group-type-info .group-type-info-box .group-type-info-title {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+.tui-conversation-group-type-info .group-type-info-box .group-type-info-title .box-active-icon {
+  margin-right: 8px;
+}
+.tui-conversation-group-type-info .group-type-info-box .group-type-info-description {
+  font-size: 12px;
+  text-align: justify;
+}
+.tui-conversation-group-type-info .group-type-info-document {
+  font-size: 16px;
+  text-align: justify;
+  text-decoration: none;
+  margin: 1rem auto;
+}
+[data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-document:link, [data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-document:active, [data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-document:visited {
+  color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-document:link, [data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-document:active, [data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-document:visited {
+  color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-conversation-create-button {
+  display: flex;
+  align-items: center;
+  margin: 10px;
+}
+.uikit-chat-list {
+  flex: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  text-align: initial;
+}
+[data-uikit-theme=light] .uikit-chat-list {
+  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] .uikit-chat-list {
+  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;
+}
+.uikit-chat-list .uikit-chat-list__header--searching {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.uikit-chat-list .uikit-chat-list__header--creating {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.tui-profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+[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);
@@ -1610,101 +2107,6 @@ ul li {
   background: var(--uikit-theme-dark-bg-color-operate);
   transition: background-color 0.3s ease-in-out;
 }
-.conversation-search-result.no-result {
-  padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.conversation-search-result.no-result-icon {
-  margin: 100px auto 50px;
-}
-.conversation-search-result.no-result-message {
-  color: #999999;
-  font-weight: 400;
-  font-family: PingFangSC-Medium;
-  font-size: 16px;
-  line-height: 22px;
-}
-
-.conversation-search-input {
-  height: 36px;
-  width: 100%;
-}
-.tui-kit-input-box {
-  display: flex;
-  align-items: center;
-  border-radius: 10px;
-  padding: 0 8px;
-  height: 36px;
-  box-sizing: border-box;
-}
-[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 {
-  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;
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  background-color: transparent;
-  border-radius: 10px;
-  border: none;
-  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 {
-  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;
@@ -1753,11 +2155,18 @@ ul li {
   margin-bottom: 10px;
 }
 .tui-manage .tui-manage-container .tui-manage-info .info-id {
-  font-size: 12px;
-  color: #666;
+  font-size: 16px;
   margin-bottom: 30px;
   text-align: center;
 }
+[data-uikit-theme=light] .tui-manage .tui-manage-container .tui-manage-info .info-id {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-manage .tui-manage-container .tui-manage-info .info-id {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
   display: flex;
   align-items: center;
@@ -1962,13 +2371,14 @@ ul li {
   align-items: center;
   cursor: pointer;
   position: relative;
+  user-select: none;
 }
 .tui-kit-icon .icon-image {
   width: 100%;
 }
 .tui-kit-icon:hover {
   color: royalblue;
-  border-color: currentColor;
+  border-color: currentcolor;
 }
 .tui-kit-icon::after {
   content: "";
@@ -1984,6 +2394,74 @@ ul li {
   opacity: 0.4;
   transition: 0s;
 }
+
+.tui-kit-icon-loading {
+  cursor: wait;
+  border-radius: 100%;
+  animation: circle infinite 1s linear;
+}
+[data-uikit-theme=light] .tui-kit-icon-loading {
+  border: 3px solid var(--uikit-theme-light-text-color-disable);
+  border-top-color: transparent;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-icon-loading {
+  border: 3px solid var(--uikit-theme-dark-text-color-disable);
+  border-top-color: transparent;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .tui-kit-icon-loading:hover {
+  border: 3px solid var(--uikit-theme-light-text-color-disable);
+  border-top-color: transparent;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-icon-loading:hover {
+  border: 3px solid var(--uikit-theme-dark-text-color-disable);
+  border-top-color: transparent;
+  transition: background-color 0.3s ease-in-out;
+}
+
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.tui-place-holder {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+.tui-place-holder .tui-place-holder__icon {
+  margin: 10px;
+}
+.tui-place-holder .tui-place-holder__label {
+  color: #999;
+  font-weight: 400;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: PingFangSC-Medium;
+  font-size: 16px;
+  line-height: 22px;
+}
+.tui-place-holder .tui-place-holder__button {
+  margin: 20px;
+  background-color: #0365f9;
+  border-radius: 31px;
+  color: #fff;
+  cursor: pointer;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 12px 36px;
+  text-align: center;
+  user-select: none;
+}
 .model {
   background: rgba(0, 0, 0, 0.5);
   position: fixed;
@@ -2039,7 +2517,7 @@ ul li {
   z-index: 10;
   margin: 20px;
   padding: 10px;
-  box-shadow: 0 11px 20px 0 rgb(0, 0, 0);
+  box-shadow: 0 11px 20px 0 rgb(0, 0, 0.3);
   max-width: 50%;
   word-break: break-all;
   border-radius: 5px;