page-assist/src/components/Option/Metering/detail.tsx

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: "queryContent",
    key: "queryContent"
  },
  {
    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: "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: "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>详情</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>
  )
}