feat(web): prompt ui upgrade
This commit is contained in:
zhaoying
@@ -1,109 +0,0 @@
|
||||
/*
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 17:44:04
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-02-03 17:44:04
|
||||
*/
|
||||
/**
|
||||
* Prompt History Component
|
||||
* Displays saved prompts with view, edit, and delete actions
|
||||
*/
|
||||
|
||||
import React, { useRef, type MouseEvent } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Tooltip, Space, App } from 'antd';
|
||||
import { EyeOutlined } from '@ant-design/icons';
|
||||
|
||||
import type { HistoryQuery, HistoryItem, PromptDetailRef } from './types';
|
||||
import RbCard from '@/components/RbCard/Card'
|
||||
import { getPromptReleaseListUrl, deletePrompt } from '@/api/prompt'
|
||||
import Markdown from '@/components/Markdown';
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import PromptDetail from './components/PromptDetail'
|
||||
import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
|
||||
|
||||
const History: React.FC<{ query: HistoryQuery; edit: (item: HistoryItem) => void; }> = ({ query, edit }) => {
|
||||
const { t } = useTranslation();
|
||||
const scrollListRef = useRef<PageScrollListRef>(null)
|
||||
const detailRef = useRef<PromptDetailRef>(null)
|
||||
const { message, modal } = App.useApp()
|
||||
|
||||
/** View prompt details */
|
||||
const handleView = (item: HistoryItem) => {
|
||||
detailRef.current?.handleOpen(item)
|
||||
}
|
||||
/** Delete prompt */
|
||||
const handleDelete = (item: HistoryItem, e?: MouseEvent) => {
|
||||
e?.preventDefault();
|
||||
e?.stopPropagation();
|
||||
modal.confirm({
|
||||
title: t('common.confirmDeleteDesc', { name: item.title }),
|
||||
okText: t('common.delete'),
|
||||
cancelText: t('common.cancel'),
|
||||
okType: 'danger',
|
||||
onOk: () => {
|
||||
deletePrompt(item.id).then(() => {
|
||||
message.success(t('common.deleteSuccess'))
|
||||
scrollListRef.current?.refresh()
|
||||
detailRef.current?.handleClose()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
/** Edit prompt */
|
||||
const handleEdit = (item: HistoryItem) => {
|
||||
edit(item)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageScrollList
|
||||
ref={scrollListRef}
|
||||
url={getPromptReleaseListUrl}
|
||||
query={query}
|
||||
column={3}
|
||||
needLoading={false}
|
||||
renderItem={(item) => {
|
||||
const historyItem = item as unknown as HistoryItem;
|
||||
return (
|
||||
<RbCard
|
||||
className="rb:cursor-pointer"
|
||||
headerType="borderless"
|
||||
bodyClassName="rb:p-4!"
|
||||
title={<Tooltip title={historyItem.title}>{historyItem.title}</Tooltip>}
|
||||
extra={<div className="rb:text-[12px] rb:text-[#5B6167]">{formatDateTime(historyItem.created_at, 'YYYY/MM/DD HH:mm')}</div>}
|
||||
onClick={() => handleView(historyItem)}
|
||||
>
|
||||
<div className="rb:text-[12px] rb:h-30 rb:overflow-hidden rb:px-3 rb:py-2.5 rb:bg-[#F6F8FC] rb:rounded-lg rb:border rb:border-[#DFE4ED] rb:shadow-[0px_4px_8px_0px_rgba(33,35,50,0.12)]">
|
||||
<Markdown content={historyItem.prompt} className="rb:h-full! rb:overflow-y-auto" />
|
||||
</div>
|
||||
|
||||
<div className="rb:mt-4 rb:text-[12px] rb:leading-4 rb:font-regular rb:text-[#5B6167] rb:flex rb:items-center rb:justify-end">
|
||||
<Space size={16}>
|
||||
<EyeOutlined className="rb:text-[16px]" onClick={() => handleView(historyItem)} />
|
||||
<div
|
||||
className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]"
|
||||
onClick={() => handleEdit(historyItem)}
|
||||
></div>
|
||||
<div
|
||||
className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]"
|
||||
onClick={(e) => handleDelete(historyItem, e)}
|
||||
></div>
|
||||
</Space>
|
||||
</div>
|
||||
</RbCard>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<PromptDetail
|
||||
ref={detailRef}
|
||||
handleEdit={handleEdit}
|
||||
handleDelete={handleDelete}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default History;
|
||||
@@ -1,246 +0,0 @@
|
||||
/*
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 17:44:15
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-02-03 17:44:15
|
||||
*/
|
||||
/**
|
||||
* Prompt Editor Component
|
||||
* AI-powered prompt optimization with chat interface and variable support
|
||||
*/
|
||||
|
||||
import { type FC, useState, useRef, useEffect } from 'react';
|
||||
import { Button, Form, Input, App, Row, Col } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import clsx from 'clsx'
|
||||
import copy from 'copy-to-clipboard';
|
||||
|
||||
import { updatePromptMessages, createPromptSessions } from '@/api/prompt'
|
||||
import { getModelListUrl } from '@/api/models'
|
||||
import type { PromptVariableModalRef, AiPromptForm, HistoryItem, PromptSaveModalRef } from './types'
|
||||
import ChatContent from '@/components/Chat/ChatContent'
|
||||
import Empty from '@/components/Empty'
|
||||
import ChatSendIcon from '@/assets/images/application/chatSend.svg'
|
||||
import ConversationEmptyIcon from '@/assets/images/conversation/conversationEmpty.svg'
|
||||
import type { ChatItem } from '@/components/Chat/types'
|
||||
import CustomSelect from '@/components/CustomSelect'
|
||||
import PromptVariableModal from './components/PromptVariableModal'
|
||||
import { type SSEMessage } from '@/utils/stream'
|
||||
import Editor from '@/views/ApplicationConfig/components/Editor'
|
||||
import PromptSaveModal from './components/PromptSaveModal'
|
||||
|
||||
const Prompt: FC<{ editVo: HistoryItem | null; refresh: () => void; }> = ({ editVo, refresh }) => {
|
||||
const { t } = useTranslation();
|
||||
const { message } = App.useApp()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [form] = Form.useForm<AiPromptForm>()
|
||||
const [chatList, setChatList] = useState<ChatItem[]>([])
|
||||
const [variables, setVariables] = useState<string[]>([])
|
||||
const [promptSession, setPromptSession] = useState<string | null>(null)
|
||||
const aiPromptVariableModalRef = useRef<PromptVariableModalRef>(null)
|
||||
const promptSaveModalRef = useRef<PromptSaveModalRef>(null)
|
||||
const editorRef = useRef<any>(null)
|
||||
const currentPromptValueRef = useRef<string>(undefined)
|
||||
const values = Form.useWatch([], form)
|
||||
|
||||
useEffect(() => {
|
||||
if (editVo?.id) {
|
||||
form.setFieldValue('current_prompt', editVo.prompt)
|
||||
setChatList([])
|
||||
}
|
||||
updateSession()
|
||||
}, [editVo])
|
||||
|
||||
/** Update session ID */
|
||||
const updateSession = () => {
|
||||
console.log('updateSession')
|
||||
createPromptSessions().then(res => {
|
||||
const response = res as { id: string }
|
||||
setPromptSession(response.id)
|
||||
})
|
||||
}
|
||||
|
||||
/** Send message to AI for prompt optimization */
|
||||
const handleSend = () => {
|
||||
if (!promptSession) return
|
||||
if (!values.model_id) {
|
||||
message.warning(t('common.selectPlaceholder', { title: t('prompt.model') }))
|
||||
return
|
||||
}
|
||||
if (!values.message) {
|
||||
message.warning(t('prompt.promptChatPlaceholder'))
|
||||
return
|
||||
}
|
||||
const messageContent = values.message
|
||||
setLoading(true)
|
||||
setChatList(prev => {
|
||||
return [...prev, { role: 'user', content: messageContent}]
|
||||
})
|
||||
form.setFieldsValue({ message: undefined, current_prompt: undefined })
|
||||
|
||||
const handleStreamMessage = (data: SSEMessage[]) => {
|
||||
data.map(item => {
|
||||
const { content, desc, variables } = item.data as { content: string; desc: string; variables: string[] };
|
||||
|
||||
switch (item.event) {
|
||||
case 'start':
|
||||
currentPromptValueRef.current = ''
|
||||
if (editorRef.current?.clear) {
|
||||
editorRef.current.clear();
|
||||
}
|
||||
break;
|
||||
case 'message':
|
||||
if (typeof content === 'string') {
|
||||
currentPromptValueRef.current += content;
|
||||
if (editorRef.current?.appendText) {
|
||||
editorRef.current.appendText(content);
|
||||
editorRef.current.scrollToBottom();
|
||||
} else {
|
||||
form.setFieldsValue({ current_prompt: currentPromptValueRef.current })
|
||||
}
|
||||
}
|
||||
if (desc) {
|
||||
setChatList(prev => {
|
||||
return [...prev, { role: 'assistant', content: desc }]
|
||||
})
|
||||
}
|
||||
if (variables) {
|
||||
setVariables(variables)
|
||||
}
|
||||
break;
|
||||
case 'end':
|
||||
setLoading(false)
|
||||
// Sync form values when stream ends
|
||||
form.setFieldsValue({ current_prompt: currentPromptValueRef.current })
|
||||
break
|
||||
}
|
||||
})
|
||||
};
|
||||
updatePromptMessages((promptSession) as string, values, handleStreamMessage)
|
||||
.finally(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
/** Copy prompt to clipboard */
|
||||
const handleCopy = () => {
|
||||
if (!values.current_prompt || values?.current_prompt?.trim() === '') return
|
||||
copy(values.current_prompt)
|
||||
message.success(t('common.copySuccess'))
|
||||
}
|
||||
/** Open variable modal */
|
||||
const handleAdd = () => {
|
||||
aiPromptVariableModalRef.current?.handleOpen()
|
||||
}
|
||||
/** Apply variable to editor */
|
||||
const handleVariableApply = (value: string) => {
|
||||
if (editorRef.current?.insertText) {
|
||||
editorRef.current.insertText(value)
|
||||
} else {
|
||||
form.setFieldValue('current_prompt', (values.current_prompt || '') + value)
|
||||
}
|
||||
}
|
||||
/** Save prompt */
|
||||
const handleSave = () => {
|
||||
if (!values.current_prompt || !promptSession) {
|
||||
return
|
||||
}
|
||||
promptSaveModalRef.current?.handleOpen({
|
||||
session_id: promptSession,
|
||||
prompt: values.current_prompt
|
||||
})
|
||||
}
|
||||
|
||||
/** Refresh editor and clear state */
|
||||
const handleRefresh = () => {
|
||||
form.setFieldValue('current_prompt', undefined)
|
||||
currentPromptValueRef.current = undefined;
|
||||
setChatList([])
|
||||
refresh()
|
||||
updateSession()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form form={form}>
|
||||
<div className="rb:grid rb:grid-cols-2 rb:-my-4">
|
||||
<div className="rb:border-r rb:border-r-[#EBEBEB] rb:pr-6 rb:pt-3">
|
||||
<Form.Item
|
||||
label={t('prompt.model')}
|
||||
name="model_id"
|
||||
rules={[{ required: true, message: t('common.pleaseSelect') }]}
|
||||
>
|
||||
<CustomSelect
|
||||
url={getModelListUrl}
|
||||
params={{ type: 'llm,chat', pagesize: 100, is_active: true }}
|
||||
valueKey="id"
|
||||
labelKey="name"
|
||||
hasAll={false}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<ChatContent
|
||||
classNames="rb:h-[calc(100vh-260px)] rb:px-[16px] rb:py-[20px] rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-[8px]"
|
||||
contentClassNames="rb:max-w-[260px]!"
|
||||
empty={<Empty url={ConversationEmptyIcon} title={t('prompt.promptChatEmpty')} isNeedSubTitle={false} size={[240, 200]} className="rb:h-full" />}
|
||||
data={chatList || []}
|
||||
streamLoading={false}
|
||||
labelPosition="top"
|
||||
labelFormat={(item) => item.role === 'user' ? t('prompt.you') : t('prompt.ai')}
|
||||
/>
|
||||
|
||||
<div className="rb:flex rb:items-center rb:gap-2.5 rb:py-4">
|
||||
<Form.Item name="message" className="rb:mb-0!" style={{ width: 'calc(100% - 54px)' }}>
|
||||
<Input
|
||||
className="rb:h-11 rb:shadow-[0px_2px_8px_0px_rgba(33,35,50,0.1)]"
|
||||
placeholder={t('prompt.promptChatPlaceholder')}
|
||||
onPressEnter={handleSend}
|
||||
/>
|
||||
</Form.Item>
|
||||
<img src={ChatSendIcon} className={clsx("rb:w-11 rb:h-11 rb:cursor-pointer", {
|
||||
'rb:opacity-50': loading,
|
||||
})} onClick={handleSend} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rb:pl-6 rb:pt-3">
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item label={t('prompt.conversationOptimizationPrompt')}></Form.Item>
|
||||
</Col>
|
||||
<Col span={12} className="rb:text-right">
|
||||
<Button onClick={handleAdd}>+ {t('prompt.addVariable')}</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item name="current_prompt">
|
||||
<Editor
|
||||
ref={editorRef}
|
||||
placeholder={t('prompt.promptPlaceholder')}
|
||||
className="rb:h-[calc(100vh-260px)]"
|
||||
disabled={loading}
|
||||
// onChange={(value) => form.setFieldValue('current_prompt', value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<div className="rb:grid rb:grid-cols-2 rb:gap-4 rb:mt-6">
|
||||
<Button type="primary" block disabled={!values?.current_prompt || loading} onClick={handleSave}>{t('common.save')}</Button>
|
||||
<Button block disabled={!values?.current_prompt || loading} onClick={handleCopy}>{t('common.copy')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
<PromptVariableModal
|
||||
ref={aiPromptVariableModalRef}
|
||||
variables={variables}
|
||||
refresh={handleVariableApply}
|
||||
/>
|
||||
|
||||
<PromptSaveModal
|
||||
ref={promptSaveModalRef}
|
||||
refresh={handleRefresh}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Prompt;
|
||||
16
web/src/views/Prompt/components/Header.tsx
Normal file
16
web/src/views/Prompt/components/Header.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { type FC } from 'react';
|
||||
|
||||
const Header:FC<{ title: string; desc: string; className?: string; }> = ({
|
||||
title,
|
||||
desc,
|
||||
className,
|
||||
}) => {
|
||||
return (
|
||||
<div className={`rb:pl-2 ${className}`}>
|
||||
<div className="rb:text-[#212332] rb:font-[MiSans-Bold] rb:font-bold rb:text-[16px] rb:leading-5.5">{title}</div>
|
||||
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:mt-2 rb:pb-1">{desc}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
3
web/src/views/Prompt/index.module.css
Normal file
3
web/src/views/Prompt/index.module.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.select:global(.ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector) {
|
||||
border: none;
|
||||
}
|
||||
@@ -1,73 +1,309 @@
|
||||
/*
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 17:44:09
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-02-03 17:44:09
|
||||
* @Date: 2026-02-03 17:44:15
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-02-10 16:35:47
|
||||
*/
|
||||
/**
|
||||
* Prompt Management Page
|
||||
* Main page with editor and history tabs for prompt optimization
|
||||
* Prompt Editor Component
|
||||
* AI-powered prompt optimization with chat interface and variable support
|
||||
*/
|
||||
|
||||
import { type FC, useState } from 'react';
|
||||
import { type SegmentedProps, Flex } from 'antd';
|
||||
import { type FC, useState, useRef, useEffect } from 'react';
|
||||
import { Button, Form, Input, App, Flex, Space } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import clsx from 'clsx'
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
|
||||
import PageTabs from '@/components/PageTabs';
|
||||
import SearchInput from '@/components/SearchInput'
|
||||
import PromptEditor from './Prompt';
|
||||
import History from './History'
|
||||
import type { HistoryQuery, HistoryItem } from './types';
|
||||
import { updatePromptMessages, createPromptSessions } from '@/api/prompt'
|
||||
import { getModelListUrl } from '@/api/models'
|
||||
import type { PromptVariableModalRef, AiPromptForm, HistoryItem, PromptSaveModalRef } from './types'
|
||||
import ChatContent from '@/components/Chat/ChatContent'
|
||||
import Empty from '@/components/Empty'
|
||||
import ConversationEmptyIcon from '@/assets/images/conversation/conversationEmpty.svg'
|
||||
import type { ChatItem } from '@/components/Chat/types'
|
||||
import CustomSelect from '@/components/CustomSelect'
|
||||
import PromptVariableModal from './components/PromptVariableModal'
|
||||
import { type SSEMessage } from '@/utils/stream'
|
||||
import Editor from '@/views/ApplicationConfig/components/Editor'
|
||||
import PromptSaveModal from './components/PromptSaveModal'
|
||||
import { getLogoUrl } from '@/views/ModelManagement/utils'
|
||||
import analysisEmptyIcon from '@/assets/images/conversation/analysisEmpty.png'
|
||||
import Header from './components/Header';
|
||||
import RbCard from '@/components/RbCard/Card';
|
||||
import styles from './index.module.css'
|
||||
|
||||
/** Available tab keys */
|
||||
const tabs = ['editor', 'history']
|
||||
const Prompt: FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [activeTab, setActiveTab] = useState<SegmentedProps['value']>(tabs[0])
|
||||
const [query, setQuery] = useState<HistoryQuery>({});
|
||||
const navigate = useNavigate();
|
||||
const { state } = useLocation()
|
||||
const { message } = App.useApp()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [form] = Form.useForm<AiPromptForm>()
|
||||
const [chatList, setChatList] = useState<ChatItem[]>([])
|
||||
const [variables, setVariables] = useState<string[]>([])
|
||||
const [promptSession, setPromptSession] = useState<string | null>(null)
|
||||
const aiPromptVariableModalRef = useRef<PromptVariableModalRef>(null)
|
||||
const promptSaveModalRef = useRef<PromptSaveModalRef>(null)
|
||||
const editorRef = useRef<any>(null)
|
||||
const currentPromptValueRef = useRef<string>(undefined)
|
||||
const values = Form.useWatch([], form)
|
||||
const [editVo, setEditVo] = useState<HistoryItem | null>(null)
|
||||
|
||||
/** Handle tab change */
|
||||
const handleChangeTab = (value: SegmentedProps['value']) => {
|
||||
setActiveTab(value)
|
||||
useEffect(() => {
|
||||
setEditVo(state)
|
||||
}, [state])
|
||||
|
||||
useEffect(() => {
|
||||
if (editVo?.id) {
|
||||
form.setFieldValue('current_prompt', editVo.prompt)
|
||||
setChatList([])
|
||||
}
|
||||
updateSession()
|
||||
}, [editVo])
|
||||
|
||||
/** Update session ID */
|
||||
const updateSession = () => {
|
||||
console.log('updateSession')
|
||||
createPromptSessions().then(res => {
|
||||
const response = res as { id: string }
|
||||
setPromptSession(response.id)
|
||||
})
|
||||
}
|
||||
|
||||
/** Send message to AI for prompt optimization */
|
||||
const handleSend = () => {
|
||||
if (!promptSession) return
|
||||
if (!values.model_id) {
|
||||
message.warning(t('common.selectPlaceholder', { title: t('prompt.model') }))
|
||||
return
|
||||
}
|
||||
if (!values.message) {
|
||||
message.warning(t('prompt.promptChatPlaceholder'))
|
||||
return
|
||||
}
|
||||
const messageContent = values.message
|
||||
setLoading(true)
|
||||
setChatList(prev => {
|
||||
return [...prev, { role: 'user', content: messageContent}]
|
||||
})
|
||||
form.setFieldsValue({ message: undefined, current_prompt: undefined })
|
||||
|
||||
const handleStreamMessage = (data: SSEMessage[]) => {
|
||||
data.map(item => {
|
||||
const { content, desc, variables } = item.data as { content: string; desc: string; variables: string[] };
|
||||
|
||||
switch (item.event) {
|
||||
case 'start':
|
||||
currentPromptValueRef.current = ''
|
||||
if (editorRef.current?.clear) {
|
||||
editorRef.current.clear();
|
||||
}
|
||||
break;
|
||||
case 'message':
|
||||
if (typeof content === 'string') {
|
||||
currentPromptValueRef.current += content;
|
||||
if (editorRef.current?.appendText) {
|
||||
editorRef.current.appendText(content);
|
||||
editorRef.current.scrollToBottom();
|
||||
} else {
|
||||
form.setFieldsValue({ current_prompt: currentPromptValueRef.current })
|
||||
}
|
||||
}
|
||||
if (desc) {
|
||||
setChatList(prev => {
|
||||
return [...prev, { role: 'assistant', content: desc }]
|
||||
})
|
||||
}
|
||||
if (variables) {
|
||||
setVariables(variables)
|
||||
}
|
||||
break;
|
||||
case 'end':
|
||||
setLoading(false)
|
||||
// Sync form values when stream ends
|
||||
form.setFieldsValue({ current_prompt: currentPromptValueRef.current })
|
||||
break
|
||||
}
|
||||
})
|
||||
};
|
||||
updatePromptMessages((promptSession) as string, values, handleStreamMessage)
|
||||
.finally(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
/** Copy prompt to clipboard */
|
||||
const handleCopy = () => {
|
||||
if (!values.current_prompt || values?.current_prompt?.trim() === '') return
|
||||
copy(values.current_prompt)
|
||||
message.success(t('common.copySuccess'))
|
||||
}
|
||||
/** Open variable modal */
|
||||
const handleAdd = () => {
|
||||
aiPromptVariableModalRef.current?.handleOpen()
|
||||
}
|
||||
/** Apply variable to editor */
|
||||
const handleVariableApply = (value: string) => {
|
||||
if (editorRef.current?.insertText) {
|
||||
editorRef.current.insertText(value)
|
||||
} else {
|
||||
form.setFieldValue('current_prompt', (values.current_prompt || '') + value)
|
||||
}
|
||||
}
|
||||
/** Save prompt */
|
||||
const handleSave = () => {
|
||||
if (!values.current_prompt || !promptSession) {
|
||||
return
|
||||
}
|
||||
promptSaveModalRef.current?.handleOpen({
|
||||
session_id: promptSession,
|
||||
prompt: values.current_prompt
|
||||
})
|
||||
}
|
||||
|
||||
/** Refresh editor and clear state */
|
||||
const handleRefresh = () => {
|
||||
form.setFieldValue('current_prompt', undefined)
|
||||
currentPromptValueRef.current = undefined;
|
||||
setChatList([])
|
||||
setEditVo(null)
|
||||
setQuery({})
|
||||
updateSession()
|
||||
}
|
||||
/** Handle search in history */
|
||||
const handleSearch = (value?: string) => {
|
||||
setQuery(prev => ({ ...prev, keyword: value }))
|
||||
const [isFocus, setIsFocus] = useState(false)
|
||||
const handleFocus = () => {
|
||||
setIsFocus(true)
|
||||
}
|
||||
/** Handle edit history item */
|
||||
const handleEdit = (item: HistoryItem) => {
|
||||
console.log('edit', item)
|
||||
setEditVo(item)
|
||||
setActiveTab('editor')
|
||||
const handleBlur = () => {
|
||||
setIsFocus(false)
|
||||
}
|
||||
/** Refresh editor state */
|
||||
const refresh = () => {
|
||||
setEditVo(null)
|
||||
const handleJump = () => {
|
||||
navigate('/prompt/history')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex justify="space-between" align="center" className="rb:mb-4">
|
||||
<PageTabs
|
||||
value={activeTab}
|
||||
options={tabs.map(key => ({ label: t(`prompt.${key}`), value: key }))}
|
||||
onChange={handleChangeTab}
|
||||
/>
|
||||
{activeTab === 'history' &&
|
||||
<SearchInput
|
||||
placeholder={t('prompt.historySearchPlaceholder')}
|
||||
onSearch={handleSearch}
|
||||
className="rb:w-70"
|
||||
/>
|
||||
}
|
||||
</Flex>
|
||||
|
||||
<div className="rb:mt-4 rb:h-[calc(100vh-128px)]">
|
||||
{activeTab === 'editor' && <PromptEditor editVo={editVo} refresh={refresh} />}
|
||||
{activeTab === 'history' && <History query={query} edit={handleEdit} />}
|
||||
</div>
|
||||
<Form form={form}>
|
||||
<div className="rb:grid rb:grid-cols-2 rb:gap-3">
|
||||
<div>
|
||||
<Header title={t(`menu.prompt`)} desc={t('prompt.promptDesc')} className="rb:mb-3" />
|
||||
|
||||
<RbCard
|
||||
title={t('prompt.chatTitle')}
|
||||
headerClassName="rb:min-h-[52px]! rb:font-[MiSans-Bold] rb:gont-bold"
|
||||
headerType="borderless"
|
||||
bodyClassName="rb:px-4! rb:pt-0! rb:pb-3!"
|
||||
>
|
||||
<ChatContent
|
||||
classNames="rb:h-[calc(100vh-265px)] rb:mb-[12px]!"
|
||||
contentClassNames="rb:max-w-75!"
|
||||
empty={<Empty url={ConversationEmptyIcon} title={t(`prompt.promptChatEmpty`)} isNeedSubTitle={false} size={[140, 100]} className="rb:h-full" />}
|
||||
data={chatList || []}
|
||||
streamLoading={false}
|
||||
labelPosition="top"
|
||||
labelFormat={(item) => item.role === 'user' ? t(`prompt.you`) : t(`prompt.ai`)}
|
||||
/>
|
||||
<Flex align="center" gap={12} justify="space-between"
|
||||
className={clsx("rb-border rb:shadow-[0px_2px_12px_0px_rgba(23,23,25,0.1)] rb:rounded-2xl rb:h-13 rb:px-3!", {
|
||||
'rb:border rb:border-[#171719]!': isFocus
|
||||
})}
|
||||
>
|
||||
<Form.Item name="message" className="rb:flex-1 rb:mb-0!">
|
||||
<Input
|
||||
placeholder={t(`prompt.promptChatPlaceholder`)}
|
||||
onPressEnter={handleSend}
|
||||
variant="borderless"
|
||||
className="rb:p-0!"
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
</Form.Item>
|
||||
{loading
|
||||
? <div className="rb:size-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/loading.svg')]"></div>
|
||||
: !values || !values?.message || values?.message?.trim() === ''
|
||||
? <div className="rb:size-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/sendDisabled.svg')]"></div>
|
||||
: <div className="rb:size-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/send.svg')]" onClick={handleSend}></div>
|
||||
}
|
||||
</Flex>
|
||||
|
||||
</RbCard>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Flex align="center" justify="end" gap={8} className="rb:h-12.5 rb:mb-3!">
|
||||
<Form.Item
|
||||
name="model_id"
|
||||
noStyle
|
||||
>
|
||||
<CustomSelect
|
||||
url={getModelListUrl}
|
||||
params={{ type: 'llm,chat', pagesize: 100, is_active: true }}
|
||||
hasAll={false}
|
||||
optionLabelProp="children"
|
||||
format={(data) => {
|
||||
return data.map(option => ({
|
||||
...data,
|
||||
value: option.id,
|
||||
label: (<div key={option.id} className="rb:flex rb:items-center rb:gap-2">
|
||||
{getLogoUrl(option.logo as string) && <img src={getLogoUrl(option.logo as string)} className="rb:inline-block rb:size-4 rb:align-middle" alt="" />}
|
||||
<span>{option.name as string}</span>
|
||||
</div>
|
||||
)
|
||||
}))
|
||||
}}
|
||||
className={`rb:w-75! ${styles.select}`}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Button className="rb:border-none!" onClick={handleJump}>{t('prompt.history')}</Button>
|
||||
</Flex>
|
||||
<RbCard
|
||||
title={t('prompt.conversationOptimizationPrompt')}
|
||||
headerClassName="rb:min-h-[52px]! rb:font-[MiSans-Bold] rb:gont-bold"
|
||||
headerType="borderless"
|
||||
bodyClassName="rb:px-4! rb:pt-0! rb:pb-3!"
|
||||
extra={
|
||||
<Space size={8}>
|
||||
<Button
|
||||
icon={<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/copy_dark.svg')]"></div>}
|
||||
disabled={!values?.current_prompt || loading}
|
||||
onClick={handleSave}
|
||||
>{t('common.save')}</Button>
|
||||
<Button
|
||||
icon={<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/application/save.svg')]"></div>}
|
||||
disabled={!values?.current_prompt || loading}
|
||||
onClick={handleCopy}
|
||||
>{t('common.copy')}</Button>
|
||||
<Button
|
||||
icon={<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/plus_dark.svg')]"></div>}
|
||||
onClick={handleAdd}
|
||||
></Button>
|
||||
</Space>}
|
||||
>
|
||||
<Form.Item name="current_prompt" noStyle>
|
||||
{values?.current_prompt
|
||||
? <Editor
|
||||
ref={editorRef}
|
||||
className="rb:h-[calc(100vh-201px)] rb:bg-white! rb:border-none! rb:p-0! rb:text-[#212332] rb:leading-5"
|
||||
onChange={(value) => form.setFieldValue('current_prompt', value)}
|
||||
/>
|
||||
: <Empty url={analysisEmptyIcon} title={t(`prompt.promptPlaceholder`)} isNeedSubTitle={false} size={[270, 170]} className="rb:h-119 rb:w-70 rb:mx-auto! rb:text-center! rb:text-[12px]! rb:leading-4!" />
|
||||
}
|
||||
</Form.Item>
|
||||
</RbCard>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
<PromptVariableModal
|
||||
ref={aiPromptVariableModalRef}
|
||||
variables={variables}
|
||||
refresh={handleVariableApply}
|
||||
/>
|
||||
|
||||
<PromptSaveModal
|
||||
ref={promptSaveModalRef}
|
||||
refresh={handleRefresh}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
140
web/src/views/Prompt/pages/History.tsx
Normal file
140
web/src/views/Prompt/pages/History.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
/*
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 17:44:04
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-02-09 12:18:09
|
||||
*/
|
||||
/**
|
||||
* Prompt History Component
|
||||
* Displays saved prompts with view, edit, and delete actions
|
||||
*/
|
||||
|
||||
import React, { useRef, type MouseEvent } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Tooltip, App, Flex, Form, Dropdown } from 'antd';
|
||||
import { DashOutlined } from '@ant-design/icons';
|
||||
|
||||
import type { HistoryQuery, HistoryItem, PromptDetailRef } from '../types';
|
||||
import RbCard from '@/components/RbCard/Card'
|
||||
import { getPromptReleaseListUrl, deletePrompt } from '@/api/prompt'
|
||||
import Markdown from '@/components/Markdown';
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import PromptDetail from '../components/PromptDetail'
|
||||
import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
|
||||
import SearchInput from '@/components/SearchInput'
|
||||
import Header from '../components/Header'
|
||||
|
||||
const History: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const scrollListRef = useRef<PageScrollListRef>(null)
|
||||
const detailRef = useRef<PromptDetailRef>(null)
|
||||
const { message, modal } = App.useApp()
|
||||
const [form] = Form.useForm<HistoryQuery>()
|
||||
const query = Form.useWatch([], form)
|
||||
|
||||
/** View prompt details */
|
||||
const handleView = (item: HistoryItem) => {
|
||||
detailRef.current?.handleOpen(item)
|
||||
}
|
||||
/** Delete prompt */
|
||||
const handleDelete = (item: HistoryItem, e?: MouseEvent) => {
|
||||
e?.preventDefault();
|
||||
e?.stopPropagation();
|
||||
modal.confirm({
|
||||
title: t('common.confirmDeleteDesc', { name: item.title }),
|
||||
okText: t('common.delete'),
|
||||
cancelText: t('common.cancel'),
|
||||
okType: 'danger',
|
||||
onOk: () => {
|
||||
deletePrompt(item.id).then(() => {
|
||||
message.success(t('common.deleteSuccess'))
|
||||
scrollListRef.current?.refresh()
|
||||
detailRef.current?.handleClose()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
/** Edit prompt */
|
||||
const handleEdit = (item: HistoryItem) => {
|
||||
// edit(item)
|
||||
navigate('/prompt', {
|
||||
replace: true,
|
||||
state: { ...item }
|
||||
})
|
||||
}
|
||||
|
||||
const handleClick = (key: string, item: HistoryItem) => {
|
||||
console.log('handleClick key', key)
|
||||
switch(key) {
|
||||
case 'detail':
|
||||
handleView(item)
|
||||
break
|
||||
case 'edit':
|
||||
handleEdit(item)
|
||||
break
|
||||
case 'delete':
|
||||
handleDelete(item)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex justify="space-between" align="center" className="rb:mb-3!">
|
||||
<Header title={t('prompt.history')} desc={t('prompt.historyDesc')} />
|
||||
|
||||
<Form form={form}>
|
||||
<Form.Item name="keyword" noStyle>
|
||||
<SearchInput
|
||||
placeholder={t('prompt.historySearchPlaceholder')}
|
||||
className="rb:w-75"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Flex>
|
||||
<PageScrollList<HistoryItem, HistoryQuery>
|
||||
ref={scrollListRef}
|
||||
url={getPromptReleaseListUrl}
|
||||
query={query}
|
||||
column={3}
|
||||
needLoading={false}
|
||||
renderItem={(item) => (
|
||||
<RbCard
|
||||
className="rb:cursor-pointer rb:relative"
|
||||
title={<Tooltip title={item.title}>{item.title}</Tooltip>}
|
||||
headerClassName='rb:h-[38px]! rb:pt-3!'
|
||||
headerType="borderless"
|
||||
>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{ key: 'detail', label: t('common.viewDetail') },
|
||||
{ key: 'edit', label: t('common.edit') },
|
||||
{ key: 'delete', label: t('common.delete') },
|
||||
],
|
||||
onClick: ({key}) => handleClick(key, item)
|
||||
}}
|
||||
>
|
||||
<DashOutlined className="rb:absolute rb:right-6 rb:top-3.25 rb:hover:bg-[#F6F6F6] rb:p-1 rb:rounded-md" />
|
||||
</Dropdown>
|
||||
<div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4.5 rb:mb-2">{formatDateTime(item.created_at, 'YYYY/MM/DD HH:mm')}</div>
|
||||
<div className="rb:h-35.5 rb:leading-5 rb:overflow-hidden rb:px-3 rb:py-2.5 rb:bg-[#F6F6F6] rb:rounded-lg rb:hover:shadow-[0px_2px_8px_0px_rgba(23,23,25,0.16)]">
|
||||
<Markdown content={item.prompt} className="rb:h-31! rb:overflow-hidden! rb:line-clamp-6! rb:break-word! rb:text-ellipsis!" />
|
||||
</div>
|
||||
</RbCard>
|
||||
)}
|
||||
/>
|
||||
|
||||
<PromptDetail
|
||||
ref={detailRef}
|
||||
handleEdit={handleEdit}
|
||||
handleDelete={handleDelete}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default History;
|
||||
Reference in New Issue
Block a user