Chat Comments Wordpress plugin v2.2

Chat Comments Plugin

Recent Fixes (Bubble Text / Layout)

These changes target the chat message bubble element (span.cc-chat__bubble-text) and improve how Arabic and other text is displayed.

Problem

Chat bubble text looked uneven because of:

• Extra whitespace from PHP/JS source (\n, \t, indentation)
• white-space: pre-wrap preserving that whitespace
• display: block making bubbles stretch wider than the text
• overflow-wrap: anywhere breaking words unnaturally

Solution Applied

Area	Change
CSS — .cc-chat__bubble-text	white-space: normal (replaces pre-wrap)
	display: inline-block with width: auto and max-width: 100%
	overflow-wrap: break-word and word-break: normal
	text-align: start (RTL-aware; aligns right on Arabic sites)
CSS — .cc-chat__message	overflow-wrap: break-word (replaces anywhere)
JavaScript	String(content ?? '').trim() in appendMessage() before escaping
PHP template	Welcome message on one line + trim( $cc_welcome )

Result

• Bubbles shrink to fit the actual text
• No extra gaps from source-code whitespace
• Words break more naturally
• Works on desktop and mobile (all viewports)

---

Complete Plugin Features

Core Concept

Chat Comments adds a Messenger-style floating chat widget to WordPress. Visitor messages are stored as native WordPress comments (comment_type = chat_message), not in a custom table — so they work with moderation, spam plugins, and the standard Comments screen.

---

Frontend (Visitor)

Feature	Description
Floating chat bubble	Fixed bubble on every page via wp_footer
Chat window	Open/close panel with message history, name field, textarea, and send button
Welcome message	Configurable greeting shown when the chat opens
Message history	Loads approved messages for the current page/post
Live updates	Polling for new admin replies (with backoff when the tab is hidden)
Per-page context	Messages are tied to the current post/page/product
Dismiss bubble	Visitor can hide the bubble for the browser session (sessionStorage)
RTL support	Logical CSS properties (margin-inline-*, text-align: start) for Arabic/RTL sites
Accessibility	ARIA attributes, keyboard focus, role="log" for messages
Honeypot field	Hidden spam trap in the form
No jQuery	Vanilla JS (ES2020+) + CSS only; no build step

---

Backend (Admin)

Feature	Description
Settings page	Settings → Chat Comments
Bubble position	Left or right
Bubble color	Custom accent color
Welcome text	Custom greeting message
Admin display name	Name shown on admin replies
Comment status	Immediate publish or pending review
Rate limit	Max messages per IP per hour
Bottom offset	Gap above fixed footers/mobile menus
WooCommerce toggle	Enable/disable product-page integration
Chat Messages tab	Comments → Chat Messages filtered list
Inline reply	Reply from the admin Chat Messages screen
Email notification	Email on new chat message
Standard moderation	Approve/spam/trash via native Comments UI

---

REST API (/wp-json/chat-comments/v1/)

Endpoint	Method	Purpose
/send	POST	Visitor sends a message (nonce + rate limit)
/messages	GET	Fetch approved messages for a post
/reply	POST	Admin reply (capability-gated)

---

Security & Privacy

• Nonces on all write endpoints
• Input sanitization (sanitize_textarea_field, sanitize_text_field, absint)
• Output escaping (esc_html, wp_kses_post in API responses)
• Rate limiting via hashed IP (daily-rotating salt; raw IPs never stored)
• Spam integration via wp_new_comment() (Akismet-compatible)
• Honeypot anti-bot field
• Capability checks on admin endpoints (moderate_comments)

---

WooCommerce Integration

• Detects product pages automatically
• Attaches messages to the product post
• Optional per-product “ask a question” context
• Gated by setting + class_exists('WooCommerce')

---

Internationalization

• Text domain: chat-comments
• All user-facing strings translatable (__(), _e(), wp.i18n)
• Arabic translation included (.po / .mo)
• Noto Kufi Arabic in the font stack

---

Technical Requirements

Requirement	Version
WordPress	6.0+
PHP	7.4+
Themes	Any (scoped .cc-chat-* selectors)
Dependencies	None (no Composer, npm, or CDN)

---

Uninstall Behavior

• On plugin deletion: removes plugin options only
• Comments are preserved — no data loss

---

File Structure

chat-comments/
├── chat-comments.php          # Main plugin bootstrap
├── uninstall.php              # Option cleanup on delete
├── includes/
│   ├── class-chat-api.php     # REST endpoints + rate limiter
│   ├── class-chat-admin.php   # Settings + admin UI + email
│   ├── class-chat-frontend.php# Scripts, styles, widget render
│   ├── class-chat-install.php # Activation + defaults
│   └── class-chat-woocommerce.php
├── assets/
│   ├── js/chat-widget.js      # Vanilla JS widget
│   ├── css/chat-widget.css    # Scoped styles
│   └── img/chat-icon.svg
├── templates/
│   └── chat-widget.php        # Bubble + window HTML
└── languages/
    └── chat-comments.pot      # Translation template

---

Current Status

Version: v0.2.2 — Ready for QA
All 6 phases complete: Core plumbing → Frontend widget → History & replies → Admin settings → WooCommerce → Hardening & release

If you want this as a readme.txt section or marketing copy, say which format you prefer.

Chat Comments Wordpress plugin v1

Chat Comments adds a floating chat bubble to the bottom corner of every page. Visitors type a message, hit send, and the message is saved as a native WordPress comment on the post they were viewing. Site admins reply from the standard WordPress Comments screen, the dedicated Comments > Chat Messages tab, or via the REST API — and the reply shows up live in the visitor's chat window.