Pins are available in the room details panel.
) : (
<>
{historyLoading && Loading older messages… }
{!historyLoading && historyError && (
void loadOlderMessages()}>
Could not load older messages. Retry
)}
{!historyLoading && !historyError && !hasOlderMessages && feedItems.length > 0 && (
You’ve reached the beginning of this conversation.
)}
{feedItems.length === 0 && pending.length === 0 && (
No messages yet. Start the conversation below.
)}
{feedItems.map((item, index) => {
const prev = feedItems[index - 1];
const showDivider = !prev || dayKey(prev.atIso) !== dayKey(item.atIso);
const dividerLabel = showDivider ? dayLabel(item.atIso) : null;
const divider = showDivider ? (
{dividerLabel}
New }
) : null;
if (item.kind === "call") {
const call = item.call;
const live = call.status === "ringing" || call.status === "active";
const mine = call.participants.find((participant) => String(participant.userId) === String(myUserId));
const missed = call.status === "missed" || mine?.state === "missed";
const alreadyOn =
mine?.state === "joined" && live && String(activeCall?.id) === String(call.id);
const others = call.participants.filter((participant) => String(participant.userId) !== String(myUserId));
const tone = live ? "live" : missed ? "missed" : "ended";
return (
{divider}
{call.kind === "video" ?
{callFeedTitle(call, myUserId, nameFor)}
{callFeedDetail(call, myUserId)}
Β·
{formatTime(call.startedAt)}
{call.kind === "video" && Video }
{live && (
void joinChannelCall(call)}
>
{alreadyOn || (mine?.state === "joined" && live) ? "Return" : "Join"}
)}
{!live && others.length > 0 && (
viewingDm
? void startDmCall(call.kind === "video" ? "video" : "audio")
: void (async () => {
if (!workspaceId) return;
setCallBusy(true);
setCallError(null);
try {
const next = await api.startCall(workspaceId, {
kind: call.kind === "video" ? "video" : "audio",
inviteeUserIds: others.map((participant) => participant.userId),
channelId,
title: call.title,
});
setActiveCall(next);
} catch (err) {
setCallError(err instanceof ApiError ? JSON.stringify(err.body) : String(err));
} finally {
setCallBusy(false);
}
})()
}
>
{call.kind === "video" ?
)}
);
}
const m = item.message;
const color = avatarColor(String(m.authorId));
const mine = String(m.authorId) === String(myUserId);
const question = !m.deletedAt && isQuestionText(m.text);
const taskIntent = m.deletedAt ? null : detectTaskIntent(m.text);
const menuOpen = actionMenuMsgId === String(m.id);
const editingHere = editingMessage?.surface === "main" && String(editingMessage.message.id) === String(m.id);
const decided = decidedIds.has(String(m.id));
const askedYou = question && !mine && !decided;
const hasAttachments = messageAttachments(m).length > 0;
const msgClass = viewingDm
? `msg dm-bubble ${mine ? "mine" : "theirs"}${hasAttachments ? " has-attachments" : ""}`
: question
? "msg question-card"
: decided
? "msg decided-card"
: "msg";
return (
{divider}
{!m.deletedAt && (
// Hover-revealed action toolbar, the convention every
// chat client lands on: nothing in the resting state,
// an overflow menu on hover/focus. `open` pins it so
// the toolbar doesn't vanish under the popover when
// the pointer leaves the row.
openEmojiPicker({ mode: "reaction", messageId: m.id })}
>
{emojiPicker?.mode === "reaction" && String(emojiPicker.messageId) === String(m.id) && renderEmojiPicker("message")}
openForwardMessage(m)}
>
setActionMenuMsgId(menuOpen ? null : String(m.id))}
>
{menuOpen && (
void markMessageUnread(m)}
>
Mark unread from here
toggleSavedMessage(m)}
>
{savedMessageIds.has(String(m.id)) ? "Remove from saved" : "Save for later"}
void copyMessageLink(m)}>
Copy link
void shareMessage(m)}>
Share
{
setActionMenuMsgId(null);
setTaskError(null);
const linked = tasksBySourceMessageId.get(String(m.id));
if (linked) setTaskModal({ mode: "edit", task: linked });
else setTaskModal({ mode: "create", message: m });
}}
>
{tasksBySourceMessageId.has(String(m.id))
? "Open task"
: "Create task from this message"}
{!viewingDm && (
{
setActionMenuMsgId(null);
setProfileUserId(null);
setThreadRootId(m.id);
setShowAbout(false);
}}
>
Reply in thread
)}
{!viewingDm && about?.capabilities.canPin && (
{
setActionMenuMsgId(null);
void togglePin(m.id, pinnedIds.has(String(m.id)));
}}
>
{pinnedIds.has(String(m.id)) ? "Unpin from this room" : "Pin to this room"}
)}
{mine && (
<>
beginMessageEdit(m, "main")}
>
Edit message
{
setActionMenuMsgId(null);
setMessageMutationError(null);
setDeleteMessageTarget({ message: m, surface: "main" });
}}
>
Delete message
)}
)}
)}
{(!viewingDm || !mine) && (
openUserProfile(m.authorId)}
>
)}
{!viewingDm && (
openUserProfile(m.authorId)}>
{nameFor(m.authorId)}
{formatTime(m.createdAt)}
{m.editedAt && (edited) }
{pinnedIds.has(String(m.id)) && (
)}
{question && !decided && Open }
{askedYou && Asked you }
{decided && (
)}
)}
{viewingDm && (
{formatTime(m.createdAt)}
{m.editedAt && (edited) }
)}
{renderEditableMessageText(m, "main", question && !viewingDm ? "msg-text question" : "msg-text")}
{renderAttachments(m)}
{askedYou && !viewingDm && !editingHere && (
{
setProfileUserId(null);
setThreadRootId(m.id);
setShowAbout(false);
}}
>
Answer
setDecidedIds((prevSet) => new Set(prevSet).add(String(m.id)))}
>
Mark decided
)}
{(tasksBySourceMessageId.has(String(m.id)) || taskIntent?.isTask) && !editingHere && (
{tasksBySourceMessageId.has(String(m.id)) ? (
{
const linked = tasksBySourceMessageId.get(String(m.id));
if (!linked) return;
setTaskError(null);
setTaskModal({ mode: "edit", task: linked });
}}
>
Task created
) : (
{
setTaskError(null);
setTaskModal({ mode: "create", message: m });
}}
>
Create task
)}
{tasksBySourceMessageId.has(String(m.id)) ? "Linked to this message" : "Looks like a task"}
)}
{!m.deletedAt && (m.reactions ?? []).length > 0 && (
{(m.reactions ?? []).map((reaction) => (
void toggleReaction(m, reaction.emoji)}
>
{reaction.emoji}
{reaction.count}
))}
)}
{m.threadReplyCount > 0 && !viewingDm && (
{
setProfileUserId(null);
setThreadRootId(m.id);
setShowAbout(false);
}}
>
{threadParticipantIds(m.id).map((userId) => {
const participantColor = avatarColor(String(userId));
return (
{m.threadReplyCount} {m.threadReplyCount === 1 ? "reply" : "replies"}
{m.threadLastReplyAt && Last reply {relativeAge(m.threadLastReplyAt)} }
)}
);
})}
{pending.map((p) => {
const color = avatarColor(myUserId == null ? null : String(myUserId));
const body = (
<>
{!viewingDm && (
myUserId && openUserProfile(myUserId)}>
)}
{!viewingDm && (
myUserId && openUserProfile(myUserId)}
>
{me?.name ?? "You"}
)}
{p.status === "pending" ? "Sending" : "Failed"}
{renderTextWithMentions(p.text)}
);
// Match confirmed own messages: DM bubbles need the dm-row.mine
// wrapper or the optimistic "Sending" row sits on the left and
// jumps right once the server ack arrives.
if (viewingDm) {
return (
);
}
return (
{body}
);
})}
{error &&
{error}
}
{typingNames.length === 1 && `${typingNames[0]} is typingβ¦`}
{typingNames.length > 1 && `${typingNames.slice(0, 2).join(" and ")} are typingβ¦`}