Show Image and Text Together in a card

[peter1492]

Actually, this is not an issue. I just need help with something and don't know where and whom to ask. I am new to rasa and react both.

I want to combine both image and text into a single card with text after image

https://i.ibb.co/BwjgB7W/Capture2.png

for example, I want to convert the above screenshot to the following one

https://i.ibb.co/HpZybgK/Capture3.png

I have installed rasa and cloned this repo and everything is working fine. I tried doing some changes in domain.yml in the rasa directory and "ConnectedChatroom.js" in this repo but couldn't understand how to do it. If anyone could help, please?

[hotzenklotz]

Our chatroom supports Markdown formatting for styling your messages. I believe it should be able to include images using the markdown image format. (https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#images) E.g.

# My Message Header
I have a message **with* many *different* markdown formatted elements:

- This 
- includes
- lists.

And it should rendered inline images ![image title](http://www.image.com/pics/Caputre.png) . 

[peter1492]

ok, thank you for that. I will just study it more, and try it, and then inform here.

[peter1492]

What I found is, there is "Message.js", in that file, in line 92 there is

case "image":
      return (
        <li className={`chat ${isBot ? "left" : "right"} chat-img`}>
          <img src={message.image} alt="" />
        </li>
      );

If I change here anything, related to styling, it will reflect. for example, left or right positioning.

But I am unable to understand, how can I get text also inside this case-statement, so that I can combine them both in a single card type UI

Right now what is happening is, the text and images are processed separately in 2 case-statements

[hotzenklotz]

You do NOT have to changes anything. Markdown formatting works out of the box. Just add a markdown formatted message to your Rasa domain.ymlfile (or to your Rasa actions).

[peter1492]

Correct, It worked. Thank You.