feat: 支持 markdown 格式 (Chanzhaoyu#77)

* feat: 支持 markdown 格式和图片

* perf: 重载的时候滚动条保持

* chore: version 2.5.2

* feat: 添加文字换行

* chore: 添加新封面

* chore: 更新 cover

CHANGELOG.md

@@ -1,11 +1,21 @@
+## v2.5.2
+
+`2023-02-21`
+### Feature
+- 增加对 `markdown` 格式的支持 [Demo](https://github.com/Chanzhaoyu/chatgpt-web/pull/77)
+### BugFix
+- 重载会话时滚动条保持
+
 ## v2.5.1
 
 `2023-02-21`
+
 ### Enhancement
 - 调整路由模式为 `hash`
-- 调整新增会话添加到列表最前
+- 调整新增会话添加到
 - 调整移动端样式
 
+
 ## v2.5.0
 
 `2023-02-20`

README.md

@@ -2,7 +2,8 @@
 
 使用 express 和 vue3 搭建的 ChartGPT 演示网页
 
-![PC](./docs/cover.png)
+![cover](./docs/cover.png)
+![cover2](./docs/cover2.png)
 
 > 提示：目前 `OpenAI` 开放的模型最高只有 `GPT-3`，和现在网页所使用的 `GPT-3.5` 或 `GPT-4` 有很大差距，需要等官方开放最新的模型接口。
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "chatgpt-web",
- "version": "2.5.1",
+ "version": "2.5.2",
  "private": false,
  "description": "ChatGPT Web",
  "author": "ChenZhaoYu <[email protected]>",
@@ -25,6 +25,7 @@
  "dependencies": {
  "@vueuse/core": "^9.13.0",
  "highlight.js": "^11.7.0",
+ "marked": "^4.2.12",
  "naive-ui": "^2.34.3",
  "pinia": "^2.0.30",
  "vue": "^3.2.47",
@@ -36,6 +37,7 @@
  "@commitlint/config-conventional": "^17.4.4",
  "@iconify/vue": "^4.1.0",
  "@types/crypto-js": "^4.1.1",
+ "@types/marked": "^4.0.8",
  "@types/node": "^18.14.0",
  "@types/web-bluetooth": "^0.0.16",
  "@vitejs/plugin-vue": "^4.0.0",

src/directives/highlight.ts

@@ -1,9 +1,9 @@
 import type { App, Directive } from 'vue'
 import hljs from 'highlight.js'
+import includeCode from '@/utils/functions/includeCode'
 
 function highlightCode(el: HTMLElement) {
- const regexp = /^(?:\s{4}|\t).+/gm
- if (el.textContent?.indexOf(' = ') !== -1 || el.textContent.match(regexp))
+ if (includeCode(el.textContent))
  hljs.highlightBlock(el)
 }
 

src/utils/functions/includeCode.ts

@@ -0,0 +1,8 @@
+function includeCode(text: string | null | undefined) {
+ const regexp = /^(?:\s{4}|\t).+/gm
+ if (text?.includes(' = ') || text?.match(regexp))
+ return true
+ return false
+}
+
+export default includeCode

src/views/chat/components/Message/Text.vue

@@ -1,28 +1,60 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { marked } from 'marked'
+import includeCode from '@/utils/functions/includeCode'
+
 interface Props {
  inversion?: boolean
  error?: boolean
+ text?: string
+ loading?: boolean
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const wrapClass = computed(() => {
+ return [
+ 'text-wrap',
+ 'p-2',
+ 'min-w-[20px]',
+ 'rounded-md',
+ props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
+ { 'text-red-500': props.error },
+ ]
+})
+
+const text = computed(() => {
+ if (props.text) {
+ if (!includeCode(props.text))
+ return marked.parse(props.text)
+ return props.text
+ }
+ return ''
+})
 </script>
 
 <template>
- <div
- class="min-w-[20px] p-2 rounded-md"
- :class="[inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]', { 'text-red-500': error }]"
- >
- <span
- v-highlight
- class="leading-relaxed whitespace-pre-wrap"
- >
- <slot />
- </span>
+ <div :class="wrapClass">
+ <template v-if="loading">
+ <span class="w-[3px] h-[20px] block animate-blink" />
+ </template>
+ <template v-else>
+ <code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
+ <div v-else class="leading-relaxed break-all" v-html="text" />
+ </template>
  </div>
 </template>
 
-<style>
+<style lang="less">
+.text-wrap{
+ img{
+ max-width: 100%;
+ vertical-align: middle;
+ }
+}
+
 .hljs {
  background-color: #fff0 !important;
+ white-space: break-spaces;
 }
 </style>

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

@@ -37,10 +37,7 @@ function handleRegenerate() {
  {{ dateTime }}
  </span>
  <div class="flex items-end mt-2">
- <Text :inversion="inversion" :error="error">
- <span v-if="loading" class="w-[3px] h-[20px] block animate-blink" />
- <span v-else>{{ text }}</span>
- </Text>
+ <Text :inversion="inversion" :error="error" :text="text" :loading="loading" />
  <button
  v-if="!inversion && !loading"
  class="mb-2 ml-2 transition text-neutral-400 hover:text-neutral-800"

src/views/chat/index.vue

@@ -153,7 +153,6 @@ async function onRegenerate(index: number) {
  requestOptions: { prompt: message, ...options },
  },
  )
- scrollToBottom()
 
  try {
  const { data } = await fetchChatAPI<Chat.ConversationResponse>(message, options, controller.signal)
@@ -170,7 +169,6 @@ async function onRegenerate(index: number) {
  requestOptions: { prompt: message, ...options },
  },
  )
- scrollToBottom()
  }
  catch (error: any) {
  let errorMessage = 'Something went wrong, please try again later.'
@@ -191,7 +189,6 @@ async function onRegenerate(index: number) {
  requestOptions: { prompt: message, ...options },
  },
  )
- scrollToBottom()
  }
  finally {
  loading.value = false