创新实践-聊天管理前端

概述

该篇主要为对聊天界面的管理，实现对多对话的管理，保存了用户的历史对话，方便用户后续查看等操作，主要功能为利用侧边栏显示历史对话，新建对话，删除对话以及修改对话的标题。

新建对话

创建一个新的对话，将其添加到对话列表

newChat(msgList) {
      this.chatTitle = "New chat";
      document.title = "New chat";

      let newConv = {
        "id": Date.now(),
        "title": "New chat",
        "msgList": msgList,
      }

      //add the conv to the list
      this.unshiftConversationList(newConv);
      //save the conv list to local storage
      this.saveConversations();
      this.selectConversation(this.conversations.length - 1);
    },

侧边栏显示对话

从本地存储中加载聊天对话列表，确保即使没有保存的对话或者保存的数据损坏，应用也能正确地初始化对话列表，并能够在有有效数据时加载这些数据。

loadConversationFromLocal() {
      // 尝试从localStorage获取保存的对话列表
      const savedConversations = localStorage.getItem('conversations');
 
      // 检查是否有数据，如果有，解析JSON格式的字符串转换回数组
      if (savedConversations) {
        try {
          // 将JSON字符串转换成JavaScript对象
          this.setConversationList(JSON.parse(savedConversations));
 
        } catch (e) {
          // 如果解析出错，可能是数据损坏或格式不正确
          console.error('Failed to parse conversations from localStorage:', e);
          // 可以选择清空损坏的数据或给出错误提示
          this.conversations = [];
        }
      } else {
        // 如果本地存储中没有对话列表，初始化为空数组
        this.conversations = [];
      }
    }

保存对话

将对话列表保存的本地存储，清理对话列表中的某些属性，然后将列表转换为字符串格式，并存储在本地存储中

saveConversations() {
      var conversations = JSON.parse(JSON.stringify(this.getConversationList));
      for (let idx in conversations) {
        var conv = conversations[idx];
        delete conv.editable;
        delete conv.selected;
        delete conv.delete;
      }
      let convs = JSON.stringify(conversations);
      localStorage.setItem("conversations", convs);
    },

清除对话

clearConversations() {
      this.conversations = []
      this.saveConversations();
    },

选择对话

根据传入的索引 cidx 来选择一个对话，并更新相关状态

selectConversation(cidx) {
      if (cidx < 0 || cidx >= this.getConversationList.length) {
        console.log("invalid index")
        return;
      }
      //get the conversation which you want to select by index
      var conv = this.getConversationByIndex(cidx);
      //if the conversation is already selected, return
      if (this.oldConv && this.oldConv.id == conv.id) {
        console.log("same conversation")
        return;
      }
      //set the old conversation to unselected
      if (this.oldConv) {
        this.oldConv.selected = false;
      }
      //set the new conversation to selected
      conv.selected = true
      this.setSelectedIdx(cidx);
      this.oldConv = conv;

      document.title = conv.title || "chatai";
      this.chatTitle = conv.title || "chatai";

      //set the conversation to vuex
      this.setConversation(conv);
      this.conversations[cidx] = conv;

    },

编辑对话标题

允许用户编辑对话的标题，并且将编辑状态应用到对话列表中

editTitle(cidx) {
      if (cidx < 0 || cidx >= this.conversations.length) {
        alert("invalid index")
        console.log("invalid index")
        return;
      }
      var conv = this.conversations[cidx];
      this.convTitletmp = conv.title;
      conv.editable = true;
      this.conversations[cidx] = conv;
      setTimeout(() => {
        document.getElementById("titleInput").focus();
      }, 150)
    },

以下代码用于处理对话标题输入框失去焦点时的逻辑，在用户完成编辑对话标题后，延迟一段时间然后执行一些清理操作

titleInputBlur(cidx, conv) {
      setTimeout(() => {
        this.cancelChangeConvTitle(cidx, conv);
      }, 1000);
    },