smartai2dian0/src/modules/conversation-chat/dialog-input/InputActions.vue

<template>
  <div class="dialog-input-actions">
    <div class="dialog-input-action-left" v-if="!agent_id">
      <a-button
        class="action-left-item-btn"
        :class="is_deep_think ? 'action-left-item-btn-active' : ''"
        @click="handleThinkChange"
        ><icon-ear />
        {{ $t('conversation.deep_think') }}
      </a-button>
      <a-button
        class="action-left-item-btn"
        :class="is_connect_internet ? 'action-left-item-btn-active' : ''"
        :disabled="disabled_internet"
        @click="handleInternetChange"
      >
        <img
          class="icon"
          v-if="!is_connect_internet && !disabled_internet"
          src="../../../assets/chat/internet.png"
          alt=""
        />
        <img class="icon" v-if="is_connect_internet" src="../../../assets/chat/internet-active.png" alt="" />
        <img class="icon" v-if="disabled_internet" src="../../../assets/chat/internet-disable.png" alt="" />
        {{ $t('conversation.internet_search') }}
      </a-button>
      <a-select
        :disabled="disabled_knowledge"
        :placeholder="$t('conversation.knowledge_base')"
        :trigger-props="{ autoFitPopupMinWidth: true }"
        v-model="base_list"
        multiple
        allow-clear
        :max-tag-count="1"
      >
        <a-option v-for="item in knowledge_list" :key="item.id" :label="item.name" :value="item.id"></a-option>
      </a-select>
    </div>
    <div class="dialog-input-action-left" v-else></div>

    <div class="dialog-input-action-right">
      <!-- <a-tooltip content="常用问题定义" position="top">
        <div v-if="enable_frequent_question" class="action-right-item-btn" @click="handleQuestionDefine">
          <img src="../../../assets/question-define.png" />
        </div>
      </a-tooltip> -->

      <div v-if="enable_frequent_question" class="action-right-item-btn" @click="handleQuestionDefine">
        <img src="../../../assets/question-define.png" />
      </div>

      <!-- <a-tooltip content="文件上传" position="top">
        <div v-if="enable_file_upload" class="action-right-item-btn" @click="handleFileUpload">
          <img src="../../../assets/file-upload.png" />
        </div>
      </a-tooltip> -->

      <!-- <a-tooltip content="语音识别" position="top">
        <div v-if="enable_voice_recognition" class="action-right-item-btn" @click="handleVoiceRecognize">语音识别</div>
      </a-tooltip> -->

      <a-tooltip :content="$t('conversation.file_upload_message')" position="top">
        <div v-if="enable_file_upload && !disabled_upload" class="action-right-item-btn" @click="handleFileUpload">
          <img src="../../../assets/file-upload.png" />
        </div>
      </a-tooltip>

      <a-tooltip :content="$t('conversation.input_message')" position="top">
        <div class="action-right-item-btn submit-input-btn" @click="handleSubmit">
          {{ $t('conversation.input_confirm') }}
        </div>
      </a-tooltip>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { getKnowledgeList } from '../../../apis/knowledge.js';

