diff --git a/package.json b/package.json
index d53a7ad..597dfdb 100644
--- a/package.json
+++ b/package.json
@@ -8,18 +8,25 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "array-move": "^3.0.1",
+    "audio-react-recorder": "^1.0.4",
     "axios": "^0.21.1",
     "bootstrap": "^5.0.1",
     "jalali-moment": "^3.3.10",
     "prettier": "^2.3.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
+    "react-audio-player": "^0.17.0",
     "react-dom": "^17.0.2",
     "react-elastic-carousel": "^0.11.5",
+    "react-leaflet": "^3.2.0",
+    "react-player": "^2.9.0",
     "react-qr-scanner": "^1.0.0-alpha.7",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-sortable-hoc": "^2.0.0",
+    "react-swipeable-views": "^0.14.0",
     "react-toastify": "^7.0.4",
     "redux": "^4.1.0",
     "redux-devtools-extension": "^2.13.9",
diff --git a/src/AppRouter.js b/src/AppRouter.js
index cee95d1..d0cea3e 100644
--- a/src/AppRouter.js
+++ b/src/AppRouter.js
@@ -12,6 +12,8 @@ import QR from './views/QR/index';
 import Auth from './views/Auth/index';
 import QRScan from './views/QRScan/index';
 import Activation from './views/Activation/index';
