Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
import { useState, useTransition } from 'react' | |
import { Button } from '@/components/ui/button' | |
import { Dialog, DialogContent, DialogFooter } from '@/components/ui/dialog' | |
import { ScrollArea } from '@/components/ui/scroll-area' | |
import { cn } from '@/lib/utils' | |
import { useUI } from '@/services' | |
import { SettingsSectionProvider } from './provider' | |
import { SettingsSectionAssistant } from './assistant' | |
import { SettingsSectionEditors } from './editors' | |
import { SettingsSectionImage } from './image' | |
import { SettingsSectionVideo } from './video' | |
import { SettingsSectionSound } from './sound' | |
import { SettingsSectionMusic } from './music' | |
import { SettingsSectionVoice } from './voice' | |
import { SettingsCategory } from '@aitube/clapper-services' | |
const panels: Record<SettingsCategory, JSX.Element> = { | |
[SettingsCategory.NONE]: <></>, | |
[SettingsCategory.PROVIDER]: <SettingsSectionProvider />, | |
[SettingsCategory.ASSISTANT]: <SettingsSectionAssistant />, | |
[SettingsCategory.EDITORS]: <SettingsSectionEditors />, | |
[SettingsCategory.IMAGE]: <SettingsSectionImage />, | |
[SettingsCategory.VIDEO]: <SettingsSectionVideo />, | |
[SettingsCategory.VOICE]: <SettingsSectionVoice />, | |
[SettingsCategory.SOUND]: <SettingsSectionSound />, | |
[SettingsCategory.MUSIC]: <SettingsSectionMusic />, | |
} | |
const panelLabels = { | |
[SettingsCategory.NONE]: '', | |
[SettingsCategory.PROVIDER]: 'Providers', | |
[SettingsCategory.ASSISTANT]: 'Assistant', | |
[SettingsCategory.EDITORS]: 'Editors', | |
[SettingsCategory.IMAGE]: 'Image', | |
[SettingsCategory.VIDEO]: 'Video', | |
[SettingsCategory.VOICE]: 'Voice', | |
[SettingsCategory.SOUND]: 'Sound', | |
[SettingsCategory.MUSIC]: 'Music', | |
} as any | |
export function SettingsDialog() { | |
const showSettings = useUI((s) => s.showSettings) | |
const setShowSettings = useUI((s) => s.setShowSettings) | |
return ( | |
<Dialog | |
open={showSettings !== SettingsCategory.NONE} | |
onOpenChange={(open) => | |
setShowSettings( | |
open ? SettingsCategory.PROVIDER : SettingsCategory.NONE | |
) | |
} | |
> | |
<DialogContent | |
className={cn( | |
`select-none`, | |
// DialogContent comes with some hardcoded values so we need to override them | |
`h-[70%] w-[95w] max-w-6xl md:w-[60vw]`, | |
`flex flex-row` | |
)} | |
> | |
<ScrollArea className="flex h-full w-44 flex-col"> | |
<div className="flex flex-col items-end"> | |
{Object.keys(panels).map((key) => ( | |
<Button | |
key={key} | |
variant="ghost" | |
className="flex w-full flex-col items-end text-right text-lg font-thin capitalize text-stone-300" | |
onClick={() => setShowSettings(key as SettingsCategory)} | |
> | |
{panelLabels[key]} | |
</Button> | |
))} | |
</div> | |
</ScrollArea> | |
<div className="flex h-full max-w-[calc(100%-150px)] flex-grow select-none flex-col justify-between border-l border-stone-800 pl-8"> | |
<ScrollArea className="flex h-full flex-row"> | |
{panels[showSettings]} | |
</ScrollArea> | |
<DialogFooter> | |
<Button | |
variant="outline" | |
className="text-sm font-light dark:border-stone-700 dark:bg-stone-800 dark:text-stone-400" | |
onClick={() => { | |
setShowSettings(SettingsCategory.NONE) | |
}} | |
> | |
Close | |
</Button> | |
</DialogFooter> | |
</div> | |
</DialogContent> | |
</Dialog> | |
) | |
} | |