Quasar ChatMessage - Add icon with action
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.
metalsadman last edited by
@vinnyc just a rough example to give you an idea https://codepen.io/metalsadman/pen/BaLLOvM?editors=1010
Awesome, thank you that was it
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:
<div class=“q-pa-md row justify-center”>
<div style=“width: 100%; max-width: 400px”>
v-for="(msg,i) in messages"
:sent=“msg.status === ‘sent’”
<template v-for="(text, j) in msg.text" :key=“j”>
<q-icon :name=“msg.action.icon” @click=“someAction(msg.action.name)” :color=“msg.action.color”></q-icon>
<br v-if=“text.length > j”>
This is a Blockquote
tokenand a link
Blockquotes can also be nested…
…by using additional greater-than signs right next to each other…
…or with spaces between arrows.
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.