refactor: appContext to modals (#174)

Signed-off-by: Petr Kadlec <[email protected]>
i-am-bee · Jan 8, 2025 · b81bbbd · b81bbbd
1 parent ed7727b
commit b81bbbd
Show file tree

Hide file tree

Showing 78 changed files with 244 additions and 477 deletions.
diff --git a/.env.local.example b/.env.local.example
@@ -4,8 +4,9 @@ API_URL=http://localhost:4000/
 SCHEMA_API_URL=http://localhost:4000/docs/json?showHidden=true
 SCHEMA_OBSERVE_URL=http://localhost:4000/docs/json
 
+FEATURE_FLAGS='{"Knowledge":true,"TextExtraction":true,"Files":true,"FunctionTools":true,"Observe":true}'
+
 NEXT_PUBLIC_APP_NAME="BeeAI"
-NEXT_PUBLIC_FEATURE_FLAGS='{"Knowledge":true,"TextExtraction":true,"Files":true,"FunctionTools":true,"Observe":true}'
 
 NEXT_PUBLIC_TOU_TEXT=
 NEXT_PUBLIC_PRIVACY_URL=

diff --git a/src/app/(main)/[projectId]/chat/[assistantId]/page.tsx b/src/app/(main)/[projectId]/chat/[assistantId]/page.tsx
@@ -45,10 +45,7 @@ export default async function AssistantChatPage({
 
   return (
     <LayoutInitializer layout={{ navbarProps: { type: 'chat', assistant } }}>
-      <VectorStoreFilesUploadProvider
-        projectId={projectId}
-        organizationId={organizationId}
-      >
+      <VectorStoreFilesUploadProvider>
         <FilesUploadProvider>
           <ChatProvider
             assistant={{

diff --git a/src/app/(main)/[projectId]/thread/[threadId]/page.tsx b/src/app/(main)/[projectId]/thread/[threadId]/page.tsx
@@ -70,10 +70,7 @@ export default async function ThreadPage({
         navbarProps: { type: 'chat', assistant: threadAssistant.data },
       }}
     >
-      <VectorStoreFilesUploadProvider
-        projectId={projectId}
-        organizationId={organizationId}
-      >
+      <VectorStoreFilesUploadProvider>
         <FilesUploadProvider>
           <ChatProvider
             thread={thread}

diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { ModalProvider } from '@/layout/providers/ModalProvider';
 import { UserProfileInitializer } from '@/store/user-profile/UserProfileInitializer';
 import { SessionProvider } from 'next-auth/react';
 import { PropsWithChildren } from 'react';
@@ -27,9 +26,7 @@ export default async function MainLayout({ children }: PropsWithChildren) {
   return (
     <SessionProvider>
       <UserProfileInitializer userProfile={session.userProfile}>
-        <QueryProvider>
-          <ModalProvider>{children}</ModalProvider>
-        </QueryProvider>
+        <QueryProvider>{children}</QueryProvider>
       </UserProfileInitializer>
     </SessionProvider>
   );

diff --git a/src/components/UploadDataset/UploadDataset.tsx b/src/components/UploadDataset/UploadDataset.tsx
@@ -24,7 +24,6 @@ import { createFile } from '@/app/api/files';
 import { CloudUpload } from '@carbon/react/icons';
 import mimeType from 'mime-types';
 import { useAppContext } from '@/layout/providers/AppProvider';
-import { useProjectContext } from '@/layout/providers/ProjectProvider';
 
 interface Props<
   TFieldValues extends FieldValues = FieldValues,
@@ -85,7 +84,7 @@ export function UploadDataset<
 }: Props<TFieldValues, TName>) {
   const prefix = usePrefix();
   const id = useId();
-  const { project, organization } = useProjectContext();
+  const { project, organization } = useAppContext();
 
   const { field } = useController({ control, name });
 

diff --git a/src/layout/providers/AppProvider.tsx b/src/layout/providers/AppProvider.tsx
@@ -34,7 +34,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { ProjectProvider } from './ProjectProvider';
 import { FeatureName } from '@/utils/parseFeatureFlags';
 
 export interface AppContextValue {
@@ -124,13 +123,7 @@ export function AppProvider({
           onPageLeaveRef,
         }}
       >
-        {/* TODO: remove duplicity of props in AppContext */}
-        <ProjectProvider
-          project={projectData ?? project}
-          organization={organization}
-        >
-          {children}
-        </ProjectProvider>
+        {children}
       </AppContext.Provider>
     </AppApiContext.Provider>
   );

diff --git a/src/layout/providers/ProjectProvider.tsx b/src/layout/providers/ProjectProvider.tsx
diff --git a/src/layout/shell/AppShell.tsx b/src/layout/shell/AppShell.tsx
@@ -22,6 +22,7 @@ import { AppProvider } from '../providers/AppProvider';
 import { AppHeader } from './AppHeader';
 import classes from './AppShell.module.scss';
 import { ensureDefaultOrganizationId } from '@/app/auth/rsc';
+import { ModalProvider } from '../providers/ModalProvider';
 
 interface Props {
   projectId: string;
@@ -43,13 +44,15 @@ export async function AppShell({
       organization={{ id: organizationId }}
       featureFlags={featureFlags}
     >
-      <div className={classes.root}>
-        <AppHeader />
+      <ModalProvider>
+        <div className={classes.root}>
+          <AppHeader />
 
-        <main id={MAIN_ELEMENT_ID} className={classes.content}>
-          {children}
-        </main>
-      </div>
+          <main id={MAIN_ELEMENT_ID} className={classes.content}>
+            {children}
+          </main>
+        </div>
+      </ModalProvider>
     </AppProvider>
   );
 }
diff --git a/src/layout/shell/MainNav.tsx b/src/layout/shell/MainNav.tsx
@@ -20,12 +20,11 @@ import { usePrefetchArtifacts } from '@/modules/apps/hooks/usePrefetchArtifacts'
 import { usePathname } from 'next/navigation';
 import { useAppContext } from '../providers/AppProvider';
 import classes from './MainNav.module.scss';
-import { useProjectContext } from '../providers/ProjectProvider';
 
 export function MainNav() {
   const pathname = usePathname();
 
-  const { project } = useProjectContext();
+  const { project } = useAppContext();
 
   const artifactsCount = useArtifactsCount();
 

diff --git a/src/layout/shell/SidebarButton.tsx b/src/layout/shell/SidebarButton.tsx
@@ -23,9 +23,9 @@ import { Button, ButtonBaseProps } from '@carbon/react';
 import { Close, Menu } from '@carbon/react/icons';
 import { MouseEvent } from 'react';
 import { UserSetting } from '../hooks/useUserSetting';
-import { useProjectContext } from '../providers/ProjectProvider';
 import { SidebarProps } from './Sidebar';
 import classes from './SidebarButton.module.scss';
+import { useAppContext } from '../providers/AppProvider';
 
 interface Props extends Omit<ButtonBaseProps, 'kind' | 'size' | 'className'> {
   sidebarId: SidebarProps['id'];
@@ -38,7 +38,7 @@ export function SidebarButton({
   onMouseEnter,
   ...props
 }: Props) {
-  const { project } = useProjectContext();
+  const { project } = useAppContext();
 
   const prefetchThreads = usePrefetchThreads();
   const prefetchArtifacts = usePrefetchArtifacts({ useDefaultParams: true });

diff --git a/src/layout/shell/UserProfile.tsx b/src/layout/shell/UserProfile.tsx
@@ -30,7 +30,7 @@ import { KeyboardEventHandler, useId, useMemo, useRef, useState } from 'react';
 import { useOnClickOutside } from 'usehooks-ts';
 import { TermsOfUseModal } from './TermsOfUseModal';
 import classes from './UserProfile.module.scss';
-import { useProjectContext } from '../providers/ProjectProvider';
+import { useAppContext } from '../providers/AppProvider';
 
 interface Props {
   className?: string;
@@ -40,7 +40,7 @@ export function UserProfile({ className }: Props) {
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const { project } = useProjectContext();
+  const { project } = useAppContext();
   const id = useId();
 
   const { openModal } = useModal();

diff --git a/src/modules/apps/builder/AppBuilder.tsx b/src/modules/apps/builder/AppBuilder.tsx
@@ -22,10 +22,6 @@ import { decodeMetadata, encodeMetadata } from '@/app/api/utils';
 import { Tooltip } from '@/components/Tooltip/Tooltip';
 import { useBreakpoint } from '@/hooks/useBreakpoint';
 import { useModal } from '@/layout/providers/ModalProvider';
-import {
-  ProjectProvider,
-  useProjectContext,
-} from '@/layout/providers/ProjectProvider';
 import { NavbarHeading } from '@/layout/shell/Navbar';
 import { ChatProvider, useChat } from '@/modules/chat/providers/ChatProvider';
 import {
@@ -54,6 +50,7 @@ import classes from './AppBuilder.module.scss';
 import { useAppBuilder, useAppBuilderApi } from './AppBuilderProvider';
 import { ArtifactSharedIframe } from './ArtifactSharedIframe';
 import { SourceCodeEditor } from './SourceCodeEditor';
+import { useAppContext } from '@/layout/providers/AppProvider';
 
 interface Props {
   thread?: Thread;
@@ -62,7 +59,7 @@ interface Props {
 }
 
 export function AppBuilder({ assistant, thread, initialMessages }: Props) {
-  const { project, organization } = useProjectContext();
+  const { project, organization } = useAppContext();
   const queryClient = useQueryClient();
   const { setCode, getCode } = useAppBuilderApi();
   const { artifact, code } = useAppBuilder();
@@ -160,7 +157,7 @@ function AppBuilderContent() {
   const [selectedTab, setSelectedTab] = useState(TabsKeys.Preview);
 
   const router = useRouter();
-  const { project, organization } = useProjectContext();
+  const { project, organization } = useAppContext();
   const { openModal } = useModal();
   const { getMessages, sendMessage, thread } = useChat();
   const { setArtifact, setMobilePreviewOpen } = useAppBuilderApi();
@@ -203,17 +200,15 @@ function AppBuilderContent() {
 
             if (isFirstNewApp || hasUnsavedChanges) {
               openModal((props) => (
-                <ProjectProvider project={project} organization={organization}>
-                  <SaveAppModal
-                    artifact={artifact}
-                    messageId={message?.id}
-                    code={code ?? undefined}
-                    onSaveSuccess={setArtifact}
-                    isConfirmation
-                    additionalMetadata={additionalMetadata}
-                    {...props}
-                  />
-                </ProjectProvider>
+                <SaveAppModal
+                  artifact={artifact}
+                  messageId={message?.id}
+                  code={code ?? undefined}
+                  onSaveSuccess={setArtifact}
+                  isConfirmation
+                  additionalMetadata={additionalMetadata}
+                  {...props}
+                />
               ));
               return;
             }
@@ -313,16 +308,11 @@ function AppBuilderContent() {
                       artifact
                         ? () =>
                             openModal((props) => (
-                              <ProjectProvider
-                                project={project}
-                                organization={organization}
-                              >
-                                <ShareAppModal
-                                  {...props}
-                                  artifact={artifact}
-                                  onSuccess={setArtifact}
-                                />
-                              </ProjectProvider>
+                              <ShareAppModal
+                                {...props}
+                                artifact={artifact}
+                                onSuccess={setArtifact}
+                              />
                             ))
                         : undefined
                     }
@@ -337,19 +327,14 @@ function AppBuilderContent() {
                   onClick={() => {
                     if (code) {
                       openModal((props) => (
-                        <ProjectProvider
-                          project={project}
-                          organization={organization}
-                        >
-                          <SaveAppModal
-                            artifact={artifact}
-                            messageId={message?.id}
-                            code={code}
-                            onSaveSuccess={setArtifact}
-                            additionalMetadata={additionalMetadata}
-                            {...props}
-                          />
-                        </ProjectProvider>
+                        <SaveAppModal
+                          artifact={artifact}
+                          messageId={message?.id}
+                          code={code}
+                          onSaveSuccess={setArtifact}
+                          additionalMetadata={additionalMetadata}
+                          {...props}
+                        />
                       ));
                     }
                   }}

diff --git a/src/modules/apps/builder/AppBuilderNavbarActions.tsx b/src/modules/apps/builder/AppBuilderNavbarActions.tsx
@@ -17,7 +17,6 @@
 import { useBreakpoint } from '@/hooks/useBreakpoint';
 import { useAppContext } from '@/layout/providers/AppProvider';
 import { useModal } from '@/layout/providers/ModalProvider';
-import { ProjectProvider } from '@/layout/providers/ProjectProvider';
 import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { useRouter } from 'next-nprogress-bar';
 import { useDeleteArtifact } from '../hooks/useDeleteArtifact';
@@ -50,9 +49,7 @@ export function AppBuilderNavbarActions({ artifact, showShareButton }: Props) {
           kind="tertiary"
           onClick={() =>
             openModal((props) => (
-              <ProjectProvider project={project} organization={organization}>
-                <ShareAppModal {...props} artifact={artifact} />
-              </ProjectProvider>
+              <ShareAppModal {...props} artifact={artifact} />
             ))
           }
         >