backstory/frontend/src/MessageMeta.tsx

//import React, { useState, useEffect, useRef, useCallback, ReactElement } from 'react';
import Divider from '@mui/material/Divider';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Box from '@mui/material/Box';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Card from '@mui/material/Card';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';

type MessageMetadata = {
  rag: any,
  tools: any[],
  eval_count: number,
  eval_duration: number,
  prompt_eval_count: number,
  prompt_eval_duration: number
};

type MessageData = {
  role: string,
  content: string,
  user?: string,
  type?: string,
  id?: string,
  isProcessing?: boolean,
  metadata?: MessageMetadata
};

interface MessageMetaInterface {
  metadata: MessageMetadata
}
const MessageMeta = ({ metadata }: MessageMetaInterface) => {
  if (metadata === undefined) {
    return <></>
  }

  return (<>
    <Box sx={{ fontSize: "0.8rem", mb: 1 }}>
      Below is the LLM performance of this query. Note that if tools are called, the entire context is processed for each separate tool request by the LLM. This can dramatically increase the total time for a response.
    </Box>
    <TableContainer component={Card} className="PromptStats" sx={{ mb: 1 }}>
      <Table aria-label="prompt stats" size="small">
        <TableHead>
          <TableRow>
            <TableCell></TableCell>
            <TableCell align="right" >Tokens</TableCell>
            <TableCell align="right">Time (s)</TableCell>
            <TableCell align="right">TPS</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow key="prompt" sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
            <TableCell component="th" scope="row">Prompt</TableCell>
            <TableCell align="right">{metadata.prompt_eval_count}</TableCell>
            <TableCell align="right">{Math.round(metadata.prompt_eval_duration / 10 ** 7) / 100}</TableCell>
            <TableCell align="right">{Math.round(metadata.prompt_eval_count * 10 ** 9 / metadata.prompt_eval_duration)}</TableCell>
          </TableRow>
          <TableRow key="response" sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
            <TableCell component="th" scope="row">Response</TableCell>
            <TableCell align="right">{metadata.eval_count}</TableCell>
            <TableCell align="right">{Math.round(metadata.eval_duration / 10 ** 7) / 100}</TableCell>
            <TableCell align="right">{Math.round(metadata.eval_count * 10 ** 9 / metadata.eval_duration)}</TableCell>
          </TableRow>
          <TableRow key="total" sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
            <TableCell component="th" scope="row">Total</TableCell>
            <TableCell align="right">{metadata.prompt_eval_count + metadata.eval_count}</TableCell>
            <TableCell align="right">{Math.round((metadata.prompt_eval_duration + metadata.eval_duration) / 10 ** 7) / 100}</TableCell>
            <TableCell align="right">{Math.round((metadata.prompt_eval_count + metadata.eval_count) * 10 ** 9 / (metadata.prompt_eval_duration + metadata.eval_duration))}</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
    {
      metadata.tools !== undefined && metadata.tools.length !== 0 &&
      <Accordion sx={{ boxSizing: "border-box" }}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Box sx={{ fontSize: "0.8rem" }}>
            Tools queried
          </Box>
        </AccordionSummary>
        <AccordionDetails>
          {metadata.tools.map((tool: any, index: number) => <Box key={index}>
            {index !== 0 && <Divider />}
            <Box sx={{ fontSize: "0.75rem", display: "flex", flexDirection: "column", mt: 0.5 }}>
              <div style={{ display: "flex", paddingRight: "1rem", whiteSpace: "nowrap" }}>
                {tool.tool}
              </div>
              <div style={{ display: "flex", padding: "3px", whiteSpace: "pre-wrap", flexGrow: 1, border: "1px solid #E0E0E0", wordBreak: "break-all", maxHeight: "5rem", overflow: "auto" }}>{JSON.stringify(tool.result, null, 2)}</div>
            </Box>
          </Box>)}
          </AccordionDetails>
        </Accordion>
    }
    {
      metadata.rag.name !== undefined &&
      <Accordion>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Box sx={{ fontSize: "0.8rem" }}>
            Top RAG {metadata.rag.ids.length} matches from '{metadata.rag.name}' collection against embedding vector of {metadata.rag.query_embedding.length} dimensions
          </Box>
        </AccordionSummary>
        <AccordionDetails>
          {metadata.rag.ids.map((id: number, index: number) => <Box key={index}>
            {index !== 0 && <Divider />}
            <Box sx={{ fontSize: "0.75rem", display: "flex", flexDirection: "row", mb: 0.5, mt: 0.5 }}>
              <div style={{ display: "flex", flexDirection: "column", paddingRight: "1rem", minWidth: "10rem" }}>
                <div style={{ whiteSpace: "nowrap" }}>Doc ID: {metadata.rag.ids[index]}</div>
                <div style={{ whiteSpace: "nowrap" }}>Similarity: {Math.round(metadata.rag.distances[index] * 100) / 100}</div>
                <div style={{ whiteSpace: "nowrap" }}>Type: {metadata.rag.metadatas[index].doc_type}</div>
                <div style={{ whiteSpace: "nowrap" }}>Chunk Len: {metadata.rag.documents[index].length}</div>
              </div>
              <div style={{ display: "flex", padding: "3px", flexGrow: 1, border: "1px solid #E0E0E0", maxHeight: "5rem", overflow: "auto" }}>{metadata.rag.documents[index]}</div>
            </Box>
          </Box>
          )}
          </AccordionDetails>
        </Accordion>
    }
  </>
  );
};

export type { 
  MessageMetadata, 
  MessageMetaInterface,
  MessageData
};

export { MessageMeta };