+import ChatList from './views/ChatList/index';
+import Chatroom from './views/ChatRoom/index';
 
 class AppRouter extends Component {
   constructor(props) {
@@ -64,6 +66,15 @@ class AppRouter extends Component {
           
             
           
+          
+            
+          
+          {
+            window.innerWidth < 1000 ?
+            
+              
+             : null
+          }
         
       
     );
diff --git a/src/Redux/actions/message.js b/src/Redux/actions/message.js
index 14d7279..064898f 100644
--- a/src/Redux/actions/message.js
+++ b/src/Redux/actions/message.js
@@ -1,13 +1,13 @@
-// import proxy from '../proxy';
-// export const list =
-//   (data = {}) =>
-//   async (dispatch) =>
-//     (await proxy.get('message/list', data)).dispatch(dispatch);
-// export const send =
-//   (data = {}) =>
-//   async (dispatch) =>
-//     (await proxy.post('message/send', data)).dispatch(dispatch);
-// export const sendKeys =
-//   (data = {}) =>
-//   async (dispatch) =>
-//     (await proxy.post('message/sendKeys', data)).dispatch(dispatch);
+import proxy from '../proxy';
+export const list =
+  (data = {}) =>
+  async (dispatch) =>
+    (await proxy.get('message/list', data)).dispatch(dispatch);
+export const send =
+  (data = {}) =>
+  async (dispatch) =>
+    (await proxy.post('message/send', data)).dispatch(dispatch);
+export const sendKeys =
+  (data = {}) =>
+  async (dispatch) =>
+    (await proxy.post('message/sendKeys', data)).dispatch(dispatch);
diff --git a/src/Redux/proxy.js b/src/Redux/proxy.js
index 7b3ea3c..c3ab403 100644
--- a/src/Redux/proxy.js
+++ b/src/Redux/proxy.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { toast } from 'react-toastify';
-const baseURL = 'https://chatstory.ir/api/v1'; //"https://chatstory.ir/api/v1";
+const baseURL = 'https://chatstory.ir/api/v1'; //'https://chatstory.ir/api/v1';
 const token = '';
 const loginURL = 'user/otp/login';
 const logoutURL = 'user/logout';
@@ -48,7 +48,7 @@ class Proxy {
     localStorage.setItem('refresh', login.refreshToken);
     delete login.refreshToken;
     localStorage.setItem('userData', JSON.stringify(login));
-    if (data !== {}) window.router.setState({ islogin: true });
+    if (data != {}) window.router.setState({ islogin: true });
     return this.result('login', login);
   };
   logout = async () => {
@@ -62,7 +62,7 @@ class Proxy {
     let refresh = localStorage.getItem('refresh');
     let userData = localStorage.getItem('userData');
     if (!refresh) return false;
-    if (refresh === 'undefined') {
+    if (refresh == 'undefined') {
       localStorage.removeItem('refresh');
       localStorage.removeItem('userData');
       return false;
diff --git a/src/Redux/reducers/message.js b/src/Redux/reducers/message.js
index 4f00511..2cda7d0 100644
--- a/src/Redux/reducers/message.js
+++ b/src/Redux/reducers/message.js
@@ -1,16 +1,16 @@
-// const initialState = {
-//   list: [],
-// };
-// export default function chat(state = initialState, action) {
-//   let { type, data } = action;
-//   switch (type) {
-//     case 'message/list':
-//       return { ...state, list: data };
-//     case 'message/send':
-//       return { ...state, list: [...list, ...data] };
-//     case 'message/sendKeys':
-//       return { ...state, list: [...list, ...data] };
-//     default:
-//       return state;
-//   }
-// }
+const initialState = {
+  list: [],
+};
+export default function chat(state = initialState, action) {
+  let { type, data } = action;
+  switch (type) {
+    case 'message/list':
+      return { ...state, list: data };
+    case 'message/send':
+      return { ...state, list: [...state.list, ...data] };
+    case 'message/sendKeys':
+      return { ...state, list: [...state.list, ...data] };
+    default:
+      return state;
+  }
+}
diff --git a/src/assets/images/whatsapp.png b/src/assets/images/whatsapp.png
new file mode 100644
index 0000000..301d951
Binary files /dev/null and b/src/assets/images/whatsapp.png differ
diff --git a/src/views/ChatList/Chat/index.js b/src/views/ChatList/Chat/index.js
new file mode 100644
index 0000000..8697ef4
--- /dev/null
+++ b/src/views/ChatList/Chat/index.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import moment from 'jalali-moment';
+import Avatar from '@material-ui/core/Avatar';
+
+import './index.scss';
+export default class Chat extends Component {
+  render() {
+    const { data } = this.props;
+    return (
+      
+        
+        
+          
{data.name}
+          
{data.lastMessage.slice(0, 40) + '...'}
+          
{data.badge}
+          
{moment(data.date || new Date()).format('jD/jM hh:mm')}
+        
+        
+        {this.props.chat_list.map((item, i) => (
+          
+        ))}
+        
+          
+        
+      
+    );
+  }
+}
+
+export default connect(
+  (state) => ({
+    chat_list: state.chat.list || [],
+  }),
+  { list }
+)(ChatList);
+
diff --git a/src/views/ChatList/index.scss b/src/views/ChatList/index.scss
new file mode 100644
index 0000000..eb2b27d
--- /dev/null
+++ b/src/views/ChatList/index.scss
@@ -0,0 +1,26 @@
+@media screen and (max-width: 4500px) {
+  .chat-list {
+    flex: 1;
+    padding: 70px 14px 10px;
+    position: relative;
+    background: white;
+    &__float {
+      position: fixed;
+      height: 50px;
+      width: 50px;
+      bottom: 20px;
+      left: 20px;
+      justify-content: center;
+      align-items: center;
+      background-color: #01db38;
+      border-radius: 100px;
+
+      box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.4);
+      & svg {
+        color: white;
+        width: 25px;
+        height: 25px;
+      }
+    }
+  }
+}
diff --git a/src/views/ChatRoom/Body/Emoji/index.js b/src/views/ChatRoom/Body/Emoji/index.js
new file mode 100644
index 0000000..0b5f1e3
--- /dev/null
+++ b/src/views/ChatRoom/Body/Emoji/index.js
@@ -0,0 +1,224 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+import './index.scss';
+
+const Smileys = [
+  '😃',
+  '😃',
+  '😄',
+  '😁',
+  '😆',
+  '😅',
+  '😂',
+  '🤣',
+  '🥲',
+  '☺️',
+  '😊',
+  '😇',
+  '🙂',
+  '🙃',
+  '😉',
+  '😌',
+  '😍',
+  '🥰',
+  '😘',
+  '😗',
+  '😙',
+  '😚',
+  '😋',
+  '😛',
+  '😝',
+  '😜',
+  '🤪',
+  '🤨',
+  '🧐',
+  '🤓',
+  '😎',
+  '🥸',
+  '🤩',
+  '🥳',
+  '😏',
+  '😒',
+  '😞',
+  '😔',
+  '😟',
+  '😕',
+  '🙁',
+  '☹️',
+  '😣',
+  '😖',
+  '😫',
+  '😩',
+  '🥺',
+  '😢',
+  '😭',
+  '😤',
+  '😠',
+  '😡',
+  '🤬',
+  '🤯',
+  '😳',
+  '🥵',
+  '🥶',
+  '😱',
+  '😨',
+  '😰',
+  '😥',
+  '😓',
+  '🤗',
+  '🤔',
+  '🤭',
+  '🤫',
+  '🤥',
+  '😶',
+  '😐',
+  '😑',
+  '😬',
+  '🙄',
+  '😯',
+  '😦',
+  '😧',
+  '😮',
+  '😲',
+  '🥱',
+  '😴',
+  '🤤',
+  '😪',
+  '😵',
+  '🤐',
+  '🥴',
+  '🤢',
+  '🤮',
+  '🤧',
+  '😷',
+  '🤒',
+  '🤕',
+  '🤑',
+  '🤠',
+  '😈',
+  '👿',
+  '👹',
+  '👺',
+  '🤡',
+  '💩',
+  '👻',
+  '💀',
+  '☠️',
+  '👽',
+  '👾',
+  '🤖',
+  '🎃',
+  '😺',
+  '😸',
+  '😹',
+  '😻',
+  '😼',
+  '😽',
+  '🙀',
+  '😿',
+  '😾',
+];
+
+const animals = [
+  '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐻❄️', '🐨', '🐯', '🦁', '🐮', '🐷', '🐽', '🐸', '🐵', '🙈', '🙉', '🙊', '🐒', '🐔', '🐧', '🐦', '🐤', '🐣', '🐥', '🦆', '🦅', '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🪱', '🐛', '🦋', '🐌', '🐞', '🐜', '🪰', '🪲', '🪳', '🦟', '🦗', '🕷', '🕸', '🦂', '🐢', '🐍', '🦎', '🦖', '🦕', '🐙', '🦑', '🦐', '🦞', '🦀', '🐡', '🐠', '🐟', '🐬', '🐳', '🐋', '🦈', '🐊', '🐅', '🐆', '🦓', '🦍', '🦧', '🦣', '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🦘', '🦬', '🐃', '🐂', '🐄', '🐎', '🐖', '🐏', '🐑', '🦙', '🐐', '🦌', '🐕', '🐩', '🦮', '🐕🦺', '🐈', '🐈⬛', '🪶', '🐓', '🦃', '🦤', '🦚', '🦜', '🦢', '🦩', '🕊', '🐇', '🦝', '🦨', '🦡', '🦫', '🦦', '🦥', '🐁', '🐀', '🐿', '🦔', '🐾', '🐉', '🐲', '🌵', '🎄', '🌲', '🌳', '🌴', '🪵', '🌱', '🌿', '☘️', '🍀', '🎍', '🪴', '🎋', '🍃', '🍂', '🍁', '🍄', '🐚', '🪨', '🌾', '💐', '🌷', '🌹', '🥀', '🌺', '🌸', '🌼', '🌻', '🌞', '🌝', '🌛', '🌜', '🌚', '🌕', '🌖', '🌗', '🌘', '🌑', '🌒', '🌓', '🌔', '🌙', '🌎', '🌍', '🌏', '🪐 ', '💫', '⭐️', '🌟', '✨', '⚡️', '☄️', '💥', '🔥', '🌪', '🌈', '☀️', '🌤', '⛅️', '🌥', '☁️', '🌦', '🌧', '⛈', '🌩', '🌨', '❄️', '☃️', '⛄️', '🌬', '💨', '💧', '💦', '☔️', '☂️', '🌊', '🌫'
+];
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    
+      {value === index && (
+        
+          {children}
+        
+      )}
+    
+  );
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.any.isRequired,
+  value: PropTypes.any.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `scrollable-force-tab-${index}`,
+    'aria-controls': `scrollable-force-tabpanel-${index}`,
+  };
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+    width: '100%',
+    backgroundColor: theme.palette.background.paper,
+    flexDirection: 'row-reverse'
+  },
+  list: {
+    flex: 1,
+    width: '100%',
+    flexDirection: 'row-reverse'
+  },
+}));
+
+export default function ScrollableTabsButtonForce(props) {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+  console.log(props.emojies[0]);
+  return (
+    
+      
+        
+          {props.emojies.map((item) => (
+            
+          ))}
+        
+      
+      {props.emojies.map((item) => (
+        
+          
+            {item.list.map((jojo,i) => (
+               props.typeText('emoji',jojo)} style={{fontSize: 24, width: 30, height:30 }} className="m-1">{jojo}
+            ))}
+          
+        
+      ))}
+    
+        
+        {/* 
+        
+        {
+            recordState  ? 
+            
 : null
+          } */}
+
+        
+          
+            {(recordState === null && message === '' && file === null) ||
+            (recordState && recordState.url && message === '' && file === null) ? (
+              
+                
+              
+            ) : null}
+            {message !== '' || file !== null ? (
+              
 addcounter()}>
+                
+              
+            ) : null}
+            {recordState === 'start' ? (
+              <>
+                
+                  
+                
+                
+                  
+                
+              >
+            ) : null}
+          
+        
+        {recordState !== 'start' ? (
+          
+            {message === '' ? (
+              
+            ) : null}
+            
+
+            
 typeText('text',e.target.value)}
+              multiline
+              style={{
+                marginRight: 5,
+              }}
+            />
+            {this.props.parent.state.emoji ? (
+               this.props.parent.setState({ emoji: false })}
+              />
+            ) : (
+               this.props.parent.setState({ emoji: true })}
+              />
+            )}
+          
+        ) : null}
+      
+      
+        {options.map((row, i) => (
+          |
+        ))}
+      
+    
+  );
+}
+
+const Row = ({ row, action }) => {
+  return (
+    
+      {row.map((item, i) => (
+        
+      ))}
+    
+  );
+};
+
+const KeyboardItem = ({ item, action }) => {
+  return (
+     action(item)}>
+      {item.text}
+    
+  );
+};
diff --git a/src/views/ChatRoom/Body/Keyboard/index.scss b/src/views/ChatRoom/Body/Keyboard/index.scss
new file mode 100644
index 0000000..fa9c43f
--- /dev/null
+++ b/src/views/ChatRoom/Body/Keyboard/index.scss
@@ -0,0 +1,74 @@
+@media screen and (max-width: 4500px) {
+  .chat-suggest {
+    & .rec-slider-container {
+      margin: 0 !important;
+    }
+    // border-bottom-right-radius: 40px;
+    // border-bottom-left-radius: 40px;
+    width: 100%;
+    // height : 40px;
+    padding: 2px 0px 0px;
+    align-items: flex-start;
+    margin-top: 5px;
+    &__row {
+      width: 100%;
+      &--item {
+        padding: 8px 6px;
+        background-color: white;
+        border-radius: 5px;
+        margin: 0 2px;
+        width: 100% !important;
+        justify-content: right;
+        color: black;
+        height: 90px;
+        text-align: right;
+      }
+    }
+  }
+}
+
+.portrait-slider {
+  width: 100% !important;
+  height: 100% !important;
+  position: relative;
+  padding: 0px 6px 0px;
+  margin-bottom: 2px;
+  justify-content: center !important;
+}
+
+.rec-dot_active {
+  background-color: white !important;
+  color: white !important;
+  // box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important;
+}
+
+.Carousel-button-10 {
+  background-color: white !important;
+}
+.rec-pagination {
+  z-index: 600;
+  margin-top: 2px !important;
+  // position: absolute;
+  // top: -12px;
+  // left: calc(50% - 20px) !important;
+  & button {
+    background-color: grey;
+    margin: 2px !important;
+    box-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
+  }
+}
+
+// .guuruq{
+//   box-shadow: 0 1px 2px rgba(0, 0, 0,  0%);
+// }
+
+// .cJeRRR{
+//   background-color: white !important;
+
+// }
+
+// .cJeRRR:hover, .cJeRRR:focus{
+//   cursor: pointer;
+//   box-shadow: 0px 0px 0px rgba(255,255,255,1) !important;
+//   background-color: white !important;
+// }
diff --git a/src/views/ChatRoom/Body/Message/Comment/index.js b/src/views/ChatRoom/Body/Message/Comment/index.js
new file mode 100644
index 0000000..e40d64a
--- /dev/null
+++ b/src/views/ChatRoom/Body/Message/Comment/index.js
@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import DoneIcon from '@material-ui/icons/Done';
+import DoneAllIcon from '@material-ui/icons/DoneAll';
+import EditIcon from '@material-ui/icons/Edit';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import './index.scss';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ReplyIcon from '@material-ui/icons/Reply';
+import ForwardIcon from '@material-ui/icons/Forward';
+import DeleteIcon from '@material-ui/icons/Delete';
+import ScheduleIcon from '@material-ui/icons/Schedule';
+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 Comment extends Component {
+  state = { messageMenu: null };
+  handleClose = () => {
+    this.setState({
+      messageMenu: null,
+    });
+  };
+  handleClick = (event) => {
+    this.setState({
+      messageMenu: event.currentTarget,
+    });
+  };
+  render() {
+    const { message, user, document, children, addcounter } = this.props;
+    const { messageMenu } = this.state;
+    const hasavatar = prevUserId != message.userId;
+
+    return (
+      
+        
+          
+            
 addcounter('nothing')}>
+              
+            
+            
+          
+
+          
{message.text}
+        
+      
+        
+          {message.options.map((option, i) => (
+            
+              {option.map((item, i) => (
+                
 this.click(item.id)}
+                >
+                  {item.name}
+                
+              ))}
+            
+          ))}
+        
+      
+        
+          {message.options.map((row) => (
+            |
+          ))}
+        
+        {isActive && (
+          
+        )}
+      
+      {props.list.map((item) => (
+        +      ))}
+
+  );
+};
+
+const Item = (props) => {
+  return (
+     props.handleRadioChange(props.item.name)}
+      style={{
+        backgroundColor: props.item.name === props.value ? '#6f42c1' : 'rgb(181 224 252 / 47%)',
+        color: props.item.name === props.value ? 'white' : 'black',
+      }}
+    >
+      {props.item.name}
+    
+  );
+};
diff --git a/src/views/ChatRoom/Body/Message/Normal/index.js b/src/views/ChatRoom/Body/Message/Normal/index.js
new file mode 100644
index 0000000..e9be640
--- /dev/null
+++ b/src/views/ChatRoom/Body/Message/Normal/index.js
@@ -0,0 +1,245 @@
+import React, { Component } from 'react';
+import ReactAudioPlayer from 'react-audio-player';
+import ReactPlayer from 'react-player';
+import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
+import Avatar from '@material-ui/core/Avatar';
+import moment from 'jalali-moment';
+import DoneIcon from '@material-ui/icons/Done';
+import DoneAllIcon from '@material-ui/icons/DoneAll';
+import EditIcon from '@material-ui/icons/Edit';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import './index.scss';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ReplyIcon from '@material-ui/icons/Reply';
+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 = () => {
+    this.setState({
+      messageMenu: null,
+    });
+  };
+  handleClick = (event) => {
+    this.setState({
+      messageMenu: event.currentTarget,
+    });
+  };
+  render() {
+    const { message, user, document, isSelf, prevUserId, children,addcounter } = this.props;
+    const { messageMenu } = this.state;
+    const hasavatar = prevUserId != message.userId;
+
+    return (
+      
+        {hasavatar && false && (
+          
+            {user.name
+              .split(' ')
+              .map((e) => e.slice(0, 1))
+              .join(' ')}
+          
+        )}
+
+        
+          
+            
+              
 addcounter('nothing')}>
+                
+              
+              
+              {hasavatar && 
{user.name}
}
+            
+
+            {message.type == 'text' ? (
+              
{message.text}
+            ) : null}
+            {message.type == 'voice' ? (
+              
+            ) : null}
+            {message.type == 'image' ? (
+              
+                
+                  }) +
+                
+                
{message.text}
+              
+            ) : null}
+            {message.type == 'video' ? (
+              
+            ) : null}
+            {message.type == 'audio' ? (
+              
+            ) : null}
+            {message.type == 'document' ? (
+              
+                
+                {message.text}
+              
+            ) : null}
+
+            
+              
+                {message.updatedAt != message.createdAt ? (
+                  <>
+                     ویرایش در
+
+                    {moment(message.updatedAt).format(' hh:mm jMM/jDD')}
+                  >
+                ) : (
+                  moment(message.createdAt).format('hh:mm')
+                )}
+              
+              
+                {isSelf && message.status == 0 && }
+                {isSelf && message.status == 2 && }
+                {isSelf && message.status == 1 && (
+                  
+                )}
+              
+            
+          
+
+          
 addcounter('nothing')}>
