prompt-modal.tsx

Overview

prompt-modal.tsx defines a React functional component named PromptModal. This component renders a modal dialog using the Ant Design (antd) library to display a textual prompt with syntax highlighting. The modal is intended to show detailed prompt content, likely used in feedback or chat-related interfaces where users or systems interact with prompts.

The component is designed to be reusable and configurable via props, supporting visibility toggling, closing behavior, and dynamic prompt content. It leverages custom components for rendering highlighted markdown and SVG icons, enhancing the user interface with visual clarity and branding.

Detailed Component Documentation

PromptModal

Description

PromptModal is a presentational React component that displays a modal dialog containing a prompt message formatted in markdown with syntax highlighting. It provides UI elements such as a title with an icon and a content area that renders the prompt.

Props

This component accepts the following props, combining a generic modal interface and an optional prompt string:

Note: The visible and hideModal props are part of the interface IModalProps<IFeedbackRequestBody>, indicating integration with a feedback or chat request context, but only their usage in this component is relevant.

Return Value

The component returns JSX representing the modal UI.

Usage Example

import PromptModal from './prompt-modal';

const ExampleUsage = () => {
  const [isModalVisible, setModalVisible] = React.useState(false);
  const promptText = "### Example Prompt\nThis is a sample prompt with **markdown** support.";

  return (
    <>
      <button onClick={() => setModalVisible(true)}>Show Prompt</button>
      <PromptModal
        visible={isModalVisible}
        hideModal={() => setModalVisible(false)}
        prompt={promptText}
      />
    </>
  );
};

Implementation Details

• The component uses the Modal and Space components from the antd UI library:

  • Modal provides the popup dialog structure.

  • Space arranges the title content horizontally with spacing.

• The modal title includes:

  • An SVG icon rendered by the SvgIcon component with the name "prompt" and width of 18 pixels.

  • The static text "Prompt" for clarity.

• The modal body renders the prompt string wrapped inside the HightLightMarkdown component, which presumably converts and highlights markdown syntax to enhance readability.

• The modal width is fixed at 80% of the viewport width for a balanced layout.

• The modal footer is omitted (footer={null}) to present a clean interface without action buttons.

• The modal open state is controlled by the visible prop, and closing it triggers the hideModal callback.

Interaction with Other Parts of the System

• Interfaces:

  • IModalProps from @/interfaces/common: This interface likely defines the standard props for modal components, ensuring consistent behavior across modals in the application.

  • IFeedbackRequestBody from @/interfaces/request/chat: Suggests this modal is related to feedback or chat systems, potentially showing prompts related to user feedback or chat messages.

• Components:

  • HightLightMarkdown: A custom component to render markdown with syntax highlighting, used to visually enhance the prompt content.

  • SvgIcon: A reusable SVG icon component, used here to display a "prompt" icon in the modal header.

• Libraries:

  • antd: Provides the modal and layout components, ensuring consistent UI styling and behavior.

This file is likely used within a broader feedback or chat UI flow where users interact with prompts, review them, and optionally provide feedback or take further actions.

Visual Diagram

componentDiagram
    component PromptModal {
        +visible: boolean
        +hideModal(): void
        +prompt?: string
    }
    component Modal
    component Space
    component SvgIcon
    component HightLightMarkdown

    PromptModal --> Modal : renders
    Modal --> Space : uses for title layout
    Space --> SvgIcon : displays icon
    Modal --> HightLightMarkdown : renders prompt content

Summary

• File Purpose: Provides a reusable modal component to display markdown-formatted prompts with syntax highlighting.

• Core Functionality: Controlled visibility modal with customizable prompt content and a header containing an icon and title.

• Dependencies: Ant Design UI library, custom markdown highlighting, and SVG icon components.

• Use Case: Display detailed prompt information, likely in feedback or chat-related user interfaces.

• Design: Simple, clean modal UI emphasizing content readability and visual cues via iconography.

This component encapsulates prompt display logic, making it easy to integrate prompt visualization consistently across the application.