update

src/components/pages/aiAddCourse/aiBoxRight.vue

@@ -1,28 +1,30 @@
 <template>
-  <div class="ai_body">
-    <div class="ai_body_dialog" v-loading="loading" ref="chatDialog">
-      <div
-        class="dialog_content"
-        v-for="(item) in array"
-        :key="item.uid"
-      >
+  <div class="ai_body" v-loading="loading">
+    <div
+      class="ai_body_dialog"
+      
+      ref="chatDialog"
+    >
+      <div class="dialog_content" v-for="item in array" :key="item.uid">
         <div v-if="item.content" style="margin-left: auto;">
           <div class="content content2" v-html="item.content"></div>
           <div class="role">
             <img src="../../../assets/icon/new/role2.png" />
           </div>
         </div>
-        <div style="margin-top:10px; margin-right: auto;">
+        <div style="margin-top:20px;margin-bottom:20px ; margin-right: auto;">
           <div class="role">
             <img src="../../../assets/icon/new/role1.png" />
           </div>
           <div
-           element-loading-background="#f6f9ff" 
-           :style="{minHeight: item.loading ? '50px' : 'unset', minWidth: item.loading ? '50px' : 'unset'}"
+            element-loading-background="#f6f9ff"
+            :style="{
+              minHeight: item.loading ? '50px' : 'unset',
+              minWidth: item.loading ? '50px' : 'unset'
+            }"
             class="content"
             v-loading="item.loading"
-            v-html="item.aiContent"
-          ></div>
+          ><span v-html="item.aiContent"></span><span class="createTime" v-text="item.createtime"></span></div>
         </div>
       </div>
     </div>
@@ -95,6 +97,52 @@
       </span>
     </div>
     <div class="ai_body_input">
+      <div class="ai_b_i_btnArea">
+        <span @click.stop="clear()">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M2.5 3.125C2.5 2.77982 2.77982 2.5 3.125 2.5H16.875C17.2202 2.5 17.5 2.77982 17.5 3.125V8.02715C17.5 8.37233 17.2202 8.65215 16.875 8.65215C16.5298 8.65215 16.25 8.37233 16.25 8.02715V3.75H3.75V16.25H8.125C8.47018 16.25 8.75 16.5298 8.75 16.875C8.75 17.2202 8.47018 17.5 8.125 17.5H3.125C2.77982 17.5 2.5 17.2202 2.5 16.875V3.125Z"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M5.625 6.1521C5.625 5.80692 5.90482 5.5271 6.25 5.5271H13.125C13.4702 5.5271 13.75 5.80692 13.75 6.1521C13.75 6.49728 13.4702 6.7771 13.125 6.7771H6.25C5.90482 6.7771 5.625 6.49728 5.625 6.1521Z"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M5.625 9.2771C5.625 8.93192 5.90482 8.6521 6.25 8.6521H9.37496C9.72014 8.6521 9.99996 8.93192 9.99996 9.2771C9.99996 9.62228 9.72014 9.9021 9.37496 9.9021H6.25C5.90482 9.9021 5.625 9.62228 5.625 9.2771Z"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M12.465 11.507L15.9141 14.9048C16.1279 14.5365 16.25 14.1088 16.25 13.6521C16.25 12.2714 15.1307 11.1521 13.75 11.1521C13.2799 11.1521 12.8406 11.2815 12.465 11.507ZM15.0374 15.7957L11.5873 12.397C11.3726 12.7659 11.25 13.1944 11.25 13.6521C11.25 15.0328 12.3693 16.1521 13.75 16.1521C14.2211 16.1521 14.6613 16.0222 15.0374 15.7957ZM11.0797 11.0192C11.759 10.3303 12.7051 9.9021 13.75 9.9021C15.8211 9.9021 17.5 11.581 17.5 13.6521C17.5 14.6767 17.0882 15.6064 16.4226 16.2827C15.7431 16.9729 14.7961 17.4021 13.75 17.4021C11.6789 17.4021 10 15.7232 10 13.6521C10 12.6263 10.4127 11.6957 11.0797 11.0192Z"
+            />
+          </svg>
+          <span>清屏</span>
+        </span>
+      </div>
+      <textarea
+        class="ai_body_input_textarea"
+        @input="inputChange"
+        @keydown="textareaKeydown"
+        ref="textareaRef"
+        v-model.trim="courseText"
+        placeholder="在此输入您想了解的内容"
+      ></textarea>
+      <div class="c_pub_button_confirm" v-if="!loading" @click="addContent">
+        发送
+      </div>
+    </div>
+    <!-- <div class="ai_body_input">
       <textarea
         style="padding-right: 85px;"
         rows="3"
