Messages Component
- Messages Components
- Messages Properties
- Messages Methods
- Messages Events
- Messages Slots
- Access To Messages Instance
- Examples
Messages Svelte component represents Messages component.
Messages Components
There are following components included:
Messages
- main Messages containerMessage
- single message elementMessagesTitle
- single messages title element
Messages Properties
Prop | Type | Default | Description |
---|---|---|---|
<Messages> properties | |||
init | boolean | true | Initializes Messages component |
newMessagesFirst | boolean | false | Enable if you want to use new messages on top, instead of having them on bottom |
scrollMessages | boolean | true | Enable/disable messages autoscrolling when adding new message |
scrollMessagesOnEdge | boolean | true | If enabled then messages autoscrolling will happen only when user is on top/bottom of the messages view |
<Message> properties | |||
type | string | sent | Message type: sent (default) or received |
text | string | Message text | |
avatar | string | Message user's avatar URL | |
name | string | Message user's name | |
image | string | Message image URL | |
header | string | Message header | |
footer | string | Message footer | |
textHeader | string | Message text header | |
textFooter | string | Message text footer | |
first | boolean | false | Defines that the message is first in the conversation |
last | boolean | false | Defines that the message is last in the conversation |
tail | boolean | false | Defines that the message has visual "tail". Usually last message in conversation |
sameName | boolean | false | Defines that this message sender name is the same as on previous message |
sameHeader | boolean | false | Defines that this message header text is the same as on previous message |
sameFooter | boolean | false | Defines that this message footer text is the same as on previous message |
sameAvatar | boolean | false | Defines that this message user's avatar URL is the same as on previous message |
Messages Methods
<Messages> methods | |
---|---|
.scroll(duration, position); | Scroll messages to top/bottom depending on newMessagesFirst parameter
|
.showTyping(message); | Show typing message indicator
|
.hideTyping() | Hide typing message indicator |
Messages Events
Event | Description |
---|---|
<Message> events | |
click | Event will be triggered when user clicks on message bubble |
clickName | Event will be triggered when user clicks on message user's name |
clickText | Event will be triggered when user clicks on message text |
clickAvatar | Event will be triggered when user clicks on message user's avatar |
clickHeader | Event will be triggered when user clicks on message header |
clickFooter | Event will be triggered when user clicks on message footer |
clickBubble | Event will be triggered when user clicks on message bubble |
Messages Slots
Single message Svelte component (<Message>
) has additional slots for custom elements:
default
- element will be inserted as a child of<div class="message-bubble">
element in the endstart
- element will be inserted in the beginning and direct child of main message element<div class="message">
end
- element will be inserted in the end and direct child of main message element<div class="message">
content-start
- element will be inserted in the beginning and direct child of the<div class="message-content">
elementcontent-end
- element will be inserted in the end and direct child of the<div class="message-content">
elementbubble-start
- element will be inserted in the beginning and direct child of the<div class="message-bubble">
elementbubble-end
- element will be inserted in the end and direct child of the<div class="message-bubble">
element. Same asdefault
slot
The following slots can be used inside of single message instead of same props if you need to pass there more complext layout:
header
- element will be inserted in message headerfooter
- element will be inserted in message footertext
- element will be inserted in message textname
- element will be inserted in message nameimage
- element will be inserted in message image (supposed tp be an<img>
element)text-header
- element will be inserted in message text headertext-footer
- element will be inserted in message text footer
<Message
type="sent"
text="Hello World"
name="John Doe"
avatar="path/to/image.jpg"
>
<div slot="start">Start</div>
<div slot="end">End</div>
<div slot="content-start">Content Start</div>
<div slot="content-end">Content End</div>
<div slot="bubble-start">Bubble Start</div>
<div slot="bubble-end">Bubble End</div>
</Message>
<!-- Renders to: -->
<div class="message message-sent">
<div>Start</div>
<div class="message-avatar" style="background-image: url(path/to/image.jpg);"></div>
<div class="message-content">
<div>Content Start</div>
<div class="message-name">John Doe</div>
<div class="message-bubble">
<div>Bubble Start</div>
<div class="message-text">Hello World</div>
<div>Bubble End</div>
</div>
<div>Content End</div>
</div>
<div>End</div>
</div>
Access To Messages Instance
If you use automatic initalization to init Messages (with init={true}
prop) and need to use Messages API you can access its initialized instance by calling .instance()
component's method. For example:
<Messages bind:this={component}>...</Messages>
<script>
let component;
// to get instance in some method
component.instance()
</script>
Examples
Here is how the full example of Messages page where it can be used together with Messagebar:
<Page>
<Navbar title="Messages"></Navbar>
<Messagebar
placeholder={placeholder}
bind:this={messagebarComponent}
attachmentsVisible={attachmentsVisible}
sheetVisible={sheetVisible}
value={messageText}
onInput={(e) => messageText = e.target.value}
>
<a class="link icon-only" slot="inner-start" on:click={() => sheetVisible = !sheetVisible}>
<Icon
ios="f7:camera_fill"
aurora="f7:camera_fill"
md="material:camera_alt"
/>
</a>
<a class="link icon-only" slot="inner-end" on:click={sendMessage}>
<Icon
ios="f7:arrow_up_circle_fill"
aurora="f7:arrow_up_circle_fill"
md="material:send"
/>
</a>
<MessagebarAttachments>
{#each attachments as image, index (index)}
<MessagebarAttachment
key={index}
image={image}
onAttachmentDelete={() => deleteAttachment(image)}
></MessagebarAttachment>
{/each}
</MessagebarAttachments>
<MessagebarSheet>
{#each images as image, index (index)}
<MessagebarSheetImage
key={index}
image={image}
checked={attachments.indexOf(image) >= 0}
onChange={handleAttachment}
></MessagebarSheetImage>
{/each}
</MessagebarSheet>
</Messagebar>
<Messages>
<MessagesTitle><b>Sunday, Feb 9,</b> 12:58</MessagesTitle>
{#each messagesData as message, index (index)}
<Message
type={message.type}
image={message.image}
name={message.name}
avatar={message.avatar}
first={isFirstMessage(message, index)}
last={isLastMessage(message, index)}
tail={isTailMessage(message, index)}
htmlText={message.text}
/>
{/each}
{#if typingMessage}
<Message
type="received"
typing={true}
first={true}
last={true}
tail={true}
header={`${typingMessage.name} is typing`}
avatar={typingMessage.avatar}
></Message>
{/if}
</Messages>
</Page>
<script>
import { onMount, onDestroy } from 'svelte';
import { f7, f7ready, Navbar, Page, Messages, MessagesTitle, Message, Messagebar, Icon, MessagebarAttachments, MessagebarAttachment, MessagebarSheet, MessagebarSheetImage } from 'framework7-svelte';
let messagebarComponent;
let messagebarInstance;
let attachments = [];
let sheetVisible = false;
let typingMessage = null;
let messageText = '';
let messagesData = [
{
type: 'sent',
text: 'Hi, Kate',
},
{
type: 'sent',
text: 'How are you?',
},
{
name: 'Kate',
type: 'received',
text: 'Hi, I am good!',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
},
{
name: 'Blue Ninja',
type: 'received',
text: 'Hi there, I am also fine, thanks! And how are you?',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
},
{
type: 'sent',
text: 'Hey, Blue Ninja! Glad to see you ;)',
},
{
type: 'sent',
text: 'Hey, look, cutest kitten ever!',
},
{
type: 'sent',
image: 'https://cdn.framework7.io/placeholder/cats-200x260-4.jpg',
},
{
name: 'Kate',
type: 'received',
text: 'Nice!',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
},
{
name: 'Kate',
type: 'received',
text: 'Like it very much!',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
},
{
name: 'Blue Ninja',
type: 'received',
text: 'Awesome!',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
},
];
let images = [
'https://cdn.framework7.io/placeholder/cats-300x300-1.jpg',
'https://cdn.framework7.io/placeholder/cats-200x300-2.jpg',
'https://cdn.framework7.io/placeholder/cats-400x300-3.jpg',
'https://cdn.framework7.io/placeholder/cats-300x150-4.jpg',
'https://cdn.framework7.io/placeholder/cats-150x300-5.jpg',
'https://cdn.framework7.io/placeholder/cats-300x300-6.jpg',
'https://cdn.framework7.io/placeholder/cats-300x300-7.jpg',
'https://cdn.framework7.io/placeholder/cats-200x300-8.jpg',
'https://cdn.framework7.io/placeholder/cats-400x300-9.jpg',
'https://cdn.framework7.io/placeholder/cats-300x150-10.jpg',
];
let people = [
{
name: 'Kate Johnson',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
},
{
name: 'Blue Ninja',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
},
];
let answers = [
'Yes!',
'No',
'Hm...',
'I am not sure',
'And what about you?',
'May be ;)',
'Lorem ipsum dolor sit amet, consectetur',
'What?',
'Are you sure?',
'Of course',
'Need to think about it',
'Amazing!!!',
];
let responseInProgress = false;
$: attachmentsVisible = attachments.length > 0;
$: placeholder = attachments.length > 0 ? 'Add comment or Send' : 'Message';
onMount(() => {
f7ready(() => {
messagebarInstance = messagebarComponent.instance();
});
});
function isFirstMessage(message, index) {
const previousMessage = messagesData[index - 1];
if (message.isTitle) return false;
if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
return false;
}
function isLastMessage(message, index) {
const nextMessage = messagesData[index + 1];
if (message.isTitle) return false;
if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
return false;
}
function isTailMessage(message, index) {
const nextMessage = messagesData[index + 1];
if (message.isTitle) return false;
if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
return false;
}
function deleteAttachment(image) {
const index = attachments.indexOf(image);
attachments.splice(index, 1);
attachments = attachments;
}
function handleAttachment(e) {
const index = f7.$(e.target).parents('label.checkbox').index();
const image = images[index];
if (e.target.checked) {
// Add to attachments
attachments.unshift(image);
} else {
// Remove from attachments
attachments.splice(attachments.indexOf(image), 1);
}
attachments = attachments;
}
function sendMessage() {
const text = messageText.replace(/\n/g, '<br>').trim();
const messagesToSend = [];
attachments.forEach((attachment) => {
messagesToSend.push({
type: 'sent',
image: attachment,
});
});
if (text.length) {
messagesToSend.push({
text,
type: 'sent',
});
}
if (messagesToSend.length === 0) {
return;
}
// Reset attachments
attachments = [];
// Hide sheet
sheetVisible = false;
// Send message
messagesData = [...messagesData, ...messagesToSend];
// Clear
messageText = '';
messagebarInstance.clear();
// Focus area
if (text.length) messagebarInstance.focus();
// Mock response
if (responseInProgress) return;
responseInProgress = true;
setTimeout(() => {
const answer = answers[Math.floor(Math.random() * answers.length)];
const person = people[Math.floor(Math.random() * people.length)];
typingMessage = {
name: person.name,
avatar: person.avatar,
};
setTimeout(() => {
messagesData = [...messagesData, {
text: answer,
type: 'received',
name: person.name,
avatar: person.avatar,
}];
typingMessage = null;
responseInProgress = false;
}, 4000);
}, 1000);
}
</script>