+ {/* Toast Notification */}
+ {toastMessage && (
+
+
+ {toastMessage}
+
+ )}
+
+ {/* Header Banner */}
+
+
+
+
+
+
+
+
+
+
+ User LLM Prompts & Directives
+
+
+ {prompts.length} Prompts (PostgreSQL)
+
+
+
+ คลังเก็บและจัดการ System Prompts สำหรับ AI/LLM บันทึกตรงลง Database สำหรับสร้างและเชื่อมโยงข้อมูลกับระบบ e-Commerce
+
+
+
+
+
+ {/* Top Actions */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Search & Category Filter Navigation */}
+
+ {/* Search Bar */}
+
+
+ setSearchQuery(e.target.value)}
+ placeholder="ค้นหาตามชื่อ Prompt, ข้อความคำสั่ง, หมวดหมู่ หรือแท็ก..."
+ className="w-full bg-night-800/90 border border-white/10 rounded-xl pl-12 pr-10 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/50 shadow-inner"
+ />
+ {searchQuery && (
+
+ )}
+
+
+ {/* Categories Tab Navigation */}
+
+ {CATEGORIES.map(cat => {
+ const Icon = cat.icon
+ const isActive = selectedCategory === cat.key
+ const count = cat.key === 'all'
+ ? prompts.length
+ : prompts.filter(p => p.category === cat.key).length
+
+ return (
+
+ )
+ })}
+
+
+ {/* Tag Filters (if any) */}
+ {allTags.length > 0 && (
+
+
+ แท็ก:
+
+ {selectedTag && (
+
+ )}
+ {allTags.map(tag => (
+
+ ))}
+
+ )}
+
+
+ {/* Loading state */}
+ {loading ? (
+
+
+
กำลังโหลด Prompts จากฐานข้อมูล...
+
+ ) : filteredPrompts.length === 0 ? (
+
+
+
+
+
ไม่พบ Prompt ที่ตรงกับเงื่อนไข
+
+ ลองปรับเปลี่ยนคำค้นหา หรือเลือกหมวดหมู่อื่น หรือกดปุ่ม "สร้าง Prompt ใหม่" ด้านบน
+
+ {(searchQuery || selectedCategory !== 'all' || selectedTag) && (
+
+ )}
+
+ ) : (
+
+ {filteredPrompts.map((item) => {
+ const lines = item.content.split('\n').length
+ const chars = item.content.length
+
+ return (
+
+ {/* Top Section */}
+
+
+
+ {item.category}
+
+ {item.isSystem ? (
+
+ System Built-in
+
+ ) : (
+
+ User Saved (DB)
+
+ )}
+
+
+
+
+ {item.title}
+
+
+ {item.description || 'ไม่มีคำอธิบาย'}
+
+
+
+ {/* Tags */}
+ {Array.isArray(item.tags) && item.tags.length > 0 && (
+
+ {item.tags.map(tag => (
+ setSelectedTag(tag)}
+ className="text-[10px] px-1.5 py-0.5 rounded bg-white/5 text-slate-400 hover:text-white cursor-pointer"
+ >
+ #{tag}
+
+ ))}
+
+ )}
+
+ {/* Content Preview Box */}
+
setViewingPrompt(item)}
+ className="p-3 bg-night-950/80 border border-white/5 rounded-xl cursor-pointer hover:border-cyan-500/20 transition-colors relative group/preview"
+ >
+
+ {item.content}
+
+
+
+ คลิกเพื่อดูเต็มจอ
+
+
+
+
+ {/* Stats */}
+
+ {lines} บรรทัด • {chars.toLocaleString()} ตัวอักษร
+ {new Date(item.updatedAt).toLocaleDateString()}
+
+
+
+ {/* Bottom Actions */}
+
+ {/* Copy Button (Primary) */}
+
+
+ {/* Secondary Actions */}
+
+
+
+ {!item.isSystem && (
+
+ )}
+
+
+
+ )
+ })}
+
+ )}
+
+ {/* ── View Modal (Inspect Prompt) ─────────────────────────────────── */}
+ {viewingPrompt && (
+
+
+
+
+
+ {viewingPrompt.category}
+
+
{viewingPrompt.title}
+
+
+
+
+
+
+
+
+ {viewingPrompt.description && (
+
+ 💡 {viewingPrompt.description}
+
+ )}
+
+
+ {viewingPrompt.content}
+
+
+
+
+
+ {viewingPrompt.content.length.toLocaleString()} ตัวอักษร • {viewingPrompt.content.split('\n').length} บรรทัด
+
+
+
+
+ )}
+
+ {/* ── Create / Edit Modal ────────────────────────────────────────── */}
+ {isModalOpen && (
+
+
+ {/* Modal Header */}
+
+
+
+ {editingPrompt ? 'แก้ไข Prompt ใน Database' : 'สร้าง Prompt ใหม่ลง Database'}
+
+
+
+
+ {/* Modal Form */}
+
+
+
+ setModalTitle(e.target.value)}
+ placeholder="เช่น Mega Menu Generator สำหรับเทศกาลปีใหม่"
+ className="w-full bg-night-950 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500"
+ />
+
+
+
+
+
+
+
+
+
+
+ setModalTags(e.target.value)}
+ placeholder="เช่น Menu, JSON, Luxury, Spring"
+ className="w-full bg-night-950 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500"
+ />
+
+
+
+
+
+ setModalDescription(e.target.value)}
+ placeholder="อธิบายสั้นๆ เกี่ยวกับวัตถุประสงค์ของ Prompt นี้"
+ className="w-full bg-night-950 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500"
+ />
+
+
+
+
+
+
+ {modalContent.length.toLocaleString()} chars • {modalContent.split('\n').length} lines
+
+
+