Skip to content

Commit 87e89f7

Browse files
MartinCupelaMartinCupela
authored
feat: refresh MessageComposer design (#2919)
1 parent 73f8767 commit 87e89f7

180 files changed

Lines changed: 4588 additions & 2245 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎examples/vite/src/App.tsx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
ThreadList,
2020
useCreateChatClient,
2121
VirtualizedMessageList as MessageList,
22+
// MessageList,
2223
Window,
2324
} from 'stream-chat-react';
2425
import { createTextComposerEmojiMiddleware, EmojiPicker } from 'stream-chat-react/emojis';
@@ -29,6 +30,7 @@ import { humanId } from 'human-id';
2930
init({ data });
3031

3132
const apiKey = import.meta.env.VITE_STREAM_API_KEY;
33+
const token = import.meta.env.VITE_USER_TOKEN;
3234

3335
if (!apiKey) {
3436
throw new Error('VITE_STREAM_API_KEY is not defined');
@@ -43,6 +45,7 @@ const isMessageAIGenerated = (message: LocalMessage) => !!message?.ai_generated;
4345
const useUser = () => {
4446
const userId = useMemo(() => {
4547
return (
48+
import.meta.env.VITE_USER_ID ||
4649
new URLSearchParams(window.location.search).get('user_id') ||
4750
localStorage.getItem('user_id') ||
4851
humanId({ separator: '_', capitalize: false })
@@ -58,11 +61,13 @@ const useUser = () => {
5861
}, [userId]);
5962

6063
const tokenProvider = useCallback(() => {
61-
return fetch(
62-
`https://pronto.getstream.io/api/auth/create-token?environment=shared-chat-redesign&user_id=${userId}`,
63-
)
64-
.then((response) => response.json())
65-
.then((data) => data.token as string);
64+
return token
65+
? Promise.resolve(token)
66+
: fetch(
67+
`https://pronto.getstream.io/api/auth/create-token?environment=shared-chat-redesign&user_id=${userId}`,
68+
)
69+
.then((response) => response.json())
70+
.then((data) => data.token as string);
6671
}, [userId]);
6772

6873
return { userId: userId, tokenProvider };
@@ -97,6 +102,11 @@ const App = () => {
97102
position: { before: 'stream-io/text-composer/mentions-middleware' },
98103
unique: true,
99104
});
105+
106+
composer.updateConfig({
107+
linkPreviews: { enabled: true },
108+
location: { enabled: true },
109+
});
100110
});
101111
}, [chatClient]);
102112