@@ -112,7 +160,7 @@
         发送
       </div>
       <div class="c_pub_button_confirm" @click="promptTit" v-else>发送</div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -126,10 +174,10 @@ export default {
     unitJson: {
       type: Array
     },
-		courseId:{
-			type:String,
-			default:""
-		},
+    courseId: {
+      type: String,
+      default: ""
+    }
   },
   data() {
     return {
@@ -137,7 +185,7 @@ export default {
       courseText: "",
       checkImg: checkImg,
       checkIsImg: checkIsImg,
-			userid: this.$route.query.userid,
+      userid: this.$route.query.userid,
       checkArray: [],
       course: [{ title: "任务1" }, { title: "任务2" }, { title: "任务3" }],
       partArray: [
@@ -147,7 +195,8 @@ export default {
       ],
       part: "全部内容",
       checkBool: false,
-      loading: false
+      loading: false,
+      textareaHeight: 50
     };
   },
   watch: {
@@ -162,10 +211,10 @@ export default {
       immediate: true,
       deep: true,
       handler(newValue, oldValue) {
-        if(newValue){
+        if (newValue) {
           this.getChatList().then(_ => {
             this.$nextTick(() => {
-              console.log(this.$refs.chatDialog.scrollHeight)
+              console.log(this.$refs.chatDialog.scrollHeight);
               this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
             });
           });
@@ -188,41 +237,41 @@ export default {
       }
     },
     addContent() {
-      let message = this.courseText
+      let message = this.courseText;
       if (this.courseText) {
         let msg = `
-          ATTENTION: Use '##' to SPLIT SECTIONS, not '#'.Output format carefully referenced "Format example".`
-        if(this.checkArray.length){
-          let task = []
-          if(this.part == "全部内容"){
-            for(var i = 0; i < this.checkArray.length; i++){
-              let _index = this.checkArray[i]
-              task.push(this.course[_index])
+          ATTENTION: Use '##' to SPLIT SECTIONS, not '#'.Output format carefully referenced "Format example".`;
+        if (this.checkArray.length) {
+          let task = [];
+          if (this.part == "全部内容") {
+            for (var i = 0; i < this.checkArray.length; i++) {
+              let _index = this.checkArray[i];
+              task.push(this.course[_index]);
             }
-          }else if(this.part == "任务设计"){
-            for(var i = 0; i < this.checkArray.length; i++){
-              let _index = this.checkArray[i]
-              task.push(this.course[_index])
+          } else if (this.part == "任务设计") {
+            for (var i = 0; i < this.checkArray.length; i++) {
+              let _index = this.checkArray[i];
+              task.push(this.course[_index]);
             }
-          }else if(this.part == "评价设计"){
-            for(var i = 0; i < this.checkArray.length; i++){
-              let _index = this.checkArray[i]
-              task.push(this.course[_index].eList)
+          } else if (this.part == "评价设计") {
+            for (var i = 0; i < this.checkArray.length; i++) {
+              let _index = this.checkArray[i];
+              task.push(this.course[_index].eList);
             }
           }
-          
+
           msg += `
           --------
           ## 修改内容
           ${JSON.stringify(task)}
-          `
+          `;
 
           msg += `
           --------
           ## 要求
           ${this.courseText}
-          `
-          message = msg
+          `;
+          message = msg;
         }
         let _uuid = uuidv4();
         this.array.push({
@@ -236,26 +285,38 @@ export default {
           filename: "",
           index: this.array.length,
           is_mind_map: false,
+          createtime: new Date().toLocaleString().replaceAll("/", "-"),
           loading: true
         });
+
+        let history = [];
+        this.array.forEach(i => {
+          if (i.content) history.push({ role: "user", content: i.content });
+          if (i.aiContent)
+            history.push({ role: "assistant", content: i.aiContent });
+        });
+
+        history.push({ role: "user", content: message });
         this.$nextTick(() => {
           this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
         });
         let params = JSON.stringify({
           // model: "gpt-3.5-turbo",
-          model: 'gpt-4o-2024-08-06',
+          model: "gpt-4o-2024-08-06",
           temperature: 0,
           max_tokens: 4096,
           top_p: 1,
           frequency_penalty: 0,
           presence_penalty: 0,
-          messages: [{ role: "user", content: message }],
+          messages: history,
           uid: _uuid,
           mind_map_question: ""
         });
         this.courseText = "";
 
-        this.ajax.post("https://gpt4.cocorobo.cn/chat", params).then(res => {
+        this.ajax
+          .post("https://gpt4.cocorobo.cn/chat", params)
+          .then(res => {
             if (res.data.FunctionResponse.result == "发送成功") {
             } else {
               this.$message.warning(res.data.FunctionResponse.result);
@@ -285,7 +346,7 @@ export default {
           this.array.find(i => i.uid == _uid).isShowSynchronization = true;
           this.array.find(i => i.uid == _uid).loading = false;
           // 这里保存对话
-          if(this.courseId){
+          if (this.courseId) {
             this.insertChat(_uid);
           }
           return;
@@ -364,22 +425,25 @@ export default {
                   filename: _data[i].filename,
                   index: i,
                   is_mind_map: false,
-                  fileid: _data[i].fileid
+                  fileid: _data[i].fileid,
+									createtime:_data[i].createtime
                 });
               }
               this.array = _chatList;
               this.loading = false;
             } else {
-              let _uid = uuidv4()
+              let _uid = uuidv4();
               let _chatList = [];
               _chatList.push({
                 loading: false,
                 role: "",
-                content: '',
+                content: "",
                 uid: _uid,
                 AI: "AI",
-                aiContent: '您好，我是您的创课助手小可，在创课中遇到什么问题，都可以与我对话~,我会尽量帮助您的',
-                oldContent: '您好，我是您的创课助手小可，在创课中遇到什么问题，都可以与我对话~,我会尽量帮助您的',
+                aiContent:
+                  "您好，我是您的创课助手小可，在创课中遇到什么问题，都可以与我对话~,我会尽量帮助您的",
+                oldContent:
+                  "您好，我是您的创课助手小可，在创课中遇到什么问题，都可以与我对话~,我会尽量帮助您的",
                 isShowSynchronization: false,
                 filename: "",
                 index: 0,
@@ -387,8 +451,8 @@ export default {
                 fileid: ""
               });
               this.array = _chatList;
-              if(this.courseId){
-                this.insertChat(_uid)
+              if (this.courseId) {
+                this.insertChat(_uid);
               }
               //没有对话记录
               this.loading = false;
@@ -423,7 +487,61 @@ export default {
     },
     checkPart(name) {
       this.part = name;
-    }
+    },
+    inputChange() {
+      if (this.courseText.at(-1) == "@") {
+        console.log("哇咔咔");
+      }
+      if (this.courseText.at(-1) == "/") {
+        console.log("哇卡ka2");
+      }
+
+      this.$nextTick(() => {
+        this.$refs.textareaRef.style.height = "35px";
+        this.$refs.textareaRef.style.height =
+          this.$refs.textareaRef.scrollHeight + "px";
+        this.textareaHeight = this.$refs.textareaRef.style.height;
+      });
+    },
+    textareaKeydown(_e) {
+			
+      if (_e.key === "Enter") {
+				_e.preventDefault();
+        if (_e.shiftKey) {
+          this.courseText += "\n";
+        } else {
+          this.addContent();
+        }
+      }
+    },
+		clear(){
+			this.$confirm("确定清空聊天记录吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(_ => {
+          this.loading = true;
+          let params = {
+            user_id: this.userid,
+            id: "602def61-005d-11ee-91d8-005056b8q12w",
+            session_name: `${this.courseId}-addCourseA`
+          };
+
+          this.ajax
+            .post("https://gpt4.cocorobo.cn/delete_park_session", params)
+            .then(res => {
+              this.array = [];
+              this.$message.success("清除聊天记录成功");
+              this.loading = false;
+            })
+            .catch(err => {
+              this.loading = false;
+              this.$message.error("清除聊天记录失败");
+            });
+        })
+        .catch(_ => {});
+		}
   },
   computed: {
     courseTextLength() {
@@ -446,7 +564,7 @@ export default {
   mounted() {
     this.getChatList().then(_ => {
       this.$nextTick(() => {
-				console.log(this.$refs.chatDialog.scrollHeight)
+        console.log(this.$refs.chatDialog.scrollHeight);
         this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
       });
     });
@@ -518,30 +636,132 @@ export default {
 .ai_body_input {
   position: relative;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: end;
+
   margin-top: auto;
-  min-height: fit-content;
+  width: 100%;
+  /* height: auto; */
+  /* max-height: 80vh; */
+  justify-content: space-between;
+  align-items: flex-end;
+  border-radius: 10px;
+  border: 1.5px solid #3681fc !important;
+  /* padding: 10px;
+	padding-top: 20px; */
+  /* overflow: auto; */
+}
+
+.ai_b_i_btnArea {
+  width: 100%;
+  position: absolute;
+  bottom: calc(100% + 5px);
+  height: 30px;
+}
+
+.ai_b_i_btnArea > span {
+  box-sizing: border-box;
+  height: 90%;
+  width: 90px;
+  box-sizing: border-box;
+  cursor: pointer;
+  border: solid 1px #3781fb;
+  border-radius: 15px;
+  display: flex;
+	font-size: 15px;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+.ai_b_i_btnArea > span > svg {
+  width: 17px;
+  height: 17px;
+  margin-right: 5px;
+	fill: black;
+}
+
+.ai_b_i_btnArea > span:hover {
+  background-color: #ebf4fe;
+  color: #409eff;
+}
+
+.ai_b_i_btnArea > span:hover > svg {
+  fill: #409eff;
+}
+
+.ai_body_input_textarea {
+  flex: 1;
+  margin: 10px 5px 10px 5px;
+  min-height: 35px;
+  height: 35px;
+  max-height: 60vh;
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: 18px;
+  overflow: auto;
+	padding-right: 100px;
+}
+
+.ai_body_input_textarea::-webkit-input-placeholder {
+  font-size: 16px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+}
+
+.ai_body_input_textarea::-moz-placeholder {
+  font-size: 16px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+  opacity: 1; /* 修复Firefox的透明度问题 */
+}
+
+.ai_body_input_textarea::-moz-placeholder {
+  font-size: 16px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+  opacity: 1; /* 修复Firefox的透明度问题 */
+}
+
+.ai_body_input_textarea::-ms-input-placeholder {
+  font-size: 16px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+}
+
+
+.ai_body_input_textarea::-webkit-scrollbar {
+  width: 6px;
+}
+
+.ai_body_input_textarea::-webkit-scrollbar-track {
+  background: #D8D9DC;
+  border-radius: 2px;
+}
+
+.ai_body_input_textarea::-webkit-scrollbar-thumb {
+  background: #C9C9C9;
+  border-radius: 10px;
+}
+.ai_body_input_textarea::-webkit-scrollbar-thumb:hover {
+  background: #C9C9C9;
 }
 
 .c_pub_button_confirm {
   /* position: absolute;
     bottom: 13px;
     right: 13px; */
-  margin-top: 10px;
+  /* margin-top: 10px; */
   width: 80px;
+  margin-right: 5px;
   display: flex;
   justify-content: center;
+  margin-bottom: 10px;
   position: absolute;
-  right: 12px;
-  bottom: 6px;
+  right: 10px;
+  bottom: 0px;
 }
 
 .ai_body_dialog {
   padding: 10px 0;
   box-sizing: border-box;
-  height: calc(100%);
+  /* min-height: calc(20vh - 10px); */
+  /* height: calc(100%); */
   overflow: auto;
   margin-bottom: 10px;
 }
@@ -593,8 +813,20 @@ export default {
   /* white-space: pre-line; */
   max-width: calc(100% - 50px);
   background: #f6f9ff;
-  overflow: hidden;
+  /* overflow: hidden; */
   margin: 0 10px;
+	position: relative;
+}
+
+.createTime{
+	width: 100%;
+	height: 20px;
+	position: absolute;
+	bottom: -25px;
+	left: 0;
+	font-size: 14px;
+	white-space: nowrap;
+	color: #919191;
 }
 
 .dialog_content > div .content2 {
@@ -763,4 +995,5 @@ export default {
   color: #0061ff;
   border-color: #0061ff;
 }
+
 </style>