427 lines
17 KiB
TypeScript
427 lines
17 KiB
TypeScript
import {
|
|
ArrowsAltOutlined,
|
|
DeleteOutlined,
|
|
EditOutlined,
|
|
PlusOutlined,
|
|
SaveOutlined,
|
|
ShrinkOutlined,
|
|
UnorderedListOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Alert, Button, Card, Empty, Form, Input, List, Segmented, Space, Switch, Tag, Typography } from 'antd';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
import { MarkdownPreviewContent } from '../../components/markdownPreview';
|
|
import {
|
|
deleteChatDefaultContext,
|
|
pruneChatRoomContextSettings,
|
|
pruneChatTypeDefaultSelections,
|
|
upsertChatDefaultContext,
|
|
useChatContextSettingsRegistry,
|
|
type ChatDefaultContextRecord,
|
|
} from './chatContextSettingsAccess';
|
|
import { useTokenAccess } from './tokenAccess';
|
|
import './ChatTypeManagementPage.css';
|
|
|
|
const { Text, Title } = Typography;
|
|
|
|
type ChatDefaultContextFormValue = {
|
|
id?: string;
|
|
title: string;
|
|
content: string;
|
|
enabled: boolean;
|
|
};
|
|
|
|
const EMPTY_FORM_VALUE: ChatDefaultContextFormValue = {
|
|
title: '',
|
|
content: '',
|
|
enabled: true,
|
|
};
|
|
|
|
function toFormValue(record: ChatDefaultContextRecord | null): ChatDefaultContextFormValue {
|
|
if (!record) {
|
|
return EMPTY_FORM_VALUE;
|
|
}
|
|
|
|
return {
|
|
id: record.id,
|
|
title: record.title,
|
|
content: record.content,
|
|
enabled: record.enabled,
|
|
};
|
|
}
|
|
|
|
export function ChatDefaultContextManagementPage() {
|
|
const { hasAccess } = useTokenAccess();
|
|
const {
|
|
defaultContexts,
|
|
chatTypeDefaults,
|
|
roomContexts,
|
|
errorMessage: contextSettingsErrorMessage,
|
|
setStore,
|
|
} = useChatContextSettingsRegistry();
|
|
const [selectedContextId, setSelectedContextId] = useState<string | null>(defaultContexts[0]?.id ?? null);
|
|
const [isMobileViewport, setIsMobileViewport] = useState(false);
|
|
const [mobileView, setMobileView] = useState<'edit' | 'preview'>('edit');
|
|
const [detailMode, setDetailMode] = useState<'list' | 'detail'>('list');
|
|
const [maximizedPane, setMaximizedPane] = useState<'none' | 'edit' | 'preview'>('none');
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [saveErrorMessage, setSaveErrorMessage] = useState('');
|
|
const [form] = Form.useForm<ChatDefaultContextFormValue>();
|
|
|
|
const selectedContext = useMemo(
|
|
() => defaultContexts.find((item) => item.id === selectedContextId) ?? null,
|
|
[defaultContexts, selectedContextId],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (selectedContextId && defaultContexts.some((item) => item.id === selectedContextId)) {
|
|
return;
|
|
}
|
|
|
|
setSelectedContextId(defaultContexts[0]?.id ?? null);
|
|
}, [defaultContexts, selectedContextId]);
|
|
|
|
useEffect(() => {
|
|
if (detailMode !== 'detail') {
|
|
return;
|
|
}
|
|
|
|
form.resetFields();
|
|
form.setFieldsValue(toFormValue(isCreating ? null : selectedContext));
|
|
}, [detailMode, form, isCreating, selectedContext]);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const mediaQuery = window.matchMedia('(max-width: 960px)');
|
|
const update = () => {
|
|
setIsMobileViewport(mediaQuery.matches);
|
|
if (!mediaQuery.matches) {
|
|
setMobileView('edit');
|
|
}
|
|
};
|
|
|
|
update();
|
|
mediaQuery.addEventListener('change', update);
|
|
|
|
return () => {
|
|
mediaQuery.removeEventListener('change', update);
|
|
};
|
|
}, []);
|
|
|
|
const openCreateForm = () => {
|
|
setIsCreating(true);
|
|
setSelectedContextId(null);
|
|
setDetailMode('detail');
|
|
setMaximizedPane('none');
|
|
form.resetFields();
|
|
form.setFieldsValue(EMPTY_FORM_VALUE);
|
|
};
|
|
|
|
const openDetail = (contextId: string) => {
|
|
setIsCreating(false);
|
|
setSelectedContextId(contextId);
|
|
setDetailMode('detail');
|
|
setMaximizedPane('none');
|
|
};
|
|
|
|
const closeDetail = () => {
|
|
setIsCreating(false);
|
|
setDetailMode('list');
|
|
setMaximizedPane('none');
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!selectedContext) {
|
|
return;
|
|
}
|
|
|
|
if (!window.confirm(`"${selectedContext.title}" 기본 유형을 삭제할까요?`)) {
|
|
return;
|
|
}
|
|
|
|
const nextDefaultContexts = deleteChatDefaultContext(defaultContexts, selectedContext.id);
|
|
const nextChatTypeDefaults = pruneChatTypeDefaultSelections(chatTypeDefaults, selectedContext.id);
|
|
const nextRoomContexts = pruneChatRoomContextSettings(roomContexts, selectedContext.id);
|
|
|
|
await setStore({
|
|
defaultContexts: nextDefaultContexts,
|
|
chatTypeDefaults: nextChatTypeDefaults,
|
|
roomContexts: nextRoomContexts,
|
|
});
|
|
setSelectedContextId(nextDefaultContexts[0]?.id ?? null);
|
|
setIsCreating(false);
|
|
setDetailMode('list');
|
|
form.resetFields();
|
|
form.setFieldsValue(EMPTY_FORM_VALUE);
|
|
};
|
|
|
|
if (!hasAccess) {
|
|
return (
|
|
<Card title="기본 유형 관리" className="chat-type-management-page">
|
|
<Alert
|
|
showIcon
|
|
type="warning"
|
|
message="관리 페이지는 토큰 등록 사용자만 사용할 수 있습니다."
|
|
description="설정 > 토큰 관리에서 권한 토큰을 등록한 뒤 기본 유형을 관리하세요."
|
|
/>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`chat-type-management-page${detailMode === 'detail' ? ' chat-type-management-page--detail' : ''}${
|
|
maximizedPane !== 'none' ? ' chat-type-management-page--pane-maximized' : ''
|
|
}`}
|
|
>
|
|
{detailMode === 'list' ? (
|
|
<Card
|
|
title="기본 유형 관리"
|
|
className="chat-type-management-page__card"
|
|
extra={
|
|
<Button icon={<PlusOutlined />} onClick={openCreateForm}>
|
|
신규 기본 유형
|
|
</Button>
|
|
}
|
|
>
|
|
<div className="chat-type-management-page__list">
|
|
{saveErrorMessage ? <Alert showIcon type="error" message={saveErrorMessage} /> : null}
|
|
{contextSettingsErrorMessage ? <Alert showIcon type="error" message={contextSettingsErrorMessage} /> : null}
|
|
<div className="chat-type-management-page__list-header">
|
|
<Title level={5}>등록 기본 유형</Title>
|
|
<Text type="secondary">{`${defaultContexts.length}건`}</Text>
|
|
</div>
|
|
{defaultContexts.length > 0 ? (
|
|
<List
|
|
dataSource={defaultContexts}
|
|
renderItem={(item) => (
|
|
<List.Item
|
|
className={
|
|
item.id === selectedContextId
|
|
? 'chat-type-management-page__item chat-type-management-page__item--active'
|
|
: 'chat-type-management-page__item'
|
|
}
|
|
onClick={() => {
|
|
openDetail(item.id);
|
|
}}
|
|
actions={[
|
|
<Button
|
|
key="edit"
|
|
type="text"
|
|
icon={<EditOutlined />}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
openDetail(item.id);
|
|
}}
|
|
/>,
|
|
]}
|
|
>
|
|
<div className="chat-type-management-page__item-main">
|
|
<Space size={[8, 8]} wrap>
|
|
<Text strong>{item.title}</Text>
|
|
<Tag color={item.enabled ? 'green' : 'default'}>{item.enabled ? '사용' : '중지'}</Tag>
|
|
</Space>
|
|
<div className="chat-type-management-page__item-description">
|
|
{item.content ? <MarkdownPreviewContent content={item.content} maxBlocks={3} /> : '본문 없음'}
|
|
</div>
|
|
</div>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
) : (
|
|
<Empty description="등록된 기본 유형이 없습니다." />
|
|
)}
|
|
</div>
|
|
</Card>
|
|
) : (
|
|
<Card
|
|
title={isCreating ? '기본 유형 등록' : '기본 유형 상세'}
|
|
className={`chat-type-management-page__card${
|
|
maximizedPane !== 'none' ? ' chat-type-management-page__card--pane-maximized' : ''
|
|
}`}
|
|
extra={
|
|
<Space size={6} className="chat-type-management-page__header-actions" wrap>
|
|
<Button
|
|
type="primary"
|
|
shape="circle"
|
|
icon={<SaveOutlined />}
|
|
aria-label={isCreating ? '등록' : '수정 저장'}
|
|
onClick={() => {
|
|
void form.submit();
|
|
}}
|
|
/>
|
|
<Button shape="circle" icon={<PlusOutlined />} aria-label="새 입력" onClick={openCreateForm} />
|
|
{!isCreating && selectedContext ? (
|
|
<Button
|
|
danger
|
|
shape="circle"
|
|
icon={<DeleteOutlined />}
|
|
aria-label="삭제"
|
|
onClick={() => {
|
|
void handleDelete();
|
|
}}
|
|
/>
|
|
) : null}
|
|
<Button shape="circle" icon={<UnorderedListOutlined />} aria-label="목록 가기" onClick={closeDetail} />
|
|
</Space>
|
|
}
|
|
>
|
|
<div className="chat-type-management-page__editor">
|
|
{saveErrorMessage ? <Alert showIcon type="error" message={saveErrorMessage} /> : null}
|
|
{contextSettingsErrorMessage ? <Alert showIcon type="error" message={contextSettingsErrorMessage} /> : null}
|
|
<Form
|
|
className="chat-type-management-page__editor-form"
|
|
layout="vertical"
|
|
form={form}
|
|
initialValues={EMPTY_FORM_VALUE}
|
|
onFinish={async (values) => {
|
|
setSaveErrorMessage('');
|
|
|
|
try {
|
|
const nextDefaultContexts = upsertChatDefaultContext(defaultContexts, values);
|
|
const savedContext = nextDefaultContexts.find((item) => item.id === values.id || item.title === values.title) ?? null;
|
|
|
|
await setStore({
|
|
defaultContexts: nextDefaultContexts,
|
|
chatTypeDefaults,
|
|
roomContexts,
|
|
});
|
|
setIsCreating(false);
|
|
setSelectedContextId(savedContext?.id ?? null);
|
|
setDetailMode('detail');
|
|
} catch (error) {
|
|
setSaveErrorMessage(error instanceof Error ? error.message : '기본 유형 저장에 실패했습니다.');
|
|
}
|
|
}}
|
|
>
|
|
<Form.Item name="id" hidden>
|
|
<Input />
|
|
</Form.Item>
|
|
<div className="chat-type-management-page__editor-scroll">
|
|
<div className={`chat-type-management-page__meta-grid${maximizedPane !== 'none' ? ' chat-type-management-page__meta-grid--hidden' : ''}`}>
|
|
<Form.Item
|
|
className="chat-type-management-page__meta-item chat-type-management-page__meta-item--name"
|
|
label="기본 유형명"
|
|
name="title"
|
|
rules={[{ required: true, message: '기본 유형명을 입력하세요.' }]}
|
|
>
|
|
<Input placeholder="예: 모바일 검증 공통 규칙" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
className="chat-type-management-page__meta-item chat-type-management-page__meta-item--enabled"
|
|
label="사용 여부"
|
|
name="enabled"
|
|
valuePropName="checked"
|
|
>
|
|
<Switch checkedChildren="사용" unCheckedChildren="중지" />
|
|
</Form.Item>
|
|
</div>
|
|
<div className="chat-type-management-page__markdown-field">
|
|
<Text strong className="chat-type-management-page__field-label">
|
|
기본 유형 본문
|
|
</Text>
|
|
<div className="chat-type-management-page__markdown-editor">
|
|
<div className="chat-type-management-page__editor-toolbar">
|
|
{isMobileViewport ? (
|
|
<Segmented
|
|
className="chat-type-management-page__mobile-toggle"
|
|
options={[
|
|
{ label: '입력', value: 'edit' },
|
|
{ label: '미리보기', value: 'preview' },
|
|
]}
|
|
value={mobileView}
|
|
onChange={(value) => {
|
|
setMobileView(value as 'edit' | 'preview');
|
|
setMaximizedPane('none');
|
|
}}
|
|
/>
|
|
) : (
|
|
<Space size={8} wrap>
|
|
<Button
|
|
type={maximizedPane === 'edit' ? 'primary' : 'default'}
|
|
icon={maximizedPane === 'edit' ? <ShrinkOutlined /> : <ArrowsAltOutlined />}
|
|
onClick={() => {
|
|
setMaximizedPane((current) => (current === 'edit' ? 'none' : 'edit'));
|
|
}}
|
|
>
|
|
{maximizedPane === 'edit' ? '입력 축소' : '입력 최대화'}
|
|
</Button>
|
|
<Button
|
|
type={maximizedPane === 'preview' ? 'primary' : 'default'}
|
|
icon={maximizedPane === 'preview' ? <ShrinkOutlined /> : <ArrowsAltOutlined />}
|
|
onClick={() => {
|
|
setMaximizedPane((current) => (current === 'preview' ? 'none' : 'preview'));
|
|
}}
|
|
>
|
|
{maximizedPane === 'preview' ? '미리보기 축소' : '미리보기 최대화'}
|
|
</Button>
|
|
</Space>
|
|
)}
|
|
</div>
|
|
<div
|
|
className={`chat-type-management-page__markdown-grid${
|
|
maximizedPane !== 'none' ? ' chat-type-management-page__markdown-grid--maximized' : ''
|
|
}`}
|
|
>
|
|
<div
|
|
className={`chat-type-management-page__markdown-pane${
|
|
isMobileViewport && mobileView === 'preview'
|
|
? ' chat-type-management-page__markdown-pane--mobile-hidden'
|
|
: ''
|
|
}${
|
|
maximizedPane === 'preview' ? ' chat-type-management-page__markdown-pane--desktop-hidden' : ''
|
|
}`}
|
|
>
|
|
<div className="chat-type-management-page__markdown-pane-header">
|
|
<Text type="secondary">입력</Text>
|
|
</div>
|
|
<Form.Item name="content" noStyle>
|
|
<Input.TextArea
|
|
autoSize={isMobileViewport ? false : { minRows: 10, maxRows: 18 }}
|
|
className="chat-type-management-page__markdown-textarea"
|
|
placeholder={'## 적용 기준\n- 기본 유형의 공통 규칙을 Markdown으로 정의하세요.'}
|
|
/>
|
|
</Form.Item>
|
|
</div>
|
|
<div
|
|
className={`chat-type-management-page__markdown-pane${
|
|
isMobileViewport && mobileView === 'edit'
|
|
? ' chat-type-management-page__markdown-pane--mobile-hidden'
|
|
: ''
|
|
}${
|
|
maximizedPane === 'edit' ? ' chat-type-management-page__markdown-pane--desktop-hidden' : ''
|
|
}`}
|
|
>
|
|
<div className="chat-type-management-page__markdown-preview">
|
|
<div className="chat-type-management-page__markdown-pane-header">
|
|
<Text type="secondary">미리보기</Text>
|
|
</div>
|
|
<div className="chat-type-management-page__markdown-preview-body">
|
|
<Form.Item noStyle shouldUpdate={(prev, next) => prev.content !== next.content}>
|
|
{({ getFieldValue }) => {
|
|
const content = String(getFieldValue('content') ?? '').trim();
|
|
|
|
return content ? (
|
|
<MarkdownPreviewContent content={content} />
|
|
) : (
|
|
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="미리보기할 기본 유형 본문이 없습니다." />
|
|
);
|
|
}}
|
|
</Form.Item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|