This commit is contained in:
bipproduction
2025-10-21 17:02:13 +08:00
parent 7d5bf004da
commit cb01ccaeee

View File

@@ -100,117 +100,117 @@ export default function WaHookHome() {
<Divider color="rgba(0,255,200,0.2)" /> <Divider color="rgba(0,255,200,0.2)" />
<ScrollArea h={600} type="always" scrollHideDelay={0}> <pre>{JSON.stringify(data, null, 2)}</pre>
<Stack gap="md">
{data?.data?.list?.length ? (
data.data.list.map((item) => {
const msg = item.data?.entry?.[0]?.changes?.[0]?.value?.messages?.[0];
const contact = item.data?.entry?.[0]?.changes?.[0]?.value?.contacts?.[0];
const answer = (item.data as any)?.answer;
return (
<Card
key={item.id}
radius="lg"
p="lg"
style={{
background:
"linear-gradient(160deg, rgba(45,45,45,0.9) 0%, rgba(25,25,25,0.95) 100%)",
backdropFilter: "blur(14px)",
border: "1px solid rgba(0,255,200,0.25)",
boxShadow: "0 0 20px rgba(0,255,200,0.1)",
transition: "all 0.2s ease",
}}
>
<Stack gap={8}>
<Group gap="xs" align="center">
<IconUser size={16} color="#00FFC8" />
<Text c="#EAEAEA" fw={500}>
{contact?.profile?.name || "Unknown Sender"}
</Text>
</Group>
<Group gap="xs" align="center"> <Stack gap="md">
<IconMessageCircle size={16} color="#00FFFF" /> {data?.data?.list?.length ? (
<Text c="#9A9A9A" fz="sm"> data.data.list.map((item) => {
{msg?.text?.body || "(No message content)"} const msg = item.data?.entry?.[0]?.changes?.[0]?.value?.messages?.[0];
</Text> const contact = item.data?.entry?.[0]?.changes?.[0]?.value?.contacts?.[0];
</Group> const answer = (item.data as any)?.answer;
return (
<Card
key={item.id}
radius="lg"
p="lg"
style={{
background:
"linear-gradient(160deg, rgba(45,45,45,0.9) 0%, rgba(25,25,25,0.95) 100%)",
backdropFilter: "blur(14px)",
border: "1px solid rgba(0,255,200,0.25)",
boxShadow: "0 0 20px rgba(0,255,200,0.1)",
transition: "all 0.2s ease",
}}
>
<Stack gap={8}>
<Group gap="xs" align="center">
<IconUser size={16} color="#00FFC8" />
<Text c="#EAEAEA" fw={500}>
{contact?.profile?.name || "Unknown Sender"}
</Text>
</Group>
<Group gap="xs" align="center"> <Group gap="xs" align="center">
<IconHash size={16} color="#00FFC8" /> <IconMessageCircle size={16} color="#00FFFF" />
<Text c="#9A9A9A" fz="xs"> <Text c="#9A9A9A" fz="sm">
{msg?.id} {msg?.text?.body || "(No message content)"}
</Text> </Text>
</Group> </Group>
<Group gap="xs" align="center"> <Group gap="xs" align="center">
<IconCalendar size={16} color="#00FFFF" /> <IconHash size={16} color="#00FFC8" />
<Text c="#9A9A9A" fz="xs"> <Text c="#9A9A9A" fz="xs">
{dayjs(Number(msg?.timestamp) * 1000).format("YYYY-MM-DD HH:mm:ss")} {msg?.id}
</Text> </Text>
</Group> </Group>
<Group gap="xs" align="center"> <Group gap="xs" align="center">
<IconCode size={16} color="#B554FF" /> <IconCalendar size={16} color="#00FFFF" />
<Badge <Text c="#9A9A9A" fz="xs">
color="grape" {dayjs(Number(msg?.timestamp) * 1000).format("YYYY-MM-DD HH:mm:ss")}
radius="sm" </Text>
variant="light" </Group>
styles={{
root: { backgroundColor: "rgba(181,84,255,0.15)", color: "#EAEAEA" },
}}
>
{msg?.type || "Unknown"}
</Badge>
</Group>
{answer && ( <Group gap="xs" align="center">
<Card <IconCode size={16} color="#B554FF" />
p="sm" <Badge
radius="md" color="grape"
style={{ radius="sm"
backgroundColor: "rgba(45,45,45,0.7)", variant="light"
border: "1px solid rgba(0,255,255,0.15)", styles={{
boxShadow: "inset 0 0 10px rgba(0,255,255,0.1)", root: { backgroundColor: "rgba(181,84,255,0.15)", color: "#EAEAEA" },
}} }}
> >
<Stack gap={4}> {msg?.type || "Unknown"}
<Text c="#EAEAEA" fw={500} fz="sm"> </Badge>
Flow Response </Group>
</Text>
<Text c="#9A9A9A" fz="xs"> {answer && (
id: {answer.flowId} <Card
</Text> p="sm"
<Text c="#9A9A9A" fz="xs"> radius="md"
type: {answer.type} style={{
</Text> backgroundColor: "rgba(45,45,45,0.7)",
<Text c="#EAEAEA" fz="sm"> border: "1px solid rgba(0,255,255,0.15)",
{answer.text} boxShadow: "inset 0 0 10px rgba(0,255,255,0.1)",
</Text> }}
</Stack> >
</Card> <Stack gap={4}>
)} <Text c="#EAEAEA" fw={500} fz="sm">
</Stack> Flow Response
</Card> </Text>
); <Text c="#9A9A9A" fz="xs">
}) id: {answer.flowId}
) : ( </Text>
<Card <Text c="#9A9A9A" fz="xs">
radius="lg" type: {answer.type}
style={{ </Text>
backgroundColor: "#2D2D2D", <Text c="#EAEAEA" fz="sm">
border: "1px solid rgba(0,255,255,0.1)", {answer.text}
textAlign: "center", </Text>
padding: 60, </Stack>
}} </Card>
> )}
<Text c="#9A9A9A" fz="lg"> </Stack>
No webhook activity detected yet. </Card>
</Text> );
</Card> })
)} ) : (
</Stack> <Card
</ScrollArea> radius="lg"
style={{
backgroundColor: "#2D2D2D",
border: "1px solid rgba(0,255,255,0.1)",
textAlign: "center",
padding: 60,
}}
>
<Text c="#9A9A9A" fz="lg">
No webhook activity detected yet.
</Text>
</Card>
)}
</Stack>
<Group justify="center" mt="xl"> <Group justify="center" mt="xl">
<Pagination <Pagination