8c02b80359
- gmail_tokens → gmail_token (33 files) - companies → company (17 files) - conversation_logs → conversation_log (27 files) - workspace_members → workspace_member (28 files) All table names now match the actual PostgreSQL schema
113 lines
2.9 KiB
Markdown
113 lines
2.9 KiB
Markdown
# 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)" 텍스트
|
|
- 웹으로 보낸 메시지: 기존과 동일 |