chore: migrate to @assembly-js/node-sdk and app-bridge

jest.config.ts

@@ -187,7 +187,7 @@ const config: Config = {
   // transform: undefined,
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: ['/node_modules/copilot-node-sdk/(.*)'],
+  // transformIgnorePatterns: ['/node_modules/@assembly-js/node-sdk/(.*)'],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

package.json

@@ -19,7 +19,8 @@
     "bottleneck": "^2.19.5",
     "clsx": "^2.1.1",
     "copilot-design-system": "^2.3.4",
-    "copilot-node-sdk": "^3.16.0",
+    "@assembly-js/app-bridge": "^1.1.0",
+    "@assembly-js/node-sdk": "^4.0.2",
     "dayjs": "^1.11.10",
     "deep-equal": "^2.2.3",
     "fetch-retry": "^6.0.0",

src/app/client/page.tsx

@@ -104,7 +104,7 @@ export default async function ClientPage(props: { searchParams: Promise<{ token:
           <AllTasksFetcher token={token} />
         </Suspense>
 
-        <TaskBoardAppBridge token={token} role={UserRole.Client} portalUrl={workspace.portalUrl} />
+        <TaskBoardAppBridge token={token} role={UserRole.Client} />
         <RealTime tokenPayload={tokenPayload}>
           <DndWrapper>
             <TaskBoard mode={UserRole.Client} token={token} />

src/app/detail/[task_id]/[user_type]/page.tsx

@@ -160,12 +160,7 @@ export default async function TaskDetailPage(props: {
                 </StyledBox>
               ) : (
                 <>
-                  <HeaderBreadcrumbs
-                    token={token}
-                    items={breadcrumbItems}
-                    userType={params.user_type}
-                    portalUrl={workspace.portalUrl}
-                  />
+                  <HeaderBreadcrumbs token={token} items={breadcrumbItems} userType={params.user_type} />
                   <ArchiveWrapper taskId={task_id} userType={user_type} />
                 </>
               )}
@@ -249,7 +244,6 @@ export default async function TaskDetailPage(props: {
                 task_id={task_id}
                 selectedAssigneeId={task?.assigneeId}
                 userType={user_type}
-                portalUrl={workspace.portalUrl}
                 selectedWorkflowState={task?.workflowState}
                 updateWorkflowState={async (workflowState) => {
                   'use server'

src/app/detail/ui/ClientDetailAppBridge.tsx

@@ -9,10 +9,9 @@ import { useCallback, useEffect, useState } from 'react'
 interface DetailAppBridgeProps {
   handleTaskComplete: () => void
   isTaskCompleted: boolean
-  portalUrl?: string
 }
 
-export const ClientDetailAppBridge = ({ handleTaskComplete, isTaskCompleted, portalUrl }: DetailAppBridgeProps) => {
+export const ClientDetailAppBridge = ({ handleTaskComplete, isTaskCompleted }: DetailAppBridgeProps) => {
   const awake = useAwake()
 
   const handleMarkAsDone = useCallback(() => {
@@ -29,9 +28,8 @@ export const ClientDetailAppBridge = ({ handleTaskComplete, isTaskCompleted, por
           icon: Icons.CHECK,
           onClick: handleMarkAsDone,
         },
-    { portalUrl },
   )
-  useSecondaryCta(null, { portalUrl })
+  useSecondaryCta(null)
 
   return <></>
 }

src/app/detail/ui/DetailAppBridge.tsx

@@ -10,13 +10,12 @@ import store from '@/redux/store'
 interface DetailAppBridgeProps {
   isArchived: boolean
   handleToggleArchive: () => void
-  portalUrl?: string
 }
 
-export const DetailAppBridge = ({ isArchived, handleToggleArchive, portalUrl }: DetailAppBridgeProps) => {
+export const DetailAppBridge = ({ isArchived, handleToggleArchive }: DetailAppBridgeProps) => {
   const handleDelete = () => store.dispatch(setShowConfirmDeleteModal())
 
-  usePrimaryCta(null, { portalUrl })
+  usePrimaryCta(null)
   useSecondaryCta(
     isArchived
       ? {
@@ -25,7 +24,6 @@ export const DetailAppBridge = ({ isArchived, handleToggleArchive, portalUrl }:
           onClick: handleToggleArchive,
         }
       : null,
-    { portalUrl },
   )
 
   const items: Clickable[] = [
@@ -44,7 +42,7 @@ export const DetailAppBridge = ({ isArchived, handleToggleArchive, portalUrl }:
     })
   }
 
-  useActionsMenu(items, { portalUrl })
+  useActionsMenu(items)
 
   return <></>
 }

src/app/detail/ui/Sidebar.tsx

@@ -67,7 +67,6 @@ export const Sidebar = ({
   disabled,
   workflowDisabled = false,
   userType,
-  portalUrl,
 }: {
   task_id: string
   selectedWorkflowState: WorkflowStateResponse
@@ -78,7 +77,6 @@ export const Sidebar = ({
   disabled: boolean
   workflowDisabled?: boolean
   userType: UserType
-  portalUrl?: string
 }) => {
   const { activeTask, workflowStates, assignee, previewMode } = useSelector(selectTaskBoard)
   const { showSidebar, showConfirmAssignModal, fromNotificationCenter } = useSelector(selectTaskDetails)
@@ -617,7 +615,6 @@ export const Sidebar = ({
             completedWorkflowState && updateStatusValue(completedWorkflowState)
             completedWorkflowState && updateWorkflowState(completedWorkflowState)
           }}
-          portalUrl={portalUrl}
         />
       )}
     </Box>

src/app/manage-templates/[template_id]/page.tsx

@@ -80,7 +80,7 @@ export default async function TaskDetailPage(props: {
                 <HeaderBreadcrumbs token={token} items={breadcrumbItems} userType={UserType.INTERNAL_USER} />
               )}
             </StyledBox>
-            <ManageTemplateDetailsAppBridge portalUrl={workspace.portalUrl} template={template} />
+            <ManageTemplateDetailsAppBridge template={template} />
             <TaskDetailsContainer
               sx={{
                 padding: { xs: '20px 16px ', sm: '30px 20px' },

src/app/manage-templates/page.tsx

@@ -82,7 +82,7 @@ export default async function ManageTemplatesPage(props: ManageTemplatesPageProp
       templates={templates}
       tokenPayload={tokenPayload}
     >
-      <ManageTemplatesAppBridge token={token} role={UserRole.IU} portalUrl={workspace.portalUrl} />
+      <ManageTemplatesAppBridge token={token} role={UserRole.IU} />
       <RealTimeTemplates tokenPayload={tokenPayload} token={token}>
         <TemplateBoard
           handleCreateTemplate={async (payload: CreateTemplateRequest) => {

src/app/manage-templates/ui/ManageTemplatesAppBridge.tsx

@@ -13,31 +13,24 @@ import { useRouter } from 'next/navigation'
 interface TaskBoardAppBridgeProps {
   token: string
   role: UserRole
-  portalUrl?: string
 }
 
-export const ManageTemplatesAppBridge = ({ token, role, portalUrl }: TaskBoardAppBridgeProps) => {
+export const ManageTemplatesAppBridge = ({ token, role }: TaskBoardAppBridgeProps) => {
   const handleTemplateCreate = () => {
     store.dispatch(setShowTemplateModal({ targetMethod: TargetMethod.POST }))
   }
 
-  usePrimaryCta(
+  usePrimaryCta({
+    label: 'Create template',
+    icon: Icons.PLUS,
+    onClick: handleTemplateCreate,
+  })
+  useActionsMenu([])
+  useBreadcrumbs([
     {
-      label: 'Create template',
-      icon: Icons.PLUS,
-      onClick: handleTemplateCreate,
+      label: 'Manage templates',
     },
-    { portalUrl },
-  )
-  useActionsMenu([], { portalUrl })
-  useBreadcrumbs(
-    [
-      {
-        label: 'Manage templates',
-      },
-    ],
-    { portalUrl },
-  )
+  ])
 
   return <></>
 }

src/app/manage-templates/ui/ManageTemplatesDetailsAppBridge.tsx

@@ -12,11 +12,10 @@ import { ITemplate } from '@/types/interfaces'
 import { useCallback, useEffect, useState } from 'react'
 
 interface ManageTemplateDetailsAppBridgeProps {
-  portalUrl?: string
   template: ITemplate
 }
 
-export const ManageTemplateDetailsAppBridge = ({ portalUrl, template }: ManageTemplateDetailsAppBridgeProps) => {
+export const ManageTemplateDetailsAppBridge = ({ template }: ManageTemplateDetailsAppBridgeProps) => {
   const awake = useAwake()
 
   const handleDeleteTemplate = useCallback(() => {
@@ -34,8 +33,8 @@ export const ManageTemplateDetailsAppBridge = ({ portalUrl, template }: ManageTe
       onClick: handleDeleteTemplate,
     },
   ]
-  usePrimaryCta(null, { portalUrl })
-  useActionsMenu(items, { portalUrl })
+  usePrimaryCta(null)
+  useActionsMenu(items)
 
   return <></>
 }

src/app/ui/TaskBoard.tsx

@@ -134,7 +134,7 @@ export const TaskBoard = ({ mode, workspace, token }: TaskBoardProps) => {
     <>
       <TaskDataFetcher token={token} />
 
-      {mode == UserRole.IU && <TaskBoardAppBridge token={token} role={UserRole.IU} portalUrl={workspace?.portalUrl} />}
+      {mode == UserRole.IU && <TaskBoardAppBridge token={token} role={UserRole.IU} />}
 
       {/* Filterbars */}
       <FilterBar mode={mode} />

src/app/ui/TaskBoardAppBridge.tsx

@@ -15,11 +15,10 @@ import { useCallback, useEffect, useState } from 'react'
 interface TaskBoardAppBridgeProps {
   token: string
   role: UserRole
-  portalUrl?: string
   isTaskBoardEmpty?: boolean
 }
 
-export const TaskBoardAppBridge = ({ token, role, portalUrl, isTaskBoardEmpty = false }: TaskBoardAppBridgeProps) => {
+export const TaskBoardAppBridge = ({ token, role, isTaskBoardEmpty = false }: TaskBoardAppBridgeProps) => {
   const router = useRouter()
   const awake = useAwake()
 
@@ -41,11 +40,10 @@ export const TaskBoardAppBridge = ({ token, role, portalUrl, isTaskBoardEmpty =
           icon: Icons.PLUS,
           onClick: handleTaskCreate,
         },
-    { portalUrl },
   )
 
   // Unset "Unarchive" button from tasks details if redirected to board from an archived task
-  useSecondaryCta(null, { portalUrl })
+  useSecondaryCta(null)
 
   useActionsMenu(
     role == UserRole.Client
@@ -57,9 +55,8 @@ export const TaskBoardAppBridge = ({ token, role, portalUrl, isTaskBoardEmpty =
             onClick: handleManageTemplatesClick,
           },
         ],
-    { portalUrl },
   )
-  useBreadcrumbs([], { portalUrl })
+  useBreadcrumbs([])
 
   return <></>
 }

src/cmd/serve-embedded/index.ts

@@ -29,8 +29,8 @@ const createNgrokTunnel = async (port: number): Promise<string> => {
   return ngrokUrl
 }
 
-const openDashboard = async (ngrokUrl: string) => {
-  const url = `${DASHBOARD_DOMAIN}/dev-mode?url=${encodeURIComponent(ngrokUrl)}`
+const openDashboard = async (appUrl: string) => {
+  const url = `${DASHBOARD_DOMAIN[0]}/dev-mode?url=${encodeURIComponent(appUrl)}`
   console.info(`> Opening browser at ${url}`)
 
   const browserApp = Array.isArray(apps.browser) ? apps.browser[0] : apps.browser
@@ -51,6 +51,9 @@ const handleProcessEvents = () => {
 async function startServer() {
   await app.prepare()
 
+  const useNgrok = !!process.env.NGROK_AUTHTOKEN
+  const appUrl = useNgrok ? await createNgrokTunnel(port) : `http://localhost:${port}`
+
   const server = createServer((req: IncomingMessage, res: ServerResponse) => {
     if (!req.url) {
       res.statusCode = 400
@@ -59,7 +62,7 @@ async function startServer() {
     }
 
     const parsedUrl = parse(req.url, true)
-    res.setHeader('Set-Cookie', `ngrokUrl=${ngrokUrl}`)
+    res.setHeader('Set-Cookie', `appUrl=${appUrl}`)
     res.setHeader('X-Frame-Options', '')
     handle(req, res, parsedUrl)
   })
@@ -68,8 +71,7 @@ async function startServer() {
     console.info(`> Server listening at http://localhost:${port}`)
   })
 
-  const ngrokUrl = await createNgrokTunnel(port)
-  await openDashboard(ngrokUrl)
+  await openDashboard(appUrl)
   handleProcessEvents()
 }
 

src/components/layouts/HeaderBreadcrumbs.tsx

@@ -17,12 +17,10 @@ export const HeaderBreadcrumbs = ({
   token,
   items,
   userType,
-  portalUrl,
 }: {
   token: string | undefined
   items: { label: string; href?: string }[]
   userType: UserType
-  portalUrl?: string
 }) => {
   const { previewMode } = useSelector(selectTaskBoard)
   const router = useRouter()
@@ -41,7 +39,6 @@ export const HeaderBreadcrumbs = ({
       label,
       onClick: index === items.length - 1 ? undefined : href ? () => router.push(href) : undefined,
     })),
-    { portalUrl },
   )
 
   if (!previewMode) {

src/config/index.ts

@@ -1,5 +1,3 @@
-import z from 'zod'
-
 export const copilotAPIKey = process.env.COPILOT_API_KEY || ''
 export const tasksAppId = process.env.COPILOT_TASKS_APP_ID || ''
 
@@ -30,4 +28,4 @@ export const showQueries = (() => {
   return true
 })()
 
-export const assemblyApiDomain = z.string().url().parse(process.env.NEXT_PUBLIC_ASSEMBLY_API_DOMAIN)
+export const assemblyApiDomain = process.env.NEXT_PUBLIC_ASSEMBLY_API_DOMAIN ?? ''

src/hoc/ClientSideStateUpdate.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { AssemblyBridge } from '@assembly-js/app-bridge'
 import { setTokenPayload, setWorkspace } from '@/redux/features/authDetailsSlice'
 import {
   selectTaskBoard,
@@ -87,6 +88,10 @@ export const ClientSideStateUpdate = ({
       store.dispatch(setToken(token))
     }
 
+    const unsubscribeTokenRefresh = AssemblyBridge.sessionToken.onTokenUpdate((data) => {
+      store.dispatch(setToken(data.token))
+    })
+
     if (assignee) {
       store.dispatch(setAssigneeList(assignee))
     }
@@ -152,13 +157,17 @@ export const ClientSideStateUpdate = ({
 
     if (workspace) {
       store.dispatch(setWorkspace(workspace))
+      if (workspace.portalUrl) {
+        AssemblyBridge.configure({ additionalOrigins: [workspace.portalUrl] })
+      }
     }
     if (template) {
       store.dispatch(setActiveTemplate(template))
     }
     return () => {
       store.dispatch(setActiveTask(undefined))
       store.dispatch(setActiveTemplate(null))
+      unsubscribeTokenRefresh()
     } //when component is unmounted, we need to clear the active task.
   }, [
     workflowStates,