AFD Messenger

Okay, let's enhance the user interface and add some basic interactivity. We'll refine the styles for a cleaner look, add icons, and implement a visual indicator for the selected chat. { "name": "afd-messenger", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@vitejs/plugin-react": "^4.0.3", "eslint": "^8.45.0", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", "vite": "^4.4.5" } } import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { // Required for WebContainer environment hmr: { clientPort: 443 } } }) {/* Using a generic chat icon, replace with your own if desired */} AFD Messenger

import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( , ) import React, { useState } from 'react'; import ContactList from './components/ContactList'; import ChatWindow from './components/ChatWindow'; import './App.css'; // Placeholder contacts data const initialContacts = [ { id: 1, name: 'Alice', avatarSeed: 'Alice', lastMessage: 'Working on the messenger.', timestamp: '10:02 AM', unread: 0 }, { id: 2, name: 'Bob', avatarSeed: 'Bob', lastMessage: 'Nice! Looks good so far.', timestamp: '10:03 AM', unread: 2 }, { id: 3, name: 'Charlie', avatarSeed: 'Charlie', lastMessage: 'See you tomorrow!', timestamp: 'Yesterday', unread: 0 }, { id: 4, name: 'David', avatarSeed: 'David', lastMessage: 'Okay, sounds good.', timestamp: 'Tuesday', unread: 1 }, { id: 5, name: 'Eve', avatarSeed: 'Eve', lastMessage: 'Photo', timestamp: 'Monday', unread: 0 }, ]; // Placeholder messages data (could be fetched based on selected contact) const initialMessages = { 1: [ // Messages for Alice (id: 1) { id: 1, sender: 'Alice', text: 'Hey Bob!', timestamp: '10:00 AM' }, { id: 2, sender: 'You', text: 'Hi Alice! How are you?', timestamp: '10:01 AM', self: true }, { id: 3, sender: 'Alice', text: 'Doing well, thanks! Just working on the messenger.', timestamp: '10:02 AM' }, { id: 4, sender: 'You', text: 'Nice! Looks good so far.', timestamp: '10:03 AM', self: true }, ], 2: [ // Messages for Bob (id: 2) { id: 5, sender: 'Bob', text: 'Project update?', timestamp: '9:30 AM' }, { id: 6, sender: 'You', text: 'Sent it this morning.', timestamp: '9:31 AM', self: true }, ], // Add more message histories for other contacts as needed }; function App() { const [contacts] = useState(initialContacts); const [selectedContactId, setSelectedContactId] = useState(contacts[0]?.id || null); // Select the first contact initially const [messages, setMessages] = useState(initialMessages); // Store all message histories const selectedContact = contacts.find(c => c.id === selectedContactId); const currentChatMessages = messages[selectedContactId] || []; const handleSelectContact = (id) => { setSelectedContactId(id); // Potentially mark messages as read here }; const handleSendMessage = (text) => { if (!selectedContactId) return; const newMessage = { id: Date.now(), // Simple unique ID for demo sender: 'You', text: text, timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), self: true, }; // Update the messages state for the current chat setMessages(prevMessages => ({ ...prevMessages, [selectedContactId]: [...(prevMessages[selectedContactId] || []), newMessage], })); // Optional: Update last message in contact list (more complex state update) }; return (

{selectedContact ? ( ) : (

Select a chat to start messaging

)}

); } export default App; :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; /* Allow browser to potentially adapt some elements */ /* Define color palette */ --bg-primary: #18191a; /* Very dark grey, almost black */ --bg-secondary: #242526; /* Dark grey */ --bg-tertiary: #3a3b3c; /* Medium grey */ --bg-hover: #4e4f50; /* Lighter grey for hover */ --bg-selected: #303846; /* Bluish grey for selection */ --text-primary: #e4e6eb; /* Light grey/off-white */ --text-secondary: #b0b3b8; /* Medium grey text */ --text-placeholder: #8a8d91; /* Darker grey for placeholders */ --accent-primary: #2d88ff; /* Bright blue */ --accent-secondary: #4b9eff; /* Lighter blue */ --accent-primary-hover: #1d77e6; /* Darker blue for hover */ --border-color: #3e4042; /* Subtle border color */ --scrollbar-thumb: #555; --scrollbar-track: var(--bg-secondary); --message-bubble-received: var(--bg-tertiary); --message-bubble-sent: var(--accent-primary); --message-text-sent: #ffffff; --message-text-received: var(--text-primary); --unread-badge-bg: var(--accent-primary); --unread-badge-text: #ffffff; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--bg-primary); color: var(--text-primary); overflow: hidden; /* Prevent body scroll */ } #root { width: 100vw; height: 100vh; margin: 0 auto; overflow: hidden; /* Prevent root scroll */ } * { box-sizing: border-box; scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* Firefox */ } /* Webkit Scrollbars */ *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; } *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 4px; border: 2px solid var(--scrollbar-track); /* Creates padding around thumb */ } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--text-primary); } ul, li { list-style: none; padding: 0; margin: 0; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; } input, textarea { font-family: inherit; border: none; outline: none; background-color: var(--bg-tertiary); color: var(--text-primary); border-radius: 18px; /* Consistent rounded inputs */ padding: 8px 14px; font-size: 0.95rem; } input::placeholder, textarea::placeholder { color: var(--text-placeholder); } .app-container { display: flex; height: 100vh; width: 100%; background-color: var(--bg-primary); overflow: hidden; /* Ensure app fills viewport without scroll */ } .placeholder-chat { flex-grow: 1; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 1.2rem; background-color: var(--bg-primary); /* Match chat window background */ } import React from 'react'; import './ContactList.css'; import Avatar from './Avatar'; // Assuming Avatar component exists // Simple search icon SVG const SearchIcon = () => ( ); function ContactList({ contacts, selectedContactId, onSelectContact }) { return (

