{"version":3,"sources":["../src/components/chat/Sidebar.tsx"],"sourcesContent":["/**\n * <br/>\n * <img src=\"https://cdn.vn.ai/docs/vn-sdk/images/AiSidebar.gif\" width=\"500\" />\n *\n * A chatbot sidebar component for the VN SDK framework. Highly customizable through various props and custom CSS.\n *\n * See [AiPopup](/reference/components/chat/AiPopup) for a popup version of this component.\n *\n * ## Install Dependencies\n *\n * This component is part of the [@vn-sdk/react-ui](https://npmjs.com/package/@vn-sdk/react-ui) package.\n *\n * ```shell npm2yarn \\\"@vn-sdk/react-ui\"\\\n * npm install @vn-sdk/react-core @vn-sdk/react-ui\n * ```\n *\n * ## Usage\n *\n * ```tsx\n * import { AiSidebar } from \"@vn-sdk/react-ui\";\n * import \"@vn-sdk/react-ui/styles.css\";\n *\n * <AiSidebar\n *   labels={{\n *     title: \"Your Assistant\",\n *     initial: \"Hi! 👋 How can I assist you today?\",\n *   }}\n * >\n *   <YourApp/>\n * </AiSidebar>\n * ```\n *\n * ### With Observability Hooks\n *\n * To monitor user interactions, provide the `observabilityHooks` prop.\n * **Note:** This requires a `publicApiKey` in the `<AiProvider>` provider.\n *\n * ```tsx\n * <VN SDK publicApiKey=\"YOUR_PUBLIC_API_KEY\">\n *   <AiSidebar\n *     observabilityHooks={{\n *       onChatExpanded: () => {\n *         console.log(\"Sidebar opened\");\n *       },\n *       onChatMinimized: () => {\n *         console.log(\"Sidebar closed\");\n *       },\n *     }}\n *   >\n *     <YourApp/>\n *   </AiSidebar>\n * </AiProvider>\n * ```\n *\n * ### Look & Feel\n *\n * By default, VN SDK components do not have any styles. You can import VN SDK's stylesheet at the root of your project:\n * ```tsx title=\"YourRootComponent.tsx\"\n * ...\n * import \"@vn-sdk/react-ui/styles.css\"; // [!code highlight]\n *\n * export function YourRootComponent() {\n *   return (\n *     <AiProvider>\n *       ...\n *     </AiProvider>\n *   );\n * }\n * ```\n * 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.\n */\nimport React, { useState } from \"react\";\nimport { AiModal, AiModalProps } from \"./Modal\";\n\nexport function AiSidebar(props: AiModalProps) {\n  props = {\n    ...props,\n    className: props.className ? props.className + \" copilotKitSidebar\" : \"copilotKitSidebar\",\n  };\n  const [expandedClassName, setExpandedClassName] = useState(\n    props.defaultOpen ? \"sidebarExpanded\" : \"\",\n  );\n\n  const onSetOpen = (open: boolean) => {\n    props.onSetOpen?.(open);\n    setExpandedClassName(open ? \"sidebarExpanded\" : \"\");\n  };\n\n  return (\n    <div className={`copilotKitSidebarContentWrapper ${expandedClassName}`}>\n      <AiModal {...props} {...{ onSetOpen }}>\n        {props.children}\n      </AiModal>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAuEA,SAAgB,gBAAgB;AAmB1B;AAhBC,SAAS,UAAU,OAAqB;AAC7C,UAAQ,iCACH,QADG;AAAA,IAEN,WAAW,MAAM,YAAY,MAAM,YAAY,uBAAuB;AAAA,EACxE;AACA,QAAM,CAAC,mBAAmB,oBAAoB,IAAI;AAAA,IAChD,MAAM,cAAc,oBAAoB;AAAA,EAC1C;AAEA,QAAM,YAAY,CAAC,SAAkB;AAnFvC;AAoFI,gBAAM,cAAN,+BAAkB;AAClB,yBAAqB,OAAO,oBAAoB,EAAE;AAAA,EACpD;AAEA,SACE,oBAAC,SAAI,WAAW,mCAAmC,qBACjD,8BAAC,yDAAY,QAAW,EAAE,UAAU,IAAnC,EACE,gBAAM,WACT,GACF;AAEJ;","names":[]}