+ {data?.data?.list?.length ? (
+ data.data.list.map((item) => {
+ let parsed: any = {};
+ try {
+ parsed = typeof item.data === 'string' ? JSON.parse(item.data) : item.data;
+ } catch (e) {
+ parsed = {};
+ }
- {/* {JSON.stringify(data?.data?.list, null, 2)} */}
+ return (
+
+
+
+
+
+
+
+
+
+ {parsed.name || "Unknown Sender"}
+
+
+
+
+ {parsed.number || "No number"}
+
+
+
+
+
+
+ {dayjs(item.createdAt).format("MMM DD, HH:mm:ss")}
+
+
+ {dayjs(item.createdAt).fromNow()}
+
+
+
-
- {data?.data?.list?.length ? (
- data.data.list.map((item) => {
- const parsed = JSON.parse((item.data as any) || "{}");
-
- return (
-
-
- {/* Nama & Nomor Pengirim */}
-
-
-
- {parsed.name || "Unknown Sender"} ({parsed.number || "No Number"})
+
+
+
+
+ Inbound Message
+ {parsed.question || "(Empty message)"}
+
- {/* Pertanyaan / Pesan */}
-
-
-
- {parsed.question || "(No question)"}
-
-
-
- {/* ID Record */}
-
-
-
- {item.id}
-
-
-
- {/* Timestamp */}
-
-
-
- {dayjs(item.createdAt).format("YYYY-MM-DD HH:mm:ss")}
-
-
-
- {/* Flow ID */}
- {parsed.flowId && (
-
-
-
- Flow: {parsed.flowId}
-
+ {parsed.answer && (
+
+
+
+
+
+ AI Response
+
+
+ {parsed.flowId && (
+
+ Flow: {parsed.flowId}
+
+ )}
- )}
+ {parsed.answer}
+
+ )}
- {/* Jawaban */}
- {parsed.answer && (
-
-
-
- Bot Answer
-
-
- {parsed.answer}
-
-
-
- )}
-
-
- );
- })
- ) : (
-
-
- No webhook activity detected yet.
+
+
+
+
+ ID: {item.id}
+
+
+
+
+
+ );
+ })
+ ) : (
+
+
+
+
+ No hook activity detected yet.
-
- )}
-
-
-
-
- {
- setPage(value);
- mutate();
- }}
- radius="xl"
- withEdges
- color="teal"
- size="md"
- styles={{
- control: {
- backgroundColor: "#2D2D2D",
- border: "1px solid rgba(0,255,200,0.15)",
- color: "#EAEAEA",
- },
- }}
- />
-
+
+
+ )}