No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Quasar ChatMessage - Add icon with action

    Help
    3
    4
    1924
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • V
      vinnyc last edited by

      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 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @vinnyc last edited by

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

        1 Reply Last reply Reply Quote 0
        • V
          vinnyc last edited by

          Awesome, thank you that was it 😃

          1 Reply Last reply Reply Quote 0
          • R
            rvphilip last edited by 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.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post