@webinex/chatify 1.0.0-rc1 → 1.0.0-rc3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (267) hide show
  1. package/dist/css/chatify.css +183 -141
  2. package/dist/esm/index.js +1 -1
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/esm/types/core/action.d.ts +110 -42
  5. package/dist/esm/types/core/client.d.ts +2 -1
  6. package/dist/esm/types/core/index.d.ts +11 -8
  7. package/dist/esm/types/core/models.d.ts +10 -4
  8. package/dist/esm/types/core/state.d.ts +36 -7
  9. package/dist/esm/types/core/useAddChatMutation.d.ts +2 -0
  10. package/dist/esm/types/core/useAddMemberMutation.d.ts +2 -0
  11. package/dist/esm/types/core/useFetchNextMutation.d.ts +3 -0
  12. package/dist/esm/types/core/useGetAccountsQuery.d.ts +1 -0
  13. package/dist/esm/types/core/useGetChatListQuery.d.ts +1 -0
  14. package/dist/{cjs/types/core/useChat.d.ts → esm/types/core/useGetChatQuery.d.ts} +1 -1
  15. package/dist/esm/types/core/useGetMessagesQuery.d.ts +4 -0
  16. package/dist/esm/types/core/useRemoveMemberMutation.d.ts +2 -0
  17. package/dist/esm/types/core/useSendMutation.d.ts +2 -0
  18. package/dist/esm/types/core/useUpdateChatNameMutation.d.ts +2 -0
  19. package/dist/esm/types/ui/AddChatButton.d.ts +2 -2
  20. package/dist/esm/types/ui/Avatar.d.ts +2 -2
  21. package/dist/esm/types/ui/ChatList/ChatList.d.ts +2 -0
  22. package/dist/esm/types/ui/ChatList/ChatListItemBox.d.ts +6 -0
  23. package/dist/esm/types/ui/ChatList/ChatListItemLastMessage.d.ts +3 -0
  24. package/dist/esm/types/ui/ChatList/ChatListItemLastMessageAuthor.d.ts +3 -0
  25. package/dist/esm/types/ui/ChatList/ChatListItemLastMessageContent.d.ts +3 -0
  26. package/dist/esm/types/ui/ChatList/ChatListItemName.d.ts +3 -0
  27. package/dist/esm/types/ui/ChatList/ChatListItemUnreadCount.d.ts +3 -0
  28. package/dist/esm/types/ui/ChatList/index.d.ts +7 -0
  29. package/dist/esm/types/ui/ChatName.d.ts +2 -2
  30. package/dist/esm/types/ui/ChatPanel/ChatBody.d.ts +5 -0
  31. package/dist/esm/types/ui/ChatPanel/ChatHeader.d.ts +5 -0
  32. package/dist/esm/types/ui/ChatPanel/ChatHeaderMembers.d.ts +5 -0
  33. package/dist/esm/types/ui/ChatPanel/ChatHeaderName.d.ts +5 -0
  34. package/dist/esm/types/ui/ChatPanel/ChatMembersButton.d.ts +5 -0
  35. package/dist/esm/types/ui/ChatPanel/ChatMembersPanel.d.ts +5 -0
  36. package/dist/esm/types/ui/ChatPanel/ChatPanel.d.ts +5 -0
  37. package/dist/esm/types/ui/ChatPanel/index.d.ts +6 -0
  38. package/dist/esm/types/ui/Chatify.d.ts +46 -22
  39. package/dist/esm/types/ui/CreateChatPanel/CreateChatForm.d.ts +11 -0
  40. package/dist/esm/types/ui/CreateChatPanel/CreateChatMemberInput.d.ts +5 -0
  41. package/dist/esm/types/ui/CreateChatPanel/CreateChatNameInput.d.ts +5 -0
  42. package/dist/esm/types/ui/CreateChatPanel/CreateChatPanel.d.ts +2 -0
  43. package/dist/esm/types/ui/CreateChatPanel/index.d.ts +4 -0
  44. package/dist/esm/types/ui/Icon.d.ts +13 -4
  45. package/dist/esm/types/ui/InputBox/InputBox.d.ts +2 -0
  46. package/dist/esm/types/ui/InputBox/InputFilesBox.d.ts +2 -0
  47. package/dist/esm/types/ui/InputBox/InputSubmitButtonBox.d.ts +5 -0
  48. package/dist/esm/types/ui/InputBox/InputTextBox.d.ts +7 -0
  49. package/dist/esm/types/ui/InputBox/index.d.ts +4 -0
  50. package/dist/esm/types/ui/Layout/Aside.d.ts +2 -0
  51. package/dist/esm/types/ui/Layout/Body.d.ts +2 -0
  52. package/dist/esm/types/ui/Layout/Footer.d.ts +2 -0
  53. package/dist/esm/types/ui/Layout/Header.d.ts +2 -0
  54. package/dist/esm/types/ui/Layout/Main.d.ts +2 -0
  55. package/dist/esm/types/ui/Layout/index.d.ts +5 -0
  56. package/dist/esm/types/ui/Message/MessageAuthor.d.ts +3 -0
  57. package/dist/esm/types/ui/Message/MessageBox.d.ts +6 -0
  58. package/dist/esm/types/ui/Message/MessageContent.d.ts +3 -0
  59. package/dist/esm/types/ui/Message/MessageInfoBox.d.ts +3 -0
  60. package/dist/esm/types/ui/Message/MessageRow.d.ts +6 -0
  61. package/dist/esm/types/ui/Message/MessageText.d.ts +3 -0
  62. package/dist/esm/types/ui/Message/index.d.ts +6 -0
  63. package/dist/esm/types/ui/MessageReadObserver.d.ts +6 -0
  64. package/dist/esm/types/ui/Next.d.ts +4 -0
  65. package/dist/esm/types/ui/SendingMessage/SendingMessageBox.d.ts +7 -0
  66. package/dist/esm/types/ui/SendingMessage/SendingMessageContent.d.ts +3 -0
  67. package/dist/esm/types/ui/SendingMessage/SendingMessageInfoBox.d.ts +3 -0
  68. package/dist/esm/types/ui/SendingMessage/SendingMessageText.d.ts +3 -0
  69. package/dist/esm/types/ui/SendingMessage/index.d.ts +4 -0
  70. package/dist/esm/types/ui/SystemMessage/SystemMessageBox.d.ts +6 -0
  71. package/dist/esm/types/ui/SystemMessage/SystemMessageRow.d.ts +9 -0
  72. package/dist/esm/types/ui/SystemMessage/index.d.ts +2 -0
  73. package/dist/esm/types/{util → ui}/customize.d.ts +2 -3
  74. package/dist/esm/types/ui/index.d.ts +6 -6
  75. package/dist/esm/types/ui/localizer.d.ts +5 -0
  76. package/dist/esm/types/util/index.d.ts +0 -1
  77. package/dist/index.d.ts +355 -144
  78. package/package.json +3 -1
  79. package/src/core/action.tsx +319 -233
  80. package/src/core/client.ts +6 -0
  81. package/src/core/index.ts +11 -8
  82. package/src/core/models.tsx +11 -4
  83. package/src/core/reducer.tsx +2 -1
  84. package/src/core/state.ts +68 -14
  85. package/src/core/useAddChatMutation.tsx +22 -0
  86. package/src/core/useAddMemberMutation.tsx +25 -0
  87. package/src/core/useFetchNextMutation.tsx +28 -0
  88. package/src/core/useGetAccountsQuery.tsx +33 -0
  89. package/src/core/useGetChatListQuery.tsx +33 -0
  90. package/src/core/useGetChatQuery.tsx +34 -0
  91. package/src/core/useGetMessagesQuery.tsx +35 -0
  92. package/src/core/useReadMonitor.tsx +8 -7
  93. package/src/core/useRemoveMemberMutation.tsx +23 -0
  94. package/src/core/useSendMutation.tsx +24 -0
  95. package/src/core/useSignalRMonitor.tsx +19 -5
  96. package/src/core/useUpdateChatNameMutation.tsx +23 -0
  97. package/src/{ui/styles → styles}/aside.scss +1 -1
  98. package/src/styles/chat.scss +222 -0
  99. package/src/styles/index.scss +79 -0
  100. package/src/styles/settings.scss +5 -0
  101. package/src/ui/AddChatButton.tsx +4 -8
  102. package/src/ui/Avatar.tsx +1 -1
  103. package/src/ui/ChatList/ChatList.tsx +42 -0
  104. package/src/ui/ChatList/ChatListItemBox.tsx +22 -0
  105. package/src/ui/ChatList/ChatListItemLastMessage.tsx +13 -0
  106. package/src/ui/ChatList/ChatListItemLastMessageAuthor.tsx +20 -0
  107. package/src/ui/ChatList/ChatListItemLastMessageContent.tsx +21 -0
  108. package/src/ui/ChatList/ChatListItemName.tsx +13 -0
  109. package/src/ui/ChatList/ChatListItemUnreadCount.tsx +12 -0
  110. package/src/ui/ChatList/index.ts +7 -0
  111. package/src/ui/ChatName.tsx +3 -8
  112. package/src/ui/ChatPanel/ChatBody.tsx +44 -0
  113. package/src/ui/ChatPanel/ChatHeader.tsx +33 -0
  114. package/src/ui/{ChatHeaderMembers.tsx → ChatPanel/ChatHeaderMembers.tsx} +5 -9
  115. package/src/ui/ChatPanel/ChatHeaderName.tsx +67 -0
  116. package/src/ui/ChatPanel/ChatMembersButton.tsx +21 -0
  117. package/src/ui/ChatPanel/ChatMembersPanel.tsx +117 -0
  118. package/src/ui/ChatPanel/ChatPanel.tsx +27 -0
  119. package/src/ui/ChatPanel/index.ts +6 -0
  120. package/src/ui/Chatify.tsx +79 -35
  121. package/src/ui/CreateChatPanel/CreateChatForm.tsx +36 -0
  122. package/src/ui/CreateChatPanel/CreateChatMemberInput.tsx +66 -0
  123. package/src/ui/CreateChatPanel/CreateChatNameInput.tsx +25 -0
  124. package/src/ui/CreateChatPanel/CreateChatPanel.tsx +33 -0
  125. package/src/ui/CreateChatPanel/index.ts +4 -0
  126. package/src/ui/Icon.tsx +18 -6
  127. package/src/ui/InputBox/InputBox.tsx +38 -0
  128. package/src/ui/InputBox/InputFilesBox.tsx +9 -0
  129. package/src/ui/InputBox/InputSubmitButtonBox.tsx +17 -0
  130. package/src/ui/InputBox/InputTextBox.tsx +50 -0
  131. package/src/ui/InputBox/index.ts +4 -0
  132. package/src/ui/Layout/Aside.tsx +10 -0
  133. package/src/ui/Layout/Body.tsx +10 -0
  134. package/src/ui/Layout/Footer.tsx +3 -0
  135. package/src/ui/Layout/Header.tsx +10 -0
  136. package/src/ui/Layout/Main.tsx +15 -0
  137. package/src/ui/Layout/index.ts +5 -0
  138. package/src/ui/Message/MessageAuthor.tsx +13 -0
  139. package/src/ui/Message/MessageBox.tsx +20 -0
  140. package/src/ui/Message/MessageContent.tsx +13 -0
  141. package/src/ui/Message/MessageInfoBox.tsx +25 -0
  142. package/src/ui/Message/MessageRow.tsx +24 -0
  143. package/src/ui/Message/MessageText.tsx +7 -0
  144. package/src/ui/Message/index.ts +6 -0
  145. package/src/ui/MessageReadObserver.tsx +45 -0
  146. package/src/ui/{LoadMore.tsx → Next.tsx} +16 -8
  147. package/src/ui/SendingMessage/SendingMessageBox.tsx +16 -0
  148. package/src/ui/SendingMessage/SendingMessageContent.tsx +13 -0
  149. package/src/ui/SendingMessage/SendingMessageInfoBox.tsx +13 -0
  150. package/src/ui/SendingMessage/SendingMessageText.tsx +7 -0
  151. package/src/ui/SendingMessage/index.ts +4 -0
  152. package/src/ui/SystemMessage/SystemMessageBox.tsx +20 -0
  153. package/src/ui/SystemMessage/SystemMessageRow.tsx +43 -0
  154. package/src/ui/SystemMessage/index.ts +2 -0
  155. package/src/{util → ui}/customize.tsx +5 -5
  156. package/src/ui/index.ts +6 -6
  157. package/src/ui/localizer.tsx +12 -0
  158. package/src/util/index.ts +0 -1
  159. package/dist/cjs/index.js +0 -2
  160. package/dist/cjs/index.js.map +0 -1
  161. package/dist/cjs/types/ChatifyContext.d.ts +0 -11
  162. package/dist/cjs/types/core/action.d.ts +0 -76
  163. package/dist/cjs/types/core/client.d.ts +0 -35
  164. package/dist/cjs/types/core/index.d.ts +0 -14
  165. package/dist/cjs/types/core/models.d.ts +0 -64
  166. package/dist/cjs/types/core/reducer.d.ts +0 -11
  167. package/dist/cjs/types/core/state.d.ts +0 -25
  168. package/dist/cjs/types/core/useAccounts.d.ts +0 -1
  169. package/dist/cjs/types/core/useAddChat.d.ts +0 -2
  170. package/dist/cjs/types/core/useAddMember.d.ts +0 -2
  171. package/dist/cjs/types/core/useAddMessage.d.ts +0 -5
  172. package/dist/cjs/types/core/useChatList.d.ts +0 -1
  173. package/dist/cjs/types/core/useLoadMore.d.ts +0 -3
  174. package/dist/cjs/types/core/useMessages.d.ts +0 -15
  175. package/dist/cjs/types/core/useMutation.d.ts +0 -12
  176. package/dist/cjs/types/core/useQuery.d.ts +0 -7
  177. package/dist/cjs/types/core/useReadMonitor.d.ts +0 -1
  178. package/dist/cjs/types/core/useRemoveMember.d.ts +0 -2
  179. package/dist/cjs/types/core/useSignalRMonitor.d.ts +0 -2
  180. package/dist/cjs/types/index.d.ts +0 -3
  181. package/dist/cjs/types/ui/AddChat.d.ts +0 -1
  182. package/dist/cjs/types/ui/AddChatButton.d.ts +0 -2
  183. package/dist/cjs/types/ui/Aside.d.ts +0 -1
  184. package/dist/cjs/types/ui/Avatar.d.ts +0 -6
  185. package/dist/cjs/types/ui/Chat.d.ts +0 -4
  186. package/dist/cjs/types/ui/ChatBody.d.ts +0 -4
  187. package/dist/cjs/types/ui/ChatHeader.d.ts +0 -4
  188. package/dist/cjs/types/ui/ChatHeaderMembers.d.ts +0 -5
  189. package/dist/cjs/types/ui/ChatHeaderSettingsButton.d.ts +0 -5
  190. package/dist/cjs/types/ui/ChatListItem.d.ts +0 -11
  191. package/dist/cjs/types/ui/ChatName.d.ts +0 -5
  192. package/dist/cjs/types/ui/ChatSettings.d.ts +0 -1
  193. package/dist/cjs/types/ui/Chatify.d.ts +0 -47
  194. package/dist/cjs/types/ui/Footer.d.ts +0 -2
  195. package/dist/cjs/types/ui/Header.d.ts +0 -2
  196. package/dist/cjs/types/ui/Icon.d.ts +0 -7
  197. package/dist/cjs/types/ui/InputForm.d.ts +0 -1
  198. package/dist/cjs/types/ui/LoadMore.d.ts +0 -4
  199. package/dist/cjs/types/ui/Main.d.ts +0 -1
  200. package/dist/cjs/types/ui/Message.d.ts +0 -18
  201. package/dist/cjs/types/ui/MessageSkeleton.d.ts +0 -4
  202. package/dist/cjs/types/ui/SendingMessage.d.ts +0 -10
  203. package/dist/cjs/types/ui/SystemMessage.d.ts +0 -8
  204. package/dist/cjs/types/ui/index.d.ts +0 -11
  205. package/dist/cjs/types/ui/localizer.d.ts +0 -32
  206. package/dist/cjs/types/util/customize.d.ts +0 -12
  207. package/dist/cjs/types/util/index.d.ts +0 -3
  208. package/dist/cjs/types/util/uniqBy.d.ts +0 -1
  209. package/dist/cjs/types/util/uniqId.d.ts +0 -1
  210. package/dist/esm/types/core/useAccounts.d.ts +0 -1
  211. package/dist/esm/types/core/useAddChat.d.ts +0 -2
  212. package/dist/esm/types/core/useAddMember.d.ts +0 -2
  213. package/dist/esm/types/core/useAddMessage.d.ts +0 -5
  214. package/dist/esm/types/core/useChat.d.ts +0 -3
  215. package/dist/esm/types/core/useChatList.d.ts +0 -1
  216. package/dist/esm/types/core/useLoadMore.d.ts +0 -3
  217. package/dist/esm/types/core/useMessages.d.ts +0 -15
  218. package/dist/esm/types/core/useMutation.d.ts +0 -12
  219. package/dist/esm/types/core/useQuery.d.ts +0 -7
  220. package/dist/esm/types/core/useRemoveMember.d.ts +0 -2
  221. package/dist/esm/types/ui/AddChat.d.ts +0 -1
  222. package/dist/esm/types/ui/Aside.d.ts +0 -1
  223. package/dist/esm/types/ui/Chat.d.ts +0 -4
  224. package/dist/esm/types/ui/ChatBody.d.ts +0 -4
  225. package/dist/esm/types/ui/ChatHeader.d.ts +0 -4
  226. package/dist/esm/types/ui/ChatHeaderMembers.d.ts +0 -5
  227. package/dist/esm/types/ui/ChatHeaderSettingsButton.d.ts +0 -5
  228. package/dist/esm/types/ui/ChatListItem.d.ts +0 -11
  229. package/dist/esm/types/ui/ChatSettings.d.ts +0 -1
  230. package/dist/esm/types/ui/Footer.d.ts +0 -2
  231. package/dist/esm/types/ui/Header.d.ts +0 -2
  232. package/dist/esm/types/ui/InputForm.d.ts +0 -1
  233. package/dist/esm/types/ui/LoadMore.d.ts +0 -4
  234. package/dist/esm/types/ui/Main.d.ts +0 -1
  235. package/dist/esm/types/ui/Message.d.ts +0 -18
  236. package/dist/esm/types/ui/SendingMessage.d.ts +0 -10
  237. package/dist/esm/types/ui/SystemMessage.d.ts +0 -8
  238. package/src/core/useAccounts.tsx +0 -11
  239. package/src/core/useAddChat.tsx +0 -12
  240. package/src/core/useAddMember.tsx +0 -12
  241. package/src/core/useAddMessage.tsx +0 -40
  242. package/src/core/useChat.tsx +0 -12
  243. package/src/core/useChatList.tsx +0 -10
  244. package/src/core/useLoadMore.tsx +0 -42
  245. package/src/core/useMessages.tsx +0 -23
  246. package/src/core/useMutation.tsx +0 -48
  247. package/src/core/useQuery.tsx +0 -45
  248. package/src/core/useRemoveMember.tsx +0 -12
  249. package/src/ui/AddChat.tsx +0 -55
  250. package/src/ui/Aside.tsx +0 -41
  251. package/src/ui/Chat.tsx +0 -26
  252. package/src/ui/ChatBody.tsx +0 -43
  253. package/src/ui/ChatHeader.tsx +0 -33
  254. package/src/ui/ChatHeaderSettingsButton.tsx +0 -26
  255. package/src/ui/ChatListItem.tsx +0 -101
  256. package/src/ui/ChatSettings.tsx +0 -59
  257. package/src/ui/Footer.tsx +0 -7
  258. package/src/ui/Header.tsx +0 -14
  259. package/src/ui/InputForm.tsx +0 -51
  260. package/src/ui/Main.tsx +0 -16
  261. package/src/ui/Message.tsx +0 -118
  262. package/src/ui/SendingMessage.tsx +0 -50
  263. package/src/ui/SystemMessage.tsx +0 -30
  264. package/src/ui/styles/index.scss +0 -248
  265. /package/src/{ui/styles → styles}/keyframes.scss +0 -0
  266. /package/src/{ui/styles → styles}/mixins.scss +0 -0
  267. /package/src/{ui/styles → styles}/variables.scss +0 -0
