From 61e4bc6b171b1f02a2b1454f5da8afa9196caf6e Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 12 Oct 2025 13:12:50 +0800
Subject: [PATCH] memory in web app

---
 .../base/chat/chat-with-history/context.tsx   |  13 ++
 .../base/chat/chat-with-history/hooks.tsx     |  65 ++++++++++
 .../base/chat/chat-with-history/index.tsx     |  42 ++++++-
 .../memory/card/edit-modal.tsx                |  33 +++--
 .../chat-with-history/memory/card/index.tsx   |  90 ++++++++++----
 .../memory/card/operation.tsx                 |  13 +-
 .../chat/chat-with-history/memory/index.tsx   |  62 +++++++---
 .../chat/chat-with-history/memory/mock.ts     |  87 +++++++++++--
 .../chat/chat-with-history/memory/type.ts     |   6 -
 .../base/chat/embedded-chatbot/index.tsx      |  20 +--
 .../memory/card/edit-modal.tsx                | 117 ------------------
 .../embedded-chatbot/memory/card/index.tsx    |  81 ------------
 .../memory/card/operation.tsx                 |  79 ------------
 .../chat/embedded-chatbot/memory/index.tsx    |  54 --------
 .../base/chat/embedded-chatbot/memory/mock.ts |  29 -----
 .../base/chat/embedded-chatbot/memory/type.ts |   6 -
 web/app/components/base/chat/types.ts         |  33 +++++
 web/i18n/en-US/share.ts                       |   1 +
 web/i18n/zh-Hans/share.ts                     |   1 +
 web/service/share.ts                          |  37 +++++-
 20 files changed, 420 insertions(+), 449 deletions(-)
 delete mode 100644 web/app/components/base/chat/chat-with-history/memory/type.ts
 delete mode 100644 web/app/components/base/chat/embedded-chatbot/memory/card/edit-modal.tsx
 delete mode 100644 web/app/components/base/chat/embedded-chatbot/memory/card/index.tsx
 delete mode 100644 web/app/components/base/chat/embedded-chatbot/memory/card/operation.tsx
 delete mode 100644 web/app/components/base/chat/embedded-chatbot/memory/index.tsx
 delete mode 100644 web/app/components/base/chat/embedded-chatbot/memory/mock.ts
 delete mode 100644 web/app/components/base/chat/embedded-chatbot/memory/type.ts

diff --git a/web/app/components/base/chat/chat-with-history/context.tsx b/web/app/components/base/chat/chat-with-history/context.tsx
index 5d4f9ec358..b6f79a8c0a 100644
--- a/web/app/components/base/chat/chat-with-history/context.tsx
+++ b/web/app/components/base/chat/chat-with-history/context.tsx
@@ -7,6 +7,7 @@ import type {
   ChatConfig,
   ChatItemInTree,
   Feedback,
+  Memory,
 } from '../types'
 import type { ThemeBuilder } from '../embedded-chatbot/theme/theme-context'
 import type {
@@ -62,6 +63,12 @@ export type ChatWithHistoryContextValue = {
   }
   showChatMemory?: boolean
   setShowChatMemory: (state: boolean) => void
+  memoryList: Memory[]
+  clearAllMemory: () => void
+  updateMemory: (memory: Memory, content: string) => void
+  resetDefault: (memory: Memory) => void
+  clearAllUpdateVersion: (memory: Memory) => void
+  switchMemoryVersion: (memory: Memory, version: string) => void
 }
 
 export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>({
@@ -99,5 +106,11 @@ export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>
   initUserVariables: {},
   showChatMemory: false,
   setShowChatMemory: noop,
+  memoryList: [],
+  clearAllMemory: noop,
+  updateMemory: noop,
+  resetDefault: noop,
+  clearAllUpdateVersion: noop,
+  switchMemoryVersion: noop,
 })
 export const useChatWithHistoryContext = () => useContext(ChatWithHistoryContext)
diff --git a/web/app/components/base/chat/chat-with-history/hooks.tsx b/web/app/components/base/chat/chat-with-history/hooks.tsx
index 144f3aeb4d..38a7ab8523 100644
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@@ -21,8 +21,11 @@ import { addFileInfos, sortAgentSorts } from '../../../tools/utils'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
 import {
   delConversation,
+  deleteMemory,
+  editMemory,
   fetchChatList,
   fetchConversations,
+  fetchMemories,
   generationConversationName,
   pinConversation,
   renameConversation,
@@ -41,6 +44,9 @@ import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 import { noop } from 'lodash-es'
 import { useWebAppStore } from '@/context/web-app-context'
+import type { Memory } from '@/app/components/base/chat/types'
+
+import { mockMemoryList } from '@/app/components/base/chat/chat-with-history/memory/mock'
 
 function getFormattedChatList(messages: any[]) {
   const newChatList: ChatItem[] = []
@@ -527,6 +533,59 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
   }, [isInstalledApp, appId, t, notify])
 
   const [showChatMemory, setShowChatMemory] = useState(false)
+  const [memoryList, setMemoryList] = useState<Memory[]>(mockMemoryList)
+
+  const getMemoryList = useCallback(async (currentConversationId: string) => {
+    const memories = await fetchMemories(currentConversationId, '', '', isInstalledApp, appId)
+    setMemoryList(memories)
+  }, [isInstalledApp, appId])
+
+  const clearAllMemory = useCallback(async () => {
+    await deleteMemory('', isInstalledApp, appId)
+    notify({ type: 'success', message: t('common.api.success') })
+    getMemoryList(currentConversationId)
+  }, [currentConversationId, getMemoryList])
+
+  const resetDefault = useCallback(async (memory: Memory) => {
+    try {
+      await editMemory(memory.spec.id, memory.spec.template, isInstalledApp, appId)
+      getMemoryList(currentConversationId)
+    }
+    catch (error) {
+      console.error('Failed to reset memory:', error)
+    }
+  }, [currentConversationId, getMemoryList, isInstalledApp, appId])
+
+  const clearAllUpdateVersion = useCallback(async (memory: Memory) => {
+    await deleteMemory(memory.spec.id, isInstalledApp, appId)
+    notify({ type: 'success', message: t('common.api.success') })
+    getMemoryList(currentConversationId)
+  }, [currentConversationId, getMemoryList])
+
+  const switchMemoryVersion = useCallback(async (memory: Memory, version: string) => {
+    const memories = await fetchMemories(currentConversationId, memory.spec.id, version, isInstalledApp, appId)
+    const newMemory = memories[0]
+    const newList = produce(memoryList, (draft) => {
+      const index = draft.findIndex(item => item.spec.id === memory.spec.id)
+      if (index !== -1)
+        draft[index] = newMemory
+    })
+    setMemoryList(newList)
+  }, [memoryList, currentConversationId, isInstalledApp, appId])
+
+  const updateMemory = useCallback(async (memory: Memory, content: string) => {
+    try {
+      await editMemory(memory.spec.id, content, isInstalledApp, appId)
+      getMemoryList(currentConversationId)
+    }
+    catch (error) {
+      console.error('Failed to reset memory:', error)
+    }
+  }, [getMemoryList, currentConversationId, isInstalledApp, appId])
+
+  useEffect(() => {
+    getMemoryList(currentConversationId)
+  }, [currentConversationId, getMemoryList])
 
   return {
     isInstalledApp,
@@ -576,5 +635,11 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     initUserVariables,
     showChatMemory,
     setShowChatMemory,
+    memoryList,
+    clearAllMemory,
+    updateMemory,
+    resetDefault,
+    clearAllUpdateVersion,
+    switchMemoryVersion,
   }
 }
