# 250903 슬랙 대화 표시 인디케이터 구현 아이디어

## 목적
프론트엔드 대화창에서 슬랙을 통해 입력된 메시지를 시각적으로 구분하여 사용자가 대화 채널을 쉽게 인식할 수 있도록 함

## 현재 상황
- 대화 메시지가 슬랙/웹 구분 없이 동일하게 표시됨
- 사용자가 어떤 채널로 대화가 이루어졌는지 알기 어려움
- **확인됨**: conversation_logs 테이블에 slack_user_id 컬럼 존재 (VARCHAR(100))
- **확인됨**: channel_id가 'C'로 시작하면 슬랙 채널 (tables.md 참조)

## 구현 아이디어

### 1. 시각적 표시 방법
- **위치**: 사용자/로빙 프로필 근처, 말풍선 위쪽
- **표시**: 슬랙 SVG 아이콘 (크기: 글자 크기의 1.3배)
- **배치**: 프로필 영역에 position absolute로 배치

### 2. 기술적 구현 방향
```
대화 컴포넌트 구조:
├── 프로필 영역 (robeingAvatar 이미지 사용)
│   └── 슬랙 인디케이터 (position: absolute)
└── 메시지 풍선
```

### 3. 데이터 흐름
1. DB: conversation_logs 테이블의 slack_user_id 필드 활용
2. 백엔드: get_recent_conversations()에서 slack_user_id 포함하여 반환
3. 프론트엔드: slack_user_id가 있으면 슬랙 아이콘 표시

### 4. 구현 예상 파일
- **확인됨**: `frontend-customer/src/components/chat-interface.tsx`
- **확인됨**: `/assets/integrations/slack-logo.svg` 아이콘 존재
- **확인됨**: Tailwind CSS 사용
- **확인됨**: ThemeProvider로 다크모드 구현됨

### 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 && (
  <img 
    src="/assets/integrations/slack-logo.svg" 
    className={cn(
      "absolute w-5 h-5",
      message.sender === 'robeing' ? "top-0 -right-2" : "top-0 right-0"
    )}
    alt="Slack"
  />
)}
```

### 3. 테스트 확인 사항
- 슬랙 DM으로 대화 → 아이콘 표시 확인
- 웹 프론트엔드 대화 → 아이콘 미표시 확인
- 다크모드 전환 시 아이콘 가시성 확인