front
Gorji 3 years ago
parent be9c78966a
commit 2222c27c62
  1. BIN
      src/assets/images/chat.png
  2. BIN
      src/assets/images/chat3.png
  3. 9
      src/index.scss
  4. 20
      src/views/Auth/Auth.js
  5. 3
      src/views/ChatRoom/Body/Input/index.js
  6. 20
      src/views/ChatRoom/Body/Keyboard/index.js
  7. 3
      src/views/ChatRoom/Body/Message/Inline/index.js
  8. 216
      src/views/ChatRoom/Body/Message/Normal/index.js
  9. 16
      src/views/ChatRoom/Body/Message/Normal/index.scss
  10. 28
      src/views/ChatRoom/Body/Message/Select/index.js
  11. 79
      src/views/ChatRoom/Body/Message/Slider/index.js
  12. 13
      src/views/ChatRoom/Body/Message/Slider/index.scss
  13. 6
      src/views/ChatRoom/Body/Message/Sort/index.js
  14. 26
      src/views/ChatRoom/Body/Message/Tap/index.js
  15. 0
      src/views/ChatRoom/Body/Message/Tap/index.scss
  16. 24
      src/views/ChatRoom/Body/Message/index.js
  17. 9
      src/views/ChatRoom/Body/Message/index.scss
  18. 54
      src/views/ChatRoom/Body/index.js
  19. 2
      src/views/ChatRoom/Body/index.scss

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 336 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

@ -31,6 +31,15 @@ code {
font-family: IRANSansNumeralBold;
src: url(assets/IRANSans/Farsi_numerals/Bold.ttf);
}
.fontLight {
font-family: 'IRANSansNumeralLight' !important;
}
.rtl {
direction: rtl !important;
}
.ltr {
direction: ltr !important;
}
.MuiInputBase-input {
font-family: IRANSansNumeralLight !important;
}