@@ -120,7 +130,12 @@ const App = () => {
120130
<ChannelHeader Avatar={ChannelAvatar} />
121131
<MessageList returnAllReadData />
122132
<AIStateIndicator />
123-
<MessageInput focus audioRecordingEnabled />
133+
<MessageInput
134+
focus
135+
audioRecordingEnabled
136+
maxRows={10}
137+
asyncMessagesMultiSendEnabled
138+
/>
124139
</Window>
125140
<Thread virtualized />
126141
</Channel>

‎examples/vite/src/index.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
@layer stream, stream-overrides;
1+
@layer stream, stream-new, stream-overrides;
22

33
@import url('./stream-imports-theme.scss') layer(stream);
44
@import url('./stream-imports-layout.scss') layer(stream);
55

66
// v3 CSS import
7-
@import url('stream-chat-react/dist/css/index.css');
7+
@import url('stream-chat-react/dist/css/index.css') layer(stream-new);
8+
@import url('stream-chat-react/dist/css/emojis.css') layer(stream-new);
89

910
:root {
1011
font-synthesis: none;

‎examples/vite/src/stream-imports-layout.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
@use 'stream-chat-react/dist/scss/v2/Avatar/Avatar-layout';
66
@use 'stream-chat-react/dist/scss/v2/AttachmentList/AttachmentList-layout';
7-
@use 'stream-chat-react/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-layout';
7+
//@use 'stream-chat-react/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-layout'; // X
88
@use 'stream-chat-react/dist/scss/v2/Autocomplete/Autocomplete-layout';
99
@use 'stream-chat-react/dist/scss/v2/AudioRecorder/AudioRecorder-layout';
1010
@use 'stream-chat-react/dist/scss/v2/BaseImage/BaseImage-layout';
@@ -15,21 +15,21 @@
1515
@use 'stream-chat-react/dist/scss/v2/ChannelSearch/ChannelSearch-layout';
1616
@use 'stream-chat-react/dist/scss/v2/common/CTAButton/CTAButton-layout';
1717
@use 'stream-chat-react/dist/scss/v2/common/CircleFAButton/CircleFAButton-layout';
18-
@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-layout';
18+
//@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-layout';
1919
@use 'stream-chat-react/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-layout';
20-
@use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-layout';
20+
@use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-layout'; // X
2121
@use 'stream-chat-react/dist/scss/v2/EditMessageForm/EditMessageForm-layout';
2222
@use 'stream-chat-react/dist/scss/v2/Form/Form-layout';
2323
@use 'stream-chat-react/dist/scss/v2/ImageCarousel/ImageCarousel-layout';
24-
@use 'stream-chat-react/dist/scss/v2/Icon/Icon-layout';
24+
//@use 'stream-chat-react/dist/scss/v2/Icon/Icon-layout';
2525
@use 'stream-chat-react/dist/scss/v2/InfiniteScrollPaginator/InfiniteScrollPaginator-layout';
26-
@use 'stream-chat-react/dist/scss/v2/LinkPreview/LinkPreview-layout';
26+
//@use 'stream-chat-react/dist/scss/v2/LinkPreview/LinkPreview-layout'; // X
2727
@use 'stream-chat-react/dist/scss/v2/LoadingIndicator/LoadingIndicator-layout';
2828
@use 'stream-chat-react/dist/scss/v2/Location/Location-layout';
2929
@use 'stream-chat-react/dist/scss/v2/Message/Message-layout';
3030
@use 'stream-chat-react/dist/scss/v2/MessageActionsBox/MessageActionsBox-layout';
3131
@use 'stream-chat-react/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-layout';
32-
@use 'stream-chat-react/dist/scss/v2/MessageInput/MessageInput-layout';
32+
//@use 'stream-chat-react/dist/scss/v2/MessageInput/MessageInput-layout'; // X
3333
@use 'stream-chat-react/dist/scss/v2/MessageList/MessageList-layout';
3434
@use 'stream-chat-react/dist/scss/v2/MessageList/VirtualizedMessageList-layout';
3535
@use 'stream-chat-react/dist/scss/v2/MessageReactions/MessageReactions-layout';

‎examples/vite/src/stream-imports-theme.scss‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
@use 'stream-chat-react/dist/scss/v2/common/CircleFAButton/CircleFAButton-theme';
88
@use 'stream-chat-react/dist/scss/v2/Avatar/Avatar-theme';
99
@use 'stream-chat-react/dist/scss/v2/AttachmentList/AttachmentList-theme';
10-
@use 'stream-chat-react/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-theme';
1110
@use 'stream-chat-react/dist/scss/v2/AudioRecorder/AudioRecorder-theme';
1211
@use 'stream-chat-react/dist/scss/v2/Autocomplete/Autocomplete-theme';
1312
@use 'stream-chat-react/dist/scss/v2/BaseImage/BaseImage-theme';
@@ -16,20 +15,17 @@
1615
@use 'stream-chat-react/dist/scss/v2/ChannelList/ChannelList-theme';
1716
@use 'stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-theme';
1817
@use 'stream-chat-react/dist/scss/v2/ChannelSearch/ChannelSearch-theme';
19-
@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-theme';
18+
//@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-theme';
2019
@use 'stream-chat-react/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-theme';
2120
@use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-theme';
22-
@use 'stream-chat-react/dist/scss/v2/EditMessageForm/EditMessageForm-theme';
2321
@use 'stream-chat-react/dist/scss/v2/Form/Form-theme';
24-
@use 'stream-chat-react/dist/scss/v2/Icon/Icon-theme';
22+
//@use 'stream-chat-react/dist/scss/v2/Icon/Icon-theme';
2523
@use 'stream-chat-react/dist/scss/v2/ImageCarousel/ImageCarousel-theme';
26-
@use 'stream-chat-react/dist/scss/v2/LinkPreview/LinkPreview-theme';
2724
@use 'stream-chat-react/dist/scss/v2/LoadingIndicator/LoadingIndicator-theme';
2825
@use 'stream-chat-react/dist/scss/v2/Location/Location-theme';
2926
@use 'stream-chat-react/dist/scss/v2/Message/Message-theme';
3027
@use 'stream-chat-react/dist/scss/v2/MessageActionsBox/MessageActionsBox-theme';
3128
@use 'stream-chat-react/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-theme';
32-
@use 'stream-chat-react/dist/scss/v2/MessageInput/MessageInput-theme';
3329
@use 'stream-chat-react/dist/scss/v2/MessageList/MessageList-theme';
3430
@use 'stream-chat-react/dist/scss/v2/MessageList/VirtualizedMessageList-theme';
3531
@use 'stream-chat-react/dist/scss/v2/MessageReactions/MessageReactions-theme';

‎examples/vite/src/vite-env.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
interface ImportMetaEnv {
22
readonly VITE_STREAM_API_KEY?: string;
3+
readonly VITE_USER_ID?: string;
4+
readonly VITE_USER_TOKEN?: string;
35
}
46

57
interface ImportMeta {

‎examples/vite/yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2329,6 +2329,11 @@ minimatch@^9.0.4:
23292329
dependencies:
23302330
brace-expansion "^2.0.1"
23312331

2332+
modern-normalize@^3.0.1:
2333+
version "3.0.1"
2334+
resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-3.0.1.tgz#4e2dc8da282ab854d53d70d7155a8027f59fbed6"
2335+
integrity sha512-VqlMdYi59Uch6fnUPxnpijWUQe+TW6zeWCvyr6Mb7JibheHzSuAAoJi2c71ZwIaWKpECpGpYHoaaBp6rBRr+/g==
2336+
23322337
ms@2.1.2:
23332338
version "2.1.2"
23342339
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
"emoji-mart": "^5.4.0",
121121
"react": "^19.0.0 || ^18.0.0 || ^17.0.0",
122122
"react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0",
123-
"stream-chat": "^9.27.2"
123+
"stream-chat": "^9.30.1"
124124
},
125125
"peerDependenciesMeta": {
126126
"@breezystack/lamejs": {
@@ -215,7 +215,7 @@
215215
"react-dom": "^19.0.0",
216216
"sass": "^1.97.2",
217217
"semantic-release": "^25.0.2",
218-
"stream-chat": "^9.27.2",
218+
"stream-chat": "^9.30.1",
219219
"ts-jest": "^29.2.5",
220220
"typescript": "^5.4.5",
221221
"typescript-eslint": "^8.17.0",
@@ -224,7 +224,7 @@
224224
"scripts": {
225225
"clean": "rm -rf dist",
226226
"build": "yarn clean && concurrently './scripts/copy-css.sh' 'yarn build-translations' 'vite build' 'tsc --project tsconfig.lib.json' 'yarn build-styling'",
227-
"build-styling": "sass src/styling/index.scss dist/css/index.css",
227+
"build-styling": "sass src/styling/index.scss dist/css/index.css && sass src/plugins/Emojis/styling/index.scss dist/css/emojis.css",
228228
"build-translations": "i18next-cli extract",
229229
"coverage": "jest --collectCoverage && codecov",
230230
"lint": "yarn prettier --list-different && yarn eslint && yarn validate-translations",
@@ -234,8 +234,8 @@
234234
"prettier": "prettier '**/*.{js,mjs,ts,mts,jsx,tsx,md,json,yml}'",
235235
"prettier-fix": "yarn prettier --write",
236236
"fix-staged": "lint-staged --config .lintstagedrc.fix.json --concurrent 1",
237-
"start": "tsc --watch --sourceMap",
238-
"start:css": "sass --watch src/styling/index.scss dist/css/index.css",
237+
"start": "tsc -p tsconfig.lib.json -w",
238+
"start:css": "sass --watch src/styling:dist/css src/plugins/Emojis/styling:dist/css",
239239
"prepare": "husky install",
240240
"preversion": "yarn install",
241241
"test": "jest",

‎src/components/Attachment/Attachment.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import type { GeolocationProps } from './Geolocation';
3737

3838
const CONTAINER_MAP = {
3939
audio: AudioContainer,
40+
// todo: rename to linkPreview
4041
card: CardContainer,
4142
file: FileContainer,
4243
media: MediaContainer,
@@ -177,7 +178,7 @@ const renderGroupedAttachments = ({
177178
return containers;
178179
};
179180

180-
const getAttachmentType = (
181+
export const getAttachmentType = (
181182
attachment: AttachmentProps['attachments'][number],
182183
): keyof typeof CONTAINER_MAP => {
183184
if (isScrapedContent(attachment)) {

‎src/components/Attachment/Audio.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
22
import type { Attachment } from 'stream-chat';
33

4-
import { DownloadButton, FileSizeIndicator, PlayButton, ProgressBar } from './components';
4+
import { DownloadButton, FileSizeIndicator, ProgressBar } from './components';
55
import { type AudioPlayerState, useAudioPlayer } from '../AudioPlayback';
66
import { useStateStore } from '../../store';
77
import { useMessageContext } from '../../context';
88
import type { AudioPlayer } from '../AudioPlayback/AudioPlayer';
9+
import { PlayButton } from '../Button/PlayButton';
910

1011
type AudioAttachmentUIProps = {
1112
audioPlayer: AudioPlayer;

‎src/components/Attachment/Card.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import ReactPlayer from 'react-player';
55
import type { AudioProps } from './Audio';
66
import { ImageComponent } from '../Gallery';
77
import { SafeAnchor } from '../SafeAnchor';
8-
import { PlayButton, ProgressBar } from './components';
8+
import { ProgressBar } from './components';
99
import { useChannelStateContext } from '../../context/ChannelStateContext';
1010
import { useTranslationContext } from '../../context/TranslationContext';
1111

@@ -15,6 +15,7 @@ import type { Dimensions } from '../../types/types';
1515
import { type AudioPlayerState, useAudioPlayer } from '../AudioPlayback';
1616
import { useStateStore } from '../../store';
1717
import { useMessageContext } from '../../context';
18+
import { PlayButton } from '../Button';
1819

1920
const getHostFromURL = (url?: string | null) => {
2021
if (url !== undefined && url !== null) {

0 commit comments

Comments
 (0)