+            {!isSelf ? (
+              <>
+                {' '}
+                
+                   {10}
+                  
+                  
+                
+                
+                   {10}
+                  
+                
+              >
+            ) : (
+              <>
+                
+                  
+                    +5
+                    
+                    خلاقیت
+                  
+                
+              >
+            )}
+          
+        
+        
+          {children}
+        
+      
+        
+          {message.options.map((row) => (
+            |
+          ))}
+        
+        {isActive && (
+          
+        )}
+      
+      {props.list.map((item) => (
+        +      ))}
+
+  );
+};
+
+const Item = (props) => {
+  return (
+     props.handleRadioChange(props.item.name)}
+      style={{
+        backgroundColor:
+          props.item.name === props.value ? 'rgb(100, 205, 130)' : 'rgba(255, 255, 255, 0.4)',
+        color: props.item.name === props.value ? 'white' : 'black',
+      }}
+    >
+      {props.item.name}
+    
+  );
+};
diff --git a/src/views/ChatRoom/Body/Message/Select/index.scss b/src/views/ChatRoom/Body/Message/Select/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/ChatRoom/Body/Message/Slider/index.js b/src/views/ChatRoom/Body/Message/Slider/index.js
new file mode 100644
index 0000000..5458515
--- /dev/null
+++ b/src/views/ChatRoom/Body/Message/Slider/index.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import Grid from '@material-ui/core/Grid';
+import Slider from '@material-ui/core/Slider';
+import Input from '@material-ui/core/Input';
+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 {
+  state = {
+    value: this.props.message.value || 0,
+  };
+  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))) });
+  };
+
+  render() {
+    const { message, isActive, action } = this.props;
+    const [min, max, step] = message.options[0] || [0, 100, 1];
+    const { value } = this.state;
+    return (
+      
+        
+          
+             this.onChange(value)}
+              aria-labelledby="input-slider"
+              min={min}
+              max={max}
+              step={step}
+            />
+          
+          
+             this.onChange(e.target.value)}
+              onBlur={() => this.onChange(value)}
+              inputProps={{
+                step: step,
+                min: min,
+                max: max,
+                type: 'number',
+                'aria-labelledby': 'input-slider',
+              }}
+            />
+          
+        
+        {isActive && (
+          
+        )}
+      
+        
+        {isActive && (
+          
+        )}
+      
+      {items.map((row, index) => (
+        
+      ))}
+    
+  );
+});
+
+const SortableItem = SortableElement(({ value }) => (
+  
+    {value.map((item) => (
+      
{item.name}
+    ))}
+  
+        
+          {Action ? (
+            
+          ) : null}
+          {/* {isActive && (
+            
+          )} */}
+        
+      
 this.addcounter('parent')}
+      >
+        
+          {chatInfo.users &&
+            messageList.map((message, i) =>
+              this.state.image === null &&
+              this.state.music === null &&
+              this.state.video === null ? (
+                
 this.addcounter()}
+                  isActive={message.id == last.id}
+                  prevUserId={i > 0 ? messageList[i - 1].userId : 0}
+                  isSelf={new Set([101, 103, 106, 108, 110]).has(message.userId * 1)}
+                  key={message.id}
+                  file={this.state.image}
+                  document={this.state.document}
+                  message={message}
+                  user={userIdx[message.userId] || { id: 0, fileId: 0, name: 'null' }}
+                />
+              ) : null
+            )}
+          {this.state.image !== null ? (
+            
+              

+            
+              
+            
+          ) : null}
+          {this.state.music !== null ? (
+            
+              
+            
+          ) : null}
+          {this.state.document !== null ? (
+            
+              
+                
{`ارسال (${this.state.document.name}) به ${this.props.info.title}؟`}
+                
+                  
+                  
+                
+              
+            
+        
 this.addcounter('nothing')}
+        >
+          {last.action == 'text' ? (
+            
 this.addcounter()}
+              onStop={this.onStop}
+              stop={this.stop}
+              start={this.start}
+              cancel={this.cancel}
+              message={this.state.message}
+              recordState={this.state.voice}
+              typeText={this.typeText}
+              sendMessage={this.sendMessage}
+              addFile={this.addFile}
+              file={this.state.file}
+              parent={this}
+            />
+          ) : null}
+          {last.action === 'keyboard' ? (
+             this.addcounter()} />
+          ) : null}
+          {this.state.emoji ? (
+            
+              
+            
+          ) : null}
+        
+        
+      
+        
+          
+              page === "chatroom" ? this.back() : setPage("chatroom")
+            }
+            style={{ color: "white", width: 29, height: 29, marginTop: 4 }}
+          />
+           setPage("info")}
+            className="chat-header__info d-flex mr-1"
+          >
+            
+            
+              
{chatInfo ? chatInfo.title : null}
+              {chatInfo ? chatInfo.subTitle : null}
+            
+          
+        
+      
+        
+          
 this.setType('media')}
