fix(square): Add scroll behavior to message container and autofocus c…

…hat box
anpigon · May 27, 2024 · 4cce6de · 4cce6de
1 parent b200865
commit 4cce6de
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 30 deletions.
diff --git a/src/features/chatbot/chatbot.tsx b/src/features/chatbot/chatbot.tsx
@@ -14,6 +14,7 @@ import {useChatbotState} from './context';
 import {useCurrentModel} from './hooks/use-current-model';
 import {useGetAiModels} from './hooks/use-get-ai-models';
 import {useLLM} from './hooks/use-llm';
+import useOnceEffect from '@/hooks/useOnceEffect';
 
 export const Chatbot: React.FC = () => {
 	const app = useApp();
@@ -49,9 +50,18 @@ export const Chatbot: React.FC = () => {
 	});
 
 	const scrollToBottom = () => {
-		messageContainerRef.current?.scrollTo(0, messageContainerRef.current.scrollHeight);
+		// messageContainerRef.current?.scrollTo(0, messageContainerRef.current.scrollHeight);
+		messageContainerRef.current?.scroll({
+			top: messageContainerRef.current?.scrollHeight,
+			behavior: 'smooth',
+		});
 	};
 
+	useOnceEffect(() => {
+		chatBoxRef.current?.focus();
+		scrollToBottom();
+	});
+
 	useEffect(() => {
 		messageEndRef.current?.scrollIntoView({behavior: 'smooth', block: 'end'});
 	}, [messages]);

diff --git a/src/features/chatbot/components/chat-box.tsx b/src/features/chatbot/components/chat-box.tsx
@@ -35,6 +35,7 @@ export const ChatBox = forwardRef<HTMLTextAreaElement, ChatBoxProps>(({controlle
 			<div className="flex w-full relative items-center">
 				<textarea
 					ref={ref}
+					autoFocus
 					className="w-full h-8 max-h-40 resize-none text-base overflow-y-auto text-[var(--text-normal)] placeholder:text-sm"
 					// contentEditable
 					placeholder={t("What can I help you with?")}

diff --git a/src/main.ts b/src/main.ts
@@ -1,12 +1,11 @@
-import {DataWriteOptions, Plugin, TFile} from 'obsidian';
-import {promptSelectGenerateCommand, renameTitleCommand} from './components/editor/EditorCommands';
+import merge from 'lodash/merge';
+import {DataWriteOptions, Plugin, TFile, WorkspaceLeaf} from 'obsidian';
 import {DEFAULT_SETTINGS} from './constants';
 import './i18n';
 import {MAXSettings} from './types';
 import Logger, {LogLvl} from './utils/logging';
 import {ChatbotView, VIEW_TYPE_CHATBOT} from './views/chatbot-view';
 import {MAXSettingTab} from './views/setting-view';
-import merge from 'lodash/merge';
 
 import './styles.css';
 
@@ -175,9 +174,9 @@ export default class MAXPlugin extends Plugin {
 		this.addSettingTab(new MAXSettingTab(this.app, this));
 	}
 
-	handleFileSwitch() {
-		currentActiveFile = this.app.workspace.getActiveFile();
-	}
+	// handleFileSwitch() {
+	// 	currentActiveFile = this.app.workspace.getActiveFile();
+	// }
 
 	onunload() {
 		this.app.workspace.getLeavesOfType(VIEW_TYPE_CHATBOT).forEach(leaf => {
@@ -189,38 +188,32 @@ export default class MAXPlugin extends Plugin {
 	}
 
 	async activateView() {
-		this.app.workspace.detachLeavesOfType(VIEW_TYPE_CHATBOT);
-
-		const rightLeaf = this.app.workspace.getRightLeaf(false);
-		await rightLeaf?.setViewState({
-			type: VIEW_TYPE_CHATBOT,
-			active: true,
-		});
-
-		this.app.workspace.revealLeaf(this.app.workspace.getLeavesOfType(VIEW_TYPE_CHATBOT)[0]);
-
-		// Focus on the textarea
-		const textarea = document.querySelector('.chatbox textarea') as HTMLTextAreaElement;
-
-		if (textarea) {
-			textarea.style.opacity = '0';
-			textarea.style.transition = 'opacity 1s ease-in-out';
-
-			setTimeout(() => {
-				textarea.focus();
-				textarea.style.opacity = '1';
-			}, 50);
+		const {workspace} = this.app;
+
+		let leaf: WorkspaceLeaf | null = null;
+		const leaves = workspace.getLeavesOfType(VIEW_TYPE_CHATBOT);
+
+		if (leaves.length > 0) {
+			// 이미 존재하는 리프 사용
+			leaf = leaves[0];
+		} else {
+			// 워크스페이스에서 뷰를 찾을 수 없으므로
+			// 새로운 리프를 우측 사이드바에 생성
+			leaf = workspace.getRightLeaf(false);
+			await leaf?.setViewState({type: VIEW_TYPE_CHATBOT, active: true});
 		}
 
-		this.app.workspace.revealLeaf(this.app.workspace.getLeavesOfType(VIEW_TYPE_CHATBOT)[0]);
+		// 리프(leaf)가 접힌 사이드바에 있는 경우 "표시(Reveal)" 합니다.
+		if (leaf) workspace.revealLeaf(leaf);
 
+		/* 
 		const messageContainer = document.querySelector('#messageContainer');
 		if (messageContainer) {
 			messageContainer.scroll({
 				top: messageContainer.scrollHeight,
 				behavior: 'smooth',
 			});
-		}
+		} */
 	}
 
 	async loadSettings() {