Chats

onSelectContact(contact.id)} >
{contact.name} {contact.lastMessage}

{contact.timestamp} {contact.unread > 0 && ( {contact.unread} )}

); } export default ContactList; .contact-list-container { width: 320px; /* Slightly wider */ flex-shrink: 0; /* Prevent shrinking */ background-color: var(--bg-secondary); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100%; } .contact-list-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; /* Prevent header shrinking */ } .contact-list-header h2 { margin-bottom: 15px; font-size: 1.5rem; /* Larger title */ font-weight: 700; color: var(--text-primary); } .search-bar { display: flex; align-items: center; background-color: var(--bg-tertiary); border-radius: 18px; /* Match input fields */ padding: 6px 12px; } .search-bar svg { fill: var(--text-secondary); margin-right: 8px; } .search-bar input { flex-grow: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 0.9rem; padding: 0; /* Remove default padding */ } .search-bar input::placeholder { color: var(--text-placeholder); } .contact-list { overflow-y: auto; /* Enable scrolling for contacts */ flex-grow: 1; /* Take remaining height */ } .contact-item { display: flex; align-items: center; padding: 12px 20px; cursor: pointer; border-bottom: 1px solid var(--border-color); transition: background-color 0.15s ease-out; position: relative; /* For meta absolute positioning if needed */ } .contact-item:hover { background-color: var(--bg-hover); } .contact-item.selected { background-color: var(--bg-selected); } .contact-item:last-child { border-bottom: none; } /* Avatar is now a separate component */ .contact-item .avatar { margin-right: 12px; flex-shrink: 0; } .contact-info { flex-grow: 1; overflow: hidden; /* Prevent text overflow */ margin-right: 10px; display: flex; flex-direction: column; } .contact-name { font-size: 1rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .contact-last-message { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact-item.selected .contact-last-message { color: var(--text-primary); /* Make last message brighter when selected */ } .contact-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.75rem; color: var(--text-secondary); flex-shrink: 0; /* Prevent shrinking */ text-align: right; } .contact-timestamp { margin-bottom: 4px; white-space: nowrap; } .unread-badge { background-color: var(--unread-badge-bg); color: var(--unread-badge-text); font-size: 0.7rem; font-weight: bold; border-radius: 10px; padding: 2px 6px; min-width: 18px; /* Ensure circle shape for single digit */ height: 18px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } import React, { useRef, useEffect } from 'react'; import MessageInput from './MessageInput'; import Avatar from './Avatar'; // Assuming Avatar component exists import './ChatWindow.css'; // Placeholder icons (replace with better SVGs or an icon library) const PhoneIcon = () => ; const VideoIcon = () => ; const MoreIcon = () => ; function ChatWindow({ contact, messages, onSendMessage }) { const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; // Scroll to bottom when messages change or contact changes useEffect(() => { scrollToBottom(); }, [messages, contact]); // Dependency array includes messages and contact return (

{contact.name}

{/* Add status like "online" or "last seen" here */} Online

{messages.map((msg, index) => (

{/* Optionally show avatar for received messages */} {/* {!msg.self && } */}

{/* Optionally show sender name for group chats */} {/* {!msg.self && {msg.sender}} */}

{msg.text}

{msg.timestamp}

))} {/* Dummy div to ensure scrolling to the bottom works */}

); } export default ChatWindow; .chat-window-container { flex-grow: 1; /* Take remaining width */ display: flex; flex-direction: column; height: 100%; background-color: var(--bg-primary); /* Main chat background */ } .chat-header { padding: 10px 20px; /* Adjusted padding */ border-bottom: 1px solid var(--border-color); background-color: var(--bg-secondary); /* Match contact list bg */ display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; /* Prevent header shrinking */ height: 60px; /* Fixed header height */ } .chat-header-info { display: flex; align-items: center; } .chat-header-info .avatar { margin-right: 12px; } .chat-header-text h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.2; } .chat-status { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.2; } .chat-header-actions { display: flex; align-items: center; } .icon-button { background: none; border: none; padding: 8px; margin-left: 8px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: background-color 0.2s ease, color 0.2s ease; } .icon-button:hover { background-color: var(--bg-hover); color: var(--text-primary); } .icon-button svg { fill: currentColor; /* Use the button's color */ } .message-list { flex-grow: 1; padding: 20px 20px 10px 20px; /* Add padding bottom */ overflow-y: auto; /* Enable scrolling for messages */ display: flex; flex-direction: column; gap: 10px; /* Space between messages */ } .message-item { display: flex; max-width: 65%; /* Max width of message bubbles */ align-items: flex-end; /* Align avatar and bubble */ gap: 8px; /* Space between avatar and bubble if shown */ } .message-item.self { align-self: flex-end; } .message-item.other { align-self: flex-start; } /* If showing avatar for received messages */ /* .message-item.other .avatar { margin-bottom: 20px; } */ .message-bubble { padding: 8px 12px; border-radius: 18px; /* Consistent rounding */ position: relative; /* For timestamp positioning */ word-wrap: break-word; /* Wrap long words */ line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Subtle shadow */ } .message-item.self .message-bubble { background-color: var(--message-bubble-sent); color: var(--message-text-sent); border-bottom-right-radius: 4px; /* Tail effect */ } .message-item.other .message-bubble { background-color: var(--message-bubble-received); color: var(--message-text-received); border-bottom-left-radius: 4px; /* Tail effect */ } .message-text { margin: 0; padding-right: 50px; /* Space for timestamp */ min-width: 50px; /* Ensure bubble has min width */ font-size: 0.95rem; } .message-timestamp { font-size: 0.7rem; /* Smaller timestamp */ position: absolute; bottom: 5px; right: 10px; color: var(--text-secondary); opacity: 0.8; } .message-item.self .message-timestamp { color: rgba(255, 255, 255, 0.7); /* Lighter timestamp for self messages */ } /* Optional: Group consecutive messages */ .message-item + .message-item.self { margin-top: 2px; } .message-item + .message-item.other { margin-top: 2px; } .message-item.self + .message-item.self .message-bubble { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .message-item.other + .message-item.other .message-bubble { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } import React, { useState, useRef, useEffect } from 'react'; import './MessageInput.css'; // Send Icon SVG const SendIcon = () => ( ); // Placeholder Attach Icon const AttachIcon = () => ( ); function MessageInput({ onSendMessage }) { const [message, setMessage] = useState(''); const textareaRef = useRef(null); // Auto-resize textarea height useEffect(() => { const textarea = textareaRef.current; if (textarea) { textarea.style.height = 'auto'; // Reset height const scrollHeight = textarea.scrollHeight; // Set a max height (e.g., 120px) textarea.style.height = `${Math.min(scrollHeight, 120)}px`; } }, [message]); // Re-run when message changes const handleSend = () => { const trimmedMessage = message.trim(); if (trimmedMessage) { onSendMessage(trimmedMessage); setMessage(''); // Reset height after sending if (textareaRef.current) { textareaRef.current.style.height = 'auto'; } } }; const handleKeyPress = (event) => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); // Prevent newline on Enter handleSend(); } // Allow Shift+Enter for newline handled by default textarea behavior }; return (

setMessage(e.target.value)}
            onKeyDown={handleKeyPress} // Use onKeyDown for Enter check
            rows="1" // Start with one row, expands automatically
          />
          <button className="send-button" onClick={handleSend} disabled={!message.trim()}>
            <SendIcon />
          </button>
        </div>
      );
    }

