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

<script setup lang="ts">
import { ref } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useAgentsStore } from '@/stores'
import api from '@/api'
import { changeBriefs } from '@/utils/collaboration_Brief_FrontEnd.ts'

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

const agentsStore = useAgentsStore()

const searchValue = ref('')

async function handleSearch() {
  try {
    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 {
    agentsStore.setAgentRawPlan({ loading: false })
  }
}

const restaurants = ref<string[]>([
  '如何快速筛选慢性肾脏病药物潜在受试者？',
  '如何补充“丹芍活血胶囊”不良反应数据？',
  '如何快速研发用于战场失血性休克的药物？',
  '二维材料的光电性质受哪些关键因素影响？',
  '如何通过AI模拟的方法分析材料的微观结构?',
  '如何分析获取液态金属热力学参数?',
  '如何解决固态电池的成本和寿命难题？',
  '如何解决船舶制造中的材料腐蚀难题？',
  '如何解决船舶制造中流体模拟和建模优化难题？',
])
const querySearch = (queryString: string, cb: (v: {value: string}[]) => void) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  // 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())
  }
}
</script>

<template>
  <el-tooltip
    content="请先点击智能体库右侧的按钮上传智能体信息"
    placement="top"
    effect="light"
    :disabled="agentsStore.agents.length > 0"
  >
    <div class="w-full flex justify-center mb-[27px]">
      <el-autocomplete
        v-model.trim="searchValue"
        class="task-input"
        size="large"
        placeholder="请输入您的任务"
        :fetch-suggestions="querySearch"
        @change="agentsStore.setSearchValue"
        :disabled="!(agentsStore.agents.length > 0)"
      >
        <template #prefix>
          <span class="text-[var(--color-text)] font-bold">任务</span>
        </template>
        <template #suffix>
          <el-button
            class="task-button"
            color="linear-gradient(to right, #00C7D2, #315AB4)"
            size="large"
            title="点击搜索任务"
            circle
            :loading="agentsStore.agentRawPlan.loading"
            @click="handleSearch"
          >
            <SvgIcon
              v-if="!agentsStore.agentRawPlan.loading"
              icon-class="paper-plane"
              size="18px"
              color="var(--color-text)"
            />
          </el-button>
        </template>
      </el-autocomplete>
    </div>
  </el-tooltip>
</template>

<style scoped lang="scss">
:deep(.el-autocomplete) {
  width: 40%;
  height: 60px;
  margin: 0 auto;

  .el-input__wrapper {
    border-radius: 40px;
    box-shadow: none;
    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;
    font-size: 18px;
    padding-right: 5px;

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

  .task-button {
    background: linear-gradient(to right, #00c7d2, #315ab4);
    border: none; // 如果需要移除边框
  }
}
</style>