dsrptlab/clientsflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): add outbound delivery statuses to omnichat thread UI

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-23 09:04:49 +07:00
parent 2f719219c4
commit f1fb2fbfa6
3 changed files with 136 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/app.vue
View File

@@ -86,6 +86,7 @@ type CommItem = {
audioUrl?: string;
duration?: string;
transcript?: string[];
deliveryStatus?: "PENDING" | "SENT" | "DELIVERED" | "READ" | "FAILED" | string | null;
};
type CommPin = {
@@ -3941,6 +3942,24 @@ function channelIcon(channel: "All" | CommItem["channel"]) {
return "phone";
}
function messageDeliveryUiState(item: CommItem): "none" | "sending" | "sent" | "delivered" | "failed" {
if (item.kind !== "message" || item.direction !== "out") return "none";
const rawStatus = String(item.deliveryStatus ?? "").toUpperCase();
if (rawStatus === "FAILED") return "failed";
if (rawStatus === "READ" || rawStatus === "DELIVERED") return "delivered";
if (rawStatus === "SENT") return "sent";
return "sending";
}
function messageDeliveryLabel(item: CommItem) {
const state = messageDeliveryUiState(item);
if (state === "failed") return "Delivery failed";
if (state === "delivered") return "Delivered";
if (state === "sent") return "Sent";
if (state === "sending") return "Sending";
return "";
}
function makeId(prefix: string) {
return `${prefix}-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
}
@@ -5599,6 +5618,34 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
</svg>
</span>
<span>{{ formatStamp(entry.item.at) }}</span>
<span
v-if="messageDeliveryUiState(entry.item) !== 'none'"
class="ml-1 inline-flex items-center align-middle text-base-content/70"
:title="messageDeliveryLabel(entry.item)"
>
<span
v-if="messageDeliveryUiState(entry.item) === 'sending'"
class="inline-block h-2.5 w-2.5 animate-spin rounded-full border border-current border-t-transparent"
/>
<span
v-else-if="messageDeliveryUiState(entry.item) === 'sent'"
class="text-[10px] leading-none"
>
✓
</span>
<span
v-else-if="messageDeliveryUiState(entry.item) === 'delivered'"
class="text-[10px] leading-none tracking-[-0.12em]"
>
✓✓
</span>
<span
v-else-if="messageDeliveryUiState(entry.item) === 'failed'"
class="text-[10px] font-semibold leading-none text-error"
>
!
</span>
</span>
</p>
</div>
</div>