export default MessageInput;
  </jitFile>
  <jitFile type="file" filePath="src/components/MessageInput.css">
    .message-input-container {
      display: flex;
      padding: 10px 15px; /* Vertical padding reduced slightly */
      border-top: 1px solid var(--border-color);
      background-color: var(--bg-secondary); /* Match header/sidebar */
      align-items: flex-end; /* Align items to bottom for multi-line text */
      gap: 10px; /* Space between elements */
      flex-shrink: 0; /* Prevent shrinking */
    }

.message-input {
      flex-grow: 1;
      border: none;
      padding: 10px 15px; /* Comfortable padding */
      border-radius: 18px;
      background-color: var(--bg-tertiary); /* Slightly different from container */
      color: var(--text-primary);
      font-family: inherit;
      font-size: 0.95rem;
      resize: none; /* Disable manual resize */
      overflow-y: auto; /* Allow scrolling if text gets too long */
      max-height: 120px; /* Limit max height */
      line-height: 1.4;
      outline: none;
      transition: border-color 0.2s ease;
      border: 1px solid transparent; /* Placeholder for focus border */
    }

.message-input:focus {
      border-color: var(--accent-primary); /* Highlight on focus */
    }

.message-input::placeholder {
      color: var(--text-placeholder);
    }

/* Style icon buttons similarly to header */
    .icon-button.attach-button {
      background: none;
      border: none;
      padding: 8px;
      cursor: pointer;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
      transition: background-color 0.2s ease, color 0.2s ease;
      flex-shrink: 0; /* Prevent shrinking */
      align-self: center; /* Center vertically */
      margin-bottom: 2px; /* Align better with input line */
    }

