diff --git a/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx b/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx index 1076f6f0a284..89efec1c5d9c 100644 --- a/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx +++ b/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx @@ -15,6 +15,7 @@ import { ChatSmart, Gear } from '../icons'; import { ViewOptions, View } from '../../utils/navigationUtils'; import { useChatContext } from '../../contexts/ChatContext'; import { DEFAULT_CHAT_TITLE } from '../../contexts/ChatContext'; +import EnvironmentBadge from './EnvironmentBadge'; interface SidebarProps { onSelectSession: (sessionId: string) => void; @@ -165,7 +166,9 @@ const AppSidebar: React.FC = ({ currentPath }) => { {menuItems.map((entry, index) => renderMenuItem(entry, index))} - + + + ); }; diff --git a/ui/desktop/src/components/GooseSidebar/EnvironmentBadge.tsx b/ui/desktop/src/components/GooseSidebar/EnvironmentBadge.tsx new file mode 100644 index 000000000000..db64b080fcb1 --- /dev/null +++ b/ui/desktop/src/components/GooseSidebar/EnvironmentBadge.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/Tooltip'; + +const EnvironmentBadge: React.FC = () => { + const isAlpha = process.env.ALPHA; + const isDevelopment = import.meta.env.DEV; + + // Don't show badge in production + if (!isDevelopment && !isAlpha) { + return null; + } + + const tooltipText = isAlpha ? 'Alpha' : 'Dev'; + const bgColor = isAlpha ? 'bg-purple-600' : 'bg-orange-400'; + + return ( + + +
+ + {tooltipText} + + ); +}; + +export default EnvironmentBadge; diff --git a/ui/desktop/src/components/GooseSidebar/index.ts b/ui/desktop/src/components/GooseSidebar/index.ts index e99ee41f776a..6ca1e20a95eb 100644 --- a/ui/desktop/src/components/GooseSidebar/index.ts +++ b/ui/desktop/src/components/GooseSidebar/index.ts @@ -1 +1,2 @@ export { default as AppSidebar } from './AppSidebar'; +export { default as EnvironmentBadge } from './EnvironmentBadge';