diff --git a/web/app/components/base/chat/chat-with-history/index.tsx b/web/app/components/base/chat/chat-with-history/index.tsx
index 0cd3c6174f..055dfb331f 100644
--- a/web/app/components/base/chat/chat-with-history/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/index.tsx
@@ -39,6 +39,12 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
     sidebarCollapseState,
     showChatMemory,
     setShowChatMemory,
+    memoryList,
+    clearAllMemory,
+    updateMemory,
+    resetDefault,
+    clearAllUpdateVersion,
+    switchMemoryVersion,
   } = useChatWithHistoryContext()
   const isSidebarCollapsed = sidebarCollapseState
   const customConfig = appData?.custom_config
@@ -101,14 +107,34 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
           )}
         </div>
         {!isMobile && (
-          <MemoryPanel showChatMemory={showChatMemory} />
+          <MemoryPanel
+            isMobile={isMobile}
+            showChatMemory={showChatMemory}
+            setShowChatMemory={setShowChatMemory}
+            memoryList={memoryList}
+            clearAllMemory={clearAllMemory}
+            updateMemory={updateMemory}
+            resetDefault={resetDefault}
+            clearAllUpdateVersion={clearAllUpdateVersion}
+            switchMemoryVersion={switchMemoryVersion}
+          />
         )}
         {isMobile && showChatMemory && (
           <div className='fixed inset-0 z-50 flex flex-row-reverse bg-background-overlay p-1 backdrop-blur-sm'
             onClick={() => setShowChatMemory(false)}
           >
             <div className='flex h-full w-[360px] rounded-xl shadow-lg' onClick={e => e.stopPropagation()}>
-              <MemoryPanel showChatMemory={showChatMemory} />
+              <MemoryPanel
+                isMobile={isMobile}
+                showChatMemory={showChatMemory}
+                setShowChatMemory={setShowChatMemory}
+                memoryList={memoryList}
+                clearAllMemory={clearAllMemory}
+                updateMemory={updateMemory}
+                resetDefault={resetDefault}
+                clearAllUpdateVersion={clearAllUpdateVersion}
+                switchMemoryVersion={switchMemoryVersion}
+              />
             </div>
           </div>
         )}
@@ -169,6 +195,12 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
     initUserVariables,
     showChatMemory,
     setShowChatMemory,
+    memoryList,
+    clearAllMemory,
+    updateMemory,
+    resetDefault,
+    clearAllUpdateVersion,
+    switchMemoryVersion,
   } = useChatWithHistory(installedAppInfo)
 
   return (
@@ -214,6 +246,12 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
       initUserVariables,
       showChatMemory,
       setShowChatMemory,
+      memoryList,
+      clearAllMemory,
+      updateMemory,
+      resetDefault,
+      clearAllUpdateVersion,
+      switchMemoryVersion,
     }}>
       <ChatWithHistory className={className} />
     </ChatWithHistoryContext.Provider>
diff --git a/web/app/components/base/chat/chat-with-history/memory/card/edit-modal.tsx b/web/app/components/base/chat/chat-with-history/memory/card/edit-modal.tsx
index b3ba52f0e3..a745fed5e5 100644
--- a/web/app/components/base/chat/chat-with-history/memory/card/edit-modal.tsx
+++ b/web/app/components/base/chat/chat-with-history/memory/card/edit-modal.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import { Memory } from '@/app/components/base/icons/src/vender/line/others'
@@ -10,14 +10,14 @@ import Button from '@/app/components/base/button'
 import Textarea from '@/app/components/base/textarea'
 import Divider from '@/app/components/base/divider'
 import Toast from '@/app/components/base/toast'
-import type { MemoryItem } from '../type'
+import type { Memory as MemoryItem } from '@/app/components/base/chat/types'
 import { noop } from 'lodash-es'
 import cn from '@/utils/classnames'
 
 type Props = {
   memory: MemoryItem
   show: boolean
-  onConfirm: (info: MemoryItem) => Promise<void>
+  onConfirm: (info: MemoryItem, content: string) => Promise<void>
   onHide: () => void
   isMobile?: boolean
 }
