Add product AI fill, Enter-to-filter, and URL-persisted product filters.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
ad83fc1099
commit
4d480799b0
@@ -21,6 +21,9 @@
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 8px 12px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.filtersInputs {
|
||||
|
||||
@@ -0,0 +1,273 @@
|
||||
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 { ProductAiFillField } from '../services/productAiService'
|
||||
import modalStyles from './CategoryModal.module.css'
|
||||
import aiStyles from '../styles/ai.module.css'
|
||||
import styles from './CategoryAiPromptModal.module.css'
|
||||
|
||||
export function buildProductSummaryAiPrompt(ctx: {
|
||||
nameFa: string
|
||||
nameEn: string
|
||||
categoryName: string
|
||||
locale: 'fa' | 'en'
|
||||
}) {
|
||||
const nameFa = ctx.nameFa || '—'
|
||||
const nameEn = ctx.nameEn || '—'
|
||||
const category = ctx.categoryName || '—'
|
||||
|
||||
if (ctx.locale === 'fa') {
|
||||
return `یک خلاصه کوتاه و فنی برای کارت محصول بنویس (۱ تا ۳ جمله).
|
||||
|
||||
نام محصول (فارسی): ${nameFa}
|
||||
نام محصول (انگلیسی): ${nameEn}
|
||||
دسته‌بندی: ${category}
|
||||
|
||||
الزامات:
|
||||
- اول بگو این محصول چیست (نوع / ماهیت کالا).
|
||||
- بعد توضیح بده چرا از نظر ترکیب، کاربرد یا ویژگی فنی خوب است.
|
||||
- لحن اطلاعاتی و تخصصی باشد، نه تبلیغاتی.
|
||||
- از عبارات فروش مثل «انتخاب عالی»، «تجربه فوق‌العاده»، «با قیمت مناسب بخرید»، «از ما خریداری کنید» استفاده نکن.
|
||||
- مشخصات یا ادعاهایی که مطمئن نیستی اختراع نکن.
|
||||
- خلاصه را به فارسی بنویس.`
|
||||
}
|
||||
|
||||
return `Write a short, technical product listing summary (1–3 sentences).
|
||||
|
||||
Product name (FA): ${nameFa}
|
||||
Product name (EN): ${nameEn}
|
||||
Category: ${category}
|
||||
|
||||
Requirements:
|
||||
- First say what the product is (type / nature of the item).
|
||||
- Then explain why it is good in terms of composition, use, or technical traits.
|
||||
- Keep an informative, specialist tone — not advertising.
|
||||
- Avoid sales phrases like "excellent choice", "amazing experience", "buy now", "great price from us".
|
||||
- Do not invent specs or claims you are unsure about.
|
||||
- Write the summary in Persian (Farsi).`
|
||||
}
|
||||
|
||||
export function buildProductDescriptionAiPrompt(ctx: {
|
||||
nameFa: string
|
||||
nameEn: string
|
||||
categoryName: string
|
||||
locale: 'fa' | 'en'
|
||||
}) {
|
||||
const nameFa = ctx.nameFa || '—'
|
||||
const nameEn = ctx.nameEn || '—'
|
||||
const category = ctx.categoryName || '—'
|
||||
|
||||
if (ctx.locale === 'fa') {
|
||||
return `یک توضیحات فنی محصول به صورت HTML بنویس.
|
||||
|
||||
نام محصول (فارسی): ${nameFa}
|
||||
نام محصول (انگلیسی): ${nameEn}
|
||||
دسته‌بندی: ${category}
|
||||
|
||||
ساختار پیشنهادی:
|
||||
1) این محصول چیست؟
|
||||
2) ترکیب / مواد / ویژگی‌های فنی مهم
|
||||
3) کاربرد و اینکه چرا برای آن کاربرد مناسب است
|
||||
4) در صورت نیاز، فهرست نقطه‌ای نکات کلیدی
|
||||
|
||||
الزامات:
|
||||
- لحن اطلاعاتی و تخصصی؛ نه شعار تبلیغاتی.
|
||||
- از دعوت به خرید، تخفیف، «بهترین انتخاب»، و جملات بازاریابی مبهم پرهیز کن.
|
||||
- مشخصات ساختگی ننویس؛ اگر جزئیات دقیق نداری، روی تعریف محصول و کاربردهای معمول تمرکز کن.
|
||||
- ۲ تا ۴ پاراگراف کوتاه به فارسی.
|
||||
- فقط HTML با تگ‌های <p>، <ul>، <li>، <strong> و <em> برگردان.`
|
||||
}
|
||||
|
||||
return `Write a technical product description as HTML.
|
||||
|
||||
Product name (FA): ${nameFa}
|
||||
Product name (EN): ${nameEn}
|
||||
Category: ${category}
|
||||
|
||||
Suggested structure:
|
||||
1) What is this product?
|
||||
2) Composition / materials / important technical traits
|
||||
3) Use cases and why it fits those uses
|
||||
4) Optional bullet list of key points
|
||||
|
||||
Requirements:
|
||||
- Informative, specialist tone — not advertising slogans.
|
||||
- Avoid CTAs, discounts, "best choice", and vague marketing claims.
|
||||
- Do not invent specs; if details are unknown, focus on what the product is and typical uses.
|
||||
- 2–4 short paragraphs in Persian (Farsi).
|
||||
- Return HTML only using <p>, <ul>, <li>, <strong>, and <em>.`
|
||||
}
|
||||
|
||||
interface ProductFieldAiPromptModalProps {
|
||||
open: boolean
|
||||
field: ProductAiFillField
|
||||
nameFa: string
|
||||
nameEn: string
|
||||
categoryName: string
|
||||
isRunning: boolean
|
||||
onClose: () => void
|
||||
onRun: (prompt: string) => Promise<void>
|
||||
}
|
||||
|
||||
const ANIMATION_MS = 220
|
||||
|
||||
export function ProductFieldAiPromptModal({
|
||||
open,
|
||||
field,
|
||||
nameFa,
|
||||
nameEn,
|
||||
categoryName,
|
||||
isRunning,
|
||||
onClose,
|
||||
onRun,
|
||||
}: ProductFieldAiPromptModalProps) {
|
||||
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)
|
||||
const localeKey = isFa ? 'fa' : 'en'
|
||||
setPrompt(
|
||||
field === 'summary'
|
||||
? buildProductSummaryAiPrompt({
|
||||
nameFa,
|
||||
nameEn,
|
||||
categoryName,
|
||||
locale: localeKey,
|
||||
})
|
||||
: buildProductDescriptionAiPrompt({
|
||||
nameFa,
|
||||
nameEn,
|
||||
categoryName,
|
||||
locale: localeKey,
|
||||
}),
|
||||
)
|
||||
setError('')
|
||||
} else if (mounted) {
|
||||
setClosing(true)
|
||||
const timer = setTimeout(() => {
|
||||
setMounted(false)
|
||||
setClosing(false)
|
||||
}, ANIMATION_MS)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [open, mounted, field, nameFa, nameEn, categoryName, 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.form.aiFillError'))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!mounted) return null
|
||||
|
||||
const title =
|
||||
field === 'summary'
|
||||
? t('products.form.aiFillSummaryTitle')
|
||||
: t('products.form.aiFillDescriptionTitle')
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className={`${modalStyles.overlay} ${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-field-ai-prompt-title"
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
>
|
||||
<div className={`${modalStyles.header} ${styles.header}`}>
|
||||
<div className={styles.headerBlock}>
|
||||
<h2 id="product-field-ai-prompt-title" className={modalStyles.title}>
|
||||
{title}
|
||||
</h2>
|
||||
<p className={styles.subtitle}>{t('products.form.aiFillSubtitle')}</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-field-ai-prompt">{t('products.form.aiPrompt')}</label>
|
||||
<textarea
|
||||
id="product-field-ai-prompt"
|
||||
className={aiStyles.aiPromptTextarea}
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
rows={10}
|
||||
disabled={isRunning}
|
||||
required
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
|
||||
<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