63 lines
2.0 KiB
Markdown
63 lines
2.0 KiB
Markdown
|
# 在前端应用程序中处理记忆
|
|||
|
|
|
|||
|
|
构建使用 Mastra 记忆功能的前端应用程序时，重要的是在每次智能体调用中只发送最新的用户消息。Mastra 负责检索和注入必要的历史记录。自行发送完整历史记录会导致重复。
|
|||
|
|
|
|||
|
|
以下是如何在 React 应用程序中处理此问题的简化示例：
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
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 负责检索和注入对话历史记录
|
|||
|
|
|
|||
|
|
这种方法确保您的智能体能够访问对话历史记录，而不会在上下文窗口中重复消息。
|
|||
|
|
|
|||
|
|
下一步，我们将探索语义回忆，它允许您的智能体记住不再在最近历史记录中的较早对话的信息。
|