Chat

Let's try to create a program to produce images of customizable chats.

This task may seem daunting at first, but as usual we can approach it by breaking it down into smaller and easier sub-problems.

Let's first find a way to model the message: we need to distinguish sent messages (which will be shown with a green background) and received ones (shown with a white background).

We are going to model each message with a tuple, as shown here:

Our final goal will be to create a function with the following signature: chat(messages: list[tuple[bool, str]]) -> Graphic that will generate a graphic given a list of tuples representing the messages.

The next important sub-problem we need to address is the creation of the graphic for a single chat bubble. These are some of the things you have to take into account:

• The bubble needs to be either white or green depending on the sender.
• The bubble should be wide enough to contain the text plus some margin on the sides.
• Its corners should be rounded.
• The position of the little triangle on the top also depends on the sender.

We suggest to delegate the creation of the top margin and the bottom margin to a function called "margin" and then piece them together with the triangle and the central part of the bubble that contains the text (with margins on the sides) in the "chat_bubble" function.

Heading

As you can see in the image given as an example, the text messages are separated from eachother by some space. Your next sub-task is to find a way to place multiple images one above the other with a gap in between. The code you find below contains some hints. You can solve things in a different way than the suggested one if you prefere, just remember to keep your sub-solutions independent from one another.

Congratulations you have reached the last step of this exercise! Now that you have solved all of the sub-tasks, you have to find a way to combine them to get to the final solution. As always in programming, there are different ways to do it. In the following block of code we will hint to one way these sub-solutions could be combined:

Now you can edit the code cell below to play with your program!