Thanks to @eoinparkinson who suggested this as an idea for a tutorial
The UI for this app is very simple. The
OutputColumn is initially empty, with vertical alignment set to flex end. This is eventually where all the chat bubble will go.
Under that is the
inputRow which is used to place the test input and the send button side-by-side.
Finally, outside all of this, are two labels;
LeftLabel. Although I’ve shown them in the screenshot below, their visibility is set to false. It’s this fact that allows new messages to “appear” in the chat as it progresses.
Because this is a demo with just a single user, we’ll use a variable called
isMe to mimic who is talking and when.
To expand this example and share it with others would would need to manually keep track of who is talking.
If I’m talking…
The first condition we what to handle is if we are talking. Using the
if block we check if the
isMe variable is true. If it is true then we can clone the right label, using the
clone block. Using the
as last in option will add the new message to the bottom of the chat, which is how most messengers work.
If it’s not me talking …
If we’re not the person talking then it must be someone else. Click on the blue gear icon (the mutator) to add an
else condition to the bottom of our block.
Doing the opposite.
Finally, if someone else is talking then we display the left label instead.
isMe variable and clearing out the TextInput tidies things up for the next message.
Remix this app
If you want to remix this project for yourself, please do by clicking on this link: