Add AI fill for product technical data and localize the modal.
Users can fill technical fields from a prefilled prompt, and FA locale shows Persian titles and actions; SEO modal no longer shows a search icon. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
06e2442aaf
commit
32f0dbab63
@@ -0,0 +1,211 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { Sparkles, X } from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import { useT } from '../i18n/useT'
|
||||
import type { CategoryTechnicalForm } from '../types/technicalForm'
|
||||
import modalStyles from './CategoryModal.module.css'
|
||||
import aiStyles from '../styles/ai.module.css'
|
||||
import styles from './CategoryAiPromptModal.module.css'
|
||||
|
||||
export function buildProductTechnicalValuesAiPrompt(ctx: {
|
||||
productName: string
|
||||
fields: CategoryTechnicalForm['fields']
|
||||
locale: 'fa' | 'en'
|
||||
}) {
|
||||
const productName = ctx.productName || '—'
|
||||
const fieldLines = ctx.fields
|
||||
.map((field) => {
|
||||
const options =
|
||||
field.type === 'select' || field.type === 'multi_select'
|
||||
? field.options.map((option) => option.value).join(' | ')
|
||||
: ''
|
||||
const optionPart = options ? ` — options: ${options}` : ''
|
||||
return `- ${field.key} (${field.label}, ${field.type}${field.isRequired ? ', required' : ''})${optionPart}`
|
||||
})
|
||||
.join('\n')
|
||||
|
||||
if (ctx.locale === 'fa') {
|
||||
return `برای محصول زیر، مقادیر فرم اطلاعات فنی را پر کن.
|
||||
|
||||
محصول: ${productName}
|
||||
|
||||
فیلدهای فرم:
|
||||
${fieldLines || '—'}
|
||||
|
||||
الزامات:
|
||||
- فقط برای همین فیلدها مقدار بده و از کلیدهای دقیق فیلد استفاده کن.
|
||||
- برای select / multi_select فقط از مقادیر مجاز گزینه‌ها استفاده کن.
|
||||
- متن‌ها را به فارسی و کوتاه و فنی بنویس.
|
||||
- مشخصات غیرواقعی اختراع نکن؛ اگر مطمئن نیستی آن فیلد را خالی بگذار.
|
||||
- در صورت نیاز، مرجع یا لینک صفحه محصول / مدل را در ادامه همین پرامپت اضافه کن.`
|
||||
}
|
||||
|
||||
return `Fill the technical data form values for this product.
|
||||
|
||||
Product: ${productName}
|
||||
|
||||
Form fields:
|
||||
${fieldLines || '—'}
|
||||
|
||||
Requirements:
|
||||
- Fill only these fields using the exact field keys.
|
||||
- For select / multi_select use only allowed option values.
|
||||
- Keep text values short, factual, and in the same language as the field labels (usually Persian).
|
||||
- Do not invent unrealistic specs; leave a field empty if unsure.
|
||||
- Optionally add a product page URL / model reference below this prompt.`
|
||||
}
|
||||
|
||||
interface ProductTechnicalValuesAiPromptModalProps {
|
||||
open: boolean
|
||||
productName: string
|
||||
fields: CategoryTechnicalForm['fields']
|
||||
isRunning: boolean
|
||||
onClose: () => void
|
||||
onRun: (prompt: string) => Promise<void>
|
||||
}
|
||||
|
||||
const ANIMATION_MS = 220
|
||||
|
||||
export function ProductTechnicalValuesAiPromptModal({
|
||||
open,
|
||||
productName,
|
||||
fields,
|
||||
isRunning,
|
||||
onClose,
|
||||
onRun,
|
||||
}: ProductTechnicalValuesAiPromptModalProps) {
|
||||
const t = useT()
|
||||
const { locale } = useLocale()
|
||||
const isFa = locale === 'fa'
|
||||
const [mounted, setMounted] = useState(open)
|
||||
const [closing, setClosing] = useState(false)
|
||||
const [prompt, setPrompt] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setMounted(true)
|
||||
setClosing(false)
|
||||
setPrompt(
|
||||
buildProductTechnicalValuesAiPrompt({
|
||||
productName,
|
||||
fields,
|
||||
locale: isFa ? 'fa' : 'en',
|
||||
}),
|
||||
)
|
||||
setError('')
|
||||
} else if (mounted) {
|
||||
setClosing(true)
|
||||
const timer = setTimeout(() => {
|
||||
setMounted(false)
|
||||
setClosing(false)
|
||||
}, ANIMATION_MS)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [open, mounted, productName, fields, isFa])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted || closing) return
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && !isRunning) onClose()
|
||||
}
|
||||
document.addEventListener('keydown', onKey)
|
||||
return () => document.removeEventListener('keydown', onKey)
|
||||
}, [mounted, closing, isRunning, onClose])
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
const trimmed = prompt.trim()
|
||||
if (trimmed.length < 10) {
|
||||
setError(t('products.form.aiPromptTooShort'))
|
||||
return
|
||||
}
|
||||
setError('')
|
||||
try {
|
||||
await onRun(trimmed)
|
||||
} catch (err) {
|
||||
if (err instanceof Error) {
|
||||
setError(err.message)
|
||||
} else {
|
||||
setError(t('products.technical.ai.error'))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!mounted) return null
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className={`${modalStyles.overlay} ${modalStyles.overlayStacked} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
|
||||
onClick={(e) => e.target === e.currentTarget && !isRunning && onClose()}
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
className={`${modalStyles.modal} ${styles.modal} ${closing ? modalStyles.modalOut : modalStyles.modalIn}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="product-technical-ai-prompt-title"
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
>
|
||||
<div className={`${modalStyles.header} ${styles.header}`}>
|
||||
<div className={styles.headerBlock}>
|
||||
<h2 id="product-technical-ai-prompt-title" className={modalStyles.title}>
|
||||
{t('products.technical.ai.title')}
|
||||
</h2>
|
||||
<p className={styles.subtitle}>{t('products.technical.ai.subtitle')}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={modalStyles.closeBtn}
|
||||
onClick={onClose}
|
||||
disabled={isRunning}
|
||||
aria-label={t('common.close')}
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form className={modalStyles.form} onSubmit={(e) => void handleSubmit(e)}>
|
||||
<div className={`${modalStyles.field} ${aiStyles.aiPromptField}`}>
|
||||
<label htmlFor="product-technical-ai-prompt">{t('products.form.aiPrompt')}</label>
|
||||
<textarea
|
||||
id="product-technical-ai-prompt"
|
||||
className={aiStyles.aiPromptTextarea}
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
rows={14}
|
||||
disabled={isRunning}
|
||||
required
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error ? <p className={styles.error}>{error}</p> : null}
|
||||
|
||||
<div className={modalStyles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
className={modalStyles.cancelBtn}
|
||||
onClick={onClose}
|
||||
disabled={isRunning}
|
||||
>
|
||||
{t('products.form.cancel')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={aiStyles.aiBtn}
|
||||
disabled={isRunning || prompt.trim().length < 10}
|
||||
>
|
||||
<Sparkles size={16} />
|
||||
{isRunning ? t('products.form.aiGenerating') : t('products.form.aiRun')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user