+          >
+            Media
+          
+           this.setType('file')}
+          >
+            Files
+          
+           this.setType('link')}
+          >
+            Links
+          
+           this.setType('music')}
+          >
+            Music
+          
+           this.setType('voice')}
+          >
+            Voice
+          
+        
+        {this.state.type === 'media' ? (
+          
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+          
+        ) : null}
+      
+      
 props.onClick(null)}>
+        
+      
+      
+        {props.data.map((item, i) => (
+          
+        ))}
+      
+    
 ;
+};
diff --git a/src/views/ChatRoom/Info/Gallery/index.scss b/src/views/ChatRoom/Info/Gallery/index.scss
new file mode 100644
index 0000000..a1149d6
--- /dev/null
+++ b/src/views/ChatRoom/Info/Gallery/index.scss
@@ -0,0 +1,64 @@
+@media screen and (max-width: 4500px) {
+  .gallery-modal {
+    width: 100%;
+    height: 100%;
+    background-color: #383737f1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 700;
+    .rec-carousel-wrapper {
+      position: relative;
+      bottom: 70px;
+    }
+    .rec-arrow {
+      position: absolute;
+      background: none;
+      box-shadow: none;
+      &:hover:enabled {
+        background: none;
+        box-shadow: none;
+        color: black;
+      }
+    }
+    .rec-arrow-right {
+      top: calc(50% - 20px);
+      left: 0px;
+      z-index: 800;
+    }
+    .rec-arrow-left {
+      top: calc(50% - 20px);
+      right: 0px;
+      z-index: 800;
+    }
+    .rec-pagination {
+      // display:none;
+      z-index: 600;
+      position: absolute;
+      top: auto;
+      bottom: -30px !important;
+      // left: calc(50% - 20px) !important;
+      & button {
+        background-color: grey;
+        margin: 2px !important;
+        box-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
+      }
+    }
+  }
+  .rec-dot_active {
+    background-color: white !important;
+    color: white !important;
+    // box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important;
+  }
+
+  .Carousel-button-10 {
+    background-color: white !important;
+  }
+  .rec-pagination {
+    img {
+      // width: 100vw;
+      // max-height: 200px;
+      // height: 100vh;
+    }
+  }
+}
diff --git a/src/views/ChatRoom/Info/index.js b/src/views/ChatRoom/Info/index.js
new file mode 100644
index 0000000..ac07b94
--- /dev/null
+++ b/src/views/ChatRoom/Info/index.js
@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import ChatIcon from '@material-ui/icons/Chat';
+import FileTabs from './FileTabs';
+import Gallery from './Gallery';
+import user2 from '../../../assets/images/user2.png';
+
+import './index.scss';
+export default class ChatInfo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      gallery: null,
+      user: {
+        profileImages: [
+          { id: 0, src: user2 },
+          { id: 1, src: user2 },
+          { id: 2, src: user2 },
+          { id: 3, src: user2 },
+        ],
+        name: 'محسن محمدی',
+        lastAct: '2 دقیقه پیش آنلاین بوده',
+        bio: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد ',
+      },
+    };
+  }
+
+  setGallery = (val) => {
+    this.setState({
+      gallery: val,
+    });
+  };
+
+  render() {
+    const { user, gallery } = this.state;
+    return (
+
;
+};
diff --git a/src/views/ChatRoom/Info/Gallery/index.scss b/src/views/ChatRoom/Info/Gallery/index.scss
new file mode 100644
index 0000000..a1149d6
--- /dev/null
+++ b/src/views/ChatRoom/Info/Gallery/index.scss
@@ -0,0 +1,64 @@
+@media screen and (max-width: 4500px) {
+  .gallery-modal {
+    width: 100%;
+    height: 100%;
+    background-color: #383737f1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 700;
+    .rec-carousel-wrapper {
+      position: relative;
+      bottom: 70px;
+    }
+    .rec-arrow {
+      position: absolute;
+      background: none;
+      box-shadow: none;
+      &:hover:enabled {
+        background: none;
+        box-shadow: none;
+        color: black;
+      }
+    }
+    .rec-arrow-right {
+      top: calc(50% - 20px);
+      left: 0px;
+      z-index: 800;
+    }
+    .rec-arrow-left {
+      top: calc(50% - 20px);
+      right: 0px;
+      z-index: 800;
+    }
+    .rec-pagination {
+      // display:none;
+      z-index: 600;
+      position: absolute;
+      top: auto;
+      bottom: -30px !important;
+      // left: calc(50% - 20px) !important;
+      & button {
+        background-color: grey;
+        margin: 2px !important;
+        box-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
+      }
+    }
+  }
+  .rec-dot_active {
+    background-color: white !important;
+    color: white !important;
+    // box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important;
+  }
+
+  .Carousel-button-10 {
+    background-color: white !important;
+  }
+  .rec-pagination {
+    img {
+      // width: 100vw;
+      // max-height: 200px;
+      // height: 100vh;
+    }
+  }
+}
diff --git a/src/views/ChatRoom/Info/index.js b/src/views/ChatRoom/Info/index.js
new file mode 100644
index 0000000..ac07b94
--- /dev/null
+++ b/src/views/ChatRoom/Info/index.js
@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import ChatIcon from '@material-ui/icons/Chat';
+import FileTabs from './FileTabs';
+import Gallery from './Gallery';
+import user2 from '../../../assets/images/user2.png';
+
+import './index.scss';
+export default class ChatInfo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      gallery: null,
+      user: {
+        profileImages: [
+          { id: 0, src: user2 },
+          { id: 1, src: user2 },
+          { id: 2, src: user2 },
+          { id: 3, src: user2 },
+        ],
+        name: 'محسن محمدی',
+        lastAct: '2 دقیقه پیش آنلاین بوده',
+        bio: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد ',
+      },
+    };
+  }
+
+  setGallery = (val) => {
+    this.setState({
+      gallery: val,
+    });
+  };
+
+  render() {
+    const { user, gallery } = this.state;
+    return (
+      
+        
+          

 this.setGallery('profile')} alt="" />
+          
+            
+          
+        
+        
+          
+            
{user.name}
+            
{user.lastAct}
+          
+          
+          
+        
+        {gallery === 'profile' ? (
+          
+        ) : null}
+        {gallery === 'media' ? 
 : null}
+      
+        
+        {this.state.page === 'chatroom' ? (
+          <>
+            
+          >
+        ) : (
+          <>
+            
+          >
+        )}
+      
+    );
+  }
+}
diff --git a/src/views/ChatRoom/index.scss b/src/views/ChatRoom/index.scss
new file mode 100644
index 0000000..e4bf0ac
--- /dev/null
+++ b/src/views/ChatRoom/index.scss
@@ -0,0 +1,33 @@
+@media screen and (max-width: 4500px) {
+  .chat-room {
+    flex: 1;
+    background: rgb(139, 73, 186);
+    background: linear-gradient(180deg, rgb(144, 73, 186) 0%, #64cd82 22%);
+    height: 100vh;
+    overflow: hidden;
+    width: 100vw;
+    box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8);
+    &__status {
+      border-top-left-radius: 40px;
+      border-top-right-radius: 40px;
+      height: 150px;
+      background: rgb(106, 103, 250);
+      position: relative;
+      align-items: center;
+      justify-content: flex-start;
+      h1 {
+        font-size: 18px;
+        margin: 0;
+        letter-spacing: -1px;
+        font-family: IRANSansNumeralLight;
+        color: white;
+        font-weight: 100;
+      }
+      p {
+        font-size: 12px;
+        color: white;
+        margin: 0px;
+      }
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index dd51740..767e126 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1150,6 +1150,13 @@
     core-js-pure "^3.14.0"
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c"
+  integrity sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==
+  dependencies:
+    regenerator-runtime "^0.12.0"
+
 "@babel/runtime@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
@@ -1164,6 +1171,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.2.0":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.14.5", "@babel/template@^7.3.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
@@ -1592,6 +1606,11 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@react-leaflet/core@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.1.0.tgz#389b2b373f1da4caeb3c4cf6f33d84561c58d504"
+  integrity sha512-zFxMHgfjCi7khRVB7o7H8NoJl36NaezvfcaeEurVXx22lAGHFlTHiSuLOGA4tOiHj+Ep+Lo3uwUGJ3YM9BGkHg==
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@@ -2563,6 +2582,11 @@ array-includes@^3.1.1, array-includes@^3.1.2, array-includes@^3.1.3:
     get-intrinsic "^1.1.1"
     is-string "^1.0.5"
 
+array-move@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/array-move/-/array-move-3.0.1.tgz#179645cc0987b65953a4fc06b6df9045e4ba9618"
+  integrity sha512-H3Of6NIn2nNU1gsVDqDnYKY/LCdWvCMMOWifNGhKcVQgiZ6nOek39aESOvro6zmueP07exSl93YLvkN4fZOkSg==
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -2679,6 +2703,13 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+audio-react-recorder@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/audio-react-recorder/-/audio-react-recorder-1.0.4.tgz#db81f10286c2252af8d42162e1f49dbd1de0dffd"
+  integrity sha512-an7eX0yOGDbZOSu2LvnfWIsI41pkx9nXgtBVbI+9ByS91WKqoVGVb5pbmqHax5sZty2DjOIG/neuxcghIU/ucg==
+  dependencies:
+    prop-types "^15.7.2"
+
 autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -4217,7 +4248,7 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
-deepmerge@^4.2.2:
+deepmerge@^4.0.0, deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
@@ -6078,6 +6109,13 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -7141,6 +7179,11 @@ jss@10.6.0, jss@^10.5.1:
     array-includes "^3.1.2"
     object.assign "^4.1.2"
 
+keycode@^2.1.7:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
+  integrity sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -7236,6 +7279,11 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
+
 loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
@@ -7351,7 +7399,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7449,6 +7497,11 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -9220,7 +9273,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9391,6 +9444,13 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-audio-player@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/react-audio-player/-/react-audio-player-0.17.0.tgz#4be7b1952512801f36ba0865a9c98f7b108f991e"
+  integrity sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
@@ -9445,6 +9505,20 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-event-listener@^0.6.0:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.6.tgz#758f7b991cad9086dd39fd29fad72127e1d8962a"
+  integrity sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    prop-types "^15.6.0"
+    warning "^4.0.1"
+
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9455,11 +9529,29 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-leaflet@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-3.2.0.tgz#8d5d05beab3f9e52665738ad737bb7b1da99f30b"
+  integrity sha512-eHVqoRGjW8T9GxLt7jyTKP3BDQ7XQ5AD+tc/zkbaABn1dbmREDy8GojNcYjZQa3QFLQoOLQMcUC1PTtzytZpUA==
+  dependencies:
+    "@react-leaflet/core" "^1.1.0"
+
 react-only-when@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-only-when/-/react-only-when-1.0.2.tgz#a8a79b48dd6cfbd91ddc710674a94153e88039d3"
   integrity sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q==
 
+react-player@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.9.0.tgz#ef7fe7073434087565f00ff219824e1e02c4b046"
+  integrity sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-qr-scanner@^1.0.0-alpha.7:
   version "1.0.0-alpha.7"
   resolved "https://registry.yarnpkg.com/react-qr-scanner/-/react-qr-scanner-1.0.0-alpha.7.tgz#f63993cffe238f8cbca4984d03973accc842500b"
@@ -9580,6 +9672,46 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-sortable-hoc@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz#f6780d8aa4b922a21f3e754af542f032677078b7"
+  integrity sha512-JZUw7hBsAHXK7PTyErJyI7SopSBFRcFHDjWW5SWjcugY0i6iH7f+eJkY8cJmGMlZ1C9xz1J3Vjz0plFpavVeRg==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    invariant "^2.2.4"
+    prop-types "^15.5.7"
+
+react-swipeable-views-core@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.14.0.tgz#6ac443a7cc7bc5ea022fbd549292bb5fff361cce"
+  integrity sha512-0W/e9uPweNEOSPjmYtuKSC/SvKKg1sfo+WtPdnxeLF3t2L82h7jjszuOHz9C23fzkvLfdgkaOmcbAxE9w2GEjA==
+  dependencies:
+    "@babel/runtime" "7.0.0"
+    warning "^4.0.1"
+
+react-swipeable-views-utils@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.14.0.tgz#6b76e251906747482730c22002fe47ab1014ba32"
+  integrity sha512-W+fXBOsDqgFK1/g7MzRMVcDurp3LqO3ksC8UgInh2P/tKgb5DusuuB1geKHFc6o1wKl+4oyER4Zh3Lxmr8xbXA==
+  dependencies:
+    "@babel/runtime" "7.0.0"
+    keycode "^2.1.7"
+    prop-types "^15.6.0"
+    react-event-listener "^0.6.0"
+    react-swipeable-views-core "^0.14.0"
+    shallow-equal "^1.2.1"
+
+react-swipeable-views@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/react-swipeable-views/-/react-swipeable-views-0.14.0.tgz#149c0df3d92220cc89e3f6d5c04a78dfe46f9b54"
+  integrity sha512-wrTT6bi2nC3JbmyNAsPXffUXLn0DVT9SbbcFr36gKpbaCgEp7rX/OFxsu5hPc/NBsUhHyoSRGvwqJNNrWTwCww==
+  dependencies:
+    "@babel/runtime" "7.0.0"
+    prop-types "^15.5.4"
+    react-swipeable-views-core "^0.14.0"
+    react-swipeable-views-utils "^0.14.0"
+    warning "^4.0.1"
+
 react-swipeable@^5.5.1:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-5.5.1.tgz#48ae6182deaf62f21d4b87469b60281dbd7c4a76"
@@ -9735,6 +9867,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.12.0:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
+  integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
+
 regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -10306,6 +10443,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallow-equal@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
 shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
@@ -11511,6 +11653,13 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"