feat: allow adding digital colleagues

Author: rob-at-cortex

src/components/AdvancedComponents/user-selection.tsx

@@ -89,7 +89,7 @@ export function UserSelection({
           </Card>
 
           {/* Users Grid */}
-          <div className="container grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="container grid gap-4 md:grid-cols-2 lg:grid-cols-3 mt-4">
             {filteredUsers.map((user) => {
               // Safety check - skip rendering if user is invalid
               if (!user || !user.id) return null

src/components/Foundry/Views/ColleaguesView.tsx

@@ -17,6 +17,8 @@ import { ColleagueCard } from '../colleague-card'
 import { ColleagueForm } from '../colleague-form'
 import { UserSelection } from '../../AdvancedComponents/user-selection'
 import { DigitalColleagueClone } from '../foundary-clone'
+import { DigitalColleagueSelection } from '../digital-colleague-selection'
+import { AddColleagueToTeamForm } from '../add-colleague-to-team-form'
 import { ColleagueTypeSelection } from '../colleague-type-selection'
 import { DigitalColleagueOptions } from '../foundary-options'
 import {
@@ -28,6 +30,7 @@ import {
   type DigitalColleague,
   // type KnowledgeDocument,
   type User as UserType,
+  type Team,
 } from '../types'
 import { motion, AnimatePresence } from 'motion/react'
 import { DashboardHero } from '../../Heros/DashboardHero'
@@ -37,12 +40,14 @@ interface ColleaguesViewProps {
   onColleagueAdd?: (colleague: Colleague) => void
   onColleagueEdit?: (colleague: Colleague) => void
   onColleagueDelete?: (colleague: string, type: 'human' | 'digital') => void
+  onColleagueAddToTeam?: (colleague: DigitalColleague, teamId: number) => void
   compactView?: boolean
   departments?: string[]
   className?: string
   // New props for user and colleague selection
   availableUsers?: UserType[]
   existingDigitalColleagues?: DigitalColleague[]
+  currentTeam?: Team
   availableKnowledgeDocuments?: Knowledge[]
   availableCapabilities?: Array<{
     relationTo: 'mcpTools' | 'capabilities' | 'internalTools' | 'digital-colleagues'
@@ -59,11 +64,13 @@ export default function ColleaguesView({
   onColleagueAdd,
   onColleagueEdit,
   onColleagueDelete,
+  onColleagueAddToTeam,
   compactView = false,
   departments = ['Design', 'Engineering', 'Marketing', 'Product', 'Sales', 'Operations'],
   className,
   availableUsers = [],
   existingDigitalColleagues = [],
+  currentTeam,
   availableKnowledgeDocuments = [],
   availableCapabilities = [],
   availableModels = [],
@@ -75,6 +82,7 @@ export default function ColleaguesView({
   const [activeTab, setActiveTab] = useState('all')
   const [editingColleague, setEditingColleague] = useState<DigitalColleague | null>(null)
   const [viewingColleague, setViewingColleague] = useState<DigitalColleague | null>(null)
+  const [selectedColleagueForTeam, setSelectedColleagueForTeam] = useState<DigitalColleague | null>(null)
 
   useEffect(() => {
     setColleagues(initialColleagues || [])
@@ -88,7 +96,7 @@ export default function ColleaguesView({
 
   // New state for selection flows
   const [currentView, setCurrentView] = useState<
-    'main' | 'typeSelection' | 'userSelection' | 'digitalOptions' | 'digitalClone' | 'form' | 'view'
+    'main' | 'typeSelection' | 'userSelection' | 'digitalOptions' | 'digitalClone' | 'digitalSelection' | 'addToTeam' | 'form' | 'view'
   >('main')
 
   const filteredColleagues = colleagues.filter((colleague) => {
@@ -184,6 +192,31 @@ export default function ColleaguesView({
     setCurrentView('main')
   }
 
+  const handleDigitalColleagueSelect = (selectedColleague: DigitalColleague) => {
+    if (!selectedColleague || !selectedColleague.id) {
+      console.error(
+        'Invalid selected colleague provided to handleDigitalColleagueSelect:',
+        selectedColleague,
+      )
+      return
+    }
+
+    setSelectedColleagueForTeam(selectedColleague)
+    setCurrentView('addToTeam')
+  }
+
+  const handleAddColleagueToTeam = (colleague: DigitalColleague, teamId: number) => {
+    onColleagueAddToTeam?.(colleague, teamId)
+    setColleagues((prev) => [...prev, { ...colleague, type: 'digital' }])
+    setSelectedColleagueForTeam(null)
+    setCurrentView('main')
+  }
+
+  const handleCancelAddToTeam = () => {
+    setSelectedColleagueForTeam(null)
+    setCurrentView('digitalSelection')
+  }
+
   const handleCreateNewDigital = () => {
     setEditingColleague(null)
     setCurrentView('form')
@@ -304,13 +337,39 @@ export default function ColleaguesView({
   if (currentView === 'digitalOptions') {
     return (
       <DigitalColleagueOptions
+        onAddExisting={() => setCurrentView('digitalSelection')}
         onCloneExisting={() => setCurrentView('digitalClone')}
         onCreateNew={handleCreateNewDigital}
         onCancel={() => setCurrentView('typeSelection')}
       />
     )
   }
 
+  if (currentView === 'digitalSelection') {
+    return (
+      <DigitalColleagueSelection
+        digitalColleagues={safeExistingDigitalColleagues}
+        onColleagueSelect={handleDigitalColleagueSelect}
+        onCancel={() => setCurrentView('digitalOptions')}
+      />
+    )
+  }
+
+  if (currentView === 'addToTeam') {
+    if (!selectedColleagueForTeam || !currentTeam) {
+      setCurrentView('digitalSelection')
+      return null
+    }
+    return (
+      <AddColleagueToTeamForm
+        colleague={selectedColleagueForTeam}
+        team={currentTeam}
+        onSave={handleAddColleagueToTeam}
+        onCancel={handleCancelAddToTeam}
+      />
+    )
+  }
+
   if (currentView === 'digitalClone') {
     return (
       <DigitalColleagueClone

src/components/Foundry/add-colleague-to-team-form.stories.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { AddColleagueToTeamForm } from './add-colleague-to-team-form'
+import { action } from '@storybook/addon-actions'
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockDigitalColleagues } from './test-data'
+import type { DigitalColleague, Team } from './types'
+
+const meta: Meta<typeof AddColleagueToTeamForm> = {
+  title: 'Foundry/AddColleagueToTeamForm',
+  component: AddColleagueToTeamForm,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AddColleagueToTeamForm>
+
+// Use the first digital colleague from test data
+const selectedColleague: DigitalColleague = mockDigitalColleagues[0]
+
+// Mock team data
+const mockTeam: Team = {
+  id: 1,
+  name: 'Product Development',
+  description: 'Core product development team responsible for building and maintaining our main platform',
+  systemMsg: 'Focus on quality, collaboration, and user-centric design.',
+  members: [
+    {
+      relationTo: 'users',
+      value: 'user-1',
+    },
+  ],
+  useProjects: true,
+  useKnowledge: true,
+  useFiles: true,
+  useChat: true,
+  updatedAt: new Date().toISOString(),
+  createdAt: new Date().toISOString(),
+}
+
+const mockTeamWithColleague: Team = {
+  ...mockTeam,
+  id: 2,
+  name: 'Marketing',
+  description: 'Growth and marketing team driving customer acquisition and retention',
+  members: [
+    {
+      relationTo: 'digital-colleagues',
+      value: mockDigitalColleagues[0].id,
+    },
+  ],
+}
+
+export const Default: Story = {
+  args: {
+    colleague: selectedColleague,
+    team: mockTeam,
+    onSave: action('onSave'),
+    onCancel: action('onCancel'),
+  },
+}
+
+export const ColleagueAlreadyInTeam: Story = {
+  args: {
+    colleague: selectedColleague,
+    team: mockTeamWithColleague,
+    onSave: action('onSave'),
+    onCancel: action('onCancel'),
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    colleague: selectedColleague,
+    team: mockTeam,
+    onSave: action('onSave'),
+    onCancel: action('onCancel'),
+    isLoading: true,
+  },
+}