+
+ );
+};
+
+export default ChatList;
diff --git a/telegram-app/client/src/components/MainApp.tsx b/telegram-app/client/src/components/MainApp.tsx
new file mode 100644
index 00000000000..fff0ba6e90b
--- /dev/null
+++ b/telegram-app/client/src/components/MainApp.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Chat } from '../types';
+import ChatList from './ChatList';
+import MessageThread from './MessageThread';
+
+const MainApp: React.FC = () => {
+ const [selectedChat, setSelectedChat] = useState
+
+
+ {showNewChat && (
+
+
+
+ setSearchQuery(e.target.value)}
+ className="w-full px-4 py-2 bg-gray-100 rounded-lg outline-none focus:ring-2 focus:ring-telegram-blue"
+ />
+ Chats
+
+
+
+
+
+
+ )}
+
+ Start a new chat
+
+ {users.map((u) => (
+
+ ))}
+
+
+ {filteredChats.length === 0 ? (
+
+
+
+
+ ) : (
+ filteredChats.map((chat) => (
+
+ ))
+ )}
+ No chats yet
+Click + to start a conversation
+
+
+ );
+};
+
+export default MainApp;
diff --git a/telegram-app/client/src/components/MessageThread.tsx b/telegram-app/client/src/components/MessageThread.tsx
new file mode 100644
index 00000000000..11d1031d4d8
--- /dev/null
+++ b/telegram-app/client/src/components/MessageThread.tsx
@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Chat, Message } from '../types';
+import { chatAPI, uploadAPI } from '../services/api';
+import { socketService } from '../services/socket';
+import { useAuth } from '../context/AuthContext';
+import { format } from 'date-fns';
+
+interface MessageThreadProps {
+ chat: Chat;
+}
+
+const MessageThread: React.FC
+
+ )}
+
+
+
+ Select a chat
+Choose a conversation from the list to start messaging
+
+
+ );
+};
+
+export default MessageThread;
diff --git a/telegram-app/client/src/context/AuthContext.tsx b/telegram-app/client/src/context/AuthContext.tsx
new file mode 100644
index 00000000000..b217e5be5e3
--- /dev/null
+++ b/telegram-app/client/src/context/AuthContext.tsx
@@ -0,0 +1,79 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { User } from '../types';
+import { authAPI } from '../services/api';
+import { socketService } from '../services/socket';
+
+interface AuthContextType {
+ user: User | null;
+ token: string | null;
+ login: (username: string, password: string) => Promise
+
+
+
+
+
+ {chat.name?.[0]?.toUpperCase() || '?'}
+
+ {chat.online && (
+
+ )}
+
+
+ {chat.name}
++ {chat.online ? 'Online' : 'Offline'} +
+
+ {messages.map((message) => {
+ const isOwn = message.senderId === user?.id;
+ return (
+
+
+
+
+
+ );
+ })}
+ {typing && (
+
+ {message.type === 'image' && message.fileUrl && (
+ 
+ )}
+ {message.type === 'file' && message.fileUrl && (
+
+
+ {message.fileName}
+
+ )}
+
+ {message.content}
++ {format(new Date(message.timestamp), 'HH:mm')} +
+
+
+ )}
+
+
+
+
+
+
+
+
+