/**
 * <br/>
 * <img src="https://cdn.vn.ai/docs/vn-sdk/images/AiSidebar.gif" width="500" />
 *
 * 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";
 *
 * <AiSidebar
 *   labels={{
 *     title: "Your Assistant",
 *     initial: "Hi! 👋 How can I assist you today?",
 *   }}
 * >
 *   <YourApp/>
 * </AiSidebar>
 * ```
 *
 * ### With Observability Hooks
 *
 * To monitor user interactions, provide the `observabilityHooks` prop.
 * **Note:** This requires a `publicApiKey` in the `<AiProvider>` provider.
 *
 * ```tsx
 * <VN SDK publicApiKey="YOUR_PUBLIC_API_KEY">
 *   <AiSidebar
 *     observabilityHooks={{
 *       onChatExpanded: () => {
 *         console.log("Sidebar opened");
 *       },
 *       onChatMinimized: () => {
 *         console.log("Sidebar closed");
 *       },
 *     }}
 *   >
 *     <YourApp/>
 *   </AiSidebar>
 * </AiProvider>
 * ```
 *
 * ### 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 (
 *     <AiProvider>
 *       ...
 *     </AiProvider>
 *   );
 * }
 * ```
 * 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 (
    <div className={`copilotKitSidebarContentWrapper ${expandedClassName}`}>
      <AiModal {...props} {...{ onSetOpen }}>
        {props.children}
      </AiModal>
    </div>
  );
}
