ccdchat/src/components/CCDChatSystem.vue

<template>
  <view-full-screen :is-full-screen="true"  class="right">
    <div :class="bodyClass">
      <div ref="scrollView" :style="{ 'overflow-y': 'scroll', 'height': 'calc(100% - ' + (52 + safeAreaInsets.bottom) + 'px)' }">
        <template v-for="cell in model">
          <CCDChatCell :cell-type="cell.type" :message="cell.content" @shutdown="doShutdown"></CCDChatCell>
        </template>
        <div style="height: 30px"></div>
      </div>
      <div class="bottomAskBar" style="height: 50px; padding-right: 4px">
        <div style="height: 50px; width: calc(100% - 50px);">
          <input v-if="allowInput" ref="inputAsk" @keyup.enter="doPostMessage" type="text" placeholder="输入问题..." value=""/>
          <input v-else value="    请等待AI回复" style="text-align: center" disabled/>
        </div>
        <button v-if="allowInput" @click="doPostMessage" :style="{
          height: '50px',
           width: '50px',
           right: '0px',
             top: 'calc(100% - ' + (50 + safeAreaInsets.bottom) + 'px)',
        position: 'absolute',
           float: 'right',
      background: 'transparent',
          border: 'none'
        }">
          <img src="../assets/run.png" style="width: calc(100% - 1px); height: calc(100% - 3px)">
        </button>
      </div>
    </div>
  </view-full-screen>
</template>

<style>
p {
  color: white;
}
.bodyBackground_normal {
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
}
.bodyBackground_xcwk {
  width: 100%;
  height: 100%;
  background-color: #1f1f1f00;
}
</style>
<style scoped>
input {
  background-color: transparent;
  color: white;
  border: 0px solid;
  height: 100%;
  width: 100%;
  font-size: large;
  text-indent: 10px;
  outline: none;
}
.bottomAskBar {
  box-shadow: 0 -15px 10px -15px gray;
}
</style>

<script>
import CCDChatCell from "@/components/CCDChatCell";
import { fetchEventSource } from '@microsoft/fetch-event-source';
let websocketAPIURL = "wss://chat.forgetive.net/free_chat"
let sseAPIURL = "https://notebook.forgetive.net/freeai/llm"

