feat: add metering data

src/components/Option/Metering/detail.tsx

@@ -1,24 +1,9 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { ChatMessage, 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 data = [
-  {
-    key: "对话数量",
-    value: 2
-  },
-  {
-    key: "输出token数",
-    value: 2
-  },
-  {
-    key: "输入token数",
-    value: 2
-  }
-]
-
 const columns: TableProps<ChatMessage>["columns"] = [
   {
     title: "id",
@@ -49,6 +34,14 @@ const columns: TableProps<ChatMessage>["columns"] = [
     title: "思维链",
     key: "thinkingChain",
     dataIndex: "thinkingChain",
+    ellipsis: {
+      showTitle: false
+    },
+    render: (responseContent) => (
+      <Tooltip placement="topLeft" title={responseContent}>
+        {responseContent}
+      </Tooltip>
+    ),
     width: "10%"
   },
 
@@ -73,9 +66,8 @@ const columns: TableProps<ChatMessage>["columns"] = [
   },
   {
     title: "数联网token",
-    dataIndex: "iodOutputToken",
-    key: "iodOutputToken",
-    render: (iodOutputToken) => <div>{iodOutputToken?.length}</div>
+    dataIndex: "iodDataTokenCount",
+    key: "iodDataTokenCount"
   },
   {
     title: "大模型token",
@@ -83,9 +75,7 @@ const columns: TableProps<ChatMessage>["columns"] = [
     dataIndex: "largeModelToken",
     render: (_, record) => {
       return (
-        <div>
-          {record.iodInputToken?.length + record.iodOutputToken?.length}
-        </div>
+        <div>{record.modelInputTokenCount + record.modelOutputTokenCount}</div>
       )
     }
   },
@@ -119,13 +109,49 @@ const columns: TableProps<ChatMessage>["columns"] = [
 
 export const MeteringDetail = () => {
   const { chatMessages } = useStoreMessageOption()
-  console.log(chatMessages, "opppp")
 
+  const data = useMemo(
+    () => [
+      {
+        key: "对话数量",
+        value: chatMessages.length
+      },
+      {
+        key: "数联网输入token数",
+        value: chatMessages.reduce((acc, cur) => {
+          for (const item of cur.iodKeywords) {
+            acc += item.length
+          }
+          return acc
+        }, 0)
+      },
+      {
+        key: "数联网输出token数",
+        value: chatMessages.reduce((acc, cur) => acc + cur.iodDataTokenCount, 0)
+      },
+      {
+        key: "大模型输入token数",
+        value: chatMessages.reduce(
+          (acc, cur) => acc + cur.modelInputTokenCount,
+          0
+        )
+      },
+      {
+        key: "大模型输出token数",
+        value: chatMessages.reduce(
+          (acc, cur) => acc + cur.modelOutputTokenCount,
+          0
+        )
+      }
+    ],
+    [chatMessages]
+  )
   return (
-    <div className="pt-[4rem]">
+    <div className="p-4  pt-[4rem]">
       <List
-        grid={{ gutter: 16, column: 3 }}
+        grid={{ gutter: 16, column: 5 }}
         dataSource={data}
+        split={false}
         renderItem={(item) => (
           <List.Item>
             <Card title={item.key}>{item.value}</Card>