embed-app-modal.tsx

Overview

embed-app-modal.tsx defines a React functional component named EmbedAppModal that provides an interactive modal dialog interface for embedding an application via an iframe into external websites. The modal allows users to customize certain embed parameters such as hiding the user avatar and selecting the locale (language) for the embedded app. It dynamically generates the iframe embed code based on these settings and provides UI controls to copy the embed token for easy integration.

This component is designed to be used within a larger web application where embedding a mini app or widget is required, facilitating convenient sharing and localization.

Detailed Explanation

Component: EmbedAppModal

Purpose

EmbedAppModal renders a modal dialog that allows users to:

• Toggle the visibility of the user avatar in the embedded app.

• Select a locale (language) for the embedded app.

• View and copy the auto-generated iframe embed code.

• Copy the embed token (ID) used for authentication or identification.

Props (IEmbedAppModalProps)

State Variables

• hideAvatar (boolean): Controls whether the avatar is visible in the embedded iframe.

• locale (string): Stores the selected language/locale abbreviation.

Hooks and Utilities Used

• useTranslate('search'): Custom hook for internationalized translations scoped to the 'search' namespace.

• useState: React state hook.

• useMemo: Memoizes the language options and embed code text for performance.

• useCallback: Memoizes the iframe source generation function.

Main Functions / Methods

generateIframeSrc

Generates the iframe src URL with query parameters based on current modal state and props.

• Returns: string — Fully constructed URL string for iframe embedding.

• Algorithm:

  1. Starts with location.origin + url.

  2. Appends mandatory query parameters: shared_id, from, auth (beta), and tenantId.

  3. Conditionally appends visible_avatar=1 if avatar is hidden.

  4. Conditionally appends locale if set.

  5. Returns the concatenated string.

text (memoized)

Generates the full HTML iframe embed code snippet as a markdown string with triple backticks and HTML tag.

Example output:

<iframe
  src="https://example.com/embed?shared_id=token123&from=source&auth=beta&tenantId=tenant1&visible_avatar=1&locale=en"
  style="width: 100%; height: 100%; min-height: 600px"
  frameborder="0">
</iframe>

Usage Example

import EmbedAppModal from './embed-app-modal';

function ParentComponent() {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <>
      <button onClick={() => setModalOpen(true)}>Show Embed Modal</button>
      <EmbedAppModal
        open={modalOpen}
        setOpen={setModalOpen}
        url="/embed-app"
        token="abc123"
        from="dashboard"
        tenantId="tenant_001"
        beta="betaFeatureFlag"
      />
    </>
  );
}

UI Structure and Interaction

• Modal Container (Modal component): Displays the modal with title translated as 'embedIntoSite'.

• Hide Avatar Toggle: A labeled switch to toggle avatar visibility.

• Locale Selector: A dropdown select control populated with language options from LanguageAbbreviation.

• Embed Code Display: Shows the generated iframe code snippet with syntax highlighting (HightLightMarkdown component).

• ID Field: Read-only text input displaying the embed token with a copy button that copies the token to clipboard and shows a success message using Ant Design's message.

Important Implementation Details

• Language Options Generation: Uses useMemo to convert LanguageAbbreviation enum values into an array of option objects { label, value } by mapping to their full language names via LanguageAbbreviationMap.

• Dynamic URL Parameters: Query parameters are constructed dynamically inside generateIframeSrc to reflect current UI state for avatar visibility and locale.

• Clipboard Copy: Uses the modern navigator.clipboard.writeText API to copy the token, paired with a toast success notification.

• Accessibility: The copy button includes a title attribute and uses an SVG icon for visual affordance.

• Styling: Tailwind CSS classes are used extensively for layout and styles.

Interaction with Other System Components

• Modal Component: Imported from @/components/ui/modal/modal, provides the modal window framework.

• RAGFlowSelect Component: Custom select dropdown UI for locale selection.

• Switch Component: Toggle switch UI control.

• HightLightMarkdown Component: Renders the iframe embed code snippet with syntax highlighting.

• Constants: Uses LanguageAbbreviation and LanguageAbbreviationMap from common constants.

• Hooks: Uses useTranslate hook for localization.

• Ant Design message: Provides user feedback on copying token.

This component is likely invoked by a parent page or component responsible for managing app embedding workflows, passing necessary props such as token, url, and tenantId.

Mermaid Component Diagram

componentDiagram
    component EmbedAppModal {
      +props: IEmbedAppModalProps
      +state: hideAvatar:boolean, locale:string
      +generateIframeSrc(): string
      +render(): JSX.Element
    }
    EmbedAppModal --> Modal
    EmbedAppModal --> Switch
    EmbedAppModal --> RAGFlowSelect
    EmbedAppModal --> HightLightMarkdown
    EmbedAppModal --> useTranslate
    EmbedAppModal --> message

Summary

embed-app-modal.tsx provides a reusable, customizable modal component facilitating the embedding of an external app via iframe. It offers user-friendly controls to adjust embed parameters, automatically generates the embed code, and supports copying both the embed code and token for easy integration. The component leverages React hooks, custom UI components, and localization for a seamless user experience in multi-lingual environments.