25 | { renderFiles() }
26 |
27 | )
28 | }
29 |
30 | export default FileRow
--------------------------------------------------------------------------------
/example/src/Pages/ChatTutorial/ChatFeed/MyMessage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function MyMessage(props) {
4 | const { message } = props
5 |
6 | if (message.attachments && message.attachments.length > 0) {
7 | return (
8 |
27 | { message.text }
28 |
29 | );
30 | }
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/NewMessageForm/SendButton.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 |
3 | import { ArrowUpOutlined } from '@ant-design/icons'
4 |
5 | const SendButton = () => {
6 | const [hover, setHover] = useState(false)
7 |
8 | return (
9 |
10 |
24 |
25 | );
26 | }
27 |
28 | export default SendButton
29 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/Messages/DatePartition/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { getDateTime, formatDateTime } from '../../../Utilities/timezone'
3 |
4 | const DatePartition = props => {
5 | const { lastCreated, created } = props
6 |
7 | function getDate(date) {
8 | return date ? date.substr(0, 10) : null
9 | }
10 |
11 | const lastDate = getDate(lastCreated)
12 | const thisDate = getDate(created)
13 |
14 | if (lastCreated && lastDate === thisDate) return
15 |
16 | return (
17 |
18 | { formatDateTime(getDateTime(created, props.offset)) }
19 |
20 | )
21 | }
22 |
23 | export default DatePartition
24 |
25 | const styles = {
26 | dateText: {
27 | width: '100%',
28 | textAlign: 'center',
29 | paddingTop: '4px',
30 | paddingBottom: '10px',
31 | fontSize: '15px',
32 | color: 'rgba(0, 0, 0, .40)'
33 | }
34 | }
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/NewMessageForm/ImagesRow.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Thumbnail from './Thumbnail'
4 |
5 | import { isImage } from './isImage'
6 |
7 | const ImagesRow = props => {
8 | function renderFiles() {
9 | return props.files.map((file, index) => {
10 | if(isImage(file.name)) {
11 | return (
12 |
29 | { renderFiles() }
30 |
31 | )
32 | }
33 |
34 | export default ImagesRow
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/MessageFormSocial/edit.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import { editMessage } from 'react-chat-engine'
4 |
5 | import { Button, TextInput } from 'react-chat-engine'
6 |
7 | const MessageEditForm = props => {
8 | const [value, setValue] = useState('')
9 |
10 | function handleChange(event) {
11 | setValue(event.target.value);
12 | }
13 |
14 | function handleSubmit(event) {
15 | event.preventDefault();
16 |
17 | editMessage(
18 | props.conn,
19 | props.chatId,
20 | props.message.id,
21 | { text: value },
22 | (data) => { }
23 | )
24 | }
25 | return (
26 |
36 | );
37 | }
38 |
39 | export default MessageEditForm
--------------------------------------------------------------------------------
/src/components/ChatEngine/Utilities/timezone.js:
--------------------------------------------------------------------------------
1 | export function getDateTime(date, offset) {
2 | if (!date) return ''
3 |
4 | date = date.replace(' ', 'T')
5 | offset = offset ? offset : 0
6 |
7 | const year = date.substr(0,4)
8 | const month = date.substr(5,2)
9 | const day = date.substr(8,2)
10 | const hour = date.substr(11,2)
11 | const minute = date.substr(14,2)
12 | const second = date.substr(17,2)
13 |
14 | var d = new Date(`${year}-${month}-${day}T${hour}:${minute}:${second}`)
15 | d.setHours(d.getHours() + offset)
16 | return d
17 | }
18 |
19 | const options = { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' }
20 |
21 | export function formatTime(dateTime) {
22 | var time = dateTime.toLocaleString('en-US')
23 | return time.split(' ')[1].slice(0, -3) + ' ' + time.slice(-2)
24 | }
25 |
26 | export function formatDate(dateTime) {
27 | return dateTime.toLocaleString('en-US', options)
28 | }
29 |
30 | export function formatDateTime(dateTime) {
31 | return formatTime(dateTime) + ', ' + formatDate(dateTime)
32 | }
33 |
--------------------------------------------------------------------------------
/example/src/Pages/UserSocketFeedPage/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { ChatEngineWrapper, Socket, ChatFeed } from 'react-chat-engine'
4 |
5 | import { DEVELOPMENT, PROJECT_ID, USER_NAME, USER_SECRET, CHAT_ID } from '../../consts'
6 |
7 | import { Row, Col } from 'react-grid-system'
8 | import { setConfiguration } from 'react-grid-system';
9 |
10 | setConfiguration({ maxScreenClass: 'xl', gutterWidth: 0 });
11 |
12 | const UserSocketPage = () => {
13 | return (
14 |
9 | 
28 |
29 | )
30 | }
31 |
32 | export default CreateChat
33 |
--------------------------------------------------------------------------------
/example/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import RootPage from './Pages';
4 |
5 | import thunk from "redux-thunk";
6 | import promise from 'redux-promise';
7 | import rootReducer from './Reducers';
8 | import { Provider } from 'react-redux';
9 | import { createStore, applyMiddleware } from 'redux';
10 |
11 | import storage from 'redux-persist/lib/storage';
12 | import { persistStore, persistReducer } from 'redux-persist';
13 | import { PersistGate } from 'redux-persist/integration/react';
14 |
15 | const persistConfig = { key: '2', storage };
16 | const persistedReducer = persistReducer(persistConfig, rootReducer);
17 |
18 | const createStoreWithMiddleware = applyMiddleware(promise, thunk)(createStore);
19 | export const store = createStoreWithMiddleware(persistedReducer);
20 | const persistor = persistStore(
21 | store,
22 | {},
23 | () => {}
24 | );
25 |
26 | function App() {
27 | return (
28 |
13 | Welcome!
14 |
15 |
19 | Create a new chat to get started.
20 |
21 |
22 |
28 | 0 ? '6px 16px' : '0px'
30 | }}
31 | >
32 | { renderFiles() }
33 |
34 | )
35 | }
36 |
37 | export default FilesRow
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/Steps/AuthFail/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const AuthFail = (props) => {
4 | const project = props.projectID ? props.projectID : props.publicKey
5 | return (
6 |
10 | 
23 |
24 | )
25 | }
26 |
27 | export default AuthFail
--------------------------------------------------------------------------------
/example/tests/tests_pages/homePage.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | url: 'http://localhost:3001',
3 | elements: {
4 | userNameInput: '#home-page-username-input',
5 | userSecretInput: '#home-page-password-input',
6 | loginButton: '#home-page-login-button',
7 | logoutButton: '#home-page-logout-button',
8 | newChatButton: '#new-chat-plus-button',
9 | newChatInput: '#ce-new-chat-title-field',
10 | addUserInput: '#ce-add-username-input',
11 | newMessageInput: '.ql-editor',
12 | newMessageButton: '#ce-send-message-button',
13 | optionsSettings: '#ce-options-drop-down',
14 | deleteChatButton: '#ce-delete-chat-button',
15 | // Direct Chats
16 | newDirectChatInput: '#new-dc-user',
17 | newDirectChatButton: '#new-dc-user-btn',
18 | },
19 | commands: [{
20 | assertText(element, expectedText, assertText){
21 | return this
22 | .getText(element, function(result) {
23 | this.assert.equal(
24 | result.value,
25 | expectedText,
26 | assertText
27 | );
28 | })
29 | },
30 | set(element, value){
31 | return this
32 | .click(element)
33 | .clearValue(element)
34 | .setValue(element, value)
35 | }
36 | }]
37 | }
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatSettings/PhotosSettings/Thumbnail.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const Thumbnail = props => {
5 | const { attachment } = props
6 |
7 | if (!attachment) { return }
8 |
9 | return (
10 |
14 | Your credentials are incorrect. Make sure your Project ID, Username, and Password are correct here.
15 |
16 |
17 |
23 |
11 |
12 |
13 | 
20 |
21 | )
22 | }
23 |
24 | export default Thumbnail
25 |
26 | const styles = {
27 | container: {
28 | position: 'relative',
29 | width: 'calc(33% - 8px)',
30 | border: '1px solid white',
31 | display: 'inline-block',
32 | cursor: 'pointer'
33 | },
34 | image: {
35 | top: '0px',
36 | width: '100%',
37 | height: '100%',
38 | position: 'absolute',
39 | objectFit: 'cover'
40 | }
41 | }
42 |
43 | Thumbnail.propTypes = {
44 | attachment: PropTypes.object.isRequired,
45 | }
--------------------------------------------------------------------------------
/src/components/Context/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, createContext } from 'react'
2 |
3 | export const ChatEngineContext = createContext()
4 |
5 | export const ChatEngineWrapper = (props) => {
6 | const [conn, setConn] = useState(null)
7 | const [creds, setCreds] = useState(null)
8 | const [sessionToken, setSessionToken] = useState('')
9 | const [chats, setChats] = useState(null)
10 | const [messages, setMessages] = useState({})
11 | const [activeChat, setActiveChat] = useState(null)
12 | const [typingCounter, setTypingCounter] = useState({})
13 | const [loadMoreMessages, setLoadMoreMessages] = useState(false)
14 | const [isBottomVisible, setIsBottomVisible] = useState(false)
15 |
16 | const value = {
17 | conn,
18 | setConn,
19 | creds,
20 | setCreds,
21 | sessionToken,
22 | setSessionToken,
23 | chats,
24 | setChats,
25 | messages,
26 | setMessages,
27 | activeChat,
28 | setActiveChat,
29 | typingCounter,
30 | setTypingCounter,
31 | loadMoreMessages,
32 | setLoadMoreMessages,
33 | isBottomVisible,
34 | setIsBottomVisible
35 | }
36 |
37 | return (
38 |
24 |
28 |
34 |
35 | )
36 | }
37 |
38 | export default PhotosSettings
39 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/components/Effects/Boop/useBoop.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSpring } from 'react-spring';
3 |
4 | export default function useBoop({
5 | x = 0,
6 | y = 0,
7 | rotation = 0,
8 | scale = 1,
9 | timing = 150,
10 | springConfig = {
11 | tension: 300,
12 | friction: 10,
13 | },
14 | width = 'auto'
15 | }) {
16 | const [isBooped, setIsBooped] = React.useState(false);
17 | const style = useSpring({
18 | display: 'inline-block',
19 | backfaceVisibility: 'hidden',
20 | transform: isBooped
21 | ? `translate(${x}px, ${y}px)
22 | rotate(${rotation}deg)
23 | scale(${scale})`
24 | : `translate(0px, 0px)
25 | rotate(0deg)
26 | scale(1)`,
27 | config: springConfig,
28 | width: width,
29 | });
30 | React.useEffect(() => {
31 | if (!isBooped) { return; }
32 | const timeoutId = window.setTimeout(() => {
33 | setIsBooped(false);
34 | }, timing);
35 | return () => { window.clearTimeout(timeoutId); };
36 | }, [isBooped]);
37 | const trigger = React.useCallback(() => {
38 | setIsBooped(true);
39 | }, []);
40 | return [style, trigger];
41 | }
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/Steps/IceBreaker/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 |
3 | import { ChatEngineContext } from 'react-chat-engine'
4 |
5 | const IceBreaker = () => {
6 | const { activeChat }= useContext(ChatEngineContext)
7 | const gifs = [
8 | 'https://chat-engine-assets.s3.amazonaws.com/welcome_gifs/peace.gif',
9 | 'https://chat-engine-assets.s3.amazonaws.com/welcome_gifs/thumbsup.gif',
10 | ]
11 | const gif = gifs[(activeChat ? activeChat : 0) % gifs.length]
12 |
13 | return (
14 |
29 |
30 |
31 | { renderPhotos(chat.attachments) }
32 |
33 |
18 | 
31 |
32 | )
33 | }
34 |
35 | export default IceBreaker
36 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatSettings/OptionsSettings/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 |
3 | import { Button, deleteChat, ChatEngineContext } from 'react-chat-engine'
4 |
5 | import SettingsBlock from '../SettingsBlock'
6 |
7 | const OptionsSettings = () => {
8 | const { conn, chats, activeChat } = useContext(ChatEngineContext)
9 | const chat = chats && chats[activeChat]
10 |
11 | if (!chat) return
12 |
13 | return (
14 |
22 | No messages here yet...
23 |
24 |
25 |
15 |
19 |
32 |
33 | )
34 | }
35 |
36 | export default OptionsSettings
37 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Chat Engine
2 |
3 | So you're interested in helping out, sweet!
4 |
5 | Let's show you what you need to get developer access to the project:
6 |
7 | ### 1. Create a consts/index.js file.
8 |
9 | Create a example/src/consts/index.js file with the following contents. NOTE: Replace the values with the correct parts of _your_ Chat Engine project.
10 |
11 | ```
12 | export const DEVELOPMENT = false
13 |
14 | export const ROOT_URL = 'https://api.chatengine.io/'
15 |
16 | export const PROJECT_ID = prod ? '00000000-0000-0000-0000-000000000000'
17 | export const USER_NAME = 'Adam_La_Morre'
18 | export const USER_SECRET = 'pass1234'
19 |
20 | export const CHAT_ID = 1
21 | export const CHAT_ACCESS_KEY = 'ca-00000000-0000-0000-0000-000000000000'
22 |
23 | ```
24 |
25 | ### 2. Start the project
26 |
27 | In the top-level dir, run `yarn` to install deps, then `yarn start` to start the ongiong build.
28 |
29 | Additionally the example dir is where we test the newest react-chat-engine instance. Run `yarn` to install deps for the example projects, then run `yarn start` to start the app in the browser.
30 |
31 |
34 |
--------------------------------------------------------------------------------
/example/src/Pages/DirectChatsPage/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 |
3 | import { ChatEngine, getOrCreateChat } from 'react-chat-engine'
4 |
5 | import { DEVELOPMENT, PROJECT_ID, USER_NAME, USER_SECRET } from '../../consts'
6 |
7 | const DirectChatPage = () => {
8 | const [username, setUsername] = useState('')
9 |
10 | function createDirectChat(creds) {
11 | getOrCreateChat(
12 | creds,
13 | { is_direct_chat: true, usernames: [username] },
14 | () => setUsername('')
15 | )
16 | }
17 |
18 | function renderChatForm(creds) {
19 | return (
20 |
20 |
21 |
22 |
31 |
21 | setUsername(e.target.value)} />
22 |
23 |
24 | )
25 | }
26 |
27 | return (
28 | {props.children}
36 | }
37 |
38 | export default RenderTrigger
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatList/ChatLoader.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from 'react'
2 |
3 | import { LoadingOutlined } from '@ant-design/icons'
4 |
5 | const ChatLoader = props => {
6 | function useOnScreen(ref) {
7 | const [isIntersecting, setIntersecting] = useState(false)
8 |
9 | const observer = new IntersectionObserver(
10 | ([entry]) => {
11 | setIntersecting(entry.isIntersecting)
12 | if (entry.isIntersecting) {
13 | props.onVisible()
14 | }
15 | }
16 | )
17 |
18 | useEffect(() => {
19 | observer.observe(ref.current)
20 | // Remove the observer as soon as the component is unmounted
21 | return () => { observer.disconnect() }
22 | }, [])
23 |
24 | return isIntersecting
25 | }
26 |
27 | const ref = useRef()
28 | const isVisible = useOnScreen(ref)
29 |
30 | return (
31 |
32 |
36 | )
37 | }
38 |
39 | export default ChatLoader
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatSettings/PeopleSettings/PersonForm/PersonOption/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import { Avatar } from 'react-chat-engine'
5 |
6 |
7 | const PersonOption = props => {
8 | const [focused, setFocused] = useState(false)
9 |
10 | const { avatar, username } = props.person
11 |
12 | return (
13 |
33 |
35 | setFocused(true)}
16 | onMouseLeave={() => setFocused(false)}
17 | onClick={() => props.onClick && props.onClick()}
18 | style={{ ...styles.option, ...{ backgroundColor: focused ? '#f5f5f5' : 'white'} }}
19 | >
20 |
28 | );
29 | }
30 |
31 | export default PersonOption
32 |
33 | const styles = {
34 | option: {
35 | padding: '4px 16px',
36 | cursor: 'pointer',
37 | fontSize: '15px',
38 | display: 'flex'
39 | },
40 | }
41 |
42 | PersonOption.propTypes = {
43 | person: PropTypes.object.isRequired,
44 | }
--------------------------------------------------------------------------------
/src/actions/messages/sendMessage.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import * as str from '../../actions'
3 | import { getHeaders } from '../auth'
4 |
5 | export function sendMessage(props, chatId, data, callback) {
6 | let formdata = new FormData()
7 |
8 | if (data.attachments) {
9 | for (let i = 0; i < data.attachments.length; i++) {
10 | formdata.append('attachments', data.attachments[i], data.attachments[i].name)
11 | }
12 | } else if (data.files) {
13 | for (let i = 0; i < data.files.length; i++) {
14 | formdata.append('attachments', data.files[i], data.files[i].name)
15 | }
16 | }
17 |
18 | if (data.created) {
19 | formdata.append('created', data.created)
20 | }
21 |
22 | formdata.append('text', data.text)
23 | formdata.append('sender_username', data.sender_username)
24 | formdata.append('custom_json', JSON.stringify(data.custom_json ? data.custom_json : {}))
25 |
26 | axios.post(
27 | `${str.getApiUrl(props)}/chats/${chatId}/messages/`,
28 | formdata,
29 | { headers: getHeaders(props) }
30 | )
31 |
32 | .then((response) => {
33 | callback && callback(response.data)
34 | })
35 |
36 | .catch((error) => {
37 | console.log('Send Messages Error', error)
38 | });
39 |
40 | }
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/NewMessageForm/FilePreview.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 |
3 | import { FileOutlined } from '@ant-design/icons'
4 |
5 | import { CloseCircleTwoTone } from '@ant-design/icons'
6 |
7 | const FilePreview = props => {
8 | const [hovered, setHovered] = useState(false)
9 |
10 | return (
11 |
21 |
23 |
24 |
25 | {props.person.username}
26 |
27 | setHovered(true)}
13 | onMouseLeave={() => setHovered(false)}
14 | style={{
15 | ...styles.filePreview,
16 | ...{ paddingRight: hovered ? '6px' : '26px' }
17 | }}
18 | >
19 | props.onRemove && props.onRemove()}
26 | />
27 | }
28 |
29 | )
30 | }
31 |
32 | export default FilePreview
33 |
34 | const styles = {
35 | filePreview: {
36 | padding: '12px',
37 | display: 'inline-block',
38 | position: "relative",
39 | border: '1px solid #40a9ff',
40 | color: '#434343',
41 | borderRadius: '14px'
42 | },
43 | closeIcon: {
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/example/src/teams.css:
--------------------------------------------------------------------------------
1 | /* TEAMS */
2 |
3 | .ce-chat-list {
4 | background-color: rgb(240, 240, 240) !important;
5 | }
6 |
7 | .ce-chats-container {
8 | background-color: rgb(240, 240, 240) !important;
9 | }
10 |
11 | .ce-active-chat-card {
12 | background-color: #cabcdc !important;
13 | border: 4px solid #cabcdc !important;
14 | border-radius: 0px !important;
15 | }
16 |
17 | .ce-chat-subtitle-text {
18 | color: #595959 !important;
19 | }
20 |
21 | .ce-text-input {
22 | border-radius: 6px !important;
23 | border: 1px solid #3b2a50 !important;
24 | }
25 |
26 | .ce-primary-button {
27 | border-radius: 6px !important;
28 | background-color: #7554a0 !important;
29 | position: relative;
30 | bottom: 1px;
31 | }
32 |
33 | .ce-danger-button {
34 | background-color: white !important;
35 | border-radius: 22px !important;
36 | }
37 |
38 | .ce-settings {
39 | background-color: rgb(240, 240, 240) !important;
40 | }
41 |
42 | .ce-autocomplete-input {
43 | border-radius: 6px !important;
44 | border: 1px solid #3b2a50 !important;
45 | }
46 |
47 | .ce-autocomplete-options {
48 | border-radius: 6px !important;
49 | border: 1px solid #3b2a50 !important;
50 | background-color: white !important;
51 | }
52 |
53 | .ce-chat-settings-container {
54 | padding-top: 12px !important;
55 | }
56 |
57 | .ce-chat-avatars-row {
58 | display: none !important;
59 | }
60 |
--------------------------------------------------------------------------------
/example/src/Pages/SupportEngine/SupportEngine/index.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect, useState } from "react";
2 |
3 | import SupportWindow from './SupportWindow'
4 |
5 | import Avatar from './Avatar'
6 |
7 | const SupportEngine = () => {
8 | const wrapperRef = useRef(null);
9 | useOutsideAlerter(wrapperRef);
10 | const [visible, setVisible] = useState(false)
11 |
12 | function useOutsideAlerter(ref) {
13 | useEffect(() => {
14 | function handleClickOutside(event) {
15 | if (ref.current && !ref.current.contains(event.target)) {
16 | setVisible(false)
17 | }
18 | }
19 |
20 | document.addEventListener("mousedown", handleClickOutside);
21 | return () => {
22 | document.removeEventListener("mousedown", handleClickOutside);
23 | };
24 | }, [ref]);
25 | }
26 |
27 | return (
28 |
29 | setVisible(true)}
33 | style={{
34 | position: 'fixed',
35 | bottom: '24px',
36 | right: '24px',
37 | }}
38 | />
39 |
40 | )
41 | }
42 |
43 | export default SupportEngine;
44 |
45 |
--------------------------------------------------------------------------------
/example/src/Pages/ChatTutorial/ChatFeed/TheirMessage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function TheirMessage(props) {
4 | const { lastMessage, message } = props
5 | const isFirstMessageByUser = !lastMessage || lastMessage.sender.username !== message.sender.username
6 |
7 | return (
8 |
9 | {
10 | isFirstMessageByUser &&
11 |
15 | }
16 |
17 | {
18 | message.attachments && message.attachments.length > 0 ?
19 | 
:
25 |
37 | );
38 | }
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-chat-engine-example",
3 | "homepage": ".",
4 | "version": "0.0.0",
5 | "private": true,
6 | "scripts": {
7 | "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
8 | "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
9 | "test": "nightwatch -c tests/tests_conf/nightwatch.conf.js",
10 | "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject",
11 | "deploy": "node ../node_modules/react-scripts/bin/react-scripts.js build && aws s3 cp --recursive ./build s3://support.chatengine.io"
12 | },
13 | "dependencies": {
14 | "history": "^5.0.0",
15 | "react": "link:../node_modules/react",
16 | "react-chat-engine": "link:..",
17 | "react-dom": "link:../node_modules/react-dom",
18 | "react-grid-system": "^7.1.2",
19 | "react-redux": "^7.2.2",
20 | "react-router-dom": "^5.2.0",
21 | "react-scripts": "link:../node_modules/react-scripts",
22 | "redux": "^4.0.5",
23 | "redux-form": "^8.3.7",
24 | "redux-persist": "^6.0.0",
25 | "redux-promise": "^0.6.0",
26 | "redux-thunk": "^2.3.0"
27 | },
28 | "devDependencies": {
29 | "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
30 | "chromedriver": "95.0.0",
31 | "nightwatch": "^1.6.3"
32 | },
33 | "eslintConfig": {
34 | "extends": "react-app"
35 | },
36 | "browserslist": [
37 | ">0.2%",
38 | "not dead",
39 | "not ie <= 11",
40 | "not op_mini all"
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/components/Effects/Float/useFloat.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSpring } from 'react-spring';
3 |
4 | export default function useBoop({
5 | x = 0,
6 | y = 0,
7 | rotation = 0,
8 | scale = 1,
9 | timing = 150,
10 | shadowX = 150,
11 | shadowY = 150,
12 | shadowBlur = 150,
13 | shadowColor = 150,
14 | springConfig = {
15 | tension: 300,
16 | friction: 10,
17 | },
18 | width = 'auto'
19 | }) {
20 | const [isBooped, setIsBooped] = React.useState(false);
21 | const style = useSpring({
22 | display: 'inline-block',
23 | backfaceVisibility: 'hidden',
24 | boxShadow: isBooped
25 | ? `${shadowX} ${shadowY} ${shadowBlur} ${shadowColor}`
26 | : '0px 0px 0px red',
27 | transform: isBooped
28 | ? `translate(${x}px, ${y}px)
29 | rotate(${rotation}deg)
30 | scale(${scale})`
31 | : `translate(0px, 0px)
32 | rotate(0deg)
33 | scale(1)`,
34 | config: springConfig,
35 | width: width,
36 | });
37 | React.useEffect(() => {
38 | if (!isBooped) { return; }
39 | const timeoutId = window.setTimeout(() => {
40 | setIsBooped(false);
41 | }, timing);
42 | return () => { window.clearTimeout(timeoutId); };
43 | }, [isBooped]);
44 | const trigger = React.useCallback(() => {
45 | console.log('here')
46 | setIsBooped(true);
47 | }, []);
48 | return [style, trigger];
49 | }
--------------------------------------------------------------------------------
/example/tests/tests/testChatSocket.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "tags": ["home", "socket", "feed"],
3 |
4 | 'Try the chat socket feed': function(browser) {
5 | const page = browser.page.homePage();
6 |
7 | page
8 | .navigate('http://localhost:3001/chat_socket')
9 | .pause(1500)
10 |
11 | // Send a DM
12 | .waitForElementVisible('.ce-message-bubble', 1000, 'Find message bubble')
13 | .waitForElementVisible('@newMessageInput', 1000, 'Find message form')
14 | .waitForElementVisible('@newMessageButton', 1000, 'Find send message button')
15 | .set('@newMessageInput', 'Test-message')
16 | .click('@newMessageButton')
17 | .waitForElementVisible('.ce-message-bubble', 1000, 'Find message bubble');
18 | },
19 |
20 | 'Try the user socket feed': function(browser) {
21 | const page = browser.page.homePage();
22 |
23 | page
24 | .navigate('http://localhost:3001/user_socket_feed')
25 | .pause(1500)
26 |
27 | // Send a DM
28 | .waitForElementVisible('.ce-message-bubble', 1000, 'Find message bubble')
29 | .waitForElementVisible('@newMessageInput', 1000, 'Find message form')
30 | .waitForElementVisible('@newMessageButton', 1000, 'Find send message button')
31 | .set('@newMessageInput', 'Test-message')
32 | .click('@newMessageButton')
33 | .waitForElementVisible('.ce-message-bubble', 1000, 'Find message bubble');
34 | // TODO: This needs to scroll down
35 | },
36 | }
--------------------------------------------------------------------------------
/example/src/Pages/ChatSocketPage/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { ChatEngineWrapper, ChatSocket, ChatFeed, ChatList } from 'react-chat-engine'
4 |
5 | import { DEVELOPMENT, PROJECT_ID, CHAT_ID, CHAT_ACCESS_KEY } from '../../consts'
6 |
7 | import { Row, Col } from 'react-grid-system'
8 | import { setConfiguration } from 'react-grid-system';
9 |
10 | setConfiguration({ maxScreenClass: 'xl', gutterWidth: 0 });
11 |
12 | const HomePage = () => {
13 | const senderUsername = 'Abel Smith'
14 |
15 | return (
16 |
33 | { message.text }
34 |
35 | }
36 |
26 | {
27 | showChat &&
28 |
29 |
36 | }
37 |
38 | )
39 | }
40 |
41 | export default ChatEngine;
42 |
43 | const styles = {
44 | chatEngineWindow: {
45 | width: '100%',
46 | backgroundColor: '#fff',
47 | transition: "all 0.5s ease",
48 | WebkitTransition: "all 0.5s ease",
49 | MozTransition: "all 0.5s ease",
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/NewMessageForm/Thumbnail.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 |
3 | import { CloseCircleTwoTone } from '@ant-design/icons'
4 |
5 | const Thumbnail = props => {
6 | const [hovered, setHovered] = useState(false)
7 | const [blob, setBlob] = useState('')
8 |
9 | useEffect(() => {
10 | setBlob(URL.createObjectURL(props.file))
11 | }, [props.file])
12 |
13 | return (
14 | setHovered(true)}
17 | onMouseLeave={() => setHovered(false)}
18 | >
19 |
20 | 
25 |
26 | {
27 | hovered &&
28 | props.onRemove && props.onRemove()}
31 | />
32 | }
33 |
34 | )
35 | }
36 |
37 | export default Thumbnail
38 |
39 | const styles = {
40 | imageSquare: {
41 | height: '108px',
42 | width: '108px',
43 | border: '1px solid #afafaf',
44 | borderRadius: '8px',
45 | objectFit: 'cover',
46 | display: 'inline',
47 | },
48 | closeIcon: {
49 | position: 'absolute',
50 | bottom: 'calc(100% - 32px)',
51 | left: '96px',
52 | width: '0px',
53 | cursor: 'pointer'
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/Messages/Bubble/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 |
3 | import { ChatEngineContext } from '../../../../Context'
4 |
5 | import DatePartition from '../DatePartition'
6 |
7 | import MyMessage from './MyMessage'
8 | import TheirMessage from './TheirMessage'
9 |
10 | const Message = props => {
11 | const { lastMessage, message, nextMessage, chat } = props
12 |
13 | const { conn } = useContext(ChatEngineContext)
14 |
15 | if (!message || !chat) { return }
16 |
17 | if (!conn || conn === null) { return }
18 |
19 | return (
20 |
21 |
46 | )
47 | }
48 |
49 | export default Message
--------------------------------------------------------------------------------
/example/src/Pages/SupportEngine/SupportEngine/SupportWindow/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 |
3 | import EmailForm from './EmailForm'
4 | import ChatEngine from "./ChatEngine";
5 |
6 | const SupportWindow = props => {
7 | const [user, setUser] = useState(null)
8 | const [chat, setChat] = useState(null)
9 |
10 | return (
11 |
15 | setUser(user)}
18 | setChat={chat => setChat(chat)}
19 | />
20 |
21 |
27 | )
28 | }
29 |
30 | export default SupportWindow;
31 |
32 | const styles = {
33 | supportWindow: {
34 | // Position
35 | position: 'fixed',
36 | bottom: '116px',
37 | right: '24px',
38 | // Size
39 | width: '420px',
40 | height: '530px',
41 | maxWidth: 'calc(100% - 48px)',
42 | maxHeight: 'calc(100% - 48px)',
43 | backgroundColor: 'white',
44 | // Border
45 | borderRadius: '12px',
46 | border: `2px solid #7a39e0`,
47 | overflow: 'hidden',
48 | // Transition
49 | transition: "all .5s ease",
50 | WebkitTransition: "all .5s ease",
51 | MozTransition: "all .5s ease",
52 | // Shadow
53 | boxShadow: '0px 0px 16px 6px rgba(0, 0, 0, 0.33)',
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatSettings/SettingsBlock/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 |
3 | import { LeftOutlined } from '@ant-design/icons'
4 |
5 | const SettingsBlock = (props) => {
6 | const [collapsed, setCollapsed] = useState(true)
7 | const [hovered, setHovered] = useState(false)
8 |
9 | return (
10 |
11 |
43 | )
44 | }
45 |
46 | export default SettingsBlock
47 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatSettings/PeopleSettings/PersonForm/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import { addPerson, getOtherPeople } from 'react-chat-engine'
5 |
6 | import { AutoCompleteInput } from 'react-chat-engine'
7 |
8 | import PersonOption from './PersonOption'
9 |
10 | const PersonForm = props => {
11 | const [state, setState] = useState({
12 | value: '',
13 | others: []
14 | })
15 |
16 | function handleChange(value) {
17 | setState({ ...state, value });
18 | }
19 |
20 | function invitePerson(name) {
21 | addPerson(
22 | props.conn,
23 | props.chat.id,
24 | name,
25 | () => {
26 | setState({ ...state, value: '' });
27 | getOthers();
28 | }
29 | )
30 | }
31 |
32 | function getOthers() {
33 | getOtherPeople(
34 | props.conn,
35 | props.chat.id,
36 | (id, others) => setState({ ...state, others }),
37 | () => {},
38 | )
39 | }
40 |
41 | function renderOption(option) {
42 | return setHovered(true)}
15 | onMouseLeave={() => setHovered(false)}
16 | onClick={() => setCollapsed(!collapsed)}
17 | style={{
18 | cursor: 'pointer',
19 | backgroundColor: hovered ? '#f0f0f0' : '#fff',
20 | transition: `background-color 100ms`,
21 | }}
22 | >
23 |
38 |
39 |
24 | { props.label }
25 |
26 |
27 |
40 | { !collapsed && props.children }
41 |
42 |
47 | getOthers()}
53 | handleChange={(value) => handleChange(value)}
54 | renderOption={(option) => renderOption(option)}
55 | />
56 |
57 | )
58 | }
59 |
60 | export default PersonForm
61 |
62 | PersonForm.propTypes = {
63 | chat: PropTypes.object.isRequired,
64 | conn: PropTypes.object.isRequired,
65 | }
--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
1 | name: Deploy Support
2 | on:
3 | workflow_dispatch:
4 | jobs:
5 | build:
6 | runs-on: ubuntu-latest
7 | steps:
8 | - uses: actions/checkout@v1
9 | - name: Use Node.js ${{ matrix.node-version }}
10 | uses: actions/setup-node@v1
11 | with:
12 | node-version: ${{ matrix.node-version }}
13 | - name: Install & Build Src
14 | run: |
15 | yarn install && yarn build
16 | - name: Create consts.js
17 | run: |
18 | echo "export const DEVELOPMENT = false; export const ROOT_URL = 'https://api.chatengine.io/'; export const PROJECT_ID = '8a1f9edb-a05a-4b55-9d6e-ec399a38f5a9'; export const USER_NAME = ''; export const USER_SECRET = ''; export const CHAT_ID = 0; export const CHAT_ACCESS_KEY = '123';" > example/src/consts.js
19 | - name: Install & Build Example
20 | run: |
21 | cd example && yarn install && yarn build
22 | - name: Deploy to S3
23 | uses: jakejarvis/s3-sync-action@master
24 | with:
25 | args: --acl public-read --delete
26 | env:
27 | AWS_S3_BUCKET: ${{ secrets.AWS_PRODUCTION_BUCKET_NAME }}
28 | AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
29 | AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
30 | AWS_REGION: ${{ secrets.AWS_REGION }}
31 | SOURCE_DIR: "example/build"
32 | - name: Invalidate Cloudfront
33 | uses: chetan/invalidate-cloudfront-action@master
34 | env:
35 | DISTRIBUTION: ${{ secrets.AWS_CDN_ID }}
36 | PATHS: "/*"
37 | AWS_REGION: "us-east-1"
38 | AWS_ACCESS_KEY_ID: ${{ secrets.AWS_CDN_ACCESS_KEY_ID }}
39 | AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_CDN_SECRET_ACCESS_KEY }}
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatSettings/PeopleSettings/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 |
3 | import { ChatEngineContext } from 'react-chat-engine'
4 |
5 | import PersonRow from './PersonRow'
6 | import PersonForm from './PersonForm'
7 |
8 | import SettingsBlock from '../SettingsBlock'
9 |
10 | const PeopleSettings = () => {
11 | const { conn, chats, activeChat } = useContext(ChatEngineContext)
12 | const chat = chats && chats[activeChat]
13 |
14 | if (!chat || chat.is_direct_chat) { return }
15 |
16 | function renderChatPeople(people, chat) {
17 | return people.map((chatPerson, index) => {
18 | return (
19 |
33 |
37 |
50 |
51 | )
52 | }
53 |
54 | export default PeopleSettings
55 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/MessageFormSocial/ImagesInput.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import { PaperClipOutlined } from '@ant-design/icons'
4 |
5 | const ImagesInput = props => {
6 | const [state, setState] = useState({
7 | hovered: false,
8 | })
9 |
10 | function onSelect(event) {
11 | const files = Array.from(event.target.files)
12 | props.onSelectFiles && props.onSelectFiles(files)
13 | }
14 |
15 | return (
16 |
38 |
39 |
40 | { renderChatPeople(chat.people, chat) }
41 |
42 |
43 |
44 | {
45 | conn && chat && conn.userName === chat.admin.username &&
46 |
49 |
22 |
36 |
37 | onSelect(e)}
44 | onClick={(e) => e.target.value = null}
45 | />
46 |
47 | );
48 | }
49 |
50 | export default ImagesInput
51 |
--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
12 |
16 |
17 |
18 |
27 |
23 |
25 | )
26 | }
27 |
28 | return (
29 | setHovered(true)}
32 | onMouseLeave={() => setHovered(false)}
33 | onClick={() => window.open(attachment.file)}
34 | >
35 |
37 | )
38 | }
39 |
40 | export default FileView
41 |
42 | const styles = {
43 | loadingContainer: {
44 | display: 'inline-block',
45 | borderRadius: '14px',
46 | marginRight: '2px',
47 | height: '48px',
48 | width: '136px',
49 | marginBottom: '4px',
50 | marginLeft: '4px',
51 | backgroundColor: '#d9d9d9',
52 | },
53 | fileView: {
54 | padding: '12px',
55 | borderRadius: '14px',
56 | display: 'inline-block',
57 | marginBottom: '4px',
58 | marginRight: '2px',
59 | cursor: 'pointer',
60 | }
61 | }
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/IsTyping/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useRef, useState, useEffect } from 'react'
2 |
3 | import { ChatEngineContext } from '../../../Context'
4 |
5 | import { stringToColor } from '../../Utilities/colorMapping'
6 |
7 | const IsTyping = () => {
8 | const didMountRef = useRef(false)
9 | const [currentTime, setCurrentTime] = useState(Date.now())
10 | const { conn, activeChat, typingCounter } = useContext(ChatEngineContext)
11 | const typers = typingCounter && typingCounter[activeChat] ? typingCounter[activeChat] : []
12 |
13 | useEffect(() => {
14 | if (!didMountRef.current) {
15 | didMountRef.current = true
16 | setInterval(() => {
17 | setCurrentTime(Date.now())
18 | }, 1000) // Check time every second
19 | }
20 | })
21 |
22 | if (!conn || conn === null) return
23 |
24 | return (
25 |
26 | {
27 | Object.keys(typers).map((username, index) => {
28 | if (conn.userName !== username && currentTime < typers[username] + 2000) {
29 | return (
30 |
45 | )
46 | }
47 |
48 | export default IsTyping
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/MessageFormSocial/MessageInput.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class MessageInput extends Component {
4 | state = {
5 | value: null,
6 | height: 0
7 | }
8 |
9 | resize() {
10 | var textarea = document.getElementById("msg-textarea");
11 | textarea.style.height = "";
12 | textarea.style.height = Math.min(textarea.scrollHeight, 150) + "px";
13 | this.setState({ height: Math.min(textarea.scrollHeight, 150) })
14 | }
15 |
16 | componentDidMount() { this.resize() }
17 |
18 | handleChange(e) {
19 | this.resize()
20 | this.props.handleChange && this.props.handleChange(e)
21 | }
22 |
23 | onKeyDown(e) {
24 | if (e.key === 'Enter') {
25 | e.preventDefault()
26 |
27 | if (this.props.value.length > 0) {
28 | this.props.onSubmit && this.props.onSubmit(e)
29 | }
30 | }
31 | }
32 |
33 | render() {
34 | return (
35 | this.handleChange(e)}
42 | onKeyDown={(e) => this.onKeyDown(e)}
43 | />
44 | )
45 | }
46 | }
47 |
48 | const styles = {
49 | input: {
50 | border: '1px solid white',
51 | width: 'calc(100% - 100px)',
52 | outline: 'none',
53 | fontSize: '15px',
54 | fontFamily: 'Avenir',
55 | paddingLeft: '12px',
56 | paddingRight: '12px',
57 | position: 'relative',
58 | left: '12px',
59 | resize: 'none',
60 | overflowX: 'hidden'
61 | }
62 | }
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/NewMessageForm/AttachmentsInput.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import { PaperClipOutlined } from '@ant-design/icons'
4 |
5 | const AttachmentsInput = props => {
6 | const [state, setState] = useState({
7 | hovered: false,
8 | })
9 |
10 | function onSelect(event) {
11 | const files = Array.from(event.target.files)
12 | props.onSelectFiles && props.onSelectFiles(files)
13 | }
14 |
15 | return (
16 |
45 | );
46 | }
47 |
48 | const styles = {
49 | icon: {
50 | background: 'none',
51 | border: 'none',
52 | cursor: 'pointer',
53 | display: 'inline-block',
54 | float: 'left',
55 | height: '24px',
56 | padding: '4px 5px',
57 | width: '28px',
58 | }
59 | }
60 |
61 | export default AttachmentsInput
62 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/ChatHeader/ChatListDrawer.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from 'react'
2 |
3 | import { MenuOutlined } from '@ant-design/icons'
4 |
5 | import { ChatEngineContext } from '../../../Context'
6 |
7 | import ChatList from '../../ChatList'
8 |
9 | const ChatListDrawer = props => {
10 | const [isOpen, setIsOpen] = useState(false)
11 | const context = useContext(ChatEngineContext)
12 | const allProps = {...props, ...context.conn}
13 |
14 | return (
15 |
35 | {`${username} is typing...`}
36 |
37 | )
38 |
39 | } else {
40 | return
41 | }
42 | })
43 | }
44 |
16 | setIsOpen(true)}
18 | style={{ color: 'rgb(24, 144, 255)', outline: 'none' }}
19 | />
20 |
21 | {
22 | isOpen &&
23 |
36 | )
37 | }
38 |
39 | export default ChatListDrawer
40 |
41 | const styles = {
42 | drawerContainer: {
43 | position: 'fixed',
44 | zIndex: '1',
45 | top: '0px',
46 | left: '0px',
47 | width: '100%',
48 | height: '100%',
49 | backgroundColor: 'white',
50 | textAlign: 'left'
51 | },
52 | titleContainer: {
53 | width: '100%',
54 | padding: '24px 0px',
55 | textAlign: 'center',
56 | color: 'rgb(24, 144, 255)',
57 | },
58 | titleText: {
59 | fontSize: '24px',
60 | fontWeight: '600',
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatSettings/ChatSettingsTop/TitleForm/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react';
2 | import PropTypes from 'prop-types'
3 |
4 | import { editChat, TextInput } from 'react-chat-engine'
5 |
6 | const NewMessageForm = props => {
7 | const didMountRef = useRef(false)
8 | const [state, setState] = useState({
9 | activeChat: null,
10 | value: ''
11 | })
12 |
13 | function handleChange(event) {
14 | setState({ ...state, value: event.target.value });
15 | }
16 |
17 | function handleSubmit(event) {
18 | event.preventDefault();
19 |
20 | editChat(
21 | props.conn,
22 | props.chat.id,
23 | {title: state.value},
24 | (data) => {}
25 | )
26 | }
27 |
28 | useEffect(() => {
29 | if (!didMountRef.current) {
30 | didMountRef.current = true
31 |
32 | } else {
33 | if(state.activeChat !== props.chat.id) {
34 | setState({
35 | ...state,
36 | value: props.chat.title,
37 | activeChat: props.chat.id
38 | })
39 | }
40 | }
41 | })
42 |
43 | return (
44 |
59 | );
60 | }
61 |
62 | export default NewMessageForm
63 |
64 | NewMessageForm.propTypes = {
65 | chat: PropTypes.object.isRequired,
66 | }
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/Messages/Bubble/Thumbnail.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 |
3 | import { LoadingOutlined } from '@ant-design/icons'
4 |
5 | const Thumbnail = props => {
6 | const [hovered, setHovered] = useState(false)
7 | const { attachment } = props
8 | const style={
9 | ...styles.thumbnail,
10 | ...{ border: hovered ? '1px solid #1890ff' : '1px solid #fff' }
11 | }
12 |
13 | if (!attachment) {
14 | return (
15 |
24 | {
25 | context.conn !== null && context.conn.renderChatList ?
26 | context.conn.renderChatList(context) :
27 | setIsOpen(false)}
30 | onChatClick={() => setIsOpen(false)}
31 | />
32 | }
33 |
34 | }
35 |
16 |
18 | )
19 | }
20 |
21 | return (
22 | animateScroll.scrollToBottom({ duration: 333, containerId: "ce-feed-container" })}
57 | >
58 |
61 | )
62 | }
63 |
64 | export default ScrollDownBar
65 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatSettings/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 |
3 | import { ChatEngineContext } from 'react-chat-engine'
4 |
5 | import PeopleSettings from './PeopleSettings'
6 | import PhotosSettings from './PhotosSettings'
7 | import OptionsSettings from './OptionsSettings'
8 | import ChatSettingsTop from './ChatSettingsTop'
9 |
10 | const ChatSettings = props => {
11 | const { conn, chats, activeChat } = useContext(ChatEngineContext)
12 | const chat = chats && chats[activeChat]
13 |
14 | if (conn === null) return
15 |
16 | return (
17 |
18 |
49 | )
50 | }
51 |
52 | export default ChatSettings
53 |
54 | const styles = {
55 | settingsContainer: {
56 | height: '100%',
57 | overflow: 'scroll',
58 | overflowX: 'hidden',
59 | borderLeft: '1px solid #afafaf',
60 | backgroundColor: 'white',
61 | fontFamily: 'Avenir'
62 | }
63 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-chat-engine",
3 | "version": "1.11.28",
4 | "description": "Cheap and easy chat API",
5 | "author": "alamorre",
6 | "license": "MIT",
7 | "repository": "alamorre/react-chat-engine",
8 | "main": "dist/index.js",
9 | "module": "dist/index.modern.js",
10 | "source": "src/index.js",
11 | "engines": {
12 | "node": ">=10"
13 | },
14 | "scripts": {
15 | "build": "microbundle-crl --no-compress --format modern,cjs",
16 | "start": "microbundle-crl watch --no-compress --format modern,cjs",
17 | "prepare": "run-s build",
18 | "test": "nightwatch -c tests/tests_conf/nightwatch.conf.js",
19 | "test-headless": "nightwatch -c tests/tests_conf/nightwatch.conf.js --headless",
20 | "predeploy": "cd example && yarn install && yarn run build",
21 | "deploy": "gh-pages -d example/build"
22 | },
23 | "peerDependencies": {
24 | "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
25 | },
26 | "devDependencies": {
27 | "babel-eslint": "^10.0.3",
28 | "cross-env": "^7.0.2",
29 | "eslint": "^6.8.0",
30 | "eslint-config-prettier": "^6.7.0",
31 | "eslint-config-standard": "^14.1.0",
32 | "eslint-config-standard-react": "^9.2.0",
33 | "eslint-plugin-import": "^2.18.2",
34 | "eslint-plugin-node": "^11.0.0",
35 | "eslint-plugin-prettier": "^3.1.1",
36 | "eslint-plugin-promise": "^4.2.1",
37 | "eslint-plugin-react": "^7.17.0",
38 | "eslint-plugin-standard": "^4.0.1",
39 | "gh-pages": "^2.2.0",
40 | "microbundle-crl": "^0.13.10",
41 | "nightwatch": "^1.5.1",
42 | "npm-run-all": "^4.1.5",
43 | "prettier": "^2.0.4",
44 | "prop-types": "^15.7.2",
45 | "react": "^16.13.1",
46 | "react-dom": "^16.13.1",
47 | "react-scripts": "^3.4.1"
48 | },
49 | "files": [
50 | "dist"
51 | ],
52 | "dependencies": {
53 | "@ant-design/icons": "^4.2.2",
54 | "axios": "0.21.3",
55 | "html-to-text": "^7.1.1",
56 | "lodash": "4.17.21",
57 | "nextjs-websocket": "^1.0.7",
58 | "react-grid-system": "^7.1.1",
59 | "react-quill": "^1.3.5",
60 | "react-scroll": "^1.8.1",
61 | "react-spring": "^9.2.2",
62 | "styled-jsx": "^4.0.1",
63 | "websocket": "^1.0.33"
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/components/ChatEngine/ChatFeed/NewMessageForm/MessageInput.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class MessageInput extends Component {
4 | state = {
5 | focused: false,
6 | value: null,
7 | height: 0
8 | }
9 |
10 | resize() {
11 | var textarea = document.getElementById("msg-textarea");
12 | textarea.style.height = "";
13 | textarea.style.height = Math.min(textarea.scrollHeight, 150) + "px";
14 | this.setState({ height: Math.min(textarea.scrollHeight, 150) })
15 | }
16 |
17 | componentDidMount() { this.resize() }
18 |
19 | handleChange(e) {
20 | this.resize()
21 | this.props.handleChange && this.props.handleChange(e)
22 | }
23 |
24 | onKeyDown(e) {
25 | if (e.key === 'Enter') {
26 | e.preventDefault()
27 |
28 | if (this.props.value.length > 0) {
29 | this.props.onSubmit && this.props.onSubmit(e)
30 | }
31 | }
32 | }
33 |
34 | render() {
35 | const style = {
36 | ...styles.input,
37 | ...{ overflowY: this.state.height === 150 ? 'scroll' : 'hidden' }
38 | }
39 |
40 | return (
41 |
19 | {
20 | props.renderChatSettingsTop ?
21 | props.renderChatSettingsTop(conn, chat) :
22 |
48 |
40 | {
41 | props.renderOptionsSettings ?
42 | props.renderOptionsSettings(conn, chat) :
43 |
46 | }
47 |