.icon-button.attach-button:hover {
      background-color: var(--bg-hover);
      color: var(--text-primary);
    }

.icon-button.attach-button svg {
       fill: currentColor;
    }

.send-button {
      background-color: var(--accent-primary);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s ease;
      padding: 0; /* Remove default padding */
      flex-shrink: 0; /* Prevent button from shrinking */
      align-self: center; /* Center vertically */
      margin-bottom: 2px; /* Align better with input line */
    }

.send-button:hover:not(:disabled) {
      background-color: var(--accent-primary-hover);
    }

.send-button:disabled {
      background-color: var(--bg-tertiary);
      cursor: default;
      opacity: 0.6;
    }

.send-button svg {
      fill: white;
    }

.send-button:disabled svg {
       fill: var(--text-secondary);
    }
  </jitFile>
  <jitFile type="file" filePath="src/components/Avatar.jsx">
    import React from 'react';
    import './Avatar.css';

// Simple function to generate a color based on a string (e.g., username)
    // This is a basic hash function, not cryptographically secure.
    const stringToColor = (str) => {
      let hash = 0;
      for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
        hash = hash & hash; // Convert to 32bit integer
      }
      let color = '#';
      for (let i = 0; i < 3; i++) {
        const value = (hash >> (i * 8)) & 0xFF;
        // Adjust range for brighter/more saturated colors if needed
        // Example: Ensure minimum brightness
        const adjustedValue = Math.max(80, Math.min(200, value)); // Clamp between 80 and 200
        color += ('00' + adjustedValue.toString(16)).substr(-2);
      }
      return color;
    };

