From ff1312ae50c71c2f7c02ab8738adad9df0e4f4dd Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 11 Oct 2025 16:44:26 +0000 Subject: [PATCH] feat: Implement chat module in sidebar --- src/pages/dashboard/Messages.tsx | 1072 ++++++++---------------------- src/services/chatApi.ts | 2 + src/services/mockChatData.ts | 487 +++++++------- 3 files changed, 537 insertions(+), 1024 deletions(-) diff --git a/src/pages/dashboard/Messages.tsx b/src/pages/dashboard/Messages.tsx index b13947f..fe3b2b4 100644 --- a/src/pages/dashboard/Messages.tsx +++ b/src/pages/dashboard/Messages.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { useAuth } from '@/contexts/AuthContext'; import { useChat } from '@/hooks/useChat'; import { ScrollArea } from '@/components/ui/scroll-area'; @@ -6,43 +6,52 @@ import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; -import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'; -import { Switch } from '@/components/ui/switch'; -import { Label } from '@/components/ui/label'; +import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { toast } from 'sonner'; import { MessageCircle, - Users, - UserCheck, - Bell, + Car, + UtensilsCrossed, + Hotel as HotelIcon, + Shield, + MapPin, + Send, + Search, + Plus, Phone, Video, Paperclip, Smile, - Send, - Search, - MoreVertical, - Plus, - X, - Settings, - UserPlus, Circle, - Palette, - Edit3 + HeadphonesIcon } from 'lucide-react'; +type ServiceType = 'all' | 'taxi' | 'restaurant' | 'hotel' | 'guide' | 'politur' | 'support'; + +const serviceIcons = { + taxi: Car, + restaurant: UtensilsCrossed, + hotel: HotelIcon, + guide: MapPin, + politur: Shield, + support: HeadphonesIcon +}; + +const serviceColors = { + taxi: 'bg-yellow-500/10 text-yellow-700 border-yellow-200', + restaurant: 'bg-orange-500/10 text-orange-700 border-orange-200', + hotel: 'bg-blue-500/10 text-blue-700 border-blue-200', + guide: 'bg-green-500/10 text-green-700 border-green-200', + politur: 'bg-red-500/10 text-red-700 border-red-200', + support: 'bg-purple-500/10 text-purple-700 border-purple-200' +}; + const Messages = () => { const { user } = useAuth(); - const [activeTab, setActiveTab] = useState('chats'); const [selectedChatId, setSelectedChatId] = useState(null); const [messageText, setMessageText] = useState(''); const [searchQuery, setSearchQuery] = useState(''); - const [searchResults, setSearchResults] = useState([]); - const [showUserSearch, setShowUserSearch] = useState(false); - const [showChatDetails, setShowChatDetails] = useState(true); - const [selectedColor, setSelectedColor] = useState('green'); - const [isAutoBot, setIsAutoBot] = useState(true); - const [newNickname, setNewNickname] = useState(''); + const [serviceFilter, setServiceFilter] = useState('all'); const messagesEndRef = useRef(null); const { @@ -59,7 +68,15 @@ const Messages = () => { clearError } = useChat(); - const selectedChat = selectedChatId ? getChatById(selectedChatId) : chats[0]; + const selectedChat = selectedChatId ? getChatById(selectedChatId) : null; + + // Filter chats by service type + const filteredChats = chats.filter(chat => { + const matchesService = serviceFilter === 'all' || chat.serviceType === serviceFilter; + const matchesSearch = !searchQuery || + chat.name.toLowerCase().includes(searchQuery.toLowerCase()); + return matchesService && matchesSearch; + }); // Auto-scroll to bottom of messages const scrollToBottom = () => { @@ -84,17 +101,6 @@ const Messages = () => { } }, [chats, selectedChatId]); - // Handle search - const handleSearch = async (query: string) => { - setSearchQuery(query); - if (query.trim()) { - const results = await searchUsers(query); - setSearchResults(results); - } else { - setSearchResults([]); - } - }; - // Handle send message const handleSendMessage = async () => { if (!messageText.trim() || !selectedChatId) return; @@ -103,29 +109,10 @@ const Messages = () => { await sendMessage(selectedChatId, messageText); setMessageText(''); } catch (err) { - toast.error('Failed to send message'); + toast.error('No se pudo enviar el mensaje'); } }; - // Handle create chat with user - const handleCreateChat = async (userId: string) => { - try { - const newChat = await createChat([userId]); - setSelectedChatId(newChat.id); - setShowUserSearch(false); - setSearchQuery(''); - setSearchResults([]); - toast.success('Chat created successfully'); - } catch (err) { - toast.error('Failed to create chat'); - } - }; - - // Get notifications count - const getNotificationsCount = () => { - return chats.reduce((total, chat) => total + chat.unreadCount, 0); - }; - // Format time const formatTime = (timestamp: string) => { const date = new Date(timestamp); @@ -141,791 +128,272 @@ const Messages = () => { } }; -return ( + const getServiceIcon = (serviceType?: string) => { + if (!serviceType) return MessageCircle; + return serviceIcons[serviceType as keyof typeof serviceIcons] || MessageCircle; + }; + + const getServiceBadgeClass = (serviceType?: string) => { + if (!serviceType) return 'bg-muted'; + return serviceColors[serviceType as keyof typeof serviceColors] || 'bg-muted'; + }; + + return (
- {/* Chat Container */}
{/* Chat List Sidebar */}
- {/* Search Section */} -
-
+ {/* Header */} +
+

