Skip to content

Commit 6d2347a

Browse files
MartinCupelaMartinCupela
authored
Merge branch 'master' into feat/redesign/empty-state-indicator-channel-message-list
2 parents 362bc51 + d2a72b5 commit 6d2347a

58 files changed

Lines changed: 656 additions & 168 deletions

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: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
ChannelSort,
66
LocalMessage,
77
TextComposerMiddleware,
8-
Event,
98
createCommandInjectionMiddleware,
109
createDraftCommandInjectionMiddleware,
1110
createActiveCommandGuardMiddleware,
@@ -28,6 +27,7 @@ import {
2827
Window,
2928
WithComponents,
3029
ReactionsList,
30+
WithDragAndDropUpload,
3131
} from 'stream-chat-react';
3232
import { createTextComposerEmojiMiddleware, EmojiPicker } from 'stream-chat-react/emojis';
3333
import { init, SearchIndex } from 'emoji-mart';
@@ -38,6 +38,14 @@ import { useAppSettingsState } from './AppSettings';
3838

3939
init({ data });
4040

41+
const parseUserIdFromToken = (token: string) => {
42+
const [, payload] = token.split('.');
43+
44+
if (!payload) throw new Error('Token is missing');
45+
46+
return JSON.parse(atob(payload))?.user_id;
47+
};
48+
4149
const apiKey = import.meta.env.VITE_STREAM_API_KEY;
4250
const token =
4351
new URLSearchParams(window.location.search).get('token') ||
@@ -79,7 +87,7 @@ const useUser = () => {
7987
}, [userId]);
8088

