166 lines
3.5 KiB
TypeScript
166 lines
3.5 KiB
TypeScript
import React, { useMemo } from "react"
|
|
import { MeteringEntry, useStoreMessageOption } from "@/store/option"
|
|
import { Card, List, Table, Tag, Space, TableProps, Tooltip } from "antd"
|
|
import { NavLink } from "react-router-dom"
|
|
import { formatDate } from "@/utils/date"
|
|
|
|
const columns: TableProps<MeteringEntry>["columns"] = [
|
|
{
|
|
title: "id",
|
|
dataIndex: "id",
|
|
key: "id",
|
|
width: "13%"
|
|
},
|
|
{
|
|
title: "问题",
|
|
dataIndex: "queryContent",
|
|
key: "queryContent"
|
|
},
|
|
{
|
|
title: "提示词全文",
|
|
dataIndex: "prompt",
|
|
key: "prompt",
|
|
ellipsis: {
|
|
showTitle: false
|
|
},
|
|
render: (prompt) => (
|
|
<Tooltip placement="topLeft" title={prompt}>
|
|
{prompt}
|
|
</Tooltip>
|
|
),
|
|
width: "10%"
|
|
},
|
|
{
|
|
title: "思维链",
|
|
key: "cot",
|
|
dataIndex: "cot",
|
|
ellipsis: {
|
|
showTitle: false
|
|
},
|
|
render: (responseContent) => (
|
|
<Tooltip placement="topLeft" title={responseContent}>
|
|
{responseContent}
|
|
</Tooltip>
|
|
),
|
|
width: "10%"
|
|
},
|
|
|
|
{
|
|
title: "回答",
|
|
dataIndex: "responseContent",
|
|
key: "responseContent",
|
|
ellipsis: {
|
|
showTitle: false
|
|
},
|
|
render: (responseContent) => (
|
|
<Tooltip placement="topLeft" title={responseContent}>
|
|
{responseContent}
|
|
</Tooltip>
|
|
),
|
|
width: "10%"
|
|
},
|
|
{
|
|
title: "关联数据个数",
|
|
dataIndex: "relatedDataCount",
|
|
key: "relatedDataCount"
|
|
},
|
|
{
|
|
title: "数联网token",
|
|
dataIndex: "iodTokenCount",
|
|
key: "iodTokenCount"
|
|
},
|
|
{
|
|
title: "大模型token",
|
|
key: "largeModelToken",
|
|
dataIndex: "largeModelToken",
|
|
render: (_, record) => {
|
|
return (
|
|
<div>{record.modelInputTokenCount + record.modelOutputTokenCount}</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
title: "日期",
|
|
dataIndex: "date",
|
|
key: "date",
|
|
render: (date) => {
|
|
return <div>{formatDate(date)}</div>
|
|
}
|
|
},
|
|
{
|
|
title: "耗时",
|
|
key: "timeTaken",
|
|
dataIndex: "timeTaken"
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "action",
|
|
render: (_, record) => (
|
|
<Space size="middle">
|
|
{/* <a>Invite {record.name}</a> */}
|
|
|
|
<NavLink to={`/metering/list/${record.id}`}>
|
|
<a>详情</a>
|
|
</NavLink>
|
|
</Space>
|
|
)
|
|
}
|
|
]
|
|
|
|
export const MeteringDetail = () => {
|
|
const { meteringEntries } = useStoreMessageOption()
|
|
|
|
const data = useMemo(
|
|
() => [
|
|
{
|
|
key: "对话数量",
|
|
value: meteringEntries.length
|
|
},
|
|
{
|
|
key: "数联网输入token数",
|
|
value: meteringEntries.reduce((acc, cur) => {
|
|
for (const item of cur.iodKeywords) {
|
|
acc += item.length
|
|
}
|
|
return acc
|
|
}, 0)
|
|
},
|
|
{
|
|
key: "数联网输出token数",
|
|
value: meteringEntries.reduce((acc, cur) => acc + cur.iodTokenCount, 0)
|
|
},
|
|
{
|
|
key: "大模型输入token数",
|
|
value: meteringEntries.reduce(
|
|
(acc, cur) => acc + cur.modelInputTokenCount,
|
|
0
|
|
)
|
|
},
|
|
{
|
|
key: "大模型输出token数",
|
|
value: meteringEntries.reduce(
|
|
(acc, cur) => acc + cur.modelOutputTokenCount,
|
|
0
|
|
)
|
|
}
|
|
],
|
|
[meteringEntries]
|
|
)
|
|
return (
|
|
<div className="p-4 pt-[4rem]">
|
|
<List
|
|
grid={{ gutter: 16, column: 5 }}
|
|
dataSource={data}
|
|
split={false}
|
|
renderItem={(item) => (
|
|
<List.Item>
|
|
<Card title={item.key}>{item.value}</Card>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
|
|
<Table<MeteringEntry> columns={columns} dataSource={meteringEntries} />
|
|
</div>
|
|
)
|
|
}
|