const props = defineProps({
  /**
   * 是否禁用操作
   * 默认 false
   * 当此值为 true 时，此组件的任何功能都不可用
   * 当对话正在进行时，此值应为 true，意味着不允许继续对话
   * 直到一轮对话结束，或者一轮对话终止，此值才应该变为 false
   */
  disabled: {
    type: Boolean,
    default: false,
    required: false
  },
  /**
   * 是否开启文件上传功能
   * 默认 true，即默认开启
   * 当此值为 false 时，该组件将没有文件上传按钮
   */
  enable_file_upload: {
    type: Boolean,
    default: true,
    required: false
  },
  /**
   * 是否开启 常用问题 功能
   * 如果此值为false，则 常用问题 定义功能不可用
   */
  enable_frequent_question: {
    type: Boolean,
    default: false,
    required: false
  },
  /**
   * 是否开启音频识别功能
   * 如果此值为 false，则语音识别功能不可用
   */
  enable_voice_recognition: {
    type: Boolean,
    default: false,
    required: false
  },
  /**
   * 在 enable_file_upload === true 的前提下
   * 文件上传的类型，默认是 *，不限类型
   * 对应html属性 accept
   * 对应 arco.design Upload accept 属性
   * @see https://arco.design/vue/component/upload#API
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#htmlattrdefaccept
   */
  file_accept: {
    type: String,
    default: '*',
    required: false
  },
  /**
   * 在 enable_file_upload === true 的前提下
   * 文件上传的数量限制
   * 默认值为0，表示不限制
   * 对应 arco.design Upload limit 属性
   */
  file_upload_limit: {
    type: Number,
    default: 0,
    required: false
  },
  input_file_list_len: {
    type: Number,
    default: 0
  },
  agent_id: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['fileUpload', 'questionDefine', 'voiceRecognize', 'submit', 'actionConfig']);

/**
 *
 * 深度思考
 * 联网搜索
 * */
const is_deep_think = ref(false);
const is_connect_internet = ref(false);

//
const disabled_internet = ref(false);
const disabled_knowledge = ref(false);
const disabled_upload = ref(false);

// 深度思考
const handleThinkChange = () => {
  is_deep_think.value = !is_deep_think.value;
  emit('actionConfig', {
    isDeep: is_deep_think.value ? 2 : 1,
    knowledgeId: base_list.value,
    chatMode: is_connect_internet.value ? 2 : 1
  });
};
// 联网搜索
const handleInternetChange = () => {
  if (disabled_internet.value) {
    is_connect_internet.value = false;
    return;
  }
  is_connect_internet.value = !is_connect_internet.value;
  if (is_connect_internet.value) {
    disabled_knowledge.value = true;
    disabled_upload.value = true;
  } else {
    disabled_knowledge.value = false;
    disabled_upload.value = false;
  }
  emit('actionConfig', {
    isDeep: is_deep_think.value ? 2 : 1,
    knowledgeId: base_list.value,
    chatMode: is_connect_internet.value ? 2 : 1
  });
};

const base_list = ref([]);
/**
 * 知识库
 * */
const knowledge_list = ref([]);
watch(
  () => base_list.value.length,
  (len) => {
    if (len) {
      disabled_internet.value = true;
      disabled_upload.value = true;
    } else {
      disabled_internet.value = false;
      disabled_upload.value = false;
    }
    emit('actionConfig', {
      isDeep: is_deep_think.value ? 2 : 1,
      knowledgeId: base_list.value,
      chatMode: base_list.value.length ? 3 : 1
    });
  },
  {
    immediate: true
  }
);
watch(
  () => props.input_file_list_len,
  (len) => {
    if (len) {
      disabled_internet.value = true;
      disabled_knowledge.value = true;
    } else {
      disabled_internet.value = false;
      disabled_knowledge.value = false;
    }
  }
);

const handleQuestionDefine = () => {
  emit('questionDefine');
};

const handleFileUpload = () => {
  emit('fileUpload');
};

const handleVoiceRecognize = () => {
  emit('voiceRecognize');
};

const handleSubmit = () => {
  emit('submit');
};

const getKnowledgeListFun = async () => {
  try {
    const res = await getKnowledgeList(1, 999, '');
    if (res.code / 1 === 200) {
      knowledge_list.value = res.data.rows;
    }
  } catch (e) {
    console.log(e);
  }
};
onMounted(() => {
  getKnowledgeListFun();
});
</script>

<style lang="css" scoped>
.dialog-input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-input-action-left {
  display: flex;
}
.action-left-item-btn {
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  padding: 0 10px;
  border: 1px solid var(--color-border-2);
  color: var(--color-text-2);
  border-radius: 8px;
  background: var(color-bg-1);
  .icon {
    width: 14px;
    margin-right: 3px;
  }
}
.action-left-item-btn:hover {
}
.action-left-item-btn-active {
  border-color: var(--color-bolder-11);
  color: var(--color-bolder-11);
}
.action-left-item-btn-active:hover {
  border-color: var(--color-bolder-11);
  color: var(--color-bolder-11);
}
.dialog-input-action-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-left-item-btn {
  margin-right: 10px;
  cursor: pointer;
}

.connect-internet {
  color: var(--color-text-3);
}
.search-from-network {
  display: inline-block;
  margin-left: 5px;
}
.is-connnected {
  color: var(--color-text-1);
}
.not-connnected {
  color: var(--color-text-3);
}

.action-right-item-btn {
  margin-left: 17px;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}

.action-left-item-btn img {
  width: 24px;
}
.action-right-item-btn img {
  width: 24px;
}

.submit-input-btn {
  background-color: rgb(var(--primary-6));
  color: #fff;
  /* padding: 5px 15px; */
  /* border-radius: 15px; */
  font-size: 14px;

  width: 73px;
  height: 31px;
  border-radius: 40px;
  text-align: center;
  line-height: 31px;
}
</style>

<style>
.arco-switch.arco-switch-type-circle.arco-switch-checked.chat-connect-network-switch {
  background-color: var(--color-fill-2);
}

.arco-switch.arco-switch-type-circle.arco-switch-checked.chat-connect-network-switch .arco-switch-handle {
  background-color: rgb(var(--primary-6));
}
</style>