Add product AI fill, Enter-to-filter, and URL-persisted product filters.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/pages/AddNewProductPage.tsx

@@ -1,11 +1,15 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Link, useParams, useNavigate } from 'react-router-dom'
+import { Sparkles } from 'lucide-react'
 import { SearchableSelect } from '../components/SearchableSelect'
 import { ImageCropper } from '../components/ImageCropper'
 import { ImageUploader } from '../components/ImageUploader'
 import { TagInput } from '../components/TagInput'
 import { RichTextEditor } from '../components/RichTextEditor'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { ProductFieldAiPromptModal } from '../components/ProductFieldAiPromptModal'
+import { Tooltip } from '../components/Tooltip'
+import { useToast } from '../context/ToastContext'
 import { ApiError } from '../lib/api'
 import { listProductCategories, mapProductCategoryToUi } from '../services/productCategoryService'
 import { listAllBrands, mapBrandToSelectOption } from '../services/brandService'
@@ -19,9 +23,14 @@ import {
   mapProductApiToFormState,
   updateProduct,
 } from '../services/productService'
+import {
+  fillProductFieldByAi,
+  type ProductAiFillField,
+} from '../services/productAiService'
 import type { Category, FlatCategory } from '../types/category'
 import { flattenCategories } from '../utils/categories'
 import pageStyles from '../components/PageContent.module.css'
+import aiStyles from '../styles/ai.module.css'
 import styles from './AddNewProductPage.module.css'
 import { useT } from '../i18n/useT'
 
@@ -29,6 +38,7 @@ export function AddNewProductPage() {
   const { id } = useParams()
   const navigate = useNavigate()
   const t = useT()
+  const { showToast } = useToast()
   const isEdit = Boolean(id)
 
   const [categories, setCategories] = useState<Category[]>([])
@@ -47,8 +57,50 @@ export function AddNewProductPage() {
   const [loaded, setLoaded] = useState(!isEdit)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [error, setError] = useState('')
+  const [aiField, setAiField] = useState<ProductAiFillField | null>(null)
+  const [isAiRunning, setIsAiRunning] = useState(false)
 
   const categoryOptions = flattenCategories(categories)
+  const selectedCategoryName = useMemo(() => {
+    const match = categoryOptions.find((item) => item.id === categoryId)
+    if (!match) return ''
+    return match.nameFa?.trim() || match.nameEn || ''
+  }, [categoryOptions, categoryId])
+
+  const canUseAiFill = Boolean(nameFa.trim() || nameEn.trim()) && !isSubmitting
+
+  function openAiFill(field: ProductAiFillField) {
+    if (!nameFa.trim() && !nameEn.trim()) {
+      setError(t('products.form.aiFillNeedName'))
+      return
+    }
+    setError('')
+    setAiField(field)
+  }
+
+  async function runAiFill(prompt: string) {
+    if (!aiField) return
+    setIsAiRunning(true)
+    try {
+      const result = await fillProductFieldByAi({
+        field: aiField,
+        prompt,
+        title: nameEn.trim() || undefined,
+        nameFa: nameFa.trim() || undefined,
+        categoryId: categoryId || undefined,
+      })
+      if (result.field === 'summary') {
+        setSummary(result.text)
+        showToast(t('products.form.aiSummaryFilled'), 'success')
+      } else {
+        setDescription(result.html)
+        showToast(t('products.form.aiDescriptionFilled'), 'success')
+      }
+      setAiField(null)
+    } finally {
+      setIsAiRunning(false)
+    }
+  }
 
   useEffect(() => {
     const controller = new AbortController()
@@ -264,27 +316,57 @@ export function AddNewProductPage() {
 
               <div className={`${styles.field} ${styles.fieldFull} ${styles.summaryField}`}>
                 <label htmlFor="summary">{t('products.form.summary')}</label>
-                <textarea
-                  id="summary"
-                  name="summary"
-                  rows={4}
-                  placeholder={t('products.form.summaryPlaceholder')}
-                  value={summary}
-                  onChange={(e) => setSummary(e.target.value)}
-                  required
-                  disabled={isSubmitting}
-                />
+                <div className={styles.fieldWithAi}>
+                  <textarea
+                    id="summary"
+                    name="summary"
+                    rows={4}
+                    placeholder={t('products.form.summaryPlaceholder')}
+                    value={summary}
+                    onChange={(e) => setSummary(e.target.value)}
+                    required
+                    disabled={isSubmitting}
+                  />
+                  <span className={styles.aiFillAnchor}>
+                    <Tooltip label={t('products.form.aiFill')}>
+                      <button
+                        type="button"
+                        className={`${aiStyles.aiBtn} ${styles.aiFillBtn}`}
+                        onClick={() => openAiFill('summary')}
+                        disabled={!canUseAiFill || isAiRunning}
+                        aria-label={t('products.form.aiFill')}
+                      >
+                        <Sparkles size={14} />
+                      </button>
+                    </Tooltip>
+                  </span>
+                </div>
               </div>
             </div>
           </div>
 
           <div className={`${styles.field} ${styles.col12}`}>
             <label>{t('products.form.description')}</label>
-            <RichTextEditor
-              value={description}
-              onChange={setDescription}
-              placeholder={t('products.form.descriptionPlaceholder')}
-            />
+            <div className={styles.fieldWithAi}>
+              <RichTextEditor
+                value={description}
+                onChange={setDescription}
+                placeholder={t('products.form.descriptionPlaceholder')}
+              />
+              <span className={styles.aiFillAnchor}>
+                <Tooltip label={t('products.form.aiFill')}>
+                  <button
+                    type="button"
+                    className={`${aiStyles.aiBtn} ${styles.aiFillBtn}`}
+                    onClick={() => openAiFill('description')}
+                    disabled={!canUseAiFill || isAiRunning}
+                    aria-label={t('products.form.aiFill')}
+                  >
+                    <Sparkles size={14} />
+                  </button>
+                </Tooltip>
+              </span>
+            </div>
           </div>
 
           <div className={`${styles.field} ${styles.col12}`}>
@@ -315,6 +397,19 @@ export function AddNewProductPage() {
           </button>
         </div>
       </form>
+
+      <ProductFieldAiPromptModal
+        open={aiField !== null}
+        field={aiField ?? 'summary'}
+        nameFa={nameFa}
+        nameEn={nameEn}
+        categoryName={selectedCategoryName}
+        isRunning={isAiRunning}
+        onClose={() => {
+          if (!isAiRunning) setAiField(null)
+        }}
+        onRun={runAiFill}
+      />
     </main>
   )
 }