@webinex/chatify 1.0.3-rc3 → 2.0.0-alpha3

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 (315) hide show
  1. package/dist/css/chatify.css +253 -118
  2. package/dist/esm/index.js +10 -1
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/esm/types/core/api/api.d.ts +12696 -0
  5. package/dist/esm/types/core/api/baseApi.d.ts +15 -0
  6. package/dist/esm/types/core/api/index.d.ts +1 -0
  7. package/dist/esm/types/core/client.d.ts +57 -9
  8. package/dist/esm/types/core/constants.d.ts +1 -0
  9. package/dist/esm/types/core/debounce.d.ts +27 -0
  10. package/dist/esm/types/core/index.d.ts +3 -16
  11. package/dist/esm/types/core/types.d.ts +102 -0
  12. package/dist/esm/types/index.d.ts +0 -1
  13. package/dist/esm/types/ui/Chat/ChatContext.d.ts +10 -0
  14. package/dist/esm/types/ui/Chat/ChatEditableHeaderName.d.ts +2 -0
  15. package/dist/esm/types/ui/Chat/ChatHeaderActions.d.ts +2 -0
  16. package/dist/esm/types/ui/Chat/ChatPanel.d.ts +13 -0
  17. package/dist/esm/types/ui/Chat/ChatView.d.ts +17 -0
  18. package/dist/esm/types/ui/Chat/Members/ChatMembersButton.d.ts +2 -0
  19. package/dist/esm/types/ui/Chat/Members/ChatMembersPanel.d.ts +2 -0
  20. package/dist/esm/types/ui/Chat/Members/ChatMembersPreview.d.ts +2 -0
  21. package/dist/esm/types/ui/Chat/Members/index.d.ts +11 -0
  22. package/dist/esm/types/ui/Chat/index.d.ts +6 -0
  23. package/dist/esm/types/ui/ChatGroup/ChatGroupContext.d.ts +12 -0
  24. package/dist/esm/types/ui/ChatGroup/ChatGroupPanel.d.ts +15 -0
  25. package/dist/esm/types/ui/ChatGroup/Create/CreateChatButton.d.ts +2 -0
  26. package/dist/esm/types/ui/{CreateChatPanel → ChatGroup/Create}/CreateChatForm.d.ts +1 -1
  27. package/dist/esm/types/ui/ChatGroup/Create/CreateChatMemberInput.d.ts +5 -0
  28. package/dist/esm/types/ui/ChatGroup/Create/CreateChatNameInput.d.ts +5 -0
  29. package/dist/esm/types/ui/ChatGroup/Create/CreateChatPanel.d.ts +2 -0
  30. package/dist/esm/types/ui/ChatGroup/Create/index.d.ts +17 -0
  31. package/dist/esm/types/ui/ChatGroup/Layout/ChatGroupAside.d.ts +2 -0
  32. package/dist/esm/types/ui/ChatGroup/Layout/ChatGroupBody.d.ts +2 -0
  33. package/dist/esm/types/ui/ChatGroup/Layout/ChatGroupFooter.d.ts +2 -0
  34. package/dist/esm/types/ui/ChatGroup/Layout/ChatGroupHeader.d.ts +2 -0
  35. package/dist/esm/types/ui/ChatGroup/Layout/ChatGroupMain.d.ts +2 -0
  36. package/dist/esm/types/ui/ChatGroup/Layout/index.d.ts +17 -0
  37. package/dist/esm/types/ui/ChatGroup/List/ChatList.d.ts +2 -0
  38. package/dist/esm/types/ui/ChatGroup/List/ChatListItemAvatar.d.ts +3 -0
  39. package/dist/esm/types/ui/ChatGroup/List/ChatListItemBox.d.ts +6 -0
  40. package/dist/esm/types/ui/ChatGroup/List/ChatListItemLastMessage.d.ts +3 -0
  41. package/dist/esm/types/ui/ChatGroup/List/ChatListItemLastMessageAuthor.d.ts +3 -0
  42. package/dist/esm/types/ui/{ChatList → ChatGroup/List}/ChatListItemLastMessageContent.d.ts +1 -1
  43. package/dist/esm/types/ui/ChatGroup/List/ChatListItemLastMessageSentAt.d.ts +3 -0
  44. package/dist/esm/types/ui/ChatGroup/List/ChatListItemName.d.ts +3 -0
  45. package/dist/esm/types/ui/ChatGroup/List/ChatListItemUnreadCount.d.ts +3 -0
  46. package/dist/esm/types/ui/ChatGroup/List/index.d.ts +29 -0
  47. package/dist/esm/types/ui/ChatGroup/index.d.ts +5 -0
  48. package/dist/esm/types/ui/Chatify.d.ts +8 -72
  49. package/dist/esm/types/ui/Conversation/Conversation.d.ts +23 -0
  50. package/dist/esm/types/ui/Conversation/ConversationActions.d.ts +2 -0
  51. package/dist/esm/types/ui/Conversation/ConversationBody.d.ts +2 -0
  52. package/dist/esm/types/ui/Conversation/ConversationContext.d.ts +22 -0
  53. package/dist/esm/types/ui/Conversation/ConversationHeader.d.ts +2 -0
  54. package/dist/esm/types/ui/Conversation/ConversationName.d.ts +2 -0
  55. package/dist/esm/types/ui/Conversation/InputBox/InputBox.d.ts +2 -0
  56. package/dist/esm/types/ui/Conversation/InputBox/InputBoxFile.d.ts +8 -0
  57. package/dist/esm/types/ui/Conversation/InputBox/InputBoxFileList.d.ts +8 -0
  58. package/dist/esm/types/ui/Conversation/InputBox/InputFilesBox.d.ts +12 -0
  59. package/dist/esm/types/ui/Conversation/InputBox/InputSubmitButtonBox.d.ts +7 -0
  60. package/dist/esm/types/ui/Conversation/InputBox/InputTextBox.d.ts +9 -0
  61. package/dist/esm/types/ui/Conversation/InputBox/index.d.ts +21 -0
  62. package/dist/esm/types/ui/Conversation/Message/MessageAuthor.d.ts +3 -0
  63. package/dist/esm/types/ui/Conversation/Message/MessageBox.d.ts +6 -0
  64. package/dist/esm/types/ui/Conversation/Message/MessageContent.d.ts +3 -0
  65. package/dist/esm/types/ui/Conversation/Message/MessageFile.d.ts +6 -0
  66. package/dist/esm/types/ui/Conversation/Message/MessageFileList.d.ts +3 -0
  67. package/dist/esm/types/ui/Conversation/Message/MessageInfoBox.d.ts +3 -0
  68. package/dist/esm/types/ui/{Message → Conversation/Message}/MessageRow.d.ts +1 -1
  69. package/dist/esm/types/ui/Conversation/Message/MessageText.d.ts +3 -0
  70. package/dist/esm/types/ui/Conversation/Message/index.d.ts +26 -0
  71. package/dist/esm/types/ui/Conversation/NextObserver/NextMessagesObserver.d.ts +5 -0
  72. package/dist/esm/types/ui/Conversation/NextObserver/index.d.ts +1 -0
  73. package/dist/esm/types/ui/Conversation/ReadObserver/MessageReadObserver.d.ts +6 -0
  74. package/dist/esm/types/ui/Conversation/ReadObserver/index.d.ts +1 -0
  75. package/dist/esm/types/ui/Conversation/SendingMessage/SendingMessageBox.d.ts +7 -0
  76. package/dist/esm/types/ui/Conversation/SendingMessage/SendingMessageContent.d.ts +3 -0
  77. package/dist/esm/types/ui/Conversation/SendingMessage/SendingMessageInfoBox.d.ts +3 -0
  78. package/dist/esm/types/ui/{SendingMessage/SendingMessageInfoBox.d.ts → Conversation/SendingMessage/SendingMessageText.d.ts} +1 -1
  79. package/dist/esm/types/ui/Conversation/SendingMessage/index.d.ts +14 -0
  80. package/dist/esm/types/ui/Conversation/SystemMessage/SystemMessageBox.d.ts +6 -0
  81. package/dist/esm/types/ui/Conversation/SystemMessage/SystemMessageRow.d.ts +9 -0
  82. package/dist/esm/types/ui/Conversation/SystemMessage/index.d.ts +8 -0
  83. package/dist/esm/types/ui/Conversation/index.d.ts +12 -0
  84. package/dist/esm/types/ui/{InputBox/InputFilesBox.d.ts → Thread/ThreadActions.d.ts} +1 -1
  85. package/dist/esm/types/ui/Thread/ThreadContext.d.ts +8 -0
  86. package/dist/esm/types/ui/Thread/ThreadPanel.d.ts +14 -0
  87. package/dist/esm/types/ui/Thread/index.d.ts +3 -0
  88. package/dist/esm/types/ui/color.d.ts +6 -0
  89. package/dist/esm/types/ui/common/Avatar.d.ts +6 -0
  90. package/dist/esm/types/ui/common/Icon.d.ts +22 -0
  91. package/dist/esm/types/ui/common/MessageSkeleton.d.ts +5 -0
  92. package/dist/esm/types/ui/common/index.d.ts +11 -0
  93. package/dist/esm/types/ui/customize.d.ts +5 -7
  94. package/dist/esm/types/ui/index.d.ts +9 -9
  95. package/dist/esm/types/ui/localizer.d.ts +7 -6
  96. package/dist/esm/types/ui/useFormatter.d.ts +3 -0
  97. package/dist/index.d.ts +13150 -425
  98. package/package.json +94 -92
  99. package/src/core/api/api.ts +639 -0
  100. package/src/core/api/baseApi.ts +38 -0
  101. package/src/core/api/index.ts +1 -0
  102. package/src/core/client.ts +280 -143
  103. package/src/core/constants.ts +1 -0
  104. package/src/core/debounce.ts +90 -0
  105. package/src/core/index.ts +4 -17
  106. package/src/core/types.tsx +149 -0
  107. package/src/index.ts +2 -3
  108. package/src/styles/aside.scss +162 -132
  109. package/src/styles/chat.scss +209 -211
  110. package/src/styles/index.scss +159 -108
  111. package/src/styles/input.scss +147 -72
  112. package/src/styles/keyframes.scss +14 -14
  113. package/src/styles/members.scss +13 -0
  114. package/src/styles/mixins.scss +25 -20
  115. package/src/styles/variables.scss +13 -10
  116. package/src/ui/Chat/ChatContext.tsx +30 -0
  117. package/src/ui/{ChatPanel/ChatHeaderName.tsx → Chat/ChatEditableHeaderName.tsx} +63 -69
  118. package/src/ui/Chat/ChatHeaderActions.tsx +19 -0
  119. package/src/ui/Chat/ChatPanel.tsx +30 -0
  120. package/src/ui/Chat/ChatView.tsx +115 -0
  121. package/src/ui/Chat/Members/ChatMembersButton.tsx +9 -0
  122. package/src/ui/{ChatPanel → Chat/Members}/ChatMembersPanel.tsx +112 -121
  123. package/src/ui/Chat/Members/ChatMembersPreview.tsx +25 -0
  124. package/src/ui/Chat/Members/index.ts +13 -0
  125. package/src/ui/Chat/index.ts +6 -0
  126. package/src/ui/ChatGroup/ChatGroupContext.tsx +50 -0
  127. package/src/ui/ChatGroup/ChatGroupPanel.tsx +73 -0
  128. package/src/ui/ChatGroup/Create/CreateChatButton.tsx +15 -0
  129. package/src/ui/{CreateChatPanel → ChatGroup/Create}/CreateChatForm.tsx +36 -36
  130. package/src/ui/{CreateChatPanel → ChatGroup/Create}/CreateChatMemberInput.tsx +65 -66
  131. package/src/ui/{CreateChatPanel → ChatGroup/Create}/CreateChatNameInput.tsx +25 -25
  132. package/src/ui/{CreateChatPanel → ChatGroup/Create}/CreateChatPanel.tsx +45 -49
  133. package/src/ui/ChatGroup/Create/index.ts +19 -0
  134. package/src/ui/ChatGroup/Layout/ChatGroupAside.tsx +12 -0
  135. package/src/ui/ChatGroup/Layout/ChatGroupBody.tsx +10 -0
  136. package/src/ui/ChatGroup/Layout/ChatGroupFooter.tsx +3 -0
  137. package/src/ui/ChatGroup/Layout/ChatGroupHeader.tsx +5 -0
  138. package/src/ui/ChatGroup/Layout/ChatGroupMain.tsx +17 -0
  139. package/src/ui/ChatGroup/Layout/index.ts +19 -0
  140. package/src/ui/{ChatList → ChatGroup/List}/ChatList.tsx +41 -42
  141. package/src/ui/ChatGroup/List/ChatListItemAvatar.tsx +22 -0
  142. package/src/ui/{ChatList → ChatGroup/List}/ChatListItemBox.tsx +26 -22
  143. package/src/ui/{ChatList → ChatGroup/List}/ChatListItemLastMessage.tsx +15 -15
  144. package/src/ui/{ChatList → ChatGroup/List}/ChatListItemLastMessageAuthor.tsx +15 -20
  145. package/src/ui/{ChatList → ChatGroup/List}/ChatListItemLastMessageContent.tsx +21 -21
  146. package/src/ui/{ChatList → ChatGroup/List}/ChatListItemLastMessageSentAt.tsx +22 -22
  147. package/src/ui/ChatGroup/List/ChatListItemName.tsx +8 -0
  148. package/src/ui/{ChatList → ChatGroup/List}/ChatListItemUnreadCount.tsx +12 -12
  149. package/src/ui/ChatGroup/List/index.ts +31 -0
  150. package/src/ui/ChatGroup/index.ts +5 -0
  151. package/src/ui/Chatify.tsx +9 -154
  152. package/src/ui/Conversation/Conversation.tsx +78 -0
  153. package/src/ui/Conversation/ConversationActions.tsx +5 -0
  154. package/src/ui/Conversation/ConversationBody.tsx +28 -0
  155. package/src/ui/Conversation/ConversationContext.ts +29 -0
  156. package/src/ui/Conversation/ConversationHeader.tsx +23 -0
  157. package/src/ui/Conversation/ConversationName.tsx +7 -0
  158. package/src/ui/Conversation/InputBox/InputBox.tsx +122 -0
  159. package/src/ui/Conversation/InputBox/InputBoxFile.tsx +38 -0
  160. package/src/ui/Conversation/InputBox/InputBoxFileList.tsx +21 -0
  161. package/src/ui/Conversation/InputBox/InputFilesBox.tsx +78 -0
  162. package/src/ui/Conversation/InputBox/InputSubmitButtonBox.tsx +26 -0
  163. package/src/ui/{InputBox → Conversation/InputBox}/InputTextBox.tsx +61 -51
  164. package/src/ui/Conversation/InputBox/index.ts +23 -0
  165. package/src/ui/{Message → Conversation/Message}/MessageAuthor.tsx +13 -13
  166. package/src/ui/{Message → Conversation/Message}/MessageBox.tsx +20 -20
  167. package/src/ui/{Message → Conversation/Message}/MessageContent.tsx +15 -11
  168. package/src/ui/Conversation/Message/MessageFile.tsx +54 -0
  169. package/src/ui/Conversation/Message/MessageFileList.tsx +14 -0
  170. package/src/ui/{Message → Conversation/Message}/MessageInfoBox.tsx +28 -26
  171. package/src/ui/{Message → Conversation/Message}/MessageRow.tsx +28 -28
  172. package/src/ui/{Message → Conversation/Message}/MessageText.tsx +7 -7
  173. package/src/ui/Conversation/Message/index.ts +28 -0
  174. package/src/ui/{Next.tsx → Conversation/NextObserver/NextMessagesObserver.tsx} +47 -48
  175. package/src/ui/Conversation/NextObserver/index.ts +1 -0
  176. package/src/ui/{MessageReadObserver.tsx → Conversation/ReadObserver/MessageReadObserver.tsx} +49 -45
  177. package/src/ui/Conversation/ReadObserver/index.ts +1 -0
  178. package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageBox.tsx +16 -16
  179. package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageContent.tsx +13 -13
  180. package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageInfoBox.tsx +13 -13
  181. package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageText.tsx +7 -7
  182. package/src/ui/Conversation/SendingMessage/index.ts +16 -0
  183. package/src/ui/{SystemMessage → Conversation/SystemMessage}/SystemMessageBox.tsx +20 -20
  184. package/src/ui/Conversation/SystemMessage/SystemMessageRow.tsx +28 -0
  185. package/src/ui/Conversation/SystemMessage/index.ts +10 -0
  186. package/src/ui/Conversation/index.ts +13 -0
  187. package/src/ui/Thread/ThreadActions.tsx +22 -0
  188. package/src/ui/Thread/ThreadContext.ts +13 -0
  189. package/src/ui/Thread/ThreadPanel.tsx +127 -0
  190. package/src/ui/Thread/index.tsx +3 -0
  191. package/src/ui/color.ts +20 -0
  192. package/src/ui/common/Avatar.tsx +20 -0
  193. package/src/ui/{Icon.tsx → common/Icon.tsx} +44 -35
  194. package/src/ui/{MessageSkeleton.tsx → common/MessageSkeleton.tsx} +20 -19
  195. package/src/ui/common/index.ts +13 -0
  196. package/src/ui/customize.tsx +51 -45
  197. package/src/ui/index.ts +11 -11
  198. package/src/ui/localizer.tsx +96 -84
  199. package/src/ui/useFormatter.tsx +17 -0
  200. package/dist/esm/types/ChatifyContext.d.ts +0 -11
  201. package/dist/esm/types/core/action.d.ts +0 -151
  202. package/dist/esm/types/core/models.d.ts +0 -70
  203. package/dist/esm/types/core/reducer.d.ts +0 -11
  204. package/dist/esm/types/core/state.d.ts +0 -55
  205. package/dist/esm/types/core/useAddChatMutation.d.ts +0 -2
  206. package/dist/esm/types/core/useAddMemberMutation.d.ts +0 -2
  207. package/dist/esm/types/core/useFetchNextMutation.d.ts +0 -3
  208. package/dist/esm/types/core/useGetAccountsQuery.d.ts +0 -3
  209. package/dist/esm/types/core/useGetChatListQuery.d.ts +0 -3
  210. package/dist/esm/types/core/useGetChatQuery.d.ts +0 -5
  211. package/dist/esm/types/core/useGetMessagesQuery.d.ts +0 -4
  212. package/dist/esm/types/core/useReadMonitor.d.ts +0 -1
  213. package/dist/esm/types/core/useRemoveMemberMutation.d.ts +0 -2
  214. package/dist/esm/types/core/useSendMutation.d.ts +0 -2
  215. package/dist/esm/types/core/useSignalRMonitor.d.ts +0 -2
  216. package/dist/esm/types/core/useUpdateChatNameMutation.d.ts +0 -2
  217. package/dist/esm/types/ui/AddChatButton.d.ts +0 -2
  218. package/dist/esm/types/ui/Avatar.d.ts +0 -6
  219. package/dist/esm/types/ui/ChatList/ChatList.d.ts +0 -2
  220. package/dist/esm/types/ui/ChatList/ChatListItemBox.d.ts +0 -6
  221. package/dist/esm/types/ui/ChatList/ChatListItemLastMessage.d.ts +0 -3
  222. package/dist/esm/types/ui/ChatList/ChatListItemLastMessageAuthor.d.ts +0 -3
  223. package/dist/esm/types/ui/ChatList/ChatListItemLastMessageSentAt.d.ts +0 -3
  224. package/dist/esm/types/ui/ChatList/ChatListItemName.d.ts +0 -3
  225. package/dist/esm/types/ui/ChatList/ChatListItemUnreadCount.d.ts +0 -3
  226. package/dist/esm/types/ui/ChatList/index.d.ts +0 -8
  227. package/dist/esm/types/ui/ChatName.d.ts +0 -5
  228. package/dist/esm/types/ui/ChatPanel/ChatBody.d.ts +0 -5
  229. package/dist/esm/types/ui/ChatPanel/ChatHeader.d.ts +0 -5
  230. package/dist/esm/types/ui/ChatPanel/ChatHeaderMembers.d.ts +0 -5
  231. package/dist/esm/types/ui/ChatPanel/ChatHeaderName.d.ts +0 -5
  232. package/dist/esm/types/ui/ChatPanel/ChatMembersButton.d.ts +0 -5
  233. package/dist/esm/types/ui/ChatPanel/ChatMembersPanel.d.ts +0 -5
  234. package/dist/esm/types/ui/ChatPanel/ChatPanel.d.ts +0 -5
  235. package/dist/esm/types/ui/ChatPanel/index.d.ts +0 -6
  236. package/dist/esm/types/ui/CreateChatPanel/CreateChatMemberInput.d.ts +0 -5
  237. package/dist/esm/types/ui/CreateChatPanel/CreateChatNameInput.d.ts +0 -5
  238. package/dist/esm/types/ui/CreateChatPanel/CreateChatPanel.d.ts +0 -2
  239. package/dist/esm/types/ui/CreateChatPanel/index.d.ts +0 -4
  240. package/dist/esm/types/ui/Icon.d.ts +0 -17
  241. package/dist/esm/types/ui/InputBox/InputBox.d.ts +0 -2
  242. package/dist/esm/types/ui/InputBox/InputSubmitButtonBox.d.ts +0 -5
  243. package/dist/esm/types/ui/InputBox/InputTextBox.d.ts +0 -7
  244. package/dist/esm/types/ui/InputBox/index.d.ts +0 -4
  245. package/dist/esm/types/ui/Layout/Aside.d.ts +0 -2
  246. package/dist/esm/types/ui/Layout/Body.d.ts +0 -2
  247. package/dist/esm/types/ui/Layout/Footer.d.ts +0 -2
  248. package/dist/esm/types/ui/Layout/Header.d.ts +0 -2
  249. package/dist/esm/types/ui/Layout/Main.d.ts +0 -2
  250. package/dist/esm/types/ui/Layout/index.d.ts +0 -5
  251. package/dist/esm/types/ui/Message/MessageAuthor.d.ts +0 -3
  252. package/dist/esm/types/ui/Message/MessageBox.d.ts +0 -6
  253. package/dist/esm/types/ui/Message/MessageContent.d.ts +0 -3
  254. package/dist/esm/types/ui/Message/MessageInfoBox.d.ts +0 -3
  255. package/dist/esm/types/ui/Message/MessageText.d.ts +0 -3
  256. package/dist/esm/types/ui/Message/index.d.ts +0 -6
  257. package/dist/esm/types/ui/MessageReadObserver.d.ts +0 -6
  258. package/dist/esm/types/ui/MessageSkeleton.d.ts +0 -4
  259. package/dist/esm/types/ui/Next.d.ts +0 -4
  260. package/dist/esm/types/ui/SendingMessage/SendingMessageBox.d.ts +0 -7
  261. package/dist/esm/types/ui/SendingMessage/SendingMessageContent.d.ts +0 -3
  262. package/dist/esm/types/ui/SendingMessage/SendingMessageText.d.ts +0 -3
  263. package/dist/esm/types/ui/SendingMessage/index.d.ts +0 -4
  264. package/dist/esm/types/ui/SystemMessage/SystemMessageBox.d.ts +0 -6
  265. package/dist/esm/types/ui/SystemMessage/SystemMessageRow.d.ts +0 -9
  266. package/dist/esm/types/ui/SystemMessage/index.d.ts +0 -2
  267. package/dist/esm/types/util/index.d.ts +0 -2
  268. package/dist/esm/types/util/uniqBy.d.ts +0 -1
  269. package/dist/esm/types/util/uniqId.d.ts +0 -1
  270. package/src/ChatifyContext.tsx +0 -41
  271. package/src/core/action.tsx +0 -431
  272. package/src/core/models.tsx +0 -82
  273. package/src/core/reducer.tsx +0 -87
  274. package/src/core/state.ts +0 -93
  275. package/src/core/useAddChatMutation.tsx +0 -28
  276. package/src/core/useAddMemberMutation.tsx +0 -25
  277. package/src/core/useFetchNextMutation.tsx +0 -28
  278. package/src/core/useGetAccountsQuery.tsx +0 -30
  279. package/src/core/useGetChatListQuery.tsx +0 -30
  280. package/src/core/useGetChatQuery.tsx +0 -31
  281. package/src/core/useGetMessagesQuery.tsx +0 -35
  282. package/src/core/useReadMonitor.tsx +0 -32
  283. package/src/core/useRemoveMemberMutation.tsx +0 -23
  284. package/src/core/useSendMutation.tsx +0 -24
  285. package/src/core/useSignalRMonitor.tsx +0 -66
  286. package/src/core/useUpdateChatNameMutation.tsx +0 -23
  287. package/src/ui/AddChatButton.tsx +0 -17
  288. package/src/ui/Avatar.tsx +0 -18
  289. package/src/ui/ChatList/ChatListItemName.tsx +0 -13
  290. package/src/ui/ChatList/index.ts +0 -8
  291. package/src/ui/ChatName.tsx +0 -10
  292. package/src/ui/ChatPanel/ChatBody.tsx +0 -44
  293. package/src/ui/ChatPanel/ChatHeader.tsx +0 -31
  294. package/src/ui/ChatPanel/ChatHeaderMembers.tsx +0 -28
  295. package/src/ui/ChatPanel/ChatMembersButton.tsx +0 -21
  296. package/src/ui/ChatPanel/ChatPanel.tsx +0 -27
  297. package/src/ui/ChatPanel/index.ts +0 -6
  298. package/src/ui/CreateChatPanel/index.ts +0 -4
  299. package/src/ui/InputBox/InputBox.tsx +0 -38
  300. package/src/ui/InputBox/InputFilesBox.tsx +0 -9
  301. package/src/ui/InputBox/InputSubmitButtonBox.tsx +0 -17
  302. package/src/ui/InputBox/index.ts +0 -4
  303. package/src/ui/Layout/Aside.tsx +0 -12
  304. package/src/ui/Layout/Body.tsx +0 -10
  305. package/src/ui/Layout/Footer.tsx +0 -3
  306. package/src/ui/Layout/Header.tsx +0 -5
  307. package/src/ui/Layout/Main.tsx +0 -15
  308. package/src/ui/Layout/index.ts +0 -5
  309. package/src/ui/Message/index.ts +0 -6
  310. package/src/ui/SendingMessage/index.ts +0 -4
  311. package/src/ui/SystemMessage/SystemMessageRow.tsx +0 -43
  312. package/src/ui/SystemMessage/index.ts +0 -2
  313. package/src/util/index.ts +0 -2
  314. package/src/util/uniqBy.tsx +0 -17
  315. package/src/util/uniqId.tsx +0 -3
