Refactor AiAssistantManagementPageTreeSelection to use SelectablePageTree for improved user access control

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementPageTreeSelection.tsx

@@ -9,6 +9,7 @@ import { ItemsTree } from '~/client/components/ItemsTree';
 import ItemsTreeContentSkeleton from '~/client/components/ItemsTree/ItemsTreeContentSkeleton';
 import type { TreeItemProps, TreeItemToolProps } from '~/client/components/TreeItem';
 import { TreeItemLayout, useNewPageInput } from '~/client/components/TreeItem';
+import { useIsGuestUser, useIsReadOnlyUser } from '~/stores-universal/context';
 
 import { AiAssistantManagementModalPageMode, useAiAssistantManagementModal } from '../../../stores/ai-assistant';
 
@@ -16,28 +17,42 @@ import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
 import { SelectablePagePageList } from './SelectablePagePageList';
 
 
-const PageTreeItem = (props : TreeItemProps): JSX.Element => {
-  const { itemNode, targetPathOrId } = props;
-  const { page } = itemNode;
+const SelectablePageTree = () => {
+  const { data: isGuestUser } = useIsGuestUser();
+  const { data: isReadOnlyUser } = useIsReadOnlyUser();
+
+  const PageTreeItem = (props: TreeItemProps) => {
+    const { itemNode, targetPathOrId } = props;
+    const { page } = itemNode;
+
+    const SelectPageButton = () => {
+      return (
+        <button
+          id="page-create-button-in-page-tree"
+          type="button"
+          className="border-0 rounded btn btn-page-it p-0"
+        >
+          <span className="material-symbols-outlined p-0 text-primary">add_circle</span>
+        </button>
+      );
+    };
 
-  const SelectPageButton = () => {
     return (
-      <button
-        id="page-create-button-in-page-tree"
-        type="button"
-        className="border-0 rounded btn btn-page-it p-0"
-      >
-        <span className="material-symbols-outlined p-0 text-primary">add_circle</span>
-      </button>
+      <TreeItemLayout
+        {...props}
+        itemClass={PageTreeItem}
+        // itemClassName={itemClassNames.join(' ')}
+        customHoveredEndComponents={[SelectPageButton]}
+      />
     );
   };
 
   return (
-    <TreeItemLayout
-      {...props}
-      itemClass={PageTreeItem}
-      // itemClassName={itemClassNames.join(' ')}
-      customHoveredEndComponents={[SelectPageButton]}
+    <ItemsTree
+      isEnableActions={!isGuestUser}
+      isReadOnlyUser={!!isReadOnlyUser}
+      targetPath="/"
+      CustomTreeItem={PageTreeItem}
     />
   );
 };
@@ -62,12 +77,7 @@ export const AiAssistantManagementPageTreeSelection = (): JSX.Element => {
         </h4>
 
         <Suspense fallback={<ItemsTreeContentSkeleton />}>
-          <ItemsTree
-            isEnableActions
-            isReadOnlyUser={false}
-            targetPath="/"
-            CustomTreeItem={PageTreeItem}
-          />
+          <SelectablePageTree />
         </Suspense>
 
         <h4 className="text-center fw-bold mb-3 mt-4">