gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 7 Projects Releases Packages 1 Wiki Activity Actions

Improve chat look #65

Merged
sauceyred merged 18 commits from improve-chat-look into main 2025-08-14 15:29:16 +00:00
Conversation 5 Commits 18 Files changed 10 +31 -19
1 changed files with 31 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d5f1ecfd26 - Show all commits

30
components/Message.vue
View file

@ -43,10 +43,10 @@
{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }} {{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
</span> </span>
</div> </div>
<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div> <div class="message-text" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
</div>
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" /> <MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</div> </div>
</div>
<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined" <div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo"> :data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
@ -56,7 +56,7 @@
</span> </span>
</div> </div>
<div class="message-data"> <div class="message-data">
<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div> <div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
</div> </div>
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" /> <MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</div> </div>
@ -89,10 +89,10 @@ console.log("[MSG] reply message:", props.replyMessage);
const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g; const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]); const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
const mediaLinks: string[] = []; const mediaLinks = ref<string[]>([]);
console.log("link matches:", linkMatches); console.log("link matches:", linkMatches);
const hasEmbed = ref(false); const hideText = ref(false);
const sanitized = ref<string>(); const sanitized = ref<string>();
@ -121,22 +121,34 @@ onMounted(async () => {
console.log("added listeners"); console.log("added listeners");
} }
const links: string[] = [];
for (const link of linkMatches) { for (const link of linkMatches) {
console.log("link:", link); console.log("link:", link);
try { try {
const res = await $fetch.raw(link); const res = await $fetch.raw(link);
if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) { if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
console.log("link is image"); console.log("link is image");
mediaLinks.push(link); links.push(link);
} }
if (mediaLinks.length) {
hasEmbed.value = true
};
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
mediaLinks.value = [...links];
} }
if (mediaLinks.value.length) {
const nonLinks = props.message.message.split(linkRegex);
let invalidContent = false;
for (const nonLink of nonLinks) {
if (nonLink != "" && nonLink != "\n" && nonLink != "<br>") {
invalidContent = true;
break;
}
}
hideText.value = !invalidContent;
};
console.log("media links:", mediaLinks); console.log("media links:", mediaLinks);
}); });