Improve Domovoy chat composer usability

cmd/creator-web/static/assets/chat.css

@@ -67,14 +67,20 @@ textarea { resize: vertical; min-height: 84px; max-height: 240px; padding: 14px;
 .side-note small, .ai-info-card p, .ai-data-form small { display: block; margin-top: 9px; color: var(--muted); line-height: 1.45; }
 .chat-main { min-width: 0; min-height: 0; overflow: hidden; display: grid; }
 .surface-panel { min-height: 0; position: relative; overflow-y: auto; }
-.active-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; }
-.messages { width: min(100%, 920px); min-height: 0; margin: 0 auto; padding: 28px 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
+.active-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; background: radial-gradient(circle at 50% 0%, rgba(201, 168, 95, .045), transparent 42%); }
+.messages { width: min(100%, 920px); min-height: 0; margin: 0 auto; padding: clamp(28px, 5vh, 56px) 18px 24px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; scrollbar-color: #39483f transparent; }
 .message { max-width: min(720px, 92%); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.45; white-space: pre-wrap; }
-.message.user { align-self: flex-end; background: #151e1a; }
-.message.assistant { align-self: flex-start; background: #0f1613; }
+.message.user { align-self: flex-end; background: #18221c; border-color: #3a493d; }
+.message.assistant { align-self: flex-start; background: #111a15; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
 .message small { display: block; margin-top: 8px; color: var(--muted); font: 10px/1 var(--mono); text-transform: uppercase; }
-.composer { width: min(100%, 920px); margin: 0 auto; padding: 16px 18px 10px; display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; background: linear-gradient(transparent, var(--base) 20%); }
-.composer button { height: 48px; align-self: end; }
+.composer { width: min(100%, 920px); margin: 0 auto; padding: 10px 18px 8px; display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; border-top: 1px solid rgba(42, 53, 47, .85); background: linear-gradient(var(--base), rgba(11, 16, 14, .98)); }
+.composer-input-wrap { min-width: 0; border: 1px solid #3a493f; border-radius: 5px; background: #101813; transition: border-color .15s ease, box-shadow .15s ease; }
+.composer-input-wrap:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(201, 168, 95, .12); }
+.composer textarea { min-height: 48px; max-height: 220px; resize: none; border: 0; background: transparent; }
+.composer-hint { display: flex; justify-content: space-between; gap: 12px; padding: 0 12px 8px; color: #68776d; font: 9px/1 var(--mono); }
+.composer-hint output { color: var(--muted); white-space: nowrap; }
+.composer button { height: 48px; align-self: end; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 15px; }
+.composer button span:last-child { opacity: .65; font: 16px/1 var(--mono); }
 .composer button:disabled { cursor: wait; filter: saturate(.3); }
 .media-tools { width: min(100%, 920px); margin: 0 auto; padding: 0 18px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
 .media-tools label { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px; border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
@@ -107,8 +113,9 @@ textarea { resize: vertical; min-height: 84px; max-height: 240px; padding: 14px;
 .empty-state.error { color: var(--bad); }
 @media (max-width: 640px) {
   .chat-view { height: auto; min-height: 100vh; overflow: visible; display: block; }
-  .composer { grid-template-columns: 1fr; }
+  .composer { grid-template-columns: 1fr; padding-inline: 12px; }
   .composer button { width: 100%; }
+  .composer-hint { font-size: 8px; }
   .conversation-starters { align-items: stretch; }
   .conversation-starters span { width: 100%; }
   .chat-header { gap: 10px; padding: 0 12px; }

cmd/creator-web/static/assets/chat.js

@@ -6,6 +6,7 @@ const messages = document.querySelector("#messages");
 const chatForm = document.querySelector("#chat-form");
 const messageInput = document.querySelector("#message");
 const sendButton = document.querySelector("#send");
+const messageCount = document.querySelector("#message-count");
 const logoutButton = document.querySelector("#logout");
 const activeFocus = document.querySelector("#active-focus");
 const cognitiveStatus = document.querySelector("#cognitive-status");
@@ -24,6 +25,13 @@ let conversationID = sessionStorage.getItem("domovoy.chat.conversation") || "";
 let localHistory = [];
 let cognitiveStatusTimer = null;
 
+function resizeComposerInput() {
+  if (!messageInput) return;
+  messageInput.style.height = "auto";
+  messageInput.style.height = `${Math.min(messageInput.scrollHeight, 220)}px`;
+  if (messageCount) messageCount.textContent = `${messageInput.value.length.toLocaleString("ru-RU")} / 16 384`;
+}
+
 class ChatApiError extends Error {
   constructor(status, detail = "") {
     super(detail || `chat api returned ${status}`);
@@ -95,6 +103,7 @@ function showChat() {
   }
   startCognitiveStatusPolling();
   messageInput.focus();
+  resizeComposerInput();
 }
 
 function showLogin() {
@@ -334,9 +343,12 @@ chatForm.addEventListener("submit", async (event) => {
   const text = messageInput.value.trim();
   if (!text) return;
   messageInput.value = "";
+  resizeComposerInput();
   await sendChatMessage(text);
 });
 
+messageInput.addEventListener("input", resizeComposerInput);
+
 async function processMedia(input, path, label) {
   const file = input?.files?.[0];
   if (!file || !mediaStatus) return;
@@ -405,3 +417,4 @@ if (token) {
 } else {
   showLogin();
 }
+resizeComposerInput();

cmd/creator-web/static/chat.html

@@ -57,8 +57,11 @@
           <section id="chat-panel" class="surface-panel active-panel">
             <div id="messages" class="messages" aria-live="polite"></div>
             <form id="chat-form" class="composer">
-              <textarea id="message" rows="3" maxlength="16384" placeholder="Напишите Домовому обычное сообщение..." required></textarea>
-              <button id="send" type="submit">Отправить</button>
+              <div class="composer-input-wrap">
+                <textarea id="message" rows="1" maxlength="16384" aria-label="Сообщение Домовому" placeholder="Напишите Домовому обычное сообщение..." required></textarea>
+                <div class="composer-hint"><span>Enter — отправить · Shift+Enter — новая строка</span><output id="message-count" aria-live="polite">0 / 16384</output></div>
+              </div>
+              <button id="send" type="submit"><span>Отправить</span><span aria-hidden="true">↵</span></button>
             </form>
             <div class="media-tools" aria-label="Мультимодальные сообщения">
               <label>Аудио <input id="audio-input" type="file" accept="audio/*"></label>