Repository: Avaiga/taipy
File: frontend/taipy-gui/src/components/Taipy/Chat.tsx (TypeScript)

Code before:

    return (
        <Tooltip title={hover || ""}>
            <Paper className={`${className} ${getComponentClassName(props.children)}`} sx={boxSx} id={id}>
                <Grid container rowSpacing={2} sx={gridSx} ref={scrollDivRef}>
                    {rows.length && !rows[0] ? (
                        <Grid className={getSuffixedClassNames(className, "-load")} size={12} sx={noAnchorSx}>
                            <Box sx={loadMoreSx}>
                                <Button
                                    endIcon={<ArrowUpward />}
                                    onClick={loadOlder}
                                    data-start={rows.length - rows.findIndex((row) => !!row)}
                                >
                                    Load More
                                </Button>
                            </Box>
                        </Grid>
                    ) : null}
                    {rows.map((row, idx) =>
                        row ? (
                            <ChatRow
                                key={columns[0] ? `${row[columns[0]]}` : `id${idx}`}
                                senderId={senderId}
                                message={`${row[columns[1]]}`}
                                name={columns[2] ? `${row[columns[2]]}` : "Unknown"}
                                image={row[columns[3]] ? `${row[columns[3]]}` : null}
                                className={className}
                                getAvatar={getAvatar}
                                index={idx}
                                showSender={showSender}
                                mode={mode}
                            />
                        ) : null
                    )}
                    <Box sx={anchorSx} ref={anchorDivRef} />
                </Grid>
                <Popper id={id} open={Boolean(anchorPopup)} anchorEl={anchorPopup} placement="right">
                    <Chip
                        label="A new message is available"
                        variant="outlined"
                        onClick={showBottom}
                        icon={<ArrowDownward />}
                    />
                </Popper>
                {withInput ? (
                    <>
                    {imagePreview && selectedFile && (
                            <Box mb={1}>
                                <Chip
                                    label={selectedFile.name}
                                    avatar={<Avatar alt="Image preview" src={imagePreview}/>}

Review comment (suggestion):
image={columns[3] && columns[3] != "_tp_index" ? `${row[columns[3]]}` : undefined}


Code after:
                URL.revokeObjectURL(objectURL);
            }
        };
    }, [objectURLs]);

    const loadOlder = useCallback(
        (evt: MouseEvent<HTMLElement>) => {
            const { start } = evt.currentTarget.dataset;
            if (start) {
                loadMoreItems(parseInt(start));
            }
        },
        [loadMoreItems]
    );

    return (
        <Tooltip title={hover || ""}>
            <Paper className={`${className} ${getComponentClassName(props.children)}`} sx={boxSx} id={id}>
                <Grid container rowSpacing={2} sx={gridSx} ref={scrollDivRef}>
                    {rows.length && !rows[0] ? (
                        <Grid className={getSuffixedClassNames(className, "-load")} size={12} sx={noAnchorSx}>
                            <Box sx={loadMoreSx}>
                                <Button
                                    endIcon={<ArrowUpward />}
                                    onClick={loadOlder}
                                    data-start={rows.length - rows.findIndex((row) => !!row)}
                                >
                                    Load More
                                </Button>
                            </Box>
                        </Grid>
                    ) : null}
                    {rows.map((row, idx) =>
                        row ? (
                            <ChatRow
                                key={columns[0] ? `${row[columns[0]]}` : `id${idx}`}
                                senderId={senderId}
                                message={`${row[columns[1]]}`}
                                name={columns[2] ? `${row[columns[2]]}` : "Unknown"}
                                image={columns[3] && columns[3] != "_tp_index" && row[columns[3]] ? `${row[columns[3]]}` : undefined}
                                className={className}
                                getAvatar={getAvatar}
                                index={idx}
                                showSender={showSender}
                                mode={mode}
                            />
                        ) : null
                    )}
                    <Box sx={anchorSx} ref={anchorDivRef} />
                </Grid>
                <Popper id={id} open={Boolean(anchorPopup)} anchorEl={anchorPopup} placement="right">