Implementation:Infiniflow Ragflow RAGFlowAvatar Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, UI_Components
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete avatar component with hash-based automatic color selection and responsive font sizing provided by the RAGFlow frontend.

Description

The RAGFlowAvatar component renders an avatar image or, when no image is available, a colored initial-letter circle. It uses a SHA-like hash of the name to deterministically select from a predefined set of gradient colors, and employs ResizeObserver for responsive font sizing.

Usage

Import this component anywhere user or entity avatars are displayed, such as user profiles, knowledge base cards, agent cards, and chat messages.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/ragflow-avatar.tsx
• Lines: 1-121

Signature

export const RAGFlowAvatar = memo(forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
    name?: string;
    avatar?: string;
    isPerson?: boolean;
  }
>(function RAGFlowAvatar(props, ref)));

Import

import { RAGFlowAvatar } from '@/components/ragflow-avatar';

I/O Contract

Inputs

Name	Type	Required	Description
name	string	No	Entity name for initial and color selection
avatar	string	No	Image URL or base64 for avatar display
isPerson	boolean	No	Whether this represents a person

Outputs

Name	Type	Description
Rendered JSX	JSX.Element	Avatar circle with image or colored initial

Usage Examples

import { RAGFlowAvatar } from '@/components/ragflow-avatar';

<RAGFlowAvatar name="John Doe" avatar="/avatars/john.png" />
<RAGFlowAvatar name="Knowledge Base A" /> {/* Shows colored "K" */}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment