memory card operation

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

@@ -1,9 +1,15 @@
 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 type { MemoryItem } from './type'
+import Operation from './operation'
+import type { MemoryItem } from '../type'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -12,25 +18,37 @@ type Props = {
 
 const MemoryCard: React.FC<Props> = ({ memory }) => {
   const { t } = useTranslation()
+  const [isHovering, setIsHovering] = React.useState(false)
 
   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={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'>
+        <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 />
+          </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='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'>
+        <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>

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

@@ -0,0 +1,77 @@
+'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 = {
+}
+
+const OperationDropdown: FC<Props> = ({
+}) => {
+  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'>{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)

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

@@ -2,16 +2,27 @@ 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]',
+    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] \\n Current Progress: [Literature review, experiments, etc.] \\n Challenges: [What you\'re struggling with] \\n Goals: [Short-term and long-term research goals]',
+    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] \\n Current Issues: [Bugs, technical debt, etc.] \\n Goals: [Features to implement, improvements to make]',
+    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,
   },