llama-stack-mirror/llama_stack/ui/components/chat-completions/chat-completions-table.tsx

"use client";

import {
  ChatCompletion,
  UsePaginationOptions,
  ListChatCompletionsResponse,
} from "@/lib/types";
import { LogsTable, LogTableRow } from "@/components/logs/logs-table";
import {
  extractTextFromContentPart,
  extractDisplayableText,
} from "@/lib/format-message-content";
import { usePagination } from "@/hooks/usePagination";
import { getClient } from "@/lib/client";

interface ChatCompletionsTableProps {
  /** Optional pagination configuration */
  paginationOptions?: UsePaginationOptions;
}

function formatChatCompletionToRow(completion: ChatCompletion): LogTableRow {
  return {
    id: completion.id,
    input: extractTextFromContentPart(completion.input_messages?.[0]?.content),
    output: extractDisplayableText(completion.choices?.[0]?.message),
    model: completion.model,
    createdTime: new Date(completion.created * 1000).toLocaleString(),
    detailPath: `/logs/chat-completions/${completion.id}`,
  };
}

export function ChatCompletionsTable({
  paginationOptions,
}: ChatCompletionsTableProps) {
  const fetchFunction = async (params: {
    after?: string;
    limit: number;
    model?: string;
    order?: string;
  }) => {
    const response = await getClient().chat.completions.list({
      after: params.after,
      limit: params.limit,
      ...(params.model && { model: params.model }),
      ...(params.order && { order: params.order }),
    } as any);

    return response as ListChatCompletionsResponse;
  };

  const { data, status, hasMore, error, loadMore } = usePagination({
    ...paginationOptions,
    fetchFunction,
    errorMessagePrefix: "chat completions",
  });

  const formattedData = data.map(formatChatCompletionToRow);

  return (
    <LogsTable
      data={formattedData}
      status={status}
      hasMore={hasMore}
      error={error}
      onLoadMore={loadMore}
      caption="A list of your recent chat completions."
      emptyMessage="No chat completions found."
    />
  );
}