chore: 2.10.4

* feat: 添加Prompt模板和Prompt商店支持

* feat: well done

---------

Co-authored-by: Redon <790348264@qq.com>

.env

@@ -2,3 +2,6 @@
 VITE_GLOB_API_URL=/api
 
 VITE_APP_API_BASE_URL=http://localhost:3002/
+
+# Whether long replies are supported, which may result in higher API fees
+VITE_GLOB_OPEN_LONG_REPLY=false

CHANGELOG.md

@@ -1,3 +1,39 @@
+## v2.10.4
+
+`2023-03-11`
+
+## Feature
+- 感谢 [Nothing1024](https://github.com/Chanzhaoyu/chatgpt-web/pull/268) 添加 `Prompt` 模板和 `Prompt` 商店支持
+
+## Enhancement
+- 设置添加关闭按钮[#495]
+
+## Demo
+
+![Prompt](https://camo.githubusercontent.com/6a51af751eb29238cb7ef4f8fbd89f63db837562f97f33273095424e62dc9194/68747470733a2f2f73312e6c6f63696d672e636f6d2f323032332f30332f30342f333036326665633163613562632e676966)
+
+## v2.10.3
+
+`2023-03-10`
+
+> 声明：除 `ChatGPTUnofficialProxyAPI` 使用的非官方代理外，本项目代码包括上游引用包均开源在 `GitHub`，如果你觉得本项目有监控后门或有问题导致你的账号、API被封，那我很抱歉。我可能`BUG`写的多，但我不缺德。此次主要为前端界面调整，周末愉快。
+
+## Feature
+- 支持长回复 [[yi-ge](https://github.com/Chanzhaoyu/chatgpt-web/pull/450)][[详情](https://github.com/Chanzhaoyu/chatgpt-web/pull/450)]
+- 支持 `PWA` [[chenxch](https://github.com/Chanzhaoyu/chatgpt-web/pull/452)]
+
+## Enhancement
+- 调整移动端按钮和优化布局
+- 调整 `iOS` 上安全距离
+- 简化 `docker-compose` 部署 [[cloudGrin](https://github.com/Chanzhaoyu/chatgpt-web/pull/466)]
+
+## BugFix
+- 修复清空会话侧边栏标题不会重置的问题 [[RyanXinOne](https://github.com/Chanzhaoyu/chatgpt-web/pull/453)]
+- 修复设置文字过长时导致的设置按钮消失的问题
+
+## Other
+- 更新依赖
+
 ## v2.10.2
 
 `2023-03-09`

README.md

@@ -51,7 +51,13 @@
 1. `ChatGPTAPI` 使用 `gpt-3.5-turbo-0301` 通过官方`OpenAI`补全`API`模拟`ChatGPT`（最稳健的方法，但它不是免费的，并且没有使用针对聊天进行微调的模型）
 2. `ChatGPTUnofficialProxyAPI` 使用非官方代理服务器访问 `ChatGPT` 的后端`API`，绕过`Cloudflare`（使用真实的的`ChatGPT`，非常轻量级，但依赖于第三方服务器，并且有速率限制）
 
-[查看详情](https://github.com/Chanzhaoyu/chatgpt-web/issues/138)
+警告：
+1. 你应该使用 `API` 方式并自建代理使你使用的风险降到最低。
+2. 使用 `accessToken` 方式时反向代理将向第三方暴露您的访问令牌。这样做应该不会产生任何不良影响，但在使用这种方法之前请考虑风险，修改代理地址时也请使用公开的[社区方案](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)，不要不要不要使用来源不明的地址！
+2. 因为国内 `API` 被墙，如果服务器不在国外，则需要代理才能请求到官方接口，也非常不建议使用别人发出来的代理地址，请自己搭建。
+3. 人性是丑陋的，你永远不知道你相信的某些乐于分享的`好人`在用你的账号做什么！！！
+
+注：强烈建议使用`ChatGPTAPI`，因为它使用 `OpenAI` 官方支持的`API`。并且可能会在将来的版本中删除对`ChatGPTUnofficialProxyAPI`的支持。
 
 切换方式：
 1. 进入 `service/.env.example` 文件，复制内容到 `service/.env` 文件

docker-compose/docker-compose.yml

@@ -25,13 +25,13 @@ services:
       # Socks代理端口，可选，和 SOCKS_PROXY_HOST 一起时生效
       SOCKS_PROXY_PORT: xxxx
   nginx:
-    build: nginx
-    image: chatgpt/nginx
+    image: nginx:alpine
     ports:
       - '80:80'
     expose:
       - '80'
     volumes:
-      - ./nginx/html/:/etc/nginx/html/
+      - ./nginx/html:/usr/share/nginx/html
+      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
     links:
       - app

docker-compose/nginx/Dockerfile

@@ -1,10 +0,0 @@
-FROM hub.c.163.com/library/nginx
-
-MAINTAINER jo "tionsin@live.com"
-
-RUN rm -rf /etc/nginx/conf.d/default.conf
-COPY ./nginx.conf /etc/nginx/conf.d/default.conf
-COPY ./html/ /usr/share/nginx/html/
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]

docker-compose/nginx/nginx.conf

@@ -3,9 +3,9 @@ server {
 	server_name  localhost;
 	charset utf-8;
 	error_page   500 502 503 504  /50x.html;
-	location = / {
-			root   /usr/share/nginx/html;
-			index  index.html index.htm;
+	location / {
+			root /usr/share/nginx/html;
+   		try_files $uri /index.html;
 	}
 
 	location /api {

docker-compose/readme.md

@@ -1,8 +1,7 @@
 ### docker-compose 部署教程
 - 将打包好的前端文件放到 `nginx/html` 目录下
 - ```shell
-  # 打包启动
-  docker-compose build
+  # 启动
   docker-compose up -d
   ```
 - ```shell

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-web",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "private": false,
   "description": "ChatGPT Web",
   "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
@@ -58,6 +58,7 @@
     "tailwindcss": "^3.2.7",
     "typescript": "~4.9.5",
     "vite": "^4.1.4",
+    "vite-plugin-pwa": "^0.14.4",
     "vue-tsc": "^1.2.0"
   },
   "lint-staged": {

service/package.json

@@ -24,7 +24,7 @@
     "common:cleanup": "rimraf node_modules && rimraf pnpm-lock.yaml"
   },
   "dependencies": {
-    "chatgpt": "^5.0.8",
+    "chatgpt": "^5.0.9",
     "dotenv": "^16.0.3",
     "esno": "^0.16.3",
     "express": "^4.18.2",

service/pnpm-lock.yaml

@@ -4,7 +4,7 @@ specifiers:
   '@antfu/eslint-config': ^0.35.3
   '@types/express': ^4.17.17
   '@types/node': ^18.14.6
-  chatgpt: ^5.0.8
+  chatgpt: ^5.0.9
   dotenv: ^16.0.3
   eslint: ^8.35.0
   esno: ^0.16.3
@@ -17,7 +17,7 @@ specifiers:
   typescript: ^4.9.5
 
 dependencies:
-  chatgpt: 5.0.8
+  chatgpt: 5.0.9
   dotenv: 16.0.3
   esno: 0.16.3
   express: 4.18.2
@@ -902,8 +902,8 @@ packages:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
     dev: true
 
-  /chatgpt/5.0.8:
-    resolution: {integrity: sha512-Bjh7Y15QIsZ+SkQvbbZGymv1PGxkZ7X1vwqAwvyqaMMhbipU4kxht/GL62VCxhoUCXPwxTfScbFeNFtNldgqaw==}
+  /chatgpt/5.0.9:
+    resolution: {integrity: sha512-H0MMegLKcYyYh3LeFO4ubIdJSiSAl4rRjTeXf3KjHfGXDM7QZ1EkiTH9RuIoaNzOm8rJTn4QEhrwBbOIpbalxw==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:

service/src/chatgpt/index.ts

@@ -87,8 +87,8 @@ async function chatReplyProcess(
   lastContext?: { conversationId?: string; parentMessageId?: string },
   process?: (chat: ChatMessage) => void,
 ) {
-  if (!message)
-    return sendResponse({ type: 'Fail', message: 'Message is empty' })
+  // if (!message)
+  //   return sendResponse({ type: 'Fail', message: 'Message is empty' })
 
   try {
     let options: SendMessageOptions = { timeoutMs }

src/assets/recommend.json

@@ -0,0 +1,8 @@
+[
+  {
+    "key": "awesome-chatgpt-prompts-zh",
+    "desc": "ChatGPT 中文调教指南",
+    "downloadUrl": "https://raw.githubusercontent.com/Nothing1024/chatgpt-prompt-collection/main/awesome-chatgpt-prompts-zh.json",
+    "url": "https://github.com/PlexPt/awesome-chatgpt-prompts-zh"
+  }
+]

src/components/common/PromptStore/index.vue

@@ -0,0 +1,429 @@
+<script setup lang='ts'>
+import type { DataTableColumns } from 'naive-ui'
+import { computed, h, ref, watch } from 'vue'
+import { NButton, NCard, NDataTable, NDivider, NGi, NGrid, NInput, NLayoutContent, NMessageProvider, NModal, NPopconfirm, NSpace, NTabPane, NTabs, useMessage } from 'naive-ui'
+import PromptRecommend from '../../../assets/recommend.json'
+import { SvgIcon } from '..'
+import { usePromptStore } from '@/store'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
+
+interface DataProps {
+  renderKey: string
+  renderValue: string
+  key: string
+  value: string
+}
+
+interface Props {
+  visible: boolean
+}
+
+interface Emit {
+  (e: 'update:visible', visible: boolean): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const message = useMessage()
+
+const show = computed({
+  get: () => props.visible,
+  set: (visible: boolean) => emit('update:visible', visible),
+})
+
+const showModal = ref(false)
+
+// 移动端自适应相关
+const { isMobile } = useBasicLayout()
+
+const promptStore = usePromptStore()
+
+// Prompt在线导入推荐List,根据部署者喜好进行修改(assets/recommend.json)
+const promptRecommendList = PromptRecommend
+const promptList = ref<any>(promptStore.promptList)
+
+// 用于添加修改的临时prompt参数
+const tempPromptKey = ref('')
+const tempPromptValue = ref('')
+
+// Modal模式，根据不同模式渲染不同的Modal内容
+const modalMode = ref('')
+
+// 这个是为了后期的修改Prompt内容考虑，因为要针对无uuid的list进行修改，且考虑到不能出现标题和内容的冲突，所以就需要一个临时item来记录一下
+const tempModifiedItem = ref<any>({})
+
+// 添加修改导入都使用一个Modal, 临时修改内容占用tempPromptKey,切换状态前先将内容都清楚
+const changeShowModal = (mode: string, selected = { key: '', value: '' }) => {
+  if (mode === 'add') {
+    tempPromptKey.value = ''
+    tempPromptValue.value = ''
+  }
+  else if (mode === 'modify') {
+    tempModifiedItem.value = { ...selected }
+    tempPromptKey.value = selected.key
+    tempPromptValue.value = selected.value
+  }
+  else if (mode === 'local_import') {
+    tempPromptKey.value = 'local_import'
+    tempPromptValue.value = ''
+  }
+  showModal.value = !showModal.value
+  modalMode.value = mode
+}
+
+// 在线导入相关
+const downloadURL = ref('')
+const downloadDisabled = computed(() => downloadURL.value.trim().length < 1)
+const setDownloadURL = (url: string) => {
+  downloadURL.value = url
+}
+
+// 控制 input 按钮
+const inputStatus = computed (() => tempPromptKey.value.trim().length < 1 || tempPromptValue.value.trim().length < 1)
+
+// Prompt模板相关操作
+const addPromptTemplate = () => {
+  for (const i of promptList.value) {
+    if (i.key === tempPromptKey.value) {
+      message.error('已存在重复标题，请重新输入')
+      return
+    }
+    if (i.value === tempPromptValue.value) {
+      message.error(`已存在重复内容：${tempPromptKey.value}，请重新输入`)
+      return
+    }
+  }
+  promptList.value.unshift({ key: tempPromptKey.value, value: tempPromptValue.value } as never)
+  message.success('添加 prompt 成功')
+  changeShowModal('')
+}
+
+const modifyPromptTemplate = () => {
+  let index = 0
+
+  // 通过临时索引把待修改项摘出来
+  for (const i of promptList.value) {
+    if (i.key === tempModifiedItem.value.key && i.value === tempModifiedItem.value.value)
+      break
+    index = index + 1
+  }
+
+  const tempList = promptList.value.filter((_: any, i: number) => i !== index)
+
+  // 搜索有冲突的部分
+  for (const i of tempList) {
+    if (i.key === tempPromptKey.value) {
+      message.error('检测修改 Prompt 标题冲突，请重新修改')
+      return
+    }
+    if (i.value === tempPromptValue.value) {
+      message.error(`检测修改内容${i.key}冲突，请重新修改`)
+      return
+    }
+  }
+
+  promptList.value = [{ key: tempPromptKey.value, value: tempPromptValue.value }, ...tempList] as never
+  message.success('Prompt 信息修改成功')
+  changeShowModal('')
+}
+
+const deletePromptTemplate = (row: { key: string; value: string }) => {
+  promptList.value = [
+    ...promptList.value.filter((item: { key: string; value: string }) => item.key !== row.key),
+  ] as never
+  message.success('删除 Prompt 成功')
+}
+
+const clearPromptTemplate = () => {
+  promptList.value = []
+  message.success('清空 Prompt 成功')
+}
+
+const importPromptTemplate = () => {
+  try {
+    const jsonData = JSON.parse(tempPromptValue.value)
+    for (const i of jsonData) {
+      let safe = true
+      for (const j of promptList.value) {
+        if (j.key === i.key) {
+          message.warning(`因标题重复跳过：${i.key}`)
+          safe = false
+          break
+        }
+        if (j.value === i.value) {
+          message.warning(`因内容重复跳过：${i.key}`)
+          safe = false
+          break
+        }
+      }
+      if (safe)
+        promptList.value.unshift({ key: i.key, value: i.value } as never)
+    }
+    message.success('导入成功')
+    changeShowModal('')
+  }
+  catch {
+    message.error('JSON 格式错误，请检查 JSON 格式')
+    changeShowModal('')
+  }
+}
+
+// 模板导出
+const exportPromptTemplate = () => {
+  const jsonDataStr = JSON.stringify(promptList.value)
+  const blob = new Blob([jsonDataStr], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = 'ChatGPTPromptTemplate.json'
+  link.click()
+  URL.revokeObjectURL(url)
+}
+
+// 模板在线导入
+const downloadPromptTemplate = async () => {
+  try {
+    await fetch(downloadURL.value)
+      .then(response => response.json())
+      .then((jsonData) => {
+        tempPromptValue.value = JSON.stringify(jsonData)
+      }).then(() => {
+        importPromptTemplate()
+      })
+  }
+  catch {
+    message.error('网络导入出现问题，请检查网络状态与 JSON 文件有效性')
+  }
+}
+
+// 移动端自适应相关
+const renderTemplate = () => {
+  const [keyLimit, valueLimit] = isMobile.value ? [6, 9] : [15, 50]
+
+  return promptList.value.map((item: { key: string; value: string }) => {
+    return {
+      renderKey: item.key.length <= keyLimit ? item.key : `${item.key.substring(0, keyLimit)}...`,
+      renderValue: item.value.length <= valueLimit ? item.value : `${item.value.substring(0, valueLimit)}...`,
+      key: item.key,
+      value: item.value,
+    }
+  })
+}
+
+const pagination = computed(() => {
+  const [pageSize, pageSlot] = isMobile.value ? [6, 5] : [7, 15]
+  return {
+    pageSize, pageSlot,
+  }
+})
+
+// table相关
+const createColumns = (): DataTableColumns<DataProps> => {
+  return [
+    {
+      title: '标题',
+      key: 'renderKey',
+      minWidth: 100,
+    },
+    {
+      title: '内容',
+      key: 'renderValue',
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 100,
+      align: 'center',
+      render(row) {
+        return h('div', { class: 'flex items-center flex-col gap-2' }, {
+          default: () => [h(
+            NButton,
+            {
+              tertiary: true,
+              size: 'small',
+              type: 'info',
+              onClick: () => changeShowModal('modify', row),
+            },
+            { default: () => '修改' },
+          ),
+          h(
+            NButton,
+            {
+              tertiary: true,
+              size: 'small',
+              type: 'error',
+              onClick: () => deletePromptTemplate(row),
+            },
+            { default: () => '删除' },
+          ),
+          ],
+        })
+      },
+    },
+  ]
+}
+const columns = createColumns()
+
+watch(
+  () => promptList,
+  () => {
+    promptStore.updatePromptList(promptList.value)
+  },
+  { deep: true },
+)
+</script>
+
+<template>
+  <NMessageProvider>
+    <NModal v-model:show="show" style="width: 90%; max-width: 900px;" preset="card">
+      <NCard>
+        <div class="space-y-4">
+          <NTabs type="segment">
+            <NTabPane name="local" tab="本地管理">
+              <NSpace justify="end">
+                <NButton type="primary" @click="changeShowModal('add')">
+                  添加
+                </NButton>
+                <NButton @click="changeShowModal('local_import')">
+                  导入
+                </NButton>
+                <NButton @click="exportPromptTemplate()">
+                  导出
+                </NButton>
+                <NPopconfirm @positive-click="clearPromptTemplate">
+                  <template #trigger>
+                    <NButton>
+                      清空
+                    </NButton>
+                  </template>
+                  确认是否清空数据?
+                </NPopconfirm>
+              </NSpace>
+              <br>
+              <NDataTable
+                :max-height="400"
+                :columns="columns"
+                :data="renderTemplate()"
+                :pagination="pagination"
+                :bordered="false"
+              />
+            </NTabPane>
+            <NTabPane name="download" tab="在线导入">
+              注意：请检查下载 JSON 文件来源，恶意的JSON文件可能会破坏您的计算机！<br><br>
+              <NGrid x-gap="12" y-gap="12" :cols="24">
+                <NGi :span="isMobile ? 18 : 22">
+                  <NInput v-model:value="downloadURL" placeholder="请输入正确的 JSON 地址" />
+                </NGi>
+                <NGi>
+                  <NButton strong secondary :disabled="downloadDisabled" @click="downloadPromptTemplate()">
+                    下载
+                  </NButton>
+                </NGi>
+              </NGrid>
+              <NDivider />
+              <NLayoutContent v-if="isMobile" style="height: 360px" content-style=" background:none;" :native-scrollbar="false">
+                <NCard
+                  v-for="info in promptRecommendList"
+                  :key="info.key" :title="info.key"
+                  style="margin: 5px;"
+                  embedded
+                  :bordered="true"
+                >
+                  {{ info.desc }}
+                  <template #footer>
+                    <NSpace justify="end">
+                      <NButton text>
+                        <a
+                          :href="info.url"
+                          target="_blank"
+                        >
+                          <SvgIcon class="text-xl" icon="ri:link" />
+                        </a>
+                      </NButton>
+                      <NButton text @click="setDownloadURL(info.downloadUrl) ">
+                        <SvgIcon class="text-xl" icon="ri:add-fill" />
+                      </NButton>
+                    </NSpace>
+                  </template>
+                </NCard>
+              </NLayoutContent>
+              <NLayoutContent
+                v-else
+                style="height: 360px"
+                content-style="padding: 10px; background:none;"
+                :native-scrollbar="false"
+              >
+                <NGrid x-gap="12" y-gap="12" :cols="isMobile ? 1 : 3">
+                  <NGi v-for="info in promptRecommendList" :key="info.key">
+                    <NCard :title="info.key" embedded :bordered="true">
+                      {{ info.desc }}
+                      <template #footer>
+                        <NSpace justify="end">
+                          <NButton text>
+                            <a
+                              :href="info.url"
+                              target="_blank"
+                            >
+                              <SvgIcon class="text-xl" icon="ri:link" />
+                            </a>
+                          </NButton>
+                          <NButton text @click="setDownloadURL(info.downloadUrl) ">
+                            <SvgIcon class="text-xl" icon="ri:add-fill" />
+                          </NButton>
+                        </NSpace>
+                      </template>
+                    </NCard>
+                  </NGi>
+                </NGrid>
+              </NLayoutContent>
+            </NTabPane>
+          </NTabs>
+        </div>
+      </NCard>
+    </NModal>
+    <NModal v-model:show="showModal">
+      <NCard
+        style="width: 600px"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        <NSpace v-if="modalMode === 'add' || modalMode === 'modify'" vertical>
+          模板标题
+          <NInput v-model:value="tempPromptKey" placeholder="搜索" />
+          模板内容
+          <NInput v-model:value="tempPromptValue" placeholder="搜索" type="textarea" />
+          <NButton
+            strong
+            secondary
+            :style="{ width: '100%' }"
+            :disabled="inputStatus"
+            @click="() => { modalMode === 'add' ? addPromptTemplate() : modifyPromptTemplate() }"
+          >
+            确定
+          </NButton>
+        </NSpace>
+        <NSpace v-if="modalMode === 'local_import'" vertical>
+          <NInput
+            v-model:value="tempPromptValue"
+            placeholder="请粘贴json文件内容"
+            :autosize="{ minRows: 3, maxRows: 15 }"
+            type="textarea"
+          />
+          <NButton
+            strong
+            secondary
+            :style="{ width: '100%' }"
+            :disabled="inputStatus"
+            @click="() => { importPromptTemplate() }"
+          >
+            导入
+          </NButton>
+        </NSpace>
+      </NCard>
+    </NModal>
+  </NMessageProvider>
+</template>

src/components/common/Setting/index.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import { computed, ref } from 'vue'
-import { NCard, NModal, NTabPane, NTabs } from 'naive-ui'
+import { NModal, NTabPane, NTabs } from 'naive-ui'
 import General from './General.vue'
 import About from './About.vue'
 import { SvgIcon } from '@/components/common'
@@ -30,8 +30,8 @@ const show = computed({
 </script>
 
 <template>
-  <NModal v-model:show="show" :auto-focus="false">
-    <NCard role="dialog" aria-modal="true" :bordered="false" style="width: 95%; max-width: 640px">
+  <NModal v-model:show="show" :auto-focus="false" preset="card" style="width: 95%; max-width: 640px">
+    <div>
       <NTabs v-model:value="active" type="line" animated>
         <NTabPane name="General" tab="General">
           <template #tab>
@@ -50,6 +50,6 @@ const show = computed({
           <About />
         </NTabPane>
       </NTabs>
-    </NCard>
+    </div>
   </NModal>
 </template>

src/components/common/UserAvatar/index.vue

@@ -11,8 +11,8 @@ const userInfo = computed(() => userStore.userInfo)
 </script>
 
 <template>
-  <div class="flex items-center">
-    <div class="w-10 h-10 overflow-hidden rounded-full">
+  <div class="flex items-center overflow-hidden">
+    <div class="w-10 h-10 overflow-hidden rounded-full shrink-0">
       <template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
         <NAvatar
           size="large"
@@ -25,11 +25,11 @@ const userInfo = computed(() => userStore.userInfo)
         <NAvatar size="large" round :src="defaultAvatar" />
       </template>
     </div>
-    <div class="ml-2">
-      <h2 class="font-bold text-md">
+    <div class="flex-1 min-w-0 ml-2">
+      <h2 class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
         {{ userInfo.name ?? 'ChenZhaoYu' }}
       </h2>
-      <p class="text-xs text-gray-500">
+      <p class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap">
         <span
           v-if="isString(userInfo.description) && userInfo.description !== ''"
           v-html="userInfo.description"

src/components/common/index.ts

@@ -3,5 +3,6 @@ import NaiveProvider from './NaiveProvider/index.vue'
 import SvgIcon from './SvgIcon/index.vue'
 import UserAvatar from './UserAvatar/index.vue'
 import Setting from './Setting/index.vue'
+import PromptStore from './PromptStore/index.vue'
 
-export { HoverButton, NaiveProvider, SvgIcon, UserAvatar, Setting }
+export { HoverButton, NaiveProvider, SvgIcon, UserAvatar, Setting, PromptStore }

src/store/modules/chat/index.ts

@@ -165,6 +165,7 @@ export const useChatStore = defineStore('chat-store', {
       if (!uuid || uuid === 0) {
         if (this.chat.length) {
           this.chat[0].data = []
+          this.history[0].title = 'New Chat'
           this.recordState()
         }
         return
@@ -173,6 +174,7 @@ export const useChatStore = defineStore('chat-store', {
       const index = this.chat.findIndex(item => item.uuid === uuid)
       if (index !== -1) {
         this.chat[index].data = []
+        this.history[index].title = 'New Chat'
         this.recordState()
       }
     },

src/store/modules/index.ts

@@ -1,4 +1,5 @@
 export * from './app'
 export * from './chat'
 export * from './user'
+export * from './prompt'
 export * from './auth'

src/store/modules/prompt/helper.ts

@@ -0,0 +1,18 @@
+import { ss } from '@/utils/storage'
+
+const LOCAL_NAME = 'promptStore'
+
+export type PromptList = []
+
+export interface PromptStore {
+  promptList: PromptList
+}
+
+export function getLocalPromptList(): PromptStore {
+  const promptStore: PromptStore | undefined = ss.get(LOCAL_NAME)
+  return promptStore ?? { promptList: [] }
+}
+
+export function setLocalPromptList(promptStore: PromptStore): void {
+  ss.set(LOCAL_NAME, promptStore)
+}

src/store/modules/prompt/index.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import type { PromptStore } from './helper'
+import { getLocalPromptList, setLocalPromptList } from './helper'
+
+export const usePromptStore = defineStore('prompt-store', {
+  state: (): PromptStore => getLocalPromptList(),
+
+  actions: {
+    updatePromptList(promptList: []) {
+      this.$patch({ promptList })
+      setLocalPromptList({ promptList })
+    },
+    getPromptList() {
+      return this.$state
+    },
+  },
+})

src/styles/global.less

@@ -6,4 +6,5 @@ body,
 
 body {
 	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
 }

src/views/chat/components/Header/index.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { computed, nextTick } from 'vue'
+import { HoverButton, SvgIcon } from '@/components/common'
+import { useAppStore, useChatStore } from '@/store'
+
+interface Props {
+  usingContext: boolean
+}
+
+interface Emit {
+  (ev: 'export'): void
+  (ev: 'toggleUsingContext'): void
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const appStore = useAppStore()
+const chatStore = useChatStore()
+
+const collapsed = computed(() => appStore.siderCollapsed)
+const currentChatHistory = computed(() => chatStore.getChatHistoryByCurrentActive)
+
+function handleUpdateCollapsed() {
+  appStore.setSiderCollapsed(!collapsed.value)
+}
+
+function onScrollToTop() {
+  const scrollRef = document.querySelector('#scrollRef')
+  if (scrollRef)
+    nextTick(() => scrollRef.scrollTop = 0)
+}
+
+function handleExport() {
+  emit('export')
+}
+
+function toggleUsingContext() {
+  emit('toggleUsingContext')
+}
+</script>
+
+<template>
+  <header
+    class="sticky top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 backdrop-blur"
+  >
+    <div class="relative flex items-center justify-between min-w-0 overflow-hidden h-14">
+      <div class="flex items-center">
+        <button
+          class="flex items-center justify-center w-11 h-11"
+          @click="handleUpdateCollapsed"
+        >
+          <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
+          <SvgIcon v-else class="text-2xl" icon="ri:align-right" />
+        </button>
+      </div>
+      <h1
+        class="flex-1 px-4 pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap"
+        @dblclick="onScrollToTop"
+      >
+        {{ currentChatHistory?.title ?? '' }}
+      </h1>
+      <div class="flex items-center space-x-2">
+        <HoverButton @click="toggleUsingContext">
+          <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
+            <SvgIcon icon="ri:chat-history-line" />
+          </span>
+        </HoverButton>
+        <HoverButton @click="handleExport">
+          <span class="text-xl text-[#4f555e] dark:text-white">
+            <SvgIcon icon="ri:download-2-line" />
+          </span>
+        </HoverButton>
+      </div>
+    </div>
+  </header>
+</template>

src/views/chat/hooks/useUsingContext.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+import { useMessage } from 'naive-ui'
+import { t } from '@/locales'
+
+export function useUsingContext() {
+  const ms = useMessage()
+  const usingContext = ref<boolean>(true)
+
+  function toggleUsingContext() {
+    usingContext.value = !usingContext.value
+    if (usingContext.value)
+      ms.success(t('chat.turnOnContext'))
+    else
+      ms.warning(t('chat.turnOffContext'))
+  }
+
+  return {
+    usingContext,
+    toggleUsingContext,
+  }
+}

src/views/chat/index.vue

@@ -1,20 +1,25 @@
 <script setup lang='ts'>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { NButton, NInput, useDialog, useMessage } from 'naive-ui'
+import { storeToRefs } from 'pinia'
+import { NAutoComplete, NButton, NInput, useDialog, useMessage } from 'naive-ui'
 import html2canvas from 'html2canvas'
 import { Message } from './components'
 import { useScroll } from './hooks/useScroll'
 import { useChat } from './hooks/useChat'
 import { useCopyCode } from './hooks/useCopyCode'
+import { useUsingContext } from './hooks/useUsingContext'
+import HeaderComponent from './components/Header/index.vue'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { useChatStore } from '@/store'
+import { useChatStore, usePromptStore } from '@/store'
 import { fetchChatAPIProcess } from '@/api'
 import { t } from '@/locales'
 
 let controller = new AbortController()
 
+const openLongReply = import.meta.env.VITE_GLOB_OPEN_LONG_REPLY === 'true'
+
 const route = useRoute()
 const dialog = useDialog()
 const ms = useMessage()
@@ -22,9 +27,11 @@ const ms = useMessage()
 const chatStore = useChatStore()
 
 useCopyCode()
+
 const { isMobile } = useBasicLayout()
 const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
 const { scrollRef, scrollToBottom } = useScroll()
+const { usingContext, toggleUsingContext } = useUsingContext()
 
 const { uuid } = route.params as { uuid: string }
 
@@ -33,15 +40,18 @@ const conversationList = computed(() => dataSources.value.filter(item => (!item.
 
 const prompt = ref<string>('')
 const loading = ref<boolean>(false)
-const usingContext = ref<boolean>(true)
-const actionVisible = ref<boolean>(true)
+
+// 添加PromptStore
+const promptStore = usePromptStore()
+// 使用storeToRefs，保证store修改后，联想部分能够重新渲染
+const { promptList: promptTemplate } = storeToRefs<any>(promptStore)
 
 function handleSubmit() {
   onConversation()
 }
 
 async function onConversation() {
-  const message = prompt.value
+  let message = prompt.value
 
   if (loading.value)
     return
@@ -88,40 +98,53 @@ async function onConversation() {
   scrollToBottom()
 
   try {
-    await fetchChatAPIProcess<Chat.ConversationResponse>({
-      prompt: message,
-      options,
-      signal: controller.signal,
-      onDownloadProgress: ({ event }) => {
-        const xhr = event.target
-        const { responseText } = xhr
-        // Always process the final line
-        const lastIndex = responseText.lastIndexOf('\n')
-        let chunk = responseText
-        if (lastIndex !== -1)
-          chunk = responseText.substring(lastIndex)
-        try {
-          const data = JSON.parse(chunk)
-          updateChat(
-            +uuid,
-            dataSources.value.length - 1,
-            {
-              dateTime: new Date().toLocaleString(),
-              text: data.text ?? '',
-              inversion: false,
-              error: false,
-              loading: false,
-              conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-              requestOptions: { prompt: message, options: { ...options } },
-            },
-          )
-          scrollToBottom()
-        }
-        catch (error) {
+    let lastText = ''
+    const fetchChatAPIOnce = async () => {
+      await fetchChatAPIProcess<Chat.ConversationResponse>({
+        prompt: message,
+        options,
+        signal: controller.signal,
+        onDownloadProgress: ({ event }) => {
+          const xhr = event.target
+          const { responseText } = xhr
+          // Always process the final line
+          const lastIndex = responseText.lastIndexOf('\n')
+          let chunk = responseText
+          if (lastIndex !== -1)
+            chunk = responseText.substring(lastIndex)
+          try {
+            const data = JSON.parse(chunk)
+            updateChat(
+              +uuid,
+              dataSources.value.length - 1,
+              {
+                dateTime: new Date().toLocaleString(),
+                text: lastText + data.text ?? '',
+                inversion: false,
+                error: false,
+                loading: false,
+                conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+                requestOptions: { prompt: message, options: { ...options } },
+              },
+            )
+
+            if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+              options.parentMessageId = data.id
+              lastText = data.text
+              message = ''
+              return fetchChatAPIOnce()
+            }
+
+            scrollToBottom()
+          }
+          catch (error) {
           //
-        }
-      },
-    })
+          }
+        },
+      })
+    }
+
+    await fetchChatAPIOnce()
   }
   catch (error: any) {
     const errorMessage = error?.message ?? t('common.wrong')
@@ -181,7 +204,7 @@ async function onRegenerate(index: number) {
 
   const { requestOptions } = dataSources.value[index]
 
-  const message = requestOptions?.prompt ?? ''
+  let message = requestOptions?.prompt ?? ''
 
   let options: Chat.ConversationRequest = {}
 
@@ -205,39 +228,50 @@ async function onRegenerate(index: number) {
   )
 
   try {
-    await fetchChatAPIProcess<Chat.ConversationResponse>({
-      prompt: message,
-      options,
-      signal: controller.signal,
-      onDownloadProgress: ({ event }) => {
-        const xhr = event.target
-        const { responseText } = xhr
-        // Always process the final line
-        const lastIndex = responseText.lastIndexOf('\n')
-        let chunk = responseText
-        if (lastIndex !== -1)
-          chunk = responseText.substring(lastIndex)
-        try {
-          const data = JSON.parse(chunk)
-          updateChat(
-            +uuid,
-            index,
-            {
-              dateTime: new Date().toLocaleString(),
-              text: data.text ?? '',
-              inversion: false,
-              error: false,
-              loading: false,
-              conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-              requestOptions: { prompt: message, ...options },
-            },
-          )
-        }
-        catch (error) {
-          //
-        }
-      },
-    })
+    let lastText = ''
+    const fetchChatAPIOnce = async () => {
+      await fetchChatAPIProcess<Chat.ConversationResponse>({
+        prompt: message,
+        options,
+        signal: controller.signal,
+        onDownloadProgress: ({ event }) => {
+          const xhr = event.target
+          const { responseText } = xhr
+          // Always process the final line
+          const lastIndex = responseText.lastIndexOf('\n')
+          let chunk = responseText
+          if (lastIndex !== -1)
+            chunk = responseText.substring(lastIndex)
+          try {
+            const data = JSON.parse(chunk)
+            updateChat(
+              +uuid,
+              index,
+              {
+                dateTime: new Date().toLocaleString(),
+                text: lastText + data.text ?? '',
+                inversion: false,
+                error: false,
+                loading: false,
+                conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+                requestOptions: { prompt: message, ...options },
+              },
+            )
+
+            if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+              options.parentMessageId = data.id
+              lastText = data.text
+              message = ''
+              return fetchChatAPIOnce()
+            }
+          }
+          catch (error) {
+            //
+          }
+        },
+      })
+    }
+    await fetchChatAPIOnce()
   }
   catch (error: any) {
     if (error.message === 'canceled') {
@@ -366,22 +400,29 @@ function handleStop() {
   }
 }
 
-function toggleUsingContext() {
-  usingContext.value = !usingContext.value
-  if (usingContext.value)
-    ms.success(t('chat.turnOnContext'))
-  else
-    ms.warning(t('chat.turnOffContext'))
-}
-
-function onInputFocus() {
-  if (isMobile.value)
-    actionVisible.value = false
-}
-
-function onInputBlur() {
-  if (isMobile.value)
-    actionVisible.value = true
+// 可优化部分
+// 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果)
+// 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
+const searchOptions = computed(() => {
+  if (prompt.value.startsWith('/')) {
+    return promptTemplate.value.filter((item: { key: string }) => item.key.toLowerCase().includes(prompt.value.substring(1).toLowerCase())).map((obj: { value: any }) => {
+      return {
+        label: obj.value,
+        value: obj.value,
+      }
+    })
+  }
+  else {
+    return []
+  }
+})
+// value反渲染key
+const renderOption = (option: { label: string }) => {
+  for (const i of promptTemplate.value) {
+    if (i.value === option.label)
+      return [i.key]
+  }
+  return []
 }
 
 const placeholder = computed(() => {
@@ -394,16 +435,10 @@ const buttonDisabled = computed(() => {
   return loading.value || !prompt.value || prompt.value.trim() === ''
 })
 
-const wrapClass = computed(() => {
-  if (isMobile.value)
-    return ['pt-14']
-  return []
-})
-
 const footerClass = computed(() => {
   let classes = ['p-4']
   if (isMobile.value)
-    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'overflow-hidden']
+    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
   return classes
 })
 
@@ -418,7 +453,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-full" :class="wrapClass">
+  <div class="flex flex-col w-full h-full">
+    <HeaderComponent
+      v-if="isMobile"
+      :using-context="usingContext"
+      @export="handleExport"
+      @toggle-using-context="toggleUsingContext"
+    />
     <main class="flex-1 overflow-hidden">
       <div
         id="scrollRef"
@@ -465,32 +506,35 @@ onUnmounted(() => {
     <footer :class="footerClass">
       <div class="w-full max-w-screen-xl m-auto">
         <div class="flex items-center justify-between space-x-2">
-          <div v-if="actionVisible" class="flex items-center space-x-2">
-            <HoverButton @click="handleClear">
-              <span class="text-xl text-[#4f555e] dark:text-white">
-                <SvgIcon icon="ri:delete-bin-line" />
-              </span>
-            </HoverButton>
-            <HoverButton @click="handleExport">
-              <span class="text-xl text-[#4f555e] dark:text-white">
-                <SvgIcon icon="ri:download-2-line" />
-              </span>
-            </HoverButton>
-            <HoverButton @click="toggleUsingContext">
-              <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
-                <SvgIcon icon="ri:chat-history-line" />
-              </span>
-            </HoverButton>
-          </div>
-          <NInput
-            v-model:value="prompt"
-            type="textarea"
-            :autosize="{ minRows: 1, maxRows: 2 }"
-            :placeholder="placeholder"
-            @focus="onInputFocus"
-            @blur="onInputBlur"
-            @keypress="handleEnter"
-          />
+          <HoverButton @click="handleClear">
+            <span class="text-xl text-[#4f555e] dark:text-white">
+              <SvgIcon icon="ri:delete-bin-line" />
+            </span>
+          </HoverButton>
+          <HoverButton v-if="!isMobile" @click="handleExport">
+            <span class="text-xl text-[#4f555e] dark:text-white">
+              <SvgIcon icon="ri:download-2-line" />
+            </span>
+          </HoverButton>
+          <HoverButton v-if="!isMobile" @click="toggleUsingContext">
+            <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
+              <SvgIcon icon="ri:chat-history-line" />
+            </span>
+          </HoverButton>
+          <NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
+            <template #default="{ handleInput, handleBlur, handleFocus }">
+              <NInput
+                v-model:value="prompt"
+                type="textarea"
+                :placeholder="placeholder"
+                :autosize="{ minRows: 1, maxRows: 2 }"
+                @input="handleInput"
+                @focus="handleFocus"
+                @blur="handleBlur"
+                @keypress="handleEnter"
+              />
+            </template>
+          </NAutoComplete>
           <NButton type="primary" :disabled="buttonDisabled" @click="handleSubmit">
             <template #icon>
               <span class="dark:text-black">

src/views/chat/layout/Layout.vue

@@ -3,7 +3,6 @@ import { computed } from 'vue'
 import { NLayout, NLayoutContent } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import Sider from './sider/index.vue'
-import Header from './header/index.vue'
 import Permission from './Permission.vue'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useAppStore, useAuthStore, useChatStore } from '@/store'
@@ -40,7 +39,6 @@ const getContainerClass = computed(() => {
     <div class="h-full overflow-hidden" :class="getMobileClass">
       <NLayout class="z-40 transition" :class="getContainerClass" has-sider>
         <Sider />
-        <Header v-if="isMobile" />
         <NLayoutContent class="h-full">
           <RouterView v-slot="{ Component, route }">
             <component :is="Component" :key="route.fullPath" />

src/views/chat/layout/header/index.vue

@@ -1,55 +0,0 @@
-<script lang="ts" setup>
-import { computed, nextTick } from 'vue'
-import { SvgIcon } from '@/components/common'
-import { useAppStore, useChatStore } from '@/store'
-
-const appStore = useAppStore()
-const chatStore = useChatStore()
-
-const collapsed = computed(() => appStore.siderCollapsed)
-const currentChatHistory = computed(() => chatStore.getChatHistoryByCurrentActive)
-
-function handleUpdateCollapsed() {
-  appStore.setSiderCollapsed(!collapsed.value)
-}
-
-function onScrollToTop() {
-  const scrollRef = document.querySelector('#scrollRef')
-  if (scrollRef)
-    nextTick(() => scrollRef.scrollTop = 0)
-}
-
-function onScrollToBottom() {
-  const scrollRef = document.querySelector('#scrollRef')
-  if (scrollRef)
-    nextTick(() => scrollRef.scrollTop = scrollRef.scrollHeight)
-}
-</script>
-
-<template>
-  <header
-    class="fixed top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 backdrop-blur"
-  >
-    <div class="relative flex items-center justify-between h-14">
-      <button
-        class="flex items-center justify-center w-11 h-11"
-        @click="handleUpdateCollapsed"
-      >
-        <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
-        <SvgIcon v-else class="text-2xl" icon="ri:align-right" />
-      </button>
-      <h1
-        class="flex-1 px-4 overflow-hidden text-center cursor-pointer select-none text-ellipsis whitespace-nowrap"
-        @dblclick="onScrollToTop"
-      >
-        {{ currentChatHistory?.title ?? '' }}
-      </h1>
-      <button
-        class="flex items-center justify-center w-11 h-11"
-        @click="onScrollToBottom"
-      >
-        <SvgIcon class="text-2xl" icon="ri:arrow-down-s-line" />
-      </button>
-    </div>
-  </header>
-</template>

src/views/chat/layout/sider/Footer.vue

@@ -9,8 +9,9 @@ const show = ref(false)
 
 <template>
   <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t dark:border-neutral-800">
-    <UserAvatar />
-
+    <div class="flex-1 flex-shrink-0 overflow-hidden">
+      <UserAvatar />
+    </div>
     <HoverButton :tooltip="$t('setting.setting')" @click="show = true">
       <span class="text-xl text-[#4f555e] dark:text-white">
         <SvgIcon icon="ri:settings-4-line" />

src/views/chat/layout/sider/index.vue

@@ -1,16 +1,18 @@
 <script setup lang='ts'>
 import type { CSSProperties } from 'vue'
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { NButton, NLayoutSider } from 'naive-ui'
 import List from './List.vue'
 import Footer from './Footer.vue'
 import { useAppStore, useChatStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { PromptStore } from '@/components/common'
 
 const appStore = useAppStore()
 const chatStore = useChatStore()
 
 const { isMobile } = useBasicLayout()
+const show = ref(false)
 
 const collapsed = computed(() => appStore.siderCollapsed)
 
@@ -75,6 +77,11 @@ watch(
         <div class="flex-1 min-h-0 pb-4 overflow-hidden">
           <List />
         </div>
+        <div class="p-4">
+          <NButton block @click="show = true">
+            Prompt Store
+          </NButton>
+        </div>
       </main>
       <Footer />
     </div>
@@ -82,4 +89,5 @@ watch(
   <template v-if="isMobile">
     <div v-show="!collapsed" class="fixed inset-0 z-40 bg-black/40" @click="handleUpdateCollapsed" />
   </template>
+  <PromptStore v-model:visible="show" />
 </template>

vite.config.ts

@@ -1,6 +1,7 @@
 import path from 'path'
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 
 export default defineConfig((env) => {
   const viteEnv = loadEnv(env.mode, process.cwd()) as unknown as ImportMetaEnv
@@ -11,7 +12,20 @@ export default defineConfig((env) => {
         '@': path.resolve(process.cwd(), 'src'),
       },
     },
-    plugins: [vue()],
+    plugins: [
+      vue(),
+      VitePWA({
+        injectRegister: 'auto',
+        manifest: {
+          name: 'chatGPT',
+          short_name: 'chatGPT',
+          icons: [
+            { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
+            { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
+          ],
+        },
+      }),
+    ],
     server: {
       host: '0.0.0.0',
       port: 1002,