index.tsx

Overview

This file defines a React functional component named EmbedDialog that renders a modal dialog for generating an embeddable iframe snippet. The iframe snippet lets users embed either a chat assistant or an agent flow interface into an external website. The dialog provides customization options for the iframe appearance, such as toggling avatar visibility and selecting a locale language. It also displays the generated embed code with syntax highlighting and offers a copy-to-clipboard feature for convenience.

The component leverages React Hook Form integrated with Zod for form validation, a custom translation hook for localization, and UI components for dialogs, forms, switches, and select inputs. It dynamically constructs the iframe URL based on user inputs and passed props, allowing seamless embedding of chat or agent sessions.

Components and Functions

EmbedDialog Component

function EmbedDialog({
  hideModal,
  token = '',
  from,
  beta = '',
  isAgent,
}: IProps)

Description

The main React component that renders the modal dialog used to generate and display an embeddable iframe snippet with customization options.

Props (IProps)

• hideModal: () => void
  Function to close the modal dialog.

• token: string
  A unique identifier (shared ID) used to generate the iframe source URL.

• from: SharedFrom
  Enum-like value indicating the source context of the embedding: either an agent flow or chat.

• beta: string
  A string token, possibly for authentication or beta feature flags, appended to the iframe URL.

• isAgent: boolean
  Boolean flag indicating if the embedded session is for an agent (true) or chat assistant (false).

Internal State and Hooks

• form
  React Hook Form instance managing the form state and validation via FormSchema.

• values
  Watches the current form values (visibleAvatar and locale).

• languageOptions
  Memoized array of language option objects with label and value for the select dropdown, derived from language constants.

• generateIframeSrc
  Callback function that constructs the iframe src URL dynamically based on the form values and props.

• text
  Memoized markdown string containing the iframe embed code snippet.

JSX Structure

• Dialog: Modal container that opens/closes based on open prop and calls hideModal on close.

• Form: Contains two fields:

  • visibleAvatar: A switch to hide/show the avatar in the iframe.

  • locale: A searchable select dropdown to pick the iframe locale.

• Embed Code Section: Displays the generated iframe snippet with markdown syntax highlighting.

• Token Display: Shows the shared token and a copy-to-clipboard button.

• Help Link: Provides a contextual link to documentation depending on whether it's an agent or chat embed.

Return Value

Returns a React element rendering the complete embed dialog UI.

Usage Example

<EmbedDialog
  hideModal={() => setShowEmbed(false)}
  token="abc123"
  from={SharedFrom.Chat}
  beta="beta_token"
  isAgent={false}
/>

Types and Schemas

FormSchema

Zod validation schema for the form inputs.

const FormSchema = z.object({
  visibleAvatar: z.boolean(),
  locale: z.string(),
});

• visibleAvatar - boolean flag controlling avatar visibility.

• locale - string representing language locale code.

IProps

type IProps = IModalProps<any> & {
  token: string;
  from: SharedFrom;
  beta: string;
  isAgent: boolean;
};

Extends a generic modal props interface with specific props needed for the embed dialog.

Important Implementation Details

• Dynamic iframe URL Construction
  The URL includes parameters for shared ID, source (from), auth token (beta), avatar visibility, and locale. This enables the iframe to render different views based on user choice and context.

• Form Validation with Zod and React Hook Form
  Ensures the form inputs are correctly typed and validated before generating the iframe snippet.

• Translation Hook (useTranslate)
  Used extensively to provide localized strings for UI labels, messages, and links.

• Memoization and Callbacks
  useMemo and useCallback optimize performance by preventing unnecessary recalculations or re-renders.

• Copy to Clipboard Integration
  Allows users to quickly copy the shared token for use elsewhere.

Interactions with Other Parts of the Application

• UI Components
  Imports dialog, form, switch, select, and markdown highlight components from a shared component library (@/components/*).

• Constants
  Uses constants (SharedFrom, LanguageAbbreviation, LanguageAbbreviationMap, Routes) to standardize values for sources, languages, and routing paths.

• Routing
  Builds the iframe URL based on predefined route constants (Routes.AgentShare, Routes.ChatShare).

• Localization
  Utilizes a common translation hook to support multiple languages.

• External Documentation Links
  Provides links to developer docs for creating sessions relevant to agent or chat embedding.

Mermaid Diagram

This component is a React functional component with multiple internal methods (callbacks and memoized values) and properties (props, form state). The diagram below illustrates the component structure, its props, internal methods, and interaction with imported utilities.

classDiagram
    class EmbedDialog {
        +hideModal: () => void
        +token: string
        +from: SharedFrom
        +beta: string
        +isAgent: boolean
        +generateIframeSrc(): string
        +render(): ReactElement
    }
    EmbedDialog ..> useForm : uses
    EmbedDialog ..> useWatch : uses
    EmbedDialog ..> useMemo : uses
    EmbedDialog ..> useCallback : uses
    EmbedDialog ..> useTranslate : uses
    EmbedDialog --> FormSchema : validates with
    EmbedDialog --> Dialog : renders
    EmbedDialog --> Form : renders
    EmbedDialog --> Switch : renders
    EmbedDialog --> SelectWithSearch : renders
    EmbedDialog --> CopyToClipboard : renders
    EmbedDialog --> HightLightMarkdown : renders

Summary

The index.tsx file exports a memoized React component EmbedDialog that provides an interactive modal dialog enabling users to configure and copy an embeddable iframe snippet. The dialog supports toggling avatar visibility and selecting a locale, dynamically adjusting the iframe URL accordingly. It leverages modern React patterns with hooks, form validation, localization, and UI composition to deliver a polished embedding experience. This component typically integrates into a larger chat or agent management system, facilitating easy sharing and embedding of chat/agent sessions on external sites.

End of Documentation for index.tsx