Getting the last index of the message to display the typing indicator

[Dunridge]

I'm rendering a markdown reply from an AI model and I want to add a typing indicator:

<ReactMarkdown
                            children={content}
                            remarkPlugins={[gfm]}
                            rehypePlugins={[rehypeRaw, rehypeSanitize]}
                            components={components}
                        />

...

 const components = {
        p: ({ node, ...props }: any) => {
            const last = true;

            return (
                <p {...props}>
                    {props.children}
                     { last && <Image src={...} />  }
                </p>
            );
        },
        li: ({ node, ...props }: any) => {
            const last = true;

            return (
                <li {...props}>
                    {props.children}
                    { last && <Image src={...} />  }
                </li>
            );
        },
    };

The model gives multiple p and li tags as a the markdown is added to the text - I'm appending a blinking dot as a typing indicator at the end of the message. Is there a way to pass the index to the props of the rendered p and li tags so that I append the blinking dot to the last p or li tag? (Right now it's appending the image to every p and li tags) (my guess was to set the last boolean to that condition but there's no index information in the props)

[ChristianMurphy]

See https://github.com/orgs/remarkjs/discussions/1321

[Dunridge]

The issue is not with the typing animation and CSS - I need to display the image based on the condition of the last element in react-markdown as each line in the final html is rendered as a p or li tag. How to see whether the tag is actually the last one in react-markdown? I found this issue -- remarkjs/react-markdown#213 -- but the functionality has been updated. How to achieve this with the current version of the library?

[ChristianMurphy]

I continue to believe CSS is the best approach.
If you want to go a React/JS approach, see https://github.com/orgs/remarkjs/discussions/1310