@ -1,8 +1,9 @@
import React, { Component } from 'react';
import {ToastContainer} from 'react-toastify';
import { ToastContainer } from 'react-toastify';
import Logo from './Logo/Logo';
import Bio from './Bio/Bio';
import Login from './Login/Login';
import Snackbar from '@material-ui/core/Snackbar';
import './Auth.scss';
export default class Auth extends Component {
@ -13,17 +14,34 @@ export default class Auth extends Component {
page: 'logo',
};
}
state = { toastView: false };
setPage = (val) => {
this.setState({
page: val,
});
};
toastClose = () => {
this.setState({ toastView: false });
};
toast = (toastText) => {
this.setState({ toastView: true, toastText });
};
componentDidMount() {
window.toast = this.tosat;
}
render() {
const { toastView, toastText } = this.state;
return (
<div className="auth">
{this.state.page === 'logo' ? <Logo setPage={this.setPage} /> : null}
{this.state.page === 'bio' ? <Bio setPage={this.setPage} /> : null}
{this.state.page === 'login' ? <Login /> : null}
<Snackbar
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
open={toastView}
onClose={this.toastClose}
message={toastText}
/>
<ToastContainer
position="bottom-right"
autoClose={1500}

@ -21,6 +21,7 @@ export default class ChatInputs extends Component {
sendMessage,
addFile,
file,
addcounter,
} = this.props;
return (
<div className="chat-inputs d-flex">
@ -80,7 +81,7 @@ export default class ChatInputs extends Component {
</div>
) : null}
{message !== '' || file !== null ? (
<div className="chat-inputs__voice--icon d-flex" onClick={() => sendMessage()}>
<div className="chat-inputs__voice--icon d-flex" onClick={() => addcounter()}>
<SendIcon
style={{
color: 'rgb(15, 93, 209)',

@ -1,30 +1,32 @@
import React, { Component } from 'react';
import Carousel from 'react-elastic-carousel';
import './index.scss';
export default function suggetbar({ suggest }) {
export default function Keyboard({ options, action }) {
return (
<div className="chat-suggest portrait-slider d-flex flex-column">
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}>
{suggest.map((row, i) => (
<Row row={row} key={i} />
{options.map((row, i) => (
<Row row={row} key={i} action={action} />
))}
</Carousel>
</div>
);
}
const Row = ({ row }) => {
const Row = ({ row, action }) => {
return (
<div className="chat-suggest__row d-flex">
{/* <Suggest item={row[0]} /> */}
{row.map((item, i) => (
<Suggest item={item} key={i} />
<KeyboardItem item={item} key={i} action={action} />
))}
</div>
);
};
const Suggest = ({ item }) => {
console.log(item.text);
return <div className="chat-suggest__row--item d-flex">{item.text}</div>;
const KeyboardItem = ({ item, action }) => {
return (
<div className="chat-suggest__row--item d-flex" onclick={() => action(item)}>
{item.text}
</div>
);
};

@ -10,10 +10,11 @@ export default class Message2D extends Component {
if (this.props.isActive) {
this.setState({ value: id });
toast.success('ثبت شد');
this.props.action();
}
}
render() {
const { message, user, isSelf, isActive } = this.props;
const { message, user, isSelf, isActive, action } = this.props;
return (
<div className="message-2d d-flex flex-column d-flex">
<div className="message-2d__options d-flex flex-column">

@ -16,6 +16,19 @@ import ForwardIcon from '@material-ui/icons/Forward';
import DeleteIcon from '@material-ui/icons/Delete';
import FavoriteIcon from '@material-ui/icons/Favorite';
import TextsmsIcon from '@material-ui/icons/Textsms';
import ScheduleIcon from '@material-ui/icons/Schedule';
const file = (fileId) => `${window.baseURL}/file/download/${fileId}`;
const menu = [
{ text: 'پسند', icon: FavoriteIcon, onClick: () => {} },
{ text: 'تبادل نظر', icon: TextsmsIcon, onClick: () => {} },
{ text: 'پاسخ', icon: ReplyIcon, onClick: () => {} },
{ text: 'باز ارسال', icon: ForwardIcon, onClick: () => {} },
];
const selfMenu = [
{ text: 'باز ارسال', icon: ForwardIcon, onClick: () => {} },
{ text: 'ویرایش', icon: EditIcon, onClick: () => {} },
{ text: 'حذف', icon: DeleteIcon, onClick: () => {} },
];
export default class NormalMessage extends Component {
state = { messageMenu: null };
handleClose = () => {
@ -64,11 +77,7 @@ export default class NormalMessage extends Component {
>
<div
className={
message.voice === null &&
message.video === null &&
message.image === null &&
message.music === null &&
message.document === null
message.type == 'text'
? `normal-message__box `
: `normal-message__box normal-message__box--file`
}
@ -78,115 +87,73 @@ export default class NormalMessage extends Component {
width: 'calc(100%-70px)',
}}
>
{message.voice === null &&
message.video === null &&
message.image === null &&
message.music === null &&
message.document === null ? (
<div
className="normal-message__box--detail d-flex"
style={{
top: 0,
<div
className="normal-message__box--detail d-flex"
style={{
top: 0,
direction: isSelf ? 'ltr' : 'rtl',
paddingRight: isSelf ? 70 : 0,
paddingLeft: isSelf ? 0 : 70,
}}
direction: isSelf ? 'ltr' : 'rtl',
paddingRight: isSelf ? 70 : 0,
paddingLeft: isSelf ? 0 : 70,
}}
>
<div style={{ color: isSelf ? '#aaa' : 'gray' }}>
<ExpandMoreIcon fontSize="small" onClick={this.handleClick} />
</div>
<Menu
anchorEl={messageMenu}
keepMounted
open={Boolean(messageMenu)}
onClose={() => this.handleClose()}
className="rtl fontLight"
>
<div style={{ color: isSelf ? '#aaa' : 'gray' }}>
<ExpandMoreIcon fontSize="small" onClick={this.handleClick} />
</div>
<Menu
id="simple-menu"
anchorEl={messageMenu}
keepMounted
open={Boolean(messageMenu)}
onClose={() => this.handleClose()}
style={{ direction: 'rtl', fontFamily: 'IRANSansNumeralLight' }}
>
{(isSelf ? selfMenu : menu).map((e) => (
<MenuItem
style={{ fontFamily: 'IRANSansNumeralLight' }}
onClick={() => this.handleClose()}
className="fontLight"
onClick={() => {
this.handleClose();
e.onClick();
}}
>
<ReplyIcon fontSize="samall" />
پاسخ
<e.icon fontSize="samall" />
{e.text}
</MenuItem>
))}
</Menu>
{hasavatar && <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>}
</div>
<MenuItem
style={{ fontFamily: 'IRANSansNumeralLight' }}
onClick={() => this.handleClose()}
>
<ForwardIcon fontSize="samall" />
باز ارسال به
</MenuItem>
<MenuItem
style={{ fontFamily: 'IRANSansNumeralLight' }}
onClick={() => this.handleClose()}
>
<EditIcon fontSize="samall" />
ویرایش
</MenuItem>
<MenuItem
style={{ fontFamily: 'IRANSansNumeralLight' }}
onClick={() => this.handleClose()}
>
<DeleteIcon fontSize="samall" />
حذف
</MenuItem>
</Menu>
{hasavatar && <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>}
</div>
{message.type == 'text' ? (
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p>
) : null}
{message.text !== null &&
message.video === null &&
message.image === null &&
message.music === null &&
message.document === null ? (
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
{message.text}
</p>
{message.type == 'voice' ? (
<ReactAudioPlayer src={file(message.fileId)} controls />
) : null}
{message.voice !== null ? <ReactAudioPlayer src={message.voice.url} controls /> : null}
{message.image !== null ? (
<div
className="normal-message__box--caption"
ref={(refElem) => {
console.log(refElem);
}}
>
<a href={message.image} download>
<img src={message.image} download alt="" />
{message.type == 'image' ? (
<div className="normal-message__box--caption">
<a href={file(message.fileId)} download>
<img src={file(message.fileId)} download alt="" />
</a>
<p
id="2"
style={{
color: isSelf ? 'white' : 'black',
}}
>
{message.text}
</p>
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p>
</div>
) : null}
{message.video !== null ? (
{message.type == 'video' ? (
<div className="normal-message__box--caption">
<a href={message.video} download>
<ReactPlayer url={message.video} controls width={'100%'} height={250} />
<a href={file(message.fileId)} download>
<ReactPlayer url={file(message.fileId)} controls width={'100%'} height={250} />
</a>
<p
id="1"
style={{
color: isSelf ? 'white' : 'black',
}}
>
{message.text}
</p>
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p>
</div>
) : null}
{message.music !== null ? <ReactAudioPlayer src={message.music} controls /> : null}
{message.document !== null ? (
{message.type == 'audio' ? (
<div className="normal-message__box--caption">
<ReactAudioPlayer src={file(message.fileId)} controls />
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p>
</div>
) : null}
{message.type == 'document' ? (
<a
href={message.document.data}
href={file(message.fileId)}
download
className="normal-message__box--document d-flex"
style={{
@ -202,15 +169,13 @@ export default class NormalMessage extends Component {
marginRight: 10,
}}
/>
<div>{message.document.name}</div>
<div>{message.text}</div>
</a>
) : null}
<div className="normal-message__box--date d-flex">
<div className={'normal-message__box--date d-flex ' + (isSelf ? 'self' : '')}>
<span style={{ color: isSelf ? '#aaa' : 'gray' }}>
{message.status == 1 && <DoneIcon fontSize="small" />}
{message.status == 2 && <DoneAllIcon fontSize="small" />}
{message.updatedAt ? (
{message.updatedAt != message.createdAt ? (
<>
<span> ویرایش در</span>
@ -220,22 +185,43 @@ export default class NormalMessage extends Component {
moment(message.createdAt).format('hh:mm')
)}
</span>
<span
style={{
color: isSelf ? '#aaa' : 'gray',
padding: '0 2px',
}}
>
{isSelf && message.status == 0 && <ScheduleIcon fontSize="small" />}
{isSelf && message.status == 1 && <DoneIcon fontSize="small" />}
{isSelf && message.status == 2 && <DoneAllIcon fontSize="small" />}
</span>
</div>
</div>
<div className={isSelf ? 'icons self' : 'icons'}>
<div>
<FavoriteIcon fontSize="samall" color="primary" />
<span> {10}</span>
</div>
{/* <div>
<TextsmsIcon fontSize="samall" color="secondary" />
<span> {10}</span>
</div>
<div>
<span> {'+5 اعتماد به نفس'}</span>
</div> */}
{!isSelf ? (
<>
{' '}
<div>
<FavoriteIcon fontSize="samall" color="primary" />
<span> {10}</span>
</div>
<div>
<TextsmsIcon fontSize="samall" color="secondary" />
<span> {10}</span>
</div>
</>
) : (
<>
<div>
<span>
+5
<br />
خلاقیت
</span>
</div>
</>
)}
</div>
</div>
<div

@ -1,4 +1,7 @@
@media screen and (max-width: 4500px) {
.normal-message__box--date.self {
padding-right: 20px 0 0 !important ;
}
.keys {
max-width: 465px;
min-width: 250px;
@ -21,9 +24,10 @@
opacity: 0.8;
}
}
.self {
.icons.self {
direction: rtl;
text-align: right;
font-size: small;
// left: -35px;
// right: none;
}
@ -69,6 +73,7 @@
text-align: right;
direction: rtl;
font-size: 15px;
margin: 0 0 5px !important;
// font-family: IRANSansNumeral;
font-weight: 200;
}
@ -82,17 +87,22 @@
font-family: IRANSansNumeralLight;
}
}
&--date {
position: absolute;
width: 100%;
padding: 20px 50px 0;
padding: 0px 15px 0;
bottom: 0px;
justify-content: flex-end;
justify-content: flex-start;
font-size: 11px;
span {
font-family: IRANSansNumeralLight;
}
}
&--date.self {
justify-content: flex-end;
padding: 0;
}
&--caption {
width: 100%;
margin-bottom: 20px;

@ -1,36 +1,28 @@
import React, { Component } from 'react';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import Avatar from '@material-ui/core/Avatar';
import { toast } from 'react-toastify';
export default class RadioMessage extends Component {
constructor(props) {
super(props);
this.state = {
value: this.props.message.value,
};
}
handleRadioChange = (newValue) => {
if (this.props.isActive)
this.setState({
value: newValue,
});
state = {
value: this.props.message.value,
};
handleRadioChange = (value) => {
if (this.props.isActive) this.setState({ value });
};
render() {
const { message, user, isSelf, isActive } = this.props;
const { message, user, isSelf, isActive, action } = this.props;
const { value } = this.state;
return (
<div className="message-2d d-flex flex-column d-flex">
<div className="message-2d__options d-flex flex-wrap justify-content-center">
{message.options.map((row) => (
<Row list={row} handleRadioChange={this.handleRadioChange} value={this.state.value} />
<Row list={row} handleRadioChange={this.handleRadioChange} value={value} />
))}
</div>
{isActive && (
<button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
<button className="message-2d__submit" onClick={() => action({ value })}>
ثبت
<ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
<ArrowRightAltIcon />
</button>
)}
</div>

@ -6,85 +6,54 @@ import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import Avatar from '@material-ui/core/Avatar';
import { toast } from 'react-toastify';
export default class SliderMessage extends Component {
constructor(props) {
super(props);
this.state = {
value: 10,
};
}
handleSliderChange = (event, newValue) => {
if (this.props.isActive)
this.setState({
value: newValue,
});
state = {
value: this.props.message.value || 0,
};
handleInputChange = (event) => {
if (this.props.isActive)
this.setState({
value: event.target.value === '' ? '' : Number(event.target.value),
});
onChange = (value) => {
if (!this.props.isActive || !value) return;
const [min, max, step] = this.props.message.options[0] || [0, 100, 1];
this.setState({ value: Math.min(max, Math.max(min, parseFloat(value))) });
};
handleBlur = () => {
if (this.props.isActive)
if (this.state.value < 0) {
this.setState({ value: 0 });
} else if (this.state.value > 20) {
this.setState({ value: 20 });
}
};
render() {
const { message, user, isSelf, isActive } = this.props;
const { message, isActive, action } = this.props;
const [min, max, step] = message.options[0] || [0, 100, 1];
const { value } = this.state;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginTop: 2,
}}
>
<div className="message-2d d-flex flex-column d-flex sliderBox">
<Grid container spacing={2} alignItems="center">
<Grid item xs>
<Slider
// disabled={!isActive}
value={typeof this.state.value === 'number' ? this.state.value : 0}
onChange={this.handleSliderChange}
className="slider"
value={value}
onChange={(e, value) => this.onChange(value)}
aria-labelledby="input-slider"
style={{ marginTop: 10 }}
min={0}
max={20}
step={0.1}
min={min}
max={max}
step={step}
/>
</Grid>
<Grid item>
<Input
className="input"
disabled={!isActive}
value={this.state.value}
margin="dense"
onChange={(e) => this.handleInputChange(e)}
onBlur={() => this.handleBlur()}
onChange={(e) => this.onChange(e.target.value)}
onBlur={() => this.onChange(value)}
inputProps={{
step: 0.1,
min: 0,
max: 20,
step: step,
min: min,
max: max,
type: 'number',
'aria-labelledby': 'input-slider',
}}
style={{
width: 42,
borderBottom: '2px solid #000099',
paddingLeft: 10,
marginBottom: 18,
color: '#000099',
}}
/>
</Grid>
</Grid>
{isActive && (
<button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
<button className="message-2d__submit" onClick={() => action()}>
ثبت
<ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
<ArrowRightAltIcon />
</button>
)}
</div>

@ -0,0 +1,13 @@
.sliderBox {
margin-top: 2px;
.slider {
margin-top: 10px;
}
input {
width: 42px;
border-bottom: 2px solid #000099;
padding-left: 10px;
margin-bottom: 18px;
color: #000099;
}
}

@ -18,15 +18,15 @@ export default class DraggableMessage extends Component {
};
render() {
const { message, user, isSelf, isActive } = this.props;
const { message, user, isSelf, isActive, action } = this.props;
return (
<div className="message-2d d-flex flex-column d-flex">
<SortableList items={this.state.options} onSortEnd={this.onSortEnd} disabled={!isActive} />
{isActive && (
<button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
<button className="message-2d__submit" onClick={() => action()}>
ثبت
<ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
<ArrowRightAltIcon />
</button>
)}
</div>

@ -0,0 +1,26 @@
import React, { Component } from 'react';
import arrayMove from 'array-move';
export default class DraggableMessage extends Component {
constructor(props) {
super(props);
this.state = this.props.message;
}
onSortEnd = ({ oldIndex, newIndex }) => {
if (this.props.isActive)
this.setState(({ options }) => ({
options: arrayMove(options, oldIndex, newIndex),
}));
};
render() {
const { message, user, isSelf, isActive } = this.props;
if (!isActive) return null;
return <div className="tapbox"></div>;
}
a = (
<button className="message-2d__submit" onClick={() => action({ value })}>
ثبت
</button>
);
}

@ -5,30 +5,42 @@ import Sort from './Sort';
import Slider from './Slider';
import Select from './Select';
import MultiSelect from './MultiSelect';
import Tap from './Tap';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import './index.scss';
const types = {
normal: <></>,
sort: Sort,
inline: Inline,
silder: Slider,
slider: Slider,
select: Select,
multiselect: MultiSelect,
tap: Tap,
};
export default class Message extends Component {
render() {
const { message, user, isSelf, file, document, prevUserId, isActive } = this.props;
const Key = types[message.type];
const { message, user, isSelf, file, document, prevUserId, isActive, addcounter } = this.props;
const Action = types[message.action];
return (
<div className="Message">
<Normal
prevUserId={prevUserId}
addcounter={addcounter}
message={message}
prevUserId={prevUserId}
user={user}
isSelf={isSelf}
file={file}
document={document}
>
<Key message={message} isSelf={isSelf} isActive={isActive} />
{Action ? (
<Action message={message} isSelf={isSelf} isActive={isActive} action={addcounter} />
) : null}
{/* {isActive && (
<button className="message-2d__submit" onClick={() => action({ value })}>
ثبت
<ArrowRightAltIcon />
</button>
)} */}
</Normal>
</div>
);

@ -2,4 +2,13 @@
.Message {
margin-top: 2px;
}
.tapbox {
z-index: 500;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
height: 100%;
}
}

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import Message from './Message';
import ChatInputs from './Input';
import ChatSuggest from './Keyboard';
import Keyboard from './Keyboard';
import { RecordState } from 'audio-react-recorder';
import ReactPlayer from 'react-player';
import ReactAudioPlayer from 'react-audio-player';
@ -9,11 +9,13 @@ import { ToastContainer } from 'react-toastify';
import { list, send, sendKeys } from '../../../Redux/actions/message';
import { info, bio } from '../../../Redux/actions/chat';
import { connect } from 'react-redux';
import './index.scss';
class List extends Component {
constructor(props) {
super(props);
this.state = {
counter: 1,
id: window.location.href.split('/').pop() * 1,
data: {},
message: '',
@ -23,16 +25,11 @@ class List extends Component {
video: null,
music: null,
document: null,
footer: 'normal',
suggest: [
[{ id: 0, text: 'سلام' }],
[{ id: 1, text: 'وقت بخیر' }],
[{ id: 2, text: 'لطفا بامن تماس بگیر' }],
[{ id: 3, text: 'متشکرم' }],
],
};
}
addcounter() {
this.setState({ counter: this.state.counter + 1 });
}
start = () => {
this.setState({
voice: RecordState.START,
@ -346,11 +343,17 @@ class List extends Component {
return color;
}
render() {
const { setPage, chatInfo, messageList, userId } = this.props;
const userIdx = {};
chatInfo.users.map((e) => (userIdx[e.id] = { ...e, color: this.randomColor() }));
const { setPage, chatInfo, messageList: msaster, userId } = this.props; //last
const messageList = msaster.slice(0, this.state.counter);
const last = messageList.slice(-1)[0] || {};
const userIdx = this.userIdx || {};
if (Object.keys(userIdx).length == 0) {
chatInfo.users.map((e) => (userIdx[e.id] = { ...e, color: this.randomColor() }));
this.userIdx = userIdx;
}
return (
<div className="chat-body d-flex flex-column">
<div className="chat-body d-flex flex-column ">
<div className="chat-room__status d-flex flex-column" onClick={() => setPage('info')}>
<h1>{chatInfo.title}</h1>
<p>{chatInfo.subTitle}</p>
@ -362,23 +365,24 @@ class List extends Component {
paddingTop: 10,
overflowX: 'hidden',
overflowY: this.state.file !== null ? 'hidden' : 'scroll',
paddingBottom: this.state.footer === 'suggest' ? 150 : 40,
paddingBottom: last.action === 'keyboard' ? 150 : 75,
}}
>
{chatInfo.users &&
messageList.map((item, i) =>
messageList.map((message, i) =>
this.state.image === null &&
this.state.music === null &&
this.state.video === null ? (
<Message
isActive={i == messageList.length - 1}
addcounter={() => this.addcounter()}
isActive={message.id == last.id}
prevUserId={i > 0 ? messageList[i - 1].userId : 0}
isSelf={1 == item.userId}
key={i}
isSelf={1 == message.userId}
key={message.id}
file={this.state.image}
document={this.state.document}
message={{ ...item, value: 1 }}
user={userIdx[item.userId] || { id: 0, fileId: 0, name: 'null' }}
message={message}
user={userIdx[message.userId] || { id: 0, fileId: 0, name: 'null' }}
/>
) : null
)}
@ -414,8 +418,9 @@ class List extends Component {
) : null}
</div>
<div className="chat-body__footer d-flex">
{this.state.footer === 'normal' ? (
{last.action == 'text' ? (
<ChatInputs
addcounter={() => this.addcounter()}
onStop={this.onStop}
stop={this.stop}
start={this.start}
@ -428,10 +433,12 @@ class List extends Component {
file={this.state.file}
/>
) : null}
{this.state.footer === 'suggest' ? <ChatSuggest suggest={this.state.suggest} /> : null}
{last.action === 'keyboard' ? (
<Keyboard options={last.options} addcounter={() => this.addcounter()} />
) : null}
</div>
<ToastContainer
position="bottom-right"
position="top-center"
autoClose={1500}
hideProgressBar={true}
newestOnTop={true}
@ -451,6 +458,7 @@ export default connect(
chatInfo: state.chat.info,
userId: state.user.isLogin.id,
messageList: state.message.list || [],
last: state.message.list.slice(-1)[0] || {},
};
},
{ list, send, sendKeys, info, bio }

@ -30,7 +30,7 @@
border-top-left-radius: 40px;
border-top-right-radius: 40px;
position: relative;
top: -75px;
margin-top: -95px;
&--preview {
position: absolute;
bottom: 0px;

Loading…
Cancel
Save