人机交互循环

import { useChat } from "@ag-kit/ui-react";

function SimpleApprovalChat() {
  const { sendMessage, uiMessages, streaming } = useChat({
    url: "/your-agent-endpoint", // 替换为实际端点
    interrupt: {
      renderWithResume({ interrupt, resume }) {
        // 从有效载荷提取消息（假设结构为{ message: string }）
        const message = (interrupt.payload as { message: string }).message;
        
        return (
          <div>
            <p>{message}</p>
            <button 
              onClick={() => resume({ approved: true })}
              disabled={streaming} 
            >
              批准
            </button>
            <button 
              onClick={() => resume({ approved: false })}
              disabled={streaming}
            >
              拒绝
            </button>
          </div>
        );
      },
    },
  });

  return (
    <div>
      {/* 简易消息展示 */}
      {uiMessages.map((msg, i) => (
        <div key={i} style={{ margin: "10px 0" }}>
          <strong>{msg.role}:</strong>
          {msg.parts.map((part, j) => (
            <div key={j}>
              {part.type === "text" && <p>{part.text}</p>}
              {part.type === "interrupt" && part.render?.()}
            </div>
          ))}
        </div>
      ))}
      <button 
        onClick={() => sendMessage("执行需要审批的操作")}
        disabled={streaming}
      >
        发送消息
      </button>
    </div>
  );
}