some Fixes

src/index.scss

@@ -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;
 }

src/views/Auth/Auth.js

@@ -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}

src/views/ChatRoom/Body/Input/index.js

@@ -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)',

src/views/ChatRoom/Body/Keyboard/index.js

@@ -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>
+  );
 };

src/views/ChatRoom/Body/Message/Inline/index.js

@@ -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">

src/views/ChatRoom/Body/Message/Normal/index.js

@@ -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

src/views/ChatRoom/Body/Message/Normal/index.scss

@@ -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;

src/views/ChatRoom/Body/Message/Select/index.js

@@ -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>

src/views/ChatRoom/Body/Message/Slider/index.js

@@ -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>

src/views/ChatRoom/Body/Message/Slider/index.scss

@@ -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;
+  }
+}

src/views/ChatRoom/Body/Message/Sort/index.js

@@ -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>

src/views/ChatRoom/Body/Message/Tap/index.js

@@ -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>
+  );
+}

src/views/ChatRoom/Body/Message/index.js

@@ -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>
     );

src/views/ChatRoom/Body/Message/index.scss

@@ -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%;
+  }
 }

src/views/ChatRoom/Body/index.js

@@ -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 }

src/views/ChatRoom/Body/index.scss

@@ -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;