chore: v2.5.0 整体优化 (#70)

* feat: locale language

* refactor: 页面暂存

* feat: 逻辑判断

* feat: 分组消息

* feat: 实验场

* feat: 重新请求结果

* feat: 基础问答逻辑和重新询问

* feat: 上下文消息删除确认

* feat: 处理类型报错

* chore: 更新 deps 和移除 i18n

* feat: 路由页面切换终止请求

* feat: let me think

* feat: 信息更新代码高亮匹配

* feat: 加载时添加光标

* feat: 错误提示

* feat: 历史记录删除确认

* fix: 侧边栏高度不正确的问题

* chore: version 2.5.0

* chore: update deps

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

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+interface Props {
+  image?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <img v-if="image" src="@/assets/avatar.jpg" class="object-cover w-full h-full " alt="avatar">
+  <span v-else class="text-[27px]">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" width="1em" height="1em">
+      <path d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z" />
+    </svg>
+  </span>
+</template>

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

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+interface Props {
+  inversion?: boolean
+  error?: boolean
+}
+
+defineProps<Props>()
+</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>
+</template>
+
+<style>
+.hljs {
+  background-color: #fff0 !important;
+}
+</style>

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

@@ -0,0 +1,54 @@
+<script setup lang='ts'>
+import Avatar from './Avatar.vue'
+import Text from './Text.vue'
+import { SvgIcon } from '@/components/common'
+
+interface Props {
+  dateTime?: string
+  text?: string
+  inversion?: boolean
+  error?: boolean
+  loading?: boolean
+}
+
+interface Emit {
+  (ev: 'regenerate'): void
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+function handleRegenerate() {
+  emit('regenerate')
+}
+</script>
+
+<template>
+  <div class="flex w-full mb-6" :class="[{ 'flex-row-reverse': inversion }]">
+    <div
+      class="flex items-center justify-center rounded-full overflow-hidden w-[32px] h-[32px]"
+      :class="[inversion ? 'ml-3' : 'mr-3']"
+    >
+      <Avatar :image="inversion" />
+    </div>
+    <div class="flex flex-col flex-1 text-sm" :class="[inversion ? 'items-end' : 'items-start']">
+      <span class="text-xs text-[#b4bbc4]">
+        {{ 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>
+        <button
+          v-if="!inversion && !loading"
+          class="mb-2 ml-2 transition text-neutral-400 hover:text-neutral-800"
+          @click="handleRegenerate"
+        >
+          <SvgIcon icon="ri:restart-line" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

src/views/chat/components/index.ts

@@ -0,0 +1,3 @@
+import Message from './Message/index.vue'
+
+export { Message }