feat(13-03): create upload progress component for chat window

- Create JKChatUploadProgress component with Spinner and filename display
- Styled as system message (gray background, italic text)
- Display format: 'Uploading [filename]...'
- Uses React.memo for performance optimization
- PropTypes validation for fileName (required)
- 42 lines including component, styles, and PropTypes
This commit is contained in:
Nuwan 2026-02-05 11:06:44 +05:30
parent 7455e2ec28
commit cd2d79b190
1 changed files with 42 additions and 0 deletions

View File

@ -0,0 +1,42 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { Spinner } from 'reactstrap';
/**
* JKChatUploadProgress - Upload progress indicator for chat window
*
* Displays a temporary "Uploading [filename]..." message with spinner
* while a file attachment is being uploaded. Styled as a system message.
*
* Props:
* - fileName: Name of the file being uploaded
*/
const JKChatUploadProgress = memo(({ fileName }) => {
return (
<div
style={{
padding: '8px 12px',
margin: '8px 0',
backgroundColor: '#f0f0f0',
borderRadius: '8px',
display: 'flex',
alignItems: 'center',
gap: '8px',
color: '#666',
fontSize: '14px',
fontStyle: 'italic'
}}
>
<Spinner size="sm" color="secondary" />
<span>Uploading {fileName}...</span>
</div>
);
});
JKChatUploadProgress.propTypes = {
fileName: PropTypes.string.isRequired
};
JKChatUploadProgress.displayName = 'JKChatUploadProgress';
export default JKChatUploadProgress;