dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
+++ b/dify/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
@@ -0,0 +1,104 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+} from '@remixicon/react'
+import { useSelectOrDelete, useTrigger } from '../../hooks'
+import { UPDATE_DATASETS_EVENT_EMITTER } from '../../constants'
+import type { Dataset } from './index'
+import { DELETE_CONTEXT_BLOCK_COMMAND } from './index'
+import { File05, Folder } from '@/app/components/base/icons/src/vender/solid/files'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+
+type ContextBlockComponentProps = {
+  nodeKey: string
+  datasets?: Dataset[]
+  onAddContext: () => void
+  canNotAddContext?: boolean
+}
+
+const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
+  nodeKey,
+  datasets = [],
+  onAddContext,
+  canNotAddContext,
+}) => {
+  const { t } = useTranslation()
+  const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_CONTEXT_BLOCK_COMMAND)
+  const [triggerRef, open, setOpen] = useTrigger()
+  const { eventEmitter } = useEventEmitterContextContext()
+  const [localDatasets, setLocalDatasets] = useState<Dataset[]>(datasets)
+
+  eventEmitter?.useSubscription((v: any) => {
+    if (v?.type === UPDATE_DATASETS_EVENT_EMITTER)
+      setLocalDatasets(v.payload)
+  })
+
+  return (
+    <div className={`
+      group inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#F4F3FF] pl-1 pr-0.5 text-[#6938EF] hover:bg-[#EBE9FE]
+      ${open ? 'bg-[#EBE9FE]' : 'bg-[#F4F3FF]'}
+      ${isSelected && '!border-[#9B8AFB]'}
+    `} ref={ref}>
+      <File05 className='mr-1 h-[14px] w-[14px]' />
+      <div className='mr-1 text-xs font-medium'>{t('common.promptEditor.context.item.title')}</div>
+      {!canNotAddContext && (
+        <PortalToFollowElem
+          open={open}
+          onOpenChange={setOpen}
+          placement='bottom-end'
+          offset={{
+            mainAxis: 3,
+            alignmentAxis: -147,
+          }}
+        >
+          <PortalToFollowElemTrigger ref={triggerRef}>
+            <div className={`
+            flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded text-[11px] font-semibold
+            ${open ? 'bg-[#6938EF] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
+          `}>{localDatasets.length}</div>
+          </PortalToFollowElemTrigger>
+          <PortalToFollowElemContent style={{ zIndex: 100 }}>
+            <div className='w-[360px] rounded-xl bg-white shadow-lg'>
+              <div className='p-4'>
+                <div className='mb-2 text-xs font-medium text-gray-500'>
+                  {t('common.promptEditor.context.modal.title', { num: localDatasets.length })}
+                </div>
+                <div className='max-h-[270px] overflow-y-auto'>
+                  {
+                    localDatasets.map(dataset => (
+                      <div key={dataset.id} className='flex h-8 items-center'>
+                        <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5] bg-[#F5F8FF]'>
+                          <Folder className='h-4 w-4 text-[#444CE7]' />
+                        </div>
+                        <div className='truncate text-sm text-gray-800' title=''>{dataset.name}</div>
+                      </div>
+                    ))
+                  }
+                </div>
+                <div className='flex h-8 cursor-pointer items-center text-[#155EEF]' onClick={onAddContext}>
+                  <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-gray-100'>
+                    <RiAddLine className='h-[14px] w-[14px]' />
+                  </div>
+                  <div className='text-[13px] font-medium' title=''>{t('common.promptEditor.context.modal.add')}</div>
+                </div>
+              </div>
+              <div className='rounded-b-xl border-t-[0.5px] border-gray-50 bg-gray-50 px-4 py-3 text-xs text-gray-500'>
+                {t('common.promptEditor.context.modal.footer')}
+              </div>
+            </div>
+          </PortalToFollowElemContent>
+        </PortalToFollowElem>
+      )}
+
+    </div>
+  )
+}
+
+export default ContextBlockComponent
--- a/dify/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
+++ b/dify/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
@@ -0,0 +1,64 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+} from 'react'
+import { $applyNodeReplacement } from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { decoratorTransform } from '../../utils'
+import { CONTEXT_PLACEHOLDER_TEXT } from '../../constants'
+import type { ContextBlockType } from '../../types'
+import {
+  $createContextBlockNode,
+  ContextBlockNode,
+} from '../context-block/node'
+import { CustomTextNode } from '../custom-text/node'
+import { noop } from 'lodash-es'
+
+const REGEX = new RegExp(CONTEXT_PLACEHOLDER_TEXT)
+
+const ContextBlockReplacementBlock = ({
+  datasets = [],
+  onAddContext = noop,
+  onInsert,
+  canNotAddContext,
+}: ContextBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([ContextBlockNode]))
+      throw new Error('ContextBlockNodePlugin: ContextBlockNode not registered on editor')
+  }, [editor])
+
+  const createContextBlockNode = useCallback((): ContextBlockNode => {
+    if (onInsert)
+      onInsert()
+    return $applyNodeReplacement($createContextBlockNode(datasets, onAddContext, canNotAddContext))
+  }, [datasets, onAddContext, onInsert, canNotAddContext])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + CONTEXT_PLACEHOLDER_TEXT.length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createContextBlockNode)),
+    )
+  }, [])
+
+  return null
+}
+
+export default memo(ContextBlockReplacementBlock)
--- a/dify/web/app/components/base/prompt-editor/plugins/context-block/index.tsx
+++ b/dify/web/app/components/base/prompt-editor/plugins/context-block/index.tsx
@@ -0,0 +1,75 @@
+import {
+  memo,
+  useEffect,
+} from 'react'
+import {
+  $insertNodes,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+} from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import type { ContextBlockType } from '../../types'
+import {
+  $createContextBlockNode,
+  ContextBlockNode,
+} from './node'
+import { noop } from 'lodash-es'
+
+export const INSERT_CONTEXT_BLOCK_COMMAND = createCommand('INSERT_CONTEXT_BLOCK_COMMAND')
+export const DELETE_CONTEXT_BLOCK_COMMAND = createCommand('DELETE_CONTEXT_BLOCK_COMMAND')
+
+export type Dataset = {
+  id: string
+  name: string
+  type: string
+}
+
+const ContextBlock = memo(({
+  datasets = [],
+  onAddContext = noop,
+  onInsert,
+  onDelete,
+  canNotAddContext,
+}: ContextBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([ContextBlockNode]))
+      throw new Error('ContextBlockPlugin: ContextBlock not registered on editor')
+
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_CONTEXT_BLOCK_COMMAND,
+        () => {
+          const contextBlockNode = $createContextBlockNode(datasets, onAddContext, canNotAddContext)
+
+          $insertNodes([contextBlockNode])
+
+          if (onInsert)
+            onInsert()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        DELETE_CONTEXT_BLOCK_COMMAND,
+        () => {
+          if (onDelete)
+            onDelete()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor, datasets, onAddContext, onInsert, onDelete, canNotAddContext])
+
+  return null
+})
+ContextBlock.displayName = 'ContextBlock'
+
+export { ContextBlock }
+export { ContextBlockNode } from './node'
+export { default as ContextBlockReplacementBlock } from './context-block-replacement-block'
--- a/dify/web/app/components/base/prompt-editor/plugins/context-block/node.tsx
+++ b/dify/web/app/components/base/prompt-editor/plugins/context-block/node.tsx
@@ -0,0 +1,100 @@
+import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
+import { DecoratorNode } from 'lexical'
+import ContextBlockComponent from './component'
+import type { Dataset } from './index'
+
+export type SerializedNode = SerializedLexicalNode & { datasets: Dataset[]; onAddContext: () => void; canNotAddContext: boolean }
+
+export class ContextBlockNode extends DecoratorNode<React.JSX.Element> {
+  __datasets: Dataset[]
+  __onAddContext: () => void
+  __canNotAddContext: boolean
+
+  static getType(): string {
+    return 'context-block'
+  }
+
+  static clone(node: ContextBlockNode): ContextBlockNode {
+    return new ContextBlockNode(node.__datasets, node.__onAddContext, node.getKey(), node.__canNotAddContext)
+  }
+
+  isInline(): boolean {
+    return true
+  }
+
+  constructor(datasets: Dataset[], onAddContext: () => void, key?: NodeKey, canNotAddContext?: boolean) {
+    super(key)
+
+    this.__datasets = datasets
+    this.__onAddContext = onAddContext
+    this.__canNotAddContext = canNotAddContext || false
+  }
+
+  createDOM(): HTMLElement {
+    const div = document.createElement('div')
+    div.classList.add('inline-flex', 'items-center', 'align-middle')
+    return div
+  }
+
+  updateDOM(): false {
+    return false
+  }
+
+  decorate(): React.JSX.Element {
+    return (
+      <ContextBlockComponent
+        nodeKey={this.getKey()}
+        datasets={this.getDatasets()}
+        onAddContext={this.getOnAddContext()}
+        canNotAddContext={this.getCanNotAddContext()}
+      />
+    )
+  }
+
+  getDatasets(): Dataset[] {
+    const self = this.getLatest()
+
+    return self.__datasets
+  }
+
+  getOnAddContext(): () => void {
+    const self = this.getLatest()
+
+    return self.__onAddContext
+  }
+
+  getCanNotAddContext(): boolean {
+    const self = this.getLatest()
+
+    return self.__canNotAddContext
+  }
+
+  static importJSON(serializedNode: SerializedNode): ContextBlockNode {
+    const node = $createContextBlockNode(serializedNode.datasets, serializedNode.onAddContext, serializedNode.canNotAddContext)
+
+    return node
+  }
+
+  exportJSON(): SerializedNode {
+    return {
+      type: 'context-block',
+      version: 1,
+      datasets: this.getDatasets(),
+      onAddContext: this.getOnAddContext(),
+      canNotAddContext: this.getCanNotAddContext(),
+    }
+  }
+
+  getTextContent(): string {
+    return '{{#context#}}'
+  }
+}
+export function $createContextBlockNode(datasets: Dataset[], onAddContext: () => void, canNotAddContext?: boolean): ContextBlockNode {
+  return new ContextBlockNode(datasets, onAddContext, undefined, canNotAddContext)
+}
+
+export function $isContextBlockNode(
+  node: ContextBlockNode | LexicalNode | null | undefined,
+): boolean {
+  return node instanceof ContextBlockNode
+}