Initial import

src/app/main/chatV2/components/ConversationRoomPane.tsx

@@ -0,0 +1,85 @@
+import { Empty, Spin, Typography } from 'antd';
+import type { ChatConversationRequest, ChatMessage } from '../../mainChatPanel/types';
+
+const { Text } = Typography;
+
+type ConversationRoomPaneProps = {
+  sessionId: string;
+  messages: ChatMessage[];
+  requests: ChatConversationRequest[];
+  isLoading: boolean;
+  loadingLabel: string;
+  errorMessage: string;
+};
+
+export function ConversationRoomPane({
+  sessionId,
+  messages,
+  requests,
+  isLoading,
+  loadingLabel,
+  errorMessage,
+}: ConversationRoomPaneProps) {
+  if (!sessionId) {
+    return (
+      <section className="chat-v2__pane chat-v2__pane--room">
+        <div className="chat-v2__state">
+          <Empty description="채팅방을 선택해 주세요." />
+        </div>
+      </section>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <section className="chat-v2__pane chat-v2__pane--room">
+        <div className="chat-v2__state">
+          <Spin />
+          <Text type="secondary">{loadingLabel}</Text>
+        </div>
+      </section>
+    );
+  }
+
+  if (errorMessage) {
+    return (
+      <section className="chat-v2__pane chat-v2__pane--room">
+        <div className="chat-v2__state">
+          <Text type="danger">{errorMessage}</Text>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="chat-v2__pane chat-v2__pane--room">
+      <div className="chat-v2__pane-header">
+        <div>
+          <Text strong>{sessionId}</Text>
+          <br />
+          <Text type="secondary">
+            메시지 {messages.length}개 · 요청 {requests.length}개
+          </Text>
+        </div>
+      </div>
+
+      <div className="chat-v2__room-stream">
+        {messages.length === 0 ? (
+          <div className="chat-v2__state">
+            <Empty description="메시지가 없습니다." />
+          </div>
+        ) : (
+          messages.map((message) => (
+            <article key={`${message.id}-${message.timestamp}`} className={`chat-v2__message chat-v2__message--${message.author}`}>
+              <div className="chat-v2__message-meta">
+                <Text strong>{message.author}</Text>
+                <Text type="secondary">{message.timestamp}</Text>
+              </div>
+              <div className="chat-v2__message-body">{message.text}</div>
+            </article>
+          ))
+        )}
+      </div>
+    </section>
+  );
+}