/**
*
* 
*
* A chatbot popup component for the VN SDK framework. The component allows for a high degree
* of customization through various props and custom CSS.
*
* See [AiSidebar](/reference/components/chat/AiSidebar) for a sidebar version of this component.
*
* ## Install Dependencies
*
* This component is part of the [@vn-sdk/react-ui](https://npmjs.com/package/@vn-sdk/react-ui) package.
*
* ```shell npm2yarn \"@vn-sdk/react-ui"\
* npm install @vn-sdk/react-core @vn-sdk/react-ui
* ```
* ## Usage
*
* ```tsx
* import { AiPopup } from "@vn-sdk/react-ui";
* import "@vn-sdk/react-ui/styles.css";
*
*
* ```
*
* ### With Observability Hooks
*
* To monitor user interactions, provide the `observabilityHooks` prop.
* **Note:** This requires a `publicApiKey` in the `` provider.
*
* ```tsx
*
* {
* console.log("Popup opened");
* },
* onChatMinimized: () => {
* console.log("Popup closed");
* },
* }}
* />
*
* ```
*
* ### Look & Feel
*
* By default, VN SDK components do not have any styles. You can import VN SDK's stylesheet at the root of your project:
* ```tsx title="YourRootComponent.tsx"
* ...
* import "@vn-sdk/react-ui/styles.css"; // [!code highlight]
*
* export function YourRootComponent() {
* return (
*
* ...
*
* );
* }
* ```
* For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
*/
import { AiModal, AiModalProps } from "./Modal";
export function AiPopup(props: AiModalProps) {
props = {
...props,
className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup",
};
return {props.children};
}