48 lines
1.1 KiB
JavaScript
48 lines
1.1 KiB
JavaScript
const Bubble =
|
|
{
|
|
props: ["category", "text", "html", "blob", "modifier", "child"],
|
|
|
|
setup(props)
|
|
{
|
|
const getUrl = () => {
|
|
return `data:${props.category};base64,${props.blob}`;
|
|
}
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
const el = document.getElementById("messenger");
|
|
|
|
setTimeout(() => {
|
|
|
|
el.dispatchEvent(new CustomEvent('adjust-scroll'));
|
|
|
|
}, 100);
|
|
|
|
});
|
|
|
|
if (!props.text) props.text = "...";
|
|
|
|
return { getUrl };
|
|
},
|
|
|
|
template: `
|
|
<div :class="'bubble ' + modifier + '-bubble ' + modifier +'-'+ child">
|
|
|
|
<small class="bubble-notify" v-if="modifier=='ai'"></small>
|
|
|
|
<p v-if="category=='text'">{{ text }}</p>
|
|
|
|
<p v-else-if="category=='audio'">{{ text }}</p>
|
|
|
|
<div v-else-if="category=='html'" v-html="html"></div>
|
|
|
|
<img v-else-if="category == 'image'" :src="getUrl()" />
|
|
|
|
<a v-else :download="text" :href="getUrl()">{{ text }}</a>
|
|
|
|
</div>`
|
|
};
|
|
|
|
export default Bubble;
|
|
|
|
// TODO: should include other styling/actions for audio bubbles
|