Merge branch 'feat/metering' of gitea.internetapi.cn:iod/page-assist into feat/page

src/components/Option/Metering/detail.tsx

@@ -0,0 +1,137 @@
+import React 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",
+    dataIndex: "id",
+    key: "id",
+    width: "13%"
+  },
+  {
+    title: "问题",
+    dataIndex: "query",
+    key: "query"
+  },
+  {
+    title: "提示词全文",
+    dataIndex: "prompt",
+    key: "prompt",
+    ellipsis: {
+      showTitle: false
+    },
+    render: (prompt) => (
+      <Tooltip placement="topLeft" title={prompt}>
+        {prompt}
+      </Tooltip>
+    ),
+    width: "10%"
+  },
+  {
+    title: "思维链",
+    key: "thinkingChain",
+    dataIndex: "thinkingChain",
+    width: "10%"
+  },
+
+  {
+    title: "回答",
+    dataIndex: "answer",
+    key: "answer",
+    ellipsis: {
+      showTitle: false
+    },
+    render: (answer) => (
+      <Tooltip placement="topLeft" title={answer}>
+        {answer}
+      </Tooltip>
+    ),
+    width: "10%"
+  },
+  {
+    title: "关联数据个数",
+    dataIndex: "relatedDataCount",
+    key: "relatedDataCount"
+  },
+  {
+    title: "数联网token",
+    dataIndex: "iodOutputToken",
+    key: "iodOutputToken",
+    render: (iodOutputToken) => <div>{iodOutputToken.length}</div>
+  },
+  {
+    title: "大模型token",
+    key: "largeModelToken",
+    dataIndex: "largeModelToken",
+    render: (_, record) => {
+      return (
+        <div>{record.iodInputToken.length + record.iodOutputToken.length}</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>Detail</a>
+        </NavLink>
+      </Space>
+    )
+  }
+]
+
+export const MeteringDetail = () => {
+  const { chatMessages } = useStoreMessageOption()
+  console.log(chatMessages, "opppp")
+
+  return (
+    <div className="pt-[4rem]">
+      <List
+        grid={{ gutter: 16, column: 3 }}
+        dataSource={data}
+        renderItem={(item) => (
+          <List.Item>
+            <Card title={item.key}>{item.value}</Card>
+          </List.Item>
+        )}
+      />
+
+      <Table<ChatMessage> columns={columns} dataSource={chatMessages} />
+    </div>
+  )
+}