'use client'; import { Box, Flex, Heading, Select, Button, Badge, IconButton, } from '@chakra-ui/react'; import { useShallow } from 'zustand/react/shallow'; import { useChatStore } from '../_store/useChatStore'; import { useNewConversation } from '../_hooks/useNewConversation'; import { SearchableSelect } from './SearchableSelect'; export function ChatHeader() { const { connectionStatus, selectedBrandName, setSelectedBrandName, selectedEnvironment, setSelectedEnvironment, availableEnvironments, availableBrands, brandFilterEnabled, brandsLoading, appVersion, sidebarOpen, setSidebarOpen, } = useChatStore(useShallow((s) => ({ connectionStatus: s.connectionStatus, selectedBrandName: s.selectedBrandName, setSelectedBrandName: s.setSelectedBrandName, selectedEnvironment: s.selectedEnvironment, setSelectedEnvironment: s.setSelectedEnvironment, availableEnvironments: s.availableEnvironments, availableBrands: s.availableBrands, brandFilterEnabled: s.brandFilterEnabled, brandsLoading: s.brandsLoading, appVersion: s.appVersion, sidebarOpen: s.sidebarOpen, setSidebarOpen: s.setSidebarOpen, }))); const newConversation = useNewConversation(); const toggleSidebar = () => setSidebarOpen(!sidebarOpen); const handleEnvironmentChange = (e: React.ChangeEvent) => { setSelectedEnvironment(e.target.value); }; const statusColor = connectionStatus === 'connected' ? 'green' : connectionStatus === 'connecting' ? 'yellow' : 'red'; const statusLabel = connectionStatus === 'connected' ? 'Connected' : connectionStatus === 'connecting' ? 'Connecting...' : 'Disconnected'; return ( } size="sm" variant="ghost" color="gray.300" _hover={{ bg: 'gray.700' }} onClick={toggleSidebar} /> BORA Chat Interface {appVersion && ( v{appVersion} )} {statusLabel} Environment: Brand: {brandFilterEnabled ? ( ) : ( {selectedBrandName} )} ); }