konnosAssistantButton.tsx50 lines · main
| 1 | import { AiIconAnimation, cn, KeyboardShortcut } from 'ui' |
| 2 | |
| 3 | import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider' |
| 4 | import { ButtonTooltip } from '@/components/ui/ButtonTooltip' |
| 5 | import { useTrack } from '@/lib/telemetry/track' |
| 6 | import { SHORTCUT_IDS } from '@/state/shortcuts/registry' |
| 7 | import { useIsShortcutEnabled } from '@/state/shortcuts/useIsShortcutEnabled' |
| 8 | import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state' |
| 9 | |
| 10 | export const AssistantButton = () => { |
| 11 | const { activeSidebar, toggleSidebar } = useSidebarManagerSnapshot() |
| 12 | const isAIAssistantHotkeyEnabled = useIsShortcutEnabled(SHORTCUT_IDS.AI_ASSISTANT_TOGGLE) |
| 13 | const track = useTrack() |
| 14 | |
| 15 | const isOpen = activeSidebar?.id === SIDEBAR_KEYS.AI_ASSISTANT |
| 16 | |
| 17 | return ( |
| 18 | <ButtonTooltip |
| 19 | type="outline" |
| 20 | size="tiny" |
| 21 | id="assistant-trigger" |
| 22 | className={cn( |
| 23 | 'rounded-full w-[32px] h-[32px] flex items-center justify-center p-0', |
| 24 | isOpen && 'bg-foreground text-background' |
| 25 | )} |
| 26 | onClick={() => { |
| 27 | track('header_assistant_button_clicked') |
| 28 | toggleSidebar(SIDEBAR_KEYS.AI_ASSISTANT) |
| 29 | }} |
| 30 | tooltip={{ |
| 31 | content: { |
| 32 | className: 'p-1 pl-2.5', |
| 33 | text: ( |
| 34 | <div className="flex items-center gap-2.5"> |
| 35 | <span>AI Assistant</span> |
| 36 | {isAIAssistantHotkeyEnabled && <KeyboardShortcut keys={['Meta', 'I']} />} |
| 37 | </div> |
| 38 | ), |
| 39 | }, |
| 40 | }} |
| 41 | > |
| 42 | <AiIconAnimation |
| 43 | allowHoverEffect={false} |
| 44 | size={16} |
| 45 | className={cn(isOpen && 'text-background')} |
| 46 | /> |
| 47 | <span className="sr-only">AI Assistant</span> |
| 48 | </ButtonTooltip> |
| 49 | ) |
| 50 | } |