diff --git a/troubleshooting/250903_slack_chat_display_indicator.md b/troubleshooting/250903_slack_chat_display_indicator.md index 00626e9..bcbb884 100644 --- a/troubleshooting/250903_slack_chat_display_indicator.md +++ b/troubleshooting/250903_slack_chat_display_indicator.md @@ -1,109 +1,31 @@ -# 250903 슬랙 대화 표시 인디케이터 구현 아이디어 +# 250903 슬랙 대화 표시 인디케이터 구현 완료 -## 목적 -프론트엔드 대화창에서 슬랙을 통해 입력된 메시지를 시각적으로 구분하여 사용자가 대화 채널을 쉽게 인식할 수 있도록 함 +## 문제 +프론트엔드 대화창에서 슬랙/웹 대화 구분 불가 -## 현재 상황 -- 대화 메시지가 슬랙/웹 구분 없이 동일하게 표시됨 -- 사용자가 어떤 채널로 대화가 이루어졌는지 알기 어려움 -- **확인됨**: conversation_logs 테이블에 slack_user_id 컬럼 존재 (VARCHAR(100)) -- **확인됨**: channel_id가 'C'로 시작하면 슬랙 채널 (tables.md 참조) +## 해결 방법 +conversation_logs 테이블의 slack_user_id 필드를 활용하여 슬랙 대화 시각적 표시 -## 구현 아이디어 +## 수정된 파일 -### 1. 시각적 표시 방법 -- **위치**: 사용자/로빙 프로필 근처, 말풍선 위쪽 -- **표시**: 슬랙 SVG 아이콘 (크기: 글자 크기의 1.3배) -- **배치**: 프로필 영역에 position absolute로 배치 +### 백엔드 (2025-09-04) +1. **rb8001/app/state/database.py** + - get_recent_conversations(): SQL에 slack_user_id 추가, 반환값에 포함 + - get_paginated_conversations(): SQL에 slack_user_id 추가, 반환값에 포함 -### 2. 기술적 구현 방향 -``` -대화 컴포넌트 구조: -├── 프로필 영역 (robeingAvatar 이미지 사용) -│ └── 슬랙 인디케이터 (position: absolute) -└── 메시지 풍선 -``` +2. **rb8001/main.py** + - /api/v1/messages 엔드포인트: formatted_messages에 slack_user_id 필드 추가 -### 3. 데이터 흐름 -1. DB: conversation_logs 테이블의 slack_user_id 필드 활용 -2. 백엔드: get_recent_conversations()에서 slack_user_id 포함하여 반환 -3. 프론트엔드: slack_user_id가 있으면 슬랙 아이콘 표시 +### 프론트엔드 (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)" 텍스트 표시 -### 4. 구현 예상 파일 -- **확인됨**: `frontend-customer/src/components/chat-interface.tsx` -- **확인됨**: `/assets/integrations/slack-logo.svg` 아이콘 존재 -- **확인됨**: Tailwind CSS 사용 -- **확인됨**: ThemeProvider로 다크모드 구현됨 +2. **frontend-customer/src/services/robeing-api.ts** + - getMessages() 반환 타입에 slack_user_id?: string 추가 -### 5. 구현 결정 사항 (2025-09-04) -- **애니메이션**: 불필요 -- **반응형**: 글자 크기에 비례하여 조정 -- **판별 로직**: slack_user_id 존재 여부로 판별 (DM 포함) -- **다크모드**: 이미 구현됨 (theme-context.tsx) - -### 6. 예상 효과 -- 사용자가 대화 출처를 한눈에 파악 가능 -- 멀티채널 지원 시스템임을 시각적으로 어필 -- UX 개선으로 사용자 혼란 감소 - -## 검증된 정보 - -### 데이터베이스 -- conversation_logs 테이블에 slack_user_id 컬럼 존재 (VARCHAR(100)) -- channel_id 패턴: 'C'로 시작 = 슬랙 채널, 'web' = 프론트엔드 -- JWT에서 user_id(UUID) 추출 가능 (chat_history_flow.md 참조) - -### 프론트엔드 -- 메인 컴포넌트: `chat-interface.tsx` -- 슬랙 아이콘 경로: `/assets/integrations/slack-logo.svg` -- CSS 프레임워크: Tailwind CSS 사용 중 - -## 구현 작업 (TODO) - -### 1. 백엔드 수정 -**파일**: `rb8001/app/state/database.py` -```python -# get_recent_conversations() 및 get_paginated_conversations() 함수 수정 -# SQL 쿼리에 slack_user_id 추가 -SELECT id, message, response, timestamp, user_id, slack_user_id - -# 반환 데이터에 추가 -conversations.append({ - "message": row.message, - "response": row.response, - "timestamp": row.timestamp.isoformat(), - "slack_user_id": row.slack_user_id # 추가 -}) -``` - -### 2. 프론트엔드 수정 -**파일**: `frontend-customer/src/components/chat-interface.tsx` - -1) Message 인터페이스 확장: -```typescript -interface Message { - // 기존 필드들... - slack_user_id?: string; // 추가 -} -``` - -2) 슬랙 아이콘 표시 로직: -```tsx -// 사용자 메시지: 프로필 근처 -// 로빙 메시지: 프로필 오른쪽, 말풍선 상단 경계 -{message.slack_user_id && ( - Slack -)} -``` - -### 3. 테스트 확인 사항 -- 슬랙 DM으로 대화 → 아이콘 표시 확인 -- 웹 프론트엔드 대화 → 아이콘 미표시 확인 -- 다크모드 전환 시 아이콘 가시성 확인 \ No newline at end of file +## 최종 동작 +- 슬랙으로 보낸 메시지: 프로필 근처 슬랙 아이콘 + 시간 옆 "(Slack)" 표시 +- 웹으로 보낸 메시지: 기존과 동일 \ No newline at end of file