@角色

src/components/pages/aiAddCourse/aiBoxRight.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="ai_body" v-loading="loading">
-    <div
-      class="ai_body_dialog"
-      
-      ref="chatDialog"
-    >
+    <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>
@@ -14,7 +10,7 @@
         </div>
         <div style="margin-top:20px;margin-bottom:20px ; margin-right: auto;">
           <div class="role">
-            <img src="../../../assets/icon/new/role1.png" />
+            <img :src="item.fileid?item.fileid:require('../../../assets/icon/new/role1.png')" />
           </div>
           <div
             element-loading-background="#f6f9ff"
@@ -24,7 +20,10 @@
             }"
             class="content"
             v-loading="item.loading"
-          ><span v-html="item.aiContent"></span><span class="createTime" v-text="item.createtime"></span></div>
+          >
+            <span v-html="item.aiContent"></span
+            ><span class="createTime" v-text="item.createtime"></span>
+          </div>
         </div>
       </div>
     </div>
@@ -130,6 +129,47 @@
           <span>清屏</span>
         </span>
       </div>
+
+      <div
+        class="ai_b_i_roleListBox"
+        ref="roleListRef"
+        v-if="showRoleList && choseRoleList.length > 0"
+      >
+        <div
+          :class="[
+            'ai_b_i_rlb_item',
+            index == choseRoleItem ? 'ai_b_i_rlb_itemActive' : ''
+          ]"
+          :ref="`roleItem${index}Ref`"
+          v-for="(item, index) in choseRoleList"
+          :key="item.id"
+          @mouseover="choseRoleItem = index"
+          @click.stop="choseRole(item)"
+        >
+          <div class="ai_b_i_rlb_itemTop">
+            <img
+              :src="
+                item.headUrl
+                  ? item.headUrl
+                  : require('../../../assets/icon/new/role1.png')
+              "
+              alt=""
+            />
+            <div class="ai_b_i_rlb_i_name">
+              <span>{{ item.assistantName }}</span>
+              <span>作者：{{ item.username }}</span>
+            </div>
+          </div>
+          <div class="ai_b_i_rlb_itemBottom">
+            {{ item.prologue }}
+          </div>
+        </div>
+      </div>
+
+			<!-- <div class="ai_b_i_textListBox">
+				<div class="ai_b_i_tlb_left"></div>
+				<div class="ai_b_i_tlb_right"></div>
+			</div> -->
       <textarea
         class="ai_body_input_textarea"
         @input="inputChange"
@@ -138,7 +178,14 @@
         v-model.trim="courseText"
         placeholder="在此输入您想了解的内容"
       ></textarea>
-      <div class="c_pub_button_confirm" v-if="!loading" @click="addContent">
+      <div
+        :class="[
+          'c_pub_button_confirm',
+          courseText ? '' : 'c_pub_button_confirmDisabled'
+        ]"
+        v-if="!loading"
+        @click="addContent"
+      >
         发送
       </div>
     </div>
