@ermis-network/ermis-chat-react 1.0.0

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 (88) hide show
  1. package/dist/index.cjs +6593 -0
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.css +3375 -0
  4. package/dist/index.css.map +1 -0
  5. package/dist/index.d.mts +1138 -0
  6. package/dist/index.d.ts +1138 -0
  7. package/dist/index.mjs +6500 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/package.json +42 -0
  10. package/src/components/Avatar.tsx +102 -0
  11. package/src/components/Channel.tsx +77 -0
  12. package/src/components/ChannelHeader.tsx +85 -0
  13. package/src/components/ChannelInfo/AddMemberModal.tsx +204 -0
  14. package/src/components/ChannelInfo/ChannelInfo.tsx +455 -0
  15. package/src/components/ChannelInfo/ChannelInfoTabs.tsx +282 -0
  16. package/src/components/ChannelInfo/ChannelSettingsPanel.tsx +479 -0
  17. package/src/components/ChannelInfo/EditChannelModal.tsx +272 -0
  18. package/src/components/ChannelInfo/FileListItem.tsx +49 -0
  19. package/src/components/ChannelInfo/LinkListItem.tsx +62 -0
  20. package/src/components/ChannelInfo/MediaGridItem.tsx +90 -0
  21. package/src/components/ChannelInfo/MemberListItem.tsx +85 -0
  22. package/src/components/ChannelInfo/MessageSearchPanel.tsx +333 -0
  23. package/src/components/ChannelInfo/States.tsx +36 -0
  24. package/src/components/ChannelInfo/index.ts +10 -0
  25. package/src/components/ChannelInfo/utils.tsx +49 -0
  26. package/src/components/ChannelList.tsx +395 -0
  27. package/src/components/Dropdown.tsx +120 -0
  28. package/src/components/EditPreview.tsx +102 -0
  29. package/src/components/FilesPreview.tsx +108 -0
  30. package/src/components/ForwardMessageModal.tsx +234 -0
  31. package/src/components/MentionSuggestions.tsx +59 -0
  32. package/src/components/MessageActionsBox.tsx +186 -0
  33. package/src/components/MessageInput.tsx +513 -0
  34. package/src/components/MessageInputDefaults.tsx +50 -0
  35. package/src/components/MessageItem.tsx +218 -0
  36. package/src/components/MessageQuickReactions.tsx +73 -0
  37. package/src/components/MessageReactions.tsx +59 -0
  38. package/src/components/MessageRenderers.tsx +565 -0
  39. package/src/components/Modal.tsx +58 -0
  40. package/src/components/Panel.tsx +64 -0
  41. package/src/components/PinnedMessages.tsx +165 -0
  42. package/src/components/QuotedMessagePreview.tsx +55 -0
  43. package/src/components/ReadReceipts.tsx +80 -0
  44. package/src/components/ReplyPreview.tsx +98 -0
  45. package/src/components/TypingIndicator.tsx +57 -0
  46. package/src/components/VirtualMessageList.tsx +425 -0
  47. package/src/context/ChatProvider.tsx +73 -0
  48. package/src/hooks/useBannedState.ts +48 -0
  49. package/src/hooks/useBlockedState.ts +55 -0
  50. package/src/hooks/useChannel.ts +18 -0
  51. package/src/hooks/useChannelCapabilities.ts +42 -0
  52. package/src/hooks/useChannelData.ts +55 -0
  53. package/src/hooks/useChannelListUpdates.ts +224 -0
  54. package/src/hooks/useChannelMessages.ts +159 -0
  55. package/src/hooks/useChannelRowUpdates.ts +78 -0
  56. package/src/hooks/useChatClient.ts +11 -0
  57. package/src/hooks/useEmojiPicker.ts +53 -0
  58. package/src/hooks/useFileUpload.ts +128 -0
  59. package/src/hooks/useLoadMessages.ts +178 -0
  60. package/src/hooks/useMentions.ts +287 -0
  61. package/src/hooks/useMessageActions.ts +87 -0
  62. package/src/hooks/useMessageSend.ts +164 -0
  63. package/src/hooks/usePendingState.ts +63 -0
  64. package/src/hooks/useScrollToMessage.ts +155 -0
  65. package/src/hooks/useTypingIndicator.ts +86 -0
  66. package/src/index.ts +129 -0
  67. package/src/styles/_add-member-modal.css +122 -0
  68. package/src/styles/_base.css +32 -0
  69. package/src/styles/_channel-info.css +941 -0
  70. package/src/styles/_channel-list.css +217 -0
  71. package/src/styles/_dropdown.css +69 -0
  72. package/src/styles/_forward-modal.css +191 -0
  73. package/src/styles/_mentions.css +102 -0
  74. package/src/styles/_message-actions.css +61 -0
  75. package/src/styles/_message-bubble.css +656 -0
  76. package/src/styles/_message-input.css +389 -0
  77. package/src/styles/_message-list.css +416 -0
  78. package/src/styles/_message-quick-reactions.css +62 -0
  79. package/src/styles/_message-reactions.css +67 -0
  80. package/src/styles/_modal.css +113 -0
  81. package/src/styles/_panel.css +69 -0
  82. package/src/styles/_pinned-messages.css +140 -0
  83. package/src/styles/_search-panel.css +219 -0
  84. package/src/styles/_tokens.css +92 -0
  85. package/src/styles/_typing-indicator.css +59 -0
  86. package/src/styles/index.css +24 -0
  87. package/src/types.ts +955 -0
  88. package/src/utils.ts +242 -0
