diff --git a/troubleshooting/250903_slack_chat_display_indicator.md b/troubleshooting/250903_slack_chat_display_indicator.md index bcbb884..8a99c58 100644 --- a/troubleshooting/250903_slack_chat_display_indicator.md +++ b/troubleshooting/250903_slack_chat_display_indicator.md @@ -4,28 +4,110 @@ 프론트엔드 대화창에서 슬랙/웹 대화 구분 불가 ## 해결 방법 -conversation_logs 테이블의 slack_user_id 필드를 활용하여 슬랙 대화 시각적 표시 +conversation_logs 테이블의 slack_user_id 필드(VARCHAR(100))를 활용하여 슬랙 대화 시각적 표시 -## 수정된 파일 +## 수정된 파일 및 코드 -### 백엔드 (2025-09-04) -1. **rb8001/app/state/database.py** - - get_recent_conversations(): SQL에 slack_user_id 추가, 반환값에 포함 - - get_paginated_conversations(): SQL에 slack_user_id 추가, 반환값에 포함 +### 1. 백엔드 수정 (2025-09-04) -2. **rb8001/main.py** - - /api/v1/messages 엔드포인트: formatted_messages에 slack_user_id 필드 추가 +#### rb8001/app/state/database.py +```python +# get_recent_conversations() 함수 +query = text(""" + SELECT message, response, timestamp, slack_user_id # slack_user_id 추가 + FROM conversation_logs + WHERE user_id = :user_id + ORDER BY timestamp DESC + LIMIT :limit +""") -### 프론트엔드 (2025-09-04) -1. **frontend-customer/src/components/chat-interface.tsx** - - Message 인터페이스에 slack_user_id?: string 추가 - - 아바타를 relative div로 감싸고 슬랙 아이콘 조건부 렌더링 - - 아이콘: w-3 h-3, 위치 -top-1 -right-2 / -top-1 -left-2 - - 타임스탬프 옆에 slack_user_id 있으면 "(Slack)" 텍스트 표시 +conversations.append({ + "message": row.message, + "response": row.response, + "timestamp": row.timestamp.isoformat() if row.timestamp else None, + "slack_user_id": row.slack_user_id # 추가 +}) -2. **frontend-customer/src/services/robeing-api.ts** - - getMessages() 반환 타입에 slack_user_id?: string 추가 +# get_paginated_conversations() 함수도 동일하게 수정 +``` + +#### rb8001/main.py +```python +# /api/v1/messages 엔드포인트 (496번 줄) +formatted_messages.append({ + "id": f"{msg_id}_user", + "text": msg['user_message'], + "sender": "user", + "timestamp": timestamp, + "slack_user_id": slack_user_id, # 추가 + "metadata": {} +}) +``` + +### 2. 프론트엔드 수정 (2025-09-04) + +#### frontend-customer/src/components/chat-interface.tsx +```typescript +// Message 인터페이스 (14번 줄) +interface Message { + id: string; + text: string; + sender: 'user' | 'robeing'; + timestamp: Date; + type?: 'text' | 'system' | 'action' | 'skill'; + responseTime?: number; + slack_user_id?: string; // 추가 + metadata?: {...}; +} + +// 아바타 영역 (648번 줄) - relative div로 감싸기 +