chat page Sending Message And Scroll bar done

src/App.css

@@ -12,6 +12,9 @@ input::-webkit-inner-spin-button {
 .rtl{
   direction: rtl;
 }
+.ltr{
+  direction: ltr;
+}
 /* width */
 ::-webkit-scrollbar {
   width: 5px;

src/view/chatPage/index.js

@@ -22,6 +22,8 @@ const ChatPage = ({
 }) => {
     const navigate = useNavigate();
     const messagesEndRef = useRef(null)
+    const [thisMessages, setMessages] = useState(messages);
+    const [inputVal, setInpuVal] = useState('')
     const [contacts] = useState([
         {
           id: 1,
@@ -101,10 +103,14 @@ const ChatPage = ({
     useEffect(() => {
         messagesEndRef.current.scrollIntoView({behavior: 'smooth'})
     }, [])
+    useEffect(() => {
+      messagesEndRef.current.scrollIntoView({behavior: 'smooth'})
+  }, [thisMessages])
     const textareaHanler=(e)=>{
         e.target.style.height = `3rem`;
         let scHeight = e.target.scrollHeight;
         e.target.style.height = `${scHeight}px`;
+        
       }
     return(isMobile ?
         <div className="w-full flex  flex-col items-center py-20">
@@ -113,7 +119,7 @@ const ChatPage = ({
             </div>
 
             {
-                messages.map((message) => (
+                thisMessages.map((message) => (
                     <div className={`w-full p-5 flex ${message.userId == user.id && 'rtl'}`}>
                         {message.userId == contact.id && <img src={message.userId == contact.id ? contact.avatar : user.avatar} className={`w-12 h-12 rounded-full ${message.userId == user.id ? 'ml-2' : 'mr-2'}`}/>}
                         <div className={`${message.userId == user.id ? 'bg-blue-200 text-gray-500 text-sm rounded-tr-none' : 'bg-blue-400 text-gray-100 text-sm rounded-tl-none'} p-3 rounded-xl text-right flex flex-col `}>
@@ -146,12 +152,31 @@ const ChatPage = ({
             className="Messages-main-box-footer-textarea w-full bg-transparent h-12 max-h-72 pr-6 outline-0 pt-3"
             style={{ resize: "none", direction: "rtl" }}
             placeholder="پیام..."
-            onKeyUp={(e) => textareaHanler(e)}
+            // onKeyUp={(e) => textareaHanler(e)}
+            onKeyDown={(e) => {
+              if(e.key === 'Enter'){
+                setMessages([...messages, {
+                  value: 'عالیه',
+                  status: 1,
+                  sendTime: '13:41',
+                  userId: 2,
+                }])
+              console.log(thisMessages)}
+              
+            }}
           ></textarea>
           <img
             src={sendIcon}
             alt="sendIcon"
             className=" bg-transparent"
+            onClick={() => {setMessages([...messages, {
+              value: 'عالیه',
+              status: 1,
+              sendTime: '13:41',
+              userId: 2,
+            }])
+          console.log(thisMessages)}
+          }
           />
         </div>
         </div> :
@@ -162,10 +187,10 @@ const ChatPage = ({
                 <div className="Messages-main-box-header-name">امیر ناظمی</div>
                 
               </div>
-              <div className="Messages-main-box-chat-box w-full h-[84%]  flex items-ceter flex-col overflow-hidden overflow-scroll overflow-x-hidden justify-between px-4">
+              <div className="Messages-main-box-chat-box w-full h-[84%] rtl flex items-ceter flex-col overflow-hidden overflow-scroll overflow-x-hidden justify-between px-4">
               {
-                messages.map((message) => (
-                    <div className={`w-full p-5 flex ${message.userId == user.id && 'rtl'}`}>
+                thisMessages.map((message) => (
+                    <div className={`w-full p-5 flex ${message.userId !== user.id && 'ltr'}`}>
                         {message.userId == contact.id && <img src={message.userId == contact.id ? contact.avatar : user.avatar} className={`w-12 h-12 rounded-full ${message.userId == user.id ? 'ml-2' : 'mr-2'}`}/>}
                         <div className={`${message.userId == user.id ? 'bg-blue-200 text-gray-500 text-sm rounded-tr-none' : 'bg-blue-400 text-gray-100 text-sm rounded-tl-none'} p-3 rounded-xl text-right flex flex-col `} style={{maxWidth: '50%'}}>
                             <p>{message.value}</p>
@@ -199,12 +224,40 @@ const ChatPage = ({
                   className="Messages-main-box-footer-textarea w-[93%] h-12 max-h-72 pr-4 outline-0 pt-2"
                   style={{ resize: "none", direction: "rtl" }}
                   placeholder="پیام..."
-                  onKeyUp={(e) => textareaHanler(e)}
+                  // onKeyUp={(e) => textareaHanler(e)}
+                  
+                  onKeyUp={(e) => {
+                    if(e.key === 'Enter' && e.ctrlKey){
+                      setMessages([...thisMessages, {
+                        value: e.target.value,
+                        status: 1,
+                        sendTime: '13:41',
+                        userId: 2,
+                      }])
+                    console.log(thisMessages)
+                    setInpuVal('')
+                  }
+                    
+                    
+                  }
+                }
+                  value={inputVal}
+                  onChange={(e) => setInpuVal(e.target.value)}
                 ></textarea>
                 <img
                   src={sendIcon}
                   alt="sendIcon"
-                  className="absolute w-8 bottom-[25%] left-24"
+                  className="absolute w-8 cursor-pointer bottom-[25%] left-24"
+                  onClick={() => {setMessages([...thisMessages, {
+                    value: document.getElementById("Messages-main-box-footer-textarea").value,
+                    status: 1,
+                    sendTime: '13:41',
+                    userId: 2,
+                  }])
+                console.log(thisMessages)
+              setInpuVal('')
+              }
+                }
                 />
               </div>
             </div>