memory panel

web/app/components/base/chat/chat-with-history/header/index.tsx

@@ -146,7 +146,7 @@ const Header = () => {
           )}
           {currentConversationId && (
             <Tooltip
-              popupContent={t('share.chat.memory')}
+              popupContent={t('share.chat.memory.actionButton')}
             >
               <ActionButton size='l' state={showChatMemory ? ActionButtonState.Active : ActionButtonState.Default} onClick={handleChatMemoryToggle}>
                 <Memory className='h-[18px] w-[18px]' />

web/app/components/base/chat/chat-with-history/hooks.tsx

@@ -478,7 +478,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     notify({ type: 'success', message: t('common.api.success') })
   }, [isInstalledApp, appId, t, notify])
 
-  const [showChatMemory, setShowChatMemory] = useState(false)
+  const [showChatMemory, setShowChatMemory] = useState(true)
 
   return {
     isInstalledApp,

web/app/components/base/chat/chat-with-history/index.tsx

@@ -15,13 +15,14 @@ import Sidebar from './sidebar'
 import Header from './header'
 import HeaderInMobile from './header-in-mobile'
 import ChatWrapper from './chat-wrapper'
+import MemoryPanel from './memory'
 import type { InstalledApp } from '@/models/explore'
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { checkOrSetAccessToken } from '@/app/components/share/utils'
 import AppUnavailable from '@/app/components/base/app-unavailable'
-import cn from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'
+import cn from '@/utils/classnames'
 
 type ChatWithHistoryProps = {
   className?: string
@@ -36,6 +37,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
     isMobile,
     themeBuilder,
     sidebarCollapseState,
+    showChatMemory,
   } = useChatWithHistoryContext()
   const isSidebarCollapsed = sidebarCollapseState
   const customConfig = appData?.custom_config
@@ -66,7 +68,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
       {isMobile && (
         <HeaderInMobile />
       )}
-      <div className={cn('relative grow p-2', isMobile && 'h-[calc(100%_-_56px)] p-0')}>
+      <div className={cn('relative flex grow p-2', isMobile && 'h-[calc(100%_-_56px)] p-0')}>
         {isSidebarCollapsed && (
           <div
             className={cn(
@@ -79,7 +81,11 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
             <Sidebar isPanel />
           </div>
         )}
-        <div className={cn('flex h-full flex-col overflow-hidden border-[0,5px] border-components-panel-border-subtle bg-chatbot-bg', isMobile ? 'rounded-t-2xl' : 'rounded-2xl')}>
+        <div className={cn(
+          'flex h-full grow flex-col overflow-hidden border-[0,5px] border-components-panel-border-subtle bg-chatbot-bg',
+          isMobile ? 'rounded-t-2xl' : 'rounded-2xl',
+          showChatMemory && 'mr-1',
+        )}>
           {!isMobile && <Header />}
           {appChatListDataLoading && (
             <Loading type='app' />
@@ -88,6 +94,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
             <ChatWrapper key={chatShouldReloadKey} />
           )}
         </div>
+        <MemoryPanel showChatMemory={showChatMemory} />
       </div>
     </div>
   )

web/app/components/base/chat/chat-with-history/memory/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiCloseLine,
+} from '@remixicon/react'
+import ActionButton from '@/app/components/base/action-button'
+import {
+  useChatWithHistoryContext,
+} from '../context'
+import cn from '@/utils/classnames'
+
+type Props = {
+  showChatMemory?: boolean
+}
+
+const MemoryPanel: React.FC<Props> = ({ showChatMemory }) => {
+  const { t } = useTranslation()
+  const {
+    setShowChatMemory,
+  } = useChatWithHistoryContext()
+
+  return (
+    <div className={cn(
+      'h-full w-[360px] shrink-0 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 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></div>
+      {/* Memory content goes here */}
+    </div>
+  )
+}
+
+export default MemoryPanel

web/i18n/en-US/share.ts

@@ -36,7 +36,28 @@ const translation = {
     temporarySystemIssue: 'Sorry, temporary system issue.',
     expand: 'Expand',
     collapse: 'Collapse',
-    memory: 'Chat Memory',
+    memory: {
+      actionButton: 'Chat Memory',
+      title: 'Memory',
+      latestVersion: 'Memory updated',
+      notLatestVersion: '{{num}} messages wait to be merged',
+      clearAll: 'Clear All Memory',
+      editTitle: 'Edit Memory',
+      updateVersion: {
+        previews: 'Previous Version',
+        next: 'Next Version',
+        title: 'Update Version',
+        update: 'Update',
+        edited: 'Edited',
+      },
+      operations: {
+        edit: 'Edit',
+        reset: 'Reset to default',
+        clear: 'Clear all update version',
+        cancel: 'Cancel',
+        save: 'Save & Apply',
+      },
+    },
   },
   generation: {
     tabs: {

web/i18n/zh-Hans/share.ts

@@ -32,7 +32,28 @@ const translation = {
     temporarySystemIssue: '抱歉，临时系统问题。',
     expand: '展开',
     collapse: '折叠',
-    memory: '聊天记忆',
+    memory: {
+      actionButton: '聊天记忆',
+      title: '记忆',
+      latestVersion: '记忆已更新',
+      notLatestVersion: '{{num}} 条消息等待合并',
+      clearAll: '清除所有记忆',
+      editTitle: '编辑记忆',
+      updateVersion: {
+        previews: '上一个版本',
+        next: '下一个版本',
+        title: '更新版本',
+        update: '更新',
+        edited: '已编辑',
+      },
+      operations: {
+        edit: '编辑',
+        reset: '重置为默认',
+        clear: '清除所有更新版本',
+        cancel: '取消',
+        save: '保存并应用',
+      },
+    },
   },
   generation: {
     tabs: {