620 lines
26 KiB
JavaScript
620 lines
26 KiB
JavaScript
import server from "/@server/server.js"
|
||
|
||
css(`
|
||
chat-, chat- * {
|
||
box-sizing: border-box;
|
||
}
|
||
chat- {
|
||
font-family: 'Arial';
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
chat-::-webkit-scrollbar { display: none; }
|
||
chat- input::placeholder {
|
||
color: var(--headertext);
|
||
opacity: 0.35;
|
||
}
|
||
`)
|
||
|
||
class Chat extends Shadow {
|
||
selectedChatId = null
|
||
searchText = ""
|
||
searchOpen = false
|
||
|
||
constructor() {
|
||
super()
|
||
|
||
this.currentUser = { id: 1, name: "You" }
|
||
|
||
const ago = (h) => new Date(Date.now() - h * 3600000)
|
||
const msg = (senderId, senderName, text, hoursAgo) => ({ id: Math.random(), senderId, senderName, text, sentAt: ago(hoursAgo) })
|
||
|
||
this.chats = [
|
||
{
|
||
id: 1, type: "dm", name: "Sarah McIntyre",
|
||
members: ["Sarah McIntyre"], memberCount: 2, unread: 2,
|
||
lastMessage: { senderId: 2, senderName: "Sarah McIntyre", text: "Can you review the PR when you get a chance?", sentAt: ago(0.3) },
|
||
messages: [
|
||
msg(1, "You", "Hey Sarah, did you see the new design mockups?", 24),
|
||
msg(2, "Sarah McIntyre", "Just looked — they're really clean. I love the new sidebar.", 23.5),
|
||
msg(1, "You", "Agreed. Alex did a great job.", 23.4),
|
||
msg(2, "Sarah McIntyre", "Are we going to ship this week or wait for the backend?", 5),
|
||
msg(1, "You", "Let's aim for Thursday. I'll sync with Marcus.", 4.8),
|
||
msg(2, "Sarah McIntyre", "Sounds good 👍", 4.7),
|
||
msg(2, "Sarah McIntyre", "Can you review the PR when you get a chance?", 0.3),
|
||
]
|
||
},
|
||
{
|
||
id: 2, type: "dm", name: "Marcus Webb",
|
||
members: ["Marcus Webb"], memberCount: 2, unread: 0,
|
||
lastMessage: { senderId: 1, senderName: "You", text: "I'll send over the specs by EOD", sentAt: ago(1.5) },
|
||
messages: [
|
||
msg(3, "Marcus Webb", "Hey, the API endpoint is returning 500s on staging.", 3),
|
||
msg(1, "You", "Oh no — is it the auth middleware again?", 2.9),
|
||
msg(3, "Marcus Webb", "Yep. Same issue as last week.", 2.8),
|
||
msg(1, "You", "I'll patch it now. Give me 20 mins.", 2.75),
|
||
msg(3, "Marcus Webb", "Thanks, no rush.", 2.7),
|
||
msg(1, "You", "Fixed. Can you redeploy and check?", 2.2),
|
||
msg(3, "Marcus Webb", "All green 🎉 Thanks!", 2.1),
|
||
msg(1, "You", "I'll send over the specs by EOD", 1.5),
|
||
]
|
||
},
|
||
{
|
||
id: 3, type: "dm", name: "Priya Anand",
|
||
members: ["Priya Anand"], memberCount: 2, unread: 0,
|
||
lastMessage: { senderId: 4, senderName: "Priya Anand", text: "See you at the standup!", sentAt: ago(18) },
|
||
messages: [
|
||
msg(4, "Priya Anand", "Quick question — what's the launch date for v2?", 20),
|
||
msg(1, "You", "Still TBD, but we're targeting end of May.", 19.8),
|
||
msg(4, "Priya Anand", "Got it. I'll update the roadmap doc.", 19.5),
|
||
msg(1, "You", "Perfect, thanks Priya.", 19.4),
|
||
msg(4, "Priya Anand", "See you at the standup!", 18),
|
||
]
|
||
},
|
||
{
|
||
id: 4, type: "group", name: "Product Team",
|
||
members: ["Sarah McIntyre", "Marcus Webb", "Priya Anand", "You"], memberCount: 4, unread: 5,
|
||
lastMessage: { senderId: 2, senderName: "Sarah McIntyre", text: "I've updated the Figma file with the new flows", sentAt: ago(0.15) },
|
||
messages: [
|
||
msg(3, "Marcus Webb", "Morning everyone! API docs are updated.", 8),
|
||
msg(4, "Priya Anand", "Nice work Marcus 🙌", 7.9),
|
||
msg(1, "You", "I'll start on the integration tests today.", 7.8),
|
||
msg(2, "Sarah McIntyre", "Great. I'm finishing up the onboarding screens.", 7.5),
|
||
msg(4, "Priya Anand", "Can we do a quick sync at 2pm?", 2),
|
||
msg(1, "You", "Works for me.", 1.95),
|
||
msg(3, "Marcus Webb", "Same", 1.9),
|
||
msg(2, "Sarah McIntyre", "I'll send the invite.", 1.85),
|
||
msg(2, "Sarah McIntyre", "I've updated the Figma file with the new flows", 0.15),
|
||
]
|
||
},
|
||
{
|
||
id: 5, type: "group", name: "Design Review",
|
||
members: ["Sarah McIntyre", "You", "Jordan Kim"], memberCount: 3, unread: 0,
|
||
lastMessage: { senderId: 5, senderName: "Jordan Kim", text: "The contrast on mobile looks off — can we bump it?", sentAt: ago(26) },
|
||
messages: [
|
||
msg(5, "Jordan Kim", "Hey, sharing the first round of designs for the settings page.", 30),
|
||
msg(2, "Sarah McIntyre", "These look great! Love the card layout.", 29.5),
|
||
msg(1, "You", "Agreed. One thought — the spacing on the form feels a bit tight.", 29),
|
||
msg(5, "Jordan Kim", "Good call. I'll loosen it up.", 28.8),
|
||
msg(2, "Sarah McIntyre", "Also maybe we increase the font size slightly?", 28),
|
||
msg(5, "Jordan Kim", "The contrast on mobile looks off — can we bump it?", 26),
|
||
]
|
||
},
|
||
{
|
||
id: 6, type: "channel", name: "general",
|
||
members: ["Sarah McIntyre", "Marcus Webb", "Priya Anand", "Jordan Kim", "You"], memberCount: 24, unread: 11,
|
||
lastMessage: { senderId: 3, senderName: "Marcus Webb", text: "Just pushed the hotfix to production", sentAt: ago(0.08) },
|
||
messages: [
|
||
msg(4, "Priya Anand", "Good morning team! Reminder: all-hands is Thursday at 10am.", 9),
|
||
msg(2, "Sarah McIntyre", "Thanks for the reminder!", 8.9),
|
||
msg(5, "Jordan Kim", "Will there be a recording for those in other time zones?", 8.7),
|
||
msg(4, "Priya Anand", "Yes — I'll post the link in #announcements after.", 8.6),
|
||
msg(1, "You", "Thanks Priya 🙏", 8.5),
|
||
msg(3, "Marcus Webb", "Staging is back up btw, had a brief outage this morning.", 4),
|
||
msg(2, "Sarah McIntyre", "Oh I didn't even notice, nice quick fix!", 3.8),
|
||
msg(3, "Marcus Webb", "Just pushed the hotfix to production", 0.08),
|
||
]
|
||
},
|
||
{
|
||
id: 7, type: "channel", name: "engineering",
|
||
members: ["Marcus Webb", "You"], memberCount: 8, unread: 0,
|
||
lastMessage: { senderId: 1, senderName: "You", text: "PR is up: #247 — adds rate limiting to the auth routes", sentAt: ago(3) },
|
||
messages: [
|
||
msg(3, "Marcus Webb", "Heads up: I'm updating the CI pipeline today. Builds might be slow for a bit.", 5),
|
||
msg(1, "You", "Noted, thanks for the warning.", 4.9),
|
||
msg(3, "Marcus Webb", "Back to normal now.", 4),
|
||
msg(1, "You", "PR is up: #247 — adds rate limiting to the auth routes", 3),
|
||
]
|
||
},
|
||
{
|
||
id: 8, type: "announcement", name: "Announcements",
|
||
members: [], memberCount: 24, unread: 1,
|
||
lastMessage: { senderId: 4, senderName: "Priya Anand", text: "Q2 planning kick-off is next Monday at 9am.", sentAt: ago(12) },
|
||
messages: [
|
||
msg(4, "Priya Anand", "Welcome to the team, Jordan! 🎉 Jordan joins us as a Product Designer.", 72),
|
||
msg(4, "Priya Anand", "Reminder: expense reports for March are due this Friday.", 48),
|
||
msg(4, "Priya Anand", "Q2 planning kick-off is next Monday at 9am. Please come prepared with your team's priorities.", 12),
|
||
]
|
||
},
|
||
]
|
||
}
|
||
|
||
get selectedChat() {
|
||
return this.chats.find(c => c.id === this.selectedChatId) || null
|
||
}
|
||
|
||
get filteredChats() {
|
||
if (!this.searchText) return this.chats
|
||
const q = this.searchText.toLowerCase()
|
||
return this.chats.filter(c => c.name.toLowerCase().includes(q))
|
||
}
|
||
|
||
render() {
|
||
VStack(() => {
|
||
if (this.selectedChatId === null) {
|
||
this.renderList()
|
||
} else {
|
||
this.renderThread()
|
||
}
|
||
})
|
||
.height(100, pct)
|
||
.width(100, pct)
|
||
.overflow("hidden")
|
||
}
|
||
|
||
// ── List view ────────────────────────────────────────────────────────────
|
||
|
||
renderList() {
|
||
VStack(() => {
|
||
this.renderListHeader()
|
||
this.renderChatList()
|
||
})
|
||
.height(100, pct)
|
||
.width(100, vw)
|
||
.overflow("hidden")
|
||
}
|
||
|
||
renderListHeader() {
|
||
VStack(() => {
|
||
|
||
// Search bar
|
||
if (this.searchOpen) {
|
||
HStack(() => {
|
||
p("🔍").margin(0).fontSize(0.78, em).opacity(0.4).flexShrink(0)
|
||
input()
|
||
.attr({ type: "text", placeholder: "Search…", autofocus: "true" })
|
||
.flex(1).border("none").outline("none")
|
||
.background("transparent")
|
||
.color("var(--headertext)").fontSize(0.9, em)
|
||
.onInput((e) => { this.searchText = e.target.value; this.rerender() })
|
||
})
|
||
.gap(0.5, em)
|
||
.paddingHorizontal(0.85, em).paddingVertical(0.55, em)
|
||
.background("var(--darkaccent)")
|
||
.border("1px solid var(--divider)")
|
||
.borderRadius(0.6, em)
|
||
.alignItems("center")
|
||
.marginHorizontal(1.1, em)
|
||
.marginBottom(0.5, em)
|
||
}
|
||
})
|
||
.flexShrink(0)
|
||
}
|
||
|
||
renderChatList() {
|
||
const chats = this.filteredChats
|
||
const groups = {
|
||
dms: chats.filter(c => c.type === "dm"),
|
||
groups: chats.filter(c => c.type === "group"),
|
||
channels: chats.filter(c => c.type === "channel" || c.type === "announcement"),
|
||
}
|
||
|
||
VStack(() => {
|
||
if (chats.length === 0) {
|
||
VStack(() => {
|
||
p("No results").margin(0).fontSize(0.88, em)
|
||
.color("var(--headertext)").opacity(0.35).textAlign("center")
|
||
}).flex(1).justifyContent("center").alignItems("center")
|
||
} else {
|
||
if (groups.dms.length > 0) {
|
||
this.sectionLabel("DIRECT MESSAGES")
|
||
groups.dms.forEach(c => this.renderRow(c))
|
||
}
|
||
if (groups.groups.length > 0) {
|
||
this.sectionLabel("GROUPS")
|
||
groups.groups.forEach(c => this.renderRow(c))
|
||
}
|
||
if (groups.channels.length > 0) {
|
||
this.sectionLabel("CHANNELS")
|
||
groups.channels.forEach(c => this.renderRow(c))
|
||
}
|
||
}
|
||
})
|
||
.flex(1).overflowY("auto")
|
||
.paddingBottom(2, em)
|
||
}
|
||
|
||
sectionLabel(text) {
|
||
p(text)
|
||
.margin(0).marginTop(0.85, em).marginBottom(0.2, em)
|
||
.paddingHorizontal(1.1, em)
|
||
.fontSize(0.62, em).fontWeight("700").letterSpacing("0.07em")
|
||
.color("var(--headertext)").opacity(0.35)
|
||
}
|
||
|
||
renderRow(chat) {
|
||
const hasUnread = chat.unread > 0
|
||
HStack(() => {
|
||
this.renderIcon(chat)
|
||
|
||
VStack(() => {
|
||
HStack(() => {
|
||
p(chat.name)
|
||
.margin(0).fontSize(0.95, em)
|
||
.fontWeight(hasUnread ? "700" : "500")
|
||
.color("var(--headertext)")
|
||
.flex(1).minWidth(0)
|
||
.overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
|
||
|
||
p(this.formatTime(chat.lastMessage?.sentAt))
|
||
.margin(0).fontSize(0.7, em)
|
||
.color("var(--headertext)")
|
||
.opacity(hasUnread ? 0.7 : 0.35)
|
||
.fontWeight(hasUnread ? "600" : "400")
|
||
.flexShrink(0)
|
||
})
|
||
.alignItems("center").width(100, pct)
|
||
|
||
HStack(() => {
|
||
p(this.previewText(chat))
|
||
.margin(0).fontSize(0.82, em)
|
||
.color("var(--headertext)")
|
||
.opacity(hasUnread ? 0.65 : 0.38)
|
||
.fontWeight(hasUnread ? "500" : "400")
|
||
.flex(1).minWidth(0)
|
||
.overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
|
||
|
||
if (hasUnread) {
|
||
p(chat.unread > 99 ? "99+" : String(chat.unread))
|
||
.margin(0)
|
||
.paddingHorizontal(0.45, em).paddingVertical(0.1, em)
|
||
.background("var(--quillred)").color("white")
|
||
.fontSize(0.65, em).fontWeight("700")
|
||
.borderRadius(100, px)
|
||
.minWidth(1.2, em).textAlign("center")
|
||
.flexShrink(0)
|
||
}
|
||
})
|
||
.alignItems("center").width(100, pct).marginTop(0.2, em)
|
||
})
|
||
.flex(1).minWidth(0)
|
||
})
|
||
.gap(0.75, em)
|
||
.paddingHorizontal(1.1, em).paddingVertical(0.8, em)
|
||
.alignItems("center")
|
||
.borderBottom("1px solid var(--divider)")
|
||
.onTouch((start) => {
|
||
if (!start) {
|
||
this.selectedChatId = chat.id
|
||
chat.unread = 0
|
||
this.rerender()
|
||
}
|
||
})
|
||
}
|
||
|
||
// ── Thread view ──────────────────────────────────────────────────────────
|
||
|
||
renderThread() {
|
||
const chat = this.selectedChat
|
||
if (!chat) return
|
||
|
||
VStack(() => {
|
||
this.renderThreadHeader(chat)
|
||
this.renderMessages(chat)
|
||
this.renderComposer(chat)
|
||
})
|
||
.height(100, pct)
|
||
.width(100, pct)
|
||
.overflow("hidden")
|
||
}
|
||
|
||
renderThreadHeader(chat) {
|
||
HStack(() => {
|
||
// Back button
|
||
p("‹")
|
||
.margin(0).fontSize(1.8, em).lineHeight("1")
|
||
.color("var(--headertext)").paddingRight(0.5, em)
|
||
.cursor("pointer")
|
||
.onTouch((start) => {
|
||
if (!start) {
|
||
this.selectedChatId = null
|
||
this.rerender()
|
||
}
|
||
})
|
||
|
||
this.renderHeaderIcon(chat)
|
||
|
||
VStack(() => {
|
||
p(chat.type === "channel" ? "#" + chat.name : chat.name)
|
||
.margin(0).fontSize(0.95, em).fontWeight("700")
|
||
.color("var(--headertext)")
|
||
.overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
|
||
|
||
p(this.headerSubtitle(chat))
|
||
.margin(0).marginTop(0.06, em)
|
||
.fontSize(0.7, em).color("var(--headertext)").opacity(0.4)
|
||
})
|
||
.flex(1).minWidth(0)
|
||
})
|
||
.gap(0.6, em)
|
||
.paddingHorizontal(1.1, em).paddingVertical(0.85, em)
|
||
.borderBottom("1px solid var(--divider)")
|
||
.alignItems("center")
|
||
.flexShrink(0)
|
||
}
|
||
|
||
renderMessages(chat) {
|
||
const messages = chat.messages || []
|
||
const grouped = this.groupByDate(messages)
|
||
|
||
VStack(() => {
|
||
if (messages.length === 0) {
|
||
VStack(() => {
|
||
p("No messages yet. Say hello!")
|
||
.margin(0).fontSize(0.88, em)
|
||
.color("var(--headertext)").opacity(0.3)
|
||
}).flex(1).justifyContent("center").alignItems("center")
|
||
} else {
|
||
grouped.forEach(({ label, messages: dayMsgs }) => {
|
||
// Date separator
|
||
HStack(() => {
|
||
VStack(() => {}).flex(1).height(1, px).background("var(--divider)")
|
||
p(label)
|
||
.margin(0).marginHorizontal(0.75, em)
|
||
.fontSize(0.65, em).fontWeight("600")
|
||
.color("var(--headertext)").opacity(0.38).whiteSpace("nowrap")
|
||
VStack(() => {}).flex(1).height(1, px).background("var(--divider)")
|
||
})
|
||
.alignItems("center")
|
||
.paddingHorizontal(1.1, em).paddingVertical(0.75, em)
|
||
.flexShrink(0)
|
||
|
||
const runs = this.groupIntoRuns(dayMsgs)
|
||
runs.forEach(run => this.renderRun(run, chat))
|
||
})
|
||
}
|
||
})
|
||
.flex(1).overflowY("auto")
|
||
.paddingBottom(0.5, em)
|
||
.width(100, pct).boxSizing("border-box")
|
||
.onAppear(function () { this.scrollTop = this.scrollHeight })
|
||
}
|
||
|
||
renderRun(run, chat) {
|
||
const isMe = run.senderId === this.currentUser.id
|
||
const showSenderName = !isMe && chat.type !== "dm"
|
||
|
||
VStack(() => {
|
||
if (showSenderName) {
|
||
HStack(() => {
|
||
p(run.senderName)
|
||
.margin(0).fontSize(0.75, em).fontWeight("600")
|
||
.color(this.avatarColor(run.senderName))
|
||
p(this.formatMsgTime(run.messages[0].sentAt))
|
||
.margin(0).fontSize(0.68, em)
|
||
.color("var(--headertext)").opacity(0.32)
|
||
})
|
||
.gap(0.5, em).alignItems("baseline").marginBottom(0.2, em)
|
||
}
|
||
|
||
run.messages.forEach((msg, i) => {
|
||
this.renderBubble(msg, isMe, i === run.messages.length - 1)
|
||
})
|
||
})
|
||
.paddingHorizontal(1.1, em)
|
||
.paddingTop(0.55, em).paddingBottom(0.08, em)
|
||
.alignItems(isMe ? "flex-end" : "flex-start")
|
||
.width(100, pct).boxSizing("border-box")
|
||
.flexShrink(0)
|
||
}
|
||
|
||
renderBubble(msg, isMe, showTime) {
|
||
VStack(() => {
|
||
VStack(() => {
|
||
p(msg.text)
|
||
.margin(0).fontSize(0.92, em).lineHeight("1.5")
|
||
.color(isMe ? "white" : "var(--headertext)")
|
||
.whiteSpace("pre-wrap").wordBreak("break-word")
|
||
})
|
||
.paddingHorizontal(0.9, em).paddingVertical(0.6, em)
|
||
.background(isMe ? "var(--quillred)" : "var(--darkaccent)")
|
||
.borderRadius(isMe ? "1em 1em 0.25em 1em" : "1em 1em 1em 0.25em")
|
||
.maxWidth("75vw").boxSizing("border-box")
|
||
|
||
if (showTime) {
|
||
p(this.formatMsgTime(msg.sentAt))
|
||
.margin(0).marginTop(0.22, em)
|
||
.fontSize(0.62, em).color("var(--headertext)").opacity(0.32)
|
||
.alignSelf(isMe ? "flex-end" : "flex-start")
|
||
}
|
||
})
|
||
.alignItems(isMe ? "flex-end" : "flex-start")
|
||
.marginBottom(0.2, em)
|
||
}
|
||
|
||
renderComposer(chat) {
|
||
HStack(() => {
|
||
HStack(() => {
|
||
input()
|
||
.attr({ type: "text", placeholder: `Message…`, id: `composer-${chat.id}` })
|
||
.flex(1).border("none").outline("none")
|
||
.background("transparent")
|
||
.color("var(--headertext)").fontSize(0.95, em)
|
||
})
|
||
.flex(1)
|
||
.paddingHorizontal(1, em).paddingVertical(0.7, em)
|
||
.background("var(--darkaccent)")
|
||
.border("1px solid var(--divider)")
|
||
.borderRadius(1.5, em)
|
||
.alignItems("center")
|
||
|
||
button("↑")
|
||
.paddingHorizontal(0.85, em).paddingVertical(0.7, em)
|
||
.background("var(--quillred)").color("white")
|
||
.border("none").borderRadius(50, pct)
|
||
.fontSize(1.05, em).fontWeight("700")
|
||
.cursor("pointer").flexShrink(0)
|
||
.onClick((done) => { if (done) this.sendMessage(chat) })
|
||
})
|
||
.gap(0.55, em)
|
||
.paddingHorizontal(1.1, em).paddingVertical(0.75, em)
|
||
.borderTop("1px solid var(--divider)")
|
||
.alignItems("center")
|
||
.flexShrink(0)
|
||
}
|
||
|
||
sendMessage(chat) {
|
||
const input = this.$(`#composer-${chat.id}`)
|
||
if (!input) return
|
||
const text = input.value.trim()
|
||
if (!text) return
|
||
|
||
chat.messages.push({
|
||
id: Date.now(),
|
||
senderId: this.currentUser.id,
|
||
senderName: this.currentUser.name,
|
||
text,
|
||
sentAt: new Date()
|
||
})
|
||
chat.lastMessage = { senderId: this.currentUser.id, senderName: this.currentUser.name, text, sentAt: new Date() }
|
||
chat.unread = 0
|
||
input.value = ""
|
||
this.rerender()
|
||
}
|
||
|
||
// ── Shared icon rendering ─────────────────────────────────────────────────
|
||
|
||
renderIcon(chat, size = 2.5) {
|
||
if (chat.type === "channel") {
|
||
VStack(() => {
|
||
p("#").margin(0).fontSize(1.05, em).fontWeight("700").color("white").lineHeight("1")
|
||
})
|
||
.width(size, em).height(size, em).borderRadius(0.45, em)
|
||
.background("#5865f2").justifyContent("center").alignItems("center").flexShrink(0)
|
||
} else if (chat.type === "announcement") {
|
||
VStack(() => {
|
||
p("📣").margin(0).fontSize(0.9, em).lineHeight("1")
|
||
})
|
||
.width(size, em).height(size, em).borderRadius(0.45, em)
|
||
.background("#f59e0b").justifyContent("center").alignItems("center").flexShrink(0)
|
||
} else if (chat.type === "group") {
|
||
const s = size * 0.76
|
||
ZStack(() => {
|
||
VStack(() => {
|
||
p((chat.members[1] || "B")[0].toUpperCase())
|
||
.margin(0).fontSize(0.6, em).fontWeight("700").color("white")
|
||
})
|
||
.width(s, em).height(s, em).borderRadius(50, pct)
|
||
.background(this.avatarColor(chat.members[1] || "B"))
|
||
.justifyContent("center").alignItems("center")
|
||
.position("absolute").bottom(0).right(0)
|
||
|
||
VStack(() => {
|
||
p((chat.members[0] || "A")[0].toUpperCase())
|
||
.margin(0).fontSize(0.6, em).fontWeight("700").color("white")
|
||
})
|
||
.width(s, em).height(s, em).borderRadius(50, pct)
|
||
.background(this.avatarColor(chat.members[0] || "A"))
|
||
.justifyContent("center").alignItems("center")
|
||
.position("absolute").top(0).left(0)
|
||
})
|
||
.width(size, em).height(size, em).position("relative").flexShrink(0)
|
||
} else {
|
||
VStack(() => {
|
||
p(chat.name[0].toUpperCase())
|
||
.margin(0).fontSize(0.9, em).fontWeight("700").color("white").lineHeight("1")
|
||
})
|
||
.width(size, em).height(size, em).borderRadius(50, pct)
|
||
.background(this.avatarColor(chat.name))
|
||
.justifyContent("center").alignItems("center").flexShrink(0)
|
||
}
|
||
}
|
||
|
||
renderHeaderIcon(chat) {
|
||
this.renderIcon(chat, 2.2)
|
||
}
|
||
|
||
// ── Helpers ───────────────────────────────────────────────────────────────
|
||
|
||
previewText(chat) {
|
||
const msg = chat.lastMessage
|
||
if (!msg) return "No messages yet"
|
||
const sender = chat.type === "dm" ? "" : (msg.senderName?.split(" ")[0] + ": ")
|
||
return sender + msg.text
|
||
}
|
||
|
||
headerSubtitle(chat) {
|
||
if (chat.type === "channel" || chat.type === "announcement") return `${chat.memberCount} members`
|
||
if (chat.type === "group") return chat.members?.join(", ") || ""
|
||
return "Active recently"
|
||
}
|
||
|
||
formatTime(date) {
|
||
if (!date) return ""
|
||
const d = new Date(date), now = new Date()
|
||
const diffDays = Math.floor((now - d) / 86400000)
|
||
if (diffDays === 0) return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })
|
||
if (diffDays === 1) return "Yesterday"
|
||
if (diffDays < 7) return d.toLocaleDateString([], { weekday: "short" })
|
||
return d.toLocaleDateString([], { month: "short", day: "numeric" })
|
||
}
|
||
|
||
formatMsgTime(date) {
|
||
return new Date(date).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })
|
||
}
|
||
|
||
groupByDate(messages) {
|
||
const map = new Map()
|
||
messages.forEach(msg => {
|
||
const key = new Date(msg.sentAt).toDateString()
|
||
if (!map.has(key)) map.set(key, [])
|
||
map.get(key).push(msg)
|
||
})
|
||
return Array.from(map.entries()).map(([key, messages]) => ({
|
||
label: this.dateSeparatorLabel(new Date(key)),
|
||
messages
|
||
}))
|
||
}
|
||
|
||
groupIntoRuns(messages) {
|
||
const runs = []
|
||
messages.forEach(msg => {
|
||
const last = runs[runs.length - 1]
|
||
if (last && last.senderId === msg.senderId) {
|
||
last.messages.push(msg)
|
||
} else {
|
||
runs.push({ senderId: msg.senderId, senderName: msg.senderName, messages: [msg] })
|
||
}
|
||
})
|
||
return runs
|
||
}
|
||
|
||
dateSeparatorLabel(date) {
|
||
const now = new Date()
|
||
const diffDays = Math.floor((now - date) / 86400000)
|
||
if (diffDays === 0) return "Today"
|
||
if (diffDays === 1) return "Yesterday"
|
||
if (diffDays < 7) return date.toLocaleDateString([], { weekday: "long" })
|
||
return date.toLocaleDateString([], { month: "long", day: "numeric", year: "numeric" })
|
||
}
|
||
|
||
avatarColor(name) {
|
||
const colors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16"]
|
||
let hash = 0
|
||
for (let i = 0; i < (name || "").length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash)
|
||
return colors[Math.abs(hash) % colors.length]
|
||
}
|
||
}
|
||
|
||
register(Chat)
|