fix: 修复打字机动画 (cherry picked from ChenZhaoYu upstream) (chatgpt-web-de…

…v#544)

(cherry picked from commit c226d07)
Signed-off-by: Bob Du <i@bobdu.cc>

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

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

@@ -81,20 +81,24 @@ function addCopyEvents() {
     })
   }
 }
+
 function removeCopyEvents() {
   if (textRef.value) {
     const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy')
     copyBtn.forEach((btn) => {
-      btn.removeEventListener('click', () => { })
+      btn.removeEventListener('click', () => {})
     })
   }
 }
+
 onMounted(() => {
   addCopyEvents()
 })
+
 onUpdated(() => {
   addCopyEvents()
 })
+
 onUnmounted(() => {
   removeCopyEvents()
 })
@@ -104,9 +108,8 @@ onUnmounted(() => {
   <div class="text-black" :class="wrapClass">
     <div ref="textRef" class="leading-relaxed break-words">
       <div v-if="!inversion" class="flex items-end">
-        <div v-if="!asRawText" class="w-full markdown-body" v-html="text" />
+        <div v-if="!asRawText" class="w-full markdown-body" :class="{ 'markdown-body-generate': loading }" v-html="text" />
         <div v-else class="w-full whitespace-pre-wrap" v-text="text" />
-        <span v-if="loading" class="dark:text-white w-[4px] h-[20px] block animate-blink" />
       </div>
       <div v-else class="whitespace-pre-wrap" v-text="text" />
       <img v-for="(v, i) of images" :key="i" :src="`/uploads/${v}`" alt="" width="160px">

src/views/chat/components/Message/style.less

@@ -57,10 +57,60 @@
 		}
 	}
 
+
+	&.markdown-body-generate>dd:last-child:after,
+	&.markdown-body-generate>dl:last-child:after,
+	&.markdown-body-generate>dt:last-child:after,
+	&.markdown-body-generate>h1:last-child:after,
+	&.markdown-body-generate>h2:last-child:after,
+	&.markdown-body-generate>h3:last-child:after,
+	&.markdown-body-generate>h4:last-child:after,
+	&.markdown-body-generate>h5:last-child:after,
+	&.markdown-body-generate>h6:last-child:after,
+	&.markdown-body-generate>li:last-child:after,
+	&.markdown-body-generate>ol:last-child li:last-child:after,
+	&.markdown-body-generate>p:last-child:after,
+	&.markdown-body-generate>pre:last-child code:after,
+	&.markdown-body-generate>td:last-child:after,
+	&.markdown-body-generate>ul:last-child li:last-child:after {
+		animation: blink 1s steps(5, start) infinite;
+		color: #000;
+		content: '_';
+		font-weight: 700;
+		margin-left: 3px;
+		vertical-align: baseline;
+	}
+
+	@keyframes blink {
+		to {
+			visibility: hidden;
+		}
+	}
 }
 
 html.dark {
 
+	.markdown-body {
+
+		&.markdown-body-generate>dd:last-child:after,
+		&.markdown-body-generate>dl:last-child:after,
+		&.markdown-body-generate>dt:last-child:after,
+		&.markdown-body-generate>h1:last-child:after,
+		&.markdown-body-generate>h2:last-child:after,
+		&.markdown-body-generate>h3:last-child:after,
+		&.markdown-body-generate>h4:last-child:after,
+		&.markdown-body-generate>h5:last-child:after,
+		&.markdown-body-generate>h6:last-child:after,
+		&.markdown-body-generate>li:last-child:after,
+		&.markdown-body-generate>ol:last-child li:last-child:after,
+		&.markdown-body-generate>p:last-child:after,
+		&.markdown-body-generate>pre:last-child code:after,
+		&.markdown-body-generate>td:last-child:after,
+		&.markdown-body-generate>ul:last-child li:last-child:after {
+			color: #65a665;
+		}
+	}
+
 	.message-reply {
 		.whitespace-pre-wrap {
 			white-space: pre-wrap;
@@ -73,3 +123,13 @@ html.dark {
 		background-color: #282c34;
 	}
 }
+
+@media screen and (max-width: 533px) {
+	.markdown-body .code-block-wrapper {
+		padding: unset;
+
+		code {
+			padding: 24px 16px 16px 16px;
+		}
+	}
+}