// Function to get initials from a name
    const getInitials = (name) => {
      if (!name) return '?';
      const words = name.split(' ');
      if (words.length > 1) {
        return (words[0][0] + words[words.length - 1][0]).toUpperCase();
      }
      return name[0].toUpperCase();
    };

const Avatar = ({ seed, size = 40, imageUrl }) => {
      const avatarStyle = {
        width: `${size}px`,
        height: `${size}px`,
        fontSize: `${Math.max(12, size * 0.4)}px`, // Adjust font size based on avatar size
      };

if (imageUrl) {
        return (
          <img
            src={imageUrl}
            alt={seed || 'avatar'}
            className="avatar"
            style={avatarStyle}
          />
        );
      } else {
        const backgroundColor = stringToColor(seed || 'default');
        const initials = getInitials(seed);
        return (
          <div
            className="avatar avatar-initials"
            style={{ ...avatarStyle, backgroundColor }}
            title={seed} // Show full name on hover
          >
            {initials}
          </div>
        );
      }
    };

export default Avatar;
  </jitFile>
  <jitFile type="file" filePath="src/components/Avatar.css">
    .avatar {
      border-radius: 50%;
      display: inline-flex; /* Use inline-flex for better alignment */
      align-items: center;
      justify-content: center;
      font-weight: 600; /* Bolder initials */
      color: white;
      object-fit: cover; /* Ensure images cover the area */
      flex-shrink: 0; /* Prevent avatar from shrinking in flex layouts */
      user-select: none; /* Prevent text selection */
      overflow: hidden; /* Clip image content if needed */
    }

.avatar-initials {
      text-transform: uppercase;
      /* Add a subtle inner shadow for depth (optional) */
      /* box-shadow: inset 0 0 2px rgba(0,0,0,0.2); */
    }
  </jitFile>
  {/* No need to run setup.sh again if the dev server is already running */}
</jitProject>

These changes introduce:

1.  **State Management:** `App.jsx` now manages the selected contact and message history.
2.  **Improved Styling:** Enhanced CSS across all components using a refined color palette, better spacing, and hover effects.
3.  **Avatar Component:** A dedicated `Avatar.jsx` component that generates colored avatars with initials based on a seed string (like a username).
4.  **Contact Selection:** Clicking a contact in the list now visually highlights it and displays the corresponding (placeholder) chat messages.
5.  **Functional Message Input:** Typing and sending messages updates the chat window for the selected contact (client-side only for now). The input field auto-resizes.
6.  **Icons:** Added SVG icons for search, send, attach, call, video, and more options for a more graphical interface.
7.  **UI Refinements:** Added unread message badges, timestamps, last messages in the contact list, and refined message bubble appearance.

The UI should now look more polished and interactive.</article></body></html>