index.tsx

Overview

index.tsx defines the EmbedModal React functional component, which provides a user interface for embedding a chat or agent flow widget into an external site via an iframe. The modal allows users to customize the embedded widget's appearance and locale settings, generates the corresponding iframe embed code, and facilitates easy copying of this code.

The modal supports three tabs (only the first tab is fully implemented):

• Full Screen Embed: Generate and customize a full-page iframe embed.

• Partial Embed: Placeholder for future partial embedding options.

• Extension Embed: Placeholder for future extension embedding options.

Additionally, the modal displays the embed token (an identifier) with copy functionality and provides links to relevant documentation based on the context (agent or chat).

Detailed Explanation

Component: EmbedModal

const EmbedModal = ({
  visible,
  hideModal,
  token = '',
  form,
  beta = '',
  isAgent,
}: IModalProps<any> & {
  token: string;
  form: SharedFrom;
  beta: string;
  isAgent: boolean;
}) => { ... }

Purpose

EmbedModal is a modal dialog component that lets users configure and generate iframe embed codes for chat or agent flows. It supports customization of avatar visibility and locale, and provides tabs for different embedding modes.

Props

Internal State

Hooks Used

• useTranslate('chat'): Provides translation function t scoped to chat-related keys.

• useIsDarkTheme(): Detects whether the current UI theme is dark mode.

• useMemo: Memoizes the list of language options for locale selection.

Key Functions

• generateIframeSrc: Constructs the iframe URL string based on the current configuration:

  const generateIframeSrc = () => {
    let src = `${location.origin}/chat/share?shared_id=${token}&from=${form}&auth=${beta}`;
    if (visibleAvatar) src += '&visible_avatar=1';
    if (locale) src += `&locale=${locale}`;
    return src;
  };
  

• onChange: Logs tab changes for debugging purposes.

JSX Structure

• Uses Ant Design components: Modal, Tabs, Card, Checkbox, Form, Select, and Typography.

• Renders a modal containing:

  • A tabbed interface with three tabs:

    • Full Screen: Allows toggling avatar visibility and selecting locale. Shows generated iframe code with syntax highlighting and copy button.

    • Partial: Placeholder text "Coming Soon".

    • Extension: Placeholder text "Coming Soon".

  • Displays the token with copy functionality.

  • Shows a context-sensitive link to documentation based on isAgent.

Usage Example

import React, { useState } from 'react';
import EmbedModal from './index';

const ExampleUsage = () => {
  const [modalVisible, setModalVisible] = useState(true);

  return (
    <EmbedModal
      visible={modalVisible}
      hideModal={() => setModalVisible(false)}
      token="abc123xyz"
      form="chat"
      beta="beta-key"
      isAgent={false}
    />
  );
};

Implementation Details & Algorithms

• Iframe URL Generation: The iframe embed URL is dynamically constructed from the current origin, token, form source, beta auth token, and optional parameters (avatar visibility and locale). This approach ensures the iframe always points to the correct shared chat/agent session with appropriate customization.

• Localization: The component supports multiple languages for the embedded chat interface by allowing selection from a predefined list of language abbreviations (LanguageAbbreviation). This list is memoized for performance.

• Copy to Clipboard: The iframe embed code is wrapped in markdown code blocks and rendered with syntax highlighting for easy copying by the user. The CopyToClipboard component handles copying the generated code.

• Theming: Conditional styling is applied based on whether the UI is in dark theme mode.

• Extensibility: Tabs for "Partial" and "Extension" embed modes are placeholders, indicating planned future enhancements without impacting current functionality.

Interaction with Other System Parts

• Imports from @/components:

  • CopyToClipboard: Utility component enabling copying text to clipboard.

  • HightLightMarkdown: Component for rendering markdown with syntax highlighting.

  • theme-provider: Provides theme context for dark mode detection.

• Constants:

  • SharedFrom: Enum or constants representing the source of the chat share.

  • LanguageAbbreviation and LanguageAbbreviationMap: Provide language codes and their display labels for locale selection.

• Hooks:

  • useTranslate: Internationalization hook used to render translated UI strings.

• Ant Design Components: UI building blocks for consistent styling and behavior.

• CSS Module (index.less): Provides scoped styles for the modal and internal elements.

• External Documentation Links: Links to API reference docs are dynamically chosen based on the embed type (isAgent).

Visual Diagram

componentDiagram
    direction TB
    EmbedModal --|> Modal : uses
    EmbedModal --|> Tabs : contains
    Tabs --> Tab1[Full Screen]
    Tabs --> Tab2[Partial (coming soon)]
    Tabs --> Tab3[Extension (coming soon)]
    Tab1 --> Card : displays options & code
    Card --> Form : contains Checkbox & Select
    Form --> Checkbox : avatar visibility
    Form --> Select : locale selection
    Card --> CopyToClipboard : copy iframe code
    Card --> HightLightMarkdown : show iframe code
    EmbedModal --> Typography : shows token & link
    EmbedModal --> useTranslate : for i18n
    EmbedModal --> useIsDarkTheme : for theming
    EmbedModal --> useMemo : memoize language options

Summary

The index.tsx file implements the EmbedModal component, a configurable modal dialog for generating iframe embed codes for chat or agent flow sessions. It supports avatar visibility and localization options, utilizes Ant Design components for UI, and integrates internationalization and theming hooks. The component is designed to be extensible with placeholders for additional embed modes and provides users with easy copy functionality and links to relevant documentation.

This file is central to the embedding feature of the chat/agent sharing system, bridging user configuration input with the generation of fully-formed embed code ready for integration into external websites.