8189
const tokenProvider = useCallback(() => {
82-
return token
90+
return token && userId === parseUserIdFromToken(token)
8391
? Promise.resolve(token)
8492
: fetch(
8593
`https://pronto.getstream.io/api/auth/create-token?environment=shared-chat-redesign&user_id=${userId}`,
@@ -190,18 +198,22 @@ const App = () => {
190198
additionalChannelSearchProps={{ searchForChannels: true }}
191199
/>
192200
<Channel>
193-
<Window>
194-
<ChannelHeader Avatar={ChannelAvatar} />
195-
<MessageList returnAllReadData />
196-
<AIStateIndicator />
197-
<MessageInput
198-
focus
199-
audioRecordingEnabled
200-
maxRows={10}
201-
asyncMessagesMultiSendEnabled
202-
/>
203-
</Window>
204-
<Thread virtualized />
201+
<WithDragAndDropUpload>
202+
<Window>
203+
<ChannelHeader Avatar={ChannelAvatar} />
204+
<MessageList returnAllReadData />
205+
<AIStateIndicator />
206+
<MessageInput
207+
focus
208+
audioRecordingEnabled
209+
maxRows={10}
210+
asyncMessagesMultiSendEnabled
211+
/>
212+
</Window>
213+
</WithDragAndDropUpload>
214+
<WithDragAndDropUpload className='str-chat__dropzone-root--thread'>
215+
<Thread virtualized />
216+
</WithDragAndDropUpload>
205217
</Channel>
206218
</ChatView.Channels>
207219
<ChatView.Threads>

‎examples/vite/src/index.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,16 +90,18 @@ body {
9090
//max-width: none;
9191
}
9292

93+
.str-chat__dropzone-root--thread,
9394
.str-chat__thread-list-container,
9495
.str-chat__thread-container {
95-
flex: 0 0 360px;
96+
//flex: 0 0 360px;
9697
max-width: 360px;
9798
}
9899

99100
.str-chat__chat-view__threads {
101+
.str-chat__dropzone-root--thread,
100102
.str-chat__thread-container {
101103
flex: 1 1 auto;
102-
min-width: 360px;
104+
//min-width: 360px;
103105
max-width: none;
104106
}
105107
}
@@ -119,7 +121,7 @@ body {
119121
}
120122
}
121123

122-
@container (max-width: 760px) {
124+
@container (max-width: 860px) {
123125
.str-chat__channel-list,
124126
.str-chat__chat-view__selector {
125127
display: none;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
@use 'stream-chat-react/dist/scss/v2/common/CTAButton/CTAButton-layout';
1717
@use 'stream-chat-react/dist/scss/v2/common/CircleFAButton/CircleFAButton-layout';
1818
//@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-layout';
19-
@use 'stream-chat-react/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-layout';
20-
@use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-layout'; // X
19+
//@use 'stream-chat-react/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-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';

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
@use 'stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-theme';
1515
@use 'stream-chat-react/dist/scss/v2/ChannelSearch/ChannelSearch-theme';
1616
//@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-theme';
17-
@use 'stream-chat-react/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-theme';
18-
@use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-theme';
17+
//@use 'stream-chat-react/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-theme';
18+
//@use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-theme';
1919
//@use 'stream-chat-react/dist/scss/v2/Form/Form-theme';
2020
//@use 'stream-chat-react/dist/scss/v2/Icon/Icon-theme';
2121
@use 'stream-chat-react/dist/scss/v2/ImageCarousel/ImageCarousel-theme';

‎src/components/Attachment/Attachment.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,13 @@ export type AttachmentProps = {
5252
attachments: (StreamAttachment | SharedLocationResponse)[];
5353
/** The handler function to call when an action is performed on an attachment, examples include canceling a \/giphy command or shuffling the results. */
5454
actionHandler?: ActionHandlerReturnType;
55-
/** Which action should be focused on initial render, by attachment type (match by action.value) */
55+
/**
56+
* Which attachment action button receives focus on initial render, keyed by attachment type.
57+
* Values must match an action's `value` (e.g. `'send'`, `'cancel'`, `'shuffle'` for giphy attachment).
58+
* Default: `{ giphy: 'send' }`.
59+
* To disable auto-focus (e.g. when rendering the Giphy preview above the composer so focus
60+
* stays in the message input), pass an empty object: `attachmentActionsDefaultFocus={{}}`.
61+
*/
5662
attachmentActionsDefaultFocus?: AttachmentActionsDefaultFocusByType;
5763
/** Custom UI component for displaying attachment actions, defaults to and accepts same props as: [AttachmentActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/AttachmentActions.tsx) */
5864
AttachmentActions?: React.ComponentType<AttachmentActionsProps>;

‎src/components/Avatar/styling/Avatar.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
font-size: var(--typography-font-size-md);
101101
}
102102

103-
&.str-chat__avatar--size-md {
103+
&.str-chat__avatar--size-md {
104104
--avatar-size: 32px;
105105
--avatar-online-badge-size: 12px;
106106
--avatar-icon-size: var(--icon-size-md);

‎src/components/Dialog/base/ContextMenu.tsx‎

Whitespace-only changes.

‎src/components/Dialog/styling/Alert.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
@mixin flex-column {
32
display: flex;
43
flex-direction: column;
@@ -45,4 +44,4 @@
4544
width: 100%;
4645
}
4746
}
48-
}
47+
}

‎src/components/Dialog/styling/Prompt.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
@use '../../../styling/utils';
22

3-
// todo: once we have designs for dialogs + context menus create base class instead of a mixin
4-
@mixin dialog-base {
5-
6-
}
7-
83
.str-chat__dialog-overlay {
94
inset: 0;
105
position: absolute;

‎src/components/DragAndDrop/styling/DragAndDropContainer.scss‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Ported from stream-chat-css DragAndDropContainer (layout + theme)
2+
3+
.str-chat {
4+
/* Top border of the component */
5+
--str-chat__drag-and-drop-container-border-block-start: 2px solid transparent;
6+
7+
/* Bottom border of the component */
8+
--str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
9+
10+
/* Top border of the component on dragover */
11+
--str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid
12+
var(--str-chat__primary-color);
13+
14+
/* Bottom border of the component on dragover */
15+
--str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid
16+
var(--str-chat__primary-color);
17+
18+
/* Left (right in RTL layout) border of the component on dragover */
19+
--str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
20+
21+
/* Right (left in RTL layout) border of the component on dragover */
22+
--str-chat__drag-and-drop-container-on-dragover-border-inline-end: none;
23+
}
24+
25+
.str-chat__drag-and-drop-container--dragging {
26+
cursor: grabbing;
27+
}
28+
29+
.str-chat__drag-and-drop-container__item[draggable='true'] {
30+
cursor: grab;
31+
32+
&:active {
33+
background: transparent;
34+
}
35+
}
36+
37+
.str-chat__drag-and-drop-container__item {
38+
display: flex;
39+
width: 100%;
40+
padding-block: 0.25rem;
41+
border-bottom: var(--str-chat__drag-and-drop-container-border-block-start);
42+
border-top: var(--str-chat__drag-and-drop-container-border-block-start);
43+
44+
&.str-chat__drag-and-drop-container__item--dragged-over-from-top {
45+
border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end);
46+
}
47+
48+
&.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
49+
border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start);
50+
}
51+
}

0 commit comments

Comments
 (0)