package/dist/css/chatify.css CHANGED
@@ -17,22 +17,22 @@
17
17
  display: flex;
18
18
  flex-flow: column nowrap;
19
19
  }
20
- .wxchtf-aside .wxchtf-chats.ant-menu {
20
+ .wxchtf-aside .wxchtf-chat-list.ant-menu {
21
21
  flex: 1 1 auto;
22
22
  height: 100px;
23
23
  overflow-y: auto;
24
24
  }
25
- .wxchtf-aside .wxchtf-chats.ant-menu::-webkit-scrollbar {
25
+ .wxchtf-aside .wxchtf-chat-list.ant-menu::-webkit-scrollbar {
26
26
  width: 8px;
27
27
  height: 8px;
28
28
  }
29
- .wxchtf-aside .wxchtf-chats.ant-menu::-webkit-scrollbar-track {
29
+ .wxchtf-aside .wxchtf-chat-list.ant-menu::-webkit-scrollbar-track {
30
30
  background-color: #f1f1f1;
31
31
  }
32
- .wxchtf-aside .wxchtf-chats.ant-menu::-webkit-scrollbar-thumb {
32
+ .wxchtf-aside .wxchtf-chat-list.ant-menu::-webkit-scrollbar-thumb {
33
33
  background-color: #dfdfdf;
34
34
  }
35
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item {
35
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item {
36
36
  padding: 0;
37
37
  height: unset;
38
38
  margin: 0;
@@ -41,24 +41,24 @@
41
41
  line-height: 1.5;
42
42
  border-top: 1px solid #ddd;
43
43
  }
44
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item:first-child {
44
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item:first-child {
45
45
  border-top: none;
46
46
  }
47
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item.ant-menu-item-selected .wxchtf-chat-name {
47
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item.ant-menu-item-selected .wxchtf-chat-name {
48
48
  font-weight: 600;
49
49
  }
50
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item .wxchtf-chat {
50
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat {
51
51
  padding: 0.5rem 1rem;
52
52
  position: relative;
53
53
  }
54
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item .wxchtf-chat.--unread .wxchtf-chat-last {
54
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat.--unread .wxchtf-chat-last {
55
55
  font-weight: bold;
56
56
  }
57
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-name {
57
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-name {
58
58
  font-weight: bold;
59
59
  display: inline-block;
60
60
  }
61
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-unread-count {
61
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-unread-count {
62
62
  display: inline-block;
63
63
  padding: 0.2rem;
64
64
  min-width: 1rem;
@@ -70,7 +70,7 @@
70
70
  font-size: 0.7rem;
71
71
  background: #ffa726;
72
72
  }
73
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-last {
73
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-last {
74
74
  font-style: italic;
75
75
  opacity: 0.75;
76
76
  overflow: hidden;
@@ -78,11 +78,11 @@
78
78
  white-space: nowrap;
79
79
  line-height: 25px;
80
80
  }
81
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-last .wxchtf-chat-last-author {
81
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-last .wxchtf-chat-last-author {
82
82
  display: inline-block;
83
83
  margin-right: 0.5rem;
84
84
  }
85
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-last .wxchtf-chat-last-author .ant-avatar {
85
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-last .wxchtf-chat-last-author .ant-avatar {
86
86
  display: inline-block;
87
87
  border: none;
88
88
  margin-right: 5px;
@@ -90,53 +90,39 @@
90
90
  height: 25px;
91
91
  line-height: 23px;
92
92
  }
93
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-last .wxchtf-chat-last-author::after {
93
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-last .wxchtf-chat-last-author::after {
94
94
  content: ":";
95
95
  }
96
- .wxchtf-aside .wxchtf-chats.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-last .wxchtf-chat-last-message {
96
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-last .wxchtf-chat-last-message {
97
97
  display: inline;
98
98
  }
99
99
 
100
- .wxchtf-chatify {
101
- border: 1px solid #ddd;
102
- display: flex;
103
- flex-flow: column nowrap;
104
- background: white;
105
- border-radius: 4px;
106
- }
107
- .wxchtf-chatify .wxchtf-header {
108
- min-height: 2rem;
109
- border-bottom: 1px solid #ddd;
110
- }
111
- .wxchtf-chatify .wxchtf-body {
112
- flex: 1 0;
113
- display: flex;
114
- flex-flow: row nowrap;
115
- }
116
- .wxchtf-chatify .wxchtf-footer {
117
- min-height: 2rem;
118
- border-top: 1px solid #ddd;
100
+ .wxchtf-chatify .wxchtf-chat-settings {
101
+ padding-inline: 1rem;
119
102
  }
120
103
 
121
- .wxchtf-main {
104
+ .wxchtf-chatify .wxchtf-chat-panel {
122
105
  flex: auto;
123
106
  display: flex;
124
- flex-flow: column nowrap;
107
+ flex-flow: row nowrap;
125
108
  }
126
- .wxchtf-main .wxchtf-chat {
127
- flex: auto;
109
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main {
110
+ flex: 1;
128
111
  display: flex;
129
112
  flex-flow: column nowrap;
130
113
  }
131
- .wxchtf-main .wxchtf-chat .wxchtf-chat-header {
114
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-header {
132
115
  border-bottom: 1px solid #ddd;
133
116
  padding: 0.5rem 1rem;
134
117
  }
135
- .wxchtf-main .wxchtf-chat .wxchtf-chat-header .wxchtf-chat-name {
118
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-header .wxchtf-chat-name {
136
119
  font-weight: 600;
137
120
  flex: none;
138
121
  }
139
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body {
122
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-header .wxchtf-chat-name.--editable {
123
+ cursor: pointer;
124
+ }
125
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body {
140
126
  flex: 1 1 auto;
141
127
  height: 100px;
142
128
  overflow-y: auto;
@@ -145,62 +131,62 @@
145
131
  display: flex;
146
132
  flex-flow: column-reverse nowrap;
147
133
  }
148
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body::-webkit-scrollbar {
134
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body::-webkit-scrollbar {
149
135
  width: 8px;
150
136
  height: 8px;
151
137
  }
152
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body::-webkit-scrollbar-track {
138
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body::-webkit-scrollbar-track {
153
139
  background-color: #f1f1f1;
154
140
  }
155
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body::-webkit-scrollbar-thumb {
141
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body::-webkit-scrollbar-thumb {
156
142
  background-color: #dfdfdf;
157
143
  }
158
144
  @media only screen and (min-width: 1120px) {
159
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body {
145
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body {
160
146
  padding-right: 30%;
161
147
  }
162
148
  }
163
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message,
164
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message {
149
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message,
150
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message {
165
151
  display: flex;
166
152
  flex-flow: row nowrap;
167
153
  width: 100%;
168
154
  align-items: flex-end;
169
155
  }
170
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message.--my,
171
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message.--my {
156
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message.--my,
157
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message.--my {
172
158
  direction: rtl;
173
159
  justify-content: flex-start;
174
160
  }
175
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message.--my .wxchtf-message-author,
176
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message.--my .wxchtf-message-author {
161
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message.--my .wxchtf-message-author,
162
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message.--my .wxchtf-message-author {
177
163
  margin-right: 0;
178
164
  margin-left: 15px;
179
165
  }
180
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message.--my .wxchtf-message-content,
181
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message.--my .wxchtf-sending-message-content,
182
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message.--my .wxchtf-message-content,
183
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message.--my .wxchtf-sending-message-content {
166
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message.--my .wxchtf-message-content,
167
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message.--my .wxchtf-sending-message-content,
168
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message.--my .wxchtf-message-content,
169
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message.--my .wxchtf-sending-message-content {
184
170
  direction: ltr;
185
171
  border-bottom-left-radius: 10px;
186
172
  border-bottom-right-radius: 0;
187
173
  background-color: #b9f6ca;
188
174
  }
189
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-author,
190
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-author {
175
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-author,
176
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-author {
191
177
  margin-right: 15px;
192
178
  }
193
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-author .ant-avatar,
194
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-author .ant-avatar {
179
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-author .ant-avatar,
180
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-author .ant-avatar {
195
181
  width: 40px;
196
182
  height: 40px;
197
183
  line-height: 38px;
198
184
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
199
185
  }
200
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content,
201
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content,
202
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content,
203
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content {
186
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content,
187
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content,
188
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content,
189
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content {
204
190
  min-width: 300px;
205
191
  max-width: 70%;
206
192
  border-radius: 10px;
@@ -213,168 +199,224 @@
213
199
  white-space: pre-wrap;
214
200
  overflow-wrap: break-word;
215
201
  }
216
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box,
217
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box,
218
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box,
219
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box,
220
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box,
221
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box,
222
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box,
223
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box {
202
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box,
203
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box,
204
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box,
205
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box,
206
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box,
207
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box,
208
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box,
209
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box {
224
210
  text-align: right;
225
211
  }
226
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-sent-at,
227
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
228
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
229
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
230
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
231
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
232
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-sent-at,
233
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
234
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
235
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
236
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
237
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
238
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-sent-at,
239
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
240
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
241
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
242
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
243
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
244
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-sent-at,
245
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
246
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
247
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
248
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
249
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box {
212
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-sent-at,
213
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
214
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
215
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
216
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
217
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
218
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-sent-at,
219
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
220
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
221
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
222
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
223
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
224
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-sent-at,
225
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
226
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
227
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
228
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
229
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
230
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-sent-at,
231
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
232
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
233
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
234
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
235
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box {
250
236
  display: inline-block;
251
237
  font-style: italic;
252
238
  font-size: 0.75em;
253
239
  margin-top: 0.5rem;
254
240
  opacity: 0.5;
255
241
  }
256
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
257
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
258
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
259
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
260
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
261
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
262
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
263
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
264
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
265
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
266
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
267
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
268
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
269
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
270
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
271
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box {
242
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
243
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
244
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
245
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
246
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
247
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
248
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
249
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
250
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
251
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
252
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
253
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
254
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-message-read-box,
255
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
256
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-message-read-box,
257
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box {
272
258
  margin-left: 5px;
273
259
  }
274
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-system-message {
260
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message {
275
261
  font-style: italic;
276
262
  position: relative;
277
263
  text-align: center;
278
264
  }
279
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-system-message .wxchtf-text,
280
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-system-message .wxchtf-timestamp {
265
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message .wxchtf-text,
266
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message .wxchtf-timestamp {
281
267
  display: inline-block;
282
268
  opacity: 0.9;
283
269
  font-size: 0.85em;
284
270
  }
285
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-system-message .wxchtf-timestamp {
271
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message .wxchtf-timestamp {
286
272
  margin-left: 1rem;
287
273
  }
288
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message,
289
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message,
290
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-system-message,
291
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message-skeleton {
274
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message,
275
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message,
276
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message,
277
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton {
292
278
  margin-bottom: 2rem;
293
279
  }
294
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message:first-child,
295
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-sending-message:first-child,
296
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-system-message:first-child,
297
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message-skeleton:first-child {
280
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message:first-child,
281
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message:first-child,
282
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message:first-child,
283
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton:first-child {
298
284
  margin-bottom: 0;
299
285
  }
300
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message-skeleton {
286
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton {
301
287
  display: flex;
302
288
  flex-flow: row nowrap;
303
289
  align-items: flex-end;
304
290
  }
305
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message-skeleton .wxchtf-avatar {
291
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton .wxchtf-avatar {
306
292
  margin-right: 15px;
307
293
  }
308
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message-skeleton .wxchtf-avatar .ant-skeleton-avatar {
294
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton .wxchtf-avatar .ant-skeleton-avatar {
309
295
  width: 40px;
310
296
  height: 40px;
311
297
  line-height: 40px;
312
298
  }
313
- .wxchtf-main .wxchtf-chat .wxchtf-chat-body .wxchtf-message-skeleton .wxchtf-content {
299
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton .wxchtf-content {
314
300
  width: 300px;
315
301
  height: 100px;
316
302
  border-radius: 10px;
317
303
  border-bottom-left-radius: 0;
318
304
  }
319
- .wxchtf-main .wxchtf-input-form {
305
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form {
320
306
  flex: none;
321
307
  max-height: 300px;
322
308
  display: flex;
323
309
  flex-flow: column nowrap;
324
310
  }
325
- .wxchtf-main .wxchtf-input-form .wxchtf-input-box {
311
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form .wxchtf-input-box {
326
312
  flex: none;
327
313
  display: flex;
328
314
  flex-flow: row nowrap;
329
315
  padding: 1rem 0;
330
316
  border-top: 1px solid #ddd;
331
317
  }
332
- .wxchtf-main .wxchtf-input-form .wxchtf-input-box .wxchtf-add-files-box {
318
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form .wxchtf-input-box .wxchtf-add-files-box {
333
319
  flex: none;
334
320
  display: flex;
335
321
  padding: 0 1rem;
336
322
  align-items: flex-end;
337
323
  }
338
- .wxchtf-main .wxchtf-input-form .wxchtf-input-box .wxchtf-add-files-box .ant-btn.ant-btn-icon-only .anticon {
324
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form .wxchtf-input-box .wxchtf-add-files-box .ant-btn.ant-btn-icon-only .anticon {
339
325
  font-size: 1.5rem;
340
326
  }
341
- .wxchtf-main .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box {
327
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box {
342
328
  flex: auto;
343
329
  }
344
- .wxchtf-main .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box textarea {
330
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box textarea {
345
331
  resize: none;
346
332
  border: none;
347
333
  outline: none;
348
334
  box-shadow: none;
349
335
  }
350
- .wxchtf-main .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box textarea::-webkit-scrollbar {
336
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box textarea::-webkit-scrollbar {
351
337
  width: 8px;
352
338
  height: 8px;
353
339
  }
354
- .wxchtf-main .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box textarea::-webkit-scrollbar-track {
340
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box textarea::-webkit-scrollbar-track {
355
341
  background-color: #f1f1f1;
356
342
  }
357
- .wxchtf-main .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box textarea::-webkit-scrollbar-thumb {
343
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box textarea::-webkit-scrollbar-thumb {
358
344
  background-color: #dfdfdf;
359
345
  }
360
- .wxchtf-main .wxchtf-input-form .wxchtf-input-box .wxchtf-submit-btn-box {
346
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form .wxchtf-input-box .wxchtf-submit-btn-box {
361
347
  flex: none;
362
348
  display: flex;
363
349
  padding: 0 1rem;
364
350
  align-items: flex-end;
365
351
  }
366
- .wxchtf-main .wxchtf-input-form .wxchtf-input-box .wxchtf-submit-btn-box .ant-btn.ant-btn-icon-only .anticon {
352
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-input-form .wxchtf-input-box .wxchtf-submit-btn-box .ant-btn.ant-btn-icon-only .anticon {
367
353
  font-size: 1.5rem;
368
354
  }
369
- .wxchtf-main .wxchtf-add-chat {
355
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-members-panel {
356
+ min-width: 300px;
357
+ border-left: 1px solid #ddd;
358
+ }
359
+ .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-members-panel .wxchtf-chat-members-list .wxchtf-chat-members-list-item {
360
+ padding-inline: 1rem;
361
+ }
362
+
363
+ .wxchtf-chatify {
364
+ border: 1px solid #ddd;
365
+ display: flex;
366
+ flex-flow: column nowrap;
367
+ background: white;
368
+ border-radius: 4px;
369
+ }
370
+ .wxchtf-chatify .wxchtf-header {
371
+ min-height: 2rem;
372
+ border-bottom: 1px solid #ddd;
373
+ }
374
+ .wxchtf-chatify .wxchtf-body {
375
+ flex: 1 0;
376
+ display: flex;
377
+ flex-flow: row nowrap;
378
+ }
379
+ .wxchtf-chatify .wxchtf-footer {
380
+ min-height: 2rem;
381
+ border-top: 1px solid #ddd;
382
+ }
383
+
384
+ .wxchtf-main {
385
+ flex: auto;
386
+ display: flex;
387
+ flex-flow: column nowrap;
388
+ }
389
+ .wxchtf-main .wxchtf-create-chat {
370
390
  display: flex;
371
391
  flex-flow: column nowrap;
372
392
  justify-content: center;
373
393
  align-items: center;
374
394
  height: 100%;
375
395
  }
376
- .wxchtf-main .wxchtf-add-chat form {
396
+ .wxchtf-main .wxchtf-create-chat form {
377
397
  padding: 2rem;
378
398
  max-width: 700px;
379
399
  width: 100%;
400
+ }
401
+ .wxchtf-main .wxchtf-create-chat form .wxchtf-create-chat-member-input-list {
402
+ max-height: 15rem;
403
+ overflow-y: auto;
404
+ }
405
+ .wxchtf-main .wxchtf-create-chat form .wxchtf-create-chat-member-input-list .ant-list-item {
406
+ padding-inline: 0.5rem;
407
+ }
408
+ .wxchtf-main .wxchtf-create-chat form .wxchtf-create-chat-member-input-list .ant-list-item.--selected {
409
+ background-color: #e6f4ff;
410
+ }
411
+ .wxchtf-main .wxchtf-create-chat form .wxchtf-create-chat-member-input-list .ant-list-item .ant-checkbox-wrapper {
412
+ width: 100%;
413
+ }
414
+ .wxchtf-main .wxchtf-create-chat form .wxchtf-create-chat-member-input-list .ant-list-item .ant-checkbox-wrapper > span:last-child {
415
+ flex: 1;
416
+ }
417
+ .wxchtf-main .wxchtf-create-chat form .wxchtf-create-chat-member-input-list .ant-list-item .ant-checkbox-wrapper > span:last-child .ant-list-item-meta {
418
+ align-items: center;
419
+ }
420
+ .wxchtf-main .wxchtf-create-chat form .wxchtf-create-chat-member-input-list .ant-list-item .ant-checkbox-wrapper > span:last-child .ant-list-item-meta .ant-list-item-meta-content h4 {
421
+ margin-bottom: 0;
380
422
  }