getstream/website-react-examples

website-react-examples

Apps

• customer-support
• social-messenger
• gaming-livestream
• team
• virtual-event

Important

• Use environment vars for apiKeys etc
• Make sure apiKey/userId/userToken can be set through queryParams

website-react-examples's Issues

addMembers() not working

Hi, guys. I'm trying to add a member to an existing channel and I keep getting this error
Error: StreamChat error code 17: UpdateChannel failed with error: "cannot add members to the distinct channel they don't belong to, please create a new distinct channel with the desired members

I'm following this doc.

Commercial Use of the code

Are the React applications open source and available for commercial use by our clients? If not, what additional permissions or licenses are required for usage by our customers?

Customer support - iPhone 11 - Responsiveness

#2

How: press the ”customer support” link on my iPhone 11.

how it work?

with so many errors?!

yarn install error in gaming-livestream

node version 14.20.1
ubuntu os 20.04

when I install yarn, I get this error.

/team doesn't run

× Unhandled Rejection (Error): The "id" field on the user is missing

Hi , I am trying to use your livestream chat example .
I pulled the files and then run npm install and after that i do a npm start.
but i got this error :

Unhandled Rejection (Error): The "id" field on the user is missing

What should i do ?

Ability to get the selected channel when using ChannelList component

Hi, I am working to integrate streamchat into one of my web applications using react.

<Chat client={chatClient} theme={`messaging ${theme}`}>
      <div id='mobile-channel-list' onClick={toggleMobile}>
        <ChannelList
          filters={filters}
          sort={sort}
          options={options}
        />
      </div>
      <div>
        <Channel
          Input={MessagingInput}
          maxNumberOfFiles={10}
          Message={CustomMessage}
          multipleUploads={true}
          ThreadHeader={MessagingThreadHeader}
          TypingIndicator={() => null}
        >
          {isCreating && (
            <CreateChannel toggleMobile={toggleMobile} onClose={() => setIsCreating(false)} />
          )}
          <GiphyContext.Provider value={giphyContextValue}>
            <ChannelInner theme={theme} toggleMobile={toggleMobile} />
          </GiphyContext.Provider>
        </Channel>
      </div>
    </Chat>

For ChannelList, I want a callback something like onSelected where I can get a selected channel and make use of it for the Channel component. Is this possible?

All the demo examples are deprecated. Unable to get any help

Hi, I am really in a bad situation right now.
I have tried reading the docs, I need to create a team chat system.
I tried to run your demo example. It worked but when I integrated it in my project I got this erro

./src/components/studentDashboard/chatContainer/components/PinnedMessageList/PinnedMessageList.js
Attempted import error: 'ChannelContext' is not exported from 'stream-chat-react'.

I am still not sure what could be the problem. But then I noticed the package versions.
Your example is at

"stream-chat": "^2.12.0",
"stream-chat-react": "^3.1.2",

And my current project is at latest.

 "stream-chat": "^3.10.0",
"stream-chat-react": "^6.0.2",

What can I do, Can anyone please just help me? I only need some guidance on how to build custom components for team chat example.

Social-messenger-ts builds and start but the page is blank

I add my keys, installed, and started the repo. I'm not sure what to do

website-react-examples/social-messenger throws an exception

I am trying to get the social-messenger example running. After setting the tokens correctly, the App throws an exception each time I am trying to send a message:

SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.

Any thoughts?

Issue with social-messenger-ts

Hello team, I tried to run the social-messenger-ts repository but unfortunately didn't work.
I added the variable keys to the .env file but this was my final result.

I am also receiving this error on my console tab on Google Chrome.

These were my steps:

1. yarn install
2. copied .env-example to .env.development
3. replaced the example keys with my keys
4. run

To find the REACT_APP_STREAM_KEY, I used this value:

To find the REACT_APP_USER_ID, I used this value:

To find the REACT_APP_USER_TOKEN, I used the link mentioned with the secret and user id mentioned above.

Probably, I am missing something since it is my first time using this service, but I would appreciate some help, thank you in advance.

Question: How do you modify the inline `ChatAutocomplete` height?

I have looked through the docs and have a conversation with support but I can't figure out how these demos were able to achieve different values for the inline height style on the chat input?

Social Messenger: style="height: 38px !important;"
Team Chat Demo: style="height: 49px !important;"
Live Stream: style="height: 52px !important;"

I want to make the input much smaller in my application as well but based on the docs I find myself ending up having to re-implement all the features of ChatAutoComplete, which is leading to an unknown amount of feature gaps that I am sacrificing for better style. I noticed for instance the social messaging input still uses ChatAutoComplete.

Do not update the message in the channel preview when deleting the message.

Describe the bug

Do not update the message in the channel preview when deleting the message.

To Reproduce

Screen.Recording.2023-11-27.at.09.44.22.mov

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Package version

• stream-chat-react:
• stream-chat-css:
• stream-chat-js:

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

MessageTeam not found in stream-chat-react

Hi!

I'm currently following this tutorial on building a chat messaging app, and I've also looked to this demo for assistance.

When I try to import MessageTeam from steam-chat-react, I get this error in my browser:

This is how I'm importing the export:
import { Channel, useChatContext, MessageTeam, } from 'stream-chat-react';

and using it like this:
<ChannelMessage={(messageProps, i) => (<MessageTeam key={i} {...messageProps} />

Is this export deprecated? If so, is there another option?

Thanks!

Trouble running the examples

Hi, I'm trying to try out the examples. Running:

cd social-messenger
yarn
yarn start

gets me:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)

and

cd social-messenger-ts
cp .env-example .env.development
cat .env.development
# The key of your App
REACT_APP_STREAM_KEY=qkg...key from here:

# The user id (must be a valid user in your app)
REACT_APP_USER_ID=TeleportConnect

Where do I get this from? here?

# The user token (you can use https://getstream.io/chat/docs/react/tokens_and_authentication/?language=javascript#manually-generating-tokens)
REACT_APP_USER_TOKEN=eyJ.....

Generated from https://getstream.io/chat/docs/react/tokens_and_authentication/?language=javascript#manually-generating-tokens
with UserID TeleportConnect

# Not needed for local development, you can leave it empty
REACT_APP_TARGET_ORIGIN=

yarn install
yarn start

gets me in the browser:

useConnectUser.ts:39 Failed to connect user Error: userToken does not have a user_id or is not matching with user.id

with a blank page.

Any ideas?

On a MacBook Air M2 Ventura. Node.js v18.12.1.

feat: upgrade apps to stream-chat-react v10

Motivation

Introduce the latest fixes and features into the demo apps.

Not accessible

I succesfully cloned the app
it ran correctly on my browser
Only that it did not ask me to create an account or log in
the only display i get is the sidebar and this {Connection error please try again}