diff --git a/cmd/creator-web/static/assets/chat.css b/cmd/creator-web/static/assets/chat.css index 07625df..c2b3f7c 100644 --- a/cmd/creator-web/static/assets/chat.css +++ b/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; } diff --git a/cmd/creator-web/static/assets/chat.js b/cmd/creator-web/static/assets/chat.js index 0298a26..cb5e35c 100644 --- a/cmd/creator-web/static/assets/chat.js +++ b/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(); diff --git a/cmd/creator-web/static/chat.html b/cmd/creator-web/static/chat.html index e3b1017..f083150 100644 --- a/cmd/creator-web/static/chat.html +++ b/cmd/creator-web/static/chat.html @@ -57,8 +57,11 @@
- - +
+ +
Enter — отправить · Shift+Enter — новая строка0 / 16384
+
+