@@ -30,14 +30,25 @@ const MemoryEditModal = ({
   isMobile,
 }: Props) => {
   const { t } = useTranslation()
-  const [content, setContent] = React.useState(memory.content)
+  const [content, setContent] = React.useState(memory.value)
+
+  const versionTag = useMemo(() => {
+    const res = `${t('share.chat.memory.updateVersion.update')} ${memory.version}`
+    if (memory.edited_by_user)
+      return `${res} · ${t('share.chat.memory.updateVersion.edited')}`
+    return res
+  }, [memory.version, t])
+
+  const reset = () => {
+    setContent(memory.value)
+  }
 
   const submit = () => {
     if (!content.trim()) {
       Toast.notify({ type: 'error', message: 'content is required' })
       return
     }
-    onConfirm({ ...memory, content })
+    onConfirm(memory, content)
     onHide()
   }
 
@@ -56,8 +67,8 @@ const MemoryEditModal = ({
             <div className='title-2xl-semi-bold mb-2 text-text-primary'>{t('share.chat.memory.editTitle')}</div>
             <div className='flex items-center gap-1 pb-1 pt-2'>
               <Memory className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
-              <div className='system-sm-semibold truncate text-text-primary'>{memory.name}</div>
-              <Badge text={`${t('share.chat.memory.updateVersion.update')} 2`} />
+              <div className='system-sm-semibold truncate text-text-primary'>{memory.spec.name}</div>
+              {memory.version > 1 && <Badge text={versionTag} className='!h-4' />}
             </div>
           </div>
           <div className='grow px-4'>
@@ -71,7 +82,7 @@ const MemoryEditModal = ({
             <Button className='ml-2' variant='primary' onClick={submit}>{t('share.chat.memory.operations.save')}</Button>
             <Button className='ml-3' onClick={onHide}>{t('share.chat.memory.operations.cancel')}</Button>
             <Divider type='vertical' className='!mx-0 !h-4' />
-            <Button className='mr-3' onClick={onHide}>{t('share.chat.memory.operations.reset')}</Button>
+            <Button className='mr-3' onClick={reset}>{t('share.chat.memory.operations.reset')}</Button>
           </div>
         </div>
       </div>
@@ -93,8 +104,8 @@ const MemoryEditModal = ({
         <div className='title-2xl-semi-bold mb-2 text-text-primary'>{t('share.chat.memory.editTitle')}</div>
         <div className='flex items-center gap-1 pb-1 pt-2'>
           <Memory className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
-          <div className='system-sm-semibold truncate text-text-primary'>{memory.name}</div>
-          <Badge text={`${t('share.chat.memory.updateVersion.update')} 2`} />
+          <div className='system-sm-semibold truncate text-text-primary'>{memory.spec.name}</div>
+          {memory.version > 1 && <Badge text={versionTag} />}
         </div>
       </div>
       <div className='px-6'>
@@ -108,7 +119,7 @@ const MemoryEditModal = ({
         <Button className='ml-2' variant='primary' onClick={submit}>{t('share.chat.memory.operations.save')}</Button>
         <Button className='ml-3' onClick={onHide}>{t('share.chat.memory.operations.cancel')}</Button>
         <Divider type='vertical' className='!mx-0 !h-4' />
-        <Button className='mr-3' onClick={onHide}>{t('share.chat.memory.operations.reset')}</Button>
+        <Button className='mr-3' onClick={reset}>{t('share.chat.memory.operations.reset')}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/base/chat/chat-with-history/memory/card/index.tsx b/web/app/components/base/chat/chat-with-history/memory/card/index.tsx
index a6ac25081a..970597b57a 100644
--- a/web/app/components/base/chat/chat-with-history/memory/card/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/memory/card/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiArrowDownSLine,
@@ -10,53 +10,100 @@ import Badge from '@/app/components/base/badge'
 import Indicator from '@/app/components/header/indicator'
 import Operation from './operation'
 import MemoryEditModal from './edit-modal'
-import type { MemoryItem } from '../type'
+import type { Memory as MemoryItem } from '@/app/components/base/chat/types'
 import cn from '@/utils/classnames'
 
 type Props = {
-  memory: MemoryItem
   isMobile?: boolean
+  memory: MemoryItem
+  updateMemory: (memory: MemoryItem, content: string) => void
+  resetDefault: (memory: MemoryItem) => void
+  clearAllUpdateVersion: (memory: MemoryItem) => void
+  switchMemoryVersion: (memory: MemoryItem, version: string) => void
 }
 
-const MemoryCard: React.FC<Props> = ({ memory, isMobile }) => {
+const MemoryCard: React.FC<Props> = ({
+  isMobile,
+  memory,
+  updateMemory,
+  resetDefault,
+  clearAllUpdateVersion,
+  switchMemoryVersion,
+}) => {
   const { t } = useTranslation()
   const [isHovering, setIsHovering] = React.useState(false)
   const [showEditModal, setShowEditModal] = React.useState(false)
 
+  const versionTag = useMemo(() => {
+    const res = `${t('share.chat.memory.updateVersion.update')} ${memory.version}`
+    if (memory.edited_by_user)
+      return `${res} · ${t('share.chat.memory.updateVersion.edited')}`
+    return res
+  }, [memory.version, t])
+
+  const isLatest = useMemo(() => {
+    if (memory.conversation_metadata)
+      return memory.conversation_metadata.visible_count === memory.spec.preserved_turns
+
+    return true
+  }, [memory])
+
+  const waitMergeCount = useMemo(() => {
+    if (memory.conversation_metadata)
+      return memory.conversation_metadata.visible_count - memory.spec.preserved_turns
+
+    return 0
+  }, [memory])
+
+  const prevVersion = () => {
+    if (memory.version > 1)
+      switchMemoryVersion(memory, (memory.version - 1).toString())
+  }
+
+  const nextVersion = () => {
+    switchMemoryVersion(memory, (memory.version + 1).toString())
+  }
+
   return (
     <>
       <div
-        className={cn('group mb-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-md', !memory.status && 'pb-2')}
+        className={cn('group mb-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-md')}
         onMouseEnter={() => setIsHovering(true)}
         onMouseLeave={() => setIsHovering(false)}
       >
-        <div className='flex items-end justify-between pb-1 pl-4 pr-2 pt-2'>
+        <div className='relative flex items-end justify-between pb-1 pl-4 pr-2 pt-2'>
           <div className='flex items-center gap-1 pb-1 pt-2'>
             <Memory className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
-            <div className='system-sm-semibold truncate text-text-primary'>{memory.name}</div>
-            <Badge text={`${t('share.chat.memory.updateVersion.update')} 2`} />
+            <div className='system-sm-semibold truncate text-text-primary'>{memory.spec.name}</div>
+            {memory.version > 1 && <Badge text={versionTag} className='!h-4' />}
           </div>
           {isHovering && (
-            <div className='hover:bg-components-actionbar-bg-hover flex items-center gap-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md'>
-              <ActionButton><RiArrowUpSLine className='h-4 w-4' /></ActionButton>
-              <ActionButton><RiArrowDownSLine className='h-4 w-4' /></ActionButton>
-              <Operation onEdit={() => {
-                setShowEditModal(true)
-                setIsHovering(false)
-              }} />
+            <div className='hover:bg-components-actionbar-bg-hover absolute bottom-0 right-2 flex items-center gap-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md'>
+              <ActionButton onClick={prevVersion}><RiArrowUpSLine className='h-4 w-4' /></ActionButton>
+              <ActionButton onClick={nextVersion}><RiArrowDownSLine className='h-4 w-4' /></ActionButton>
+              <Operation
+                memory={memory}
+                onEdit={() => {
+                  setShowEditModal(true)
+                  setIsHovering(false)
+                }}
+                resetDefault={resetDefault}
+                clearAllUpdateVersion={clearAllUpdateVersion}
+                switchMemoryVersion={switchMemoryVersion}
+              />
             </div>
           )}
         </div>
-        <div className='system-xs-regular line-clamp-[12] px-4 pb-2 pt-1 text-text-tertiary'>{memory.content}</div>
-        {memory.status === 'latest' && (
+        <div className='system-xs-regular line-clamp-[12] px-4 pb-2 pt-1 text-text-tertiary'>{memory.value}</div>
+        {isLatest && (
           <div className='flex items-center gap-1 rounded-b-xl border-t-[0.5px] border-divider-subtle bg-background-default-subtle px-4 py-3 group-hover:bg-components-panel-on-panel-item-bg-hover'>
             <div className='system-xs-regular text-text-tertiary'>{t('share.chat.memory.latestVersion')}</div>
             <Indicator color='green' />
           </div>
         )}
-        {memory.status === 'needUpdate' && (
+        {!isLatest && (
           <div className='flex items-center gap-1 rounded-b-xl border-t-[0.5px] border-divider-subtle bg-background-default-subtle px-4 py-3 group-hover:bg-components-panel-on-panel-item-bg-hover'>
-            <div className='system-xs-regular text-text-tertiary'>{t('share.chat.memory.notLatestVersion', { num: memory.mergeCount })}</div>
+            <div className='system-xs-regular text-text-tertiary'>{t('share.chat.memory.notLatestVersion', { num: waitMergeCount })}</div>
             <Indicator color='orange' />
           </div>
         )}
@@ -66,9 +113,8 @@ const MemoryCard: React.FC<Props> = ({ memory, isMobile }) => {
           isMobile={isMobile}
           show={showEditModal}
           memory={memory}
-          onConfirm={async (info) => {
-            // Handle confirm logic here
-            console.log('Memory updated:', info)
+          onConfirm={async (info, content) => {
+            await updateMemory(info, content)
             setShowEditModal(false)
           }}
           onHide={() => setShowEditModal(false)}
diff --git a/web/app/components/base/chat/chat-with-history/memory/card/operation.tsx b/web/app/components/base/chat/chat-with-history/memory/card/operation.tsx
index 7ac2876cca..b50ab79a98 100644
--- a/web/app/components/base/chat/chat-with-history/memory/card/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/memory/card/operation.tsx
@@ -10,14 +10,23 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Divider from '@/app/components/base/divider'
+import type { Memory } from '@/app/components/base/chat/types'
 import cn from '@/utils/classnames'
 
 type Props = {
+  memory: Memory
   onEdit: () => void
+  resetDefault: (memory: Memory) => void
+  clearAllUpdateVersion: (memory: Memory) => void
+  switchMemoryVersion: (memory: Memory, version: string) => void
 }
 
 const OperationDropdown: FC<Props> = ({
+  memory,
   onEdit,
+  resetDefault,
+  clearAllUpdateVersion,
+  switchMemoryVersion,
 }) => {
   const { t } = useTranslation()
   const [open, doSetOpen] = useState(false)
@@ -52,8 +61,8 @@ const OperationDropdown: FC<Props> = ({
         <div className='w-[220px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
           <div className='p-1'>
             <div className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover' onClick={onEdit}>{t('share.chat.memory.operations.edit')}</div>
-            <div className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('share.chat.memory.operations.reset')}</div>
-            <div className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive'>{t('share.chat.memory.operations.clear')}</div>
+            <div className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover' onClick={() => resetDefault(memory)}>{t('share.chat.memory.operations.reset')}</div>
+            <div className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive' onClick={() => clearAllUpdateVersion(memory)}>{t('share.chat.memory.operations.clear')}</div>
           </div>
           <Divider className='!my-0 !h-px bg-divider-subtle' />
           <div className='px-1 py-2'>
diff --git a/web/app/components/base/chat/chat-with-history/memory/index.tsx b/web/app/components/base/chat/chat-with-history/memory/index.tsx
index b45e3c2a95..a3ddda30ba 100644
--- a/web/app/components/base/chat/chat-with-history/memory/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/memory/index.tsx
@@ -6,29 +6,40 @@ import {
 } from '@remixicon/react'
 import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
-import {
-  useChatWithHistoryContext,
-} from '../context'
 import MemoryCard from './card'
 import cn from '@/utils/classnames'
 
-import { mockMemoryList } from './mock'
+import type { Memory } from '@/app/components/base/chat/types'
 
 type Props = {
+  isMobile?: boolean
   showChatMemory?: boolean
+  setShowChatMemory: (show: boolean) => void
+  memoryList: Memory[]
+  clearAllMemory: () => void
+  updateMemory: (memory: Memory, content: string) => void
+  resetDefault: (memory: Memory) => void
+  clearAllUpdateVersion: (memory: Memory) => void
+  switchMemoryVersion: (memory: Memory, version: string) => void
 }
 
-const MemoryPanel: React.FC<Props> = ({ showChatMemory }) => {
+const MemoryPanel: React.FC<Props> = ({
+  isMobile,
+  showChatMemory,
+  setShowChatMemory,
+  memoryList,
+  clearAllMemory,
+  updateMemory,
+  resetDefault,
+  clearAllUpdateVersion,
+  switchMemoryVersion,
+}) => {
   const { t } = useTranslation()
-  const {
-    isMobile,
-    setShowChatMemory,
-  } = useChatWithHistoryContext()
 
   return (
     <div className={cn(
       'flex h-full w-[360px] shrink-0 flex-col rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-chatbot-bg transition-all ease-in-out',
-      showChatMemory ? 'w-[360px]' : 'w-0',
+      showChatMemory ? 'w-[360px]' : 'w-0 opacity-0',
     )}>
       <div className='flex shrink-0 items-center border-b-[0.5px] border-components-panel-border-subtle pl-4 pr-3.5 pt-2'>
         <div className='system-md-semibold-uppercase grow py-3 text-text-primary'>{t('share.chat.memory.title')}</div>
@@ -37,15 +48,30 @@ const MemoryPanel: React.FC<Props> = ({ showChatMemory }) => {
         </ActionButton>
       </div>
       <div className='h-0 grow overflow-y-auto px-3 pt-2'>
-        {mockMemoryList.map(memory => (
-          <MemoryCard key={memory.name} memory={memory} isMobile={isMobile} />
+        {memoryList.map(memory => (
+          <MemoryCard
+            key={memory.spec.id}
+            isMobile={isMobile}
+            memory={memory}
+            updateMemory={updateMemory}
+            resetDefault={resetDefault}
+            clearAllUpdateVersion={clearAllUpdateVersion}
+            switchMemoryVersion={switchMemoryVersion}
+          />
         ))}
-        <div className='flex items-center justify-center'>
-          <Button variant='ghost'>
-            <RiDeleteBinLine className='mr-1 h-3.5 w-3.5' />
-            {t('share.chat.memory.clearAll')}
-          </Button>
-        </div>
+        {memoryList.length > 0 && (
+          <div className='flex items-center justify-center'>
+            <Button variant='ghost' onClick={clearAllMemory}>
+              <RiDeleteBinLine className='mr-1 h-3.5 w-3.5' />
+              {t('share.chat.memory.clearAll')}
+            </Button>
+          </div>
+        )}
+        {memoryList.length === 0 && (
+          <div className='system-xs-regular flex items-center justify-center py-2 text-text-tertiary'>
+            {t('share.chat.memory.empty')}
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/web/app/components/base/chat/chat-with-history/memory/mock.ts b/web/app/components/base/chat/chat-with-history/memory/mock.ts
index 278da9ee07..0a16f66a81 100644
--- a/web/app/components/base/chat/chat-with-history/memory/mock.ts
+++ b/web/app/components/base/chat/chat-with-history/memory/mock.ts
@@ -1,29 +1,96 @@
-import type { MemoryItem } from './type'
+import type { Memory as MemoryItem } from '@/app/components/base/chat/types'
+
 export const mockMemoryList: MemoryItem[] = [
   {
-    name: 'learning_companion',
-    content: `Learning Goal: [What you\'re studying]
+    tenant_id: 'user-tenant-id',
+    value: `Learning Goal: [What you\'re studying]
     Current Level: [Beginner/Intermediate/Advanced]
     Learning Style: [Visual, hands-on, theoretical, etc.]
     Progress: [Topics mastered, current focus]
     Preferred Pace: [Fast/moderate/slow explanations]
     Background: [Relevant experience or education]
     Time Constraints: [Available study time]`,
+    app_id: 'user-app-id',
+    conversation_id: '',
+    version: 1,
+    edited_by_user: false,
+    conversation_metadata: {
+      type: 'mutable_visible_window',
+      visible_count: 5,
+    },
+    spec: {
+      id: 'learning_companion',
+      name: 'Learning Companion',
+      description: 'A companion to help with learning goals',
+      template: 'no zuo no die why you try', // default value
+      instruction: 'enjoy yourself',
+      scope: 'app', // app or node
+      term: 'session', // session or persistent
+      strategy: 'on_turns',
+      update_turns: 3,
+      preserved_turns: 5,
+      schedule_mode: 'sync', // sync or async
+      end_user_visible: true,
+      end_user_editable: true,
+    },
   },
   {
-    name: 'research_partner',
-    content: `Research Topic: [Your research topic]
+    tenant_id: 'user-tenant-id',
+    value: `Research Topic: [Your research topic]
     Current Progress: [Literature review, experiments, etc.]
     Challenges: [What you\'re struggling with]
     Goals: [Short-term and long-term research goals]`,
-    status: 'latest',
+    app_id: 'user-app-id',
+    conversation_id: '',
+    version: 1,
+    edited_by_user: false,
+    conversation_metadata: {
+      type: 'mutable_visible_window',
+      visible_count: 5,
+    },
+    spec: {
+      id: 'research_partner',
+      name: 'research_partner',
+      description: 'A companion to help with research goals',
+      template: 'no zuo no die why you try', // default value
+      instruction: 'enjoy yourself',
+      scope: 'app', // app or node
+      term: 'session', // session or persistent
+      strategy: 'on_turns',
+      update_turns: 3,
+      preserved_turns: 3,
+      schedule_mode: 'sync', // sync or async
+      end_user_visible: true,
+      end_user_editable: false,
+    },
   },
   {
-    name: 'code_partner',
-    content: `Code Context: [Brief description of the codebase]
+    tenant_id: 'user-tenant-id',
+    value: `Code Context: [Brief description of the codebase]
     Current Issues: [Bugs, technical debt, etc.]
     Goals: [Features to implement, improvements to make]`,
-    status: 'needUpdate',
-    mergeCount: 5,
+    app_id: 'user-app-id',
+    conversation_id: '',
+    version: 3,
+    edited_by_user: true,
+    conversation_metadata: {
+      type: 'mutable_visible_window',
+      visible_count: 5,
+    },
+    spec: {
+      id: 'code_partner',
+      name: 'code_partner',
+      description: 'A companion to help with code-related tasks',
+      template: 'no zuo no die why you try', // default value
+      instruction: 'enjoy yourself',
+      scope: 'app', // app or node
+      term: 'session', // session or persistent
+      strategy: 'on_turns',
+      update_turns: 3,
+      preserved_turns: 5,
+      schedule_mode: 'sync', // sync or async
+      end_user_visible: true,
+      end_user_editable: true,
+    },
   },
 ]
diff --git a/web/app/components/base/chat/chat-with-history/memory/type.ts b/web/app/components/base/chat/chat-with-history/memory/type.ts
deleted file mode 100644
index 49ea32aed3..0000000000
--- a/web/app/components/base/chat/chat-with-history/memory/type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type MemoryItem = {
-  name: string;
-  content: string;
-  status?: 'latest' | 'needUpdate';
-  mergeCount?: number;
-}
diff --git a/web/app/components/base/chat/embedded-chatbot/index.tsx b/web/app/components/base/chat/embedded-chatbot/index.tsx
index f02eec0d4c..f6d0838b15 100644
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -16,7 +16,7 @@ import Loading from '@/app/components/base/loading'
 import LogoHeader from '@/app/components/base/logo/logo-embedded-chat-header'
 import Header from '@/app/components/base/chat/embedded-chatbot/header'
 import ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrapper'
-import MemoryPanel from './memory'
+import MemoryPanel from '@/app/components/base/chat/chat-with-history/memory'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import cn from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'
@@ -94,14 +94,18 @@ const Chatbot = () => {
         </div>
       )}
       {showChatMemory && (
-          <div className='fixed inset-0 z-50 flex flex-row-reverse bg-background-overlay p-1 backdrop-blur-sm'
-            onClick={() => setShowChatMemory(false)}
-          >
-            <div className='flex h-full w-[360px] rounded-xl shadow-lg' onClick={e => e.stopPropagation()}>
-              <MemoryPanel showChatMemory={showChatMemory} />
-            </div>
+        <div className='fixed inset-0 z-50 flex flex-row-reverse bg-background-overlay p-1 backdrop-blur-sm'
+          onClick={() => setShowChatMemory(false)}
+        >
+          <div className='flex h-full w-[360px] rounded-xl shadow-lg' onClick={e => e.stopPropagation()}>
+            <MemoryPanel
+              showChatMemory={showChatMemory}
+              isMobile={isMobile}
+              setShowChatMemory={setShowChatMemory}
+            />
           </div>
-        )}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/web/app/components/base/chat/embedded-chatbot/memory/card/edit-modal.tsx b/web/app/components/base/chat/embedded-chatbot/memory/card/edit-modal.tsx
deleted file mode 100644
index b3ba52f0e3..0000000000
--- a/web/app/components/base/chat/embedded-chatbot/memory/card/edit-modal.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { RiCloseLine } from '@remixicon/react'
-import { Memory } from '@/app/components/base/icons/src/vender/line/others'
-import Modal from '@/app/components/base/modal'
-import ActionButton from '@/app/components/base/action-button'
-import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
-import Textarea from '@/app/components/base/textarea'
-import Divider from '@/app/components/base/divider'
-import Toast from '@/app/components/base/toast'
-import type { MemoryItem } from '../type'
-import { noop } from 'lodash-es'
-import cn from '@/utils/classnames'
-
-type Props = {
-  memory: MemoryItem
-  show: boolean
-  onConfirm: (info: MemoryItem) => Promise<void>
-  onHide: () => void
-  isMobile?: boolean
-}
-
-const MemoryEditModal = ({
-  memory,
-  show = false,
-  onConfirm,
-  onHide,
-  isMobile,
-}: Props) => {
-  const { t } = useTranslation()
-  const [content, setContent] = React.useState(memory.content)
-
-  const submit = () => {
-    if (!content.trim()) {
-      Toast.notify({ type: 'error', message: 'content is required' })
-      return
-    }
-    onConfirm({ ...memory, content })
-    onHide()
-  }
-
-  if (isMobile) {
-    return (
-      <div className='fixed inset-0 z-50 flex flex-col bg-background-overlay pt-3 backdrop-blur-sm'
-        onClick={onHide}
-      >
-        <div className='relative flex w-full grow flex-col rounded-t-xl bg-components-panel-bg shadow-xl' onClick={e => e.stopPropagation()}>
-          <div className='absolute right-4 top-4 cursor-pointer p-2'>
-            <ActionButton onClick={onHide}>
-              <RiCloseLine className='h-5 w-5' />
-            </ActionButton>
-          </div>
-          <div className='p-4 pb-3'>
-            <div className='title-2xl-semi-bold mb-2 text-text-primary'>{t('share.chat.memory.editTitle')}</div>
-            <div className='flex items-center gap-1 pb-1 pt-2'>
-              <Memory className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
-              <div className='system-sm-semibold truncate text-text-primary'>{memory.name}</div>
-              <Badge text={`${t('share.chat.memory.updateVersion.update')} 2`} />
-            </div>
-          </div>
-          <div className='grow px-4'>
-            <Textarea
-              className='h-full'
-              value={content}
-              onChange={e => setContent(e.target.value)}
-            />
-          </div>
-          <div className='flex flex-row-reverse items-center p-4'>
-            <Button className='ml-2' variant='primary' onClick={submit}>{t('share.chat.memory.operations.save')}</Button>
-            <Button className='ml-3' onClick={onHide}>{t('share.chat.memory.operations.cancel')}</Button>
-            <Divider type='vertical' className='!mx-0 !h-4' />
-            <Button className='mr-3' onClick={onHide}>{t('share.chat.memory.operations.reset')}</Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <Modal
-      isShow={show}
-      onClose={noop}
-      className={cn('relative !max-w-[800px]', 'p-0')}
-    >
-      <div className='absolute right-5 top-5 cursor-pointer p-2'>
-        <ActionButton onClick={onHide}>
-          <RiCloseLine className='h-5 w-5' />
-        </ActionButton>
-      </div>
-      <div className='p-6 pb-3'>
-        <div className='title-2xl-semi-bold mb-2 text-text-primary'>{t('share.chat.memory.editTitle')}</div>
-        <div className='flex items-center gap-1 pb-1 pt-2'>
-          <Memory className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
-          <div className='system-sm-semibold truncate text-text-primary'>{memory.name}</div>
-          <Badge text={`${t('share.chat.memory.updateVersion.update')} 2`} />
-        </div>
-      </div>
-      <div className='px-6'>
-        <Textarea
-          className='h-[562px]'
-          value={content}
-          onChange={e => setContent(e.target.value)}
-        />
-      </div>
-      <div className='flex flex-row-reverse items-center p-6 pt-5'>
-        <Button className='ml-2' variant='primary' onClick={submit}>{t('share.chat.memory.operations.save')}</Button>
-        <Button className='ml-3' onClick={onHide}>{t('share.chat.memory.operations.cancel')}</Button>
-        <Divider type='vertical' className='!mx-0 !h-4' />
-        <Button className='mr-3' onClick={onHide}>{t('share.chat.memory.operations.reset')}</Button>
-      </div>
-    </Modal>
-  )
-}
-
-export default MemoryEditModal
diff --git a/web/app/components/base/chat/embedded-chatbot/memory/card/index.tsx b/web/app/components/base/chat/embedded-chatbot/memory/card/index.tsx
deleted file mode 100644
index a6ac25081a..0000000000
--- a/web/app/components/base/chat/embedded-chatbot/memory/card/index.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  RiArrowDownSLine,
-  RiArrowUpSLine,
-} from '@remixicon/react'
-import { Memory } from '@/app/components/base/icons/src/vender/line/others'
-import ActionButton from '@/app/components/base/action-button'
-import Badge from '@/app/components/base/badge'
-import Indicator from '@/app/components/header/indicator'
-import Operation from './operation'
-import MemoryEditModal from './edit-modal'
-import type { MemoryItem } from '../type'
-import cn from '@/utils/classnames'
-
-type Props = {
-  memory: MemoryItem
-  isMobile?: boolean
-}
-
-const MemoryCard: React.FC<Props> = ({ memory, isMobile }) => {
-  const { t } = useTranslation()
-  const [isHovering, setIsHovering] = React.useState(false)
-  const [showEditModal, setShowEditModal] = React.useState(false)
-
-  return (
-    <>
-      <div
-        className={cn('group mb-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-md', !memory.status && 'pb-2')}
-        onMouseEnter={() => setIsHovering(true)}
-        onMouseLeave={() => setIsHovering(false)}
-      >
-        <div className='flex items-end justify-between pb-1 pl-4 pr-2 pt-2'>
-          <div className='flex items-center gap-1 pb-1 pt-2'>
-            <Memory className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
-            <div className='system-sm-semibold truncate text-text-primary'>{memory.name}</div>
-            <Badge text={`${t('share.chat.memory.updateVersion.update')} 2`} />
-          </div>
-          {isHovering && (
-            <div className='hover:bg-components-actionbar-bg-hover flex items-center gap-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md'>
-              <ActionButton><RiArrowUpSLine className='h-4 w-4' /></ActionButton>
-              <ActionButton><RiArrowDownSLine className='h-4 w-4' /></ActionButton>
-              <Operation onEdit={() => {
-                setShowEditModal(true)
-                setIsHovering(false)
-              }} />
-            </div>
-          )}
-        </div>
-        <div className='system-xs-regular line-clamp-[12] px-4 pb-2 pt-1 text-text-tertiary'>{memory.content}</div>
-        {memory.status === 'latest' && (
-          <div className='flex items-center gap-1 rounded-b-xl border-t-[0.5px] border-divider-subtle bg-background-default-subtle px-4 py-3 group-hover:bg-components-panel-on-panel-item-bg-hover'>
-            <div className='system-xs-regular text-text-tertiary'>{t('share.chat.memory.latestVersion')}</div>
-            <Indicator color='green' />
-          </div>
-        )}
-        {memory.status === 'needUpdate' && (
-          <div className='flex items-center gap-1 rounded-b-xl border-t-[0.5px] border-divider-subtle bg-background-default-subtle px-4 py-3 group-hover:bg-components-panel-on-panel-item-bg-hover'>
-            <div className='system-xs-regular text-text-tertiary'>{t('share.chat.memory.notLatestVersion', { num: memory.mergeCount })}</div>
-            <Indicator color='orange' />
-          </div>
-        )}
-      </div>
-      {showEditModal && (
-        <MemoryEditModal
-          isMobile={isMobile}
-          show={showEditModal}
-          memory={memory}
-          onConfirm={async (info) => {
-            // Handle confirm logic here
-            console.log('Memory updated:', info)
-            setShowEditModal(false)
-          }}
-          onHide={() => setShowEditModal(false)}
-        />
-      )}
-    </>
-  )
-}
-
-export default MemoryCard
diff --git a/web/app/components/base/chat/embedded-chatbot/memory/card/operation.tsx b/web/app/components/base/chat/embedded-chatbot/memory/card/operation.tsx
deleted file mode 100644
index 7ac2876cca..0000000000
--- a/web/app/components/base/chat/embedded-chatbot/memory/card/operation.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useCallback, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { RiCheckLine, RiMoreFill } from '@remixicon/react'
-import ActionButton from '@/app/components/base/action-button'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
-
-type Props = {
-  onEdit: () => void
-}
-
-const OperationDropdown: FC<Props> = ({
-  onEdit,
-}) => {
-  const { t } = useTranslation()
-  const [open, doSetOpen] = useState(false)
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
-    openRef.current = v
-  }, [doSetOpen])
-
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
-
-  return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement='bottom-end'
-      offset={{
-        mainAxis: 4,
-        crossAxis: 4,
-      }}
-    >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
-        <div>
-          <ActionButton className={cn(open && 'bg-state-base-hover')}>
-            <RiMoreFill className='h-4 w-4' />
-          </ActionButton>
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-50'>
-        <div className='w-[220px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
-          <div className='p-1'>
-            <div className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover' onClick={onEdit}>{t('share.chat.memory.operations.edit')}</div>
-            <div className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('share.chat.memory.operations.reset')}</div>
-            <div className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive'>{t('share.chat.memory.operations.clear')}</div>
-          </div>
-          <Divider className='!my-0 !h-px bg-divider-subtle' />
-          <div className='px-1 py-2'>
-            <div className='system-xs-medium-uppercase px-3 pb-0.5 pt-1 text-text-tertiary'>{t('share.chat.memory.updateVersion.title')}</div>
-            <div className='system-md-regular flex cursor-pointer items-center gap-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>
-              {t('share.chat.memory.operations.edit')}
-              <RiCheckLine className='h-4 w-4 text-text-accent' />
-            </div>
-            <div className='system-md-regular flex cursor-pointer items-center gap-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>
-              {t('share.chat.memory.operations.edit')}
-              <RiCheckLine className='h-4 w-4 text-text-accent' />
-            </div>
-            <div className='system-md-regular flex cursor-pointer items-center gap-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>
-              {t('share.chat.memory.operations.edit')}
-              <RiCheckLine className='h-4 w-4 text-text-accent' />
-            </div>
-          </div>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-export default React.memo(OperationDropdown)
diff --git a/web/app/components/base/chat/embedded-chatbot/memory/index.tsx b/web/app/components/base/chat/embedded-chatbot/memory/index.tsx
deleted file mode 100644
index d405e95b51..0000000000
--- a/web/app/components/base/chat/embedded-chatbot/memory/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  RiCloseLine,
-  RiDeleteBinLine,
-} from '@remixicon/react'
-import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
-import {
-  useEmbeddedChatbotContext,
-} from '../context'
-import MemoryCard from './card'
-import cn from '@/utils/classnames'
-
-import { mockMemoryList } from './mock'
-
-type Props = {
-  showChatMemory?: boolean
-}
-
-const MemoryPanel: React.FC<Props> = ({ showChatMemory }) => {
-  const { t } = useTranslation()
-  const {
-    isMobile,
-    setShowChatMemory,
-  } = useEmbeddedChatbotContext()
-
-  return (
-    <div className={cn(
-      'flex h-full w-[360px] shrink-0 flex-col rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-chatbot-bg transition-all ease-in-out',
-      showChatMemory ? 'w-[360px]' : 'w-0',
-    )}>
-      <div className='flex shrink-0 items-center border-b-[0.5px] border-components-panel-border-subtle pl-4 pr-3.5 pt-2'>
-        <div className='system-md-semibold-uppercase grow py-3 text-text-primary'>{t('share.chat.memory.title')}</div>
-        <ActionButton size='l' onClick={() => setShowChatMemory(false)}>
-          <RiCloseLine className='h-[18px] w-[18px]' />
-        </ActionButton>
-      </div>
-      <div className='h-0 grow overflow-y-auto px-3 pt-2'>
-        {mockMemoryList.map(memory => (
-          <MemoryCard key={memory.name} memory={memory} isMobile={isMobile} />
-        ))}
-        <div className='flex items-center justify-center'>
-          <Button variant='ghost'>
-            <RiDeleteBinLine className='mr-1 h-3.5 w-3.5' />
-            {t('share.chat.memory.clearAll')}
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default MemoryPanel
diff --git a/web/app/components/base/chat/embedded-chatbot/memory/mock.ts b/web/app/components/base/chat/embedded-chatbot/memory/mock.ts
deleted file mode 100644
index 278da9ee07..0000000000
--- a/web/app/components/base/chat/embedded-chatbot/memory/mock.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { MemoryItem } from './type'
-export const mockMemoryList: MemoryItem[] = [
-  {
-    name: 'learning_companion',
-    content: `Learning Goal: [What you\'re studying]
-    Current Level: [Beginner/Intermediate/Advanced]
-    Learning Style: [Visual, hands-on, theoretical, etc.]
-    Progress: [Topics mastered, current focus]
-    Preferred Pace: [Fast/moderate/slow explanations]
-    Background: [Relevant experience or education]
-    Time Constraints: [Available study time]`,
-  },
-  {
-    name: 'research_partner',
-    content: `Research Topic: [Your research topic]
-    Current Progress: [Literature review, experiments, etc.]
-    Challenges: [What you\'re struggling with]
-    Goals: [Short-term and long-term research goals]`,
-    status: 'latest',
-  },
-  {
-    name: 'code_partner',
-    content: `Code Context: [Brief description of the codebase]
-    Current Issues: [Bugs, technical debt, etc.]
-    Goals: [Features to implement, improvements to make]`,
-    status: 'needUpdate',
-    mergeCount: 5,
-  },
-]
diff --git a/web/app/components/base/chat/embedded-chatbot/memory/type.ts b/web/app/components/base/chat/embedded-chatbot/memory/type.ts
deleted file mode 100644
index 49ea32aed3..0000000000
--- a/web/app/components/base/chat/embedded-chatbot/memory/type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type MemoryItem = {
-  name: string;
-  content: string;
-  status?: 'latest' | 'needUpdate';
-  mergeCount?: number;
-}
diff --git a/web/app/components/base/chat/types.ts b/web/app/components/base/chat/types.ts
index f7f7aa4dce..7893fdf8f1 100644
--- a/web/app/components/base/chat/types.ts
+++ b/web/app/components/base/chat/types.ts
@@ -95,3 +95,36 @@ export type Feedback = {
   rating: 'like' | 'dislike' | null
   content?: string | null
 }
+
+export type MemorySpec = {
+  id: string
+  name: string
+  description: string
+  template: string // default value
+  instruction: string
+  scope: string // app or node
+  term: string // session or persistent
+  strategy: string
+  update_turns: number
+  preserved_turns: number
+  schedule_mode: string // sync or async
+  end_user_visible: boolean
+  end_user_editable: boolean
+}
+
+export type ConversationMetaData = {
+  type: string // mutable_visible_window
+  visible_count: number // visible_count - preserved_turns = N messages waiting merged
+}
+
+export type Memory = {
+  tenant_id: string
+  value: string
+  app_id: string
+  conversation_id?: string
+  node_id?: string
+  version: number
+  edited_by_user: boolean
+  conversation_metadata?: ConversationMetaData
+  spec: MemorySpec
+}
diff --git a/web/i18n/en-US/share.ts b/web/i18n/en-US/share.ts
index 7b8a5df56d..cef7e90976 100644
--- a/web/i18n/en-US/share.ts
+++ b/web/i18n/en-US/share.ts
@@ -57,6 +57,7 @@ const translation = {
         cancel: 'Cancel',
         save: 'Save & Apply',
       },
+      empty: 'No memory yet.',
     },
   },
   generation: {
diff --git a/web/i18n/zh-Hans/share.ts b/web/i18n/zh-Hans/share.ts
index 3720a07f37..53bdb37dab 100644
--- a/web/i18n/zh-Hans/share.ts
+++ b/web/i18n/zh-Hans/share.ts
@@ -53,6 +53,7 @@ const translation = {
         cancel: '取消',
         save: '保存并应用',
       },
+      empty: '暂无记忆。',
     },
   },
   generation: {
diff --git a/web/service/share.ts b/web/service/share.ts
index ab8e0deb4a..8196791f28 100644
--- a/web/service/share.ts
+++ b/web/service/share.ts
@@ -22,8 +22,8 @@ import type {
   IOnWorkflowStarted,
 } from './base'
 import {
-  del as consoleDel, get as consoleGet, patch as consolePatch, post as consolePost,
-  delPublic as del, getPublic as get, patchPublic as patch, postPublic as post, ssePost,
+  del as consoleDel, get as consoleGet, patch as consolePatch, post as consolePost, put as consolePut,
+  delPublic as del, getPublic as get, patchPublic as patch, postPublic as post, putPublic as put, ssePost,
 } from './base'
 import type { FeedbackType } from '@/app/components/base/chat/chat/type'
 import type {
@@ -32,10 +32,10 @@ import type {
   AppMeta,
   ConversationItem,
 } from '@/models/share'
-import type { ChatConfig } from '@/app/components/base/chat/types'
+import type { ChatConfig, Memory } from '@/app/components/base/chat/types'
 import type { AccessMode } from '@/models/access-control'
 
-function getAction(action: 'get' | 'post' | 'del' | 'patch', isInstalledApp: boolean) {
+function getAction(action: 'get' | 'post' | 'del' | 'patch' | 'put', isInstalledApp: boolean) {
   switch (action) {
     case 'get':
       return isInstalledApp ? consoleGet : get
@@ -45,6 +45,8 @@ function getAction(action: 'get' | 'post' | 'del' | 'patch', isInstalledApp: boo
       return isInstalledApp ? consolePatch : patch
     case 'del':
       return isInstalledApp ? consoleDel : del
+    case 'put':
+      return isInstalledApp ? consolePut : put
   }
 }
 
@@ -308,3 +310,30 @@ export const getUserCanAccess = (appId: string, isInstalledApp: boolean) => {
 export const getAppAccessModeByAppCode = (appCode: string) => {
   return get<{ accessMode: AccessMode }>(`/webapp/access-mode?appCode=${appCode}`)
 }
+
+export const fetchMemories = async (
+  conversation_id = '',
+  memory_id = '',
+  version = '',
+  isInstalledApp: boolean,
+  installedAppId = '',
+) => {
+  return (getAction('get', isInstalledApp))(getUrl('/memories', isInstalledApp, installedAppId), { params: { conversation_id, memory_id, version } }) as Promise<Memory[]>
+}
+
+export const deleteMemory = (
+  memoryId = '',
+  isInstalledApp: boolean,
+  installedAppId = '',
+) => {
+  return (getAction('del', isInstalledApp))(getUrl('/memories', isInstalledApp, installedAppId), { params: { id: memoryId } })
+}
+
+export const editMemory = (
+  memoryId: string,
+  value: string,
+  isInstalledApp: boolean,
+  installedAppId = '',
+) => {
+  return (getAction('put', isInstalledApp))(getUrl('memory-edit', isInstalledApp, installedAppId), { body: { id: memoryId, update: value } })
+}