From 33f9a357bd6b4bf3b8461b15ec31a0f795650acd Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Tue, 27 Jan 2026 13:35:43 +0530
Subject: [PATCH] feat(08-01): create JKChatHeader component with close button

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../components/client/chat/JKChatHeader.js    | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 jam-ui/src/components/client/chat/JKChatHeader.js

diff --git a/jam-ui/src/components/client/chat/JKChatHeader.js b/jam-ui/src/components/client/chat/JKChatHeader.js
new file mode 100644
index 000000000..275a685ea
--- /dev/null
+++ b/jam-ui/src/components/client/chat/JKChatHeader.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * JKChatHeader - Header component for chat window
+ *
+ * Displays channel name and close button in the chat window header.
+ * Uses inline styles (SCSS styling deferred to Plan 8.3).
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.channelName - Channel name to display
+ * @param {Function} props.onClose - Callback when close button is clicked
+ */
+const JKChatHeader = ({ channelName, onClose }) => {
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: '12px 16px',
+      borderBottom: '1px solid #e0e0e0',
+      backgroundColor: '#f8f9fa'
+    }}>
+      <h5 style={{ margin: 0, fontSize: '16px', fontWeight: 600 }}>
+        {channelName || 'Session Chat'}
+      </h5>
+      <button
+        onClick={onClose}
+        style={{
+          background: 'transparent',
+          border: 'none',
+          fontSize: '20px',
+          cursor: 'pointer',
+          padding: '0 8px',
+          color: '#6c757d'
+        }}
+        aria-label="Close chat"
+      >
+        ×
+      </button>
+    </div>
+  );
+};
+
+JKChatHeader.propTypes = {
+  channelName: PropTypes.string,
+  onClose: PropTypes.func.isRequired
+};
+
+JKChatHeader.defaultProps = {
+  channelName: null
+};
+
+export default JKChatHeader;