The Chat Window Widget

CreatiCode

Introduction

Chatting is a very common way of communicating with others. The chat window widget can be used to create many useful applications, such as chatting with friends, chatting with chatbots, chatting with customer service, etc.

Add a Chat Window

To add a new chat window to the stage, you can use the “add chat window” block from the “widget” category:

 add chat window x (0) y (0) width (480) height (360) input rows (1) background (#f0f0f0) border (#0035bd) name [chat1]

It will add a chat window like this, with an “input box” at the bottom, and a “chat history” at the top:

Here are the explanations of all the inputs:

x and y: The position of the center of the chat window. If x = 0 and y = 0, then the chat window is centered at the center of the stage.
width and height: The size of the chat window. To fully occupy the entire stage, use width = 480 and height = 360.
number of input rows: how many rows are shown in the input box at the bottom. Usually you can set this to 1 row. If the user would be writing a lot in the input box, then you can display more rows.
background and border colors
name: The name of this chat window, which will be used to refer to this chat window later.

Append Chat Message

To append a new message into the chat history (below previous messages), you can use the following block:

append to chat (chat1 v) message [Hello!] as [me] icon (USER v) align (Left v) text size (14) color (#ffffff) background (#541725)

The message will look like this:

The parameters are:

chat window name: The name of the chat window
message: the content of the new message
as: the name displayed next to the message
icon: the icon displayed next to the message. You can choose “USER” or “ROBOT”, or you can pick any costume of this sprite.
alignment: whether to show the message to the left or right.
text size and color: the size and color of the text inside the speech bubble.
background color: background color of the speech bubble.

The Click Event

When the user clicks the green “send” button at the bottom right, the content of the input box is cleared, but it is not appended to the chat history automatically. Instead, this message is stored as the “value” of the chat window widget. To handle this click event, you need to use this block:

when widget (chat1 v) clicked

To keep it simple, when the user presses the Enter key, we will assume the “send” button has been clicked, so you can use the above block to handle both the mouse click and Enter key.

For example, to append the user input to the chat history, you can use the following blocks. Note that the “value of widget” block is used as the message input directly.

when widget (chat1 v) clicked
    append to chat (chat1 v) message (value of widget (chat1 v)) as [me] icon (USER v) align (Left v) text size (14) color (#ffffff) background (#541725)
end

This would allow us to keep adding messages:

Update Last Chat Message

In some chat applications, you may need to change the content of the last message in the chat history. For example, when the user is chatting with a chatbot, the chatbot’s response may come in small chunks. In this case, we can append the initial message from the chatbot, and then keep updating that message as we receive more additions to it.

To update the last chat message, use the following block:

update last chat message to ( ) for chat (chat1 v)

The first input is the new message content, which will replace the content of the last message in the chat history.

The second input is the name of the chat window widget.

For example, this is a chat with a chatbot where we keep updating the last message from the chatbot as it speaks to us: