love from stephen

And it cannot be reused as component outside package

According to your docs you support both "gaming light" and "gaming dark".

Could you provide a quick guide on how to implement that?

1. "notification.mutes_updated" successfully called when I mute the user, but "unmute" is not working,
   API not call this event. I use command to unmute user.
   Is there any config for contextmenu to show "unmute" option?
2. How to hide messages from muted user, but other user need to get muted user messages in channel?

As far as I can tell in version 0.6.15, the mute and flag buttons do not do anything:

I'm using a "livestream" type channel roughly equivalent to the livestream example Getstream.IO has put on codepen:

const LiveObserverChatApp = ({chatChannelId, chatUserId, chatAppId, chatImage, chatName, chatUserToken}) => {
  const chatClient = new StreamChat(chatAppId);
  const chatUser = {
      id: chatUserId,
      name: chatName,
      image: chatImage
    };

  chatClient.setUser(chatUser, chatUserToken);

  const channel = chatClient.channel('livestream', chatChannelId, {});

  return <Chat client={chatClient} theme={'messaging light'}>
    <Channel channel={channel}>
      <Window hideOnThread>
        <MessageList Message={MessageLivestream}/>
        <MessageInput/>
      </Window>
      <Thread Message={MessageLivestream} fullWidth/>
    </Channel>
  </Chat>
}

When I log in as a user added as a moderator to the channel using the server side API or if I log in as a typical user, I do not see any result from pressing either of these actions buttons. For example, if I click "Flag", there is no indication a message is flagged. If I click "Mute", messages from that user are not muted. Are they as yet unimplemented in the components?

Steps to reproduce:

1. Click "attachment" icon
2. Select attachment in the window
3. Click "delete" the attachment on the preview
4. Try to select the same attachment again

Expected result:
The same attachment is selected

Actual result:
The same attachment can't be selected.

node 12.13.1
yarn start

causes the build flow for css to fail. also many packages are outdated (JS ecosystem moves quickly)

Let us know which one you prefer:

🚀 for styled-components and 🎉 for CSS

I can't use Modal i.e. when i want to customize editing of message...

Guys, this "UI-kit" is pretty useless when you want to use it with typescript. You are using doubled declarations of propTypes (one in components, second in ts files). Maybe its good to make refactor of these or make awareness that ts here is not supported?

When clicking on an image preview in 0.7.9, the image modal backdrop is behind the message input, which does not seem correct:

This happens because MessageInputLarge has a hardcoded zIndex of 100 whereas react-images has a z-index of 1.

why are Owners of the chat allowed to edit and delete anybody's chat messages?

https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message.js#L212

This seems like unexpected behavior and allows for anybody to maliciously rewrite the chat history of any channels they created between people

Firstly, I'm not sure if it's a real issue.

Following snippet seems suspicious since both side of if returns same result.

type={
  audio.type === 'audio/vnd.facebook.bridge'
    ? 'audio/mp3'
    : 'audio/mp3'
}

Moreover, if I do a quick googling, seemed to me that type should be audio/vnd.facebook.bridge in that case.

Is there any reason why when tabbing back to our web application stream-chat is trying to execute getClient without us having mounted any components which interact with Stream Chat API?

This error is emitted to the console each time I refocus the Chrome tab containing our app which uses Stream Chat.

The version of stream-chat we are using are as follows.
"stream-chat": "1.2.1",
"stream-chat-react": "0.7.5",

I noticed that the recently added prop types for MessageInputLarge specify that numberOfUploads should be an object.

Farther down in that file, renderUploads calls this prop as so:

<ImageDropzone
  accept={this.props.acceptedFiles}
  multiple={this.props.multipleUploads}
  disabled={
    this.props.numberOfUploads >= this.props.maxNumberOfFiles
      ? true
      : false
  }
  handleFiles={this.props.uploadNewFiles}
>

The docs for channel still say maxNumberOfFiles should be a number, which sounds more correct.

