QChatMessage default slot behavior for array of messages

[lyle45]

Hi,

I couldn't find in the docs an example of how to make chat component default slot behave the same way it does when used as text prop. text prop can take an array of messages and display then in conjunction. How can this effect be achieved using slots? if default slot is treated as array (v-for on root element) then it just stuffs them together into the same message.
This can be necessary for multiple reasons like markdown parsing etc

e.g.

      <q-chat-message
        name="me"
        avatar="https://cdn.quasar.dev/img/avatar3.jpg"
        stamp="7 minutes ago"
        sent
        bg-color="amber-7"
     >
       <q-markdown :src="someMarkdown"/>
     </q-chat-message>

Taken from
https://forum.quasar-framework.org/topic/4341/markdown-and-chat/6
where no answer is given exactly

example case here

https://codepen.io/lyle45/pen/ZELgJqB

[metalsadman]

@lyle45

where no answer is given exactly

what do you mean no answer? when you quoted the answer from the forum question. at least when asking, show us what you have tried first.

v-for'ing a q-chat is no different from v-for'ing other vue components, here using that snippet answered in that forum plus example from docs and array of objects for messages.

https://codepen.io/metalsadman/pen/BaLLOvM?editors=1010.

[lyle45]

@metalsadman If current behavior isn't supported (which I assume it can't if just using the default slot), then it would be pretty easy supporting it be creating a new slot scope for #text slot and have it receive one text message from the array passed through the text prop do whatever you want with. probably should pass entire message object aswell for higher customizability

[metalsadman]

@lyle45 what you mean not supported? perhaps make a codepen of what exactly you have tried. you do see in my codepen i've used the text in the slot {{text}} it even has many stuff inside it that are "customized", it uses v-for, and etc...

though if you really feel like it's lacking and should serve what your use-case is, then file a PR or a feature request.

[lyle45]

@metalsadman

Based on your codepen,
https://codepen.io/lyle45/pen/ZELgJqB
See the 2 differences. Again the white strip css can be achieved with negative margin so maybe this isn't that important, but it feels that slots should be able to mimic props functionality completely

opened feature request

#9148

[disfated]

@lyle45 the only solution right now is to pre-parse your text array with markdown and pass to QChatMessage along with text-html prop.
Something like https://codepen.io/disfated/pen/eYgqGxj

[lyle45]

@lyle45 the only solution right now is to pre-parse your text array with markdown and pass to QChatMessage along with text-html prop.
Something like https://codepen.io/disfated/pen/eYgqGxj

@disfated Thanks for solution but that's won't work for me. need to integrate markdown messages with image previews or video or other customizations so have to use slots

[lyle45]

Does anyone has any idea how to make this work normally?
really sticking me atm

[rstoenescu]

The required behavior will be available in Quasar v2.0.0-beta.16 and Quasar v1.15.14

[rstoenescu]

As per #9148