Implement sub-agents and custom tools on sidebar editor (#1792)

Author: andresgutgon

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/ContentArea/index.tsx

@@ -45,6 +45,11 @@ export function DocumentEditorContentArea({
   togglePlaygroundOpen: () => void
   isPlaygroundTransitioning: boolean
 }) {
+  const {
+    isEnabled: isEditorSidebarEnabled,
+    isLoading: isEditorSidebarFlagLoading,
+  } = useFeature('editorSidebar')
+  const { isEnabled: isRunStream } = useFeature('runs')
   const containerRef = useRef<HTMLDivElement | null>(null)
   const { metadata } = useMetadata()
   const { commit } = useCurrentCommit()
@@ -63,7 +68,6 @@ export function DocumentEditorContentArea({
     document,
   })
   const { devMode } = useDevMode()
-  const { isEnabled: isRunStream } = useFeature('runs')
   const { playground, hasActiveStream, resetChat, onBack, stopStreaming } =
     usePlaygroundLogic({
       commit,
@@ -89,11 +93,13 @@ export function DocumentEditorContentArea({
   return (
     <>
       <div className='relative flex-1 flex flex-col h-full min-h-0 overflow-hidden'>
-        <DocumentEditorHeader
-          isMerged={isMerged}
-          isPlaygroundOpen={isPlaygroundOpen}
-          togglePlaygroundOpen={togglePlaygroundOpen}
-        />
+        {!isEditorSidebarFlagLoading && !isEditorSidebarEnabled && (
+          <DocumentEditorHeader
+            isMerged={isMerged}
+            isPlaygroundOpen={isPlaygroundOpen}
+            togglePlaygroundOpen={togglePlaygroundOpen}
+          />
+        )}
 
         {/* === SLIDING WRAPPER === */}
         <div
@@ -116,17 +122,21 @@ export function DocumentEditorContentArea({
             )}
           >
             <div className='min-h-0 relative z-0 flex flex-col gap-4 h-full'>
-              <AgentToolbar
-                isMerged={isMerged}
-                isAgent={metadata?.config?.type === 'agent'}
-                config={metadata?.config}
-                prompt={document.content}
-                onChangePrompt={updateDocumentContent}
-              />
-              <FreeRunsBanner
-                isLatitudeProvider={isLatitudeProvider}
-                freeRunsCount={freeRunsCount}
-              />
+              {!isEditorSidebarFlagLoading && !isEditorSidebarEnabled && (
+                <>
+                  <AgentToolbar
+                    isMerged={isMerged}
+                    isAgent={metadata?.config?.type === 'agent'}
+                    config={metadata?.config}
+                    prompt={document.content}
+                    onChangePrompt={updateDocumentContent}
+                  />
+                  <FreeRunsBanner
+                    isLatitudeProvider={isLatitudeProvider}
+                    freeRunsCount={freeRunsCount}
+                  />
+                </>
+              )}
               <div
                 className={cn('flex-1 min-h-0 pb-4', {
                   'overflow-y-auto custom-scrollbar scrollable-indicator':

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/SidebarArea/Section/index.tsx

@@ -27,6 +27,7 @@ type SectionAction = {
   iconProps?: IconProps
   onClick: () => void
   disabled?: boolean
+  customComponent?: ReactNode
 }
 const SidebarSection = ({
   children,
@@ -44,16 +45,20 @@ const SidebarSection = ({
 
         {actions ? (
           <div className='flex flex-row gap-x-2'>
-            {actions?.map((action, index) => (
-              <Button
-                key={index}
-                variant='ghost'
-                size='icon'
-                onClick={action.onClick}
-                iconProps={action.iconProps ?? { name: 'plus' }}
-                disabled={action.disabled}
-              />
-            ))}
+            {actions?.map((action, index) =>
+              action.customComponent ? (
+                <div key={index}>{action.customComponent}</div>
+              ) : (
+                <Button
+                  key={index}
+                  variant='ghost'
+                  size='icon'
+                  onClick={action.onClick}
+                  iconProps={action.iconProps ?? { name: 'plus' }}
+                  disabled={action.disabled}
+                />
+              ),
+            )}
           </div>
         ) : null}
       </div>

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/SidebarArea/SubAgents/SubAgentItem/index.tsx

@@ -0,0 +1,56 @@
+import Link from 'next/link'
+import { Text } from '@latitude-data/web-ui/atoms/Text'
+import { Icon } from '@latitude-data/web-ui/atoms/Icons'
+import { Button } from '@latitude-data/web-ui/atoms/Button'
+import { ROUTES } from '$/services/routes'
+
+export function SubAgentItem({
+  agentPath,
+  documentUuid,
+  projectId,
+  commitUuid,
+  onRemove,
+  disabled,
+}: {
+  agentPath: string
+  documentUuid: string
+  projectId: number
+  commitUuid: string
+  onRemove: () => void
+  disabled: boolean
+}) {
+  const name = agentPath.split('/').pop() || ''
+  const href = ROUTES.projects
+    .detail({ id: projectId })
+    .commits.detail({ uuid: commitUuid })
+    .documents.detail({ uuid: documentUuid }).root
+
+  return (
+    <div
+      role='button'
+      tabIndex={0}
+      aria-disabled={disabled}
+      className='flex flex-row items-center rounded-md gap-3 min-w-0 p-2 hover:bg-backgroundCode group'
+    >
+      <Link href={href} className='flex items-center gap-3 flex-1 min-w-0'>
+        <Icon name='bot' color='foregroundMuted' />
+        <div className='flex-1 min-w-0'>
+          <Text.H5 ellipsis noWrap>
+            {name}
+          </Text.H5>
+        </div>
+      </Link>
+      <Button
+        disabled={disabled}
+        variant='ghost'
+        size='small'
+        className='opacity-0 group-hover:opacity-100 transition'
+        iconProps={{ name: 'trash', color: 'foregroundMuted' }}
+        onClick={(e) => {
+          e.stopPropagation()
+          onRemove()
+        }}
+      />
+    </div>
+  )
+}

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/SidebarArea/SubAgents/index.tsx

@@ -0,0 +1,126 @@
+import { useMemo, useCallback } from 'react'
+import { useCurrentCommit } from '$/app/providers/CommitProvider'
+import { useCurrentDocument } from '$/app/providers/DocumentProvider'
+import { useCurrentProject } from '$/app/providers/ProjectProvider'
+import { useSidebarStore } from '../hooks/useSidebarStore'
+import { usePromptConfigInSidebar } from '../hooks/usePromptConfigInSidebar'
+import { SidebarSection } from '../Section'
+import { SubAgentItem } from './SubAgentItem'
+import {
+  resolveRelativePath,
+  createRelativePath,
+} from '@latitude-data/constants'
+import { MultiSelect } from '@latitude-data/web-ui/molecules/MultiSelect'
+import { Button } from '@latitude-data/web-ui/atoms/Button'
+
+export function SubAgentsSidebarSection() {
+  const { commit } = useCurrentCommit()
+  const { project } = useCurrentProject()
+  const { document } = useCurrentDocument()
+  const isLive = !!commit.mergedAt
+  const { toggleAgent } = usePromptConfigInSidebar()
+
+  const { selectedAgents, pathToUuidMap } = useSidebarStore((state) => ({
+    selectedAgents: state.selectedAgents,
+    pathToUuidMap: state.pathToUuidMap,
+  }))
+
+  const availableAgents = useMemo(() => {
+    if (!pathToUuidMap || Object.keys(pathToUuidMap).length === 0) return []
+    return Object.keys(pathToUuidMap).filter(
+      (agentPath) => agentPath !== document.path,
+    )
+  }, [pathToUuidMap, document.path])
+
+  const selectedAgentsFullPaths = useMemo(() => {
+    if (!Array.isArray(selectedAgents)) return []
+    return selectedAgents
+      .filter(Boolean)
+      .map((relativePath) => resolveRelativePath(relativePath, document.path))
+  }, [selectedAgents, document.path])
+
+  const agentOptions = useMemo(() => {
+    return availableAgents.map((agentPath) => ({
+      label: agentPath.split('/').pop() || agentPath,
+      value: agentPath,
+      icon: 'bot' as const,
+    }))
+  }, [availableAgents])
+
+  const handleAgentsChange = useCallback(
+    (selectedPaths: string[]) => {
+      // Convert full paths to relative paths
+      const relativePaths = selectedPaths.map((fullPath) =>
+        createRelativePath(fullPath, document.path),
+      )
+
+      // Find which agents were added or removed
+      const currentRelativePaths = selectedAgents
+      const addedPaths = relativePaths.filter(
+        (path) => !currentRelativePaths.includes(path),
+      )
+      const removedPaths = currentRelativePaths.filter(
+        (path) => !relativePaths.includes(path),
+      )
+
+      // Toggle each added/removed agent
+      addedPaths.forEach((path) => {
+        const fullPath = resolveRelativePath(path, document.path)
+        toggleAgent(fullPath)
+      })
+      removedPaths.forEach((path) => {
+        const fullPath = resolveRelativePath(path, document.path)
+        toggleAgent(fullPath)
+      })
+    },
+    [selectedAgents, document.path, toggleAgent],
+  )
+
+  const actions = useMemo(
+    () => [
+      {
+        onClick: () => {},
+        disabled: isLive,
+        customComponent: (
+          <MultiSelect
+            options={agentOptions}
+            value={selectedAgentsFullPaths}
+            onChange={handleAgentsChange}
+            disabled={isLive}
+            modalPopover
+            trigger={
+              <Button
+                variant='ghost'
+                size='small'
+                iconProps={{ name: 'plus', color: 'foregroundMuted' }}
+                disabled={isLive}
+              />
+            }
+          />
+        ),
+      },
+    ],
+    [agentOptions, selectedAgentsFullPaths, handleAgentsChange, isLive],
+  )
+
+  return (
+    <SidebarSection title='Sub-agents' actions={actions}>
+      <div className='flex flex-col'>
+        {selectedAgentsFullPaths.map((agentPath) => {
+          const documentUuid = pathToUuidMap[agentPath]
+          return (
+            <SubAgentItem
+              key={agentPath}
+              agentPath={agentPath}
+              documentUuid={documentUuid}
+              projectId={project.id}
+              commitUuid={commit.uuid}
+              onRemove={() => toggleAgent(agentPath)}
+              disabled={isLive}
+            />
+          )
+        })}
+      </div>
+    </SidebarSection>
+  )
+}