60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
<div>
|
|
<q-card>
|
|
<q-card-section>
|
|
<h6 class="text-subtitle1 q-my-none">Messages</h6>
|
|
</q-card-section>
|
|
<q-card-section class="q-pa-none">
|
|
<q-separator></q-separator>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-select
|
|
v-model="activePublicKey"
|
|
:options="customers.map(c => ({label: `${c.profile.name || 'unknown'} ${c.profile.about || ''} (${c.public_key.slice(0, 16)}...${c.public_key.slice(c.public_key.length - 16)})`, value: c.public_key}))"
|
|
label="Select Customer"
|
|
emit-value
|
|
@input="selectActiveCustomer()"
|
|
>
|
|
</q-select>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="chat-container" ref="chatCard">
|
|
<div class="chat-box">
|
|
<div class="chat-messages" style="height: 45vh">
|
|
<q-chat-message
|
|
v-for="(dm, index) in messages"
|
|
:key="index"
|
|
:name="dm.incoming ? 'customer': 'me'"
|
|
:text="[dm.message]"
|
|
:sent="!dm.incoming"
|
|
:bg-color="dm.incoming ? 'white' : 'light-green-2'"
|
|
:class="'chat-mesage-index-'+index"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<q-card-section>
|
|
<q-form @submit="sendDirectMesage" class="full-width chat-input">
|
|
<q-input
|
|
ref="newMessage"
|
|
v-model="newMessage"
|
|
placeholder="Message"
|
|
class="full-width"
|
|
dense
|
|
outlined
|
|
>
|
|
<template>
|
|
<q-btn
|
|
round
|
|
dense
|
|
flat
|
|
type="submit"
|
|
icon="send"
|
|
color="primary"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</q-form>
|
|
</q-card-section>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|