package/dist/css/chatify.css CHANGED
@@ -66,11 +66,15 @@
66
66
  }
67
67
  .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item.ant-menu-item-selected .wxchtf-chat-name {
68
68
  font-weight: 600;
69
+ color: inherit;
69
70
  }
70
71
  .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat {
71
72
  padding-inline: 10px;
72
73
  padding-block: 8.5px;
73
74
  position: relative;
75
+ display: flex;
76
+ flex-flow: row nowrap;
77
+ align-items: center;
74
78
  }
75
79
  .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat.--unread .wxchtf-chat-last {
76
80
  font-weight: bold;
@@ -79,9 +83,29 @@
79
83
  font-weight: bold;
80
84
  max-width: 100%;
81
85
  }
86
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-info {
87
+ min-width: 1;
88
+ }
82
89
  .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-name {
83
90
  display: inline-block;
84
91
  font-weight: 500;
92
+ color: rgba(0, 0, 0, 0.88);
93
+ }
94
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-avatar {
95
+ background-color: var(--background-color);
96
+ width: 42px;
97
+ height: 42px;
98
+ line-height: 40px;
99
+ text-align: center;
100
+ color: var(--color);
101
+ border-radius: 50%;
102
+ margin-right: 11px;
103
+ flex: none;
104
+ }
105
+ .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-chat-avatar .anticon {
106
+ font-size: 20px;
107
+ line-height: 42px;
108
+ height: 42px;
85
109
  }
