feat(idea): create group auto-generates personas; channel removed; product->product/idea

Per product-idea focus: - GroupBuilder: 'สินค้า/บริการ/ไอเดีย' label; removed the channel select (channel is now chosen at chat time as a scenario, not at persona create). Create now auto-runs analyze so personas are generated immediately (no separate Analyze button). - GroupEdit: analyze button becomes 'สร้างบุคคลต้นแบบเพิ่มเติม' which APPENDS more personas (backend analyze?append=true reuses sales kit + keeps existing instead of replacing). - i18n product label updated. - User-journey test asserts append adds personas (15->30) and existing kept. All 9 backend suites pass. Rebuilt dist.
2026-08-09 10:12:40 +07:00
parent 675cc5c73f
commit 0b92430aab
33 changed files with 119 additions and 93 deletions
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -43,7 +43,7 @@ export const api = {
  createGroup: (formData) => request('POST', '/api/groups', formData, true),
  listGroups: () => request('GET', '/api/groups'),
  getGroup: (id) => request('GET', `/api/groups/${id}`),
-  analyzeGroup: (id) => request('POST', `/api/groups/${id}/analyze`),
+  analyzeGroup: (id, opts = {}) => request('POST', `/api/groups/${id}/analyze${opts.append ? '?append=true' : ''}`),
  listPersonas: (gid) => request('GET', `/api/groups/${gid}/personas`),
  getPersona: (gid, pid) => request('GET', `/api/groups/${gid}/personas/${pid}`),
  updatePersona: (gid, pid, b) => request('PUT', `/api/groups/${gid}/personas/${pid}`, b),
--- a/frontend/src/i18n/index.js
+++ b/frontend/src/i18n/index.js
@@ -139,7 +139,7 @@ const messages = {
    analyze: 'วิเคราะห์',
    manual: 'ระบุเอง',
    edit: 'แก้ไข',
-    product: 'สินค้า/บริการ',
+    product: 'สินค้า/บริการ/ไอเดีย',
    segment: 'กลุ่มลูกค้าเป้าหมายเบื้องต้น (ไม่บังคับ)',
    description: 'คำอธิบายหรือรายละเอียดเพิ่มเติม (ไม่บังคับ)',
    channel: 'ช่องทางติดต่อ',
--- a/frontend/src/views/GroupBuilder.vue
+++ b/frontend/src/views/GroupBuilder.vue
@@ -6,46 +6,36 @@
    <div class="card guide">
      <strong><ListChecks :size="18" :stroke-width="1.8" style="vertical-align:-3px" /> วิธีสร้างกลุ่มบุคคลต้นแบบ</strong>
      <ol style="margin:8px 0 0;padding-left:20px;line-height:1.8">
-        <li>กรอก <strong>ชื่อ/รายละเอียดสินค้าหรือบริการ</strong> ที่อยากให้ทีมฝึกขาย (ช่องด้านล่าง)</li>
-        <li>(ไม่บังคับ) ระบุกลุ่มลูกค้าเป้าหมาย หรืออัปโหลดไฟล์เอกสารสินค้า .pdf/.md/.txt</li>
-        <li>กด <strong>สร้าง</strong> — ระบบจะพาไปหน้าสร้างบุคคลต้นแบบ (ลูกค้าจำลอง)</li>
+        <li>กรอก <strong>สินค้า / บริการ / ไอเดีย</strong> ที่อยากให้ทีมฝึกนำเสนอ (ช่องด้านล่าง)</li>
+        <li>(ไม่บังคับ) ระบุกลุ่มเป้าหมาย หรืออัปโหลดไฟล์เอกสาร .pdf/.md/.txt</li>
+        <li>กด <strong>สร้าง</strong> — ระบบจะสร้างบุคคลต้นแบบ (ลูกค้าจำลอง) ให้ทันที</li>
+        <li>ถ้าอยากได้บุคคลต้นแบบเพิ่ม ไปที่หน้านั้นแล้วกด <strong>สร้างบุคคลต้นแบบเพิ่มเติม</strong></li>
      </ol>
    </div>

    <div class="card">
      <h2 style="margin-top:0"><Box :size="22" :stroke-width="1.8" style="vertical-align:-4px" /> {{ i18n.t('addProduct') }}</h2>
      <label>{{ i18n.t('product') }} <span class="req">*</span></label>
-      <textarea v-model="form.product" rows="3" placeholder="เช่น ระบบ POS สำหรับร้านอาหาร Cloud POS for small restaurants"></textarea>
+      <textarea v-model="form.product" rows="3" placeholder="สินค้า / บริการ / ไอเดีย — เช่น ระบบ POS สำหรับร้านอาหาร, บริการให้คำปรึกษา AI, แนวคิดเปิดร้านกาแฟ…"></textarea>

      <label>{{ i18n.t('segment') }}</label>
      <input v-model="form.segment" placeholder="เช่น SMEs ร้านอาหารในกรุงเทพ" />

      <label>{{ i18n.t('description') }}</label>
-      <textarea v-model="form.description" rows="3" placeholder="รายละเอียดเพิ่มเติม เช่น จุดเด่นสินค้า ราคา ฯลฯ (ไม่บังคับ)"></textarea>
+      <textarea v-model="form.description" rows="3" placeholder="รายละเอียดเพิ่มเติม เช่น จุดเด่น ราคา หรือกลุ่มคนที่เราจะนำเสนอ (ไม่บังคับ)"></textarea>

-      <div class="row">
-        <div style="flex:1">
-          <label>{{ i18n.t('channel') }}</label>
-          <select v-model="form.channel">
-            <option value="facebook">{{ i18n.t('facebook') }}</option>
-            <option value="line">{{ i18n.t('line') }}</option>
-          </select>
-        </div>
-        <div style="flex:1">
-          <label>{{ i18n.t('language') }}</label>
-          <select v-model="form.language">
-            <option value="th">{{ i18n.t('thai') }}</option>
-            <option value="en">{{ i18n.t('english') }}</option>
-          </select>
-        </div>
-      </div>
+      <label>{{ i18n.t('language') }}</label>
+      <select v-model="form.language">
+        <option value="th">{{ i18n.t('thai') }}</option>
+        <option value="en">{{ i18n.t('english') }}</option>
+      </select>

-      <label><Paperclip :size="15" :stroke-width="1.8" style="vertical-align:-2px" /> ไฟล์เอกสารสินค้า (.pdf/.md/.txt) — ใช้เป็นข้อมูลให้ระบบได้</label>
+      <label><Paperclip :size="15" :stroke-width="1.8" style="vertical-align:-2px" /> ไฟล์เอกสาร (.pdf/.md/.txt) — ใช้เป็นข้อมูลให้ระบบได้</label>
      <input type="file" multiple accept=".pdf,.md,.txt" @change="onFiles" />

      <div class="error" v-if="error">{{ error }}</div>
      <button class="primary" style="margin-top:16px;display:inline-flex;align-items:center;gap:6px" :disabled="busy || (!form.product && !files.length)" @click="create">
-        <PlusCircle :size="18" :stroke-width="2" /> {{ busy ? 'กำลังสร้าง…' : i18n.t('create') }}
+        <PlusCircle :size="18" :stroke-width="2" /> {{ busy ? 'กำลังสร้างบุคคลต้นแบบ…' : i18n.t('create') }}
      </button>
    </div>
  </div>
@@ -59,7 +49,7 @@ import { api } from '../api'
 import { i18n } from '../i18n'

 const router = useRouter()
-const form = ref({ product: '', segment: '', description: '', channel: 'facebook', language: 'th' })
+const form = ref({ product: '', segment: '', description: '', language: 'th' })
 const files = ref([])
 const error = ref('')
 const busy = ref(false)
@@ -75,11 +65,20 @@ async function create() {
    fd.append('product', form.value.product)
    fd.append('segment', form.value.segment)
    fd.append('description', form.value.description)
-    fd.append('channel', form.value.channel)
    fd.append('language', form.value.language)
    files.value.forEach((f) => fd.append('files', f))
    const data = await api.createGroup(fd)
    const gid = data.group.id
+    // Auto-generate personas right away (no separate Analyze button needed).
+    try {
+      await api.analyzeGroup(gid)
+    } catch (analyzeErr) {
+      // Even if analyze fails (e.g. LLM key missing), still go to the edit page so the
+      // admin sees the group + an error they can act on.
+      error.value = analyzeErr.message
+      router.push(`/admin/groups/${gid}/edit`)
+      return
+    }
    router.push(`/admin/groups/${gid}/edit`)
  } catch (e) {
    error.value = e.message
--- a/frontend/src/views/GroupEdit.vue
+++ b/frontend/src/views/GroupEdit.vue
@@ -5,7 +5,7 @@
      <h2 style="margin:0"><Users :size="22" :stroke-width="1.8" style="vertical-align:-4px" /> {{ i18n.t('managePersonas') }}</h2>
      <div class="row" style="margin-left:auto;gap:10px">
        <button @click="analyze" :disabled="busy" class="primary">
-          <span v-if="busy" class="spinner"></span><Sparkles v-else :size="18" :stroke-width="1.8" /> {{ busy ? 'กำลังสร้าง…' : i18n.t('analyze') }}
+          <span v-if="busy" class="spinner"></span><Sparkles v-else :size="18" :stroke-width="1.8" /> {{ busy ? 'กำลังสร้าง…' : 'สร้างบุคคลต้นแบบเพิ่มเติม' }}
        </button>
      </div>
    </div>
@@ -17,15 +17,16 @@
    <div class="card guide">
      <strong>วิธีใช้หน้านี้</strong>
      <ol style="margin:8px 0 0;padding-left:20px;line-height:1.8">
-        <li>กดปุ่ม <strong>✨ สร้าง/วิเคราะห์บุคคลต้นแบบ</strong> เพื่อให้ระบบสร้างลูกค้าจำลอง 15 คน (ระดับ A/B/C)</li>
+        <li>ระบบสร้างบุคคลต้นแบบ (ลูกค้าจำลอง) ให้อัตโนมัติแล้ว หลังกดสร้าง</li>
        <li>แต่ละการ์ดคือลูกค้าจำลอง 1 คน — กด <strong>✏️ แก้ไข</strong> เพื่อปรับรายละเอียดให้ตรงใจ</li>
+        <li>อยากได้ลูกค้าจำลองเพิ่ม กด <strong>สร้างบุคคลต้นแบบเพิ่มเติม</strong></li>
        <li>เมื่อพร้อมให้ผู้ใช้ฝึก กด <strong>เปิดใช้งาน</strong> (ยังทำในขั้นถัดไป)</li>
      </ol>
    </div>

    <div v-if="personas.length === 0 && !busy" class="card empty-state">
      <strong>ยังไม่มีบุคคลต้นแบบ</strong>
-      <span>กด "✨ สร้าง/วิเคราะห์บุคคลต้นแบบ" เพื่อให้ระบบสร้างลูกค้าจำลองให้</span>
+      <span>กด "สร้างบุคคลต้นแบบเพิ่มเติม" เพื่อให้ระบบสร้างลูกค้าจำลองให้</span>
    </div>

    <!-- Persona list -->
@@ -83,7 +84,8 @@ function tierClass(t) { return { A: 'tier-a', B: 'tier-b', C: 'tier-c' }[t] || '
 async function analyze() {
  busy.value = true; error.value = ''
  try {
-    const data = await api.analyzeGroup(gid)
+    // Append more personas (keeps existing ones), per the 'create more personas' flow.
+    const data = await api.analyzeGroup(gid, { append: true })
    personas.value = data.personas
    await load()
  } catch (e) { error.value = e.message }