aegon-lv82 1.0.0

package/src/views/gen-ai/build-report/components/ReportPromptPanel.vue

@@ -0,0 +1,614 @@
+<template>
+  <aside class="report-prompt-panel" :class="{ 'is-compact': !promptOpen && !chapterHistoryOpen }">
+    <ReportCollapsibleSection v-model:open="promptOpen" title="Prompt">
+      <div :key="promptFormRenderKey" class="report-prompt-panel__content">
+        <div class="report-prompt-panel__prompt">
+          <PromptField
+            v-model="promptChapterForm.prompt"
+            label="Prompt"
+            layout="stack"
+            :required="false"
+            :rows="8"
+            min-height="180px"
+            :maxlength="1300"
+            :disabled="!chapterEditMode"
+            @ai-assist="handleAiAssist"
+            enable-ai-dialog
+          />
+        </div>
+
+        <div class="report-prompt-panel__options">
+          <label class="report-prompt-panel__option report-prompt-panel__option--inline">
+            <input
+              v-model="promptChapterForm.enableBodyContent"
+              type="checkbox"
+              class="report-prompt-panel__checkbox"
+              :disabled="!chapterEditMode"
+            />
+            <span class="report-prompt-panel__option-label">正文內容</span>
+            <input
+              v-model.number="promptChapterForm.bodyWordLimit"
+              type="number"
+              class="report-prompt-panel__number-input"
+              :disabled="!chapterEditMode || !promptChapterForm.enableBodyContent"
+              min="1"
+              max="5000"
+            />
+            <span class="report-prompt-panel__option-suffix">字以內</span>
+          </label>
+
+          <div class="report-prompt-panel__option-group">
+            <div class="report-prompt-panel__option-header">
+              <label class="report-prompt-panel__option">
+                <input
+                  v-model="promptChapterForm.enableTable"
+                  type="checkbox"
+                  class="report-prompt-panel__checkbox"
+                  :disabled="!chapterEditMode"
+                />
+                <span class="report-prompt-panel__option-label">生成表格</span>
+              </label>
+              <button
+                type="button"
+                class="report-prompt-panel__fold-toggle"
+                aria-label="展開或收起生成設置"
+                @click="optionsDetailsOpen = !optionsDetailsOpen"
+              >
+                <span
+                  class="report-prompt-panel__fold-arrow"
+                  :class="{ 'is-open': optionsDetailsOpen }"
+                  aria-hidden="true"
+                />
+              </button>
+            </div>
+
+            <div v-show="optionsDetailsOpen" class="report-prompt-panel__details">
+              <div v-if="promptChapterForm.enableTable" class="report-prompt-panel__nested">
+                <label class="report-prompt-panel__field">
+                  <span class="report-prompt-panel__field-label">表格標題</span>
+                  <el-input
+                    v-model="promptChapterForm.tableTitle"
+                    class="report-prompt-panel__input"
+                    :disabled="!chapterEditMode"
+                  />
+                </label>
+                <label class="report-prompt-panel__field">
+                  <span class="report-prompt-panel__field-label">列標籤</span>
+                  <el-input
+                    v-model="promptChapterForm.tableRowLabels"
+                    type="textarea"
+                    :rows="3"
+                    resize="none"
+                    class="report-prompt-panel__textarea"
+                    :disabled="!chapterEditMode"
+                  />
+                </label>
+                <label class="report-prompt-panel__field">
+                  <span class="report-prompt-panel__field-label">欄標籤</span>
+                  <el-input
+                    v-model="promptChapterForm.tableColumnLabels"
+                    type="textarea"
+                    :rows="3"
+                    resize="none"
+                    class="report-prompt-panel__textarea"
+                    :disabled="!chapterEditMode"
+                  />
+                </label>
+                <label class="report-prompt-panel__field">
+                  <span class="report-prompt-panel__field-label">內容</span>
+                  <el-input
+                    v-model="promptChapterForm.tableContent"
+                    type="textarea"
+                    :rows="3"
+                    resize="none"
+                    class="report-prompt-panel__textarea"
+                    :disabled="!chapterEditMode"
+                  />
+                </label>
+              </div>
+
+              <div
+                class="report-prompt-panel__option-group report-prompt-panel__option-group--nested"
+              >
+                <label class="report-prompt-panel__option">
+                  <input
+                    v-model="promptChapterForm.enableSourceChart"
+                    type="checkbox"
+                    class="report-prompt-panel__checkbox"
+                    :disabled="!chapterEditMode"
+                  />
+                  <span class="report-prompt-panel__option-label">引用資訊源圖表</span>
+                </label>
+
+                <div v-if="promptChapterForm.enableSourceChart" class="report-prompt-panel__nested">
+                  <label class="report-prompt-panel__field">
+                    <span class="report-prompt-panel__field-label">圖表描述</span>
+                    <el-input
+                      v-model="promptChapterForm.chartDescription"
+                      type="textarea"
+                      :rows="4"
+                      resize="none"
+                      class="report-prompt-panel__textarea"
+                      :disabled="!chapterEditMode"
+                    />
+                  </label>
+                </div>
+              </div>
+
+              <div class="report-prompt-panel__actions">
+                <button
+                  type="button"
+                  class="app-btn app-btn--wide report-prompt-generate-btn"
+                  :disabled="!chapterEditMode"
+                  v-aiDebounce
+                  v-aiBtnLoading
+                  @click="handleGenerateChapter"
+                >
+                  生成章節內容
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ReportCollapsibleSection>
+
+    <ReportCollapsibleSection v-model:open="chapterHistoryOpen" title="章節歷史">
+      <ReportHistoryList
+        v-model:active-key="activeChapterHistoryKey"
+        :items="chapterHistoryItems"
+        :show-title="false"
+        @continue-draft="handleContinueDraft"
+      />
+    </ReportCollapsibleSection>
+  </aside>
+</template>
+
+<script lang="ts">
+export interface PromptLibraryItem {
+  id: string
+  label: string
+  content: string
+}
+</script>
+
+<script setup lang="ts">
+import genAiReportEditorApi from '@/api/modules/build-report/reportEditor'
+import { useGenAiBuildReportStore } from '@/store/modules/gen-ai'
+import type { GenAiChartAsStreamParams } from '@/types/gen-ai/build-report/reportEditor'
+import { ElInput, ElMessage } from 'element-plus'
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { closeAiBtnLoading } from '../../common/directives'
+import {
+  PromptField,
+  ReportCollapsibleSection,
+  ReportHistoryList,
+  type ReportHistoryItem,
+} from '../../common'
+import { useReportWorkflow } from '../useReportWorkflow'
+
+const genAiBuildReportStore = useGenAiBuildReportStore()
+
+const {
+  draft,
+  promptChapterForm,
+  chapterEditMode,
+  chapterHistoryItems,
+  activeChapterHistoryKey,
+  chapterHistoryOpen,
+  chapterHistoryPreviewBody,
+  chapterHistoryApplyToken,
+  sourceFiles,
+  startChapterContentTypewriter,
+  stopChapterContentTypewriter,
+  markChapterContentFirstChunk,
+  chapterContentStreamEpoch,
+  requestOpenAiPromptDialog,
+  enterChapterEditMode,
+  setChapterChartAuditEventId,
+  clearChapterChartAuditEventId,
+  upsertChapterChartStreamRef,
+  clearChapterChartStreamRefs,
+} = useReportWorkflow()
+
+const promptOpen = ref(true)
+const optionsDetailsOpen = ref(false)
+/** 歷史反顯時遞增，強制 Prompt 區 checkbox/input 重掛載 */
+const promptFormRenderKey = ref(0)
+
+/** 無章節歷史時默認收起 */
+watch(
+  chapterHistoryItems,
+  (items) => {
+    if (!items.length) chapterHistoryOpen.value = false
+  },
+  { deep: true, immediate: true }
+)
+
+/** 版本套用後刷新 Prompt UI：展開詳情並重掛表單，保證全量反顯 */
+watch(chapterHistoryApplyToken, async () => {
+  if (!activeChapterHistoryKey.value) return
+  promptOpen.value = true
+  optionsDetailsOpen.value = true
+  await nextTick()
+  promptFormRenderKey.value += 1
+})
+
+/** 草稿「繼續編輯」：反顯該版本 Prompt / 正文 / 資訊源（靜態無打字機），並進入編輯模式 */
+function handleContinueDraft(item: ReportHistoryItem) {
+  const key = item.key
+  if (!key) return
+  // 已選中同一草稿時強制再觸發一次 watch，確保三塊數據按該版本回填
+  if (activeChapterHistoryKey.value === key) {
+    activeChapterHistoryKey.value = ''
+  }
+  activeChapterHistoryKey.value = key
+  enterChapterEditMode()
+}
+
+function handleAiAssist() {
+  if (!chapterEditMode.value) return
+  requestOpenAiPromptDialog('prompt-panel')
+}
+
+let chapterContentGenerateSeq = 0
+let chapterContentAbort: AbortController | null = null
+
+/** 切章時中止進行中的 chartAsStream，避免寫入錯章 */
+watch(chapterContentStreamEpoch, () => {
+  chapterContentAbort?.abort()
+  chapterContentAbort = null
+  chapterContentGenerateSeq += 1
+})
+
+/** Prompt 面板 → ChartAsStreamDTO 全量入參 */
+function buildChartAsStreamParams(): GenAiChartAsStreamParams {
+  const form = promptChapterForm
+  return {
+    // 報告配置「模型」value；未選時為空字串
+    modelName: String(draft.model || '').trim(),
+    promptDetail: form.prompt.trim() || 'who are you?',
+    promptType: 'INSTANCE_PROMPT_DETAIL',
+    contentLengthLimit: form.enableBodyContent ? form.bodyWordLimit || 500 : null,
+    tableInfo: {
+      enableTable: form.enableTable ? 'Y' : 'N',
+      tableTitle: form.tableTitle,
+      columnLabel: form.tableRowLabels,
+      barLabel: form.tableColumnLabels,
+      content: form.tableContent,
+    },
+    chartInfo: {
+      enableChart: form.enableSourceChart ? 'Y' : 'N',
+      chartDesc: form.chartDescription,
+    },
+    // 資訊源當前勾選列表（全選 / 全不選 / 部分）
+    fileIdList: sourceFiles.value.filter((file) => file.selected).map((file) => file.id),
+    instanceId: String(genAiBuildReportStore.instanceId ?? '').trim(),
+    categoryId: 1,
+    temperature: null,
+    maxTokens: null,
+    stream: true,
+  }
+}
+
+/** 生成章節內容 chartAsStream：先清空標題外正文並繪出標題，再流式續打 */
+async function generateGenAiSectionContent() {
+  const seq = ++chapterContentGenerateSeq
+  chapterContentAbort?.abort()
+  chapterContentAbort = new AbortController()
+  const signal = chapterContentAbort.signal
+  const previousBody = chapterHistoryPreviewBody.value
+  clearChapterChartAuditEventId()
+  clearChapterChartStreamRefs()
+  startChapterContentTypewriter()
+  // 先讓中欄只保留章節標題（正文已清空），再關 loading、開始收流
+  await nextTick()
+  if (seq !== chapterContentGenerateSeq) return
+  markChapterContentFirstChunk()
+  await nextTick()
+  if (seq !== chapterContentGenerateSeq) return
+
+  let received = false
+
+  try {
+    for await (const chunk of genAiReportEditorApi.streamChartAsStream(
+      buildChartAsStreamParams(),
+      signal,
+      {
+        onAuditEvent: (auditEventId) => setChapterChartAuditEventId(auditEventId),
+        onRefEvent: (ref) => upsertChapterChartStreamRef(ref),
+      }
+    )) {
+      if (seq !== chapterContentGenerateSeq) return
+      received = true
+      chapterHistoryPreviewBody.value = `${chapterHistoryPreviewBody.value ?? ''}${chunk}`
+      if (String(chapterHistoryPreviewBody.value).trim()) markChapterContentFirstChunk()
+    }
+    try {
+      const stored = String(
+        sessionStorage.getItem('gen-ai-chapter-chart-audit-event-id') ?? ''
+      ).trim()
+      if (stored) setChapterChartAuditEventId(stored)
+    } catch {
+      /* ignore */
+    }
+    if (seq !== chapterContentGenerateSeq) return
+    if (!received || !String(chapterHistoryPreviewBody.value ?? '').trim()) {
+      stopChapterContentTypewriter()
+      chapterHistoryPreviewBody.value = previousBody
+      return false
+    }
+    return true
+  } catch (err) {
+    if (signal.aborted || seq !== chapterContentGenerateSeq) return
+    console.error('接口异常', err)
+    stopChapterContentTypewriter()
+    chapterHistoryPreviewBody.value = previousBody
+    return err instanceof Error && err.message.trim() ? err.message : false
+  } finally {
+    if (seq === chapterContentGenerateSeq) markChapterContentFirstChunk()
+  }
+}
+
+onBeforeUnmount(() => {
+  chapterContentAbort?.abort()
+  chapterContentAbort = null
+})
+
+function handleGenerateChapter() {
+  if (!chapterEditMode.value) {
+    closeAiBtnLoading('.report-prompt-generate-btn')
+    return
+  }
+  if (!promptChapterForm.prompt.trim()) {
+    ElMessage.warning('請先填寫 Prompt')
+    closeAiBtnLoading('.report-prompt-generate-btn')
+    return
+  }
+  ElMessage.success('章節內容生成中')
+  void generateGenAiSectionContent()
+    .then((ok) => {
+      if (ok === false) ElMessage.warning('接口异常')
+      else if (typeof ok === 'string') ElMessage.warning(ok)
+    })
+    .finally(() => {
+      closeAiBtnLoading('.report-prompt-generate-btn')
+    })
+}
+</script>
+
+<style scoped>
+.report-prompt-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.report-prompt-panel.is-compact {
+  height: auto;
+  align-self: flex-start;
+}
+
+.report-prompt-panel > :deep(.report-collapsible-section:last-child:not(.is-collapsed)) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.report-prompt-panel
+  > :deep(
+    .report-collapsible-section:last-child:not(.is-collapsed) .report-collapsible-section__body
+  ) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.report-prompt-panel :deep(.report-collapsible-section__toggle) {
+  border-bottom: none;
+}
+
+.report-prompt-panel
+  :deep(.report-collapsible-section.is-collapsed .report-collapsible-section__toggle) {
+  padding-bottom: 0;
+}
+
+.report-prompt-panel__content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.report-prompt-panel__prompt :deep(.gen-ai-prompt-field__label) {
+  display: none;
+}
+
+.report-prompt-panel__prompt :deep(.gen-ai-prompt-field--row) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.report-prompt-panel__prompt :deep(.gen-ai-prompt-field__count) {
+  margin-top: 2px;
+}
+
+.report-prompt-panel__options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.report-prompt-panel__option-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.report-prompt-panel__option-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.report-prompt-panel__fold-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.report-prompt-panel__fold-arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 7px solid #c53355;
+  transition: transform 0.2s ease;
+}
+
+.report-prompt-panel__fold-arrow.is-open {
+  transform: rotate(180deg);
+}
+
+.report-prompt-panel__option {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.report-prompt-panel__option--inline {
+  flex-wrap: wrap;
+}
+
+.report-prompt-panel__checkbox {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: #c53355;
+  flex-shrink: 0;
+}
+
+.report-prompt-panel__option-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.report-prompt-panel__option-suffix {
+  font-size: 13px;
+  color: #606266;
+}
+
+.report-prompt-panel__number-input {
+  width: 64px;
+  height: 28px;
+  padding: 2px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #303133;
+  box-sizing: border-box;
+}
+
+.report-prompt-panel__number-input:disabled {
+  background: #f5f7fa;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+.report-prompt-panel__nested {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.report-prompt-panel__details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.report-prompt-panel__option-group--nested {
+  margin-top: 0;
+}
+
+.report-prompt-panel__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.report-prompt-panel__field-label {
+  font-size: 13px;
+  color: #606266;
+}
+
+.report-prompt-panel__input :deep(.el-input__wrapper),
+.report-prompt-panel__textarea :deep(.el-textarea__inner) {
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.report-prompt-panel__textarea :deep(.el-textarea__inner) {
+  min-height: 72px;
+  line-height: 1.6;
+}
+
+.report-prompt-panel__actions {
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+}
+
+.app-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 160px;
+  height: 39px;
+  min-width: 160px;
+  padding: 0;
+  border: 1px solid #c53355;
+  border-radius: 4px;
+  background: #c53355;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.app-btn:hover:not(:disabled) {
+  background: #fff;
+  color: #c53355;
+}
+
+.app-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.app-btn--wide {
+  width: 160px;
+  min-width: 160px;
+}
+</style>