From cd2d79b190a3ee294ed0b8edf700a3eec828f076 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 5 Feb 2026 11:06:44 +0530
Subject: [PATCH] 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
---
 .../client/chat/JKChatUploadProgress.js       | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 jam-ui/src/components/client/chat/JKChatUploadProgress.js

diff --git a/jam-ui/src/components/client/chat/JKChatUploadProgress.js b/jam-ui/src/components/client/chat/JKChatUploadProgress.js
new file mode 100644
index 000000000..95f8d8e7d
--- /dev/null
+++ b/jam-ui/src/components/client/chat/JKChatUploadProgress.js
@@ -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;