andyburke/autonomous.contact
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature: reactions

Browse source
This commit is contained in:
Andy Burke 2025-10-14 22:20:54 -07:00
parent 6500d9a9be
commit b8467ec870
16 changed files with 2603 additions and 383 deletions
Download patch file Download diff file Expand all files Collapse all files

20
public/tabs/chat/chat.css
View file

@ -234,10 +234,25 @@
}
#chat .message-container .message-content-container,
#chat .message-container .message-media-container {
#chat .message-container .message-media-container,
#chat .message-container .reactions-container {
padding-left: 8rem;
}
#chat .message-container .reactions-container:has(> .reaction-container) {
margin-top: 0.5rem;
margin-bottom: 0.25rem;
}
#chat .message-container .reactions-container .reaction-container {
display: inline-block;
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius);
margin-right: 0.5rem;
padding: 0.25rem;
font-size: large;
}
#chat .embed-container {
position: relative;
width: 100%;
@ -327,7 +342,8 @@
}
#chat .message-container .message-content-container,
#chat .message-container .message-media-container {
#chat .message-container .message-media-container,
#chat .message-container .reactions-container {
padding-left: 4rem;
}

45
public/tabs/chat/chat.html
View file

@ -22,7 +22,7 @@
id="chat-content"
data-feed
data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'topics.chat.read' ) !== -1"
data-source="/api/topics/${ document.body.dataset.topic }/events?type=chat&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'chat:able-able-able-able-able-able-able-able-able-able' }"
data-source="/api/topics/${ document.body.dataset.topic }/events?type=chat,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'chat:able-able-able-able-able-able-able-able-able-able' }"
data-longpolling="true"
data-reverse="true"
data-insert="append"
@ -77,12 +77,33 @@
user_tick_tock_class,
};
};
feed.__target_element = (item) => {
let target = feed;
switch (item.type) {
case "reaction":
target = document.querySelector(
`.message-container[data-event_id='${item.parent_id}'] > .reactions-container`,
);
break;
case "chat":
default:
target =
document.querySelector(
`.message-container[data-event_id='${item.parent_id}'] > .replies-container`,
) ?? feed;
break;
}
return target;
};
}
</script>
<template>
<template data-for_type="chat">
<div
id="${context.event.id}"
class="message-container ${context.user_tick_tock_class} ${context.time_tick_tock_class}"
data-event_id="${context.event.id}"
data-creator_id="${context.creator.id}"
data-temp_id="${context.event.meta?.temp_id ?? ''}"
>
@ -99,7 +120,12 @@
<div class="icon more-borderless"></div>
</label>
<button class="message-action mockup" data-action="react">
<button
class="message-action"
data-action="react"
data-reactions
data-smart
>
<i class="icon circle"></i><span class="action-name">React</span>
</button>
<button
@ -140,6 +166,19 @@
<div class="message-media-container">
${htmlify(context.event.data.media?.join("\n") ?? "")}
</div>
<div class="reactions-container"></div>
<div class="replies-container"></div>
</div>
</template>
<template data-for_type="reaction">
<div
id="${context.event.id}"
class="reaction-container"
data-event_id="${context.event.id}"
data-creator_id="${context.creator.id}"
data-temp_id="${context.event.meta?.temp_id ?? ''}"
>
<span class="reaction">${ context.event.data.reaction }</span>
</div>
</template>
</div>