Mensajes

+

Comunícate con servicios turísticos

+
+ + {/* Search */} +
+
+ handleSearch(e.target.value)} + onChange={(e) => setSearchQuery(e.target.value)} /> - - - +
- {/* Sidebar Tabs */} -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+ {/* Service Filter Tabs */} +
+ setServiceFilter(v as ServiceType)}> + + + Todos + + + + + + + + + + + + + + + + + + + + + + + +
- {/* Tab Content */} -
- {/* Search Results */} - {showUserSearch && searchResults.length > 0 && ( -
-

Search Results

- {searchResults.map((user) => ( -
handleCreateChat(user.id)} + {/* Chat List */} + +
+ {loading && ( +
+ Cargando conversaciones... +
+ )} + {!loading && filteredChats.length === 0 && ( +
+ No hay conversaciones +
+ )} + {filteredChats.map((chat) => { + const ServiceIcon = getServiceIcon(chat.serviceType); + return ( +
setSelectedChatId(chat.id)} > - - - {user.name?.charAt(0) || 'U'} - -
-

{user.name}

-

{user.email}

-
- -
- ))} -
- )} - - {/* Chats Tab */} - {activeTab === 'chats' && ( -
- -
-

Recent Chat

-
- {chats.map((chat) => ( -
0 ? 'unseen' : 'seen'}`} - onClick={() => setSelectedChatId(chat.id)} - > -
- - - {chat.name?.charAt(0) || 'C'} - - {chat.online ? ( -
- ) : ( -
- )} - {chat.unreadCount > 0 && ( -
- {chat.unreadCount > 99 ? '99+' : chat.unreadCount} -
- )} -
-
-
-
{chat.name}
- - {chat.lastMessage ? formatTime(chat.lastMessage.timestamp) : ''} - -
-

- {chat.lastMessage?.content || 'No messages yet'} -

-
+
+ + + + + + + {chat.online && ( +
+ )} + {chat.unreadCount > 0 && ( +
+ {chat.unreadCount}
- ))} + )} +
+
+
+
{chat.name}
+ + {chat.lastMessage ? formatTime(chat.lastMessage.timestamp) : ''} + +
+ {chat.serviceType && ( + + + {chat.serviceType.charAt(0).toUpperCase() + chat.serviceType.slice(1)} + + )} +

+ {chat.lastMessage?.content || 'No hay mensajes'} +

- -
- )} - - {/* Online Users Tab */} - {activeTab === 'online' && ( -
- -
-

Online Users

-
- {onlineUsers.map((user) => ( -
handleCreateChat(user.id)} - > -
- - - {user.name?.charAt(0) || 'U'} - -
-
-
-
{user.name}
-
{user.email}
-
- -
- ))} -
-
- -
- )} - - {/* Contacts Tab */} - {activeTab === 'contacts' && ( -
- -
-

Contacts

-
- {chats.map((chat) => ( -
setSelectedChatId(chat.id)} - > -
- - - {chat.name?.charAt(0) || 'C'} - - {chat.online ? ( -
- ) : ( -
- )} -
-
-
{chat.name}
-

- {chat.participants[0]?.email || 'No email'} -

-
-
- -
-
- ))} -
-
- -
- )} - - {/* Notifications Tab */} - {activeTab === 'notifications' && ( -
- -
-

Notifications

-
- {chats.filter(chat => chat.unreadCount > 0).map((chat) => ( -
setSelectedChatId(chat.id)} - > -
- - - {chat.name?.charAt(0) || 'C'} - -
-
-
- {chat.name} sent you a message -
-

- {chat.lastMessage ? formatTime(chat.lastMessage.timestamp) : ''} -

-
-
- ))} -
-
- -
- )} -
+ ); + })} +
+
{/* Chat Area */} -
- {selectedChat ? ( - <> - {/* Chat Header */} -
-
- - - {selectedChat.name?.charAt(0) || 'C'} - -
-

{selectedChat.name || 'Unknown'}

-
- - {selectedChat.online ? 'Online' : 'Last seen 12 hour ago'} +
+ {selectedChat ? ( + <> + {/* Chat Header */} +
+
+ + + + {React.createElement(getServiceIcon(selectedChat.serviceType), { className: 'h-5 w-5' })} + + +
+

+ {selectedChat.name} + {selectedChat.serviceType && ( + + {selectedChat.serviceType} + + )} +

+
+ + {selectedChat.online ? 'En línea' : 'Desconectado'} +
+ +
+ + +
-
- - - - -
-
- - {/* Messages */} - -
-
+ {/* Messages */} + +
{messages.length === 0 ? (
-
- +
+
-

This chat is empty.

-

Be the first one to start it.

+

Inicia la conversación

+

+ Envía el primer mensaje a {selectedChat.name} +

) : ( - <> - {/* Date Divider */} -
-
- Yesterday -
-
- - {/* Sample Messages */} -
- - - {selectedChat.name?.charAt(0) || 'U'} - -
- 09:46 AM -
-
-

It is a long established fact that a reader will be.

-
-
-
-
- -
-
- 11:32 AM -
-
-

By the readable content of a page when looking at its?

-
-
-
-
- -
- - - {selectedChat.name?.charAt(0) || 'U'} - -
- 02:56 PM -
-
-

The point of using Lorem Ipsum is that it has a more-or-less normal distribution.

-
-
-
-
- -
-
- 10:21 PM -
-
-

Roger that boss!

-
-
-

Many desktop publishing packages and web page editors now use Lorem Ipsum as their!

-
-
-
-
- -
- - - {selectedChat.name?.charAt(0) || 'U'} - -
- 11:07 PM -
-
-

Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)!

-
-
-
-
- - {/* Today Date Divider */} -
-
- Today -
-
- - {/* File Attachment Message */} -
- - - {selectedChat.name?.charAt(0) || 'U'} - -
- 11:07 PM -
-
-
- -
-
- Documentations.pdf -
- 21kb Document -
-
-
-
-
-
- - {/* My Message with Read Receipt */} -
-
- - - - - - 10:21 PM - -
-
-

If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing!

-
-
-
-
- - {/* Typing Indicator */} -
- - - {selectedChat.name?.charAt(0) || 'U'} - -
-
-
-
- - - -
-
-
-
-
- - {/* Render dynamic messages */} - {messages.map((message) => ( -
+ messages.map((message) => ( +
+ {!message.isOwn && ( + + + {message.senderName?.charAt(0)} + + )} +
{!message.isOwn && ( - - - {message.senderName?.charAt(0) || 'U'} - + {message.senderName} )} -
- {message.timestamp} -
-
-

{message.content}

-
-
+
+

{message.content}

+ {message.timestamp}
- ))} -
- +
+ )) )} +
+
+ + + {/* Message Input */} +
+
+ +
+ setMessageText(e.target.value)} + onKeyPress={(e) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + handleSendMessage(); + } + }} + /> +
+ +
- - - {/* Message Input */} -
-
- -
- setMessageText(e.target.value)} - onKeyPress={(e) => { - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - handleSendMessage(); - } - }} - /> -
- - -
-
- - ) : ( -
-
- -

Select a conversation

-

Choose from your existing conversations or start a new one

-
-
- )} -
- - {/* Chat Details Sidebar - Right */} - {selectedChat && showChatDetails && ( -
- -
- {/* User Info */} -
-
- - - {selectedChat.name?.charAt(0) || 'C'} - -
-
-
-
{selectedChat.name || 'Unknown'}
-

{selectedChat.name} typing a message

-
+ + ) : ( +
+
+
+
- - {/* Auto Bot/Manual Toggle */} -
-
Conversation With Auto bot or manual
-

Everyone in this conversation will see this.

-
- -
- setIsAutoBot(!checked)} - /> -
- -
-
- - {/* Accordion */} - - {/* User Details */} - - -
- - User Details -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - -
Name{selectedChat.name || 'Unknown'}
ID{selectedChat.id}
E-mail{selectedChat.participants[0]?.email || 'example@email.com'}
URL - https://easital.com/ -
BrowserChrome
-
-
- - - - {/* Edit Name */} - - -
- - Edit name -
- - -
-
Edit Nickname for {selectedChat.name}
-

Everyone in this conversation will see this.

-
- setNewNickname(e.target.value)} - /> -
- -
-
-
- - - - {/* Change Color */} - - -
- - Change color -
- - -
-
Pick a color for this conversation
-

Everyone in this conversation will see this.

-
- {[ - { id: 'red', color: 'bg-red-500' }, - { id: 'green', color: 'bg-green-500' }, - { id: 'yellow', color: 'bg-yellow-500' }, - { id: 'orange', color: 'bg-orange-500' }, - { id: 'teal', color: 'bg-teal-500' }, - { id: 'blue', color: 'bg-blue-500' }, - { id: 'violet', color: 'bg-violet-500' }, - { id: 'purple', color: 'bg-purple-500' }, - { id: 'pink', color: 'bg-pink-500' }, - { id: 'gray', color: 'bg-gray-500' } - ].map((colorOption) => ( - - ))} -
-
- - - - {/* Notifications */} - - -
- - Notifications -
- - -
-
Conversation Notifications
-

Everyone in this conversation will see this.

-
-
- - -
-
- - -
-
- -
-
-
- - - +

Selecciona una conversación

+

+ Elige un servicio para comunicarte: taxis, restaurantes, hoteles, guías turísticos o POLITUR +

- -
- )} +
+ )} +
); }; -export default Messages; \ No newline at end of file +export default Messages; diff --git a/src/services/chatApi.ts b/src/services/chatApi.ts index 408311e..deaa8d4 100644 --- a/src/services/chatApi.ts +++ b/src/services/chatApi.ts @@ -8,6 +8,7 @@ export interface User { avatar: string; online: boolean; lastSeen?: string; + serviceType?: 'taxi' | 'restaurant' | 'hotel' | 'guide' | 'politur' | 'support'; } export interface Message { @@ -32,6 +33,7 @@ export interface Chat { avatar?: string; online?: boolean; lastActivity: string; + serviceType?: 'taxi' | 'restaurant' | 'hotel' | 'guide' | 'politur' | 'support'; } class ChatApiService { diff --git a/src/services/mockChatData.ts b/src/services/mockChatData.ts index 886595a..920acfe 100644 --- a/src/services/mockChatData.ts +++ b/src/services/mockChatData.ts @@ -1,290 +1,277 @@ -// Mock data for chat system +// Mock data for chat system - Tourist Services import { User, Chat, Message } from './chatApi'; export const mockChatData = { users: [ { - id: 'user-1', - name: 'Alexander Kaminski', - email: 'alexander@example.com', + id: 'taxi-1', + name: 'Taxi Central Punta Cana', + email: 'taxicentral@karibeo.com', avatar: '/api/placeholder/40/40', online: true, - lastSeen: new Date().toISOString() + lastSeen: new Date().toISOString(), + serviceType: 'taxi' }, { - id: 'user-2', - name: 'Edwin Martins', - email: 'edwin@example.com', - avatar: '/api/placeholder/40/40', - online: false, - lastSeen: new Date(Date.now() - 3600000).toISOString() - }, - { - id: 'user-3', - name: 'Gabriel North', - email: 'gabriel@example.com', + id: 'restaurant-1', + name: 'El Mesón Restaurant', + email: 'elmeson@karibeo.com', avatar: '/api/placeholder/40/40', online: true, - lastSeen: new Date().toISOString() + lastSeen: new Date().toISOString(), + serviceType: 'restaurant' }, { - id: 'user-4', - name: 'Ethan Blackwood', - email: 'ethan@example.com', - avatar: '/api/placeholder/40/40', - online: false, - lastSeen: new Date(Date.now() - 86400000).toISOString() - }, - { - id: 'user-5', - name: 'Alexander Steele', - email: 'alexs@example.com', + id: 'hotel-1', + name: 'Paradisus Palma Real', + email: 'paradisus@karibeo.com', avatar: '/api/placeholder/40/40', online: true, - lastSeen: new Date().toISOString() + lastSeen: new Date().toISOString(), + serviceType: 'hotel' }, { - id: 'user-6', - name: 'Marcus Knight', - email: 'marcus@example.com', + id: 'guide-1', + name: 'Carlos - Guía Turístico', + email: 'carlos.guide@karibeo.com', avatar: '/api/placeholder/40/40', online: false, - lastSeen: new Date(Date.now() - 1800000).toISOString() + lastSeen: new Date(Date.now() - 3600000).toISOString(), + serviceType: 'guide' }, { - id: 'user-7', - name: 'Pranoti Deshpande', - email: 'pranoti@example.com', + id: 'politur-1', + name: 'POLITUR Punta Cana', + email: 'politur.pc@karibeo.com', avatar: '/api/placeholder/40/40', online: true, - lastSeen: new Date().toISOString() + lastSeen: new Date().toISOString(), + serviceType: 'politur' }, { - id: 'user-8', - name: 'Sarah Wilson', - email: 'sarah@example.com', - avatar: '/api/placeholder/40/40', - online: false, - lastSeen: new Date(Date.now() - 7200000).toISOString() - }, - { - id: 'user-9', - name: 'Michael Chen', - email: 'michael@example.com', + id: 'taxi-2', + name: 'Uber Bávaro', + email: 'uber.bavaro@karibeo.com', avatar: '/api/placeholder/40/40', online: true, - lastSeen: new Date().toISOString() + lastSeen: new Date().toISOString(), + serviceType: 'taxi' }, { - id: 'user-10', - name: 'Lisa Rodriguez', - email: 'lisa@example.com', + id: 'restaurant-2', + name: 'Captain Cook Restaurant', + email: 'captaincook@karibeo.com', avatar: '/api/placeholder/40/40', online: false, - lastSeen: new Date(Date.now() - 3600000).toISOString() + lastSeen: new Date(Date.now() - 1800000).toISOString(), + serviceType: 'restaurant' + }, + { + id: 'hotel-2', + name: 'Hard Rock Hotel', + email: 'hardrock@karibeo.com', + avatar: '/api/placeholder/40/40', + online: true, + lastSeen: new Date().toISOString(), + serviceType: 'hotel' + }, + { + id: 'guide-2', + name: 'María - Guía Cultural', + email: 'maria.guide@karibeo.com', + avatar: '/api/placeholder/40/40', + online: true, + lastSeen: new Date().toISOString(), + serviceType: 'guide' + }, + { + id: 'admin-support', + name: 'Soporte Karibeo', + email: 'support@karibeo.com', + avatar: '/api/placeholder/40/40', + online: true, + lastSeen: new Date().toISOString(), + serviceType: 'support' } ] as User[], chats: [ { - id: 'chat-1', - name: 'Alexander Kaminski', + id: 'chat-taxi-1', + name: 'Taxi Central Punta Cana', type: 'direct', + serviceType: 'taxi', participants: [ { - id: 'user-1', - name: 'Alexander Kaminski', - email: 'alexander@example.com', + id: 'taxi-1', + name: 'Taxi Central Punta Cana', + email: 'taxicentral@karibeo.com', avatar: '/api/placeholder/40/40', online: true } ], - unreadCount: 2, + unreadCount: 1, lastActivity: new Date(Date.now() - 300000).toISOString(), avatar: '/api/placeholder/40/40', online: true, lastMessage: { - id: 'msg-1', - chatId: 'chat-1', - senderId: 'user-1', - senderName: 'Alexander Kaminski', + id: 'msg-taxi-1', + chatId: 'chat-taxi-1', + senderId: 'taxi-1', + senderName: 'Taxi Central Punta Cana', senderAvatar: '/api/placeholder/40/40', - content: 'A new feature has been updated to your...', + content: '¡Su taxi llegará en 5 minutos! Vehículo: Toyota Corolla blanco, Placa: A123456', timestamp: '10:30 AM', isOwn: false, status: 'delivered' } }, { - id: 'chat-2', - name: 'Edwin Martins', + id: 'chat-restaurant-1', + name: 'El Mesón Restaurant', type: 'direct', + serviceType: 'restaurant', participants: [ { - id: 'user-2', - name: 'Edwin Martins', - email: 'edwin@example.com', + id: 'restaurant-1', + name: 'El Mesón Restaurant', + email: 'elmeson@karibeo.com', avatar: '/api/placeholder/40/40', - online: false + online: true } ], - unreadCount: 1, + unreadCount: 0, lastActivity: new Date(Date.now() - 3600000).toISOString(), avatar: '/api/placeholder/40/40', - online: false, + online: true, lastMessage: { - id: 'msg-2', - chatId: 'chat-2', - senderId: 'user-2', - senderName: 'Edwin Martins', + id: 'msg-restaurant-1', + chatId: 'chat-restaurant-1', + senderId: 'restaurant-1', + senderName: 'El Mesón Restaurant', senderAvatar: '/api/placeholder/40/40', - content: 'How can i improve my chances of getting a deposit?', - timestamp: '10:05 PM', + content: 'Su reserva para 4 personas está confirmada para las 8:00 PM', + timestamp: '9:15 AM', + isOwn: false, + status: 'read' + } + }, + { + id: 'chat-hotel-1', + name: 'Paradisus Palma Real', + type: 'direct', + serviceType: 'hotel', + participants: [ + { + id: 'hotel-1', + name: 'Paradisus Palma Real', + email: 'paradisus@karibeo.com', + avatar: '/api/placeholder/40/40', + online: true + } + ], + unreadCount: 2, + lastActivity: new Date(Date.now() - 1800000).toISOString(), + avatar: '/api/placeholder/40/40', + online: true, + lastMessage: { + id: 'msg-hotel-1', + chatId: 'chat-hotel-1', + senderId: 'hotel-1', + senderName: 'Paradisus Palma Real', + senderAvatar: '/api/placeholder/40/40', + content: 'Check-in disponible desde las 3:00 PM. ¿Necesita transporte desde el aeropuerto?', + timestamp: '10:05 AM', isOwn: false, status: 'delivered' } }, { - id: 'chat-3', - name: 'Gabriel North', + id: 'chat-guide-1', + name: 'Carlos - Guía Turístico', type: 'direct', + serviceType: 'guide', participants: [ { - id: 'user-3', - name: 'Gabriel North', - email: 'gabriel@example.com', + id: 'guide-1', + name: 'Carlos - Guía Turístico', + email: 'carlos.guide@karibeo.com', avatar: '/api/placeholder/40/40', - online: true + online: false } ], unreadCount: 0, lastActivity: new Date(Date.now() - 86400000).toISOString(), avatar: '/api/placeholder/40/40', - online: true, + online: false, lastMessage: { - id: 'msg-3', - chatId: 'chat-3', - senderId: 'user-3', - senderName: 'Gabriel North', + id: 'msg-guide-1', + chatId: 'chat-guide-1', + senderId: 'guide-1', + senderName: 'Carlos - Guía Turístico', senderAvatar: '/api/placeholder/40/40', - content: 'Hey Chris, could i ask you to help me out with variation...', - timestamp: 'Tue', + content: 'Tour a Saona Island confirmado para mañana a las 8 AM. Incluye snorkel y almuerzo.', + timestamp: 'Ayer', isOwn: false, status: 'read' } }, { - id: 'chat-4', - name: 'Ethan Blackwood', + id: 'chat-politur-1', + name: 'POLITUR Punta Cana', type: 'direct', + serviceType: 'politur', participants: [ { - id: 'user-4', - name: 'Ethan Blackwood', - email: 'ethan@example.com', + id: 'politur-1', + name: 'POLITUR Punta Cana', + email: 'politur.pc@karibeo.com', avatar: '/api/placeholder/40/40', - online: false + online: true } ], unreadCount: 0, lastActivity: new Date(Date.now() - 172800000).toISOString(), avatar: '/api/placeholder/40/40', - online: false, + online: true, lastMessage: { - id: 'msg-4', - chatId: 'chat-4', - senderId: 'user-4', - senderName: 'Ethan Blackwood', + id: 'msg-politur-1', + chatId: 'chat-politur-1', + senderId: 'politur-1', + senderName: 'POLITUR Punta Cana', senderAvatar: '/api/placeholder/40/40', - content: 'By injected humour, or randomised words which...', - timestamp: '1/22/2019', + content: 'Estamos disponibles 24/7 para asistencia turística. ¿En qué podemos ayudarle?', + timestamp: 'Mar 5', isOwn: false, status: 'read' } }, { - id: 'chat-5', - name: 'Alexander Steele', + id: 'chat-support', + name: 'Soporte Karibeo', type: 'direct', + serviceType: 'support', participants: [ { - id: 'user-5', - name: 'Alexander Steele', - email: 'alexs@example.com', + id: 'admin-support', + name: 'Soporte Karibeo', + email: 'support@karibeo.com', avatar: '/api/placeholder/40/40', online: true } ], - unreadCount: 3, + unreadCount: 0, lastActivity: new Date(Date.now() - 259200000).toISOString(), avatar: '/api/placeholder/40/40', online: true, lastMessage: { - id: 'msg-5', - chatId: 'chat-5', - senderId: 'user-5', - senderName: 'Alexander Steele', + id: 'msg-support-1', + chatId: 'chat-support', + senderId: 'admin-support', + senderName: 'Soporte Karibeo', senderAvatar: '/api/placeholder/40/40', - content: 'No more running out of the office at 4pm on Fridays!', - timestamp: '1/18/2019', - isOwn: false, - status: 'delivered' - } - }, - { - id: 'chat-6', - name: 'Marcus Knight', - type: 'direct', - participants: [ - { - id: 'user-6', - name: 'Marcus Knight', - email: 'marcus@example.com', - avatar: '/api/placeholder/40/40', - online: false - } - ], - unreadCount: 0, - lastActivity: new Date(Date.now() - 345600000).toISOString(), - avatar: '/api/placeholder/40/40', - online: false, - lastMessage: { - id: 'msg-6', - chatId: 'chat-6', - senderId: 'user-6', - senderName: 'Marcus Knight', - senderAvatar: '/api/placeholder/40/40', - content: 'All your favourite books at your reach! We are now mobile', - timestamp: '1/09/2019', - isOwn: false, - status: 'read' - } - }, - { - id: 'chat-7', - name: 'Pranoti Deshpande', - type: 'direct', - participants: [ - { - id: 'user-7', - name: 'Pranoti Deshpande', - email: 'pranoti@example.com', - avatar: '/api/placeholder/40/40', - online: true - } - ], - unreadCount: 0, - lastActivity: new Date(Date.now() - 432000000).toISOString(), - avatar: '/api/placeholder/40/40', - online: true, - lastMessage: { - id: 'msg-7', - chatId: 'chat-7', - senderId: 'user-7', - senderName: 'Pranoti Deshpande', - senderAvatar: '/api/placeholder/40/40', - content: 'Dear Deborah, your Thai massage is today at 5pm.', - timestamp: 'Feb 9', + content: 'Bienvenido a Karibeo. ¿En qué podemos ayudarle hoy?', + timestamp: 'Mar 3', isOwn: false, status: 'read' } @@ -292,96 +279,152 @@ export const mockChatData = { ] as Chat[], messages: [ - // Chat 1 messages + // Taxi Chat messages { - id: 'msg-1-1', - chatId: 'chat-1', - senderId: 'user-1', - senderName: 'Alexander Kaminski', + id: 'msg-taxi-1-1', + chatId: 'chat-taxi-1', + senderId: 'current-user', + senderName: 'You', senderAvatar: '/api/placeholder/40/40', - content: 'Hello! How are you doing today?', + content: 'Necesito un taxi al aeropuerto internacional de Punta Cana', + timestamp: '10:15 AM', + isOwn: true, + status: 'read' + }, + { + id: 'msg-taxi-1-2', + chatId: 'chat-taxi-1', + senderId: 'taxi-1', + senderName: 'Taxi Central Punta Cana', + senderAvatar: '/api/placeholder/40/40', + content: 'Perfecto. ¿A qué hora necesita el servicio?', + timestamp: '10:18 AM', + isOwn: false, + status: 'delivered' + }, + { + id: 'msg-taxi-1-3', + chatId: 'chat-taxi-1', + senderId: 'current-user', + senderName: 'You', + senderAvatar: '/api/placeholder/40/40', + content: 'A las 2:00 PM por favor', + timestamp: '10:20 AM', + isOwn: true, + status: 'read' + }, + { + id: 'msg-taxi-1-4', + chatId: 'chat-taxi-1', + senderId: 'taxi-1', + senderName: 'Taxi Central Punta Cana', + senderAvatar: '/api/placeholder/40/40', + content: '¡Su taxi llegará en 5 minutos! Vehículo: Toyota Corolla blanco, Placa: A123456', timestamp: '10:30 AM', isOwn: false, status: 'delivered' }, + // Restaurant Chat messages { - id: 'msg-1-2', - chatId: 'chat-1', + id: 'msg-restaurant-1-1', + chatId: 'chat-restaurant-1', senderId: 'current-user', senderName: 'You', senderAvatar: '/api/placeholder/40/40', - content: "Hi! I'm doing great, thank you for asking. How about you?", - timestamp: '10:35 AM', + content: 'Hola, quisiera hacer una reserva para esta noche', + timestamp: '9:00 AM', isOwn: true, status: 'read' }, { - id: 'msg-1-3', - chatId: 'chat-1', - senderId: 'user-1', - senderName: 'Alexander Kaminski', + id: 'msg-restaurant-1-2', + chatId: 'chat-restaurant-1', + senderId: 'restaurant-1', + senderName: 'El Mesón Restaurant', senderAvatar: '/api/placeholder/40/40', - content: 'A new feature has been updated to your account. Would you like me to show you around?', - timestamp: '10:36 AM', + content: '¡Hola! Claro que sí. ¿Para cuántas personas y a qué hora?', + timestamp: '9:10 AM', isOwn: false, status: 'delivered' }, { - id: 'msg-1-4', - chatId: 'chat-1', + id: 'msg-restaurant-1-3', + chatId: 'chat-restaurant-1', senderId: 'current-user', senderName: 'You', senderAvatar: '/api/placeholder/40/40', - content: "That sounds great! I'd love to hear more about it.", - timestamp: '10:40 AM', + content: 'Para 4 personas a las 8:00 PM', + timestamp: '9:12 AM', isOwn: true, status: 'read' }, - // Chat 2 messages { - id: 'msg-2-1', - chatId: 'chat-2', - senderId: 'user-2', - senderName: 'Edwin Martins', + id: 'msg-restaurant-1-4', + chatId: 'chat-restaurant-1', + senderId: 'restaurant-1', + senderName: 'El Mesón Restaurant', senderAvatar: '/api/placeholder/40/40', - content: 'How can i improve my chances of getting a deposit?', - timestamp: '10:05 PM', + content: 'Su reserva para 4 personas está confirmada para las 8:00 PM. ¿Tiene alguna preferencia dietética?', + timestamp: '9:15 AM', + isOwn: false, + status: 'read' + }, + // Hotel Chat messages + { + id: 'msg-hotel-1-1', + chatId: 'chat-hotel-1', + senderId: 'hotel-1', + senderName: 'Paradisus Palma Real', + senderAvatar: '/api/placeholder/40/40', + content: 'Bienvenido a Paradisus Palma Real. Su habitación estará lista pronto.', + timestamp: '10:00 AM', isOwn: false, status: 'delivered' }, { - id: 'msg-2-2', - chatId: 'chat-2', + id: 'msg-hotel-1-2', + chatId: 'chat-hotel-1', senderId: 'current-user', senderName: 'You', senderAvatar: '/api/placeholder/40/40', - content: 'There are several ways to improve your chances. First, make sure your profile is complete...', - timestamp: '10:10 PM', + content: 'Gracias. ¿A qué hora es el check-in?', + timestamp: '10:03 AM', isOwn: true, status: 'read' }, - // Chat 3 messages { - id: 'msg-3-1', - chatId: 'chat-3', - senderId: 'user-3', - senderName: 'Gabriel North', + id: 'msg-hotel-1-3', + chatId: 'chat-hotel-1', + senderId: 'hotel-1', + senderName: 'Paradisus Palma Real', senderAvatar: '/api/placeholder/40/40', - content: 'Hey Chris, could i ask you to help me out with variation of our main design theme?', + content: 'Check-in disponible desde las 3:00 PM. ¿Necesita transporte desde el aeropuerto?', + timestamp: '10:05 AM', + isOwn: false, + status: 'delivered' + }, + // Guide Chat messages + { + id: 'msg-guide-1-1', + chatId: 'chat-guide-1', + senderId: 'current-user', + senderName: 'You', + senderAvatar: '/api/placeholder/40/40', + content: 'Me gustaría reservar el tour a Saona Island', + timestamp: '2:00 PM', + isOwn: true, + status: 'read' + }, + { + id: 'msg-guide-1-2', + chatId: 'chat-guide-1', + senderId: 'guide-1', + senderName: 'Carlos - Guía Turístico', + senderAvatar: '/api/placeholder/40/40', + content: 'Excelente elección! Tenemos disponibilidad para mañana. El tour incluye transporte, snorkel, y almuerzo buffet.', timestamp: '2:15 PM', isOwn: false, status: 'read' - }, - { - id: 'msg-3-2', - chatId: 'chat-3', - senderId: 'current-user', - senderName: 'You', - senderAvatar: '/api/placeholder/40/40', - content: 'Of course! What specific variations are you looking for?', - timestamp: '2:20 PM', - isOwn: true, - status: 'read' } ] as Message[] }; \ No newline at end of file