Spaces:
Sleeping
Sleeping
File size: 2,280 Bytes
f871fed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
'use client'
import { EyeOff, Lightbulb, FileText } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { cn } from '@/lib/utils'
import { ContextMode } from '@/app/(dashboard)/notebooks/[id]/page'
interface ContextToggleProps {
mode: ContextMode
hasInsights?: boolean // For sources - determines if 'insights' mode is available
onChange: (mode: ContextMode) => void
className?: string
}
const MODE_CONFIG = {
off: {
icon: EyeOff,
label: 'Not included in chat',
color: 'text-muted-foreground',
bgColor: 'hover:bg-muted'
},
insights: {
icon: Lightbulb,
label: 'Insights only',
color: 'text-amber-600',
bgColor: 'hover:bg-amber-50'
},
full: {
icon: FileText,
label: 'Full content',
color: 'text-primary',
bgColor: 'hover:bg-primary/10'
}
} as const
export function ContextToggle({ mode, hasInsights = false, onChange, className }: ContextToggleProps) {
const config = MODE_CONFIG[mode]
const Icon = config.icon
// Determine available modes based on whether item has insights
const availableModes: ContextMode[] = hasInsights
? ['off', 'insights', 'full']
: ['off', 'full']
const handleClick = (e: React.MouseEvent) => {
e.stopPropagation() // Prevent card click
// Cycle to next mode
const currentIndex = availableModes.indexOf(mode)
const nextIndex = (currentIndex + 1) % availableModes.length
onChange(availableModes[nextIndex])
}
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
className={cn(
'h-8 w-8 p-0 transition-colors',
config.bgColor,
className
)}
onClick={handleClick}
>
<Icon className={cn('h-4 w-4', config.color)} />
</Button>
</TooltipTrigger>
<TooltipContent>
<p className="text-xs">{config.label}</p>
<p className="text-[10px] text-muted-foreground mt-1">
Click to cycle
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}
|