Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/log-portfolio/llms.txt

Use this file to discover all available pages before exploring further.

The MSN Messenger component (X) turns your client testimonials into a live chat conversation. Messages pop in one by one as if someone is actually typing them in real time. Visitors can also join the conversation themselves — typing in the input box and pressing Enter adds their message to the thread as Me.

​
Visual Design

The window is a faithful MSN Messenger replica divided into three zones: Contact header — a blue gradient strip (bg-gradient-to-r from-blue-100 to-blue-50) containing a 40 × 40 avatar placeholder (gray bordered box with a User icon) and a contact block showing Testimonials (3 Online) in bold and the classic safety disclaimer underneath: Never give out your password or credit card number in an instant message conversation. Message area — a white scrollable flex-1 region. Each message renders the sender’s name in bold followed by says:, then the message text indented below. Sender names are text-blue-700 for others and text-gray-600 for Me. A dummy <div ref={scrollRef} /> sits at the very bottom so new messages can auto-scroll into view. Input area — a 96 px-tall strip with a win-border-inset <textarea> and a Send button (showing the Send icon above the label). Pressing Enter without Shift submits the form.

​
Auto-Play Logic

Messages replay from the p array automatically on mount via a setInterval: 
useEffect(() => {
  let index = 1; // first message already shown as initial state
  const interval = setInterval(() => {
    if (index < messages.length) {
      setDisplayed(prev => [...prev, messages[index]]);
      index++;
    } else {
      clearInterval(interval);
    }
  }, 2000); // one new message every 2 seconds

  return () => clearInterval(interval);
}, []);
The state is initialised with the first message already visible (useState(p.slice(0, 1))), so the window never opens blank. The interval stops itself once all messages have been shown — it does not loop.

​
Auto-Scroll

Every time the displayed-messages state updates, a second useEffect fires: 
useEffect(() => {
  scrollRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [displayed]);
scrollRef is attached to the empty sentinel <div> at the bottom of the message list. This keeps the latest message always visible without the user needing to scroll manually.

​
Default Testimonials

The p array ships with four messages:
#SenderMessageTime
1Client_99Hey! The new website looks amazing.10:02 AM
2MeThanks! I added extra marquee tags just for you.10:03 AM
3Client_99lol perfect. Ship it.10:04 AM
4Manager_BobDid you finish the CSS updates?10:15 AM

​
Live Input

Visitors can type in the <textarea> and send their own messages:
  • Pressing Enter (without Shift) submits the form via onKeyDown
  • Clicking the Send button submits via onSubmit
  • The new message is appended to state as { sender: "Me", text: input, time: currentTime }
  • currentTime is generated with new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
  • The textarea is cleared after each send

​
Customizing Testimonials

1

Find the messages array

Open components/Desktop.js and locate the p array defined just above the X component. It is a plain JavaScript array of objects.
2

Edit the messages

Each entry follows this shape:
{
  sender: "Client_99",                    // displayed as the sender name
  text: "Hey! The new website looks amazing.", // message body
  time: "10:02 AM"                        // timestamp string
}
Replace the four sample messages with real client feedback, endorsements, or anything else you want to highlight. Keep sender strings short — they render inline before says:.
3

Set the initial visible message

The component initialises with useState(p.slice(0, 1)). If you want more messages visible on first open (before the auto-play starts), change 1 to the number of messages to show immediately.
4

Adjust playback speed

Change the 2000 in setInterval(..., 2000) to make messages appear faster or slower. The value is in milliseconds.
The auto-play runs only once per mount. If a visitor closes and reopens the Messenger window, the messages will replay from the beginning because the component is re-mounted with fresh state.
Use "Me" as the sender in the p array to pre-script your own replies in the conversation thread — this creates a natural back-and-forth dialogue between you and your clients.

Build docs developers (and LLMs) love

Get started for freeTalk to us