feat: 消息的调整

src/renderer/views/home/components/ChatAttach.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="tag-flex flex-wrap pt-3">
+        <div class="inline-flex items-center justify-center box-border border border-[#E5E8EE] rounded-lg py-0.5 px-2.5 mr-2 mb-2"
+            v-for="(item, index) in questionList" :key="index" @click="handleClick(item)">
+            <span class="tag-text-[#2d91ff] text-[10px]">{{ item }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { onMounted } from "vue";
+
+const props = defineProps({
+    question: {
+        type: String,
+        default: "",
+    },
+});
+
+const questionList = ref<string[]>([]);
+
+// 定义 emit 事件，向父组件发送选中的 tag
+const emit = defineEmits<{ (e: 'select', tag: string): void }>();
+
+const handleClick = (item: string) => {
+    emit('select', item);
+};
+
+onMounted(() => {
+    questionList.value = props.question.split(/[&|;]/).filter((tag) => tag.trim() !== "");
+});
+
+</script>

src/renderer/views/home/components/ChatRoleAI.vue

@@ -1,7 +1,11 @@
 <template>
-  <div class="text-sm text-gray-700 flex flex-row">
-    <div v-html="compiledMarkdown"></div>
-    <ChatLoading v-if="msg.isLoading" />
+  <div class="max-w-[75%] flex flex-col">
+    <slot name="header"></slot>
+    <div class="text-sm text-gray-700 flex flex-row">
+      <div v-html="compiledMarkdown"></div>
+      <ChatLoading v-if="msg.isLoading" />
+    </div>
+    <slot name="footer"></slot>
   </div>
 </template>
 
@@ -12,6 +16,7 @@ import MarkdownIt from 'markdown-it'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/github.css'
 import ChatLoading from './ChatLoading.vue';
+import { sl } from 'element-plus/es/locale/index.mjs';
 
 interface Props {
   msg: ChatMessage

src/renderer/views/home/components/ChatRoleMe.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="text-sm text-gray-700 bg-[#f7f9fc] rounded-md px-2 py-2">
-    {{ msg.messageContent }}
+  <div class="max-w-[75%]">
+    <slot name="header"></slot>
+    <div class="text-sm text-gray-700 bg-[#f7f9fc] rounded-md px-2 py-2">
+      {{ msg.messageContent }}
+    </div>
+    <slot name="footer"></slot>
   </div>
-
 </template>
 
 <script lang="ts" setup>