Skip to content

Instantly share code, notes, and snippets.

@courthead

courthead/stream-chat-test.html

Created August 6, 2021 23:32
Show Gist options
  • Save courthead/de6bfa0bcc72edcb26ef1879a699225d to your computer and use it in GitHub Desktop.
Save courthead/de6bfa0bcc72edcb26ef1879a699225d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
stream-chat-test.html
<html>
<head>
<title>Testing!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/stream-chat-react@latest/dist/css/index.css"></link>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/stream-chat@latest" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/stream-chat-react@latest"></script>
<script>
const { Chat, Channel, ChannelHeader, ChannelList, MessageInput, MessageList, Thread } = StreamChatReact;
const chatClient = StreamChat.getInstance('dz5f4d5kzrue');
const userToken = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoibGF0ZS1zdW4tOSIsImV4cCI6MTYyNjE0MzYwNX0.1Kj06d9ygaNdph2bN1ZKBlt8_REYdKptqFH6BPTeUzI';
chatClient.connectUser(
{
id: 'late-sun-9',
name: 'late',
image: 'https://getstream.io/random_png/?id=late-sun-9&name=late',
},
userToken,
);
const channel = chatClient.channel('messaging', 'late-sun-9', {
// add as many custom fields as you'd like
image: 'https://www.drupal.org/files/project-images/react.png',
name: 'Talk about React',
members: ['late-sun-9'],
});
const Picker = function () {
return React.createElement('div', {
className: 'str-chat',
style: {
height: 'unset'
}
}, React.createElement(Chat, {
client: chatClient,
theme: 'messaging dark'
}, React.createElement(ChannelList, {
filters: { type: 'messaging' },
options: { limit: 3, watch: true },
sort: { cid: 1, last_message_at: -1 },
})));
}
class App extends React.Component {
render() {
return React.createElement(Chat, { client: chatClient, theme: "messaging dark" },
React.createElement(Picker, null),
React.createElement(Channel, { channel: channel },
React.createElement(Window, null,
React.createElement(ChannelHeader, null),
React.createElement(MessageList, null),
React.createElement(MessageInput, null),
),
React.createElement(Thread, null)
)
);
}
};
</script>
</head>
<body>
<div class="container"></div>
<script>
ReactDOM.render(React.createElement(App), document.querySelector('.container'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment