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:
parent
7455e2ec28
commit
cd2d79b190
|
|
@ -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;
|
||||
Loading…
Reference in New Issue