Skip to content

Commit d2a1cd1

Browse files
nicarqnicarq
authored
Merge pull request #1035 from dcSpark/codex/format-invoice_received-and-invoice_paid-properly
Add invoice tracing formatting
2 parents 118ea9a + 06418aa commit d2a1cd1

File tree

1 file changed

+220
-7
lines changed
  • apps/shinkai-desktop/src/components/chat/components

1 file changed

+220
-7
lines changed

‎apps/shinkai-desktop/src/components/chat/components/message.tsx‎

Lines changed: 220 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1016,6 +1016,42 @@ export type ToolResponseTracingInfo = {
10161016
export type InvoiceRequestSentTracingInfo = {
10171017
provider: string;
10181018
tool: string;
1019+
tool_author: string;
1020+
tool_description: string;
1021+
usage_type: string;
1022+
};
1023+
1024+
export type InvoiceReceivedTracingInfo = {
1025+
address: {
1026+
address_id: string;
1027+
network: string;
1028+
};
1029+
expiration: string;
1030+
has_tool_data: boolean;
1031+
invoice_date: string;
1032+
provider: string;
1033+
requester: string;
1034+
tool_key: string;
1035+
usage_type: string;
1036+
};
1037+
1038+
export type InvoicePaidTracingInfo = {
1039+
has_tool_data: boolean;
1040+
invoice_date: string;
1041+
invoice_id: string;
1042+
paid_date: string;
1043+
payment_details: {
1044+
date_paid: string;
1045+
payment_status: string;
1046+
transaction_hash: string;
1047+
};
1048+
provider: string;
1049+
requester: string;
1050+
status: string;
1051+
tool_data_keys: string[];
1052+
tool_data_size: number;
1053+
tool_key: string;
1054+
tool_price: string;
10191055
usage_type: string;
10201056
};
10211057

@@ -1031,6 +1067,7 @@ export function TracingDialog({
10311067
}) {
10321068
const auth = useAuth((state) => state.auth);
10331069
const [selectedTrace, setSelectedTrace] = useState<MessageTrace | null>(null);
1070+
const [showRaw, setShowRaw] = useState(false);
10341071
const { t } = useTranslation();
10351072

10361073
const { data: tracingData, isLoading: isTracingLoading } =
@@ -1046,6 +1083,7 @@ export function TracingDialog({
10461083
useEffect(() => {
10471084
if (open && tracingData && tracingData.length > 0) {
10481085
setSelectedTrace(tracingData[0]);
1086+
setShowRaw(false);
10491087
}
10501088
}, [open, tracingData]);
10511089

@@ -1086,7 +1124,10 @@ export function TracingDialog({
10861124
: 'text-official-gray-400',
10871125
)}
10881126
rounded="lg"
1089-
onClick={() => setSelectedTrace(node)}
1127+
onClick={() => {
1128+
setSelectedTrace(node);
1129+
setShowRaw(false);
1130+
}}
10901131
>
10911132
<div className="mr-2 flex flex-col items-center">
10921133
<div
@@ -1387,6 +1428,18 @@ export function TracingDialog({
13871428
return (
13881429
<div className="border-official-gray-780 bg-official-gray-900 space-y-2 overflow-hidden rounded-md border p-3">
13891430
<p className="text-sm font-medium">{data.tool}</p>
1431+
<p className="text-official-gray-400 text-xs">
1432+
<span className="text-official-gray-200 font-medium">
1433+
Author:{' '}
1434+
</span>
1435+
{data.tool_author}
1436+
</p>
1437+
<p className="text-official-gray-400 text-xs">
1438+
<span className="text-official-gray-200 font-medium">
1439+
Description:{' '}
1440+
</span>
1441+
{data.tool_description}
1442+
</p>
13901443
<p className="text-official-gray-400 text-xs">
13911444
<span className="text-official-gray-200 font-medium">
13921445
Provider:{' '}
@@ -1402,6 +1455,152 @@ export function TracingDialog({
14021455
</div>
14031456
);
14041457
}
1458+
case 'invoice_received': {
1459+
const data = info as InvoiceReceivedTracingInfo;
1460+
return (
1461+
<div className="border-official-gray-780 bg-official-gray-900 space-y-2 overflow-hidden rounded-md border p-3">
1462+
<p className="text-sm font-medium">{data.tool_key}</p>
1463+
<p className="text-official-gray-400 text-xs">
1464+
<span className="text-official-gray-200 font-medium">
1465+
Provider:{' '}
1466+
</span>
1467+
{data.provider}
1468+
</p>
1469+
<p className="text-official-gray-400 text-xs">
1470+
<span className="text-official-gray-200 font-medium">
1471+
Requester:{' '}
1472+
</span>
1473+
{data.requester}
1474+
</p>
1475+
<p className="text-official-gray-400 text-xs">
1476+
<span className="text-official-gray-200 font-medium">
1477+
Invoice Date:{' '}
1478+
</span>
1479+
{format(new Date(data.invoice_date), 'yyyy-MM-dd HH:mm:ss')}
1480+
</p>
1481+
<p className="text-official-gray-400 text-xs">
1482+
<span className="text-official-gray-200 font-medium">
1483+
Expiration:{' '}
1484+
</span>
1485+
{format(new Date(data.expiration), 'yyyy-MM-dd HH:mm:ss')}
1486+
</p>
1487+
<p className="text-official-gray-400 text-xs">
1488+
<span className="text-official-gray-200 font-medium">
1489+
Usage Type:{' '}
1490+
</span>
1491+
{data.usage_type}
1492+
</p>
1493+
<p className="text-official-gray-400 text-xs">
1494+
<span className="text-official-gray-200 font-medium">
1495+
Has Tool Data:{' '}
1496+
</span>
1497+
{String(data.has_tool_data)}
1498+
</p>
1499+
<div className="text-official-gray-400 text-xs">
1500+
<p className="text-official-gray-200 font-medium">Address</p>
1501+
<p>
1502+
ID:{' '}
1503+
<span className="text-official-gray-200">
1504+
{data.address.address_id}
1505+
</span>
1506+
</p>
1507+
<p>
1508+
Network:{' '}
1509+
<span className="text-official-gray-200">
1510+
{data.address.network}
1511+
</span>
1512+
</p>
1513+
</div>
1514+
</div>
1515+
);
1516+
}
1517+
case 'invoice_paid': {
1518+
const data = info as InvoicePaidTracingInfo;
1519+
return (
1520+
<div className="border-official-gray-780 bg-official-gray-900 space-y-2 overflow-hidden rounded-md border p-3">
1521+
<p className="text-sm font-medium">{data.tool_key}</p>
1522+
<p className="text-official-gray-400 text-xs">
1523+
<span className="text-official-gray-200 font-medium">
1524+
Provider:{' '}
1525+
</span>
1526+
{data.provider}
1527+
</p>
1528+
<p className="text-official-gray-400 text-xs">
1529+
<span className="text-official-gray-200 font-medium">
1530+
Requester:{' '}
1531+
</span>
1532+
{data.requester}
1533+
</p>
1534+
<p className="text-official-gray-400 text-xs">
1535+
<span className="text-official-gray-200 font-medium">
1536+
Status:{' '}
1537+
</span>
1538+
{data.status}
1539+
</p>
1540+
<p className="text-official-gray-400 text-xs">
1541+
<span className="text-official-gray-200 font-medium">
1542+
Invoice ID:{' '}
1543+
</span>
1544+
{data.invoice_id}
1545+
</p>
1546+
<p className="text-official-gray-400 text-xs">
1547+
<span className="text-official-gray-200 font-medium">
1548+
Invoice Date:{' '}
1549+
</span>
1550+
{format(new Date(data.invoice_date), 'yyyy-MM-dd HH:mm:ss')}
1551+
</p>
1552+
<p className="text-official-gray-400 text-xs">
1553+
<span className="text-official-gray-200 font-medium">
1554+
Paid Date:{' '}
1555+
</span>
1556+
{format(new Date(data.paid_date), 'yyyy-MM-dd HH:mm:ss')}
1557+
</p>
1558+
<p className="text-official-gray-400 text-xs">
1559+
<span className="text-official-gray-200 font-medium">
1560+
Has Tool Data:{' '}
1561+
</span>
1562+
{String(data.has_tool_data)}
1563+
</p>
1564+
<p className="text-official-gray-400 text-xs">
1565+
<span className="text-official-gray-200 font-medium">
1566+
Tool Price:{' '}
1567+
</span>
1568+
{data.tool_price}
1569+
</p>
1570+
<p className="text-official-gray-400 text-xs">
1571+
<span className="text-official-gray-200 font-medium">
1572+
Usage Type:{' '}
1573+
</span>
1574+
{data.usage_type}
1575+
</p>
1576+
<div className="text-official-gray-400 text-xs">
1577+
<p className="text-official-gray-200 font-medium">
1578+
Payment Details
1579+
</p>
1580+
<p>
1581+
Status:{' '}
1582+
<span className="text-official-gray-200">
1583+
{data.payment_details.payment_status}
1584+
</span>
1585+
</p>
1586+
<p>
1587+
Tx Hash:{' '}
1588+
<span className="text-official-gray-200">
1589+
{data.payment_details.transaction_hash}
1590+
</span>
1591+
</p>
1592+
</div>
1593+
{data.tool_data_keys.length > 0 && (
1594+
<div className="text-official-gray-400 text-xs">
1595+
<p className="text-official-gray-200 font-medium">
1596+
Tool Data Keys ({data.tool_data_size})
1597+
</p>
1598+
<p>{data.tool_data_keys.join(', ')}</p>
1599+
</div>
1600+
)}
1601+
</div>
1602+
);
1603+
}
14051604
default: {
14061605
return <PrettyJsonPrint json={info} />;
14071606
}
@@ -1435,12 +1634,26 @@ export function TracingDialog({
14351634
<ScrollArea className="h-[calc(100vh-45px)] w-full max-w-2/3 px-3 [&>div>div]:!block">
14361635
{selectedTrace ? (
14371636
<div className="size-full space-y-4 overflow-hidden py-4">
1438-
<p className="text-base font-medium text-white">
1439-
{formatText(selectedTrace.trace_name)}
1440-
</p>
1441-
{renderContentByType(
1442-
selectedTrace.trace_name,
1443-
selectedTrace.trace_info,
1637+
<div className="flex items-center justify-between">
1638+
<p className="text-base font-medium text-white">
1639+
{formatText(selectedTrace.trace_name)}
1640+
</p>
1641+
<Button
1642+
onClick={() => setShowRaw((prev) => !prev)}
1643+
size="sm"
1644+
variant="tertiary"
1645+
rounded="lg"
1646+
>
1647+
{showRaw ? 'Formatted View' : 'Raw JSON'}
1648+
</Button>
1649+
</div>
1650+
{showRaw ? (
1651+
<PrettyJsonPrint json={selectedTrace.trace_info} />
1652+
) : (
1653+
renderContentByType(
1654+
selectedTrace.trace_name,
1655+
selectedTrace.trace_info,
1656+
)
14441657
)}
14451658
</div>
14461659
) : (

0 commit comments

Comments
 (0)