311 lines
11 KiB
TypeScript
311 lines
11 KiB
TypeScript
/*
|
|
* @Author: ZhaoYing
|
|
* @Date: 2026-02-03 16:26:44
|
|
* @Last Modified by: ZhaoYing
|
|
* @Last Modified time: 2026-03-20 13:53:05
|
|
*/
|
|
/**
|
|
* AI Prompt Assistant Modal
|
|
* Provides an interactive chat interface to help users optimize their prompts using AI
|
|
* Features model selection, chat history, and variable insertion
|
|
*/
|
|
|
|
import { forwardRef, useImperativeHandle, useState, useRef } 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 { updatePromptMessages, createPromptSessions } from '@/api/prompt'
|
|
import type { AiPromptModalRef, AiPromptVariableModalRef, AiPromptForm } from '../types'
|
|
import RbModal from '@/components/RbModal'
|
|
import type { ModelListItem } from '@/views/ModelManagement/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 ModelSelect from '@/components/ModelSelect'
|
|
import AiPromptVariableModal from './AiPromptVariableModal'
|
|
import { type SSEMessage } from '@/utils/stream'
|
|
import Editor from './Editor'
|
|
import analysisEmptyIcon from '@/assets/images/conversation/analysisEmpty.png'
|
|
|
|
/**
|
|
* Component props
|
|
*/
|
|
interface AiPromptModalProps {
|
|
/** Callback to refresh prompt with optimized value */
|
|
refresh: (value: string) => void;
|
|
/** Default model to pre-select */
|
|
defaultModel?: ModelListItem | null;
|
|
source?: 'application' | 'skills'
|
|
}
|
|
|
|
/**
|
|
* AI Prompt Assistant Modal Component
|
|
* Helps users create and optimize prompts through AI-powered conversation
|
|
*/
|
|
const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
|
|
refresh,
|
|
defaultModel,
|
|
source = 'application'
|
|
}, ref) => {
|
|
const { t } = useTranslation();
|
|
const { message } = App.useApp()
|
|
const [visible, setVisible] = useState(false);
|
|
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<AiPromptVariableModalRef>(null)
|
|
const editorRef = useRef<any>(null)
|
|
const currentPromptValueRef = useRef<string>('')
|
|
|
|
const values = Form.useWatch([], form)
|
|
|
|
/** Close modal and reset state */
|
|
const handleClose = () => {
|
|
setVisible(false);
|
|
setLoading(false)
|
|
setChatList([])
|
|
setVariables([])
|
|
form.setFieldsValue({
|
|
message: undefined,
|
|
current_prompt: undefined,
|
|
})
|
|
};
|
|
|
|
/** Open modal and create new prompt session */
|
|
const handleOpen = () => {
|
|
createPromptSessions()
|
|
.then(res => {
|
|
const response = res as { id: string }
|
|
setPromptSession(response.id)
|
|
|
|
if (!values.model_id && defaultModel?.id) {
|
|
form.setFieldValue('model_id', defaultModel?.id)
|
|
}
|
|
setVisible(true);
|
|
})
|
|
};
|
|
/** Send user message and get AI response */
|
|
const handleSend = () => {
|
|
if (!promptSession || loading || !values.message || values.message.trim() == '') return
|
|
if (!values.model_id) {
|
|
message.warning(t('common.selectPlaceholder', { title: t(`${source}.model`) }))
|
|
return
|
|
}
|
|
if (!values.message) {
|
|
message.warning(t(`${source}.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 (content) {
|
|
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 value when stream ends
|
|
form.setFieldsValue({ current_prompt: currentPromptValueRef.current })
|
|
break
|
|
}
|
|
})
|
|
};
|
|
updatePromptMessages(promptSession, {
|
|
...values,
|
|
skill: source === 'skills'
|
|
}, handleStreamMessage)
|
|
.finally(() => {
|
|
setLoading(false)
|
|
})
|
|
}
|
|
/** Copy current 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 selection modal */
|
|
const handleAdd = () => {
|
|
aiPromptVariableModalRef.current?.handleOpen()
|
|
}
|
|
/** Insert variable into prompt editor */
|
|
const handleVariableApply = (value: string) => {
|
|
if (editorRef.current?.insertText) {
|
|
editorRef.current.insertText(value)
|
|
} else {
|
|
form.setFieldValue('current_prompt', (values.current_prompt || '') + value)
|
|
}
|
|
}
|
|
/** Apply optimized prompt and close modal */
|
|
const handleApply = () => {
|
|
if (!values.current_prompt) {
|
|
return
|
|
}
|
|
refresh(values.current_prompt)
|
|
handleClose()
|
|
}
|
|
|
|
/** Expose methods to parent component */
|
|
useImperativeHandle(ref, () => ({
|
|
handleOpen,
|
|
}));
|
|
const [isFocus, setIsFocus] = useState(false)
|
|
const handleFocus = () => {
|
|
setIsFocus(true)
|
|
}
|
|
const handleBlur = () => {
|
|
setIsFocus(false)
|
|
}
|
|
|
|
console.log(values)
|
|
return (
|
|
<RbModal
|
|
title={t(`${source}.AIPromptAssistant`)}
|
|
open={visible}
|
|
onCancel={handleClose}
|
|
footer={null}
|
|
width={1000}
|
|
classNames={{
|
|
content: 'rb:p-0!',
|
|
header: 'rb:p-6! rb:mb-0!',
|
|
body: 'rb:p-0! rb:border-t rb:border-t-[#EBEBEB]'
|
|
}}
|
|
>
|
|
<Form form={form} className="rb:mx-4!">
|
|
<div className="rb:grid rb:grid-cols-2">
|
|
<div className="rb:border-r rb:border-r-[#EBEBEB] rb:pr-4 rb:pt-3 rb:pb-4">
|
|
<Form.Item
|
|
name="model_id"
|
|
rules={[{ required: true, message: t('common.pleaseSelect') }]}
|
|
>
|
|
<ModelSelect
|
|
params={{ type: 'llm,chat' }}
|
|
className="rb:w-full!"
|
|
/>
|
|
</Form.Item>
|
|
|
|
<ChatContent
|
|
classNames="rb:h-105.5 rb:pb-[15px]!"
|
|
contentClassNames="rb:max-w-75!"
|
|
empty={<Empty url={ConversationEmptyIcon} title={t(`${source}.promptChatEmpty`)} isNeedSubTitle={false} size={[140, 100]} className="rb:h-full" />}
|
|
data={chatList || []}
|
|
streamLoading={false}
|
|
labelPosition="top"
|
|
labelFormat={(item) => item.role === 'user' ? t(`${source}.you`) : t(`${source}.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(`${source}.promptChatPlaceholder`)}
|
|
onPressEnter={handleSend}
|
|
variant="borderless"
|
|
className="rb:p-0!"
|
|
onFocus={handleFocus}
|
|
onBlur={handleBlur}
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Flex align="center" justify="center"
|
|
className={clsx('rb:size-7 rb:rounded-full rb:shadow-[0px 2px 12px 0px rgba(23,23,25,0.1)]', {
|
|
'rb:cursor-not-allowed rb:bg-[#F6F6F6]': loading || !values || !values?.message || values?.message?.trim() === '',
|
|
'rb:cursor-pointer rb:bg-[#171719]': !loading && !(!values || !values?.message || values?.message?.trim() === '')
|
|
})}
|
|
onClick={handleSend}
|
|
>
|
|
<div className={clsx("rb:size-4 rb:bg-cover", {
|
|
"rb:bg-[url('@/assets/images/conversation/loading.svg')]": loading,
|
|
"rb:bg-[url('@/assets/images/conversation/sendDisabled.svg')]": !loading && (!values || !values?.message || values?.message?.trim() === ''),
|
|
"rb:bg-[url('@/assets/images/conversation/send.svg')]": !loading && !(!values || !values?.message || values?.message?.trim() === '')
|
|
})}></div>
|
|
</Flex>
|
|
</Flex>
|
|
</div>
|
|
|
|
<div className="rb:pl-4 rb:pt-3.5 rb:pb-4">
|
|
<Flex justify="space-between" className="rb:mb-3!">
|
|
<div>
|
|
{t(`${source}.conversationOptimizationPrompt`)}
|
|
</div>
|
|
<Space size={8}>
|
|
<Button
|
|
disabled={!values?.current_prompt}
|
|
icon={<div className="rb:size-3.5 rb:bg-cover rb:bg-[url('@/assets/images/application/copy.svg')]"></div>}
|
|
onClick={handleCopy}>{t('common.copy')}</Button>
|
|
<Button
|
|
disabled={!values?.current_prompt}
|
|
icon={<div className="rb:size-3.5 rb:bg-cover rb:bg-[url('@/assets/images/application/save.svg')]"></div>}
|
|
onClick={handleApply}
|
|
>{t(`${source}.apply`)}</Button>
|
|
{source === 'application' &&
|
|
<Button
|
|
disabled={!values?.current_prompt}
|
|
icon={<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/plus_dark.svg')]"></div>}
|
|
onClick={handleAdd}
|
|
></Button>
|
|
}
|
|
</Space>
|
|
</Flex>
|
|
|
|
<Form.Item name="current_prompt" noStyle>
|
|
{values?.current_prompt
|
|
? <Editor
|
|
ref={editorRef}
|
|
className="rb:h-119 rb:bg-white! rb:border-none! rb:p-0!"
|
|
onChange={(value) => form.setFieldValue('current_prompt', value)}
|
|
/>
|
|
: <Empty url={analysisEmptyIcon} title={t(`${source}.promptOptimizationEmpty`)} 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>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
|
|
<AiPromptVariableModal
|
|
ref={aiPromptVariableModalRef}
|
|
variables={variables}
|
|
refresh={handleVariableApply}
|
|
/>
|
|
</RbModal>
|
|
);
|
|
});
|
|
|
|
export default AiPromptModal; |