更新chat的ui界面

src/components/chatui.vue

@@ -0,0 +1,29 @@
+<template>
+    <!-- <div style="border: 1px solid rgb(239, 239, 245);border-radius: 5px;position: relative;"> -->
+        <n-scrollbar style="padding: 10px;padding-right: 15px; border: 1px solid rgb(239, 239, 245);border-radius: 5px;position: relative;">
+            <div v-for="msg of props.messages">
+                <div style="color:slategrey;">{{ `${msg.from.split('-')[0]} ${msg.timestampString}` }}</div>
+                <div
+                    style="background-color: rgb(239, 239, 245); padding: 2px 7px; width: fit-content; border-radius: 5px; white-space: pre-wrap;">
+                    {{ msg.msg }}</div>
+            </div>
+            <n-empty description="无可显示消息" v-show="props.messages.length === 0" style="margin-top: 25vh;">
+                <template #extra>
+                </template>
+            </n-empty>
+            <div style="height: 30px;" v-show="props.messages.length !== 0"></div>
+        </n-scrollbar>
+    <!-- </div> -->
+</template>
+
+<script setup>
+import { NScrollbar,NEmpty } from 'naive-ui'
+const props = defineProps({
+    messages: {
+        type: Number,
+        required: true
+    },
+})
+</script>
+
+<style></style>