@ 经济/代理反应

连接到代理机的反应钩 @economic/agents他们包了"云花" agents 财务报告和审定财务报表 @cloudflare/ai-chat 钩并添加打入的连接状态、消息反馈和每个用户使用的多聊天模式 Assistant。 。 。 .

安装

npm install @economic/agents-react

反应19是一种对等依赖.

我用哪根钩子?

套件输出出三个钩子,相上分层:

• useAgent —— 薄接原始两者都建立在上. 只有当您需要原始连接时, 才能联系它 .
• useChat ——直接连接到a 单人 聊天代理名. 使用它当您自己在一次对话中(例如每条路由一次聊天)而不是通过一个 Assistant。 。 。 .
• useAssistant ——v2型的高水平钩子: 每个用户一个助手,很多聊天。它管理聊天列表(创建/打开/删除),连接到正确的聊天面,并曝光活动聊天. 当您的服务器使用时使用此选项 Assistant。 。 。 .

useAgent

连接原始 useChat 财务报告和审定财务报表 useAssistant 继续发展。 以名称连接代理并暴露其连接和 call 引用时 @callable 方法。 。 .

import { useAgent } from "@economic/agents-react";

const agent = useAgent({
  host: "localhost:8787",
  agentName: "SupportAgent",
  name: "support",
  actorId: userId, // when set, the DO name becomes `${actorId}:${name}`
  authToken,
});

await agent.call("checkOrder", ["1234"]);
console.log(agent.state?.status);

useChat

以名称连接到单个聊天代理 — no Assistant 需要帮助。 返回连接、 消息接口和消息反馈帮助器 .

import { useChat } from "@economic/agents-react";

const { status, chat, submitMessageFeedback, getMessageFeedback } = useChat({
  host: "localhost:8787",
  agentName: "MyChatAgent",
  name: `${userId}:${chatId}`,
  authToken,
  toolContext: { locale: "en-DK" },
});

// send a message
chat.sendMessage({ role: "user", parts: [{ type: "text", text: "Hello" }] });

// rate a message (1 = up, -1 = down) and read all feedback
await submitMessageFeedback(messageId, 1, "Helpful!");
const feedback = await getMessageFeedback();

回返

useAssistant

对于每个用户,多聊天模式:连接到用户的 Assistant Do, 保持聊天列表同步, 并管理哪个聊天活动 .

import { useAssistant } from "@economic/agents-react";

function Chat({ userId, authToken }: { userId: string; authToken: string }) {
  const { status, chats, currentChatName, assistant, chat } = useAssistant({
    host: "localhost:8787",
    agentName: "MyAssistant", // matches the Assistant DO binding/class name
    name: userId, // the Assistant is keyed by user
    authToken,
    toolContext: { locale: "en-DK" }, // forwarded to server tools as the request body
    welcomeMessage: "Hi! How can I help?",
  });

  return (
    <div>
      <button onClick={() => assistant.createChat()}>New chat</button>

      <ul>
        {chats.map((c) => (
          <li key={c.name}>
            <button onClick={() => assistant.openChat(c.name)}>{c.title ?? "Untitled"}</button>
            <button onClick={() => assistant.deleteChat(c.name)}>Delete</button>
          </li>
        ))}
      </ul>

      {chat.chat.messages.map((m) => (
        <Message key={m.id} message={m} />
      ))}

      <Composer
        onSend={(text) =>
          chat.chat.sendMessage({
            role: "user",
            parts: [{ type: "text", text }],
          })
        }
      />
    </div>
  );
}

回返

assistant 动作 :

标题和摘要在第一个消息发出后几秒钟生成服务器侧面, 因此重排 getChats() 如果您想要出现新的标题, 请在发送开幕词后不久 .

活动空聊天在当地被代表,直到其第一次回合在服务器上注册为止.

在第一回合完成后, useAssistant 自动刷新聊天列表, 这样临时条目会被其顽固的标题和摘要所取代 .

选项

所有钩子都共享这些连接选项( A)useAssistant 省略 actorId:

类型

type AgentConnectionStatus =
  | "connecting"
  | "reconnecting"
  | "connected"
  | "disconnected"
  | "unauthorized"
  | "error";
type AgentConnectionType = "agent" | "chat" | "assistant";

type AgentConnectionState = {
  status: AgentConnectionStatus;
  type: AgentConnectionType;
  subAgentName?: string;
};

type ChatSummary = {
  name: string;
  isTemporary?: boolean; // true for the active chat before its first turn is registered
  title?: string;
  summary?: string;
  created_at: number;
  updated_at: number;
};

type MessageFeedback = {
  message_id: string;
  rating: number; // 1 = up, -1 = down
  comment?: string;
  created_at: number;
  updated_at: number;
};

软件包还导出处理器类型 AssistantActions, (中文(简体) ), GetChatsHandler, (中文(简体) ), CreateChatHandler, (中文(简体) ), OpenChatHandler, (中文(简体) ), DeleteChatHandler, (中文(简体) ), MessageFeedbackHandler,以及 GetMessageFeedbackHandler。 。 。 .

认证

通过 JWT 作为 authToken。它是作为 Authorization: Bearer … 页眉和作为 WebSocket 子议定书(["bearer", token]),匹配服务器侧 getAuthenticator(env)当验证失败时,连接状态变为 "unauthorized"。 。 。 .

当经纪人拒绝打电话时 reason (单位:千美元) AuthenticationError 与 { reason } 在服务器上, useChat 返回为 refusalReason,所以客户端可以在不匹配近端消息的情况下区分拒绝:

const { status, refusalReason } = useChat({/* … */});

if (status === "unauthorized" && refusalReason === "access-denied") {
  // the user has no access: don't retry with a new token
}

与 useAssistant这是 chat.refusalReason。 。 。 .

工具核准

useChat 财务报告和审定财务报表 useAssistant 显示一个持久工具的步骤批准( e)step.requestApproval 在服务器上),恰好显示工具的认可:其部分相同 state (单位:千美元)approval-requested,则 approval-responded 或者说 output-denied和 approval,以及 chat.addToolApprovalResponse({ id, approved }) 回答两个。 一个客户端用相同的代码处理它们.

getToolApproval(part) 返回与 descriptor 发送的代理: 动作 approvalSummary 或步骤 summary 作为 summary及其风险为 risk。 。 。 .

import { getToolApproval, getToolPartState } from "@economic/agents-react";

if (getToolPartState(part) === "waiting-approval") {
  const approval = getToolApproval(part)!;

  // approval.descriptor?.summary, approval.descriptor?.risk ("low" | "medium" | "high")
  chat.addToolApprovalResponse({ id: approval.id, approved: true });
}

一个被拒绝的步态批准可以追溯到工具,工具决定接下来会发生什么,因此该部分随后会显示工具的结果而不是拒绝.