Merge pull request #379 from iceljc/features/refine-chat-window

refine chat text area focus

Author: iceljc

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -215,6 +215,9 @@
 		// const editor = lastBotMsg?.rich_content?.editor || '';
 		loadTextEditor = true; // TEXT_EDITORS.includes(editor) || !Object.values(EditorType).includes(editor);
 		loadEditor = !isSendingMsg && !isThinking && loadTextEditor && messageQueue.length === 0;
+		if (loadEditor) {
+			focusChatTextArea();
+		}
 	}
 
 	$: {
@@ -270,12 +273,26 @@
 				handleChatAction(e);
 			}
 		});
+
+		await focusChatTextArea();
 	});
 
 	function handleLogoutAction() {
 		resetLocalStorage(true);
 	}
 
+	function focusChatTextArea() {
+		return new Promise(resolve => {
+			tick().then(() => {
+				const textarea = document.getElementById('chat-textarea');
+				if (textarea) {
+					textarea.focus();
+				}
+				resolve('focused');
+			});
+		});
+	}
+
 	/** @param {any} e */
 	function handleNewChatAction(e) {
 		if (!isCreatingNewConv && !isThinking && !isSendingMsg) {
@@ -1947,6 +1964,7 @@
 							<div class="col">
 								<div class="position-relative">
 									<ChatTextArea
+										id={'chat-textarea'}
 										className={`chat-input ${!isLite ? 'chat-more-util' : ''}`}
 										maxLength={maxTextLength}
 										disabled={isSendingMsg || isThinking || disableAction}

src/routes/chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte

@@ -2,6 +2,9 @@
 	import { clickoutsideDirective } from "$lib/helpers/directives";
     import _ from "lodash";
 
+    /** @type {string} */
+    export let id;
+
     /** @type {string} */
     export let className = '';
 
@@ -110,6 +113,7 @@
         </div>
     {/if}
     <textarea
+        id={id}
         class={`form-control ${className}`}
         rows={rows}
         maxlength={maxLength}

src/routes/page/dashboard/Conversation.svelte

@@ -120,6 +120,7 @@
 							<div class="col-10">
 								<div class="position-relative">
 									<ChatTextArea
+										id={'dashboard-chat-textarea'}
 										className={`chat-input`}
 										maxLength={1024}
 										disabled={false}