/**
*
* 
*
* A chatbot sidebar component for the VN SDK framework. Highly customizable through various props and custom CSS.
*
* See [AiPopup](/reference/components/chat/AiPopup) for a popup 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 { AiSidebar } 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("Sidebar opened");
* },
* onChatMinimized: () => {
* console.log("Sidebar 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 React, { useState } from "react";
import { AiModal, AiModalProps } from "./Modal";
export function AiSidebar(props: AiModalProps) {
props = {
...props,
className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar",
};
const [expandedClassName, setExpandedClassName] = useState(
props.defaultOpen ? "sidebarExpanded" : "",
);
const onSetOpen = (open: boolean) => {
props.onSetOpen?.(open);
setExpandedClassName(open ? "sidebarExpanded" : "");
};
return (
);
}