mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
6c65e3e941
Every import, the catalog pin and the docs name @hanzo/app and github.com/hanzoai/app. lib/rooms.ts is lib/app.ts and components/rooms.tsx is components/app.tsx.
96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Room } from '@hanzo/app/Room'
|
|
import { Bots } from '@hanzo/app/bots/Bots'
|
|
import { Box, Text, XStack } from '@hanzo/ui'
|
|
import { Chip } from '@hanzo/ui/marketing'
|
|
import { AdditionalBotsWidget } from '@/components/bot/AdditionalBotsWidget'
|
|
import { Plus, Sparkles, X } from 'lucide-react'
|
|
|
|
export default function BotsRoom() {
|
|
const [showAddon, setShowAddon] = useState(false)
|
|
|
|
return (
|
|
<Box width="100%" height="100%" display="flex" flexDirection="column">
|
|
{/* Bot Pricing & Additional Bots Bar */}
|
|
<Box
|
|
borderBottomWidth={1}
|
|
borderColor="var(--neutral-800)"
|
|
px={16}
|
|
py={10}
|
|
$platform-web={{
|
|
backgroundColor: 'color-mix(in oklab, var(--neutral-950) 90%, black)',
|
|
}}
|
|
>
|
|
<XStack flexWrap="wrap" items="center" justify="space-between" gap={12} maxW={1440} mx="auto">
|
|
<XStack items="center" gap={10} flexWrap="wrap" shrink={1} minW={0}>
|
|
<Chip px={10} py={2} gap={6} bg="var(--neutral-800)">
|
|
<Sparkles width={13} height={13} color="var(--primary)" />
|
|
Resident Bots
|
|
</Chip>
|
|
<Text fontSize="$2" color="var(--muted-foreground)">
|
|
1 resident bot included on $100+ Max plans (Max 5x, 20x, 50x). Need more? Add extra resident bots at{' '}
|
|
<Text color="var(--foreground)" fontWeight="600">
|
|
$50/mo
|
|
</Text>{' '}
|
|
each.
|
|
</Text>
|
|
</XStack>
|
|
<XStack items="center" gap={16}>
|
|
<XStack
|
|
render="button"
|
|
{...{ type: 'button' }}
|
|
onClick={() => setShowAddon((s) => !s)}
|
|
px={14}
|
|
py={5}
|
|
rounded="var(--radius-md)"
|
|
borderWidth={1}
|
|
borderColor="var(--neutral-700)"
|
|
items="center"
|
|
gap={6}
|
|
$platform-web={{
|
|
backgroundColor: showAddon ? 'var(--neutral-800)' : 'color-mix(in oklab, var(--primary) 15%, transparent)',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.15s ease',
|
|
}}
|
|
>
|
|
{showAddon ? <X width={14} height={14} /> : <Plus width={14} height={14} />}
|
|
<Text fontSize="$1" fontWeight="600" color="var(--foreground)">
|
|
{showAddon ? 'Close Calculator' : 'Add Additional Bots ($50/mo)'}
|
|
</Text>
|
|
</XStack>
|
|
<Text render="a" {...{ href: '/bot' }} fontSize="$1" color="var(--text-secondary)">
|
|
Bot Plans & Pricing →
|
|
</Text>
|
|
</XStack>
|
|
</XStack>
|
|
</Box>
|
|
|
|
{/* Expandable Additional Bots Calculator Drawer */}
|
|
{showAddon && (
|
|
<Box
|
|
p={16}
|
|
$sm={{ p: 24 }}
|
|
borderBottomWidth={1}
|
|
borderColor="var(--neutral-800)"
|
|
$platform-web={{
|
|
backgroundColor: 'color-mix(in oklab, var(--neutral-900) 95%, black)',
|
|
}}
|
|
>
|
|
<Box maxW={1024} mx="auto">
|
|
<AdditionalBotsWidget />
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Main Bots Workspace */}
|
|
<Box flex={1} overflow="hidden">
|
|
<Room mode="bots">
|
|
<Bots />
|
|
</Room>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|