package/src/styles/_add-member-modal.css ADDED
@@ -0,0 +1,122 @@
1
+ .ermis-modal-search {
2
+ position: relative;
3
+ display: flex;
4
+ align-items: center;
5
+ margin-bottom: 16px;
6
+ }
7
+
8
+ .ermis-modal-search svg {
9
+ position: absolute;
10
+ left: 12px;
11
+ color: var(--ermis-text-secondary, #666666);
12
+ pointer-events: none;
13
+ }
14
+
15
+ .ermis-modal-search input {
16
+ width: 100%;
17
+ padding: 10px 12px 10px 36px;
18
+ border-radius: 8px;
19
+ border: 1px solid var(--ermis-border-color, #cccccc);
20
+ background-color: var(--ermis-bg-base, #f9f9f9);
21
+ color: var(--ermis-text-primary, #000000);
22
+ font-size: 14px;
23
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
24
+ outline: none;
25
+ }
26
+
27
+ [data-theme='dark'] .ermis-modal-search input {
28
+ background-color: var(--ermis-bg-base, #121212);
29
+ border: 1px solid var(--ermis-border-color, #444444);
30
+ color: var(--ermis-text-primary, #ffffff);
31
+ }
32
+
33
+ .ermis-modal-search input:focus {
34
+ border-color: var(--ermis-primary-color, #005fff);
35
+ box-shadow: 0 0 0 2px rgba(0, 95, 255, 0.2);
36
+ }
37
+
38
+ .ermis-modal-user-list {
39
+ display: flex;
40
+ flex-direction: column;
41
+ overflow-y: auto;
42
+ gap: 4px;
43
+ max-height: 400px;
44
+ padding-right: 4px;
45
+ }
46
+
47
+ /* Custom scrollbar for user list */
48
+ .ermis-modal-user-list::-webkit-scrollbar {
49
+ width: 6px;
50
+ }
51
+ .ermis-modal-user-list::-webkit-scrollbar-track {
52
+ background: transparent;
53
+ }
54
+ .ermis-modal-user-list::-webkit-scrollbar-thumb {
55
+ background-color: var(--ermis-border-color, #cccccc);
56
+ border-radius: 3px;
57
+ }
58
+ [data-theme='dark'] .ermis-modal-user-list::-webkit-scrollbar-thumb {
59
+ background-color: var(--ermis-border-color, #444444);
60
+ }
61
+
62
+ .ermis-modal-loading,
63
+ .ermis-modal-empty {
64
+ text-align: center;
65
+ color: var(--ermis-text-secondary, #666666);
66
+ padding: 32px 0;
67
+ font-size: 14px;
68
+ }
69
+
70
+ .ermis-modal-user-item {
71
+ display: flex;
72
+ align-items: center;
73
+ padding: 8px 12px;
74
+ border-radius: 8px;
75
+ transition: background-color 0.15s ease;
76
+ }
77
+
78
+ .ermis-modal-user-item:hover {
79
+ background-color: var(--ermis-bg-hover, #f0f0f0);
80
+ }
81
+
82
+ [data-theme='dark'] .ermis-modal-user-item:hover {
83
+ background-color: var(--ermis-bg-hover, #2a2a2a);
84
+ }
85
+
86
+ .ermis-modal-user-info {
87
+ margin-left: 12px;
88
+ flex: 1;
89
+ display: flex;
90
+ flex-direction: column;
91
+ }
92
+
93
+ .ermis-modal-user-name {
94
+ font-size: 14px;
95
+ font-weight: 500;
96
+ color: var(--ermis-text-primary, #000000);
97
+ }
98
+
99
+ [data-theme='dark'] .ermis-modal-user-name {
100
+ color: var(--ermis-text-primary, #ffffff);
101
+ }
102
+
103
+ .ermis-modal-add-btn {
104
+ background-color: var(--ermis-primary-color, #005fff);
105
+ color: #ffffff;
106
+ border: none;
107
+ border-radius: 6px;
108
+ padding: 6px 14px;
109
+ font-size: 13px;
110
+ font-weight: 500;
111
+ cursor: pointer;
112
+ transition: background-color 0.15s ease, opacity 0.15s ease;
113
+ }
114
+
115
+ .ermis-modal-add-btn:hover:not(:disabled) {
116
+ background-color: var(--ermis-primary-hover, #004ecc);
117
+ }
118
+
119
+ .ermis-modal-add-btn:disabled {
120
+ opacity: 0.6;
121
+ cursor: not-allowed;
122
+ }
package/src/styles/_base.css ADDED
@@ -0,0 +1,32 @@
1
+ /* ----------------------------------------------------------
2
+ Chat root
3
+ ---------------------------------------------------------- */
4
+ .ermis-chat {
5
+ width: 100%;
6
+ height: 100%;
7
+ background-color: var(--ermis-bg-primary);
8
+ color: var(--ermis-text-primary);
9
+ overflow: hidden;
10
+ }
11
+
12
+ /* ----------------------------------------------------------
13
+ Avatar
14
+ ---------------------------------------------------------- */
15
+ .ermis-avatar {
16
+ display: inline-flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ border-radius: var(--ermis-radius-full);
20
+ object-fit: cover;
21
+ flex-shrink: 0;
22
+ overflow: hidden;
23
+ }
24
+
25
+ .ermis-avatar--fallback {
26
+ background: linear-gradient(135deg, var(--ermis-accent) 0%, var(--ermis-accent-hover) 100%);
27
+ color: #fff;
28
+ font-weight: 600;
29
+ font-family: var(--ermis-font-family);
30
+ text-transform: uppercase;
31
+ user-select: none;
32
+ }