Chat thread

Use lcsChatThread for a conversation on a case, a help desk chat, the back-and-forth with an agent built in Copilot Studio, or any screen where two sides take turns. The usual build is a gallery of labels that all look the same; this component gives the conversation its shape:

• Bubbles from a table of Key, Text, From, When, Status and Initials: yours (From equal to Me) on the right in your accent colour, theirs on the left in grey with a circle of initials on the first message of each run; the bubbles are well rounded, with a nearly square bottom corner on the sender's side for the first bubble of a run;
• Delivery state under your messages: sent, delivered, read, or not sent with Retry, which raises OnRetry(Key, Text);
• A typing indicator of bouncing dots, with a name, for when the other side is typing or an agent is thinking;
• A composer with a Send button that raises OnSend(Text) and clears itself; SetDraft for a suggested reply, Draft out while they type;
• Newest at the bottom as chats read, or NewestFirst so ScrollToLatest always reaches the latest.

The examples call it chatCase on a case screen with the messages in a collection.

Load the messages and send one:

// Screen.OnVisible
ClearCollect(colChat, ShowColumns(Filter('Case Messages', Case.Case = varCase.Case), "Key", "Text", "From", "When", "Status", "Initials"))

// chatCase.Messages
colChat

// chatCase.OnSend
With(
    {key: GUID()},
    Collect(colChat, {Key: Text(key), Text: Text, From: "me", When: Now(), Status: "sent", Initials: ""});
    IfError(
        Patch('Case Messages', Defaults('Case Messages'), {Key: Text(key), Text: Text, Case: varCase, When: Now()}),
        Patch(colChat, LookUp(colChat, Key = Text(key)), {Status: "failed"}),
        Patch(colChat, LookUp(colChat, Key = Text(key)), {Status: "delivered"})
    )
)

Retry a message that didn't send:

// chatCase.OnRetry
Patch(colChat, LookUp(colChat, Key = Key), {Status: "sent"});
IfError(
    Patch('Case Messages', Defaults('Case Messages'), {Key: Key, Text: Text, Case: varCase, When: Now()}),
    Patch(colChat, LookUp(colChat, Key = Key), {Status: "failed"}),
    Patch(colChat, LookUp(colChat, Key = Key), {Status: "delivered"})
)

An agent's reply, with the dots while it thinks:

// chatCase.OnSend, talking to a Copilot Studio agent through a flow
Collect(colChat, {Key: Text(GUID()), Text: Text, From: "me", When: Now(), Status: "read", Initials: ""});
Set(varThinking, true);
Collect(colChat, {Key: Text(GUID()), Text: AskAgent.Run(Text).reply, From: "Agent", When: Now(), Status: "", Initials: "AI"});
Set(varThinking, false)

// chatCase.IsTyping and chatCase.TypingName
varThinking
"Agent"

A suggested reply:

// btnThanks.OnSelect
chatCase.SetDraft("Thanks, that's sorted.")

• Columns. Messages wants exactly Key, Text, From, When, Status and Initials; build them with ShowColumns and RenameColumns, or a ForAll, as in Use it. When must be a date and time.
• Who is "me". Set Me to what your From column holds for the signed-in person: User().FullName, or "me" if you write that when you collect.
• Keep the collection small. A case's messages are few; for a long-running chat, load the last hundred and add a "Load earlier" button of your own that collects more.

• The messages are a group named "Conversation". Each message's text and its time and state are real text, read in order; a message that wasn't sent has a Retry button named with the message. The composer is a text box named by its placeholder, and Send is a button that is disabled until there's text.
• Your messages and theirs differ by side and colour, and by the state line under yours, so the thread reads correctly without colour.
• With Motion on, the latest bubble pops in and the typing dots bounce. None plays for people who've asked their device for reduced motion, and Motion off draws them at once.

• The messages area is MaxHeight tall even with a few messages: Studio can't size a component from what's inside it (it falls back to a default size), so longer threads scroll inside it rather than the component growing.
• Bubble width is estimated from the message's length, because a formula can't measure text; a message of many short lines gets a wider bubble than it needs. Rows grow to fit the text.
• Power Apps can't scroll a gallery to its end by formula, so with the newest message at the bottom, people scroll to it; ScrollToLatest goes to the first row, which is the latest only with NewestFirst on. Keep MaxHeight generous, or put the component on a scrollable screen.
• Enter doesn't send: the modern text input raises its change event when focus leaves it, not on Enter, so Send is the button.
• Messages are plain text; links and formatting don't render.

• 0.1.0: first version: bubbles from a table, delivery state with Retry, the typing indicator, the composer with OnSend, SetDraft, ClearDraft and ScrollToLatest, the outputs, light and dark, the bubble and dots motion.