agentic-ui-libs 1.2.0-beta.19 → 1.2.0-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/agentic-ui-libs.css +0 -64
- package/dist/features/md-editor/components/VariableMenu.d.ts.map +1 -1
- package/dist/features/tracing/components/SessionsList.d.ts.map +1 -1
- package/dist/features/tracing/components/detail/DetailPage.d.ts +1 -1
- package/dist/features/tracing/components/detail/DetailPage.d.ts.map +1 -1
- package/dist/features/tracing/components/detail/index.d.ts +0 -2
- package/dist/features/tracing/components/detail/index.d.ts.map +1 -1
- package/dist/features/tracing/components/detail/services/DetailPageService.d.ts +0 -1
- package/dist/features/tracing/components/detail/services/DetailPageService.d.ts.map +1 -1
- package/dist/features/tracing/components/detail/types.d.ts +0 -13
- package/dist/features/tracing/components/detail/types.d.ts.map +1 -1
- package/dist/features/tracing/types.d.ts +0 -11
- package/dist/features/tracing/types.d.ts.map +1 -1
- package/dist/index.js +14 -576
- package/dist/ui-libs.umd.js +14 -576
- package/package.json +1 -1
- package/dist/features/tracing/components/detail/EventLogsSlideout.d.ts +0 -58
- package/dist/features/tracing/components/detail/EventLogsSlideout.d.ts.map +0 -1
- package/dist/features/tracing/components/detail/VoiceEventLogsBanner.d.ts +0 -11
- package/dist/features/tracing/components/detail/VoiceEventLogsBanner.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -106312,7 +106312,6 @@ class DetailPageService {
|
|
|
106312
106312
|
* Observations are loaded separately per trace when user expands
|
|
106313
106313
|
*/
|
|
106314
106314
|
async fetchSessionDetail(sessionId) {
|
|
106315
|
-
var _a, _b;
|
|
106316
106315
|
const sessionResponse = await this.apiService.fetchSessionById({
|
|
106317
106316
|
sessionId,
|
|
106318
106317
|
projectId: this.projectId
|
|
@@ -106327,10 +106326,6 @@ class DetailPageService {
|
|
|
106327
106326
|
);
|
|
106328
106327
|
traceDetails = traceResponses.map((trace) => this.transformToTraceDetailData(trace));
|
|
106329
106328
|
}
|
|
106330
|
-
const firstTraceForSource = (_a = sessionResponse.traces) == null ? void 0 : _a[0];
|
|
106331
|
-
const sessionLevelSource = typeof sessionResponse.source === "string" && sessionResponse.source.length > 0 ? sessionResponse.source : void 0;
|
|
106332
|
-
const firstTraceSource = firstTraceForSource && typeof firstTraceForSource.source === "string" && firstTraceForSource.source.length > 0 ? firstTraceForSource.source : void 0;
|
|
106333
|
-
const resolvedSource = sessionLevelSource ?? firstTraceSource ?? ((_b = traceDetails[0]) == null ? void 0 : _b.source);
|
|
106334
106329
|
return {
|
|
106335
106330
|
id: sessionResponse.id,
|
|
106336
106331
|
projectId: sessionResponse.projectId,
|
|
@@ -106338,8 +106333,7 @@ class DetailPageService {
|
|
|
106338
106333
|
bookmarked: false,
|
|
106339
106334
|
public: false,
|
|
106340
106335
|
traces: traceDetails,
|
|
106341
|
-
scores: []
|
|
106342
|
-
source: resolvedSource
|
|
106336
|
+
scores: []
|
|
106343
106337
|
};
|
|
106344
106338
|
}
|
|
106345
106339
|
/**
|
|
@@ -106411,21 +106405,15 @@ class DetailPageService {
|
|
|
106411
106405
|
* @param onRemainingTrace - Callback for each additional trace as it loads (updates skeleton)
|
|
106412
106406
|
*/
|
|
106413
106407
|
async fetchSessionDetailProgressive(sessionId, onSessionMeta, onFirstTrace, onRemainingTrace) {
|
|
106414
|
-
var _a, _b;
|
|
106415
106408
|
const sessionResponse = await this.apiService.fetchSessionById({
|
|
106416
106409
|
sessionId,
|
|
106417
106410
|
projectId: this.projectId
|
|
106418
106411
|
});
|
|
106419
106412
|
const traceIds = (sessionResponse.traces || []).map((t2) => t2.id);
|
|
106420
|
-
const firstTrace = (_a = sessionResponse.traces) == null ? void 0 : _a[0];
|
|
106421
|
-
const firstTraceSource = firstTrace && typeof firstTrace.source === "string" && firstTrace.source.length > 0 ? firstTrace.source : void 0;
|
|
106422
|
-
const sessionLevelSource = typeof sessionResponse.source === "string" && sessionResponse.source.length > 0 ? sessionResponse.source : void 0;
|
|
106423
|
-
const resolvedSessionSource = sessionLevelSource ?? firstTraceSource;
|
|
106424
106413
|
onSessionMeta({
|
|
106425
106414
|
id: sessionResponse.id,
|
|
106426
106415
|
traceCount: traceIds.length,
|
|
106427
|
-
traceIds
|
|
106428
|
-
source: resolvedSessionSource
|
|
106416
|
+
traceIds
|
|
106429
106417
|
});
|
|
106430
106418
|
if (traceIds.length === 0) {
|
|
106431
106419
|
return {
|
|
@@ -106435,8 +106423,7 @@ class DetailPageService {
|
|
|
106435
106423
|
bookmarked: false,
|
|
106436
106424
|
public: false,
|
|
106437
106425
|
traces: [],
|
|
106438
|
-
scores: []
|
|
106439
|
-
source: resolvedSessionSource
|
|
106426
|
+
scores: []
|
|
106440
106427
|
};
|
|
106441
106428
|
}
|
|
106442
106429
|
const firstTraceId = traceIds[0];
|
|
@@ -106483,8 +106470,7 @@ class DetailPageService {
|
|
|
106483
106470
|
bookmarked: false,
|
|
106484
106471
|
public: false,
|
|
106485
106472
|
traces: allTraces,
|
|
106486
|
-
scores: []
|
|
106487
|
-
source: resolvedSessionSource ?? ((_b = allTraces[0]) == null ? void 0 : _b.source)
|
|
106473
|
+
scores: []
|
|
106488
106474
|
};
|
|
106489
106475
|
}
|
|
106490
106476
|
// ============================================================================
|
|
@@ -106578,7 +106564,6 @@ class DetailPageService {
|
|
|
106578
106564
|
totalCost: trace.totalCost || trace.calculatedTotalCost,
|
|
106579
106565
|
totalTokens: trace.totalTokens,
|
|
106580
106566
|
environment: trace.environment,
|
|
106581
|
-
source: typeof trace.source === "string" && trace.source.length > 0 ? trace.source : void 0,
|
|
106582
106567
|
observations: (trace.observations || []).map(
|
|
106583
106568
|
(obs) => this.transformObservation(obs)
|
|
106584
106569
|
),
|
|
@@ -109306,521 +109291,6 @@ function NodeDetailPanel({
|
|
|
109306
109291
|
)
|
|
109307
109292
|
] });
|
|
109308
109293
|
}
|
|
109309
|
-
const MicIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { flexShrink: 0 }, children: [
|
|
109310
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109311
|
-
"path",
|
|
109312
|
-
{
|
|
109313
|
-
d: "M8 2C7.60218 2 7.22064 2.15804 6.93934 2.43934C6.65804 2.72064 6.5 3.10218 6.5 3.5V6.5C6.5 6.89782 6.65804 7.27936 6.93934 7.56066C7.22064 7.84196 7.60218 8 8 8C8.39782 8 8.77936 7.84196 9.06066 7.56066C9.34196 7.27936 9.5 6.89782 9.5 6.5V3.5C9.5 3.10218 9.34196 2.72064 9.06066 2.43934C8.77936 2.15804 8.39782 2 8 2Z",
|
|
109314
|
-
style: { fill: "#155EEF" }
|
|
109315
|
-
}
|
|
109316
|
-
),
|
|
109317
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109318
|
-
"path",
|
|
109319
|
-
{
|
|
109320
|
-
d: "M5.5 6V6.5C5.5 7.16304 5.76339 7.79893 6.23223 8.26777C6.70107 8.73661 7.33696 9 8 9C8.66304 9 9.29893 8.73661 9.76777 8.26777C10.2366 7.79893 10.5 7.16304 10.5 6.5V6",
|
|
109321
|
-
style: { stroke: "#155EEF", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }
|
|
109322
|
-
}
|
|
109323
|
-
),
|
|
109324
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109325
|
-
"path",
|
|
109326
|
-
{
|
|
109327
|
-
d: "M8 9V11",
|
|
109328
|
-
style: { stroke: "#155EEF", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }
|
|
109329
|
-
}
|
|
109330
|
-
),
|
|
109331
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109332
|
-
"path",
|
|
109333
|
-
{
|
|
109334
|
-
d: "M6.5 11H9.5",
|
|
109335
|
-
style: { stroke: "#155EEF", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }
|
|
109336
|
-
}
|
|
109337
|
-
)
|
|
109338
|
-
] });
|
|
109339
|
-
function VoiceEventLogsBanner({ onViewEventLogs }) {
|
|
109340
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded-[8px] bg-[#FFFFFF] border border-[#D0D5DD] px-[12px] py-[8px] mb-[8px]", children: [
|
|
109341
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
|
|
109342
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(MicIcon, {}),
|
|
109343
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-[11px] leading-[14px] text-[#98A2B3] uppercase tracking-[0.04em]", children: "Voice-to-Voice Event Logs" })
|
|
109344
|
-
] }),
|
|
109345
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109346
|
-
"button",
|
|
109347
|
-
{
|
|
109348
|
-
onClick: onViewEventLogs,
|
|
109349
|
-
className: "text-[12px] font-medium text-[#155EEF] hover:text-[#344054] hover:underline transition-colors cursor-pointer bg-transparent border-none p-0",
|
|
109350
|
-
"data-test-id": "view-event-logs-btn",
|
|
109351
|
-
children: "View Event Logs"
|
|
109352
|
-
}
|
|
109353
|
-
)
|
|
109354
|
-
] });
|
|
109355
|
-
}
|
|
109356
|
-
function AlignLeftIcon({ className }) {
|
|
109357
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109358
|
-
"svg",
|
|
109359
|
-
{
|
|
109360
|
-
width: "16",
|
|
109361
|
-
height: "16",
|
|
109362
|
-
viewBox: "0 0 16 16",
|
|
109363
|
-
fill: "none",
|
|
109364
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
109365
|
-
className,
|
|
109366
|
-
"aria-hidden": "true",
|
|
109367
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109368
|
-
"path",
|
|
109369
|
-
{
|
|
109370
|
-
d: "M10.6667 6.66667H2M13.3333 4H2M13.3333 9.33333H2M10.6667 12H2",
|
|
109371
|
-
stroke: "currentColor",
|
|
109372
|
-
strokeWidth: "1.3",
|
|
109373
|
-
strokeLinecap: "round",
|
|
109374
|
-
strokeLinejoin: "round"
|
|
109375
|
-
}
|
|
109376
|
-
)
|
|
109377
|
-
}
|
|
109378
|
-
);
|
|
109379
|
-
}
|
|
109380
|
-
function JsonViewIcon({ className }) {
|
|
109381
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109382
|
-
"svg",
|
|
109383
|
-
{
|
|
109384
|
-
width: "16",
|
|
109385
|
-
height: "16",
|
|
109386
|
-
viewBox: "0 0 16 16",
|
|
109387
|
-
fill: "none",
|
|
109388
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
109389
|
-
className,
|
|
109390
|
-
"aria-hidden": "true",
|
|
109391
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109392
|
-
"path",
|
|
109393
|
-
{
|
|
109394
|
-
d: "M14 6.16602H8M14 2.66602H2M14 9.83268H8M14 13.3327H2M2.85333 5.70602L5.43111 7.63935C5.62411 7.78409 5.7206 7.85647 5.75511 7.94519C5.78533 8.02291 5.78533 8.10913 5.75511 8.18684C5.7206 8.27556 5.62411 8.34794 5.43111 8.49268L2.85333 10.426C2.57868 10.632 2.44135 10.735 2.3264 10.7326C2.22637 10.7305 2.13256 10.6836 2.07088 10.6048C2 10.5143 2 10.3427 2 9.99935V6.13268C2 5.78937 2 5.61771 2.07088 5.52718C2.13256 5.4484 2.22637 5.4015 2.3264 5.39942C2.44135 5.39703 2.57868 5.50003 2.85333 5.70602Z",
|
|
109395
|
-
stroke: "currentColor",
|
|
109396
|
-
strokeWidth: "1.3",
|
|
109397
|
-
strokeLinecap: "round",
|
|
109398
|
-
strokeLinejoin: "round"
|
|
109399
|
-
}
|
|
109400
|
-
)
|
|
109401
|
-
}
|
|
109402
|
-
);
|
|
109403
|
-
}
|
|
109404
|
-
function pickString(obj, keys2) {
|
|
109405
|
-
for (const key of keys2) {
|
|
109406
|
-
const value = obj[key];
|
|
109407
|
-
if (typeof value === "string" && value.length > 0) return value;
|
|
109408
|
-
if (typeof value === "number") return String(value);
|
|
109409
|
-
}
|
|
109410
|
-
return void 0;
|
|
109411
|
-
}
|
|
109412
|
-
function coerceDirection(raw) {
|
|
109413
|
-
if (raw === "incoming" || raw === "server" || raw === "response") return "in";
|
|
109414
|
-
return "out";
|
|
109415
|
-
}
|
|
109416
|
-
function normalizeEvent(raw, fallbackId, docTimestamp) {
|
|
109417
|
-
if (!raw || typeof raw !== "object") {
|
|
109418
|
-
return {
|
|
109419
|
-
id: fallbackId,
|
|
109420
|
-
timestamp: docTimestamp,
|
|
109421
|
-
name: "event",
|
|
109422
|
-
direction: "out",
|
|
109423
|
-
payload: raw
|
|
109424
|
-
};
|
|
109425
|
-
}
|
|
109426
|
-
const obj = raw;
|
|
109427
|
-
const id = pickString(obj, ["event_id", "eventId", "_id", "id"]) ?? fallbackId;
|
|
109428
|
-
const name = pickString(obj, ["type", "eventType", "event", "name"]) ?? "event";
|
|
109429
|
-
const direction = coerceDirection(obj.direction);
|
|
109430
|
-
return {
|
|
109431
|
-
id,
|
|
109432
|
-
timestamp: docTimestamp,
|
|
109433
|
-
name,
|
|
109434
|
-
direction,
|
|
109435
|
-
payload: raw
|
|
109436
|
-
};
|
|
109437
|
-
}
|
|
109438
|
-
function flattenEvents(data) {
|
|
109439
|
-
if (data === null || data === void 0) return [];
|
|
109440
|
-
const out = [];
|
|
109441
|
-
const visitDoc = (doc2, docIdx) => {
|
|
109442
|
-
if (!doc2 || typeof doc2 !== "object") return;
|
|
109443
|
-
const docObj = doc2;
|
|
109444
|
-
const docTimestamp = pickString(docObj, ["createdOn", "sT", "createdAt"]);
|
|
109445
|
-
const events = docObj.events;
|
|
109446
|
-
if (Array.isArray(events)) {
|
|
109447
|
-
events.forEach((ev, evIdx) => {
|
|
109448
|
-
out.push(normalizeEvent(ev, `${docIdx}-${evIdx}`, docTimestamp));
|
|
109449
|
-
});
|
|
109450
|
-
} else {
|
|
109451
|
-
out.push(normalizeEvent(doc2, String(docIdx), docTimestamp));
|
|
109452
|
-
}
|
|
109453
|
-
};
|
|
109454
|
-
if (Array.isArray(data)) {
|
|
109455
|
-
data.forEach((doc2, docIdx) => visitDoc(doc2, docIdx));
|
|
109456
|
-
return out;
|
|
109457
|
-
}
|
|
109458
|
-
if (typeof data === "object") {
|
|
109459
|
-
const obj = data;
|
|
109460
|
-
if (Array.isArray(obj.events)) {
|
|
109461
|
-
visitDoc(obj, 0);
|
|
109462
|
-
return out;
|
|
109463
|
-
}
|
|
109464
|
-
if (Array.isArray(obj.data)) {
|
|
109465
|
-
return flattenEvents(obj.data);
|
|
109466
|
-
}
|
|
109467
|
-
}
|
|
109468
|
-
return [];
|
|
109469
|
-
}
|
|
109470
|
-
function formatEventTime(iso) {
|
|
109471
|
-
if (!iso) return "--:--:--:---";
|
|
109472
|
-
const d3 = new Date(iso);
|
|
109473
|
-
if (Number.isNaN(d3.getTime())) return "--:--:--:---";
|
|
109474
|
-
const hh = String(d3.getHours()).padStart(2, "0");
|
|
109475
|
-
const mm = String(d3.getMinutes()).padStart(2, "0");
|
|
109476
|
-
const ss = String(d3.getSeconds()).padStart(2, "0");
|
|
109477
|
-
const ms = String(d3.getMilliseconds()).padStart(3, "0");
|
|
109478
|
-
return `${hh}:${mm}:${ss}:${ms}`;
|
|
109479
|
-
}
|
|
109480
|
-
function stringifyPayload(payload) {
|
|
109481
|
-
if (payload === null || payload === void 0) return "";
|
|
109482
|
-
if (typeof payload === "string") {
|
|
109483
|
-
try {
|
|
109484
|
-
return JSON.stringify(JSON.parse(payload), null, 2);
|
|
109485
|
-
} catch {
|
|
109486
|
-
return payload;
|
|
109487
|
-
}
|
|
109488
|
-
}
|
|
109489
|
-
try {
|
|
109490
|
-
return JSON.stringify(payload, null, 2);
|
|
109491
|
-
} catch {
|
|
109492
|
-
return String(payload);
|
|
109493
|
-
}
|
|
109494
|
-
}
|
|
109495
|
-
function compactPayload(payload) {
|
|
109496
|
-
if (payload === null || payload === void 0) return "";
|
|
109497
|
-
if (typeof payload === "string") {
|
|
109498
|
-
try {
|
|
109499
|
-
return JSON.stringify(JSON.parse(payload));
|
|
109500
|
-
} catch {
|
|
109501
|
-
return payload;
|
|
109502
|
-
}
|
|
109503
|
-
}
|
|
109504
|
-
try {
|
|
109505
|
-
return JSON.stringify(payload);
|
|
109506
|
-
} catch {
|
|
109507
|
-
return String(payload);
|
|
109508
|
-
}
|
|
109509
|
-
}
|
|
109510
|
-
function PayloadPanel({ payload, compactText }) {
|
|
109511
|
-
const [viewMode, setViewMode] = useState("json");
|
|
109512
|
-
const [fullscreen, setFullscreen] = useState(false);
|
|
109513
|
-
const [copied, setCopied] = useState(false);
|
|
109514
|
-
const displayText = viewMode === "json" ? payload : compactText;
|
|
109515
|
-
const handleCopy = useCallback(async () => {
|
|
109516
|
-
try {
|
|
109517
|
-
await navigator.clipboard.writeText(displayText);
|
|
109518
|
-
setCopied(true);
|
|
109519
|
-
setTimeout(() => setCopied(false), 1500);
|
|
109520
|
-
} catch {
|
|
109521
|
-
}
|
|
109522
|
-
}, [displayText]);
|
|
109523
|
-
const toolbar = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[42px] px-[10px] border-b border-[#D0D5DD] flex items-center justify-between flex-shrink-0 bg-white", children: [
|
|
109524
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
|
|
109525
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109526
|
-
"button",
|
|
109527
|
-
{
|
|
109528
|
-
type: "button",
|
|
109529
|
-
onClick: () => setViewMode("json"),
|
|
109530
|
-
className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "json" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
|
|
109531
|
-
title: "Pretty JSON",
|
|
109532
|
-
"aria-label": "Pretty JSON view",
|
|
109533
|
-
"aria-pressed": viewMode === "json",
|
|
109534
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewIcon, { className: "w-[16px] h-[16px]" })
|
|
109535
|
-
}
|
|
109536
|
-
),
|
|
109537
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109538
|
-
"button",
|
|
109539
|
-
{
|
|
109540
|
-
type: "button",
|
|
109541
|
-
onClick: () => setViewMode("text"),
|
|
109542
|
-
className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "text" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
|
|
109543
|
-
title: "Compact text",
|
|
109544
|
-
"aria-label": "Compact text view",
|
|
109545
|
-
"aria-pressed": viewMode === "text",
|
|
109546
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeftIcon, { className: "w-[16px] h-[16px]" })
|
|
109547
|
-
}
|
|
109548
|
-
)
|
|
109549
|
-
] }),
|
|
109550
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
|
|
109551
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109552
|
-
"button",
|
|
109553
|
-
{
|
|
109554
|
-
type: "button",
|
|
109555
|
-
onClick: () => setFullscreen((v) => !v),
|
|
109556
|
-
className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
|
|
109557
|
-
title: fullscreen ? "Exit fullscreen" : "Fullscreen",
|
|
109558
|
-
"aria-label": fullscreen ? "Exit fullscreen" : "Fullscreen",
|
|
109559
|
-
children: fullscreen ? /* @__PURE__ */ jsxRuntimeExports.jsx(Minimize2, { className: "w-[16px] h-[16px]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { className: "w-[16px] h-[16px]" })
|
|
109560
|
-
}
|
|
109561
|
-
),
|
|
109562
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109563
|
-
"button",
|
|
109564
|
-
{
|
|
109565
|
-
type: "button",
|
|
109566
|
-
onClick: () => void handleCopy(),
|
|
109567
|
-
className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
|
|
109568
|
-
title: "Copy to clipboard",
|
|
109569
|
-
"aria-label": "Copy payload",
|
|
109570
|
-
"data-test-id": "event-logs-row-copy",
|
|
109571
|
-
children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-[16px] h-[16px] text-[#12B76A]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-[16px] h-[16px]" })
|
|
109572
|
-
}
|
|
109573
|
-
)
|
|
109574
|
-
] })
|
|
109575
|
-
] });
|
|
109576
|
-
if (fullscreen) {
|
|
109577
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[20000] flex flex-col bg-[#F9FAFB]", children: [
|
|
109578
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[48px] px-[16px] border-b border-[#E4E7EC] flex items-center justify-between flex-shrink-0 bg-white", children: [
|
|
109579
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
|
|
109580
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109581
|
-
"button",
|
|
109582
|
-
{
|
|
109583
|
-
type: "button",
|
|
109584
|
-
onClick: () => setViewMode("json"),
|
|
109585
|
-
className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "json" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
|
|
109586
|
-
title: "Pretty JSON",
|
|
109587
|
-
"aria-label": "Pretty JSON view",
|
|
109588
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewIcon, { className: "w-[16px] h-[16px]" })
|
|
109589
|
-
}
|
|
109590
|
-
),
|
|
109591
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109592
|
-
"button",
|
|
109593
|
-
{
|
|
109594
|
-
type: "button",
|
|
109595
|
-
onClick: () => setViewMode("text"),
|
|
109596
|
-
className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "text" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
|
|
109597
|
-
title: "Compact text",
|
|
109598
|
-
"aria-label": "Compact text view",
|
|
109599
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeftIcon, { className: "w-[16px] h-[16px]" })
|
|
109600
|
-
}
|
|
109601
|
-
)
|
|
109602
|
-
] }),
|
|
109603
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
|
|
109604
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109605
|
-
"button",
|
|
109606
|
-
{
|
|
109607
|
-
type: "button",
|
|
109608
|
-
onClick: () => void handleCopy(),
|
|
109609
|
-
className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
|
|
109610
|
-
title: "Copy to clipboard",
|
|
109611
|
-
"aria-label": "Copy payload",
|
|
109612
|
-
children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-[16px] h-[16px] text-[#12B76A]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-[16px] h-[16px]" })
|
|
109613
|
-
}
|
|
109614
|
-
),
|
|
109615
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109616
|
-
"button",
|
|
109617
|
-
{
|
|
109618
|
-
type: "button",
|
|
109619
|
-
onClick: () => setFullscreen(false),
|
|
109620
|
-
className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
|
|
109621
|
-
title: "Exit fullscreen",
|
|
109622
|
-
"aria-label": "Exit fullscreen",
|
|
109623
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Minimize2, { className: "w-[16px] h-[16px]" })
|
|
109624
|
-
}
|
|
109625
|
-
)
|
|
109626
|
-
] })
|
|
109627
|
-
] }),
|
|
109628
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "flex-1 overflow-auto m-0 p-[20px] text-[13px] leading-[20px] font-mono text-[#344054] whitespace-pre-wrap break-all", children: displayText })
|
|
109629
|
-
] }) });
|
|
109630
|
-
}
|
|
109631
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-[10px] border border-[#D0D5DD] overflow-hidden mt-[12px]", children: [
|
|
109632
|
-
toolbar,
|
|
109633
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "m-0 bg-[#F9FAFB] text-[#344054] p-[12px] text-[12px] leading-[18px] font-mono whitespace-pre-wrap break-all overflow-auto max-h-[360px]", children: displayText })
|
|
109634
|
-
] });
|
|
109635
|
-
}
|
|
109636
|
-
function EventRow({ event, isExpanded, onToggle }) {
|
|
109637
|
-
const jsonText = useMemo(() => stringifyPayload(event.payload), [event.payload]);
|
|
109638
|
-
const compactText = useMemo(() => compactPayload(event.payload), [event.payload]);
|
|
109639
|
-
const hasPayload = jsonText.length > 0;
|
|
109640
|
-
const isInput = event.direction === "in";
|
|
109641
|
-
const DirectionIcon = isInput ? ArrowUp : ArrowDown;
|
|
109642
|
-
const directionLabel = isInput ? "Input" : "Output";
|
|
109643
|
-
const circleClasses = isInput ? "border-[#079455] text-[#079455]" : "border-[#D92D20] text-[#D92D20]";
|
|
109644
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex items-start gap-[12px]", "data-test-id": "event-logs-row", children: [
|
|
109645
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex-shrink-0 flex flex-col items-center w-[16px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109646
|
-
"div",
|
|
109647
|
-
{
|
|
109648
|
-
className: `relative z-10 w-[16px] h-[16px] rounded-full bg-white border flex items-center justify-center ${circleClasses}`,
|
|
109649
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(DirectionIcon, { className: "w-[8px] h-[8px]", strokeWidth: 2.5 })
|
|
109650
|
-
}
|
|
109651
|
-
) }),
|
|
109652
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 pb-[24px]", children: [
|
|
109653
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-[16px]", children: [
|
|
109654
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
109655
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[12px] leading-[16px] text-[#667085]", children: directionLabel }),
|
|
109656
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[14px] leading-[20px] font-medium text-[#344054] mt-[2px] break-all", children: event.name }),
|
|
109657
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109658
|
-
"button",
|
|
109659
|
-
{
|
|
109660
|
-
type: "button",
|
|
109661
|
-
onClick: onToggle,
|
|
109662
|
-
className: "text-[13px] leading-[18px] text-[#155EEF] hover:underline mt-[4px] font-medium",
|
|
109663
|
-
"data-test-id": "event-logs-view-details",
|
|
109664
|
-
children: isExpanded ? "Hide details" : "View details"
|
|
109665
|
-
}
|
|
109666
|
-
)
|
|
109667
|
-
] }),
|
|
109668
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0 text-[12px] leading-[18px] text-[#344054] font-mono tabular-nums whitespace-nowrap pt-[2px]", children: formatEventTime(event.timestamp) })
|
|
109669
|
-
] }),
|
|
109670
|
-
isExpanded && (hasPayload ? /* @__PURE__ */ jsxRuntimeExports.jsx(PayloadPanel, { payload: jsonText, compactText }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-[12px] text-[12px] text-[#667085] italic", children: "No payload recorded for this event." }))
|
|
109671
|
-
] })
|
|
109672
|
-
] });
|
|
109673
|
-
}
|
|
109674
|
-
function EventLogsSlideout({
|
|
109675
|
-
isOpen,
|
|
109676
|
-
onClose,
|
|
109677
|
-
sessionId,
|
|
109678
|
-
fetchEventLogs
|
|
109679
|
-
}) {
|
|
109680
|
-
const [rawData, setRawData] = useState(null);
|
|
109681
|
-
const [loading, setLoading] = useState(false);
|
|
109682
|
-
const [error, setError] = useState(null);
|
|
109683
|
-
const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
|
|
109684
|
-
useEffect(() => {
|
|
109685
|
-
if (!isOpen || !sessionId || !fetchEventLogs) return;
|
|
109686
|
-
let cancelled = false;
|
|
109687
|
-
setLoading(true);
|
|
109688
|
-
setError(null);
|
|
109689
|
-
setRawData(null);
|
|
109690
|
-
(async () => {
|
|
109691
|
-
try {
|
|
109692
|
-
const data = await fetchEventLogs(sessionId);
|
|
109693
|
-
if (cancelled) return;
|
|
109694
|
-
setRawData(data);
|
|
109695
|
-
} catch (err) {
|
|
109696
|
-
if (cancelled) return;
|
|
109697
|
-
setError(err instanceof Error ? err.message : "Failed to fetch event logs");
|
|
109698
|
-
} finally {
|
|
109699
|
-
if (!cancelled) setLoading(false);
|
|
109700
|
-
}
|
|
109701
|
-
})();
|
|
109702
|
-
return () => {
|
|
109703
|
-
cancelled = true;
|
|
109704
|
-
};
|
|
109705
|
-
}, [isOpen, sessionId, fetchEventLogs]);
|
|
109706
|
-
const events = useMemo(() => flattenEvents(rawData), [rawData]);
|
|
109707
|
-
useEffect(() => {
|
|
109708
|
-
if (!isOpen) return;
|
|
109709
|
-
const handleKey = (e3) => {
|
|
109710
|
-
if (e3.key === "Escape") onClose();
|
|
109711
|
-
};
|
|
109712
|
-
document.addEventListener("keydown", handleKey);
|
|
109713
|
-
return () => document.removeEventListener("keydown", handleKey);
|
|
109714
|
-
}, [isOpen, onClose]);
|
|
109715
|
-
useEffect(() => {
|
|
109716
|
-
if (!isOpen) {
|
|
109717
|
-
setExpandedIds(/* @__PURE__ */ new Set());
|
|
109718
|
-
setRawData(null);
|
|
109719
|
-
setError(null);
|
|
109720
|
-
}
|
|
109721
|
-
}, [isOpen]);
|
|
109722
|
-
const toggleRow = useCallback((id) => {
|
|
109723
|
-
setExpandedIds((prev) => {
|
|
109724
|
-
const next = new Set(prev);
|
|
109725
|
-
if (next.has(id)) next.delete(id);
|
|
109726
|
-
else next.add(id);
|
|
109727
|
-
return next;
|
|
109728
|
-
});
|
|
109729
|
-
}, []);
|
|
109730
|
-
const expandAll = useCallback(() => {
|
|
109731
|
-
setExpandedIds(new Set(events.map((e3) => e3.id)));
|
|
109732
|
-
}, [events]);
|
|
109733
|
-
const collapseAll = useCallback(() => {
|
|
109734
|
-
setExpandedIds(/* @__PURE__ */ new Set());
|
|
109735
|
-
}, []);
|
|
109736
|
-
if (!isOpen) return null;
|
|
109737
|
-
const showToolbar = !loading && !error && events.length > 0;
|
|
109738
|
-
const allExpanded = showToolbar && expandedIds.size === events.length;
|
|
109739
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[10000]", children: [
|
|
109740
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109741
|
-
"div",
|
|
109742
|
-
{
|
|
109743
|
-
className: "absolute inset-0 bg-black/40",
|
|
109744
|
-
onClick: onClose,
|
|
109745
|
-
"aria-hidden": "true"
|
|
109746
|
-
}
|
|
109747
|
-
),
|
|
109748
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
109749
|
-
"div",
|
|
109750
|
-
{
|
|
109751
|
-
className: "absolute top-0 right-0 bottom-0 bg-white shadow-2xl flex flex-col",
|
|
109752
|
-
style: { width: "720px", maxWidth: "100vw" },
|
|
109753
|
-
role: "dialog",
|
|
109754
|
-
"aria-label": "Event Logs",
|
|
109755
|
-
onClick: (e3) => e3.stopPropagation(),
|
|
109756
|
-
children: [
|
|
109757
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between h-[56px] px-[20px] border-b border-[#E4E7EC] flex-shrink-0", children: [
|
|
109758
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
|
|
109759
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[16px] font-semibold text-[#101828]", children: "Event Logs" }),
|
|
109760
|
-
!loading && !error && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] font-medium text-[#667085] bg-[#F2F4F7] rounded-[10px] px-[8px] py-[2px]", children: events.length })
|
|
109761
|
-
] }),
|
|
109762
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
|
|
109763
|
-
showToolbar && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109764
|
-
"button",
|
|
109765
|
-
{
|
|
109766
|
-
type: "button",
|
|
109767
|
-
onClick: allExpanded ? collapseAll : expandAll,
|
|
109768
|
-
className: "text-[13px] font-medium text-[#155EEF] hover:underline px-[8px] py-[6px] rounded-[6px] transition-colors",
|
|
109769
|
-
"data-test-id": "event-logs-toggle-all",
|
|
109770
|
-
children: allExpanded ? "Collapse all" : "Expand all"
|
|
109771
|
-
}
|
|
109772
|
-
),
|
|
109773
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109774
|
-
"button",
|
|
109775
|
-
{
|
|
109776
|
-
type: "button",
|
|
109777
|
-
onClick: onClose,
|
|
109778
|
-
className: "p-[8px] rounded-[6px] hover:bg-[#F2F4F7] transition-colors",
|
|
109779
|
-
title: "Close Event Logs",
|
|
109780
|
-
"aria-label": "Close Event Logs",
|
|
109781
|
-
"data-test-id": "event-logs-close-btn",
|
|
109782
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[16px] h-[16px] text-[#344054]" })
|
|
109783
|
-
}
|
|
109784
|
-
)
|
|
109785
|
-
] })
|
|
109786
|
-
] }),
|
|
109787
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-[8px] text-[13px] text-[#667085]", children: [
|
|
109788
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-[20px] h-[20px] animate-spin text-[#155EEF]" }),
|
|
109789
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Loading event logs…" })
|
|
109790
|
-
] }) : error ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-[8px] text-[13px] text-[#B42318] px-[24px] text-center", children: [
|
|
109791
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Couldn't load event logs" }),
|
|
109792
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] text-[#667085]", children: error })
|
|
109793
|
-
] }) : events.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full flex items-center justify-center text-[13px] text-[#667085]", children: "No events recorded for this session yet." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative px-[24px] pt-[28px] pb-[8px]", children: [
|
|
109794
|
-
events.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109795
|
-
"div",
|
|
109796
|
-
{
|
|
109797
|
-
className: "absolute w-px bg-[#D0D5DD]",
|
|
109798
|
-
style: { left: "32px", top: "36px", bottom: "28px" },
|
|
109799
|
-
"aria-hidden": "true"
|
|
109800
|
-
}
|
|
109801
|
-
),
|
|
109802
|
-
events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
109803
|
-
EventRow,
|
|
109804
|
-
{
|
|
109805
|
-
event,
|
|
109806
|
-
isExpanded: expandedIds.has(event.id),
|
|
109807
|
-
onToggle: () => toggleRow(event.id)
|
|
109808
|
-
},
|
|
109809
|
-
event.id
|
|
109810
|
-
))
|
|
109811
|
-
] }) })
|
|
109812
|
-
]
|
|
109813
|
-
}
|
|
109814
|
-
)
|
|
109815
|
-
] }) });
|
|
109816
|
-
}
|
|
109817
|
-
const SESSION_SOURCES_WITH_EVENT_LOGS = /* @__PURE__ */ new Set(["AIS-CC", "XO"]);
|
|
109818
|
-
function sessionSourceShowsEventLogs(source) {
|
|
109819
|
-
if (source === void 0 || source === "") {
|
|
109820
|
-
return false;
|
|
109821
|
-
}
|
|
109822
|
-
return SESSION_SOURCES_WITH_EVENT_LOGS.has(source);
|
|
109823
|
-
}
|
|
109824
109294
|
function DetailPage({
|
|
109825
109295
|
mode: initialMode,
|
|
109826
109296
|
sessionId: initialSessionId,
|
|
@@ -109833,9 +109303,7 @@ function DetailPage({
|
|
|
109833
109303
|
batchSize = DEFAULT_BATCH_SIZE,
|
|
109834
109304
|
initialTraceCount,
|
|
109835
109305
|
initialSessionData,
|
|
109836
|
-
runHeaderInputMode = "display"
|
|
109837
|
-
onViewEventLogs,
|
|
109838
|
-
fetchEventLogs
|
|
109306
|
+
runHeaderInputMode = "display"
|
|
109839
109307
|
}) {
|
|
109840
109308
|
const [currentMode, setCurrentMode] = useState(initialMode);
|
|
109841
109309
|
const [currentSessionId, setCurrentSessionId] = useState(initialSessionId);
|
|
@@ -109845,7 +109313,6 @@ function DetailPage({
|
|
|
109845
109313
|
const traceId = currentTraceId;
|
|
109846
109314
|
const [selectedNode, setSelectedNode] = useState(null);
|
|
109847
109315
|
const [copiedId, setCopiedId] = useState(false);
|
|
109848
|
-
const [isEventLogsOpen, setIsEventLogsOpen] = useState(false);
|
|
109849
109316
|
const minObservationLevel = "DEFAULT";
|
|
109850
109317
|
const [hasAutoSelected, setHasAutoSelected] = useState(false);
|
|
109851
109318
|
const hasInitialData = mode === "session" && initialSessionData;
|
|
@@ -109891,8 +109358,7 @@ function DetailPage({
|
|
|
109891
109358
|
bookmarked: false,
|
|
109892
109359
|
public: false,
|
|
109893
109360
|
traces: [],
|
|
109894
|
-
scores: []
|
|
109895
|
-
source: meta.source
|
|
109361
|
+
scores: []
|
|
109896
109362
|
});
|
|
109897
109363
|
setLoadingState("success");
|
|
109898
109364
|
},
|
|
@@ -109900,8 +109366,7 @@ function DetailPage({
|
|
|
109900
109366
|
(trace, observations) => {
|
|
109901
109367
|
setSessionData((prev) => prev ? {
|
|
109902
109368
|
...prev,
|
|
109903
|
-
traces: [trace]
|
|
109904
|
-
source: prev.source ?? trace.source
|
|
109369
|
+
traces: [trace]
|
|
109905
109370
|
} : prev);
|
|
109906
109371
|
setTraceObservations((prev) => ({
|
|
109907
109372
|
...prev,
|
|
@@ -110077,10 +109542,6 @@ function DetailPage({
|
|
|
110077
109542
|
} : null
|
|
110078
109543
|
};
|
|
110079
109544
|
}, [mode, sessionData, traceData, sessionId, traceId, initialSessionData]);
|
|
110080
|
-
const sessionSourceForEventLogs = useMemo(() => {
|
|
110081
|
-
return (initialSessionData == null ? void 0 : initialSessionData.source) ?? (sessionData == null ? void 0 : sessionData.source);
|
|
110082
|
-
}, [initialSessionData == null ? void 0 : initialSessionData.source, sessionData == null ? void 0 : sessionData.source]);
|
|
110083
|
-
const showEventLogsBanner = mode === "session" && sessionSourceShowsEventLogs(sessionSourceForEventLogs);
|
|
110084
109545
|
const traces = useMemo(() => {
|
|
110085
109546
|
if (mode === "session" && sessionData) {
|
|
110086
109547
|
const sorted = [...sessionData.traces].sort((a4, b2) => {
|
|
@@ -110129,16 +109590,6 @@ function DetailPage({
|
|
|
110129
109590
|
mode,
|
|
110130
109591
|
traceData
|
|
110131
109592
|
]);
|
|
110132
|
-
const handleViewEventLogs = useCallback(() => {
|
|
110133
|
-
setIsEventLogsOpen(true);
|
|
110134
|
-
if (onViewEventLogs && sessionId) {
|
|
110135
|
-
const firstTraceId = traces.length > 0 ? traces[0].id : void 0;
|
|
110136
|
-
onViewEventLogs(sessionId, firstTraceId);
|
|
110137
|
-
}
|
|
110138
|
-
}, [onViewEventLogs, sessionId, traces]);
|
|
110139
|
-
const handleCloseEventLogs = useCallback(() => {
|
|
110140
|
-
setIsEventLogsOpen(false);
|
|
110141
|
-
}, []);
|
|
110142
109593
|
const handleNodeSelect = useCallback((node) => {
|
|
110143
109594
|
setSelectedNode(node);
|
|
110144
109595
|
}, []);
|
|
@@ -110355,7 +109806,6 @@ function DetailPage({
|
|
|
110355
109806
|
] }),
|
|
110356
109807
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
|
|
110357
109808
|
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[480px] min-w-[400px] max-w-[600px] border-r border-[#E4E7EC] flex flex-col bg-[#F9FAFB] overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 p-[16px]", children: [
|
|
110358
|
-
showEventLogsBanner && /* @__PURE__ */ jsxRuntimeExports.jsx(VoiceEventLogsBanner, { onViewEventLogs: handleViewEventLogs }),
|
|
110359
109809
|
traces.length === 0 && loadingState === "success" && progressiveState.traceCount === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[32px] text-center text-[13px] text-[#667085]", children: "No traces available" }),
|
|
110360
109810
|
traces.map((trace, index) => {
|
|
110361
109811
|
var _a, _b, _c, _d;
|
|
@@ -110405,16 +109855,7 @@ function DetailPage({
|
|
|
110405
109855
|
generationSummaryInputOverride
|
|
110406
109856
|
}
|
|
110407
109857
|
)
|
|
110408
|
-
] })
|
|
110409
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
110410
|
-
EventLogsSlideout,
|
|
110411
|
-
{
|
|
110412
|
-
isOpen: isEventLogsOpen,
|
|
110413
|
-
onClose: handleCloseEventLogs,
|
|
110414
|
-
sessionId: sessionId ?? null,
|
|
110415
|
-
fetchEventLogs
|
|
110416
|
-
}
|
|
110417
|
-
)
|
|
109858
|
+
] })
|
|
110418
109859
|
] });
|
|
110419
109860
|
}
|
|
110420
109861
|
const trace1Observations = [
|
|
@@ -110828,7 +110269,7 @@ function EnvironmentNameCell$1({ envId }) {
|
|
|
110828
110269
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", title: envId || "-", children: displayName });
|
|
110829
110270
|
}
|
|
110830
110271
|
function SessionsListContent(props) {
|
|
110831
|
-
const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId
|
|
110272
|
+
const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId } = props;
|
|
110832
110273
|
const { environments, resolveEnvironmentName } = useEnvironment();
|
|
110833
110274
|
const [selectedSessionId, setSelectedSessionId] = useState(() => initialSessionId ?? null);
|
|
110834
110275
|
const [selectedSessionData, setSelectedSessionData] = useState(null);
|
|
@@ -111389,8 +110830,7 @@ function SessionsListContent(props) {
|
|
|
111389
110830
|
totalCost: session.totalCost,
|
|
111390
110831
|
totalTokens: session.totalTokens,
|
|
111391
110832
|
sessionDuration: session.sessionDuration,
|
|
111392
|
-
createdAt: session.createdAt
|
|
111393
|
-
source: session.source
|
|
110833
|
+
createdAt: session.createdAt
|
|
111394
110834
|
});
|
|
111395
110835
|
setIsModalOpen(true);
|
|
111396
110836
|
if (onSessionClick) {
|
|
@@ -111500,9 +110940,7 @@ function SessionsListContent(props) {
|
|
|
111500
110940
|
sessionId: selectedSessionId,
|
|
111501
110941
|
apiConfig,
|
|
111502
110942
|
onClose: handleModalClose,
|
|
111503
|
-
initialSessionData: selectedSessionData || void 0
|
|
111504
|
-
onViewEventLogs,
|
|
111505
|
-
fetchEventLogs
|
|
110943
|
+
initialSessionData: selectedSessionData || void 0
|
|
111506
110944
|
}
|
|
111507
110945
|
) })
|
|
111508
110946
|
] });
|
|
@@ -144197,7 +143635,7 @@ const VariableMenu = ({
|
|
|
144197
143635
|
setCurrentPath(parsedQuery.path);
|
|
144198
143636
|
}
|
|
144199
143637
|
}, [parsedQuery.category, parsedQuery.path, activeCategory]);
|
|
144200
|
-
|
|
143638
|
+
useLayoutEffect(() => {
|
|
144201
143639
|
if (!menuRef.current) return;
|
|
144202
143640
|
const menuRect = menuRef.current.getBoundingClientRect();
|
|
144203
143641
|
const viewportWidth = window.innerWidth;
|
|
@@ -144218,7 +143656,7 @@ const VariableMenu = ({
|
|
|
144218
143656
|
newTop = padding;
|
|
144219
143657
|
}
|
|
144220
143658
|
setAdjustedPosition({ top: newTop, left: newLeft });
|
|
144221
|
-
}, [position]);
|
|
143659
|
+
}, [position, activeCategory, currentPath.length, query]);
|
|
144222
143660
|
const categories = [
|
|
144223
143661
|
{ id: "env", label: "Environment Variables", icon: VariableIcon, variables: envVariables },
|
|
144224
143662
|
{ id: "memory", label: "Memory", icon: MemoryIcon, variables: memoryVariables },
|
|
@@ -144423,7 +143861,7 @@ const VariableMenu = ({
|
|
|
144423
143861
|
)
|
|
144424
143862
|
] }) }),
|
|
144425
143863
|
!activeCategory && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-[8px] pb-[4px] px-[12px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] leading-[16px] font-normal text-[#667085]", children: "Type to search or choose from:" }) }),
|
|
144426
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: items.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[16px] text-center text-[#667085] text-[14px]", children: "No items found" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items.map((item, index) => {
|
|
143864
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: items.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[16px] text-center text-[#667085] text-[14px]", children: "No items found" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items.map((item, index) => {
|
|
144427
143865
|
var _a;
|
|
144428
143866
|
const isCategory = "variables" in item;
|
|
144429
143867
|
const Icon = isCategory ? item.icon : getIconForType(item.type);
|