export default {
  name: 'CCDChatSystem',
  components: {CCDChatCell},
  data() {
    return {
      allowInput: true,
      model: [
        {
          "type" : "title"
        },
        {
          "type" : "tip",
          "content" : "您好，我是 C Code Develop & C Notebook AI助手，可以帮您解决代码问题。从编程技巧到历史人文，我无所不知。快来跟我聊天吧～"
        }
      ],
      history: [],
      socketObject: null,
      wannaKill: false,
      sseInstance: null,
      abortController: null,
      bodyClass: "bodyBackground_xcwk",
      safeAreaInsets: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      },
      isHostInApp: false,
      inAppPendingCard: null,
      inAppSSEHandle: null
    }
  },
  mounted() {
    let self = this
    try {
      if (__private_xcwk_webViewId == undefined) {
        self.bodyClass = "bodyBackground_normal"
      } else {
        self.bodyClass = "bodyBackground_xcwk"
        self.isHostInApp = true
      }
      __xcwk_js2na("xcwkstd/getSafeAreaInsets", { }, function (safeAreaInsets) {
        self.safeAreaInsets = safeAreaInsets
      })
      __xcwk_na2js(function (key, params) {
        if (key == "keyboardWillShow") {
          if (params.dict && params.dict.webViewId == __private_xcwk_webViewId) {
            self.keyboardWillShow(params)
          }
        }
        else if (key == "keyboardWillHide") {
          if (params.dict && params.dict.webViewId == __private_xcwk_webViewId) {
            self.keyboardWillHide(params)
          }
        }
        else if (key == "sseRequestUpdate") {
          self.doInAppSSE_ReceiveMessage(params.dict)
        }
      })
      __xcwk_js2na("xcwkstd/isLogin", { }, function (params) {
        if (!params.isLogin) {
          __xcwk_js2na("notebook/launchLogin", { }, function (params) { });
        }
      });
    } catch (err) {
      self.bodyClass = "bodyBackground_normal"
    }
  },
  methods: {
    keyboardWillShow(params) {
      this.safeAreaInsets.bottom = 0
    },
    keyboardWillHide(params) {
      let self = this
      __xcwk_js2na("xcwkstd/getSafeAreaInsets", { }, function (safeAreaInsets) {
        self.safeAreaInsets = safeAreaInsets
      })
    },
    scrollViewScrollToBottom() {
      let self = this
      this.$nextTick(function () {
        self.$refs.scrollView.scrollTo({
          top: self.$refs.scrollView.scrollHeight,
          behavior: 'smooth'
        });
      });
    },
    insertMessageBlock(data) {
      this.model.push(data)
      this.scrollViewScrollToBottom()
    },
    doPostMessage() {
      if (this.sseInstance) {
        return;
      }
      let question = this.$refs.inputAsk.value
      if (question.length == 0) {
        this.insertMessageBlock({
          "type" : "answer",
          "content" : "先输入一个问题吧"
        })
        return
      }
      this.insertMessageBlock({
        "type" : "ask",
        "content" : question
      })
      this.$refs.inputAsk.value = ""
      this.doChatWithMessage(question)
    },
    doChatWithMessage(message) {
      if (this.isHostInApp) {
        let self = this
        __xcwk_js2na("xcwkstd/isLogin", {}, function (params) {
          if (params.isLogin) {
            self.doInAppSSE(message)
          } else {
            __xcwk_js2na("notebook/launchLogin", {}, function (params) { });
            self.insertMessageBlock({
              "type" : "answer",
              "content" : "请先登录App"
            })
            self.$refs.inputAsk.value = message
          }
        });
      } else {
        this.doAsyncSSE(message)
      }
    },
    doInAppSSE(message) {
      let self = this

      self.allowInput = false
      let messageCard = {
        "type" : "answer",
        "content" : ""
      }
      self.inAppPendingCard = messageCard

      let messageModel = []
      for (let index in self.model) {
        let model = self.model[index]
        if (model.type == "ask") {
          messageModel.push({
            "role" : "user",
            "content" : model.content
          })
        }
        else if (model.type == "answer") {
          messageModel.push({
            "role" : "assistant",
            "content" : model.content
          })
        }
      }

      self.insertMessageBlock(messageCard)
      self.insertMessageBlock({
        "type" : "answerTyping",
        "content" : ""
      })

      __xcwk_js2na("xcwkstd/sseRequest", {
        "path" : "/freeai/llm",
        "data" : {
          "stream" : true,
          "messages" : messageModel
        }
      }, function (params) {
        self.inAppSSEHandle = params.sseId
      });
    },
    doInAppSSE_ReceiveMessage(message) {
      let self = this
      let messageCard = self.inAppPendingCard
      if (message.sseId != self.inAppSSEHandle) {
        return
      }
      console.log(JSON.stringify(message))
      switch (message.type) {
        case 0x1: { // data
          let partModel = JSON.parse(message.data)
          if (partModel["v"] != null) {
            messageCard.content += partModel["v"]
            self.scrollViewScrollToBottom()
          }
          break
        }
        case 0x3: { // error
          if (messageCard.content.length < 5) {
            messageCard.content = "回答出了一点问题"
          }
          self.sseInstance = null
          self.allowInput = true
          self.doShutdown()
          break
        }
        case 0x4: { // close
          self.sseInstance = null
          self.allowInput = true
          self.abortController = null
          self.inAppPendingCard = null
          self.inAppSSEHandle = null
          for (let id = 0; id < self.model.length; id++) {
            if (self.model[id].type == "answerTyping") {
              self.model.splice(id, 1)
              id--;
            }
          }
          break
        }
      }
    },
    doAsyncSSE(message) {
      let self = this

      self.allowInput = false
      let messageCard = {
        "type" : "answer",
        "content" : ""
      }

      let messageModel = []
      for (let index in self.model) {
        let model = self.model[index]
        if (model.type == "ask") {
          messageModel.push({
            "role" : "user",
            "content" : model.content
          })
        }
        else if (model.type == "answer") {
          messageModel.push({
            "role" : "assistant",
            "content" : model.content
          })
        }
      }

      self.insertMessageBlock(messageCard)
      self.insertMessageBlock({
        "type" : "answerTyping",
        "content" : ""
      })

      self.abortController = new AbortController()
      let eventSource = fetchEventSource(sseAPIURL, {
        method: 'POST',
        signal: self.abortController.signal,
        headers: {
          "Content-Type": 'application/json',
          "Access-Control-Allow-Origin": true
        },
        body: JSON.stringify({
          "stream" : true,
          "messages" : messageModel
        }),
        onmessage(event) {
          let partModel = JSON.parse(event.data)
          if (partModel["v"] != null) {
            messageCard.content += partModel["v"]
            self.scrollViewScrollToBottom()
          }
        },
        onerror(err) {
          if (messageCard.content.length < 5) {
            messageCard.content = "回答出了一点问题"
          }
          self.sseInstance = null
          self.allowInput = true
          self.doShutdown()
          throw err
        },
        onclose() {
          self.sseInstance = null
          self.allowInput = true
          self.abortController = null
          for (let id = 0; id < self.model.length; id++) {
            if (self.model[id].type == "answerTyping") {
              self.model.splice(id, 1)
              id--;
            }
          }
        }
      })
      self.sseInstance = eventSource
    },
    doAsyncChat(message) {
      this.allowInput = false
      let self = this
      let socket = new WebSocket(websocketAPIURL)
      self.socketObject = socket
      self.wannaKill = false
      let messageCard = {
        "type" : "answer",
        "content" : ""
      }
      let isFinished = false
      function finishBlock(success) {
        if (isFinished) {
          return
        }
        isFinished = true
        self.socketObject = null
        self.allowInput = true
        self.wannaKill = false
        while (self.history.length >= 3) {
          self.history.pop()
        }
        self.history.push([
          message,
          messageCard.content
        ])
        for (let id = 0; id < self.model.length; id++) {
          if (self.model[id].type == "answerTyping") {
            self.model.splice(id, 1)
            id--;
          }
        }
      }
      socket.onopen = function (event) {
        self.insertMessageBlock(messageCard)
        self.insertMessageBlock({
          "type" : "answerTyping",
          "content" : ""
        })
        let request = {
          "history" : self.history,
          "question" : message
        }
        socket.send(JSON.stringify(request))
      }
      socket.onmessage = function (event) {
        messageCard.content += event.data
        if (self.wannaKill) {
          socket.send("k")
        } else {
          socket.send("n")
        }
        self.scrollViewScrollToBottom()
      }
      socket.onclose = function (event) {
        finishBlock(true)
      }
      socket.onerror = function (error) {
        alert("不好意思，出错了，请稍后再试")
        finishBlock(false)
      }
    },
    doShutdown() {
      let self = this
      if (self.socketObject != null) {
        self.socketObject.close(1000)
      }
      if (self.abortController != null) {
        self.abortController.abort()
        self.sseInstance = null
        self.allowInput = true
        self.abortController = null
        for (let id = 0; id < self.model.length; id++) {
          if (self.model[id].type == "answerTyping") {
            self.model.splice(id, 1)
            id--;
          }
        }
      }
      if (self.inAppSSEHandle != null) {
        __xcwk_js2na("xcwkstd/cancelSSERequest", {
          "sseId" : self.inAppSSEHandle
        }, function (params) { })
        self.inAppSSEHandle = null
        self.sseInstance = null
        self.allowInput = true
        self.abortController = null
        self.inAppPendingCard = null
        for (let id = 0; id < self.model.length; id++) {
          if (self.model[id].type == "answerTyping") {
            self.model.splice(id, 1)
            id--;
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>