WIP: handling AiAssistantChatSidebar

apps/app/src/client/components/PageEditor/EditorNavbarBottom/EditorNavbarBottom.tsx

@@ -1,6 +1,9 @@
+import { useCallback } from 'react';
+
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 
+import { useAiAssistantChatSidebar } from '~/features/openai/client/stores/ai-assistant';
 import { useDrawerOpened } from '~/stores/ui';
 
 import styles from './EditorNavbarBottom.module.scss';
@@ -15,6 +18,18 @@ export const EditorNavbarBottom = (): JSX.Element => {
   const { t } = useTranslation();
   const { mutate: mutateDrawerOpened } = useDrawerOpened();
 
+  const { data, open, close } = useAiAssistantChatSidebar();
+  const { isOpened } = data ?? {};
+
+  const toggle = useCallback(() => {
+    if (isOpened) {
+      close();
+    }
+    else {
+      // open();
+    }
+  }, [isOpened, close]);
+
   return (
     <div className="border-top" data-testid="grw-editor-navbar-bottom">
       <div className={`flex-expand-horiz align-items-center p-2 ps-md-3 pe-md-4 ${moduleClass}`}>
@@ -29,7 +44,8 @@ export const EditorNavbarBottom = (): JSX.Element => {
           <OptionsSelector />
           <button
             type="button"
-            className="btn btn-sm btn-outline-neutral-secondary py-0"
+            className={`btn btn-sm btn-outline-neutral-secondary py-0 ${data?.isOpened ? 'active' : ''}`}
+            onClick={toggle}
           >
             <span className="d-flex align-items-center">
               <span className="growi-custom-icons py-0 fs-6">ai_assistant</span>