Custom Components with new Slot System

[magic sluice]

I am having a hard time trying to figure out how to use the new slot system to swap out the copy button on the user/assistant message.

<CopilotChat
    disclaimer={MyDisclaimer} // this works
    messageView={{ userMessage: { copyButton: MyButton } }} // this doesn't
/>

[remote burrow]

Hi @magic sluice! We'll be publishing docs on it soon, in the mean time give this a check!

https://github.com/CopilotKit/vnext_experimental/tree/main/apps/react/storybook/stories

There are a bunch of code examples using the new chat interface. Once we feel good about comitting to the interface this will appear in the docs as well.

[magic sluice]

Thank you for the storybooks. Unfortunately, there seems to be no story that shows how to swap out an inner component. I can get it to work for a simple component setting the copyButton prop of the CopilotChatUserMessage. But when I try to integrate this into CopilotChatView it still shows the original copy button.

<CopilotKitProvider>
    <CopilotChatConfigurationProvider threadId="test">
        {/* This works */}
        <CopilotChatUserMessage message={message} copyButton={MyButton} />
        {/* This doesn't */}
        <CopilotChatView
            messages={[message]}
            messageView={{
                userMessage: {
                    copyButton: MyButton,
                },
            }}
        />
    </CopilotChatConfigurationProvider>
</CopilotKitProvider>

I also tried to replace userMessage with () => <CopilotChatUserMessage message={message} copyButton={MyButton} /> directly but that gives a type error, because userMessage requires all the properties of the namespace CopilotChatUserMessage.