Another property is not typed

I work in the edtech space, where a11y support is a top priority.

It would be a lot easier to sell stream-chat-react to my team's stakeholders if GetstreamIO publicly shared this priority. And as a component kit, stream-chat-react is uniquely positioned to be able to differentiate itself with a11y support.

1.) Will you consider adding a11y support as a product goal in GetstreamIO's marketing materials?

2.) Will you pursue an a11y audit and remediate a11y concerns?

In Channel.componentDidMount(), if there is an error with await channel.watch(), the error message is not trapped.

As a result, when Channel.render() tries to display the error message, it shows up as just Error: with no indication of what the problem was:

.

On Saturday our QA team discovered that Firefox users were unable to complete await channel.watch() without encountering that Error: notification. This issue has been resolved, but it would be helpful to store the error so that the message can be displayed.

The inability to set false for prop grow for MessageInput component inside MessageSimple component (or configure anyhow MessageInput field size) in message edit mode leads to a situation, when large text (in opened Edit message modal) automatically increases the input field, which moves Emoji picker to top and crops it, so the user can't select preferrable emoji:

{editing && (
          <Modal open={editing} onClose={clearEditingState}>
            <MessageInput
              Input={EditMessageForm}
              message={message}
              clearEditingState={clearEditingState}
              updateMessage={updateMessage}
            />
          </Modal>
        )}

So, could you please add the ability to set additional props for MessageInput inside MessageSimple component, and/or to support the fixed multirow size for MessageInput component (e.g. via prop maxRows)

I am implementing react PWA chat and in this, I am implementing invitation functionality.

For that, I create a channel (one-to-one) from the mobile app and send an invitation link which contain channel.

And in PWA we validate that phone number and initiate the chat to that channel.

I want to access the member of that channel but I am not able to access the member list.

This is my following code

Initalizing GetSteram chat object

const chatClient = new StreamChat('getStreamKey');

Initializing chat channel

const channel = chatClient.channel('messaging', this.state.channel);

Getting channel members list

const memberList = channel.state.members;

But in memberList I got an empty array. Can you please tell me what I miss?

Please do support of actions without the need for a picture. The idea is to give the ability to show actions to the client as solo or just with text (without need to set title_link and thumb_url which are obligatory on this moment).

Hey, how can i use your ChannelSearch Component in maybe the ChannelHeader Component?

Will you implement a messageSearch Component in the future?

I am really new to react, but i want to use you components in the right way, maybe you can add a short description with the informations how and where to export and import components you build but don't use it now in other components

I want to write in a render() function

here i show you how i use it now for log messages in my consol.log:

  search(searchValue) {
    const filters = { members: { $in: ['userId'] } };
    const response = this.client.search(
      filters,
      searchValue,
      { limit: 20, offset: 0 },
    );
    response.then(data => {
      console.log(data);
    })
  }

i also change your typings: in index.d.ts
from: on(callbackOrString: string, callbackOrNothing?: any): { unsubsribe(): void };
to: on(callbackOrString: any, callbackOrNothing?: any): { unsubsribe(): void };

search(
filterConditions: object,
from: query: object,
to: query: string,
options: object,
): Promise;

maybe this was an unseen behavior of .js i use .tsx to get typings in VS:Code

Currently MessageSimple component doesn't allow to change default formatting of message timestamp:

const when = moment(message.created_at).calendar();

Could you please support formatDate prop for MessageSimple component, like in DateSeparator case?

/** Override the default formatting of the date. This is a function that has access to the original date object. Returns a string or Node  */
    formatDate: PropTypes.func,

I've seen the section in the readme that mentions how to customize styles. I don't quite understand - if we want to customize the styles, should we should be no longer using the stream-chat-react npm module? How do we specify to stream react chat that we want to use our styles instead of those defaults?

It appears that styles are automatically inserted into the DOM by the component:

For instance, I see that .str-chat is has a height of 100vh - how do I change this?

