translation/translated/documents/course/03-agent-memory/12-handling-memory-frontend.md

在前端应用程序中处理记忆

构建使用 Mastra 记忆功能的前端应用程序时，重要的是在每次智能体调用中只发送最新的用户消息。Mastra 负责检索和注入必要的历史记录。自行发送完整历史记录会导致重复。

以下是如何在 React 应用程序中处理此问题的简化示例：

import { useState } from "react";
import { memoryAgent } from "./agents";

function ChatApp() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");

  const handleSendMessage = async () => {
    // 将用户消息添加到 UI
    setMessages([...messages, { role: "user", content: input }]);

    // 只向智能体发送最新消息
    const response = await memoryAgent.stream(input, {
      resourceId: "user_123",
      threadId: "conversation_456",
    });

    // 将智能体响应添加到 UI
    setMessages([...messages, { role: "assistant", content: response }]);
    setInput("");
  };

  return (
    <div>
      {/* 显示消息 */}
      <div>
        {messages.map((msg, index) => (
          <div key={index}>
            <strong>{msg.role}:</strong> {msg.content}
          </div>
        ))}
      </div>

      {/* 新消息输入框 */}
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
      />
      <button onClick={handleSendMessage}>Send</button>
    </div>
  );
}

此示例展示了在前端应用程序中处理记忆的常见模式：

1. 将对话消息存储在 UI 状态中以供显示
2. 向智能体发送消息时，只发送最新消息
3. 在每次智能体调用中包含 resourceId 和 threadId
4. 让 Mastra 负责检索和注入对话历史记录

这种方法确保您的智能体能够访问对话历史记录，而不会在上下文窗口中重复消息。

下一步，我们将探索语义回忆，它允许您的智能体记住不再在最近历史记录中的较早对话的信息。