feat: 调整消息布局以便扩展

src/components/business/Chat/components/Message/Text.vue

@@ -1,5 +1,15 @@
+<script lang="ts" setup>
+interface Props {
+  reversal?: boolean
+}
+
+defineProps<Props>()
+</script>
+
 <template>
-  <span class="leading-relaxed whitespace-pre-wrap">
+  <div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
-    <slot />
+    <span class="leading-relaxed whitespace-pre-wrap">
-  </span>
+      <slot />
+    </span>
+  </div>
 </template>

src/components/business/Chat/components/Message/index.vue

@@ -23,9 +23,9 @@ defineProps<Props>()
       <span class="text-xs text-[#b4bbc4]">
         {{ dateTime }}
       </span>
-      <div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
+      <Text :reversal="reversal">
-        <Text>{{ message }}</Text>
+        {{ message }}
-      </div>
+      </Text>
     </div>
   </div>
 </template>

src/components/business/Chat/index.vue

@@ -92,7 +92,7 @@ function addMessage(message: string, reversal = false) {
         <div class="flex items-center justify-between space-x-2">
           <HoverButton tooltip="Clear conversations" @click="handleClear">
             <span class="text-xl text-[#4f555e]">
-              <SvgIcon icon="ri:refresh-line" />
+              <SvgIcon icon="ri:delete-bin-line" />
             </span>
           </HoverButton>
           <NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />