From 1191bffd49dad83b576cd496cc5fc8a813037d79 Mon Sep 17 00:00:00 2001
From: Luo Yi <32430186+yilozt@users.noreply.github.com>
Date: Sat, 18 Mar 2023 14:32:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E7=94=A8=E4=BA=8E=E5=8E=9F=E6=96=87=E7=9A=84=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en-US.ts                        |  2 ++
 src/locales/zh-CN.ts                        |  2 ++
 src/views/chat/components/Message/Text.vue  |  5 +++--
 src/views/chat/components/Message/index.vue | 18 +++++++++++++++---
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index 0e9e3d3e9f..7021f1659f 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -46,6 +46,8 @@ export default {
     deleteMessageConfirm: 'Are you sure to delete this message?',
     deleteHistoryConfirm: 'Are you sure to clear this history?',
     clearHistoryConfirm: 'Are you sure to clear chat history?',
+    preview: 'Preview',
+    showRawText: 'Show as raw text',
   },
   setting: {
     setting: 'Setting',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index e47b850b07..0d7be6656a 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -46,6 +46,8 @@ export default {
     deleteMessageConfirm: '是否删除此消息?',
     deleteHistoryConfirm: '确定删除此记录?',
     clearHistoryConfirm: '确定清空聊天记录?',
+    preview: '预览',
+    showRawText: '显示原文',
   },
   setting: {
     setting: '设置',
diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
index f273443032..e23abac607 100644
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -12,6 +12,7 @@ interface Props {
   error?: boolean
   text?: string
   loading?: boolean
+  asRawText?: boolean
 }
 
 const props = defineProps<Props>()
@@ -49,7 +50,7 @@ const wrapClass = computed(() => {
 
 const text = computed(() => {
   const value = props.text ?? ''
-  if (!props.inversion)
+  if (!props.asRawText)
     return mdi.render(value)
   return value
 })
@@ -68,7 +69,7 @@ defineExpose({ textRef })
     </template>
     <template v-else>
       <div ref="textRef" class="leading-relaxed break-words">
-        <div v-if="!inversion" class="markdown-body" v-html="text" />
+        <div v-if="!asRawText" class="markdown-body" v-html="text" />
         <div v-else class="whitespace-pre-wrap" v-text="text" />
       </div>
     </template>
diff --git a/src/views/chat/components/Message/index.vue b/src/views/chat/components/Message/index.vue
index 0d462e923a..bfb73a66f2 100644
--- a/src/views/chat/components/Message/index.vue
+++ b/src/views/chat/components/Message/index.vue
@@ -7,6 +7,7 @@ import { SvgIcon } from '@/components/common'
 import { copyText } from '@/utils/format'
 import { useIconRender } from '@/hooks/useIconRender'
 import { t } from '@/locales'
+import { computed } from '@vue/reactivity'
 
 interface Props {
   dateTime?: string
@@ -29,7 +30,14 @@ const { iconRender } = useIconRender()
 
 const textRef = ref<HTMLElement>()
 
-const options = [
+const asRawText = ref(false);
+
+const options = computed(() => [
+  {
+    label: asRawText.value ? t('chat.preview') : t('chat.showRawText'),
+    key: 'toggleRenderType',
+    icon: iconRender({ icon: asRawText.value ? 'ic:outline-code-off' : 'ic:outline-code' })
+  },
   {
     label: t('chat.copy'),
     key: 'copyText',
@@ -40,13 +48,16 @@ const options = [
     key: 'delete',
     icon: iconRender({ icon: 'ri:delete-bin-line' }),
   },
-]
+])
 
-function handleSelect(key: 'copyRaw' | 'copyText' | 'delete') {
+function handleSelect(key: 'copyRaw' | 'copyText' | 'delete' | 'toggleRenderType') {
   switch (key) {
     case 'copyText':
       copyText({ text: props.text ?? '' })
       return
+    case 'toggleRenderType':
+      asRawText.value = !asRawText.value;
+      return
     case 'delete':
       emit('delete')
   }
@@ -79,6 +90,7 @@ function handleRegenerate() {
           :error="error"
           :text="text"
           :loading="loading"
+          :as-raw-text="asRawText"
         />
         <div class="flex flex-col">
           <button