Fix: Component definition is missing display name. (#14255)

### What problem does this PR solve?

Fix: Component definition is missing display name.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/children-delimiter-form.tsx

@@ -18,7 +18,10 @@ interface IProps {
 }
 
 export const DelimiterInput = forwardRef<HTMLInputElement, InputProps & IProps>(
-  ({ value, onChange, maxLength, defaultValue, ...props }, ref) => {
+  function DelimiterInput(
+    { value, onChange, maxLength, defaultValue, ...props },
+    ref,
+  ) {
     const nextValue = value
       ?.replaceAll('\n', '\\n')
       .replaceAll('\t', '\\t')

web/src/components/delimiter-form-field.tsx

@@ -17,7 +17,10 @@ interface IProps {
 }
 
 export const DelimiterInput = forwardRef<HTMLInputElement, InputProps & IProps>(
-  ({ value, onChange, maxLength, defaultValue, ...props }, ref) => {
+  function DelimiterInput(
+    { value, onChange, maxLength, defaultValue, ...props },
+    ref,
+  ) {
     const nextValue = value
       ?.replaceAll('\n', '\\n')
       .replaceAll('\t', '\\t')

web/src/components/document-preview/document-header.tsx

@@ -9,7 +9,12 @@ type Props = {
   className?: string;
 };
 
-export default ({ size, name, create_date, className }: Props) => {
+export default function DocumentHeader({
+  size,
+  name,
+  create_date,
+  className,
+}: Props) {
   const sizeName = formatBytes(size);
   const dateStr = formatDate(create_date);
 
@@ -32,4 +37,4 @@ export default ({ size, name, create_date, className }: Props) => {
       </dl>
     </header>
   );
-};
+}

web/src/components/theme-switch.tsx

@@ -8,7 +8,7 @@ import { forwardRef } from 'react';
 const ThemeSwitch = forwardRef<
   React.ElementRef<typeof Root>,
   React.ComponentPropsWithoutRef<typeof Root>
->(({ className, ...props }, ref) => {
+>(function ThemeSwitch({ className, ...props }, ref) {
   const { setTheme } = useTheme();
   const isDark = useIsDarkTheme();
 

web/src/components/ui/dual-range-slider.tsx

@@ -80,4 +80,6 @@ const SingleFormSlider = React.forwardRef<
   );
 });
 
+SingleFormSlider.displayName = 'SingleFormSlider';
+
 export { DualRangeSlider, SingleFormSlider };

web/src/components/ui/textarea.tsx

@@ -10,8 +10,10 @@ import {
   useRef,
   useState,
 } from 'react';
-interface TextareaProps
-  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'autoSize'> {
+interface TextareaProps extends Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'autoSize'
+> {
   autoSize?: {
     minRows?: number;
     maxRows?: number;
@@ -95,9 +97,10 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         )}
         rows={autoSize?.minRows ?? props.rows ?? undefined}
         style={{
-          maxHeight: autoSize?.maxRows && !resizable
-            ? `${autoSize.maxRows * 20}px`
-            : undefined,
+          maxHeight:
+            autoSize?.maxRows && !resizable
+              ? `${autoSize.maxRows * 20}px`
+              : undefined,
           resize,
         }}
         ref={textareaRef}
@@ -118,7 +121,7 @@ export const BlurTextarea = forwardRef<
     value: Value;
     onChange(value: Value): void;
   }
->(({ value, onChange, ...props }, ref) => {
+>(function BlurTextarea({ value, onChange, ...props }, ref) {
   const [val, setVal] = useState<Value>();
 
   const handleChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/checkbox-sets.tsx

@@ -18,7 +18,7 @@ type ICheckboxSetProps = {
   checked: boolean;
   selectedChunkIds: string[];
 };
-export default (props: ICheckboxSetProps) => {
+export default function CheckboxSets(props: ICheckboxSetProps) {
   const {
     className,
     selectAllChunk,
@@ -79,4 +79,4 @@ export default (props: ICheckboxSetProps) => {
       )}
     </div>
   );
-};
+}

web/src/pages/dataflow-result/components/chunk-result-bar/checkbox-sets.tsx

@@ -10,7 +10,7 @@ type ICheckboxSetProps = {
   checked: boolean;
   selectedChunkIds: string[];
 };
-export default (props: ICheckboxSetProps) => {
+export default function CheckboxSets(props: ICheckboxSetProps) {
   const { selectAllChunk, removeChunk, checked, selectedChunkIds } = props;
   const { t } = useTranslation();
   const handleSelectAllCheck = useCallback(
@@ -53,4 +53,4 @@ export default (props: ICheckboxSetProps) => {
       )}
     </div>
   );
-};
+}

web/src/pages/dataflow-result/components/chunk-result-bar/index.tsx

@@ -9,11 +9,11 @@ interface ChunkResultBarProps {
   createChunk: (text: string) => void;
   isReadonly: boolean;
 }
-export default ({
+export default function ChunkResultBar({
   changeChunkTextMode,
   createChunk,
   isReadonly,
-}: ChunkResultBarProps) => {
+}: ChunkResultBarProps) {
   const { t } = useTranslate('chunk');
   const [textSelectValue, setTextSelectValue] = useState<ChunkTextMode>(
     ChunkTextMode.Full,
@@ -57,4 +57,4 @@ export default ({
       )}
     </div>
   );
-};
+}

web/src/pages/memories/add-or-edit-modal.tsx

@@ -14,7 +14,7 @@ type IProps = {
   loading?: boolean;
   isCreate?: boolean;
 };
-export const AddOrEditModal = memo((props: IProps) => {
+export const AddOrEditModal = memo(function AddOrEditModal(props: IProps) {
   const { open, onClose, onSubmit, initialMemory, isCreate } = props;
   const { t } = useTranslation();
   // const { modelOptions } = useModelOptions();