Chatroom
Chatroom
This page is for the Chatroom — from here you can manage chats and channels for your application .
In this Chatroom you can:
- Create new channels
- Edit or delete channels
- Set channel slowmode (cooldown)
- View messages (from a single channel or all channels)
- Send admin replies (optionally targeting a specific username)
- Mute client users (minutes / hours / days / forever)
- Clear all messages from the selected channel
1) Header Section (Top Bar)
Chatroom Title
At the top you will see the heading:
Chatroom
and the subtitle:
Manage chats and channels for
Buttons
On the right side there are two actions:
- Clear Channel msg — Deletes all messages in the selected channel
- New Channel — Opens a modal to create a new channel
Clear Channel msg
When you click Clear Channel msg, a confirmation popup appears:
“Clear ALL messages in this channel?”
After confirmation:
- All messages in the selected channel are deleted
- A toast notification appears on the page (success or error)
New Channel
Clicking the New Channel button opens the Create Channel modal.
2) Toast Notifications
This page includes toast.php, which means a popup toast appears after every action:
- Channel created
- Channel updated
- Channel deleted
- Messages cleared
- User muted
- Error messages
3) Chat App Layout
The main layout has two parts:
- Left Sidebar — Channels list
- Right Chat View — Messages and input bar
4) Sidebar: Channels List
The left sidebar contains the heading:
Channels
Channel Buttons
Each channel appears as a button:
- Channel name (example: #general)
- Delay / Slowmode (example: Delay: 5s)
The currently opened channel is highlighted as active.
Channel Actions (Edit / Delete)
Each channel has two icons:
- Edit (pencil) — Opens the channel edit modal
- Delete (trash) — Deletes the channel (with confirmation)
Edit Channel
Clicking the pencil icon calls the function:
openEdit(channel_id, name, cooldown_seconds)
This automatically converts cooldown seconds into a readable unit (seconds/minutes/hours) and fills the Edit modal fields.
Delete Channel
Clicking the trash icon shows a confirmation:
“Delete channel?”
After confirmation, the channel will be deleted.
No Channels
If there are no channels, the sidebar displays “No channels”.
5) Chat View: Messages Area
Mobile Channel Dropdown
On mobile devices, a dropdown is available to switch channels:
- Select a channel from the dropdown
- The page redirects to:
win/app/?page=chat&channel_id=ID
Desktop Heading
On desktop, the right side displays the heading “Messages”.
- If a channel is selected → “Showing messages for active channel”
- If no channel is selected → “Recent activity across all channels”
6) Messages List (Message Container)
No Messages
If there are no messages, a message appears in the center:
Waiting for messages…
Message Group (Admin vs Client)
Each message appears in a chat bubble.
- Admin message appears with a different style (admin class)
- Client message appears with normal styling
Message Meta (Top Line)
Each message includes meta information above it:
- Sender Name (admins appear in yellow/warning style)
- Channel Tag (client messages may show #channel)
- Time (HH:MM format)
7) Mute Badge + Timer
If a user is muted, a small badge appears in the message meta (red tone):
- The badge displays a timer: MM:SS
Badge attributes:
- data-remaining = remaining seconds
- data-until = muted_until datetime
The JS function startMuteCountdown() reduces the timer every second:
- The timer updates continuously
- When the remaining time reaches 0 → the badge is removed
8) Client Message Actions: Mute Menu
Client messages have a three dots icon on the right side of the bubble.
Clicking it opens the Mute action menu.
Mute User Form
Inside the menu you can configure a mute:
- Mute Amount (number input)
- Mute Unit (Minutes / Hours / Days / Forever)
Buttons:
- Close — closes the menu
- Mute — mutes the user
After submission, the backend mutes the user and a success/error toast appears.
9) Input Bar: Admin Reply
At the bottom there is an admin reply bar.
Target Username (Optional)
A small input field appears above the message box:
Target username (optional)
If you enter a username, the reply can be targeted to that specific user (depending on your backend logic).
Message Box
You can type a message in the textarea:
- Placeholder: “Type a message...”
- Required field
The send button includes an arrow icon.
Enter to Send
While typing in the textarea:
- Press Enter to send the message
- Press Shift + Enter to add a new line
10) Auto Scroll + Auto Expand
Auto Scroll
When the page loads, the messages container automatically scrolls to the bottom so the latest message is visible.
The script scrolls multiple times (50ms, 200ms, 500ms) to ensure correct scrolling even with rendering delays.
Auto Expand Textarea
As you type in the textarea, its height automatically expands so the text does not get cut off.
11) Create Channel Modal
Clicking the New Channel button opens this modal:
Create Channel
Fields
- Name — channel name (General, Support, etc.)
- Slowmode — cooldown amount + unit (seconds/minutes/hours)
Buttons:
- Cancel
- Create — saves the channel
12) Edit Channel Modal
Clicking the pencil icon opens this modal:
Edit Channel
Fields
- Name
- Slowmode (amount + unit)
Buttons:
- Cancel
- Save — saves the changes
Note: The openEdit() function converts cooldown seconds into amount + unit and automatically fills the fields.