86
110
  .wxchtf-aside .wxchtf-chat-list.ant-menu .ant-menu-item .wxchtf-chat .wxchtf-unread-count {
87
111
  background-color: #ff4d4f;
@@ -131,35 +155,46 @@
131
155
  font-size: 0.8em;
132
156
  }
133
157
 
134
- .wxchtf-chatify .wxchtf-chat-panel {
158
+ .wxchtf-chatify .wxchtf-chat {
159
+ flex: auto;
160
+ display: flex;
161
+ flex-flow: row nowrap;
162
+ min-width: 1;
163
+ }
164
+ .wxchtf-chatify .wxchtf-conversation {
135
165
  flex: auto;
136
166
  display: flex;
137
167
  flex-flow: row nowrap;
168
+ min-width: 1;
138
169
  }
139
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main {
170
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main {
140
171
  flex: 1;
141
172
  display: flex;
142
173
  flex-flow: column nowrap;
174
+ min-width: 0;
143
175
  }
144
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-header {
176
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-header {
145
177
  padding: 15px 20px;
146
178
  line-height: 24px;
147
- z-index: 1;
179
+ z-index: 2;
148
180
  box-shadow: 0px 2px 4px 0px rgba(88, 99, 107, 0.04), 0px 1px 9px -1px rgba(88, 99, 107, 0.04), 0px 1px 2px 0px rgba(88, 99, 107, 0.06);
149
181
  }
150
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-header .wxchtf-chat-name {
182
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-header .wxchtf-conversation-name {
151
183
  font-weight: 600;
152
184
  font-size: 16px;
153
185
  flex: none;
154
186
  }
155
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-header .wxchtf-chat-name.--editable {
187
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-header .wxchtf-conversation-name.--editable {
156
188
  cursor: pointer;
157
189
  }
158
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-header .wxchtf-chat-members {
190
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-header .wxchtf-conversation-actions {
191
+ display: inline-flex;
192
+ }
193
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-header .wxchtf-chat-members {
159
194
  display: inline-flex;
160
195
  gap: 6px;
161
196
  }
162
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body {
197
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body {
163
198
  flex: 1 1 auto;
164
199
  height: 100px;
165
200
  overflow-y: auto;
@@ -170,118 +205,123 @@
170
205
  flex-flow: column-reverse nowrap;
171
206
  align-items: center;
172
207
  }
173
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body::-webkit-scrollbar {
208
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body::-webkit-scrollbar {
174
209
  width: 8px;
175
210
  height: 8px;
176
211
  }
177
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body::-webkit-scrollbar-track {
212
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body::-webkit-scrollbar-track {
178
213
  background-color: #f1f1f1;
179
214
  }
180
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body::-webkit-scrollbar-thumb {
215
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body::-webkit-scrollbar-thumb {
181
216
  background-color: #dfdfdf;
182
217
  }
183
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message,
184
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message,
185
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message,
186
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton {
218
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message,
219
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message,
220
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-system-message,
221
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message-skeleton {
187
222
  margin-bottom: 8px;
188
223
  max-width: 1110px;
189
224
  width: 100%;
190
225
  }
191
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message:first-child,
192
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message:first-child,
193
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message:first-child,
194
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton:first-child {
226
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message:first-child,
227
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message:first-child,
228
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-system-message:first-child,
229
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message-skeleton:first-child {
195
230
  margin-bottom: 0;
196
231
  }
197
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message,
198
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message {
232
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message,
233
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message {
199
234
  display: flex;
200
235
  flex-flow: row nowrap;
201
236
  align-items: flex-start;
202
237
  }
203
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message:not(.--my) .wxchtf-message-content,
204
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message:not(.--my) .wxchtf-sending-message-content,
205
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message:not(.--my) .wxchtf-message-content,
206
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message:not(.--my) .wxchtf-sending-message-content {
238
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message > div,
239
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message > div {
240
+ min-width: 0;
241
+ }
242
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message:not(.--my) .wxchtf-message-content,
243
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message:not(.--my) .wxchtf-sending-message-content,
244
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message:not(.--my) .wxchtf-message-content,
245
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message:not(.--my) .wxchtf-sending-message-content {
207
246
  border-bottom-left-radius: 0;
208
247
  }
209
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message.--my,
210
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message.--my {
248
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message.--my,
249
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message.--my {
211
250
  direction: rtl;
212
251
  justify-content: flex-start;
213
252
  }
214
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message.--my .wxchtf-message-author,
215
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message.--my .wxchtf-message-author {
253
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message.--my .wxchtf-message-author,
254
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message.--my .wxchtf-message-author {
216
255
  display: none;
217
256
  }
218
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message.--my .wxchtf-message-content,
219
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message.--my .wxchtf-sending-message-content,
220
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message.--my .wxchtf-message-content,
221
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message.--my .wxchtf-sending-message-content {
257
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message.--my .wxchtf-message-content,
258
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message.--my .wxchtf-sending-message-content,
259
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message.--my .wxchtf-message-content,
260
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message.--my .wxchtf-sending-message-content {
222
261
  direction: ltr;
223
262
  border-bottom-right-radius: 0;
224
263
  background-color: #e4f7f7;
225
264
  }
226
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message.--my .wxchtf-message-info-box,
227
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message.--my .wxchtf-message-info-box {
265
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message.--my .wxchtf-message-info-box,
266
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message.--my .wxchtf-message-info-box {
228
267
  text-align: right;
229
268
  }
230
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-author,
231
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-author {
269
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-author,
270
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-author {
232
271
  margin-right: 15px;
272
+ flex: none;
233
273
  }
234
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-author .ant-avatar,
235
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-author .ant-avatar {
274
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-author .ant-avatar,
275
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-author .ant-avatar {
236
276
  width: 40px;
237
277
  height: 40px;
238
278
  line-height: 38px;
239
279
  }
240
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-info-box,
241
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-info-box,
242
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-info-box,
243
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-info-box {
280
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-info-box,
281
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-sending-message-info-box,
282
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-info-box,
283
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-sending-message-info-box {
244
284
  text-align: left;
245
285
  margin-bottom: 3px;
246
286
  }
247
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-info-box .wxchtf-message-author-name,
248
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-info-box .wxchtf-message-sent-at,
249
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-info-box .wxchtf-message-read-box,
250
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
251
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-message-author-name,
252
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
253
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-message-read-box,
254
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
255
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-message-author-name,
256
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-message-sent-at,
257
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-message-read-box,
258
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
259
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-message-author-name,
260
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
261
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-message-read-box,
262
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box {
287
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-info-box .wxchtf-message-author-name,
288
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-info-box .wxchtf-message-sent-at,
289
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-info-box .wxchtf-message-read-box,
290
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
291
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-message-author-name,
292
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
293
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-message-read-box,
294
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
295
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-message-author-name,
296
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-message-sent-at,
297
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-message-read-box,
298
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
299
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-message-author-name,
300
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
301
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-message-read-box,
302
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box {
263
303
  display: inline-block;
264
304
  font-size: 0.85em;
265
305
  opacity: 0.5;
266
306
  }
267
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-info-box .wxchtf-message-sent-at,
268
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-info-box .wxchtf-message-read-box,
269
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
270
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
271
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-message-read-box,
272
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
273
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-message-sent-at,
274
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-message-read-box,
275
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
276
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
277
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-message-read-box,
278
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box {
307
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-info-box .wxchtf-message-sent-at,
308
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-info-box .wxchtf-message-read-box,
309
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
310
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
311
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-message-read-box,
312
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box,
313
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-message-sent-at,
314
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-message-read-box,
315
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-info-box .wxchtf-sending-message-sending-box,
316
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-message-sent-at,
317
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-message-read-box,
318
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-sending-message-info-box .wxchtf-sending-message-sending-box {
279
319
  margin-left: 5px;
280
320
  }
281
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content,
282
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content,
283
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content,
284
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content {
321
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-content,
322
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-sending-message-content,
323
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-content,
324
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-sending-message-content {
285
325
  width: fit-content;
286
326
  min-width: 300px;
287
327
  max-width: 70%;
@@ -293,20 +333,20 @@
293
333
  overflow-wrap: break-word;
294
334
  border-radius: 24px;
295
335
  }
296
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-message-content .wxchtf-message-text,
297
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-text,
298
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-text,
299
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-text {
336
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-message-content .wxchtf-message-text,
337
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message .wxchtf-sending-message-content .wxchtf-message-text,
338
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-message-content .wxchtf-message-text,
339
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-sending-message .wxchtf-sending-message-content .wxchtf-message-text {
300
340
  line-height: 21px;
301
341
  }
302
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message {
342
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-system-message {
303
343
  font-style: italic;
304
344
  position: relative;
305
345
  text-align: center;
306
346
  color: rgba(14, 15, 23, 0.6);
307
347
  }
308
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message .wxchtf-text,
309
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message .wxchtf-timestamp {
348
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-system-message .wxchtf-text,
349
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-system-message .wxchtf-timestamp {
310
350
  position: relative;
311
351
  z-index: 1;
312
352
  padding-inline: 8px;
@@ -314,64 +354,56 @@
314
354
  font-size: 0.85em;
315
355
  background-color: white;
316
356
  }
317
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message .wxchtf-timestamp {
357
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-system-message .wxchtf-timestamp {
318
358
  padding-left: 10px;
319
359
  }
320
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-system-message::after {
321
- content: "";
322
- position: absolute;
323
- height: 1px;
324
- width: 100%;
325
- left: 0;
326
- top: 50%;
327
- z-index: 0;
328
- background-color: rgba(0, 0, 0, 0.0588235294);
329
- }
330
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton {
360
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message-skeleton {
331
361
  display: flex;
332
362
  flex-flow: row nowrap;
333
363
  align-items: flex-end;
334
364
  }
335
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton .wxchtf-avatar {
365
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message-skeleton .wxchtf-avatar {
336
366
  margin-right: 15px;
337
367
  }
338
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton .wxchtf-avatar .ant-skeleton-avatar {
368
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message-skeleton .wxchtf-avatar .ant-skeleton-avatar {
339
369
  width: 40px;
340
370
  height: 40px;
341
371
  line-height: 40px;
342
372
  }
343
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-main .wxchtf-chat-body .wxchtf-message-skeleton .wxchtf-content {
373
+ .wxchtf-chatify .wxchtf-conversation .wxchtf-conversation-main .wxchtf-conversation-body .wxchtf-message-skeleton .wxchtf-content {
344
374
  width: 300px;
345
375
  height: 100px;
346
376
  border-radius: 10px;
347
377
  border-bottom-left-radius: 0;
348
378
  }
349
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-members-panel {
350
- min-width: 300px;
351
- box-shadow: -4px 0px 20px -5px rgba(12, 217, 226, 0.0784313725), -2px 1px 12px rgba(0, 110, 114, 0.0588235294);
352
- }
353
- .wxchtf-chatify .wxchtf-chat-panel .wxchtf-chat-members-panel .wxchtf-chat-members-list .wxchtf-chat-members-list-item {
354
- padding-inline: 1rem;
355
- border-block-end: none;
356
- }
357
379
 
380
+ @keyframes wxchtf-add-files-animate {
381
+ 15% {
382
+ transform: scale(70%);
383
+ }
384
+ 50% {
385
+ transform: scale(120%);
386
+ }
387
+ }
358
388
  .wxchtf-input-form {
359
389
  flex: none;
360
390
  max-height: 300px;
361
391
  display: flex;
362
392
  flex-flow: column nowrap;
363
- padding: 12px 20px 20px 20px;
393
+ margin: 12px 20px 20px 20px;
364
394
  }
365
395
  .wxchtf-input-form .wxchtf-input-box {
366
396
  flex: none;
367
- display: flex;
368
- flex-flow: row nowrap;
369
397
  padding: 8px;
370
398
  max-width: 1110px;
371
399
  width: 100%;
372
400
  margin: auto;
373
401
  background: rgb(245, 245, 245);
374
- border-radius: 40px;
402
+ border-radius: 25px;
403
+ }
404
+ .wxchtf-input-form .wxchtf-input-box .wxchtf-input-box-row {
405
+ display: flex;
406
+ flex-flow: row nowrap;
375
407
  }
376
408
  .wxchtf-input-form .wxchtf-input-box .wxchtf-add-files-box,
377
409
  .wxchtf-input-form .wxchtf-input-box .wxchtf-submit-btn-box {
@@ -386,15 +418,6 @@
386
418
  font-size: 18px;
387
419
  color: rgba(14, 15, 23, 0.25);
388
420
  }
389
- .wxchtf-input-form .wxchtf-input-box .wxchtf-add-files-box {
390
- flex: none;
391
- display: flex;
392
- padding: 0 1rem;
393
- align-items: flex-end;
394
- }
395
- .wxchtf-input-form .wxchtf-input-box .wxchtf-add-files-box .ant-btn.ant-btn-icon-only .anticon {
396
- font-size: 1.5rem;
397
- }
398
421
  .wxchtf-input-form .wxchtf-input-box .wxchtf-text-input-box {
399
422
  flex: auto;
400
423
  margin-left: 16px;
@@ -431,6 +454,117 @@
431
454
  font-size: 1.5rem;
432
455
  }
433
456
 
457
+ .wxchtf-add-files-box {
458
+ flex: none;
459
+ display: flex;
460
+ padding: 0 1rem;
461
+ align-items: flex-end;
462
+ flex: none;
463
+ }
464
+ .wxchtf-add-files-box .ant-btn.ant-btn-icon-only .anticon {
465
+ font-size: 1.5rem;
466
+ }
467
+ .wxchtf-add-files-box .wxchtf-add-files-added-btn {
468
+ margin-left: 0.5rem;
469
+ width: 1rem;
470
+ }
471
+ .wxchtf-add-files-box .wxchtf-add-files-added-btn .ant-btn-icon {
472
+ font-size: 1.1rem;
473
+ font-weight: 600;
474
+ color: rgba(14, 15, 23, 0.2509803922);
475
+ }
476
+ .wxchtf-add-files-box .wxchtf-add-files-added-btn.active {
477
+ animation: wxchtf-add-files-animate 2s ease-out infinite;
478
+ }
479
+
480
+ .wxchtf-file-list-box {
481
+ margin-bottom: 1rem;
482
+ }
483
+ .wxchtf-file-list-box .wxchtf-file-list {
484
+ scrollbar-width: none;
485
+ -ms-overflow-style: none;
486
+ display: flex;
487
+ flex-flow: row wrap;
488
+ gap: 1rem;
489
+ padding: 0.5rem;
490
+ max-height: 100px;
491
+ overflow-y: auto;
492
+ overflow-x: visible;
493
+ }
494
+ .wxchtf-file-list-box .wxchtf-file {
495
+ display: inline-flex;
496
+ flex-flow: row nowrap;
497
+ background-color: white;
498
+ padding: 1rem;
499
+ border-radius: 20px;
500
+ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
501
+ }
502
+ .wxchtf-file-list-box .wxchtf-file .wxchtf-file-info {
503
+ margin-right: 2rem;
504
+ min-width: 0;
505
+ max-width: 200px;
506
+ }
507
+ .wxchtf-file-list-box .wxchtf-file .wxchtf-file-name {
508
+ font-size: 0.9rem;
509
+ overflow: hidden;
510
+ white-space: nowrap;
511
+ text-overflow: ellipsis;
512
+ }
513
+ .wxchtf-file-list-box .wxchtf-file .wxchtf-file-size {
514
+ color: rgba(14, 15, 23, 0.2509803922);
515
+ font-size: 0.8rem;
516
+ }
517
+
518
+ .wxchtf-chatify .wxchtf-chat-members-panel {
519
+ min-width: 300px;
520
+ box-shadow: -4px 0px 20px -5px rgba(12, 217, 226, 0.0784313725), -2px 1px 12px rgba(0, 110, 114, 0.0588235294);
521
+ }
522
+ .wxchtf-chatify .wxchtf-chat-members-panel .wxchtf-chat-members-list .wxchtf-chat-members-list-item {
523
+ padding-inline: 1rem;
524
+ border-block-end: none;
525
+ }
526
+
527
+ .wxchtf-message.--my .wxchtf-file-list .wxchtf-file {
528
+ background-color: #d8f4f4;
529
+ }
530
+
531
+ .wxchtf-message .wxchtf-message-text + .wxchtf-file-list {
532
+ margin-top: 1rem;
533
+ }
534
+
535
+ .wxchtf-message .wxchtf-file-list .wxchtf-file {
536
+ display: flex;
537
+ flex-flow: row nowrap;
538
+ align-items: center;
539
+ gap: 1rem;
540
+ background-color: #ededed;
541
+ border-radius: 15px;
542
+ padding: 0.5rem;
543
+ }
544
+ .wxchtf-message .wxchtf-file-list .wxchtf-file .wxchtf-file-info {
545
+ min-width: 0;
546
+ }
547
+ .wxchtf-message .wxchtf-file-list .wxchtf-file .wxchtf-size {
548
+ color: rgba(14, 15, 23, 0.2509803922);
549
+ font-size: 0.8rem;
550
+ }
551
+ .wxchtf-message .wxchtf-file-list .wxchtf-file .wxchtf-name {
552
+ font-size: 0.9rem;
553
+ overflow: hidden;
554
+ white-space: nowrap;
555
+ text-overflow: ellipsis;
556
+ }
557
+ .wxchtf-message .wxchtf-file-list .wxchtf-file .ant-btn {
558
+ border: 2px solid #1677ff;
559
+ border-radius: 50%;
560
+ }
561
+ .wxchtf-message .wxchtf-file-list .wxchtf-file .ant-btn:hover {
562
+ border-color: #63a4ff;
563
+ }
564
+ .wxchtf-message .wxchtf-file-list .wxchtf-file + .wxchtf-file {
565
+ margin-top: 1rem;
566
+ }
567
+
434
568
  .wxchtf-chatify {
435
569
  display: flex;
436
570
  flex-flow: column nowrap;
@@ -475,6 +609,7 @@
475
609
  border-bottom-right-radius: 24px;
476
610
  box-shadow: 0px 6px 30px 0px rgba(12, 217, 226, 0.0784313725), 0px 1px 12px 0px rgba(0, 110, 114, 0.0588235294);
477
611
  z-index: 2;
612
+ min-width: 0;
478
613
  }
479
614
  .wxchtf-main .wxchtf-create-chat-panel {
480
615
  display: flex;