memory card

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Memory } from '@/app/components/base/icons/src/vender/line/others'
+import Badge from '@/app/components/base/badge'
+import Indicator from '@/app/components/header/indicator'
+import type { MemoryItem } from './type'
+import cn from '@/utils/classnames'
+
+type Props = {
+  memory: MemoryItem
+}
+
+const MemoryCard: React.FC<Props> = ({ memory }) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn('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')}>
+      <div className='flex items-end justify-between pb-1 pl-4 pr-2 pt-2'>
+        <div className='flex items-center gap-1'>
+          <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='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'>
+          <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'>
+          <div className='system-xs-regular text-text-tertiary'>{t('share.chat.memory.notLatestVersion', { num: memory.mergeCount })}</div>
+          <Indicator color='orange' />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default MemoryCard

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

@@ -9,8 +9,11 @@ import Button from '@/app/components/base/button'
 import {
   useChatWithHistoryContext,
 } from '../context'
+import MemoryCard from './card'
 import cn from '@/utils/classnames'
 
+import { mockMemoryList } from './mock'
+
 type Props = {
   showChatMemory?: boolean
 }
@@ -32,8 +35,10 @@ const MemoryPanel: React.FC<Props> = ({ showChatMemory }) => {
           <RiCloseLine className='h-[18px] w-[18px]' />
         </ActionButton>
       </div>
-      {/* Memory content goes here */}
       <div className='h-0 grow overflow-y-auto px-3 pt-2'>
+        {mockMemoryList.map(memory => (
+          <MemoryCard key={memory.name} memory={memory} />
+        ))}
         <div className='flex items-center justify-center'>
           <Button variant='ghost'>
             <RiDeleteBinLine className='mr-1 h-3.5 w-3.5' />

web/app/components/base/chat/chat-with-history/memory/mock.ts

@@ -0,0 +1,18 @@
+import type { MemoryItem } from './type'
+export const mockMemoryList: MemoryItem[] = [
+  {
+    name: 'learning_companion',
+    content: 'Learning Goal: [What you\'re studying] \\n Current Level: [Beginner/Intermediate/Advanced] \\n Learning Style: [Visual, hands-on, theoretical, etc.] \\n Progress: [Topics mastered, current focus] \\n Preferred Pace: [Fast/moderate/slow explanations] \\n Background: [Relevant experience or education] \\n Time Constraints: [Available study time]',
+  },
+  {
+    name: 'research_partner',
+    content: 'Research Topic: [Your research topic] \\n Current Progress: [Literature review, experiments, etc.] \\n Challenges: [What you\'re struggling with] \\n Goals: [Short-term and long-term research goals]',
+    status: 'latest',
+  },
+  {
+    name: 'code_partner',
+    content: 'Code Context: [Brief description of the codebase] \\n Current Issues: [Bugs, technical debt, etc.] \\n Goals: [Features to implement, improvements to make]',
+    status: 'needUpdate',
+    mergeCount: 5,
+  },
+]

web/app/components/base/chat/chat-with-history/memory/type.ts

@@ -0,0 +1,6 @@
+export type MemoryItem = {
+  name: string;
+  content: string;
+  status?: 'latest' | 'needUpdate';
+  mergeCount?: number;
+}