useArtAgent 模型调度

用于模型调度的 Agent 钩子。

何时使用

与后端模型进行交互，提供抽象数据流。

代码演示

预设请求

我们将 ArtRequest 作为预设请求，仅需配置 baseURL、model 即可

Agent Request Log

Status：-

Update Times：0

<script setup lang="ts">
import type { ThoughtChainItemProps } from '@artmate/chat'
import { ThoughtChain, useArtAgent } from '@artmate/chat'
import { Discount, Loading } from '@element-plus/icons-vue'
import { ElButton, ElIcon, ElSpace } from 'element-plus'
import { computed, ref } from 'vue'

const BASE_URL = 'https://api.example.com'
const PATH = '/chat'
const MODEL = 'gpt-3.5-turbo'
/** 🔥🔥 Its dangerously! */
// const API_KEY = '';

interface YourMessageType {
  role: string
  content: string
}

const status = ref<ThoughtChainItemProps['status']>()
const lines = ref<Record<string, string>[]>([])

const [agent] = useArtAgent<YourMessageType>({
  baseURL: BASE_URL + PATH,
  model: MODEL,
  // dangerouslyApiKey: API_KEY
})

async function request() {
  status.value = 'pending'

  agent.request(
    {
      messages: [{ role: 'user', content: 'hello, who are u?' }],
      stream: true,
    },
    {
      onSuccess: (messages) => {
        status.value = 'success'
        console.log('onSuccess', messages)
      },
      onError: (error) => {
        status.value = 'error'
        console.error('onError', error)
      },
      onUpdate: (msg) => {
        lines.value = [...lines.value, msg] as Record<string, string>[]
        console.log('onUpdate', msg)
      },
    }
  )
}

const description = computed(() => {
  if (status.value === 'error' && agent.config.baseURL === BASE_URL + PATH) {
    return 'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.'
  }
  return ''
})

const items = computed<ThoughtChainItemProps[]>(() => [
  {
    title: 'Agent Request Log',
    status: status.value,
    description: description.value,
  },
])
</script>

<template>
  <ElSpace alignment="flex-start" :size="20" wrap>
    <ElButton type="primary" @click="request">Agent Request</ElButton>
    <ThoughtChain :items="items">
      <template #icon="{ info }">
        <ElIcon size="20" :color="info.status ? 'white' : 'block'">
          <Loading v-if="info.status === 'pending'" />
          <Discount v-else />
        </ElIcon>
      </template>
      <template #content="{ info }">
        <ElSpace direction="vertical" alignment="flex-start">
          <div>Status：{{ info.status || '-' }}</div>
          <div>Update Times：{{ lines.length }}</div>
        </ElSpace>
      </template>
    </ThoughtChain>
  </ElSpace>
</template>

<style lang="scss" scoped></style>

查看源代码

自定义请求

通过定制能力，返回多个推荐内容。

Question

<script setup lang="ts">
import { useArtAgent } from '@artmate/chat'
import { ElButton, ElDivider, ElForm, ElFormItem, ElInput } from 'element-plus'
import { reactive, ref } from 'vue'

const lines = ref<string[]>([])

const modelRef = reactive({
  question: '',
})

function log(text: string) {
  lines.value = [...lines.value, text]
}

const [agent] = useArtAgent<string, { message: string }, string>({
  request: ({ message }, { onUpdate, onSuccess }) => {
    let times = 0

    const id = setInterval(() => {
      times += 1
      onUpdate(`Thinking...(${times}/3)`)

      if (times >= 3) {
        onSuccess([`It's funny that you ask: ${message}`])
        clearInterval(id)
      }
    }, 500)
  },
})

function onFinish({ question }: { question: string }) {
  log(`[You] Ask: ${question}`)
  agent.request(
    { message: question },
    {
      onUpdate: (message) => {
        log(`[Agent] Update: ${message}`)
      },
      onSuccess: (message) => {
        log(`[Agent] Answer: ${message}`)
        modelRef.question = ''
      },
      // Current demo not use error
      onError: () => {},
    }
  )
}
</script>

<template>
  <ElForm label-position="top">
    <ElFormItem label="Question">
      <ElInput v-model="modelRef.question" />
    </ElFormItem>
    <ElFormItem>
      <ElButton type="primary" @click="onFinish(modelRef)">submit</ElButton>
    </ElFormItem>
  </ElForm>

  <ElDivider />

  <div style="padding: 0 32px">
    <ul style=" padding-left: 0;list-style: circle">
      <li v-for="(line, index) in lines" :key="index">
        {{ line }}
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped></style>

查看源代码

API

type useArtAgent<AgentMessage> = (
  config: ArtAgentConfigPreset | ArtAgentConfigCustom<AgentMessage>
) => [Agent]

ArtAgentConfigPreset

使用预设协议进行请求，尚未实现协议。

属性	说明	类型	默认值	版本
baseURL	请求服务端地址	string	-
key	请求秘钥	string	-
model	协议模型	string	-
dangerouslyApiKey	注意: 🔥 dangerouslyApiKey 存在安全风险，对此有详细的说明。	string	-	-

ArtAgentConfigCustom

自定义请求协议。

属性	说明	类型	默认值	版本
request	配置自定义请求，支持流式更新	RequestFn

RequestFn

interface RequestFnInfo<Message> extends Partial<ArtAgentConfigPreset>, AnyObject {
  messages?: Message[]
  message?: Message
}

export type RequestFn<Message> = (
  info: RequestFnInfo<Message>,
  callbacks: {
    onUpdate: (message: Message) => void
    onSuccess: (message: Message) => void
    onError: (error: Error) => void
  }
) => void

Agent

属性	说明	类型	版本
request	调用 useArtAgent 配置的请求	RequestFn
isRequesting	是否正在请求	() => boolean