feat(13-03): display upload progress in chat message list
- Import selectIsUploading and selectUploadFileName from sessionChatSlice - Import JKChatUploadProgress component - Add useSelector hooks for upload state (isUploading, uploadFileName) - Render JKChatUploadProgress at end of message list when upload in progress - Upload indicator appears at bottom of chat for easy visibility - Conditional rendering: only shows when isUploading is true AND fileName exists
This commit is contained in:
parent
cd2d79b190
commit
f2c07faede
|
|
@ -4,12 +4,15 @@ import {
|
|||
selectChatMessages,
|
||||
selectFetchStatus,
|
||||
selectActiveChannel,
|
||||
selectIsUploading,
|
||||
selectUploadFileName,
|
||||
fetchChatHistory
|
||||
} from '../../../store/features/sessionChatSlice';
|
||||
import { selectSessionId } from '../../../store/features/activeSessionSlice';
|
||||
import JKChatMessage from './JKChatMessage';
|
||||
import JKChatLoadingSpinner from './JKChatLoadingSpinner';
|
||||
import JKChatEmptyState from './JKChatEmptyState';
|
||||
import JKChatUploadProgress from './JKChatUploadProgress';
|
||||
|
||||
/**
|
||||
* JKChatMessageList - Message list component with auto-scroll behavior
|
||||
|
|
@ -33,6 +36,8 @@ const JKChatMessageList = () => {
|
|||
const sessionId = useSelector(selectSessionId);
|
||||
const messages = useSelector((state) => selectChatMessages(state, activeChannel));
|
||||
const fetchStatus = useSelector((state) => selectFetchStatus(state, activeChannel));
|
||||
const isUploading = useSelector(selectIsUploading);
|
||||
const uploadFileName = useSelector(selectUploadFileName);
|
||||
|
||||
const listRef = useRef(null);
|
||||
const [isUserScrolling, setIsUserScrolling] = useState(false);
|
||||
|
|
@ -167,6 +172,10 @@ const JKChatMessageList = () => {
|
|||
{messages.map((message) => (
|
||||
<JKChatMessage key={message.id} message={message} />
|
||||
))}
|
||||
{/* Upload progress indicator */}
|
||||
{isUploading && uploadFileName && (
|
||||
<JKChatUploadProgress fileName={uploadFileName} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue