MQTTX/src/components/ai/CopilotHeader.vue at 14146ca3e4e6c252ed5967dab037b8916df34455 · emqx/MQTTX · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<template>
  <div class="copilot-header clearfix">
    <span>MQTTX Copilot <el-tag size="mini" type="info">Beta</el-tag></span>
    <div>
      <el-button type="text" @click="clearAllMessages"><i class="el-icon-plus"></i></el-button>
      <el-button type="text" @click="toggleWindow"><i class="el-icon-close"></i></el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class CopilotHeader extends Vue {
  private clearAllMessages() {
    this.$emit('clear-all-messages')
  }

  private toggleWindow() {
    this.$emit('toggle-window')
  }
}
</script>

<style lang="scss">
.copilot-header {
  &.clearfix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-button--text {
      padding: 0;
      i {
        font-size: 16px;
        color: var(--color-text-title);
        font-weight: 400;
      }
    }
  }

  .el-tag {
    margin-left: 8px;
  }
}
</style>