This package is realy huge - 1.6mB. On bundlephobia - https://bundlephobia.com/[email protected] - I see that:

24.6% of size is emoji-mart
15.2% of size is moment

Maybe, you can change this subpackages to something lightwight one, for example dayjs or date-fns instead moment, or maybe you can do something else to decrease size of package

Hey,
I am trying to make channel list be updated when new conversation is created.

Our use case:

1. User signs up, we create new channel for him
2. Our agents have chat support UI opened
3. New channel does not pop up on top
4. When refreshing page, it is there and then it pops up when there is new message

Channel has 1 member only (user that signed up).
Agents have admin permissions.

I guess because of this it does not trigger any event for admin user when channel is created as he is not added as member to the channel.

Is there a way to get event saying there is new conversation in case of admin user?

I use react-dropzone outside of StreamChat. However, StreamChat sneaks in a version of react-dropzone that is old. This is causing me a lot of problems. It seems I have to downgrade to whatever StreamChat uses. Hard to know what version to use when it is not even included as a dep in your package.json.

There was a recent fix that dealt with fixing scrolling when there are images loading in the chat. This works part of the time, but if you have a slow connection or there are many images, it still improperly loads the chat in the MessageList/ReverseInfiniteScrollList.

Possible solutions I can think of:

• Use a placeholder for these slow images, then onload, replace placeholder with real image
• Using onload, adjust scrollTop as the images load
• Something more complicated and fancy?

Our careful QA team has noticed a UI inconsistency between "Edit Message" and "Message Input" modes. They would like to request more consistency with Skype with respect to a Send action.

Skype has a "send" button (paper airplane icon), and when you edit a post, it turns to a "cancel" icon (X icon), which turns to a "send" button (paper airplane icon) when you start to modify a post that is in edit mode.

Send Action Icon

Edit Message Action Icon [no modifications]

Edit Message Icon [with modifications]

GetstreamIO - no "send" button on new messages

GetstreamIO - "send" and "cancel" button on edit messages

Hello,

Is there something like MessageText & renderText GetStream/stream-chat-react-native#62 in stream-chat-react in order to parse custom text and keep the defaults one (links for instance)?
And actually anything for custom commands or an example for https://getstream.github.io/stream-chat-react/#chatautocomplete?
Thank you!

Currently, Thread component has no parameters like messageActions or MessageInput.
So, regardless of commands/permissions configuration on Dashboard, MessageList component (Thread -> MessageList), gets messageActions property as undefined, and in result the default list of actions (["edit", "delete", "mute", "flag"]) is used, which cannot be overridden for Thread.

As well there is no ability to customize MessageInput component for Thread (MessageInputSmall is used as Input prop of MessageInput instead): so the custom MessageInput in chat can differ from the one in Thread in that chat.

Could you please support these input parameters for Thread, like messageActions/MessageInput, which will be passed to MessageList and MessageInput components respectively?

messageActions: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
MessageInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
...

<MessageList
  ...
  messageActions={this.props.messageActions}
 />
 <MessageInput
   Input={this.props.MessageInput}
   ...
 />

It would be really nice if you had a close / "×" button on the top right of the magnified images modal, and if this button could receive focus.

Right now the user can hit escape to dismiss the modal if they know to do that, but if the user does not know how to do that or opens an especially large image, they may be confused about how to get rid of the modal.

I can't add sendbutton to MessageInput despite it is taken as prop in component.

I have specified connect_events: False on my custom livestream type, and yet my customers are seeing "[Username] has joined the chat" notifications. This seems like a bug. On livestream style chat, connect notifications become very noisy when there are a lot of participants.

Can you recommend a workaround until this is solved?

UPDATE - I found a workaround by putting this in my CSS:

.str-chat__event-component__channel-event {
    display: none;
}

UPDATE 2:
We are using:

python:
stream-chat==0.4.3

