57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
|
import { Suspense, useState } from 'react';
|
||
|
|
|
||
|
|
import { ComboBox } from '@/components/input/combo-box';
|
||
|
|
import { Loader } from '@/components/loader';
|
||
|
|
import { ModalView } from '@/components/modal';
|
||
|
|
import { TabLabel, TabList, TabPanel, Tabs } from '@/components/tabs';
|
||
|
|
|
||
|
|
import { useAvailableTemplatesSuspense } from '../../backend/use-available-templates';
|
||
|
|
|
||
|
|
import { TabPromptResult } from './tab-prompt-result';
|
||
|
|
import { TabPromptSelect } from './tab-prompt-select';
|
||
|
|
import { TabPromptVariables } from './tab-prompt-variables';
|
||
|
|
|
||
|
|
export const TabID = {
|
||
|
|
SELECT: 0,
|
||
|
|
RESULT: 1,
|
||
|
|
VARIABLES: 2
|
||
|
|
} as const;
|
||
|
|
type TabID = (typeof TabID)[keyof typeof TabID];
|
||
|
|
|
||
|
|
export function DlgAIPromptDialog() {
|
||
|
|
const [activeTab, setActiveTab] = useState<TabID>(TabID.SELECT);
|
||
|
|
const [selected, setSelected] = useState<number | null>(null);
|
||
|
|
const { items: prompts } = useAvailableTemplatesSuspense();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ModalView header='Генератор запросом LLM' className='w-100 sm:w-160 px-6'>
|
||
|
|
<Tabs selectedIndex={activeTab} onSelect={index => setActiveTab(index as TabID)}>
|
||
|
|
<TabList className='mb-3 mx-auto w-fit flex border divide-x rounded-none'>
|
||
|
|
<TabLabel label='Шаблон' />
|
||
|
|
<TabLabel label='Результат' disabled={!selected} />
|
||
|
|
<TabLabel label='Переменные' disabled={!selected} />
|
||
|
|
</TabList>
|
||
|
|
|
||
|
|
<div className='h-120 flex flex-col gap-2'>
|
||
|
|
<ComboBox
|
||
|
|
id='prompt-select'
|
||
|
|
items={prompts}
|
||
|
|
value={prompts?.find(p => p.id === selected) ?? null}
|
||
|
|
onChange={item => setSelected(item?.id ?? 0)}
|
||
|
|
idFunc={item => String(item.id)}
|
||
|
|
labelValueFunc={item => item.label}
|
||
|
|
labelOptionFunc={item => item.label}
|
||
|
|
placeholder='Выберите шаблон'
|
||
|
|
className='w-full'
|
||
|
|
/>
|
||
|
|
<Suspense fallback={<Loader />}>
|
||
|
|
<TabPanel>{selected ? <TabPromptSelect promptID={selected} /> : null}</TabPanel>
|
||
|
|
<TabPanel>{selected ? <TabPromptResult promptID={selected} /> : null}</TabPanel>
|
||
|
|
<TabPanel>{selected ? <TabPromptVariables promptID={selected} /> : null}</TabPanel>
|
||
|
|
</Suspense>
|
||
|
|
</div>
|
||
|
|
</Tabs>
|
||
|
|
</ModalView>
|
||
|
|
);
|
||
|
|
}
|