agent-log-detail-modal.tsx

Overview

agent-log-detail-modal.tsx defines a React functional component named AgentLogDetailModal that renders a modal dialog displaying detailed logs of agent messages. This modal is designed to show a list of messages associated with an agent interaction, providing a concise title derived from the first message's content and rendering individual message items with user and canvas avatar information. It leverages several hooks to fetch user and agent data and utilizes reusable UI components such as Modal and MessageItem.

This component is typically used in applications involving chatbots, agent-based systems, or AI interaction logs where users need to inspect detailed conversations or logs associated with agents.

Component: AgentLogDetailModal

Description

AgentLogDetailModal displays a modal containing a list of agent log messages with associated user and canvas avatars. It provides a truncated preview of the first message as the modal's title and renders each message using the MessageItem component.

Props

Behavior and Implementation Details

• Modal Title Generation (shortMessage):
  Uses the useMemo hook to compute a truncated preview of the first message's content. The truncation logic considers the presence of Chinese characters:

  • If Chinese characters are present and the content length exceeds 15 characters, it truncates to 15 characters followed by ellipsis (...).

  • If no Chinese characters and length exceeds 30, truncates to 30 characters followed by ellipsis.

  • Otherwise, it shows the full content.

• Message Rendering:

  • Maps over the message array, rendering each item with the MessageItem component.

  • For each message, it generates a unique key using buildMessageUuidWithRole to ensure React's list rendering optimizations.

  • Passes user nickname and avatar (from useFetchUserInfo), canvas avatar (from useFetchAgent), and other props to MessageItem.

  • Disables "like" and "log" buttons on each message item (showLikeButton={false}, showLog={false}).

• Modal Settings:

  • The modal is styled with a fixed width of 900px.

  • No footer is shown on the modal (showfooter={false}, footer={null}).

  • The modal's open state and close handler (onCancel) are controlled by the parent component via props.

Imports and Dependencies

• Components:

  • MessageItem — renders individual message details.

  • Modal — generic modal dialog UI component.

• Hooks:

  • useFetchUserInfo — fetches current user information (nickname, avatar).

  • useFetchAgent — fetches agent-related data including canvas avatar.

• Utilities:

  • buildMessageUuidWithRole — generates unique keys for messages.

• Interfaces:

  • IAgentLogMessage — interface representing agent log message structure.

  • IReferenceObject — interface for reference/context data for messages.

  • IMessage and Message — general chat message interfaces.

Usage Example

import React, { useState } from 'react';
import { AgentLogDetailModal } from './agent-log-detail-modal';
import { IAgentLogMessage, IReferenceObject } from '@/interfaces/database/agent';

const messages: IAgentLogMessage[] = [
  { id: '1', content: 'Hello, how can I assist you today?', role: 'agent' },
  { id: '2', content: 'I need help with my order.', role: 'user' },
];

const reference: IReferenceObject = {
  // reference data relevant to the messages
};

export const ExampleUsage = () => {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <>
      <button onClick={() => setModalOpen(true)}>Show Agent Logs</button>
      <AgentLogDetailModal
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        message={messages}
        reference={reference}
      />
    </>
  );
};

Important Implementation Details

• Performance Optimization:
  The component uses useMemo to avoid unnecessary recalculations of the truncated title string unless the message array changes.

• Message Key Generation:
  The buildMessageUuidWithRole function ensures each MessageItem has a stable and unique React key, crucial for efficient list rendering and reconciliation.

• Conditional UI Logic Based on Language:
  The truncation logic explicitly counts Chinese characters by regex (/[\u4e00-\u9fa5]/g) and applies different truncation limits, improving UX for multilingual content.

Interaction with Other Parts of the System

• Hooks Integration:

  • useFetchUserInfo and useFetchAgent indicate this component is part of a larger system where user and agent data are asynchronously fetched and cached via custom hooks.

• UI Components:

  • Depends on a shared Modal component, suggesting a consistent modal dialog style across the application.

  • Uses MessageItem from the chat subsystem to maintain consistent message rendering.

• Data Flow:

  • Receives messages and reference data from parent components.

  • Provides callbacks (onClose) to inform parents when the modal should close.

• Message Keying and Formatting:

  • Relies on utility functions (buildMessageUuidWithRole) and interfaces shared across the chat and agent modules to ensure data consistency.

File Structure Diagram (Component Diagram)

graph TD
  AgentLogDetailModal --> Modal
  AgentLogDetailModal --> MessageItem
  AgentLogDetailModal --> useFetchUserInfo
  AgentLogDetailModal --> useFetchAgent
  MessageItem --> buildMessageUuidWithRole

  subgraph Props
    isOpen
    onClose
    message
    reference
  end

  Props --> AgentLogDetailModal

Summary

agent-log-detail-modal.tsx is a focused React component that provides a modal UI to display agent message logs with contextual user and canvas information. It integrates with user and agent data fetching hooks and uses shared UI components to maintain consistency across the system. Its thoughtful design includes internationalization-aware truncation and performance optimizations, making it a reusable part of chat or agent log inspection workflows.