embedded chat memory UI

2025-07-31 16:54:39 +08:00 · 2025-07-31 16:54:39 +08:00 · c90ab89323
parent 8547d4b1ff
commit c90ab89323
11 changed files with 417 additions and 2 deletions
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/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(true)
+  const [showChatMemory, setShowChatMemory] = useState(false)

  return {
    isInstalledApp,
--- a/web/app/components/base/chat/embedded-chatbot/context.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/context.tsx
@ -56,6 +56,8 @@ export type EmbeddedChatbotContextValue = {
    name?: string
    avatar_url?: string
  }
+  showChatMemory?: boolean
+  setShowChatMemory: (state: boolean) => void
 }

 export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>({
@ -86,5 +88,7 @@ export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>
  setCurrentConversationInputs: noop,
  allInputsHidden: false,
  initUserVariables: {},
+  showChatMemory: false,
+  setShowChatMemory: noop,
 })
 export const useEmbeddedChatbotContext = () => useContext(EmbeddedChatbotContext)
--- a/web/app/components/base/chat/embedded-chatbot/header/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
@ -7,8 +7,9 @@ import { CssTransform } from '../theme/utils'
 import {
  useEmbeddedChatbotContext,
 } from '../context'
+import { Memory } from '@/app/components/base/icons/src/vender/line/others'
 import Tooltip from '@/app/components/base/tooltip'
-import ActionButton from '@/app/components/base/action-button'
+import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
 import ViewFormDropdown from '@/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
@ -36,6 +37,8 @@ const Header: FC<IHeaderProps> = ({
    appData,
    currentConversationId,
    inputsForms,
+    showChatMemory,
+    setShowChatMemory,
  } = useEmbeddedChatbotContext()

  const isClient = typeof window !== 'undefined'
@ -76,6 +79,10 @@ const Header: FC<IHeaderProps> = ({
    }, parentOrigin)
  }, [isIframe, parentOrigin, showToggleExpandButton, expanded])

+  const handleChatMemoryToggle = useCallback(() => {
+    setShowChatMemory(!showChatMemory)
+  }, [setShowChatMemory, showChatMemory])
+
  if (!isMobile) {
    return (
      <div className='flex h-14 shrink-0 items-center justify-end p-3'>
@ -127,6 +134,15 @@ const Header: FC<IHeaderProps> = ({
          {currentConversationId && inputsForms.length > 0 && (
            <ViewFormDropdown />
          )}
+          {currentConversationId && (
+            <Tooltip
+              popupContent={t('share.chat.memory.actionButton')}
+            >
+              <ActionButton size='l' state={showChatMemory ? ActionButtonState.Active : ActionButtonState.Default} onClick={handleChatMemoryToggle}>
+                <Memory className='h-[18px] w-[18px]' />
+              </ActionButton>
+            </Tooltip>
+          )}
        </div>
      </div>
    )
@ -174,6 +190,15 @@ const Header: FC<IHeaderProps> = ({
        {currentConversationId && inputsForms.length > 0 && (
          <ViewFormDropdown iconColor={theme?.colorPathOnHeader} />
        )}
+        {currentConversationId && (
+            <Tooltip
+              popupContent={t('share.chat.memory.actionButton')}
+            >
+              <ActionButton size='l' onClick={handleChatMemoryToggle}>
+                <Memory className={cn('h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
+              </ActionButton>
+            </Tooltip>
+          )}
      </div>
    </div>
  )
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@ -380,6 +380,8 @@ export const useEmbeddedChatbot = () => {
    notify({ type: 'success', message: t('common.api.success') })
  }, [isInstalledApp, appId, t, notify])

+  const [showChatMemory, setShowChatMemory] = useState(false)
+
  return {
    appInfoError,
    appInfoLoading: appInfoLoading || (systemFeatures.webapp_auth.enabled && isCheckingPermission),
@ -422,5 +424,7 @@ export const useEmbeddedChatbot = () => {
    setCurrentConversationInputs,
    allInputsHidden,
    initUserVariables,
+    showChatMemory,
+    setShowChatMemory,
  }
 }
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@ -16,6 +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 DifyLogo from '@/app/components/base/logo/dify-logo'
 import cn from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'
@ -30,6 +31,8 @@ const Chatbot = () => {
    chatShouldReloadKey,
    handleNewConversation,
    themeBuilder,
+    showChatMemory,
+    setShowChatMemory,
  } = useEmbeddedChatbotContext()
  const { t } = useTranslation()
  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
@ -90,6 +93,15 @@ 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>
+        )}
    </div>
  )
 }
@ -132,6 +144,8 @@ const EmbeddedChatbotWrapper = () => {
    setCurrentConversationInputs,
    allInputsHidden,
    initUserVariables,
+    showChatMemory,
+    setShowChatMemory,
  } = useEmbeddedChatbot()

  return <EmbeddedChatbotContext.Provider value={{
@ -169,6 +183,8 @@ const EmbeddedChatbotWrapper = () => {
    setCurrentConversationInputs,
    allInputsHidden,
    initUserVariables,
+    showChatMemory,
+    setShowChatMemory,
  }}>
    <Chatbot />
  </EmbeddedChatbotContext.Provider>
--- 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
@ -0,0 +1,117 @@
+'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
--- a/web/app/components/base/chat/embedded-chatbot/memory/card/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/memory/card/index.tsx
@ -0,0 +1,81 @@
+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
--- a/web/app/components/base/chat/embedded-chatbot/memory/card/operation.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/memory/card/operation.tsx
@ -0,0 +1,79 @@
+'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)
--- a/web/app/components/base/chat/embedded-chatbot/memory/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/memory/index.tsx
@ -0,0 +1,54 @@
+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
--- a/web/app/components/base/chat/embedded-chatbot/memory/mock.ts
+++ b/web/app/components/base/chat/embedded-chatbot/memory/mock.ts
@ -0,0 +1,29 @@
+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,
+  },
+]
--- a/web/app/components/base/chat/embedded-chatbot/memory/type.ts
+++ b/web/app/components/base/chat/embedded-chatbot/memory/type.ts
@ -0,0 +1,6 @@
+export type MemoryItem = {
+  name: string;
+  content: string;
+  status?: 'latest' | 'needUpdate';
+  mergeCount?: number;
+}