js:
stream-chat-react==0.6.20
stream-chat==1.0.4

Is it possible to show new messages DateSeparator and have a flag on each new message that is new?

Example: I have a new message on a channel which i didn't open. When I open it I want to see the 'New messages' DateSeparator and those new messages to have a red background. (Similar to Slack's new messages separator + a flag for each message that is considered new)

Again, same issue, your docs use in MessageSimple method getMessageActions which is omitted in interface MessageUIComponentProps.

Wishlist for Stream Chat React 2.0.
Summary updated January 24th:

Codebase Improvements

• Upgrade Deps
• React to 16.12
• TypeScript
• Hooks
• Show Coverage percentage

Features

• MML
• Message Search component
• Improved performance using one of the recyclerview style libraries for react & Additional benchmarking
• Unread count component

Examples

• better customer support example (see Jeff's design)
• better team example (see Josh' design)
• better livestream example (see Nick's post)

Docs

• Context usage when using hooks needs better docs

Not included

• Styled components (too many people prefer CSS at this point)

One question, is there any way to hide the reactions in the list of messages displayed in a channel?

Thanks

We are trying to extend MessageSimple to allow displaying both the auto translated message + original message. The translations are added as custom data to new messages via webhook.

We have performed the following steps:

• Cloned repo (today, master)
• Run yarn install
• Run yarn build

Result:

• Errors logged during build process (seem scss related)
• dist/index.css still contains scss (see below)

FYI:
Same result when running make.

yarn build log

$ yarn build
yarn run v1.19.1
$ mkdir -p dist/assets assets && rollup -c

src/index.js → dist/index.js, dist/index.es.js...

Error:
        Invalid CSS after "}": expected 1 selector or at-rule, was "../../../node_modul"
Solution:
        fix your Sass code
Line:   164
Column: 2


Error:
        Invalid CSS after "}": expected 1 selector or at-rule, was "../../../node_modul"
Solution:
        fix your Sass code
Line:   164
Column: 2

dist/css/index.css 125 kB
dist/css/index.css 125 kB
created dist/index.js, dist/index.es.js in 7.8s

src/index.js → ./dist/browser.full-bundle.min.js...
[COPY] src/assets/str-chat__alert.svg to dist/assets/str-chat__alert.svg
[COPY] src/assets/str-chat__icon-chevron-down.svg to dist/assets/str-chat__icon-chevron-down.svg      
[COPY] src/assets/str-chat__icon-search.svg to dist/assets/str-chat__icon-search.svg
[COPY] src/assets/str-chat__icon-send.svg to dist/assets/str-chat__icon-send.svg
[COPY] src/assets/str-chat__icon-sprite.png to dist/assets/str-chat__icon-sprite.png
[COPY] src/assets/[email protected] to dist/assets/[email protected]
[COPY] src/assets/str-chat__connection-error.svg to dist/assets/str-chat__connection-error.svg        
[COPY] src/assets/str-chat__loading-indicator.svg to dist/assets/str-chat__loading-indicator.svg      
[COPY] src/assets/[email protected] to dist/assets/[email protected]
[COPY] src/assets/Poweredby_100px-White_VertText.png to dist/assets/Poweredby_100px-White_VertText.png
[COPY] src/assets/[email protected] to dist/assets/[email protected]
[COPY] src/assets/[email protected] to dist/assets/[email protected]
[COPY] src/assets/str-chat__file-file.svg to dist/assets/str-chat__file-file.svg
[COPY] src/assets/[email protected] to dist/assets/[email protected]
[COPY] src/assets/[email protected] to dist/assets/[email protected]
[COPY] src/assets/[email protected] to dist/assets/[email protected]        
[COPY] src/assets/[email protected] to dist/assets/[email protected]        
[COPY] src/assets/[email protected] to dist/assets/[email protected]
created ./dist/browser.full-bundle.min.js in 20.6s
Done in 29.85s.

dist/index.css

/* fonts */
$main-font: 'IBM Plex Sans', sans-serif;
$second-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$mono-font: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
  'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
  'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;

$base-font-weight: 400;
$heavy-font-weight: 700;

/* colors */
$primary-color: magenta;
$secondary-color: #006cff;
$secondary-faded: #bcd8ff;

$dt-bg-team: #1d1f22;

$border-color: rgba(0, 0, 0, 0.08);

$black: black;
$white: white;
$grey: #f0f0f0;

/* miscellaneous */
$border-radius: 16px;
...

if you reply to a message with
1
2
3
4
5
6
7

and delete message '4'. Navigate away from the chat and back to the chat and you'll notice that the reply count is 6, but when you open the thread again, it only shows
1
2
3
'This message was deleted...'

In the doc it says channels are in the chatContext, but it seems like it isn't supported it.

channel, client, and setActiveChannel are the only objects.

I noticed LoadingChannels in the react component docs. I'd like to use this component while waiting for the setUser promise to complete, but it looks like stream-chat-react/src/components/index.js doesn't export it. Is there a reason it's not exported?

I'm seeking to disable file uploads for our normal users, and only enable them for our moderators.

Using the Python API I have created a custom channel type with the following permissions, which eliminate the UploadAttachment permission normal users, and instead adds it to the permissions for channel_moderator users:

When I log in as a non-moderator on a channel that is associated with that custom channel type, I'm still able to see the Upload button, and it still works as a drop zone. How do I disable file upload for certain users?

Note: here are the custom permissions:

<class 'dict'>: {'permissions': [{'action': 'Allow', 'name': 'admin can do almost anything', 'resources': ['CreateChannel', 'ReadChannel', 'UpdateChannelMembers', 'UpdateChannel', 'DeleteChannel', 'CreateMessage', 'UpdateMessage', 'DeleteMessage', 'BanUser', 'UploadAttachment', 'DeleteAttachment', 'UseCommands', 'AddLinks', 'EditUser', 'RunMessageAction'], 'roles': ['admin'], 'owner': False, 'priority': 999}, {'action': 'Allow', 'name': 'Owner permissions', 'resources': ['UpdateMessage', 'DeleteMessage', 'EditUser', 'DeleteAttachment'], 'roles': [], 'owner': True, 'priority': 80}, {'action': 'Allow', 'name': 'User permissions', 'resources': ['ReadChannel', 'CreateChannel', 'CreateMessage', 'AddLinks'], 'roles': ['user', 'channel_moderator', 'channel_member'], 'owner': False, 'priority': 70}, {'action': 'Allow', 'name': 'Moderator only features', 'resources': ['ReadChannel', 'CreateChannel', 'CreateMessage', 'UpdateMessage', 'DeleteMessage', 'UploadAttachment', 'DeleteAttachment', 'UseCommands', 'RunMessageAction', 'BanUser'], 'roles': ['channel_moderator'], 'owner': False, 'priority': 60}, {'action': 'Deny', 'name': 'deny all policy', 'resources': ['*'], 'roles': ['*'], 'owner': False, 'priority': 1}], 'name': 'livestream_custom_01', 'typing_events': False, 'read_events': False, 'connect_events': False, 'search': False, 'reactions': True, 'replies': True, 'mutes': False, 'message_retention': 'infinite', 'max_message_length': 500, 'automod': 'disabled', 'automod_behavior': 'flag', 'commands': []}

Provide global custom MessageInput/handleSubmit for both, message sending and message edition in order to use the same extended handleSubmit function.

Right now the only possible way to extend it is to extend the MessageInput component if so it's not the same component use in Message*** (ex MessageSimple) component.

ror: {"code":43,"message":"JWTAuth error: signature is not valid. Make sure the token is created using the secret for API key "xxxxxxxxxxxx"","StatusCode":401,"duration":""}

Editing a message with uri attachement will duplicate the attachement

I can't seem to figure out the consistent steps to repro, but I'm noticing this the most often when I'm performing a series of creations and deletions of the same 1-1 conversation with the same person, ChannelList often does not handle the 'channel.deleted' and 'notification.added_to_channel' events. This causes the ChannelList list of channels to no longer accurately reflective the user's channels.

I've added log statements in the ChannelList.handleEvent to confirm this. I've been able to "hack" around this by changing the query filters (thus forcing a requery inside ChannelList) every time a conversation is created or deleted, but that causes it's own set of issues.

I am noticing that the server state is updated properly (confirmed by refreshing the page), but ChannelList is not updating the client state properly

Any help or insight greatly appreciated!

I'm using the Livestream chat type, and our customers and clients are complaining that when many people are on the channel, new messages move the viewport. This makes it hard to edit or delete messages when there are many people chatting, because the viewport is moving around so many times per minute.

The standard idiom in chat (see skype, slack, etc) is that when you scroll into the chat history, the viewport stays put so that the messages you are looking at do not move around.

This is a serious issue for our clients, as they cannot easily read back through the history during the livestream session to moderate posts or to synthesize comments.

Can you recommend a workaround for us until this is fixed?

UPDATE:

python:
stream-chat==0.4.3

js:
stream-chat-react==0.6.20
stream-chat==1.0.4

meow

Hello i was wondering if its possible in the next releases, add some kind of customizations for locales in the components

Example #1: Typing text
Example #2: Online state text
Example #3: Dates (Like today, yesterday, months, etc)
Example #4: Message input placeholder
Example #5: Message deleted (I know its coming from backend)

And other places where it might be possible to add some kind of locale customizations, i know its a bit too much, i didn't dig enough in the components so i put what i saw, but please consider this feature, i think it might be a good enhancement and for the react native components too.

Thanks in advance!
Keep the good work going on.

Note: I've opened a StackOverflow question GetstreamIO Chat Moderation about this, though the post here goes in to more detail.

I see that in the Getstream.IO docs under Default Permission Policies a moderator is able to update and delete messages. I can also see that in the tests for channel_permissions in stream-chat-js that a moderator is indeed supposed to be able to edit and delete messages, just as the permissions matrix in the documentation specifies. I cannot get a user that has been added as a moderator on a channel to successfully edit or delete messages that they did not create, however.

It does not seem to me that the current implementation of the MessageList, Message, MessageActionsBox and other components have been designed for this. I also do not see an easy way to override these components.

MessageList instantiates a raw Message component, passing it a Message render prop with, for example, LivestreamMessage or another implementation. Upon render, the Message component instantiates a LivestreamMessage but passes itself as the Message render prop, which makes it so that when MessageActionsBox tries to retrieve its available actions, it must be from stream-chat-react's implementation that excludes moderators.

Going a bit deeper, Message.canDeleteMessage and Message.canEditMessage call this.isMyMessage(message) || this.isAdmin(); and surprisingly do not attempt to query channel permissions; this.isAdmin() only queries whether the user has the global role of Admin. In addition to having these functions query whether a user is moderator, I would expect the implementation to check whether the user has that role app-wide or whether the user has that role only on the specific channel that has been instantiated. For example, I would expect to see something like:

  isModerator = () => this.props.members[this.props.client.userID].role === 'moderator';
  isAdmin = () => this.props.members[this.props.client.userID].role === 'admin';
  canEditMessage = (message) => this.isMyMessage(message) || this.isModerator() || this.isAdmin();
  canDeleteMessage = (message) => this.isMyMessage(message) || this.isModerator() || this.isAdmin();

I was expecting to get typical (non-AI) moderation out of the box with stream-chat-react - is this even possible?

UPDATE 1:
I was able to get a user that was added as a moderator on a channel to be able to edit and delete actions by making moderators admins. This is a poor workaround, as moderators in my implementation are third party entities that should not have elevated permissions. Is there a way to give moderator permissions without conferring an admin role?