Spaces:
Running
Running
File size: 3,898 Bytes
e445b51 11486ce e445b51 11486ce e445b51 11486ce e445b51 b1cfe1b e445b51 96bdf6c b1cfe1b e445b51 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 'use client';
import { WorkbenchEasySummary, WorkbenchProPanel } from '@/components/workbench-pro-dock-panels';
import type { GptImageModel } from '@/lib/cost-utils';
import { useI18n } from '@/lib/i18n';
import type { ImageUpstreamFormBackend, ImageUpstreamFormStreamingStrategy } from '@/lib/image-upstream-form';
import type { ImageStreamMode, ImageStreamingStrategy } from '@/lib/image-upstream-strategy';
import type { SizePreset } from '@/lib/size-utils';
import * as React from 'react';
export type OutputFormat = 'png' | 'jpeg' | 'webp';
export type Quality = 'low' | 'medium' | 'high' | 'auto';
export type { SizePreset };
export type WorkbenchProDockProps = {
outputFormat: OutputFormat;
onOutputFormatChange: React.Dispatch<React.SetStateAction<OutputFormat>>;
quality: Quality;
onQualityChange: React.Dispatch<React.SetStateAction<Quality>>;
model: GptImageModel;
onModelChange: React.Dispatch<React.SetStateAction<GptImageModel>>;
size: SizePreset;
streamMode: ImageStreamMode;
onStreamModeChange: React.Dispatch<React.SetStateAction<ImageStreamMode>>;
allowStreamingBatch: boolean;
enableParallelBatch: boolean;
onEnableParallelBatchChange: React.Dispatch<React.SetStateAction<boolean>>;
parallelBatchTargetCount: number;
allowResponsesImageBackend: boolean;
upstreamProfileMixed?: boolean;
hasDefaultResponsesModel: boolean;
imageBackend: ImageUpstreamFormBackend;
onImageBackendChange: React.Dispatch<React.SetStateAction<ImageUpstreamFormBackend>>;
streamingStrategy: ImageUpstreamFormStreamingStrategy;
defaultStreamingStrategy: ImageStreamingStrategy;
onStreamingStrategyChange: React.Dispatch<React.SetStateAction<ImageUpstreamFormStreamingStrategy>>;
responsesModel: string;
onResponsesModelChange: React.Dispatch<React.SetStateAction<string>>;
disabled?: boolean;
defaultMode?: 'easy' | 'pro';
defaultProTab?: 'output' | 'model' | 'stream' | 'route';
};
type DockModeButtonProps = {
active: boolean;
children: React.ReactNode;
onClick: () => void;
};
function DockModeButton({ active, children, onClick }: DockModeButtonProps) {
return (
<button
type='button'
className={`focus-visible:ring-ring rounded-t-md border-b-2 px-3 pb-2 font-medium transition-[border-color,color,box-shadow] focus-visible:ring-2 focus-visible:outline-none ${
active
? 'border-primary text-primary'
: 'text-muted-foreground hover:text-foreground border-transparent'
}`}
aria-pressed={active}
onClick={onClick}>
{children}
</button>
);
}
export function WorkbenchProDock({ defaultMode = 'easy', defaultProTab = 'output', ...props }: WorkbenchProDockProps) {
const { t } = useI18n();
const [dockMode, setDockMode] = React.useState<'easy' | 'pro'>(defaultMode);
const isProMode = dockMode === 'pro';
return (
<div className='workbench-panel border-border/70 mt-4 hidden shrink-0 overflow-hidden rounded-lg border lg:block xl:max-h-80 xl:overflow-y-auto'>
<div className='border-border/60 flex items-center gap-4 border-b px-5 pt-3 text-sm'>
<DockModeButton active={!isProMode} onClick={() => setDockMode('easy')}>
{t('ux.easyMode')}
</DockModeButton>
<DockModeButton active={isProMode} onClick={() => setDockMode('pro')}>
{t('ux.professionalMode')}
</DockModeButton>
</div>
<div className='bg-card/56 px-5 py-3'>
{isProMode ? (
<WorkbenchProPanel {...props} defaultTab={defaultProTab} />
) : (
<WorkbenchEasySummary {...props} />
)}
</div>
</div>
);
}
|