|
| 1 | +'use client' |
| 2 | + |
| 3 | +import { useMemo, useState } from 'react' |
| 4 | +import { Check, Plus } from 'lucide-react' |
| 5 | +import { usePostHog } from 'posthog-js/react' |
| 6 | +import { Chip } from '@/components/emcn' |
| 7 | +import { AgentSkillsIcon } from '@/components/icons' |
| 8 | +import { captureEvent } from '@/lib/posthog/client' |
| 9 | +import type { SuggestedSkill } from '@/blocks/types' |
| 10 | +import { useCreateSkill, useSkills } from '@/hooks/queries/skills' |
| 11 | + |
| 12 | +interface IntegrationSkillsSectionProps { |
| 13 | + skills: readonly SuggestedSkill[] |
| 14 | + workspaceId: string |
| 15 | + integrationType: string |
| 16 | +} |
| 17 | + |
| 18 | +function SkillTile() { |
| 19 | + return ( |
| 20 | + <div className='size-9 flex-shrink-0'> |
| 21 | + <div className='flex size-full items-center justify-center rounded-xl border border-[var(--border-1)] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'> |
| 22 | + <AgentSkillsIcon className='size-5 text-[var(--text-icon)]' /> |
| 23 | + </div> |
| 24 | + </div> |
| 25 | + ) |
| 26 | +} |
| 27 | + |
| 28 | +interface SkillRowProps { |
| 29 | + skill: SuggestedSkill |
| 30 | + added: boolean |
| 31 | + pending: boolean |
| 32 | + onAdd: () => void |
| 33 | +} |
| 34 | + |
| 35 | +function SkillRow({ skill, added, pending, onAdd }: SkillRowProps) { |
| 36 | + return ( |
| 37 | + <div className='flex items-center gap-2.5 rounded-lg p-2'> |
| 38 | + <SkillTile /> |
| 39 | + <div className='flex min-w-0 flex-1 flex-col'> |
| 40 | + <span className='truncate text-[14px] text-[var(--text-body)]'>{skill.name}</span> |
| 41 | + <span className='truncate text-[12px] text-[var(--text-muted)]'>{skill.description}</span> |
| 42 | + </div> |
| 43 | + {added ? ( |
| 44 | + <Chip variant='filled' leftIcon={Check} disabled flush> |
| 45 | + Added |
| 46 | + </Chip> |
| 47 | + ) : ( |
| 48 | + <Chip variant='primary' leftIcon={Plus} onClick={onAdd} disabled={pending} flush> |
| 49 | + {pending ? 'Adding...' : 'Add'} |
| 50 | + </Chip> |
| 51 | + )} |
| 52 | + </div> |
| 53 | + ) |
| 54 | +} |
| 55 | + |
| 56 | +/** |
| 57 | + * Curated, research-backed skills for an integration. Each row adds the skill |
| 58 | + * to the workspace via the same `useCreateSkill` mutation the Skills page uses; |
| 59 | + * a skill already present in the workspace (matched by name) renders as |
| 60 | + * "Added" instead of an add button. |
| 61 | + */ |
| 62 | +export function IntegrationSkillsSection({ |
| 63 | + skills, |
| 64 | + workspaceId, |
| 65 | + integrationType, |
| 66 | +}: IntegrationSkillsSectionProps) { |
| 67 | + const posthog = usePostHog() |
| 68 | + const { data: existingSkills = [] } = useSkills(workspaceId) |
| 69 | + const createSkill = useCreateSkill() |
| 70 | + const [pendingName, setPendingName] = useState<string | null>(null) |
| 71 | + |
| 72 | + const existingNames = useMemo(() => new Set(existingSkills.map((s) => s.name)), [existingSkills]) |
| 73 | + |
| 74 | + const handleAdd = async (skill: SuggestedSkill, position: number) => { |
| 75 | + setPendingName(skill.name) |
| 76 | + try { |
| 77 | + await createSkill.mutateAsync({ workspaceId, skill }) |
| 78 | + captureEvent(posthog, 'integration_skill_added', { |
| 79 | + workspace_id: workspaceId, |
| 80 | + integration_type: integrationType, |
| 81 | + skill_name: skill.name, |
| 82 | + position, |
| 83 | + skill_count: skills.length, |
| 84 | + }) |
| 85 | + } finally { |
| 86 | + setPendingName(null) |
| 87 | + } |
| 88 | + } |
| 89 | + |
| 90 | + return ( |
| 91 | + <section className='flex flex-col'> |
| 92 | + <span className='pl-0.5 text-[var(--text-muted)] text-small'>Skills</span> |
| 93 | + <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' /> |
| 94 | + <div className='-mx-2 flex flex-col gap-y-0.5'> |
| 95 | + {skills.map((skill, index) => ( |
| 96 | + <SkillRow |
| 97 | + key={skill.name} |
| 98 | + skill={skill} |
| 99 | + added={existingNames.has(skill.name)} |
| 100 | + pending={pendingName === skill.name} |
| 101 | + onAdd={() => handleAdd(skill, index)} |
| 102 | + /> |
| 103 | + ))} |
| 104 | + </div> |
| 105 | + </section> |
| 106 | + ) |
| 107 | +} |
0 commit comments