Quasar ChatMessage - Add icon with action

[vinnyc]

Hi folks, this framework is the best thing since PB&J sandwiches, really I have a blast every time.

So I’m writing a mock for a chatbot, and using q-message is just a breeze. However I bumped into an issue. At the end of each message I need to add an icon (using any of the typography available) to allow users to play the message via audio. It looks that vue components can’t be added as text to the q-chat component. Is there an way to append other components as text?

The slots did not work, because the default one creates a new line, and I would really like to have that floating after the last character of the payload.

Any directions would be awesome.

Cheers

[metalsadman]

@vinnyc just a rough example to give you an idea https://codepen.io/metalsadman/pen/BaLLOvM?editors=1010

[vinnyc]

Awesome, thank you that was it

[rvphilip]

Hi, I think this is a normal issue across the development of bots.
You will have to avoid creating new slots and integrate the code in the existing slots. But the code by default creates a new slot I guess. If that is the issue you could try out the code below:
<!–
Forked from:
https://quasar.dev/vue-components/chat#Example--Default-slot
–>
<div id=“q-app”>
<div class=“q-pa-md row justify-center”>
<div style=“width: 100%; max-width: 400px”>
<q-chat-message
v-for="(msg,i) in messages"
:name=“msg.name”
:avatar=“msg.avatar”
:stamp=“msg.stamp”
:sent=“msg.status === ‘sent’”
:bg-color=“msg.bgColor”
:text-color=“msg.textColor”
:key=“i”
>
<template v-for="(text, j) in msg.text" :key=“j”>
{{text}} 
<q-icon :name=“msg.action.icon” @click=“someAction(msg.action.name)” :color=“msg.action.color”></q-icon>
<br v-if=“text.length > j”>
<q-markdown>

{{text}}

This is a Blockquote
with a token and a link

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other…

…or with spaces between arrows.
</q-markdown>
</template>
</q-chat-message>
</div>
</div>
</div>
This is just for Quasar chatmessage option and not for other platforms. If you are interested in other platforms it would be better if you take help from any chatbot development services as they might provide you a quik and simple solution. Also this stage is quite simple and further integrating complex cognitive functionalities could be quite challenging.