This repository was archived by the owner on Mar 18, 2026. It is now read-only.
[리팩토링] ChatInterface 컴포넌트 구조 개선 및 상태 관리 최적화#149
Merged
haesookimDev merged 8 commits intomainfrom Aug 27, 2025
Merged
Conversation
- Introduce new ChatInterface component with enhanced chat features - Add useCollectionManagement hook for managing selected collections with localStorage sync - Add useInputHandling hook for input state, IME composition, and auto-resizing textarea - Add useScrollManagement hook for scroll position, user scroll detection, and smooth scroll-to-bottom - Add useWorkflowExecution hook to handle workflow execution with streaming and deploy support - Support dynamic PDF viewer panel with resizable split layout - Implement attachment menu with collection modal integration - Preserve scroll position when viewing source documents and during workflow execution - Improve workflow content loading and error handling with user context support
- Add ChatContainer component with PDF viewer support and panel resizing - Implement ChatInput component with attachment menu and message handling - Create CollectionDisplay component to show selected collections - Develop ChatInterfaceOptimized and ChatInterfaceRefactored2 components for improved chat UI - Introduce useChatState hook with reducer for centralized chat UI and workflow state management - Define comprehensive chat state types and actions for UI, panel, PDF viewer, and workflow - Add related index exports for new components and types - Enable dynamic PDF viewer loading to avoid SSR issues - Implement scroll and workflow execution management hooks integration - Persist panel split state in localStorage for consistent user experience
- Introduce PerformanceTracker class for measuring and aggregating performance metrics such as render durations. - Add hooks useRenderTracker, useMemoryTracker, and useRenderTime to track render counts, memory usage, and render durations respectively. - Create ProfilerWrapper component to integrate React DevTools Profiler with custom logging. - Implement PerformanceBenchmark component to display render counts, average render times, and optional memory usage in development mode. - Add PerformanceComparison component to toggle and compare original and optimized component performance during development.
- Replace legacy ChatInterface with a memoized functional component using custom hooks for workflow execution, collection, scroll, and chat state management. - Remove redundant state variables and handlers; centralize state via useChatState. - Modularize logic: separate concerns for workflow execution, input handling, and UI state toggling. - Introduce ChatContainer component to encapsulate chat area and PDF viewer, improving layout and performance. - Simplify additionalParams validation with memoized function. - Improve scroll handling with useScrollManagement hook for better UX. - Remove deprecated dynamic imports and ResizablePanel in favor of integrated panel management. - Clean up event handlers and side
Reformatted the "exclude" array in tsconfig.json to a single line for improved readability and consistency with project style guidelines.
- Add scoped CSS module for ChatInterface container styling - Introduce useInputHandling hook import (preparation for input logic) - Replace inline styles with CSS module class for root div - Fix setInputMessage to update chatContainerRef input properly - Refactor workflow content loading to handle loading state correctly with try-catch-finally and consolidated error handling - Update useEffect dependencies for scroll management hooks to prevent stale closures and ensure consistent scrolling behavior
- Rename ChatInterfaceOptimized to ChatInterface for clarity - Add hasLoadedExistingChat ref to prevent repeated loading of existing chats - Modify workflow content loading effect to run only once per workflow content - Adjust dependencies in useEffect hooks to avoid unnecessary re-renders and reloads
- Capture and clear the current input message before loading existing chat logs - Pass the captured message to workflowExecution.executeWorkflow to ensure proper execution context - Clear input message after sending on Enter key press to reset input field - Add missing dependency to useEffect hooks for consistent behavior and avoid stale closures
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
설명
ChatInterface컴포넌트를 복잡한 내부 상태와 로직을 단일 파일에 집중하지 않고, 여러 훅과 하위 컴포넌트로 분리하여 유지보수성과 가독성을 크게 향상시켰습니다.useReducer기반의 통합 상태관리 훅(useChatState)으로 전환하여 일관된 상태 업데이트와 액션 디스패치가 가능하도록 구성했습니다.ChatInput과ChatContainer컴포넌트를 도입해 입력 UI와 채팅 영역을 별도 컴포넌트로 분리하고 내부 상태 관리를 훅으로 처리하여 재사용성과 테스트 용이성을 개선했습니다.useScrollManagement)으로 분리하여 UI 반응성과 사용자 경험을 향상시켰습니다.useWorkflowExecution훅으로 분리하고, 메시지 스트리밍 처리 등 복잡한 워크플로우 로직을 깔끔하게 모듈화했습니다.useCollectionManagement훅으로 분리하고 로컬 스토리지 연동을 개선했습니다.주요 변경 사항
useChatState훅으로 통합useWorkflowExecution훅으로 분리useCollectionManagement훅으로 분리 및 로컬스토리지 연동 개선useScrollManagement훅으로 분리ChatInput컴포넌트로 분리하고 입력 상태 및 이벤트 관리 훅(useInputHandling) 도입ChatContainer컴포넌트 추가ChatState, 액션 타입 등) 추가 및 보강refactor/chat-interface브랜치 내 백업 버전 삭제 및 새 구조에 맞게 재구성