Create SessionChatPanel React component

Tinker

Home Epics Create SessionChatPanel React componentEdit

Cancel

Title *

Project *

Description

## Task
Create a reusable React chat panel component for support sessions that works in both operator and guest contexts.

## Component: SessionChatPanel
```jsx
// app/javascript/components/remote_support/SessionChatPanel.jsx

export default function SessionChatPanel({
  sessionId,
  participantType,  // 'operator' | 'guest'
  participantName,
  token,            // guest link token (for guests)
  initialMessages,
  isCollapsed,
  onToggle,
  disabled,         // true when session ended
}) {
  // State: messages, inputValue, sending, connectionStatus
  // Subscribe to real-time updates
  // Handle message sending
  // Auto-scroll behavior
}
```

## Features
1. **Message List**: Scrollable list with sender alignment (own messages right, others left)
2. **Input Area**: Textarea with send button, Enter to send, Shift+Enter for newline
3. **Collapse Toggle**: Button to minimize/expand panel
4. **Connection Status**: Badge showing connected/disconnected state
5. **Empty State**: Friendly message when no chat history

## Transport Abstraction
Create a hook `useSupportSessionChat` that abstracts the transport:
- For operators: uses NATS subscription via existing chat_service pattern
- For guests: uses ActionCable subscription

## Styling
- Match existing DaisyUI chat bubble styling from `ChatRoom.jsx`
- Responsive width (fixed width panel on desktop, full width on mobile)
- Smooth collapse animation

## Files to Create
- `app/javascript/components/remote_support/SessionChatPanel.jsx`
- `app/javascript/components/remote_support/useSupportSessionChat.js`
- `spec/javascript/components/remote_support/SessionChatPanel.spec.jsx`