Support for popover container

[artugam]

I tried to use this chat in html shadow container and it worked. Almost.

The problem is with popover because by default it's injecting to body tag.

I would a customization option for this cause popover portal is very deep in logic and can't simply edit only this element .

https://github.com/run-llama/chat-ui/blob/main/packages/chat-ui/src/ui/popover.tsx#L27

I need to have here something like

const myContainer = ${myHtmlElementHere}

<PopoverPrimitive.Portal container={myContainer}>

If there is any workoud around please advise

[marcusschiesser]

At the moment, you can't modify the popover component directly. For this to happen we would need to release chat-ui exclusively to be installed by npx shadcn and remove the support of installing it manually.

As a workaround, you can modify the ChatCanvas.Actions component which is using the popover (see
https://github.com/run-llama/chat-ui/blob/main/packages/chat-ui/src/chat/canvas/actions.tsx#L56)

custom canvas example shows how to modify chat components, see:

chat-ui/apps/web/app/demo/canvas/custom/page.tsx

Lines 189 to 192 in e94c22a

	<ChatCanvas.Actions>
	<ChatCanvas.Actions.History />
	<ChatCanvas.Actions.Close />
	</ChatCanvas.Actions>

You can do something like:

<ChatCanvas.Actions>
  <CustomChatCanvasHistory /> -- custom history component with your popover 
  <ChatCanvas.Actions.Close />
</ChatCanvas.Actions>