# 250903 슬랙 대화 표시 인디케이터 구현 완료

## 문제
프론트엔드 대화창에서 슬랙/웹 대화 구분 불가

## 해결 방법
conversation_log 테이블의 slack_user_id 필드(VARCHAR(100))를 활용하여 슬랙 대화 시각적 표시

## 수정된 파일 및 코드

### 1. 백엔드 수정 (2025-09-04)

#### rb8001/app/state/database.py
```python
# get_recent_conversations() 함수
query = text("""
    SELECT message, response, timestamp, slack_user_id  # slack_user_id 추가
    FROM conversation_log
    WHERE user_id = :user_id
    ORDER BY timestamp DESC
    LIMIT :limit
""")

conversations.append({
    "message": row.message,
    "response": row.response,
    "timestamp": row.timestamp.isoformat() if row.timestamp else None,
    "slack_user_id": row.slack_user_id  # 추가
})

# 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로 감싸기
<div className="relative">
  {/* 기존 아바타 코드 */}
  
  {/* 슬랙 아이콘 추가 */}
  {message.slack_user_id && (
    <img 
      src="/assets/integrations/slack-logo.svg" 
      className={cn(
        "absolute w-3 h-3",
        message.sender === 'robeing' ? "-top-1 -right-2" : "-top-1 -left-2"
      )}
      alt="Slack"
    />
  )}
</div>

// 타임스탬프 영역 (711번 줄)
<span className="text-[11px] text-gray-400 dark:text-gray-500 mt-0.5">
  {/* 시간 표시 */}
  {message.slack_user_id && ' (Slack)'}  // 추가
  {message.responseTime !== undefined && ` (${message.responseTime.toFixed(1)}s)`}
</span>
```

#### frontend-customer/src/services/robeing-api.ts
```typescript
// getMessages 함수 반환 타입 (150번 줄)
export async function getMessages(
  before?: string,
  limit?: number
): Promise<{
  messages: Array<{
    id: string;
    text: string;
    sender: 'user' | 'robeing';
    timestamp: string;
    slack_user_id?: string;  // 추가
    metadata?: any;
  }>;
  has_more: boolean;
}>
```

## 사용된 리소스
- 슬랙 아이콘: `/public/assets/integrations/slack-logo.svg` (1539 bytes)
- 스타일링: Tailwind CSS

## 최종 동작
- 슬랙으로 보낸 메시지: 프로필 근처 작은 슬랙 아이콘 + 시간 옆 "(Slack)" 텍스트
- 웹으로 보낸 메시지: 기존과 동일