@tencentcloud/chat-uikit-react 0.0.2 → 1.0.0

package/dist/cjs/index.d.css

@@ -1,3 +1,217 @@
+.tui-live {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.tui-live video {
+  width: 100%;
+}
+.tui-live-list {
+  display: flex;
+}
+.tui-live-item {
+  display: flex;
+  margin: 0 10px;
+  gap: 10px;
+}
+.tui-live-item .list-item-text {
+  display: inline-flex;
+  min-width: 22px;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
+  color: #000000;
+}
+.tui-live .tag-list {
+  flex: 1;
+  flex-wrap: wrap;
+}
+.tui-live .tag-item {
+  position: relative;
+  padding: 4px 8px 4px 26px;
+  background: #7187D3;
+  border-radius: 47px;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
+  color: #FFFFFF;
+}
+.tui-live .tag-item::before {
+  position: absolute;
+  content: "#";
+  color: #FFFFFF;
+  left: 11px;
+  display: flex;
+  align-items: center;
+}
+.tui-live-header {
+  padding: 12px 20px;
+  display: flex;
+  flex-direction: column;
+}
+.tui-live-header-name {
+  padding: 8px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tui-live-header-name h1 {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
+  color: #000000;
+}
+.tui-live-header-content {
+  display: flex;
+  align-items: flex-start;
+}
+.tui-live-header-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: #FF0000;
+  border-radius: 47px;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
+  color: #FFFFFF;
+}
+.tui-live-content {
+  width: 100%;
+  height: 100%;
+}
+.tui-live-footer {
+  padding: 20px 20px 30px;
+  display: flex;
+  align-items: center;
+}
+.tui-live-footer .owner-avatar {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 40px;
+}
+.tui-live-footer-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.tui-live-footer-main .owner-name {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 10px 8px;
+}
+.tui-live-footer-main .owner-name h1 {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #000000;
+}
+.tui-live-footer .opate-list {
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+}
+.tui-live-footer .opate-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  gap: 10px;
+  background: rgba(249, 249, 249, 0.94);
+  border-radius: 40px;
+}
+.tui-live-footer .opate-item .opate-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+.tui-live-footer .opate-item-suffix {
+  padding-left: 10px;
+}
+.tui-live-footer .tag-item {
+  background: rgba(20, 122, 255, 0.5);
+  padding: 4px 8px;
+}
+.tui-live-footer .tag-item::before {
+  content: "";
+}
+.tui-live-members {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.tui-live-members .list-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+}
+.tui-live-members .list-header h1 {
+  flex: 1;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+  color: #000000;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.tui-live-members .list-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  gap: 4px;
+}
+.tui-live-members .list-item .nick {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #000000;
+}
+
+.line {
+  position: relative;
+}
+.line::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  height: 90%;
+  width: 1px;
+  background: #EEEEEE;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -19,6 +233,11 @@ time, mark, audio, video {
   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 {
@@ -94,6 +313,8 @@ table {
   line-height: 22px;
 }
 .message-default {
+  width: 100%;
+  flex: 1;
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -122,6 +343,7 @@ table {
 }
 
 .in {
+  flex: 1;
   display: flex;
   flex-direction: row;
   justify-self: flex-start;
@@ -132,6 +354,7 @@ table {
 }
 
 .out {
+  flex: 1;
   display: flex;
   flex-direction: row-reverse;
   justify-self: flex-end;
@@ -142,7 +365,8 @@ table {
 }
 
 .tip {
-  justify-self: center;
+  justify-self: center !important;
+  width: auto;
 }
 
 .bubble {
@@ -151,6 +375,9 @@ table {
 .bubble-in {
   border-radius: 16px 16px 16px 0;
 }
+.bubble-in.group {
+  border-radius: 0px 16px 16px 16px;
+}
 .bubble-out {
   border-radius: 16px 16px 0 16px;
 }
@@ -195,6 +422,10 @@ table {
   font-size: 14px;
   line-height: 17px;
 }
+.message-text-content-p {
+  display: inline;
+  vertical-align: middle;
+}
 .message-text-content .message-status {
   display: inline-flex;
   float: right;
@@ -213,6 +444,7 @@ table {
 .message-tip .text-img {
   width: 20px;
   height: 20px;
+  vertical-align: middle;
 }
 
 .message-image {
@@ -360,6 +592,7 @@ table {
 .meesage-bubble-context {
   display: flex;
   align-items: center;
+  padding: 0 8px;
 }
 .meesage-bubble-context .message-context {
   flex: 1;
@@ -494,6 +727,75 @@ table {
   color: #999999;
 }
 
+.message-audio {
+  display: flex;
+  align-items: center;
+}
+.message-audio .out {
+  transform: rotate(180deg);
+}
+.message-audio-none {
+  display: none;
+}
+.message-audio-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.message-audio-out {
+  flex-direction: row-reverse;
+}
+.message-audio .playing {
+  animation: playingAnimation 1s ease-in-out infinite;
+}
+@keyframes playingAnimation {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.high-lighted {
+  animation: highLightedAnimation 1s ease-in-out forwards;
+}
+
+@keyframes highLightedAnimation {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0.3;
+  }
+  100% {
+    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);
+}
+
 .message-text, .message-custom {
   border: 1px solid #DDDDDD;
 }
@@ -521,6 +823,8 @@ table {
   display: flex;
   align-items: center;
   height: 100%;
+  padding: 0 8px;
+  gap: 8px;
 }
 
 .plugin-popup {
@@ -528,7 +832,6 @@ table {
   display: flex;
   align-items: center;
   position: relative;
-  padding: 0 8px;
 }
 .plugin-popup-box {
   position: absolute;
@@ -550,6 +853,7 @@ table {
   display: flex;
   align-items: center;
   padding: 14px 12px;
+  gap: 12px;
 }
 .tui-message-input-main .input-box {
   flex: 1;
@@ -597,6 +901,11 @@ table {
 .tui-message-input-main .disabled {
   display: none;
 }
+.tui-message-input-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
 
 ul li {
   list-style: none;
@@ -654,6 +963,9 @@ ul li {
 .emoji-picker .face-tab-item img {
   width: 100%;
 }
+.emoji-picker .emoji-plugin-right {
+  right: 0;
+}
 
 .upload-picker {
   position: relative;
@@ -816,6 +1128,13 @@ ul li {
   -webkit-box-orient: vertical;
 }
 
+.transmitter {
+  padding: 0 10px;
+}
+.transmitter .icon-send {
+  transform: rotate(90deg);
+}
+
 .tui-message-input .tui-kit-input-box--focus {
   outline: 1px solid #147AFF;
 }
@@ -1012,7 +1331,8 @@ ul li {
   display: flex;
   align-items: center;
 }
-.tui-chat-header-left .header-content {
+.tui-chat-header .header-content {
+  flex: 1;
   padding: 0 8px;
 }
 .tui-chat-header-right .header-handle-more {
@@ -1028,10 +1348,6 @@ ul li {
 .tui-chat-header .system {
   height: 32px;
 }
-
-.tui-chat-header {
-  background: #FFFFFF;
-}
 .chat {
   flex: 1;
   width: 100%;
@@ -1058,6 +1374,9 @@ ul li {
   position: relative;
   padding: 0 20px;
 }
+.message-list.hide {
+  opacity: 0;
+}
 .message-list-item {
   display: grid;
   padding: 5px 0;
@@ -1071,6 +1390,15 @@ ul li {
   line-height: 17px;
   color: #999999;
 }
+.message-list-time {
+  color: #7a7a7a;
+  font-family: PingFangSC-Medium;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14px;
+  padding: 10px;
+  text-align: center;
+}
 .tui-profile {
   display: flex;
   flex-direction: column;
@@ -1295,4 +1623,216 @@ ul li {
   font-family: PingFangSC-Medium;
   line-height: 22px;
   color: rgba(0, 0, 0, 0.6);
+}
+.popup {
+  opacity: 0;
+}
+.popup-show {
+  opacity: 1;
+}
+.checkbox {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+.checkbox-default {
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  border-radius: 14px;
+  border: 1px solid #DDDDDD;
+}
+.checkbox-input {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.info {
+  background: #FFFFFF;
+}
+
+.warn {
+  color: #FFFFFF;
+  background: #faad14;
+}
+
+.error {
+  color: #FFFFFF;
+  background: #ff4d4f;
+}
+.div-with-edit {
+  flex: 1;
+  display: flex;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.div-with-edit-popup {
+  flex: 1;
+  display: flex;
+  max-width: 100%;
+}
+.div-with-edit .show {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  word-break: break-all;
+}
+.div-with-edit .show:hover .icon-edit {
+  display: flex;
+}
+.div-with-edit .show .icon-edit {
+  display: none;
+}
+.div-with-edit .icon {
+  margin-left: 10px;
+  width: 25px;
+}
+.div-with-edit .edit {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  border-bottom: 1px solid #EEEEEE;
+  padding: 0 10px;
+}
+.div-with-edit .edit input {
+  flex: 1;
+  font-size: inherit;
+  border: none;
+}
+.div-with-edit .edit input:focus {
+  border: none;
+  outline: none;
+}
+.div-with-edit .edit .select {
+  position: absolute;
+  box-sizing: border-box;
+  min-width: 100%;
+  z-index: 2;
+  background: #FFFFFF;
+  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);
+  top: 100%;
+  border-radius: 5px;
+  padding: 10px 0;
+}
+.div-with-edit .edit .select-list-item {
+  padding: 5px 10px;
+}
+.div-with-edit .edit .select-list-item:hover {
+  background: #f2f7ff;
+}
+.tui-kit-icon {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+.tui-kit-icon .icon-image {
+  width: 100%;
+  height: 100%;
+}
+.tui-kit-icon:hover {
+  color: royalblue;
+  border-color: currentColor;
+}
+.tui-kit-icon::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  opacity: 0;
+  box-shadow: 0 0 0 6px royalblue;
+  transition: 0.3s;
+}
+.tui-kit-icon:active::after {
+  box-shadow: none;
+  opacity: 0.4;
+  transition: 0s;
+}
+.model {
+  background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  z-index: 2;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.self-ui-switch {
+  display: inline-flex;
+  vertical-align: top;
+}
+.self-ui-switch-input {
+  height: 0;
+  width: 0;
+  display: none;
+}
+.self-ui-switch-label {
+  position: relative;
+  width: 51px;
+  height: 31px;
+  background-color: rgba(120, 120, 128, 0.16);
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.self-ui-switch-button {
+  position: absolute;
+  height: calc(100% - 4px);
+  width: 50%;
+  top: 50%;
+  left: 2px;
+  border-radius: 46px;
+  transform: translateY(-50%);
+  background-color: #fff;
+  transition: all 0.2s;
+  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
+}
+.self-ui-switch-label .self-ui-switch-input:checked + .self-ui-switch-button {
+  left: calc(100% - 2px);
+  transform: translateX(-100%) translateY(-50%);
+}
+.self-ui-switch-label:active .self-ui-switch-button {
+  width: 66%;
+}
+.toast {
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  margin: 20px;
+  padding: 10px;
+  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);
+  max-width: 50%;
+  word-break: break-all;
+  border-radius: 5px;
+}
+
+.info {
+  background: #FFFFFF;
+}
+
+.warn {
+  color: #FFFFFF;
+  background: #faad14;
+}
+
+.error {
+  color: #FFFFFF;
+  background: #ff4d4f;
 }

package/dist/cjs/index.d.ts

@@ -7,15 +7,18 @@ export { TUIChat } from './components/TUIChat/TUIChat.js';
 export { TUIKitContext, TUIKitContextValue, TUIKitProvider, useTUIKitContext } from './context/TUIKitContext.js';
 export { TUIChatStateContext, TUIChatStateContextProvider, TUIChatStateContextValue, useTUIChatStateContext } from './context/TUIChatStateContext.js';
 export { TUIChatActionContext, TUIChatActionContextValue, TUIChatActionProvider, useTUIChatActionContext } from './context/TUIChatActionContext.js';
-export { TUIMessageContext, TUIMessageContextProvider, TUIMessageContextValue, useTUIMessageContext } from './context/TUIMessageContext.js';
+export { TUIMessageContext, TUIMessageContextProvider, TUIMessageContextValue, messageShowType, useTUIMessageContext } from './context/TUIMessageContext.js';
 export { ComponentContext, ComponentContextValue, ComponentProvider, UnknowPorps, useComponentContext } from './context/ComponentContext.js';
 export { TUIMessageInputContext, TUIMessageInputContextProvider, TUIMessageInputContextValue, useTUIMessageInputContext } from './context/TUIMessageInputContext.js';
 export { ConversationPreview, ConversationPreviewProps, ConversationPreviewUIComponentProps } from './components/ConversationPreview/ConversationPreview.js';
 export { ConversationPreviewContent, unMemoConversationPreviewContent } from './components/ConversationPreview/ConversationPreviewContent.js';
 export { TUIChatHeader } from './components/TUIChatHeader/TUIChatHeader.js';
-export { TUIChatHeaderDefault, TUIChatHeaderDefaultProps } from './components/TUIChatHeader/TUIChatHeaderDefault.js';
-export { TUIMessageList } from './components/TUIMessageList/TUIMessageList.js';
-export { TUIMessageInput, TUIMessageInputProps } from './components/TUIMessageInput/TUIMessageInput.js';
+export { TUIChatHeaderBasicProps, TUIChatHeaderDefault, TUIChatHeaderDefaultProps } from './components/TUIChatHeader/TUIChatHeaderDefault.js';
+export { MessageListProps, TUIMessageList } from './components/TUIMessageList/TUIMessageList.js';
+export { TUIMessage, TUIMessageProps } from './components/TUIMessage/TUIMessage.js';
+export { MessagePluginConfigProps, MessagePlugins, MessagePluginsProps } from './components/TUIMessage/MessagePlugins.js';
+export { MessageContext, MessageContextProps } from './components/TUIMessage/MessageContext.js';
+export { PluginConfigProps, TUIMessageInput, TUIMessageInputBasicProps, TUIMessageInputProps } from './components/TUIMessageInput/TUIMessageInput.js';
 export { TUIMessageInputDefault } from './components/TUIMessageInput/TUIMessageInputDefault.js';
 export { InputPluginsDefalut } from './components/TUIMessageInput/InputPluginsDefalut.js';
 export { TUIProfile } from './components/TUIProfile/TUIProfile.js';
@@ -25,5 +28,16 @@ export { defaultGroupAvatarAVChatRoom, defaultGroupAvatarMeeting, defaultGroupAv
 export { ConversationSearchInput } from './components/ConversationSearch/ConversationSearchInput.js';
 export { ConversationSearchResult, ConversationSearchResultProps } from './components/ConversationSearch/ConversationSearchResult.js';
 export { TUIManage } from './components/TUIManage/TUIManage.js';
+export { Popup } from './components/Popup/index.js';
+export { Checkbox } from './components/Checkbox/index.js';
+export { DivWithEdit } from './components/DivWithEdit/DivWithEdit.js';
+export { Icon, IconProps, changeTypeToIconClassName } from './components/Icon/Icon.js';
+export { IconTypes } from './components/Icon/type.js';
+export { EmptyStateIndicator, EmptyStateIndicatorProps } from './components/EmptyStateIndicator/EmptyStateIndicator.js';
+export { Input, InputProps, InputRef } from './components/Input/Input.js';
+export { Model } from './components/Model/index.js';
+export { Plugins, PluginsProps } from './components/Plugins/index.js';
+export { Switch } from './components/Switch/Switch.js';
+export { Toast } from './components/Toast/index.js';
 export { CreateGroupConversationParams, useConversation } from './hooks/useConversation.js';
 export { useProfile } from './hooks/useProfile.js';