DOCS/troubleshooting/250903_slack_chat_display_indicator.md

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

문제

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

해결 방법

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

수정된 파일 및 코드

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

rb8001/app/state/database.py

# 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

# /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

// 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

// 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)" 텍스트
• 웹으로 보낸 메시지: 기존과 동일