prompt-modal.tsx

Overview

prompt-modal.tsx defines a React functional component PromptModal that renders a modal dialog displaying a provided prompt string with markdown syntax highlighted. The component leverages Ant Design's Modal and Space components for UI layout, alongside custom components for rendering SVG icons and highlighted markdown content. It is designed to be reusable and controlled externally via props for visibility and hiding behavior.

This file primarily serves as a presentational component within a larger UI system, likely involved in displaying prompts or feedback content in a chat or feedback interface.

Component: PromptModal

Description

PromptModal is a React functional component that displays a modal dialog containing a prompt message formatted with markdown. It accepts props controlling its visibility, a callback to hide the modal, and the prompt text itself.

Props

The component's props are based on an intersection of:

• IModalProps — likely an interface defining modal visibility and control props.

• { prompt?: string } — an optional string containing the prompt text to display.

From the code and naming conventions, the effective props are:

Return Value

Returns JSX representing the modal dialog with:

• A title composed of an SVG icon (prompt) and the text "Prompt".

• The modal width set to 80% of the viewport.

• Visibility controlled by the visible prop.

• Cancel action bound to hideModal callback.

• No footer buttons.

• Body content rendered via HightLightMarkdown component to display the prompt text with markdown highlighting.

Usage Example

import { useState } from 'react';
import PromptModal from './prompt-modal';

const ExampleComponent = () => {
  const [isModalVisible, setModalVisible] = useState(false);
  const promptText = "### Hello World\nThis is a *markdown* prompt.";

  const openModal = () => setModalVisible(true);
  const closeModal = () => setModalVisible(false);

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

Implementation Details

• Modal Layout: Uses Ant Design's Modal component with customized properties:

  • title is a Space component containing an SVG icon named "prompt" sized at 18px width and a static label.

  • width is set to '80%' of the viewport for a wide display.

  • open prop controls visibility, bound to the visible prop.

  • onCancel triggers the hideModal callback to close the modal.

  • footer is set to null to omit default modal footer buttons.

• Content Rendering: The prompt string is passed as children to HightLightMarkdown, a custom component presumably responsible for parsing and rendering markdown with syntax highlighting. This improves readability and user experience when viewing prompt content.

• Icon Usage: The SvgIcon component is used to display a vector icon named "prompt", adding visual context to the modal header.

Interactions with Other Parts of the System

• Interfaces:

  • IModalProps and IFeedbackRequestBody imported from the @/interfaces folder suggest this component is part of a modular interface system defining modal behavior and chat feedback data structures.

• UI Components:

  • Uses Ant Design (antd) components Modal and Space for standardized UI elements.

  • Uses custom components HightLightMarkdown (likely a markdown renderer) and SvgIcon (for SVG icons), indicating a shared UI component library within the project.

• Usage Context:

  • This modal is likely used in contexts where feedback or prompt messages need to be shown to users, such as chat interfaces or prompt-based workflows.

  • Controlled externally via the visible prop and hideModal callback, allowing parent components to manage its display state.

Mermaid Diagram: Component Structure and Props

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

    component Modal {
      +title: ReactNode
      +width: string | number
      +open: boolean
      +onCancel(): void
      +footer: ReactNode | null
    }

    component Space
    component SvgIcon {
      +name: string
      +width: number
    }
    component HightLightMarkdown {
      +children: string
    }

    PromptModal --> Modal : renders
    Modal --> Space : uses in title
    Space --> SvgIcon : contains
    Modal --> HightLightMarkdown : contains prompt content

Summary

The prompt-modal.tsx file provides a simple yet effective React component for displaying a prompt message within a modal dialog. By combining Ant Design UI elements with custom markdown rendering and SVG icons, it creates a reusable and visually consistent component that fits into larger chat or feedback systems. Its controlled props make it easy to integrate and manage within parent components.