доработка чата

src/views/ChatView.vue

@@ -19,14 +19,17 @@
         </div>
         <div class="participant-info">
           <h2 class="participant-name">{{ getOtherParticipantName() || 'Собеседник' }}</h2>
-          <p v-if="otherUserIsTyping" class="typing-status">
-            <span class="typing-animation">
-              <span class="dot"></span>
-              <span class="dot"></span>
-              <span class="dot"></span>
-            </span>
-            печатает...
-          </p>
+          <div class="typing-status-container">
+            <p v-if="otherUserIsTyping" class="typing-status">
+              <span class="typing-animation">
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+              </span>
+              печатает...
+            </p>
+            <p v-else class="typing-status-placeholder"></p>
+          </div>
         </div>
       </div>
     </div>
@@ -110,14 +113,15 @@
     <!-- Фиксированный нижний блок для ввода сообщений -->
     <div v-if="isAuthenticated && conversationData" class="message-input-container">
       <form @submit.prevent="editingMessageId ? saveEditedMessage() : sendMessage()" class="message-form">
-        <input
-          type="text"
+        <textarea
           v-model="newMessageText"
           class="message-input"
           :placeholder="editingMessageId ? 'Редактирование сообщения...' : 'Введите сообщение...'"
           :disabled="sendingMessage || savingEdit"
           ref="messageInputRef"
-        />
+          @input="resizeTextarea"
+          rows="1"
+        ></textarea>
         <div class="input-actions">
           <button 
             v-if="editingMessageId" 
@@ -130,12 +134,12 @@
           </button>
           <button 
             type="submit" 
-            class="action-btn primary" 
+            class="send-button" 
             :disabled="sendingMessage || savingEdit || !newMessageText.trim()"
+            :class="{ 'active': newMessageText.trim() }"
           >
             <span v-if="sendingMessage || savingEdit" class="spinner-small"></span>
-            <i v-else :class="editingMessageId ? 'bi-check' : 'bi-send'"></i>
-            {{ editingMessageId ? 'Сохранить' : 'Отправить' }}
+            <i v-else :class="editingMessageId ? 'bi-check' : 'bi-send-fill'"></i>
           </button>
         </div>
       </form>
@@ -763,6 +767,22 @@ const handleClickOutsideContextMenu = (event) => {
     contextMenu.value.visible = false;
   }
 };
+
+const resizeTextarea = (event) => {
+  const textarea = event.target;
+  
+  // Сбрасываем высоту к минимуму для правильного расчета
+  textarea.style.height = 'auto';
+  
+  // Вычисляем новую высоту на основе содержимого, но не более 150px
+  const newHeight = Math.min(textarea.scrollHeight, 150);
+  
+  // Минимальная высота - одна строка (примерно 38px с учетом padding)
+  const minHeight = 38;
+  
+  // Устанавливаем новую высоту, но не меньше минимальной
+  textarea.style.height = `${Math.max(minHeight, newHeight)}px`;
+};
 </script>
 
 <style scoped>
@@ -859,6 +879,12 @@ const handleClickOutsideContextMenu = (event) => {
   text-overflow: ellipsis;
 }
 
+.typing-status-container {
+  display: flex;
+  align-items: center;
+  height: 20px; /* Фиксированная высота для области статуса печати */
+}
+
 .typing-status {
   margin: 0;
   font-size: 0.8rem;
@@ -1178,12 +1204,17 @@ const handleClickOutsideContextMenu = (event) => {
   padding: 0.7rem 1rem;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 24px;
-  font-size: 16px; /* Устанавливаем оптимальный размер шрифта для мобильных устройств */
+  font-size: 16px;
   background: white;
-  -webkit-appearance: none; /* Предотвращаем стилизацию браузера на iOS */
+  -webkit-appearance: none;
   appearance: none;
-  -webkit-tap-highlight-color: transparent; /* Убираем подсветку на тап */
-  touch-action: manipulation; /* Улучшение отзывчивости на мобильных устройствах */
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  resize: none; /* Убираем возможность изменения размера пользователем */
+  max-height: 150px; /* Максимальная высота поля ввода */
+  overflow-y: auto; /* Добавляем прокрутку при достижении максимальной высоты */
+  word-wrap: break-word; /* Обеспечиваем перенос длинных слов */
+  line-height: 1.4; /* Оптимальная высота строки */
 }
 
 .message-input:focus {
@@ -1197,6 +1228,40 @@ const handleClickOutsideContextMenu = (event) => {
   gap: 0.5rem;
 }
 
+/* Круглая кнопка отправки в стиле Телеграма */
+.send-button {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: none;
+  background: #e0e0e0;
+  color: #8e8e8e;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: none;
+  padding: 0;
+}
+
+.send-button.active {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+}
+
+.send-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.send-button i {
+  font-size: 1.2rem;
+}
+
 .action-btn {
   display: inline-flex;
   align-items: center;