@@ -186,6 +233,8 @@ export default {
       checkImg: checkImg,
       checkIsImg: checkIsImg,
       userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
       checkArray: [],
       course: [{ title: "任务1" }, { title: "任务2" }, { title: "任务3" }],
       partArray: [
@@ -196,7 +245,37 @@ export default {
       part: "全部内容",
       checkBool: false,
       loading: false,
-      textareaHeight: 50
+      textareaHeight: 50,
+      publicRoleList: [],
+      roleList: [],
+			textList:[
+				{
+					title:"项目式学习",
+					dataList:['请给我一些学生开展项目式学习可以使用的主题或问题参考，请说出学生将要解决的问题，以及学生要经历怎样的学习活动。','请将一个关于生态保护项目的项目式学习展开描述，你需要描述学生如何解决这个问题，你需要至少写出四个活动，这些活动需要按照前后逻辑关系排列。','请对驱动问题为“如何为学校建造一个富有特色的花坛？”的项目式学习进行子问题拆解，至少拆解为5个子问题，并根据子问题对应写出各环节的主要活动。']
+				},{
+					title:"教学评价",
+					dataList:['如果需要给学生的社区服务进行评价，给出评价维度和至少3个等级的表现描述。','为6年级学生设计一份关于梧桐山研究报告的评估任务表，并给出参考的报告流程，至少包含8个步骤，并包括地图、图片和至少300个词。','创建一个给5年级学生使用的课堂小测试，包含5道多选题，评价学生对于太阳能这个概念的理解。你需要给出题目和正确答案。']
+				},{
+					title:"教学设计",
+					dataList:['如果需要5年级学生感受“移步换景”的景观写作手法，你有什么合适的阅读材料推荐？你需要给出材料名称，以及材料的哪部分内容。','设计一个针对8年级学生且关于人类迁徙主题的地理课，并在课程中设计至少1项小组活动。','设计一个针对5年级学生的课程，课程综合科学和信息技术领域，解决生物与环境领域的生活问题，你需要给出完整的课程框架和活动。','如果3年级的学生不能理解光合作用的实现过程，需要你帮我设计一个支持他们理解的教学活动，需要包含活动的形式、实施材料和清单。','请基于贝叶斯定理为8年级学生出三道题目。','如果需要八年级学生了解尼罗河流域的文化发展史，你有哪些推荐的网站或参考书籍？']
+				},{
+					title:"班级管理",
+					dataList:['创建一组给一年级学生使用的班级口号，要求大家注意卫生、保护环境，口号需要对仗工整，符合一年级学生的理解水平。',' 设计一套用于6年级学生的班级管理规章制度，内容需要包括学习、纪律、卫生、思想品德方面。']
+				},{
+					title:"课堂组织",
+					dataList:['请为“制作垃圾分类宣传单”的小组活动设计小组分工表，每个小组的成员为4-6人。','请给5年级“校园植物图鉴”社团课程设计一份小组合作公约，需包含小组成员信息、小组项目目标、填写日期，总长度不超过300字，并且提供至少3处学生自行填写的部分。','请用苏格拉底提问的方式，引导5年级学生拆解驱动问题：如何解决教室黑板反光的问题？其中需包含对于反光原因的分析与实验探究。']
+				},{
+					title:"教师发展",
+					dataList:['教师需要理解项目式学习的理论基础和基础概念，你需要生成一份阅读清单，要求内容为中文书籍或文献。','设计一个教师进行个人学期总结的框架，需要体现在教学、教研、个人学习方面的进步。']
+				},{
+					title:"代码分析",
+					dataList:['这段代码实现了什么效果？','请描述这段代码。','根据这段代码，给我一些修改意见。']
+				},
+			],
+			showTextList:false,
+      showRoleList: false,
+      choseRoleItem: 0,
+			choseTextItem:0,
     };
   },
   watch: {
@@ -273,59 +352,154 @@ export default {
           `;
           message = msg;
         }
-        let _uuid = uuidv4();
-        this.array.push({
-          role: "user",
-          content: `${this.courseText}`,
-          uid: _uuid,
-          AI: "AI",
-          aiContent: "",
-          oldContent: "",
-          isShowSynchronization: false,
-          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 });
+        // 这里处理@的角色
+        let _atRoleList = [];
+        let _roleList = [...this.roleList, ...this.publicRoleList];
+        _roleList.forEach(i => {
+          if (message.indexOf(`@${i.assistantName}`) != -1) {
+            _atRoleList.push(i);
+          }
         });
 
-        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",
-          temperature: 0,
-          max_tokens: 4096,
-          top_p: 1,
-          frequency_penalty: 0,
-          presence_penalty: 0,
-          messages: history,
-          uid: _uuid,
-          mind_map_question: ""
-        });
-        this.courseText = "";
+        if (_atRoleList.length > 0) {
+          //有@角色
+          let _replaceText = message;
+          let _htmlText = message;
+          _atRoleList.forEach(_i => {
+            _replaceText = _replaceText.replaceAll(`@${_i.assistantName}`, ``);
+            _htmlText = _htmlText.replaceAll(
+              `@${_i.assistantName}`,
+              `<span class='aite-name'>@${_i.assistantName}</span>`
+            );
+          });
 
-        this.ajax
-          .post("https://gpt4.cocorobo.cn/chat", params)
-          .then(res => {
-            if (res.data.FunctionResponse.result == "发送成功") {
+          _atRoleList.forEach((_item, _index) => {
+            const _uid = uuidv4();
+            if (_index == 0) {
+              this.array.push({
+                loading: true,
+                role: "user",
+                content: _htmlText,
+                uid: _uid,
+                AI: "AI",
+                aiContent: "",
+                oldContent: "",
+                isShowSynchronization: false,
+                filename: _item.assistantName,
+                index: this.array.length,
+                is_mind_map: false,
+                fileid: _item.headUrl,
+                createtime: new Date().toLocaleString().replaceAll("/", "-")
+              });
             } else {
-              this.$message.warning(res.data.FunctionResponse.result);
+              this.array.push({
+                loading: true,
+                role: "user",
+                content: "",
+                uid: _uid,
+                AI: "AI",
+                aiContent: "",
+                oldContent: "",
+                isShowSynchronization: false,
+                filename: _item.assistantName,
+                index: this.array.length,
+                is_mind_map: false,
+                fileid: _item.headUrl,
+                createtime: new Date().toLocaleString().replaceAll("/", "-")
+              });
             }
-          })
-          .catch(e => {
-            console.log(e);
+            this.$nextTick(() => {
+              this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
+            });
+
+            let params = {
+              assistant_id: _item.assistant_id,
+              userId: this.userid,
+              message: _replaceText,
+              session_name: `${this.courseId}-addCourseA`,
+              uid: _uid,
+              file_ids: [],
+              model: "gpt-4o-2024-08-06"
+            };
+            var OpenCC = require("opencc-js");
+            let converter = OpenCC.Converter({
+              from: "cn",
+              to: "hk"
+            });
+						
+            this.ajax
+              .post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", params)
+              .then(res => {
+                if (
+                  converter(res.data.FunctionResponse.result) ==
+                  converter("发送成功")
+                ) {
+                } else {
+                  this.$message.warning(res.data.FunctionResponse.result);
+                }
+              })
+              .catch(err => {
+                console.log(err);
+              });
+            this.getAtAuContent(_uid);
+          });
+					this.courseText = "";
+        } else {
+          let _uuid = uuidv4();
+          this.array.push({
+            role: "user",
+            content: `${this.courseText}`,
+            uid: _uuid,
+            AI: "AI",
+            aiContent: "",
+            oldContent: "",
+            isShowSynchronization: false,
+            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",
+            temperature: 0,
+            max_tokens: 4096,
+            top_p: 1,
+            frequency_penalty: 0,
+            presence_penalty: 0,
+            messages: history,
+            uid: _uuid,
+            mind_map_question: ""
           });
-        this.getAiContent(_uuid);
+          this.courseText = "";
+
+          this.ajax
+            .post("https://gpt4.cocorobo.cn/chat", params)
+            .then(res => {
+              if (res.data.FunctionResponse.result == "发送成功") {
+              } else {
+                this.$message.warning(res.data.FunctionResponse.result);
+              }
+            })
+            .catch(e => {
+              console.log(e);
+            });
+          this.getAiContent(_uuid);
+        }
       }
     },
     getAiContent(_uid) {
@@ -374,6 +548,54 @@ export default {
         }
       };
     },
+		getAtAuContent(_uid){
+			let _source = new EventSource(
+        `https://gpt4.cocorobo.cn/question/${_uid}`
+      ); //http://gpt4.cocorobo.cn:8011/question/   https://gpt4.cocorobo.cn/question/
+      let _allText = "";
+      let _mdText = "";
+      const md = new MarkdownIt();
+      _source.onmessage = _e => {
+        let _eData = JSON.parse(_e.data);
+        if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
+          let _result = [];
+          if ("result" in _eData) {
+            _result = _eData.result;
+            for (let i = 0; i < _result.length; i++) {
+              _mdText = _mdText.replace(_result[i].text, _result[i].fileName);
+            }
+          }
+          _mdText = _mdText.replace("_", "");
+          this.array.find(i => i.uid == _uid).aiContent = _mdText;
+          this.array.find(i => i.uid == _uid).isalltext = true;
+          this.array.find(i => i.uid == _uid).isShowSynchronization = true;
+          this.array.find(i => i.uid == _uid).loading = false;
+          this.$nextTick(() => {
+            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
+          });
+          this.insertChat(_uid);
+        } else {
+          let _text = _eData.content.replace("'", "").replace("'", "");
+          if (_allText == "") {
+            _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
+          } else {
+            _allText += _text;
+          }
+          _mdText = _allText + "_";
+          _mdText = _mdText.replace(/\\n/g, "\n");
+          _mdText = _mdText.replace(/\\/g, "");
+          if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
+          //转化返回的回复流数据
+          _mdText = md.render(_mdText);
+          this.array.find(i => i.uid == _uid).aiContent = _mdText;
+          this.array.find(i => i.uid == _uid).loading = false;
+          this.$nextTick(() => {
+            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
+          });
+          // 处理流数据
+        }
+      };
+		},
     //保存消息
     insertChat(_uid) {
       let _data = this.array.find(i => i.uid == _uid);
@@ -426,7 +648,7 @@ export default {
                   index: i,
                   is_mind_map: false,
                   fileid: _data[i].fileid,
-									createtime:_data[i].createtime
+                  createtime: _data[i].createtime
                 });
               }
               this.array = _chatList;
