do not show the hello message when reconnected

server/chat_handler.go

@@ -29,9 +29,9 @@ func (s *Server) ChatHandle(c *gin.Context) {
 	client := NewWsClient(ws)
 	// TODO: 这里需要先判断一下角色是否存在，并且角色是被启用的
 	// 发送打招呼信息
-	replyMessage(types.WsMessage{Type: types.WsStart}, client)
-	replyMessage(types.WsMessage{Type: types.WsMiddle, Content: s.Config.ChatRoles[role].HelloMsg}, client)
-	replyMessage(types.WsMessage{Type: types.WsEnd}, client)
+	replyMessage(types.WsMessage{Type: types.WsStart, IsHelloMsg: true}, client)
+	replyMessage(types.WsMessage{Type: types.WsMiddle, Content: s.Config.ChatRoles[role].HelloMsg, IsHelloMsg: true}, client)
+	replyMessage(types.WsMessage{Type: types.WsEnd, IsHelloMsg: true}, client)
 	go func() {
 		for {
 			_, message, err := client.Receive()
@@ -41,7 +41,7 @@ func (s *Server) ChatHandle(c *gin.Context) {
 				return
 			}
 
-			logger.Info(string(message))
+			logger.Info("Receive a message: ", string(message))
 			// TODO: 当前只保持当前会话的上下文，部保存用户的所有的聊天历史记录，后期要考虑保存所有的历史记录
 			err = s.sendMessage(token, role, string(message), client)
 			if err != nil {
@@ -150,17 +150,18 @@ func (s *Server) sendMessage(sessionId string, role string, text string, ws Clie
 		// 初始化 role
 		if responseBody.Choices[0].Delta.Role != "" && message.Role == "" {
 			message.Role = responseBody.Choices[0].Delta.Role
-			replyMessage(types.WsMessage{Type: types.WsStart}, ws)
+			replyMessage(types.WsMessage{Type: types.WsStart, IsHelloMsg: false}, ws)
 			continue
 		} else if responseBody.Choices[0].FinishReason != "" { // 输出完成或者输出中断了
-			replyMessage(types.WsMessage{Type: types.WsEnd}, ws)
+			replyMessage(types.WsMessage{Type: types.WsEnd, IsHelloMsg: false}, ws)
 			break
 		} else {
 			content := responseBody.Choices[0].Delta.Content
 			contents = append(contents, content)
 			replyMessage(types.WsMessage{
-				Type:    types.WsMiddle,
-				Content: responseBody.Choices[0].Delta.Content,
+				Type:       types.WsMiddle,
+				Content:    responseBody.Choices[0].Delta.Content,
+				IsHelloMsg: false,
 			}, ws)
 		}
 	}

types/chat.go

@@ -115,8 +115,8 @@ func GetDefaultChatRole() map[string]ChatRole {
 			Key:  "english_trainer",
 			Name: "英语陪练员",
 			Context: []Message{
-				{Role: "user", Content: "现在你将扮演一位优秀的英语教练，你非常有耐心，你的主要工作就是跟学生使用英语对话，如果发现学生的回答中有语法错误，你将使用中文将错误指出。"},
-				{Role: "user", Content: "好的，让我们开始对话练习吧！请问你的名字是什么？\n(Translation: Okay, let's start our conversation practice! What's your name?)"},
+				{Role: "user", Content: "现在你将扮演一位优秀的英语练习教练，你非常有耐心，接下来你将全程使用英文跟我对话，并及时指出我的语法错误，要求在你的每次回复后面附上本次回复的中文解释。"},
+				{Role: "user", Content: "Okay, let's start our conversation practice! What's your name?(Translation: 好的，让我们开始对话练习吧！请问你的名字是什么？)"},
 			},
 			HelloMsg: "Okay, let's start our conversation practice! What's your name?",
 			Icon:     "images/avatar/english_trainer.jpg",

types/web.go

@@ -12,8 +12,9 @@ type BizVo struct {
 
 // WsMessage Websocket message
 type WsMessage struct {
-	Type    WsMsgType `json:"type"` // 消息类别，start, end
-	Content string    `json:"content"`
+	Type       WsMsgType `json:"type"`         // 消息类别，start, end
+	IsHelloMsg bool      `json:"is_hello_msg"` // 是否是打招呼的消息
+	Content    string    `json:"content"`
 }
 type WsMsgType string
 

web/src/views/Chat.vue

@@ -29,7 +29,7 @@
 
       </div><!-- end chat box -->
 
-      <div class="input-box">
+      <div class="input-box" :style="{width: inputBoxWidth+'px'}">
         <div class="input-container">
           <el-input
               ref="text-input"
@@ -114,10 +114,11 @@ export default defineComponent({
       replyIcon: 'images/avatar/gpt.png', // 回复信息的头像
 
       lineBuffer: '', // 输出缓冲行
-      connectingMessageBox: null, // 保存重连的消息框对象
+      connectingMessageBox: null, // 保存重连的消息框对象load
       socket: null,
       toolBoxHeight: 61 + 42, // 工具框的高度
-      sending: false,
+      inputBoxWidth: window.innerWidth - 20,
+      sending: true,
       loading: false
     }
   },
@@ -197,17 +198,18 @@ export default defineComponent({
       const token = getSessionId();
       const socket = new WebSocket(process.env.VUE_APP_WS_HOST + `/api/chat?token=${token}&role=${this.role}`);
       socket.addEventListener('open', () => {
-        ElMessage.success('创建会话成功！');
-
         // 获取聊天角色
         httpGet("/api/config/chat-roles/get").then((res) => {
+          ElMessage.success('创建会话成功！');
           this.chatRoles = res.data;
+          this.loading = false
         }).catch(() => {
           ElMessage.error("获取聊天角色失败");
         })
 
         if (this.connectingMessageBox && typeof this.connectingMessageBox.close === 'function') {
           this.connectingMessageBox.close();
+          this.connectingMessageBox = null;
         }
       });
 
@@ -217,6 +219,11 @@ export default defineComponent({
           reader.readAsText(event.data, "UTF-8");
           reader.onload = () => {
             const data = JSON.parse(String(reader.result));
+            // 过滤掉重复的打招呼信息
+            if (data['is_hello_msg'] && this.chatData.length > 3) {
+              return
+            }
+
             if (data.type === 'start') {
               this.chatData.push({
                 type: "reply",
@@ -253,24 +260,26 @@ export default defineComponent({
       socket.addEventListener('close', () => {
         // 检查会话
         httpGet("/api/session/get").then(() => {
-          this.connectingMessageBox = ElMessageBox.confirm(
-              '^_^ 会话发生异常，您已经从服务器断开连接!',
-              '注意：',
-              {
-                confirmButtonText: '重连会话',
-                cancelButtonText: '不聊了',
-                type: 'warning',
-                showClose: false,
-                closeOnClickModal: false
-              }
-          ).then(() => {
-            this.connect();
-          }).catch(() => {
-            ElMessage({
-              type: 'info',
-              message: '您关闭了会话',
+          if (this.connectingMessageBox === null) {
+            this.connectingMessageBox = ElMessageBox.confirm(
+                '^_^ 会话发生异常，您已经从服务器断开连接!',
+                '注意：',
+                {
+                  confirmButtonText: '重连会话',
+                  cancelButtonText: '不聊了',
+                  type: 'warning',
+                  showClose: false,
+                  closeOnClickModal: false
+                }
+            ).then(() => {
+              this.connect();
+            }).catch(() => {
+              ElMessage({
+                type: 'info',
+                message: '您关闭了会话',
+              })
             })
-          })
+          }
         }).catch((res) => {
           if (res.code === 400) {
             this.showLoginDialog = true;
@@ -286,6 +295,7 @@ export default defineComponent({
 
     // 更换角色
     changeRole: function () {
+      this.loading = true
       // 清空对话列表
       this.chatData = [];
       this.connect();