<script setup lang="ts">
import { useMessage } from 'naive-ui'
import { onMounted, ref, watch } from 'vue'

const MESSAGE = useMessage()

const promptPrefix = defineModel<string>('promptPrefix', { required: true })

const quickerForm = ref({
  length: 1000,
  style: '第三人称全知视角，禁止打破第四面墙。',
})

function saveToBrowser() {
  localStorage.setItem('prompt-quicker', JSON.stringify(quickerForm.value))
  MESSAGE.success('已保存快速提示词至浏览器。')
}

function loadFromBrowser() {
  const temp = localStorage.getItem('prompt-quicker')
  if (temp) {
    quickerForm.value = JSON.parse(temp)
    MESSAGE.success('从浏览器中读取到保存的快速提示词。')
  } else {
    MESSAGE.info('未找到保存的快速提示词。')
  }
}

// 将本组件中进行的对快速提示词的修改自动同步到父级
watch(
  () => quickerForm.value,
  (newValue) => {
    promptPrefix.value = `<要求><输出字数>${newValue.length}</输出字数><风格约束>${newValue.style}</风格约束></要求>`
  },
)

onMounted(() => {
  loadFromBrowser()
})
</script>

<template>
  <n-card title="快速调整">
    <template #header-extra>
      <n-button-group>
        <n-button secondary type="primary" size="small" round @click="saveToBrowser()">
          保存
        </n-button>
        <n-popover>
          <template #trigger>
            <n-button secondary type="tertiary" size="small" round>?</n-button>
          </template>
          <n-h4>这是什么？</n-h4>
          <n-p>快速预设一些可能需要随时修改的提示词。它们会被结构化地拼接在用户消息中。</n-p>
          <n-p>您的修改无需保存即可随请求发送。保存可以将提示词存储在浏览器中。</n-p>
        </n-popover>
      </n-button-group>
    </template>
    <n-form :model="quickerForm">
      <n-form-item label="输出字数" path="length">
        <n-input-number v-model:value="quickerForm.length" />
      </n-form-item>
      <n-form-item label="风格约束" path="style">
        <n-input v-model:value="quickerForm.style" />
      </n-form-item>
    </n-form>
  </n-card>
</template>

<style scoped></style>
