ai对话滚动条

src/layout/components/AIPage/AIPage.vue

@@ -1,7 +1,22 @@
 <template>
   <div class="AIPage">
     <div class="main">
-      <div class="chatBox" :style="{ height: chatBoxHeight }">
+      <div class="chatBox" ref="chatBox" :style="{ height: chatBoxHeight }">
+        <!-- 预设的对话 -->
+        <div class="oneChat">
+          <div class="top">
+            <img src="@/assets/images/newIndex/aiBot.png" alt="" />
+            <span>智聚AI</span>
+          </div>
+          <div class="chat botChat">
+            <p class="blue">
+              你好，我是智聚AI小助手，旨在为用户提供高效、便捷的服务。
+            </p>
+            <span
+              >无论是需要解答问题，还是获取信息，我都可以提供及时的帮助和支持。作为你的智能助手，我将尽力为你提供最优质的服务，让你更加轻松地处理各种事务。</span
+            >
+          </div>
+        </div>
         <div class="oneChat" v-for="item in msg" :key="item">
           <template v-if="item.role != 'system'">
             <div class="top">
@@ -23,7 +38,7 @@
       <div class="btnBox">
         <el-input
           v-model="iptText"
-          style="width: 100%"
+          style="width: 90%"
           :autosize="{ minRows: 2, maxRows: 5 }"
           type="textarea"
           placeholder="请在此输入关键词"
@@ -48,15 +63,12 @@ const chatBoxHeight = ref();
 const userInfo = ref({});
 const resultData = ref("");
 const disabled = ref(false);
+const chatBox = ref(null);
 const msg = ref([
   {
     role: "system",
     content: "你是智聚AI, 一个大语言模型，用于提供适当的答复和支持。",
   },
-  {
-    role: "assistant",
-    content: "你好，我是智聚AI, 一个大语言模型，用于提供适当的答复和支持。",
-  },
 ]);
 
 // el-input的最小高度为52px（2行），每增加一行高度增加21px，最大为115px（5行）
@@ -100,7 +112,7 @@ const enterChat = () => {
       function processText({ done, value }) {
         if (done) {
           disabled.value = false;
-        //   console.log("Stream finished");
+          //   console.log("Stream finished");
           return;
         }
         const message = decoder.decode(value);
@@ -134,7 +146,7 @@ watch(
     // 计算input高度（根据el-input实际高度调整）
     const ipt = document.getElementsByClassName("el-textarea__inner")[0];
     let inputHeight = ipt?.style.height.split("px")[0] || 52;
-    if(newValue == "")inputHeight = 52
+    if (newValue == "") inputHeight = 52;
     inputHeight = Math.min(inputHeight, maxInputHeight); // 限制最大高度
     chatBoxHeight.value = "calc(100% - " + inputHeight + "px - 5px)";
   },
@@ -143,6 +155,20 @@ watch(
     deep: true,
   }
 );
+watch(
+  msg,
+  () => {
+    nextTick(() => {
+      if (chatBox.value) {
+        chatBox.value.scrollTop = chatBox.value.scrollHeight;
+      }
+    });
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
 onMounted(() => {
   getUserInfo();
 });
@@ -196,10 +222,18 @@ onMounted(() => {
   }
   .botChat {
     background-color: #fff !important;
+    .blue {
+      color: #2e8bf6;
+      font-weight: bold;
+      font-size: 17px;
+    }
   }
 }
 .btnBox {
   position: relative;
+  background-color: #fff;
+  border-radius: 12px 12px 12px 12px;
+  display: flex;
   .chatBtn {
     position: absolute;
     top: calc(50% - 20px);
@@ -211,4 +245,9 @@ onMounted(() => {
     border-radius: 16px;
   }
 }
+:deep(.el-textarea__inner) {
+  border-radius: 12px 12px 12px 12px !important;
+  box-shadow: none !important;
+  resize: none !important;
+}
 </style>