impl UserGroupSelector

apps/app/src/features/openai/client/components/AiAssistant/AccessScopeDropdown.tsx

@@ -6,15 +6,16 @@ import {
 } from 'reactstrap';
 
 import { useCurrentUser } from '~/stores-universal/context';
-import { useSWRxUserRelatedGroups } from '~/stores/user';
 
 import { AiAssistantAccessScope, AiAssistantShareScope } from '../../../interfaces/ai-assistant';
 
+import { UserGroupSelector } from './UserGroupSelector';
+
 export const AccessScopeDropdown: React.FC = () => {
   const { t } = useTranslation();
   const { data: currentUser } = useCurrentUser();
-  const { data: userRelatedGroups } = useSWRxUserRelatedGroups();
 
+  const [isUserGroupSelectorOpen, setIsUserGroupSelectorOpen] = useState(false);
   const [selectedAccessScope, setSelectedAccessScope] = useState<AiAssistantAccessScope>(AiAssistantAccessScope.OWNER);
 
   const getAccessScopeLabel = useCallback((accessScope: AiAssistantAccessScope) => {
@@ -24,21 +25,35 @@ export const AccessScopeDropdown: React.FC = () => {
       : t(baseLabel);
   }, [currentUser?.username, t]);
 
+  const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
+    setSelectedAccessScope(accessScope);
+    if (accessScope === AiAssistantAccessScope.GROUPS) {
+      setIsUserGroupSelectorOpen(true);
+    }
+  }, []);
+
   return (
-    <UncontrolledDropdown>
-      <DropdownToggle
-        caret
-        className="btn-outline-secondary"
-      >
-        {getAccessScopeLabel(selectedAccessScope)}
-      </DropdownToggle>
-      <DropdownMenu>
-        { [AiAssistantAccessScope.OWNER, AiAssistantShareScope.GROUPS, AiAssistantAccessScope.PUBLIC_ONLY].map(accessScope => (
-          <DropdownItem onClick={() => setSelectedAccessScope(accessScope)}>
-            {getAccessScopeLabel(accessScope)}
-          </DropdownItem>
-        ))}
-      </DropdownMenu>
-    </UncontrolledDropdown>
+    <>
+      <UncontrolledDropdown>
+        <DropdownToggle
+          caret
+          className="btn-outline-secondary"
+        >
+          {getAccessScopeLabel(selectedAccessScope)}
+        </DropdownToggle>
+        <DropdownMenu>
+          { [AiAssistantAccessScope.OWNER, AiAssistantShareScope.GROUPS, AiAssistantAccessScope.PUBLIC_ONLY].map(accessScope => (
+            <DropdownItem onClick={() => selectAccessScopeHandler(accessScope)}>
+              {getAccessScopeLabel(accessScope)}
+            </DropdownItem>
+          ))}
+        </DropdownMenu>
+      </UncontrolledDropdown>
+
+      <UserGroupSelector
+        isOpen={isUserGroupSelectorOpen}
+        closeModal={() => setIsUserGroupSelectorOpen(false)}
+      />
+    </>
   );
 };

apps/app/src/features/openai/client/components/AiAssistant/UserGroupSelector.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+import {
+  Modal, ModalHeader, ModalBody,
+} from 'reactstrap';
+
+import { useSWRxUserRelatedGroups } from '~/stores/user';
+
+type Props = {
+  isOpen: boolean,
+  closeModal: () => void,
+}
+
+const UserGroupSelectorSubstance: React.FC<Props> = () => {
+  const { data: userRelatedGroups } = useSWRxUserRelatedGroups();
+
+  return (
+    <ModalBody>body</ModalBody>
+  );
+};
+
+export const UserGroupSelector: React.FC<Props> = (props) => {
+  const { t } = useTranslation();
+
+  const { isOpen, closeModal } = props;
+
+  return (
+    <Modal isOpen={isOpen} toggle={closeModal}>
+      <ModalHeader toggle={closeModal}>
+        {t('user_group.select_group')}
+      </ModalHeader>
+      <UserGroupSelectorSubstance {...props} />
+    </Modal>
+  );
+};