embed-container.tsx

Overview

The embed-container.tsx file defines a React functional component named EmbedContainer. This component serves as a reusable UI container designed to embed content with a consistent layout and branding for an application. It includes a header area with the app's logo and name, a title section featuring an avatar and a reset button, and a content area where child components or elements can be rendered.

This component is primarily intended for embedding interactive or display content in a visually coherent frame, often used in applications that require a standardized container for varying embedded views or workflows.

Detailed Explanation

Imports

useFetchAppConf: A custom hook imported from @/hooks/logic-hooks that presumably fetches application configuration such as the app name.
RefreshCcw: An icon component from the lucide-react icon library, used to display a refresh/reset icon.
PropsWithChildren: A React type utility that allows the component to accept children.
RAGFlowAvatar: A local component that renders an avatar image or icon with a name label.
Button: A local UI button component with styling and variant options.

Type: `EmbedContainerProps`

Defines the props accepted by the EmbedContainer component.

Property	Type	Description
`title`	`string`	The title displayed in the header section next to the avatar.
`avatar`	`string` (optional)	URL or identifier for the avatar image displayed next to the title.
`handleReset`	`() => void` (optional)	Callback function invoked when the Reset button is clicked.
`children`	ReactNode (from `PropsWithChildren`)	Any React elements or components rendered inside the container.

Component: `EmbedContainer`

function EmbedContainer({
  title,
  avatar,
  children,
  handleReset,
}: EmbedContainerProps)

Purpose

Renders a full viewport height container that displays the app's logo and name at the top-left, a header with an avatar, title, and reset button, and renders any nested children within a bordered, rounded box.

Parameters

title: The string title shown next to the avatar.
avatar: Optional avatar image source or identifier.
children: React nodes to embed inside the container.
handleReset: Optional callback for resetting the embedded content.

Returns

A JSX element structured as:

Section: Full viewport height, flex-centered container.
Logo & App Name: Positioned absolutely on the left top.
Content Box: A bordered, rounded container with:
- Header: Flex container with avatar + title on left, reset button on right.
- Children: Rendered below the header.

Usage Example

<EmbedContainer
  title="User Profile"
  avatar="/avatars/user123.png"
  handleReset={() => console.log("Reset clicked")}
>
  <UserProfileDetails userId="user123" />
</EmbedContainer>

This would render a container titled "User Profile" with the specified avatar, a reset button that logs to the console, and the UserProfileDetails component inside the container body.

Important Implementation Details

App Configuration Fetching: The component uses the useFetchAppConf hook to dynamically retrieve the app's name, displayed alongside the logo. This decouples the UI from hardcoded app details.
Layout Styling: The container uses Tailwind CSS classes to manage layout and styling, including viewport height, flexbox alignment, absolute positioning, spacing, borders, and typography.
Accessibility: The logo image includes an empty alt attribute, which ideally should be improved for accessibility by providing meaningful descriptions.
Reset Button: The reset button is styled as a secondary variant and includes an icon and text. It only appears clickable if the handleReset prop is provided.

Interaction With Other Parts of the System

Hooks: Relies on useFetchAppConf to fetch runtime app configuration data.
UI Components: Uses RAGFlowAvatar to display the avatar and name consistently, and a reusable Button component for the reset action.
Icons: Integrates the RefreshCcw icon from lucide-react for the reset button.
Parent/Child Relationship: Acts as a parent container component that accepts arbitrary React children, enabling it to be used widely across the app to wrap various embedded content or widgets.

Mermaid Component Diagram

componentDiagram
    EmbedContainer <|-- uses : useFetchAppConf
    EmbedContainer <|-- contains : RAGFlowAvatar
    EmbedContainer <|-- contains : Button
    Button <|-- contains : RefreshCcw (Icon)

    EmbedContainer : - title: string
    EmbedContainer : - avatar?: string
    EmbedContainer : - handleReset?: () => void
    EmbedContainer : + EmbedContainer(props: EmbedContainerProps)

Summary

The EmbedContainer component provides a standardized, visually consistent container frame for embedding content sections in the app. It combines app branding, a customizable header with avatar and reset functionality, and a flexible content area. Its integration with app configuration hooks and local UI components ensures it adapts dynamically and fits seamlessly into the app's overall UI framework.