How can i put the text sent in a chat inside the typical chat app speech bubble?

Maybe it is impossible but now i have a functional chat simulation screen that sends text to a box (not needing internet connection beacuse is to simulate that user is writing to somebody) like if somebody is talking alone in a chat, but it is very simple and i would like to know how to put the text inside the classical speech buuble like in every chat app. I know may be imposible, but thankss :))

This are the simulation chat app blocks:

An example:

Other example that maybe can help you:
METRIC RAT AI2 - Dynamic Card Style Listview

Wow thanksss

Hi! I've been about 5h trying to make it work but i couldn't, however thanks for your help!

What are you stuck with? Maybe someone can help you if you explain the problem you are having.

My programming knowledge is basic so im not able to understand the AI2ChatView code enought to combine it with my current blocks.

Well, basically what he is doing in that example is to build (dynamically) a balloon for each message. He starts by a VerticalArrangement (red one) and then he is creating inside the other components (VAs, HAs, labels...).

This components have the same properties than the normal ones but you have to Create them (with Create block) indicating where must be created, the type of the element and an identifier. And then you can set their properties with the SetProperty block (Width, height, align..).

A good trick to understand each part can be to color each component (SetProperty BackgroundColor) and also play removing and adding the different components.

So you can see something like this...and distinguish each part:

He is changing the alignment to left or right each time there is a user change.

1 Like

You might also look here for some ideas...

1 Like

Ok thank you very much you are helping me so much!! I'll try it

Hi! iv been trying to make it work but still i cant, which is the block order to make it appear and wich block is the one to set every element position? thankss

The order is the order than you can see in the example.

This is the first one:

"in" indicates where are you creating this component...in this case inside other component (a VA called vsaMessageDisplay).
"componentName" is the component you are creating. In this case you are creating a VerticalArrangement
"id" in the unique identifier of the component.

Once it is created, you can see in the example how it sets the different properties it needs..Height, Width and AlignHorizontal.

The second component is:

"in" indicates where it will be created. In this case it will be created inside the before one (it is using a block to call the component with the id used in the before component)
"componentName" is a label in this case
"id" is topSpacer+id used in the before one (this is a trick to a good implementation and understanding...the first component is for example "1" and the child components are "topSpacer1", "innerVA1"...)

Then it sets the Properties...and so on with the rest of components...maybe you don't need all of them...but this is a good example to understand how it works and to adapt it to your needs.