实现右侧记忆面板可编辑

本次功能

右侧记忆面板可编辑

支持:

  • 手动新增记忆
  • 删除单条记忆
  • 修改单条记忆

1)改 server/memory_store.py

新增方法

ini 复制代码
def set_session_memories(session_id: str, memories: List[str]):
    if not session_id:
        return

    data = _load()
    cleaned = []

    for item in memories or []:
        text = str(item).strip()
        if text and text not in cleaned:
            cleaned.append(text)

    data[session_id] = cleaned[:50]
    _save(data)

2)改 server/app.py

补 import

javascript 复制代码
from memory_store import (
    get_session_memories,
    add_session_memories,
    delete_session_memories,
    set_session_memories,
)

新增请求模型

less 复制代码
@app.put("/api/memory/{session_id}", response_model=MemoryResponse)
def update_memory(session_id: str, req: UpdateMemoryRequest):
    if not session_id:
        raise HTTPException(status_code=400, detail="session_id不能为空")

    set_session_memories(session_id, req.memories)
    return MemoryResponse(memories=get_session_memories(session_id))

3)改 web/src/App.vue

新增状态

csharp 复制代码
const memoryDraft = ref('')
const editingMemoryIndex = ref(-1)
const editingMemoryValue = ref('')

新增方法

ini 复制代码
const saveMemories = async nextMemories => {
  if (!currentSessionId.value) return

  try {
    const res = await axios.put(`http://127.0.0.1:8000/api/memory/${currentSessionId.value}`, {
      memories: nextMemories,
    })
    memoryList.value = res.data.memories || []
  } catch (error) {
    console.error(error)
  }
}

const handleAddMemory = async () => {
  const text = memoryDraft.value.trim()
  if (!text) return

  await saveMemories([...memoryList.value, text])
  memoryDraft.value = ''
}

const handleDeleteMemory = async index => {
  const nextMemories = memoryList.value.filter((_, i) => i !== index)
  await saveMemories(nextMemories)

  if (editingMemoryIndex.value === index) {
    editingMemoryIndex.value = -1
    editingMemoryValue.value = ''
  }
}

const handleStartEditMemory = (item, index) => {
  editingMemoryIndex.value = index
  editingMemoryValue.value = item
}

const handleSaveEditMemory = async index => {
  const text = editingMemoryValue.value.trim()
  const nextMemories = [...memoryList.value]

  if (!text) {
    nextMemories.splice(index, 1)
  } else {
    nextMemories[index] = text
  }

  await saveMemories(nextMemories)
  editingMemoryIndex.value = -1
  editingMemoryValue.value = ''
}

const handleCancelEditMemory = () => {
  editingMemoryIndex.value = -1
  editingMemoryValue.value = ''
}

4)改模板

ini 复制代码
<aside class="memory-panel">
  <div class="memory-header">会话记忆</div>

  <div class="memory-editor">
    <input
      v-model="memoryDraft"
      class="memory-input"
      placeholder="手动新增一条记忆"
      @keydown.enter="handleAddMemory"
    />
    <button class="memory-add-btn" @click="handleAddMemory">新增</button>
  </div>

  <div v-if="memoryList.length" class="memory-list">
    <div v-for="(item, index) in memoryList" :key="index" class="memory-item">
      <template v-if="editingMemoryIndex === index">
        <input
          v-model="editingMemoryValue"
          class="memory-edit-input"
          @keydown.enter="handleSaveEditMemory(index)"
          @keydown.esc="handleCancelEditMemory"
        />
        <div class="memory-actions">
          <span class="memory-action" @click="handleSaveEditMemory(index)">保存</span>
          <span class="memory-action delete" @click="handleCancelEditMemory">取消</span>
        </div>
      </template>

      <template v-else>
        <div class="memory-text">{{ item }}</div>
        <div class="memory-actions">
          <span class="memory-action" @click="handleStartEditMemory(item, index)">编辑</span>
          <span class="memory-action delete" @click="handleDeleteMemory(index)">删除</span>
        </div>
      </template>
    </div>
  </div>

  <div v-else class="memory-empty">暂时还没有提取到长期记忆</div>
</aside>

5)补充样式

css 复制代码
.memory-editor {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.memory-input,
.memory-edit-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  background: #fff;
}

.memory-add-btn {
  border: none;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  padding: 0 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.memory-text {
  line-height: 1.6;
  color: #111827;
  word-break: break-word;
}

.memory-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.memory-action {
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
}

.memory-action:hover {
  color: #111827;
}

.memory-action.delete:hover {
  color: #dc2626;
}

6)验证

nice !

本次提交仓库

github.com/fhj414/ai-c...

有收获点个 star 🌟🌟🌟 谢谢~

相关推荐
志尊宝7 小时前
AI原生前端开发(035):AI时代的工程化最佳实践总结
人工智能·ai-native
Cosolar7 小时前
不收费、不加水印、数据归你:我做了个开源的在线简历工具
后端·面试·前端框架
冬奇Lab7 小时前
一天一个开源项目(第251篇):Claude SEO —— 装进 Claude Code 的 SEO 审计团队,26 个子技能 + 19 个专家 Agent 并行体检网站
人工智能·开源
张晓宇 .7 小时前
Codex 不显示新模型怎么办?GPT-6.1 Terra 上线后的排查教程:版本、自定义模型目录与 API 支持
人工智能·gpt·大模型·ai编程·codex·deepseek
米米商聊8 小时前
同名附件为什么被 Map 覆盖?重复键与一对多索引
前端·javascript
DO_Community8 小时前
WorkBuddy 接入自定义模型教程:接入 GPT、Claude 等大模型
人工智能·llm·agent
行走的陀螺仪8 小时前
【转型攻略】2026 年,后端 / 全栈工程师转 AI Agent 方向:能力地图、按周学习路线与面试要点
人工智能·面试·职场和发展
ZhengEnCi8 小时前
2026年10月AI大事盘点:世界模型、开源万亿参数与智能体激战
人工智能·llm·ai编程
hgy89698 小时前
深度学习(小白笔记)——迁徙
人工智能·笔记·深度学习