stream-chat-react 14.1.0 → 14.3.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.
- package/README.md +7 -9
- package/dist/cjs/emojis.js +1 -1
- package/dist/cjs/index.js +499 -82
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/{useNotificationApi.fd802923.js → useNotificationApi.f2c7704d.js} +4 -4
- package/dist/cjs/{useNotificationApi.fd802923.js.map → useNotificationApi.f2c7704d.js.map} +1 -1
- package/dist/css/index.css +167 -72
- package/dist/css/index.css.map +1 -1
- package/dist/es/emojis.mjs +1 -1
- package/dist/es/index.mjs +500 -83
- package/dist/es/index.mjs.map +1 -1
- package/dist/es/{useNotificationApi.e0c52de6.mjs → useNotificationApi.f91ae46b.mjs} +4 -4
- package/dist/es/{useNotificationApi.e0c52de6.mjs.map → useNotificationApi.f91ae46b.mjs.map} +1 -1
- package/dist/types/components/BaseImage/BaseImage.d.ts.map +1 -1
- package/dist/types/components/ChannelList/ChannelList.d.ts.map +1 -1
- package/dist/types/components/ChannelList/hooks/usePaginatedChannels.d.ts +12 -1
- package/dist/types/components/ChannelList/hooks/usePaginatedChannels.d.ts.map +1 -1
- package/dist/types/components/ChannelListItem/ChannelListItem.d.ts +2 -0
- package/dist/types/components/ChannelListItem/ChannelListItem.d.ts.map +1 -1
- package/dist/types/components/ChannelListItem/ChannelListItemActionButtons.d.ts.map +1 -1
- package/dist/types/components/ChannelListItem/ChannelListItemUI.d.ts.map +1 -1
- package/dist/types/components/Form/Dropdown.d.ts +2 -1
- package/dist/types/components/Form/Dropdown.d.ts.map +1 -1
- package/dist/types/components/Message/MessageText.d.ts.map +1 -1
- package/dist/types/components/MessageComposer/AttachmentSelector/AttachmentSelector.d.ts.map +1 -1
- package/dist/types/components/MessageComposer/AttachmentSelector/CommandsMenu.d.ts +2 -1
- package/dist/types/components/MessageComposer/AttachmentSelector/CommandsMenu.d.ts.map +1 -1
- package/dist/types/components/MessageComposer/EditedMessagePreview.d.ts.map +1 -1
- package/dist/types/components/MessageComposer/QuotedMessagePreview.d.ts +4 -2
- package/dist/types/components/MessageComposer/QuotedMessagePreview.d.ts.map +1 -1
- package/dist/types/components/MessageComposer/WithDragAndDropUpload.d.ts.map +1 -1
- package/dist/types/components/MessageComposer/hooks/index.d.ts +1 -0
- package/dist/types/components/MessageComposer/hooks/index.d.ts.map +1 -1
- package/dist/types/components/MessageComposer/hooks/useMessageComposerCommands.d.ts +9 -0
- package/dist/types/components/MessageComposer/hooks/useMessageComposerCommands.d.ts.map +1 -0
- package/dist/types/components/Notifications/NotificationList.d.ts +58 -1
- package/dist/types/components/Notifications/NotificationList.d.ts.map +1 -1
- package/dist/types/components/Reactions/MessageReactionsDetail.d.ts.map +1 -1
- package/dist/types/components/Reactions/ReactionSelector.d.ts.map +1 -1
- package/dist/types/components/Reactions/reactionOptions.d.ts +1 -0
- package/dist/types/components/Reactions/reactionOptions.d.ts.map +1 -1
- package/dist/types/components/TextareaComposer/SuggestionList/CommandItem.d.ts +1 -0
- package/dist/types/components/TextareaComposer/SuggestionList/CommandItem.d.ts.map +1 -1
- package/dist/types/components/TextareaComposer/SuggestionList/SuggestionList.d.ts.map +1 -1
- package/dist/types/components/TextareaComposer/TextareaComposer.d.ts +1 -0
- package/dist/types/components/TextareaComposer/TextareaComposer.d.ts.map +1 -1
- package/dist/types/i18n/Streami18n.d.ts +6 -0
- package/dist/types/i18n/Streami18n.d.ts.map +1 -1
- package/dist/types/i18n/TranslationBuilder/notifications/translators.d.ts +1 -0
- package/dist/types/i18n/TranslationBuilder/notifications/translators.d.ts.map +1 -1
- package/dist/types/i18n/TranslationBuilder/notifications/translatorsByNotificationType.d.ts.map +1 -1
- package/package.json +9 -5
package/README.md
CHANGED
|
@@ -54,26 +54,26 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
|
|
|
54
54
|
|
|
55
55
|
## Example Applications
|
|
56
56
|
|
|
57
|
-
We have built
|
|
57
|
+
We have built demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual events. You can preview these [demos](https://getstream.io/chat/demos/) on our website.
|
|
58
58
|
|
|
59
59
|
## Documentation
|
|
60
60
|
|
|
61
61
|
We use a doc generator to build our [component documentation](https://getstream.io/chat/docs/sdk/react/). We provide a brief description of each chat component and define all of the props it accepts.
|
|
62
62
|
|
|
63
|
-
The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components,
|
|
63
|
+
The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, you'll likely need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/javascript/) on our website.
|
|
64
64
|
|
|
65
65
|
## Component Reusability
|
|
66
66
|
|
|
67
|
-
For components that implement significant logic, it's helpful to split the component into two parts: a top-level component
|
|
67
|
+
For components that implement significant logic, it's helpful to split the component into two parts: a top-level component that handles functionality and a lower-level component that renders the UI. This way, you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `CustomMessageUI` (using `WithComponents`), without affecting any logic in the application.
|
|
68
68
|
|
|
69
69
|
```jsx
|
|
70
70
|
<Channel>
|
|
71
71
|
<Window>
|
|
72
72
|
<ChannelHeader />
|
|
73
|
-
<WithComponents overrides={{
|
|
73
|
+
<WithComponents overrides={{ MessageUI: CustomMessageUI }}>
|
|
74
74
|
<MessageList />
|
|
75
75
|
</WithComponents>
|
|
76
|
-
<
|
|
76
|
+
<MessageComposer />
|
|
77
77
|
</Window>
|
|
78
78
|
<Thread />
|
|
79
79
|
</Channel>
|
|
@@ -81,14 +81,12 @@ For components that implement significant logic, it's helpful to split the compo
|
|
|
81
81
|
|
|
82
82
|
### Customizing Styles
|
|
83
83
|
|
|
84
|
-
The preferred method for overriding the pre-defined styles in the library is
|
|
84
|
+
The preferred method for overriding the pre-defined styles in the library is a two-step process. First, import our bundled CSS into your main CSS file (or CSS file loaded with your chat application). Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults (ideally within the stream-overrides layer). Layers (when ordered correctly, see example) ensure that your overrides take precedence even if your overriding selectors are less specific. For example:
|
|
85
85
|
|
|
86
86
|
```css title="index.css"
|
|
87
87
|
@layer stream, stream-overrides;
|
|
88
88
|
|
|
89
|
-
@import 'stream-chat-react/css/
|
|
90
|
-
/* or */
|
|
91
|
-
@import 'stream-chat-react/dist/css/v2/index.css' layer(stream);
|
|
89
|
+
@import 'stream-chat-react/css/index.css' layer(stream);
|
|
92
90
|
|
|
93
91
|
@layer stream-overrides {
|
|
94
92
|
/* your overrides */
|
package/dist/cjs/emojis.js
CHANGED
|
@@ -25,7 +25,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
25
25
|
const jsxRuntime = require("react/jsx-runtime");
|
|
26
26
|
const React = require("react");
|
|
27
27
|
const Picker = require("@emoji-mart/react");
|
|
28
|
-
const useNotificationApi = require("./useNotificationApi.
|
|
28
|
+
const useNotificationApi = require("./useNotificationApi.f2c7704d.js");
|
|
29
29
|
const mergeWith = require("lodash.mergewith");
|
|
30
30
|
const streamChat = require("stream-chat");
|
|
31
31
|
const isShadowRoot = (node) => !!node.host;
|