@@ -490,7 +712,7 @@ export default {
     },
     inputChange() {
       if (this.courseText.at(-1) == "@") {
-        console.log("哇咔咔");
+        this.showRoleList = true;
       }
       if (this.courseText.at(-1) == "/") {
         console.log("哇卡ka2");
@@ -504,9 +726,41 @@ export default {
       });
     },
     textareaKeydown(_e) {
-			
-      if (_e.key === "Enter") {
-				_e.preventDefault();
+      if (this.showRoleList && this.choseRoleList.length > 0) {
+        console.log(_e.keyCode);
+        switch (_e.keyCode) {
+          case 38: //小键盘上
+            _e.preventDefault();
+            if (this.choseRoleItem == 0) return;
+            this.choseRoleItem--;
+            // 修改滚动条高度
+            this.$refs.roleListRef.scrollTo({
+              top:
+                this.$refs[`roleItem${this.choseRoleItem}Ref`][0].offsetTop -
+                10,
+              behavior: "smooth"
+            });
+            // this.$refs.roleListRef.scrollTop = this.choseRoleItem * 107;
+            break;
+          case 40: //小键盘下
+            _e.preventDefault();
+            if (this.choseRoleItem == this.choseRoleList.length - 1) return;
+            this.choseRoleItem++;
+            this.$refs.roleListRef.scrollTo({
+              top:
+                this.$refs[`roleItem${this.choseRoleItem}Ref`][0].offsetTop -
+                10,
+              behavior: "smooth"
+            });
+            // this.$refs.roleListRef.scrollTop = this.choseRoleItem * 107;
+            break;
+          case 13: //回车
+            _e.preventDefault();
+            this.choseRole(this.choseRoleList[this.choseRoleItem]);
+            break;
+        }
+      } else if (_e.key === "Enter") {
+        _e.preventDefault();
         if (_e.shiftKey) {
           this.courseText += "\n";
         } else {
@@ -514,8 +768,8 @@ export default {
         }
       }
     },
-		clear(){
-			this.$confirm("确定清空聊天记录吗?", "提示", {
+    clear() {
+      this.$confirm("确定清空聊天记录吗?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
@@ -541,7 +795,57 @@ export default {
             });
         })
         .catch(_ => {});
-		}
+    },
+    getRoleList() {
+      this.roleList = [];
+      let params = {
+        userId: this.userid
+      };
+      this.ajax
+        .post("https://gpt4.cocorobo.cn/get_ai_agent_assistant_list", params)
+        .then(res => {
+          let _data = res.data.FunctionResponse.result;
+          if (_data) {
+            this.roleList = JSON.parse(_data);
+          }
+        })
+        .catch(e => {
+          console.log(e);
+          // this.$message.error("获取角色列表失败");
+          this.roleList = [];
+        });
+    },
+    getPublicRoleList() {
+      this.publicRoleList = [];
+      let params = {
+        userId: this.userid,
+        organizeid: this.oid
+      };
+      this.ajax
+        .post(
+          "https://gpt4.cocorobo.cn/get_ai_agent_assistant_share_list",
+          params
+        )
+        .then(res => {
+          let _data = res.data.FunctionResponse.result;
+          if (_data) {
+            this.publicRoleList = JSON.parse(_data);
+          }
+        })
+        .catch(e => {
+          this.publicRoleList = [];
+          console.log(e);
+          // console.log("获取公共角色失败", e);
+        });
+    },
+    choseRole(item) {
+      let _lastAtIndex = this.courseText.lastIndexOf("@");
+      this.courseText = `${this.courseText.slice(0, _lastAtIndex)}@${
+        item.assistantName
+      } `;
+      this.$refs.textareaRef.focus();
+      this.showRoleList = false;
+    }
   },
   computed: {
     courseTextLength() {
@@ -559,6 +863,18 @@ export default {
         task += a.join("/");
       }
       return task + " " + this.part;
+    },
+    choseRoleList() {
+      let result = [...this.roleList, ...this.publicRoleList];
+      const _index = this.courseText.lastIndexOf("@");
+      if (_index !== -1) {
+        let roleName = this.courseText.substring(_index + 1);
+        result = result.filter(i => i.assistantName.indexOf(roleName) != -1);
+      } else {
+        return [];
+      }
+      this.choseRoleItem = 0;
+      return result;
     }
   },
   mounted() {
@@ -568,6 +884,8 @@ export default {
         this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
       });
     });
