feat(08-02): create loading and empty state components

Create two stateless components for chat UI states:

1. JKChatLoadingSpinner:
   - Displays spinner from reactstrap
   - Shows "Loading messages..." text
   - Used when fetchStatus is 'loading'

2. JKChatEmptyState:
   - Shows chat icon and encouraging message
   - Used when message list is empty
   - Centered layout with friendly copy

Both components are simple, stateless, and require no props.
Inline styles used for MVP (SCSS styling deferred to Plan 8.3).

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

jam-ui/src/components/client/chat/JKChatEmptyState.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+/**
+ * JKChatEmptyState - Empty state component for chat
+ *
+ * Displays a friendly message when there are no messages in the channel yet.
+ * Used when messagesByChannel[channel] is empty.
+ */
+const JKChatEmptyState = () => {
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '48px 24px',
+      color: '#6c757d',
+      textAlign: 'center'
+    }}>
+      <div style={{ fontSize: '48px', marginBottom: '16px' }}>💬</div>
+      <p style={{ fontSize: '16px', fontWeight: 600, marginBottom: '8px' }}>
+        No messages yet
+      </p>
+      <p style={{ fontSize: '14px', margin: 0 }}>
+        Be the first to send a message in this chat!
+      </p>
+    </div>
+  );
+};
+
+export default JKChatEmptyState;

jam-ui/src/components/client/chat/JKChatLoadingSpinner.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+/**
+ * JKChatLoadingSpinner - Loading state component for chat
+ *
+ * Displays a spinner with "Loading messages..." text while fetching chat history.
+ * Used when fetchStatus is 'loading'.
+ */
+const JKChatLoadingSpinner = () => {
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '48px 24px',
+      color: '#6c757d'
+    }}>
+      <Spinner color="primary" />
+      <p style={{ marginTop: '16px', fontSize: '14px' }}>Loading messages...</p>
+    </div>
+  );
+};
+
+export default JKChatLoadingSpinner;