AgentCoord/frontend/src/layout/components/Main/Task.vue

<script setup lang="ts">
import { ref } from 'vue'

import SvgIcon from '@/components/SvgIcon/index.vue'
import { useAgentsStore, useConfigStore } from '@/stores'
import api from '@/api'
import { changeBriefs } from '@/utils/collaboration_Brief_FrontEnd.ts'
import { ElMessage } from 'element-plus'

const emit = defineEmits<{
  (e: 'search-start'): void
  (e: 'search', value: string): void
}>()

const agentsStore = useAgentsStore()
const configStore = useConfigStore()

const searchValue = ref('')
const triggerOnFocus = ref(true)
const isFocus = ref(false)

async function handleSearch() {
  try {
    triggerOnFocus.value = false
    if (!searchValue.value) {
      ElMessage.warning('请输入搜索内容')
      return
    }
    emit('search-start')
    agentsStore.resetAgent()
    agentsStore.setAgentRawPlan({ loading: true })
    const data = await api.generateBasePlan({
      goal: searchValue.value,
      inputs: [],
    })
    data['Collaboration Process'] = changeBriefs(data['Collaboration Process'])
    agentsStore.setAgentRawPlan({ data })
    emit('search', searchValue.value)
  } finally {
    triggerOnFocus.value = true
    agentsStore.setAgentRawPlan({ loading: false })
  }
}

const querySearch = (queryString: string, cb: (v: { value: string }[]) => void) => {
  const results = queryString
    ? configStore.config.taskPromptWords.filter(createFilter(queryString))
    : configStore.config.taskPromptWords
  // call callback function to return suggestions
  cb(results.map((item) => ({ value: item })))
}

const createFilter = (queryString: string) => {
  return (restaurant: string) => {
    return restaurant.toLowerCase().includes(queryString.toLowerCase())
  }
}

const taskContainerRef = ref<HTMLDivElement | null>(null)
</script>

<template>
  <el-tooltip
    content="请先点击智能体库右侧的按钮上传智能体信息"
    placement="top"
    effect="light"
    :disabled="agentsStore.agents.length > 0"
  >
    <div class="task-root-container">
      <div class="task-container" ref="taskContainerRef" id="task-container">
        <span class="text-[var(--color-text)] font-bold  task-title">任务</span>
        <el-autocomplete
          v-model.trim="searchValue"
          class="task-input"
          size="large"
          :rows="isFocus ? 3 : 1"
          placeholder="请输入您的任务"
          type="textarea"
          :append-to="taskContainerRef"
          :fetch-suggestions="querySearch"
          @change="agentsStore.setSearchValue"
          :disabled="!(agentsStore.agents.length > 0)"
          :debounce="0"
          :trigger-on-focus="triggerOnFocus"
          @focus="isFocus = true"
          @blur="isFocus = false"
          @select="isFocus = false"
        >
        </el-autocomplete>
        <el-button
          class="task-button"
          color="linear-gradient(to right, #00C7D2, #315AB4)"
          size="large"
          title="点击搜索任务"
          circle
          :loading="agentsStore.agentRawPlan.loading"
          :disabled="!searchValue"
          @click.stop="handleSearch"
        >
          <SvgIcon
            v-if="!agentsStore.agentRawPlan.loading"
            icon-class="paper-plane"
            size="18px"
            color="var(--color-text)"
          />
        </el-button>
      </div>
    </div>
  </el-tooltip>
</template>

<style scoped lang="scss">
.task-root-container {
  height: 60px;
  margin-bottom: 24px;
  position: relative;
}
.task-container {
  width: 40%;
  margin: 0 auto;
  border: 2px solid transparent;
  $bg: var(--el-input-bg-color, var(--el-fill-color-blank));
  background:
    linear-gradient(var(--color-bg-tertiary), var(--color-bg-tertiary)) padding-box,
    linear-gradient(to right, #00c8d2, #315ab4) border-box;
  border-radius: 40px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 998;
  min-height: 100%;
  overflow: hidden;
  padding: 0 55px 0 47px;

  :deep(.el-popper) {
    position: static !important;
    width: 100%;
    min-width: 100%;
    background: var(--color-bg-tertiary);
    box-shadow: none;
    border: none;
    transition: height 0s ease-in-out;
    border-top: 1px solid #494B51;
    border-radius: 0;


    li {
      height: 45px;
      box-sizing: border-box;
      line-height: 45px;
      font-size: 14px;

      &:hover {
        background: #1C1E25;
        color: #00F3FF;
      }
    }

    .el-popper__arrow {
      display: none;
    }
  }

  :deep(.el-autocomplete) {
    min-height: 56px;
    width: 100%;

    .task-input {
       height: 100%;
    }

    .el-textarea__inner {
      border-radius: 0;
      box-shadow: none;
      font-size: 14px;
      height: 100%;
      line-height: 1.5;
      padding: 18px 0;
      resize: none;

      &::placeholder {
        line-height: 1.2;
        font-size: 18px;
        vertical-align: middle;
      }

      .el-icon.is-loading {
        & + span {
          display: none;
        }
      }
    }
  }


  .task-title {
    position: absolute;
    top: 28px;
    left: 10px;
    z-index: 999;
    transform: translateY(-50%);
  }

  .task-button {
    background: linear-gradient(to right, #00c7d2, #315ab4);
    border: none; // 如果需要移除边框
    position: absolute;
    top: 28px;
    right: 10px;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .task-button.is-loading {
    :deep(span) {
      display: none !important;
    }
  }
}
</style>