+    this.getRoleList();
+    this.getPublicRoleList();
   }
 };
 </script>
@@ -666,7 +984,7 @@ export default {
   border: solid 1px #3781fb;
   border-radius: 15px;
   display: flex;
-	font-size: 15px;
+  font-size: 15px;
   align-items: center;
   justify-content: center;
   background-color: #fff;
@@ -676,7 +994,7 @@ export default {
   width: 17px;
   height: 17px;
   margin-right: 5px;
-	fill: black;
+  fill: black;
 }
 
 .ai_b_i_btnArea > span:hover {
@@ -688,6 +1006,110 @@ export default {
   fill: #409eff;
 }
 
+.ai_b_i_textListBox{
+	width: 100%;
+  height: 300px;
+  background-color: #fff;
+  position: absolute;
+  bottom: calc(100% + 5px);
+  box-sizing: border-box;
+  padding: 10px;
+  overflow: auto;
+  border-radius: 8px;
+  border: 1px solid #e7e7e7;
+  box-shadow: 0 4px 10px 0 rgba(29, 57, 131, 0.08),
+    1px 1px 20px 4px rgba(29, 57, 131, 0.05);
+		display: flex;
+}
+
+.ai_b_i_tlb_left{
+	width: 60px;
+	height: 100%;
+	background-color: red;
+}
+
+.ai_b_i_tlb_right{
+	flex: 1;
+	height: 100%;
+	background-color: yellow;
+}
+
+.ai_b_i_roleListBox {
+  width: 100%;
+  height: 300px;
+  background-color: #fff;
+  position: absolute;
+  bottom: calc(100% + 5px);
+  box-sizing: border-box;
+  padding: 10px;
+  overflow: auto;
+  border-radius: 8px;
+  border: 1px solid #e7e7e7;
+  box-shadow: 0 4px 10px 0 rgba(29, 57, 131, 0.08),
+    1px 1px 20px 4px rgba(29, 57, 131, 0.05);
+}
+
+.ai_b_i_rlb_item {
+  width: calc(100% - 20px);
+  height: auto;
+  padding: 10px;
+  background-color: #f3f7fd;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.ai_b_i_rlb_itemActive {
+  background-color: #d1d5db !important;
+}
+
+/* .ai_b_i_rlb_item:hover{
+	background-color: #d1d5db;
+} */
+
+.ai_b_i_rlb_itemTop {
+  display: flex;
+}
+
+.ai_b_i_rlb_itemTop > img {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  border-radius: 100%;
+  overflow: hidden;
+}
+
+.ai_b_i_rlb_itemTop > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.ai_b_i_rlb_itemTop > div > span {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.ai_b_i_rlb_itemTop > div > span:last-child {
+  font-size: 14px;
+  color: #999;
+}
+
+.ai_b_i_rlb_itemBottom {
+  margin-top: 10px;
+  display: flex;
+}
+
+.ai_b_i_rlb_itemBottom > span {
+  width: 60px;
+  height: 30px;
+  border-radius: 15px;
+  display: flex;
+}
+
 .ai_body_input_textarea {
   flex: 1;
   margin: 10px 5px 10px 5px;
@@ -699,7 +1121,7 @@ export default {
   resize: none;
   font-size: 18px;
   overflow: auto;
-	padding-right: 100px;
+  padding-right: 100px;
 }
 
 .ai_body_input_textarea::-webkit-input-placeholder {
@@ -724,22 +1146,21 @@ export default {
   color: grey; /* 修改placeholder文字颜色 */
 }
 
-
 .ai_body_input_textarea::-webkit-scrollbar {
   width: 6px;
 }
 
 .ai_body_input_textarea::-webkit-scrollbar-track {
-  background: #D8D9DC;
+  background: #d8d9dc;
   border-radius: 2px;
 }
 
 .ai_body_input_textarea::-webkit-scrollbar-thumb {
-  background: #C9C9C9;
+  background: #c9c9c9;
   border-radius: 10px;
 }
 .ai_body_input_textarea::-webkit-scrollbar-thumb:hover {
-  background: #C9C9C9;
+  background: #c9c9c9;
 }
 
 .c_pub_button_confirm {
@@ -747,7 +1168,7 @@ export default {
     bottom: 13px;
     right: 13px; */
   /* margin-top: 10px; */
-  width: 80px;
+  width: 60px;
   margin-right: 5px;
   display: flex;
   justify-content: center;
@@ -755,6 +1176,12 @@ export default {
   position: absolute;
   right: 10px;
   bottom: 0px;
+  white-space: nowrap;
+  border-radius: 10px;
+}
+
+.c_pub_button_confirmDisabled {
+  background-color: #aeccfe;
 }
 
 .ai_body_dialog {
@@ -802,6 +1229,7 @@ export default {
 .dialog_content > div .role > img {
   height: 100%;
   width: 100%;
+	border-radius: 100%;
 }
 
 .dialog_content > div .content {
@@ -815,18 +1243,18 @@ export default {
   background: #f6f9ff;
   /* overflow: hidden; */
   margin: 0 10px;
-	position: relative;
+  position: relative;
 }
 
-.createTime{
-	width: 100%;
-	height: 20px;
-	position: absolute;
-	bottom: -25px;
-	left: 0;
-	font-size: 14px;
-	white-space: nowrap;
-	color: #919191;
+.createTime {
+  width: 100%;
+  height: 20px;
+  position: absolute;
+  bottom: -25px;
+  left: 0;
+  font-size: 14px;
+  white-space: nowrap;
+  color: #919191;
 }
 
 .dialog_content > div .content2 {
@@ -995,5 +1423,4 @@ export default {
   color: #0061ff;
   border-color: #0061ff;
 }
-
 </style>