memory edit modal

2025-07-31 15:14:37 +08:00 · 2025-07-31 15:14:37 +08:00 · fbcfebbba1
parent f827f8dc63
commit fbcfebbba1
3 changed files with 125 additions and 29 deletions
--- 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
@ -0,0 +1,78 @@
+'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
+}
+
+const MemoryEditModal = ({
+  memory,
+  show = false,
+  onConfirm,
+  onHide,
+}: 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()
+  }
+
+  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 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
--- 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
@ -9,6 +9,7 @@ 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'

@ -19,41 +20,56 @@ type Props = {
 const MemoryCard: React.FC<Props> = ({ memory }) => {
  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
+        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)} />
+            </div>
+          )}
        </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 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>
-      <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>
+      {showEditModal && (
+        <MemoryEditModal
+          show={showEditModal}
+          memory={memory}
+          onConfirm={async (info) => {
+            // Handle confirm logic here
+            console.log('Memory updated:', info)
+            setShowEditModal(false)
+          }}
+          onHide={() => setShowEditModal(false)}
+        />
      )}
-      {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>
+    </>
  )
 }

--- 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
@ -13,9 +13,11 @@ 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)
@ -49,7 +51,7 @@ const OperationDropdown: FC<Props> = ({
      <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' 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>