dvcp_v2_webapp/ui/packages/ai/AiCopilot.vue

<script>
import ChatContent from "./components/chatContent.vue";
import ThinkingBar from "./components/thinkingBar.vue";

export default {
  name: "AiCopilot",
  props: {
    http: Function,
    title: {default: "Copilot小助理"}
  },
  data() {
    return {
      show: false,
      expand: false,
      loading: false,
      prompt: "",
      history: [
        // {avatar: "https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png", msg: "你好", uid: "ai"},
        // {
        //   avatar: "",
        //   msg: "AI 聊天机器人 ChatGPT 近日突然出现闪崩，响应超时或无法正常工作，故障长达近 7 小时。全球大量用户处于焦虑等待，因为许多人对此已经产生了依赖，工作不能自理。一些备选工具如 Perplexity、Claude 等也遭遇故障。摩根士丹利的数据显示，ChatGPT 故障后，谷歌 AI 聊天机器人 Gemini 搜索量激增 60%，达 327058 次，显示出用户把它视为 ChatGPT 的直接替代选项\n" +
        //       "\n" +
        //       "作者：RTE开发者社区\n" +
        //       "链接：https://juejin.cn/post/7377025870630862874\n" +
        //       "来源：稀土掘金\n" +
        //       "著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。",
        //   uid: "me"
        // },
      ]
    }
  },
  computed: {
    expandBtn: v => v.expand ? "收起" : "展开"
  },
  components: {ThinkingBar, ChatContent},
  methods: {
    getHistory(cb) {
      this.http.post("/app/appaicopilotinfo/list").then(res => {
        if (res?.data) {
          if (cb) cb(res.data.records)
          else this.history = res.data.records
        }
      })
    },
    handleHotkey(evt) {
      if (evt.ctrlKey && evt.key == "Enter") {
        this.handleSend()
      }
    },
    handleSend() {
      if (!this.prompt.trim()) return this.$message.error("无法发送空白信息,请输入资讯的内容")
      const concatenateStr = (content, i = 0) => {
        this.history.at(-1).content += content.slice(i, i + 1)
        if (++i < content.length) setTimeout(() => concatenateStr(content, i), 50)
      }
      this.$debounce(() => {
        const message = {appType: "2", userType: 0, content: this.prompt}
        this.history.push(message)
        this.loading = true
        this.prompt = ""
        this.http.post("/app/appaicopilotinfo/add", message).then(res => {
          if (res?.data?.length >= 2) {
            const last = res.data.at(-1)
            this.history.push({...last, content: ""})
            concatenateStr(last.content)
          }
        }).finally(() => {
          this.loading = false
        })
      }, 100)
    }
  },
  created() {
    this.getHistory()
  }
}
</script>

<template>
  <section class="AiCopilot">
    <div class="copilot" v-if="show">
      <div class="flex header">
        <b class="fill" v-text="title"/>
        <div class="expandBtn pointer" v-text="expandBtn" @click="expand=!expand"/>
        <div class="minimal pointer" v-text="'最小化'" @click="show=false"/>
      </div>
      <thinking-bar v-show="loading"/>
      <div class="flex content">
        <div class="left" :class="{expand}"></div>
        <div class="right flex column gap-14">
          <chat-content class="fill" :list="history"/>
          <div class="sendBox flex gap-14">
            <el-input type="textarea" class="fill input" autosize resize="none" v-model="prompt" placeholder="请输入..."
                      @keydown.native="handleHotkey" :disabled="loading" :placeholder="loading?'正在思考中...':'请输入'"/>
            <div class="sendBtn" @click="handleSend"/>
          </div>
        </div>
      </div>
    </div>
    <img class="icon" src="https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png" @click="show=true"/>
  </section>
</template>

<style scoped lang="scss">
.AiCopilot {
  position: fixed;
  right: 20px;
  bottom: 48px;
  display: flex;
  align-items: flex-end;
  gap: 18px;

  .copilot {
    border-radius: 0 0 8px 8px;
    height: 600px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 1px #0a255c1a;

    .header {
      height: 48px;
      background-image: linear-gradient(90deg, #3577FD 0%, #216AFD 100%);
      box-shadow: 0 2px 6px 0 #0a255c14;
      border-radius: 8px 8px 0 0;
      padding: 0 8px 0 14px;
      color: #fff;
      font-size: 14px;
      gap: 14px;

      & > b {
        font-size: 16px;
        cursor: default;
      }

      .expandBtn, .minimal {
        padding-left: 18px;
        font-weight: normal;
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 14px 14px;
        line-height: 20px;
      }

      .minimal {
        background-image: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bd0a79e.png");
      }

      .expandBtn {
        background-image: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bd8b021.png");
      }
    }

    .content {
      height: calc(100% - 50px);

      .left {
        width: 0;
        height: 100%;
        transition: width 1s;

        &.expand {
          width: 260px;


          & + .right {
            border-left-color: #ddd;
          }
        }
      }

      .right {
        width: 420px;
        height: 100%;
        padding: 14px 0 14px 14px;
        align-items: stretch;
        border-left: 1px solid transparent;

        .sendBtn {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bbdeb27.png") no-repeat center;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }

      .chatPanel {
        width: 100%;
      }

      :deep(.sendBox) {
        width: 100%;
        padding-right: 14px;

        .input > textarea {
          width: 100%;
          line-height: 40px;
          border-radius: 22px;
          border: 1px solid #ddd;
          padding: 0 14px;
          box-sizing: border-box;
          background: #F4F6FA;
        }
      }
    }
  }

  .icon {
    width: 68px;
    height: 58px;
    cursor: pointer;
  }
}
</style>