Build out chat more

inventory/src/components/chat/ChatRoom.tsx

@@ -0,0 +1,470 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Loader2, Hash, Lock, MessageSquare, ChevronUp, Search, ExternalLink, FileText, Image, Download } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import config from '@/config';
+
+interface Message {
+  id: number;
+  msg: string;
+  ts: string;
+  u: {
+    _id: string;
+    username: string;
+    name?: string;
+  };
+  _updatedat: string;
+  urls?: any[];
+  mentions?: any[];
+  md?: any[];
+  attachments?: {
+    id: number;
+    mongo_id: string;
+    name: string;
+    size: number;
+    type: string;
+    url: string;
+    path: string;
+    typegroup: string;
+    identify?: {
+      size?: { width: number; height: number };
+      format?: string;
+    };
+  }[];
+}
+
+interface Room {
+  id: number;
+  name: string;
+  fname: string;
+  type: string;
+  msgs: number;
+  last_message_date: string;
+  display_name: string;
+  description?: string;
+  participants?: { username: string; name: string }[];
+}
+
+interface ChatRoomProps {
+  roomId: string;
+  selectedUserId: string;
+}
+
+export function ChatRoom({ roomId, selectedUserId }: ChatRoomProps) {
+  const [room, setRoom] = useState<Room | null>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<any[]>([]);
+  const [showSearch, setShowSearch] = useState(false);
+  
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  const fetchRoom = async () => {
+    try {
+      const response = await fetch(`${config.chatUrl}/rooms/${roomId}`);
+      const data = await response.json();
+      
+      if (data.status === 'success') {
+        setRoom(data.room);
+      } else {
+        throw new Error(data.error || 'Failed to fetch room');
+      }
+    } catch (err) {
+      console.error('Error fetching room:', err);
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    }
+  };
+
+  const fetchMessages = async (before?: string, append = false) => {
+    if (!append) setLoading(true);
+    else setLoadingMore(true);
+    
+    try {
+      const params = new URLSearchParams({
+        limit: '50',
+        offset: append ? messages.length.toString() : '0'
+      });
+      
+      if (before) {
+        params.set('before', before);
+      }
+      
+      const response = await fetch(`${config.chatUrl}/rooms/${roomId}/messages?${params}`);
+      const data = await response.json();
+      
+      if (data.status === 'success') {
+        const newMessages = data.messages;
+        
+        if (append) {
+          // Prepend older messages
+          setMessages(prev => [...newMessages, ...prev]);
+          setHasMore(newMessages.length === 50);
+        } else {
+          setMessages(newMessages);
+          setHasMore(newMessages.length === 50);
+          // Scroll to bottom on initial load
+          setTimeout(scrollToBottom, 100);
+        }
+        
+        // Load attachments for these messages in the background (non-blocking)
+        if (newMessages.length > 0) {
+          loadAttachments(newMessages.map((m: Message) => m.id));
+        }
+      } else {
+        throw new Error(data.error || 'Failed to fetch messages');
+      }
+    } catch (err) {
+      console.error('Error fetching messages:', err);
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  };
+
+  const loadAttachments = async (messageIds: number[]) => {
+    try {
+      const response = await fetch(`${config.chatUrl}/messages/attachments`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ messageIds }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.status === 'success' && data.attachments) {
+        // Update messages with their attachments
+        setMessages(prevMessages => 
+          prevMessages.map(msg => ({
+            ...msg,
+            attachments: data.attachments[msg.id] || []
+          }))
+        );
+      }
+    } catch (err) {
+      console.error('Error loading attachments:', err);
+      // Don't show error to user for attachments - messages are already displayed
+    }
+  };
+
+  const loadMoreMessages = () => {
+    if (messages.length > 0 && hasMore && !loadingMore) {
+      const oldestMessage = messages[0];
+      fetchMessages(oldestMessage.ts, true);
+    }
+  };
+
+  const searchMessages = async () => {
+    if (!searchQuery || searchQuery.length < 2) return;
+    
+    try {
+      const response = await fetch(
+        `${config.chatUrl}/users/${selectedUserId}/search?q=${encodeURIComponent(searchQuery)}&limit=20`
+      );
+      const data = await response.json();
+      
+      if (data.status === 'success') {
+        setSearchResults(data.results);
+      }
+    } catch (err) {
+      console.error('Error searching messages:', err);
+    }
+  };
+
+  useEffect(() => {
+    if (roomId && selectedUserId) {
+      setMessages([]);
+      setError(null);
+      setHasMore(true);
+      fetchRoom();
+      fetchMessages();
+    }
+  }, [roomId, selectedUserId]);
+
+  const getRoomIcon = (roomType: string) => {
+    switch (roomType) {
+      case 'c':
+        return <Hash className="h-4 w-4 text-blue-500" />;
+      case 'p':
+        return <Lock className="h-4 w-4 text-orange-500" />;
+      case 'd':
+        return <MessageSquare className="h-4 w-4 text-green-500" />;
+      default:
+        return <Hash className="h-4 w-4 text-gray-500" />;
+    }
+  };
+
+  const formatTime = (timestamp: string) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    
+    if (isToday) {
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } else {
+      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+  };
+
+  const renderURLPreviews = (urls: any[]) => {
+    if (!urls || urls.length === 0) return null;
+    
+    return (
+      <div className="mt-2 space-y-2">
+        {urls.map((urlData, index) => (
+          <div key={index} className="border rounded-lg p-3 bg-gray-50">
+            <div className="flex items-start gap-2">
+              <ExternalLink className="h-4 w-4 mt-1 text-blue-500 flex-shrink-0" />
+              <div className="min-w-0 flex-1">
+                <a 
+                  href={urlData.url} 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="text-blue-600 hover:underline text-sm break-all"
+                >
+                  {urlData.url}
+                </a>
+                {urlData.meta?.pageTitle && (
+                  <div className="font-medium text-sm mt-1">{urlData.meta.pageTitle}</div>
+                )}
+                {urlData.meta?.ogDescription && (
+                  <div className="text-xs text-muted-foreground mt-1">{urlData.meta.ogDescription}</div>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderAttachments = (attachments: any[]) => {
+    if (!attachments || attachments.length === 0) return null;
+    
+    return (
+      <div className="mt-2 space-y-2">
+        {attachments.map((attachment, index) => {
+          const isImage = attachment.typegroup === 'image';
+                     const filePath = `${config.chatUrl}/files/by-id/${attachment.mongo_id}`;
+          
+          return (
+            <div key={index} className="border rounded-lg p-3 bg-gray-50">
+              <div className="flex items-center gap-2">
+                {isImage ? (
+                  <Image className="h-4 w-4 text-green-500" />
+                ) : (
+                  <FileText className="h-4 w-4 text-blue-500" />
+                )}
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium text-sm truncate">{attachment.name}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {(attachment.size / 1024).toFixed(1)} KB
+                    {attachment.identify?.size && (
+                      <span> • {attachment.identify.size.width}×{attachment.identify.size.height}</span>
+                    )}
+                  </div>
+                </div>
+                <Button variant="ghost" size="sm">
+                  <Download className="h-4 w-4" />
+                </Button>
+              </div>
+              {isImage && attachment.identify?.size && (
+                <div className="mt-2">
+                  <img 
+                    src={filePath}
+                    alt={attachment.name}
+                    className="max-w-xs max-h-48 rounded border"
+                    loading="lazy"
+                  />
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderMentions = (text: string, mentions: any[]) => {
+    if (!mentions || mentions.length === 0) return text;
+    
+    let renderedText = text;
+    mentions.forEach((mention) => {
+      if (mention.username) {
+        const mentionPattern = new RegExp(`@${mention.username}`, 'g');
+        renderedText = renderedText.replace(
+          mentionPattern, 
+          `<span class="bg-blue-100 text-blue-800 px-1 rounded">@${mention.username}</span>`
+        );
+      }
+    });
+    
+    return <span dangerouslySetInnerHTML={{ __html: renderedText }} />;
+  };
+
+  const renderMessage = (message: Message, index: number) => {
+    const prevMessage = index > 0 ? messages[index - 1] : null;
+    const isConsecutive = prevMessage && 
+      prevMessage.u.username === message.u.username &&
+      new Date(message.ts).getTime() - new Date(prevMessage.ts).getTime() < 300000; // 5 minutes
+
+    return (
+      <div key={message.id} className={`${isConsecutive ? 'mt-1' : 'mt-4'}`}>
+        {!isConsecutive && (
+          <div className="flex items-center gap-2 mb-1">
+            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-sm font-medium text-blue-600">
+              {(message.u.name || message.u.username).charAt(0).toUpperCase()}
+            </div>
+            <span className="font-medium text-sm">
+              {message.u.name || message.u.username}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {formatTime(message.ts)}
+            </span>
+          </div>
+        )}
+        <div className={`${isConsecutive ? 'ml-10' : 'ml-10'} text-sm`}>
+          <div className="break-words">
+            {message.mentions && message.mentions.length > 0 
+              ? renderMentions(message.msg, message.mentions)
+              : message.msg
+            }
+          </div>
+          {message.urls && renderURLPreviews(message.urls)}
+          {message.attachments && renderAttachments(message.attachments)}
+        </div>
+      </div>
+    );
+  };
+
+  if (!roomId) {
+    return (
+      <Card className="h-full">
+        <CardContent className="flex items-center justify-center h-full">
+          <p className="text-muted-foreground">Select a room to view messages</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (loading && messages.length === 0) {
+    return (
+      <Card className="h-full">
+        <CardContent className="flex items-center justify-center h-full">
+          <div className="flex items-center gap-2">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span>Loading messages...</span>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="h-full border-red-200 bg-red-50">
+        <CardContent className="flex items-center justify-center h-full">
+          <p className="text-red-700">{error}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="h-full flex flex-col">
+      <CardHeader className="border-b p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            {room && getRoomIcon(room.type)}
+            <div>
+              <CardTitle className="text-lg">
+                {room?.display_name || room?.fname || room?.name || 'Unnamed Room'}
+              </CardTitle>
+              {room?.description && (
+                <p className="text-sm text-muted-foreground">{room.description}</p>
+              )}
+              {room?.participants && room.participants.length > 0 && (
+                <p className="text-xs text-muted-foreground">
+                  {room.participants.map(p => p.name || p.username).join(', ')}
+                </p>
+              )}
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowSearch(!showSearch)}
+            >
+              <Search className="h-4 w-4" />
+            </Button>
+            <Badge variant="secondary">{room?.msgs || 0} messages</Badge>
+          </div>
+        </div>
+        
+        {showSearch && (
+          <div className="flex gap-2 mt-2">
+            <Input
+              placeholder="Search messages..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && searchMessages()}
+            />
+            <Button onClick={searchMessages} size="sm">Search</Button>
+          </div>
+        )}
+      </CardHeader>
+      
+      <CardContent className="flex-1 p-0 overflow-hidden">
+        <div 
+          ref={messagesContainerRef}
+          className="h-full overflow-y-auto p-4"
+        >
+          {hasMore && messages.length > 0 && (
+            <div className="text-center mb-4">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={loadMoreMessages}
+                disabled={loadingMore}
+              >
+                {loadingMore ? (
+                  <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                ) : (
+                  <ChevronUp className="h-4 w-4 mr-2" />
+                )}
+                Load older messages
+              </Button>
+            </div>
+          )}
+          
+          {messages.length === 0 ? (
+            <div className="text-center text-muted-foreground">
+              No messages in this room
+            </div>
+          ) : (
+            <div className="space-y-1">
+              {messages.map((message, index) => renderMessage(message, index))}
+            </div>
+          )}
+          
+          <div ref={messagesEndRef} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+} 

inventory/src/components/chat/RoomList.tsx

@@ -0,0 +1,251 @@
+import React, { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Loader2, Hash, Lock, Users, MessageSquare, Search } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import config from '@/config';
+
+interface Room {
+  id: number;
+  name: string;
+  fname: string;
+  type: string;
+  msgs: number;
+  last_message_date: string;
+  display_name: string;
+  userscount?: number;
+  description?: string;
+}
+
+interface RoomListProps {
+  selectedUserId: string;
+  selectedRoomId: string | null;
+  onRoomSelect: (roomId: string) => void;
+}
+
+export function RoomList({ selectedUserId, selectedRoomId, onRoomSelect }: RoomListProps) {
+  const [rooms, setRooms] = useState<Room[]>([]);
+  const [filteredRooms, setFilteredRooms] = useState<Room[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchFilter, setSearchFilter] = useState('');
+
+  useEffect(() => {
+    if (!selectedUserId) {
+      setRooms([]);
+      setFilteredRooms([]);
+      return;
+    }
+
+    const fetchUserRooms = async () => {
+      setLoading(true);
+      setError(null);
+      
+      try {
+        const response = await fetch(`${config.chatUrl}/users/${selectedUserId}/rooms`);
+        const data = await response.json();
+        
+        if (data.status === 'success') {
+          setRooms(data.rooms);
+          setFilteredRooms(data.rooms);
+        } else {
+          throw new Error(data.error || 'Failed to fetch rooms');
+        }
+      } catch (err) {
+        console.error('Error fetching user rooms:', err);
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchUserRooms();
+  }, [selectedUserId]);
+
+  useEffect(() => {
+    if (!searchFilter) {
+      setFilteredRooms(rooms);
+    } else {
+      const filtered = rooms.filter(room => 
+        (room.display_name?.toLowerCase() || '').includes(searchFilter.toLowerCase()) ||
+        (room.name?.toLowerCase() || '').includes(searchFilter.toLowerCase()) ||
+        (room.fname?.toLowerCase() || '').includes(searchFilter.toLowerCase())
+      );
+      setFilteredRooms(filtered);
+    }
+  }, [searchFilter, rooms]);
+
+  const getRoomIcon = (roomType: string) => {
+    switch (roomType) {
+      case 'c':
+        return <Hash className="h-4 w-4 text-blue-500" />;
+      case 'p':
+        return <Lock className="h-4 w-4 text-orange-500" />;
+      case 'd':
+        return <MessageSquare className="h-4 w-4 text-green-500" />;
+      default:
+        return <Users className="h-4 w-4 text-gray-500" />;
+    }
+  };
+
+  const getRoomTypeLabel = (roomType: string) => {
+    switch (roomType) {
+      case 'c':
+        return 'Channel';
+      case 'p':
+        return 'Private';
+      case 'd':
+        return 'Direct';
+      default:
+        return 'Unknown';
+    }
+  };
+
+  const formatLastMessageDate = (dateString: string) => {
+    if (!dateString) return '';
+    
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffTime = Math.abs(now.getTime() - date.getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    
+    if (diffDays === 1) {
+      return 'Today';
+    } else if (diffDays === 2) {
+      return 'Yesterday';
+    } else if (diffDays <= 7) {
+      return `${diffDays - 1} days ago`;
+    } else {
+      return date.toLocaleDateString();
+    }
+  };
+
+  if (!selectedUserId) {
+    return (
+      <Card className="h-full">
+        <CardHeader>
+          <CardTitle>Rooms</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground text-sm">
+            Select a user from the dropdown above to view their rooms.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (loading) {
+    return (
+      <Card className="h-full">
+        <CardHeader>
+          <CardTitle>Loading Rooms...</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-2">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span className="text-sm">Fetching rooms for selected user...</span>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="h-full border-red-200 bg-red-50">
+        <CardHeader>
+          <CardTitle className="text-red-800">Error Loading Rooms</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-red-700 text-sm">{error}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="h-full flex flex-col">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">Rooms ({filteredRooms.length})</CardTitle>
+        <div className="relative">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search rooms..."
+            value={searchFilter}
+            onChange={(e) => setSearchFilter(e.target.value)}
+            className="pl-8"
+          />
+        </div>
+      </CardHeader>
+      
+      <CardContent className="flex-1 p-0 overflow-hidden">
+        <div className="h-full overflow-y-auto">
+          {filteredRooms.length === 0 ? (
+            <div className="p-4">
+              <p className="text-muted-foreground text-sm">
+                {searchFilter ? 'No rooms match your search.' : 'No rooms found for this user.'}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-1 p-2">
+              {filteredRooms.map((room) => (
+                <div
+                  key={room.id}
+                  onClick={() => onRoomSelect(room.id.toString())}
+                  className={`
+                    flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors
+                    hover:bg-gray-100 
+                    ${selectedRoomId === room.id.toString() ? 'bg-blue-50 border-l-4 border-blue-500' : ''}
+                  `}
+                >
+                  <div className="flex items-center gap-3 min-w-0 flex-1">
+                    {getRoomIcon(room.type)}
+                    <div className="min-w-0 flex-1">
+                      <div className="font-medium text-sm truncate">
+                        {room.display_name || room.fname || room.name || 'Unnamed Room'}
+                      </div>
+                      <div className="flex items-center gap-2 mt-1">
+                        <Badge 
+                          variant="secondary" 
+                          className={`text-xs ${
+                            room.type === 'c' ? 'bg-blue-100 text-blue-800' :
+                            room.type === 'p' ? 'bg-orange-100 text-orange-800' :
+                            room.type === 'd' ? 'bg-green-100 text-green-800' :
+                            'bg-gray-100 text-gray-800'
+                          }`}
+                        >
+                          {getRoomTypeLabel(room.type)}
+                        </Badge>
+                        {room.userscount && room.userscount > 0 && (
+                          <span className="text-xs text-muted-foreground">
+                            {room.userscount} member{room.userscount !== 1 ? 's' : ''}
+                          </span>
+                        )}
+                        {room.msgs > 0 && (
+                          <span className="text-xs text-muted-foreground">
+                            {room.msgs} msgs
+                          </span>
+                        )}
+                      </div>
+                      {room.description && (
+                        <div className="text-xs text-muted-foreground mt-1 truncate">
+                          {room.description}
+                        </div>
+                      )}
+                      {room.last_message_date && (
+                        <div className="text-xs text-muted-foreground mt-1">
+                          {formatLastMessageDate(room.last_message_date)}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+} 

inventory/src/components/chat/SearchResults.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Hash, Lock, MessageSquare, X } from 'lucide-react';
+
+interface SearchResult {
+  id: number;
+  msg: string;
+  ts: string;
+  u: {
+    username: string;
+    name?: string;
+  };
+  room_id: number;
+  room_name: string;
+  room_fname: string;
+  room_type: string;
+}
+
+interface SearchResultsProps {
+  results: SearchResult[];
+  query: string;
+  onClose: () => void;
+  onRoomSelect: (roomId: string) => void;
+}
+
+export function SearchResults({ results, query, onClose, onRoomSelect }: SearchResultsProps) {
+  const getRoomIcon = (roomType: string) => {
+    switch (roomType) {
+      case 'c':
+        return <Hash className="h-3 w-3 text-blue-500" />;
+      case 'p':
+        return <Lock className="h-3 w-3 text-orange-500" />;
+      case 'd':
+        return <MessageSquare className="h-3 w-3 text-green-500" />;
+      default:
+        return <Hash className="h-3 w-3 text-gray-500" />;
+    }
+  };
+
+  const highlightText = (text: string, query: string) => {
+    if (!query) return text;
+    
+    const regex = new RegExp(`(${query})`, 'gi');
+    const parts = text.split(regex);
+    
+    return parts.map((part, index) => 
+      regex.test(part) ? (
+        <span key={index} className="bg-yellow-200 font-medium">
+          {part}
+        </span>
+      ) : (
+        part
+      )
+    );
+  };
+
+  const formatTime = (timestamp: string) => {
+    const date = new Date(timestamp);
+    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+  };
+
+  return (
+    <Card className="absolute top-full left-0 right-0 z-10 mt-2 max-h-96 overflow-y-auto">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm">
+          Search Results for "{query}" ({results.length})
+        </CardTitle>
+        <Button variant="ghost" size="sm" onClick={onClose}>
+          <X className="h-4 w-4" />
+        </Button>
+      </CardHeader>
+      <CardContent className="pt-0">
+        {results.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No messages found matching your search.</p>
+        ) : (
+          <div className="space-y-3">
+            {results.map((result) => (
+              <div 
+                key={result.id}
+                className="border rounded-lg p-3 hover:bg-gray-50 cursor-pointer"
+                onClick={() => {
+                  onRoomSelect(result.room_id.toString());
+                  onClose();
+                }}
+              >
+                <div className="flex items-center gap-2 mb-2">
+                  {getRoomIcon(result.room_type)}
+                  <span className="text-sm font-medium">
+                    {result.room_fname || result.room_name || 'Unnamed Room'}
+                  </span>
+                  <Badge variant="outline" className="text-xs">
+                    {result.u.name || result.u.username}
+                  </Badge>
+                  <span className="text-xs text-muted-foreground ml-auto">
+                    {formatTime(result.ts)}
+                  </span>
+                </div>
+                <div className="text-sm">
+                  {highlightText(result.msg, query)}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+} 

inventory/src/pages/Chat.tsx

@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Badge } from '@/components/ui/badge';
-import { Loader2, MessageCircle, Users, Database } from 'lucide-react';
-import { ChatTest } from '@/components/chat/ChatTest';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Loader2, Search } from 'lucide-react';
+import { RoomList } from '@/components/chat/RoomList';
+import { ChatRoom } from '@/components/chat/ChatRoom';
+import { SearchResults } from '@/components/chat/SearchResults';
 import config from '@/config';
 
 interface User {
@@ -12,54 +15,100 @@ interface User {
   name: string;
   type: string;
   active: boolean;
+  status?: string;
+  lastlogin?: string;
+  statustext?: string;
+  statusconnection?: string;
 }
 
-interface DbStats {
-  active_users: number;
-  total_messages: number;
-  total_rooms: number;
+interface SearchResult {
+  id: number;
+  msg: string;
+  ts: string;
+  u: {
+    username: string;
+    name?: string;
+  };
+  room_id: number;
+  room_name: string;
+  room_fname: string;
+  room_type: string;
 }
 
 export function Chat() {
   const [users, setUsers] = useState<User[]>([]);
   const [selectedUserId, setSelectedUserId] = useState<string>('');
+  const [selectedRoomId, setSelectedRoomId] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
-  const [dbStats, setDbStats] = useState<DbStats | null>(null);
   const [error, setError] = useState<string | null>(null);
+  
+  // Global search state
+  const [globalSearchQuery, setGlobalSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const [showSearchResults, setShowSearchResults] = useState(false);
+  const [searching, setSearching] = useState(false);
 
   useEffect(() => {
-    const fetchInitialData = async () => {
+    const fetchUsers = async () => {
       try {
-        // Test database connection
-        const dbResponse = await fetch(`${config.chatUrl}/test-db`);
-        const dbData = await dbResponse.json();
+        const response = await fetch(`${config.chatUrl}/users`);
+        const data = await response.json();
         
-        if (dbData.status === 'success') {
-          setDbStats(dbData.stats);
+        if (data.status === 'success') {
+          setUsers(data.users);
         } else {
-          throw new Error(dbData.error || 'Database connection failed');
-        }
-
-        // Fetch users
-        const usersResponse = await fetch(`${config.chatUrl}/users`);
-        const usersData = await usersResponse.json();
-        
-        if (usersData.status === 'success') {
-          setUsers(usersData.users);
-        } else {
-          throw new Error(usersData.error || 'Failed to fetch users');
+          throw new Error(data.error || 'Failed to fetch users');
         }
       } catch (err) {
-        console.error('Error fetching initial data:', err);
+        console.error('Error fetching users:', err);
         setError(err instanceof Error ? err.message : 'An error occurred');
       } finally {
         setLoading(false);
       }
     };
 
-    fetchInitialData();
+    fetchUsers();
   }, []);
 
+  const handleUserChange = (userId: string) => {
+    setSelectedUserId(userId);
+    setSelectedRoomId(null); // Reset room selection when user changes
+    setGlobalSearchQuery(''); // Clear search when user changes
+    setShowSearchResults(false);
+  };
+
+  const handleRoomSelect = (roomId: string) => {
+    setSelectedRoomId(roomId);
+    setShowSearchResults(false); // Close search results when room is selected
+  };
+
+  const handleGlobalSearch = async () => {
+    if (!globalSearchQuery || globalSearchQuery.length < 2 || !selectedUserId) return;
+    
+    setSearching(true);
+    try {
+      const response = await fetch(
+        `${config.chatUrl}/users/${selectedUserId}/search?q=${encodeURIComponent(globalSearchQuery)}&limit=20`
+      );
+      const data = await response.json();
+      
+      if (data.status === 'success') {
+        setSearchResults(data.results);
+        setShowSearchResults(true);
+      }
+    } catch (err) {
+      console.error('Error searching messages:', err);
+    } finally {
+      setSearching(false);
+    }
+  };
+
+  const handleSearchKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleGlobalSearch();
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[400px]">
@@ -78,7 +127,7 @@ export function Chat() {
           <CardContent>
             <p className="text-red-700">{error}</p>
             <p className="text-sm text-red-600 mt-2">
-              Make sure the chat server is running on port 3014 and the database is accessible.
+              Make sure the chat server is running and the database is accessible.
             </p>
           </CardContent>
         </Card>
@@ -88,80 +137,97 @@ export function Chat() {
 
   return (
     <div className="p-6 space-y-6">
-      <div className="flex flex-col gap-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold">Chat Archive</h1>
-            <p className="text-muted-foreground">
-              Read-only archive of Rocket.Chat conversations
-            </p>
-          </div>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">Chat</h1>
+        
+        <div className="flex items-center gap-4">
+          {/* Global Search */}
+          {selectedUserId && (
+            <div className="relative">
+              <div className="flex gap-2">
+                <Input
+                  placeholder="Search all messages..."
+                  value={globalSearchQuery}
+                  onChange={(e) => setGlobalSearchQuery(e.target.value)}
+                  onKeyPress={handleSearchKeyPress}
+                  className="w-64"
+                />
+                <Button 
+                  onClick={handleGlobalSearch} 
+                  disabled={searching || globalSearchQuery.length < 2}
+                  size="icon"
+                  variant="outline"
+                >
+                  {searching ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Search className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+              
+              {showSearchResults && (
+                <SearchResults
+                  results={searchResults}
+                  query={globalSearchQuery}
+                  onClose={() => setShowSearchResults(false)}
+                  onRoomSelect={handleRoomSelect}
+                />
+              )}
+            </div>
+          )}
           
-          <div className="flex items-center gap-4">
-            <Select value={selectedUserId} onValueChange={setSelectedUserId}>
-              <SelectTrigger className="w-64">
-                <SelectValue placeholder="View as user..." />
-              </SelectTrigger>
-              <SelectContent>
-                {users.map((user) => (
-                  <SelectItem key={user.id} value={user.id.toString()}>
-                    <div className="flex items-center gap-2">
+          <Select value={selectedUserId} onValueChange={handleUserChange}>
+            <SelectTrigger className="w-64">
+              <SelectValue placeholder="View as user..." />
+            </SelectTrigger>
+            <SelectContent>
+              {users.map((user) => (
+                <SelectItem key={user.id} value={user.id.toString()}>
+                  <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 flex-1">
+                      
                       <span>{user.name || user.username}</span>
-                      <Badge variant="secondary" className="text-xs">
-                        {user.username}
-                      </Badge>
                     </div>
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+                 
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
-
-        {/* Database Stats */}
-        {dbStats && (
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <Card>
-              <CardContent className="p-4">
-                <div className="flex items-center gap-2">
-                  <Users className="h-5 w-5 text-blue-500" />
-                  <div>
-                    <p className="text-sm text-muted-foreground">Active Users</p>
-                    <p className="text-2xl font-bold">{dbStats.active_users}</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-            
-            <Card>
-              <CardContent className="p-4">
-                <div className="flex items-center gap-2">
-                  <MessageCircle className="h-5 w-5 text-green-500" />
-                  <div>
-                    <p className="text-sm text-muted-foreground">Total Messages</p>
-                    <p className="text-2xl font-bold">{dbStats.total_messages.toLocaleString()}</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-            
-            <Card>
-              <CardContent className="p-4">
-                <div className="flex items-center gap-2">
-                  <Database className="h-5 w-5 text-purple-500" />
-                  <div>
-                    <p className="text-sm text-muted-foreground">Total Rooms</p>
-                    <p className="text-2xl font-bold">{dbStats.total_rooms}</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        )}
       </div>
 
-      {/* Chat Test Component */}
-      <ChatTest selectedUserId={selectedUserId} />
+      {/* Chat Interface */}
+      {selectedUserId ? (
+        <div className="grid grid-cols-12 gap-6 h-[700px]">
+          {/* Room List Sidebar */}
+          <div className="col-span-4 h-[85vh] overflow-y-auto">
+            <RoomList
+              selectedUserId={selectedUserId}
+              selectedRoomId={selectedRoomId}
+              onRoomSelect={handleRoomSelect}
+            />
+          </div>
+          
+          {/* Chat Messages Area */}
+          <div className="col-span-8 h-[85vh] overflow-y-auto">
+            <ChatRoom
+              roomId={selectedRoomId || ''}
+              selectedUserId={selectedUserId}
+            />
+          </div>
+        </div>
+      ) : (
+        <Card>
+          <CardContent className="flex items-center justify-center h-64">
+            <p className="text-muted-foreground">
+              Select a user to view their chat rooms and messages.
+            </p>
+          </CardContent>
+        </Card>
+      )}
     </div>
   );
 } 

inventory/tsconfig.json

@@ -20,6 +20,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }