feat: chat widget redesign, branding & sound/timestamp controls

[HardeepAsrani]

Pro PR: https://github.com/Codeinwp/hyve/pull/213

Modernizes the chat widget and adds the customization options requested across several issues. Branding/preview bits that are Pro-only live in the companion Hyve PR (Codeinwp/hyve), which links back here.

What's included

Redesigned chat widget

• New header with an assistant avatar, name, and an "Online" status dot.
• Modern message bubbles, a pill-style input with a circular send button, a refined floating launcher, and a smooth open animation.
• Default launcher icon is now a bundled chat-bubble SVG (inlined server-side, so there's no icon "flash" on load) instead of an emoji.

Appearance settings are now available for free

• The Appearance tab is no longer a single Pro gate. The page is accessible on the free plugin, with the Pro-only controls (name, icon, colors) marked individually as Premium instead of the whole section.
• Free Appearance controls: Chat Position and Message Timestamp (see below).

Chat position

• A "Chat Position" Left/Right toggle in Appearance settings moves the chat button and window to either side of the screen (Right by default, matching current behavior). Free.

Live Customization Preview (Codeinwp/hyve#207 and Codeinwp/hyve#214)

• You can see the live preview of your changes in the Appearance settings of Hyve.

Suggested questions (Codeinwp/hyve#190)

• Restyled as clear, filled chip buttons so it's obvious they're clickable.

Sound controls (Codeinwp/hyve#161)

• Global "Chat Sound" Enable/Disable toggle in General settings (applies to everyone).
• When enabled, each visitor gets a Mute/Unmute control in the chat menu, remembered in their browser.
• The open/close click sound has been removed entirely.

Message timestamp (part of Codeinwp/hyve#179)

• A "Message Timestamp" Show/Hide toggle in Appearance settings. Free.

Inline chat block fix (Codeinwp/hyve#171)

• The inline block now shows the welcome message and suggested questions on first load (previously it appeared empty until a conversation was started and cleared).

Readability/theming fixes

• Typing dots, suggestion labels, and the chat menu stay legible even when the chosen colors are similar (light-on-light / dark-on-dark).
• The chat menu now picks up the configured colors instead of staying fixed.

Closes Codeinwp/hyve#171
Closes Codeinwp/hyve#161
Closes Codeinwp/hyve#190
Closes Codeinwp/hyve#179
Closes Codeinwp/hyve#105
Closes Codeinwp/hyve#207
Closes Codeinwp/hyve#214

QA

Test on a page where the chatbot is active (knowledge base has content). The Pro PR adds the Pro-only Appearance controls (name, icon, colors); this PR can be tested with default styling plus the free Appearance controls.

Chat widget (frontend)

1. Open the chat from the floating button — confirm the new look: header with avatar + name + green "Online" dot, rounded bubbles, pill input.
2. On first open you should see the welcome message followed by the suggested questions as clickable chip buttons. Click one — it sends as your message.
3. The launcher shows a chat-bubble icon (no emoji), and there's no flicker on page load.

Inline block (Codeinwp/hyve#171)
4. Add the "Chat Inline" block to a page and view it logged-out / in a fresh browser. On first load it should already show the welcome message + suggested questions (not an empty box).

Sound (Codeinwp/hyve#161)
5. General settings → set Chat Sound to Enable. On the frontend, sending and receiving a message plays a soft ping; opening/closing the chat is silent.
6. Open the chat menu (⋯) → Mute Sound → confirm no more sounds, and that it stays muted after a reload. Unmute restores it.
7. Set Chat Sound to Disable → no sounds at all, and the per-visitor Mute option disappears from the menu.

Chat position (Appearance)
8. Appearance settings → set Chat Position to Left → the chat button and window move to the bottom-left of the screen; set back to Right → they return to the bottom-right.

Timestamp (part of Codeinwp/hyve#179, Appearance)
9. Appearance settings → Message Timestamp = Hide → messages show no time. Set to Show → the time appears under each message.

Color readability
10. (Using the Pro Appearance colors) set the chat, assistant, user, and icon colors to similar shades — first all light, then all dark. Confirm the typing dots, the suggestion button labels, and the ⋯ menu remain readable, and that the menu matches the chosen colors.

[github-actions]

Plugin build for 8d55ae1 is ready 🛎️!

• Download Plugin - Download

[HardeepAsrani]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Merge conflicts resolved in commit 5d25be9.

inc/Main.php — two conflicts:

1. Default settings: kept both sets — our sound_enabled, show_timestamp, chat_position and development's display_mode, display_rules.
2. enqueue_assets(): dropped development's duplicate wp_localize_script block (our get_frontend_data() call already handles that), kept $should_display_chat = $this->should_display_chat() as the enqueue gate. Also updated get_frontend_data() to use should_display_chat() for isEnabled so the display rules are reflected in the frontend data.

src/frontend/App.js — two conflicts:

1. initialize(): kept our inline welcome handling (if (this.isInline) { this.maybeShowWelcome(); }), which is equivalent to development's extracted showInlineWelcome() but uses our existing maybeShowWelcome().
2. renderUI(): dropped the stale duplicate inline-chat lookup code from HEAD (lines 1029–1037 already handle it correctly).