feat: advanced prompt (#1330)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: Gillian97 <jinling.sunshine@gmail.com>

web/app/components/base/prompt-editor/plugins/history-block/component.tsx

@@ -0,0 +1,90 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSelectOrDelete, useTrigger } from '../../hooks'
+import { UPDATE_HISTORY_EVENT_EMITTER } from '../../constants'
+import type { RoleName } from './index'
+import { DELETE_HISTORY_BLOCK_COMMAND } from './index'
+import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
+import { MessageClockCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+
+type HistoryBlockComponentProps = {
+  nodeKey: string
+  roleName?: RoleName
+  onEditRole: () => void
+}
+
+const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
+  nodeKey,
+  roleName = { user: '', assistant: '' },
+  onEditRole,
+}) => {
+  const { t } = useTranslation()
+  const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_HISTORY_BLOCK_COMMAND)
+  const [triggerRef, open, setOpen] = useTrigger()
+  const { eventEmitter } = useEventEmitterContextContext()
+  const [localRoleName, setLocalRoleName] = useState<RoleName>(roleName)
+
+  eventEmitter?.useSubscription((v: any) => {
+    if (v?.type === UPDATE_HISTORY_EVENT_EMITTER)
+      setLocalRoleName(v.payload)
+  })
+
+  return (
+    <div className={`
+      group inline-flex items-center pl-1 pr-0.5 h-6 border border-transparent text-[#DD2590] rounded-[5px] hover:bg-[#FCE7F6]
+      ${open ? 'bg-[#FCE7F6]' : 'bg-[#FDF2FA]'}
+      ${isSelected && '!border-[#F670C7]'}
+    `} ref={ref}>
+      <MessageClockCircle className='mr-1 w-[14px] h-[14px]' />
+      <div className='mr-1 text-xs font-medium'>{t('common.promptEditor.history.item.title')}</div>
+      <PortalToFollowElem
+        open={open}
+        onOpenChange={setOpen}
+        placement='top-end'
+        offset={{
+          mainAxis: 4,
+          alignmentAxis: -148,
+        }}
+      >
+        <PortalToFollowElemTrigger ref={triggerRef}>
+          <div className={`
+            flex items-center justify-center w-[18px] h-[18px] rounded cursor-pointer
+            ${open ? 'bg-[#DD2590] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
+          `}>
+            <DotsHorizontal className='w-3 h-3' />
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent style={{ zIndex: 100 }}>
+          <div className='w-[360px] bg-white rounded-xl shadow-lg'>
+            <div className='p-4'>
+              <div className='mb-2 text-xs font-medium text-gray-500'>{t('common.promptEditor.history.modal.title')}</div>
+              <div className='flex items-center text-sm text-gray-700'>
+                <div className='mr-1 w-20 text-xs font-semibold'>{localRoleName?.user}</div>
+                {t('common.promptEditor.history.modal.user')}
+              </div>
+              <div className='flex items-center text-sm text-gray-700'>
+                <div className='mr-1 w-20 text-xs font-semibold'>{localRoleName?.assistant}</div>
+                {t('common.promptEditor.history.modal.assistant')}
+              </div>
+            </div>
+            <div
+              className='px-4 py-3 text-xs text-[#155EEF] border-t border-black/5 rounded-b-xl cursor-pointer'
+              onClick={onEditRole}
+            >
+              {t('common.promptEditor.history.modal.edit')}
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </div>
+  )
+}
+
+export default HistoryBlockComponent

web/app/components/base/prompt-editor/plugins/history-block/index.tsx

@@ -0,0 +1,73 @@
+import type { FC } from 'react'
+import { useEffect } from 'react'
+import {
+  $insertNodes,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+} from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import {
+  $createHistoryBlockNode,
+  HistoryBlockNode,
+} from './node'
+
+export const INSERT_HISTORY_BLOCK_COMMAND = createCommand('INSERT_HISTORY_BLOCK_COMMAND')
+export const DELETE_HISTORY_BLOCK_COMMAND = createCommand('DELETE_HISTORY_BLOCK_COMMAND')
+
+export type RoleName = {
+  user: string
+  assistant: string
+}
+
+export type HistoryBlockProps = {
+  roleName: RoleName
+  onEditRole: () => void
+  onInsert?: () => void
+  onDelete?: () => void
+}
+
+const HistoryBlock: FC<HistoryBlockProps> = ({
+  roleName,
+  onEditRole,
+  onInsert,
+  onDelete,
+}) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([HistoryBlockNode]))
+      throw new Error('HistoryBlockPlugin: HistoryBlock not registered on editor')
+
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_HISTORY_BLOCK_COMMAND,
+        () => {
+          const historyBlockNode = $createHistoryBlockNode(roleName, onEditRole)
+
+          $insertNodes([historyBlockNode])
+
+          if (onInsert)
+            onInsert()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        DELETE_HISTORY_BLOCK_COMMAND,
+        () => {
+          if (onDelete)
+            onDelete()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor, roleName, onEditRole, onInsert, onDelete])
+
+  return null
+}
+
+export default HistoryBlock

web/app/components/base/prompt-editor/plugins/history-block/node.tsx

@@ -0,0 +1,90 @@
+import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
+import { DecoratorNode } from 'lexical'
+import HistoryBlockComponent from './component'
+import type { RoleName } from './index'
+
+export type SerializedNode = SerializedLexicalNode & { roleName: RoleName; onEditRole: () => void }
+
+export class HistoryBlockNode extends DecoratorNode<JSX.Element> {
+  __roleName: RoleName
+  __onEditRole: () => void
+
+  static getType(): string {
+    return 'history-block'
+  }
+
+  static clone(node: HistoryBlockNode): HistoryBlockNode {
+    return new HistoryBlockNode(node.__roleName, node.__onEditRole)
+  }
+
+  constructor(roleName: RoleName, onEditRole: () => void, key?: NodeKey) {
+    super(key)
+
+    this.__roleName = roleName
+    this.__onEditRole = onEditRole
+  }
+
+  isInline(): boolean {
+    return true
+  }
+
+  createDOM(): HTMLElement {
+    const div = document.createElement('div')
+    div.classList.add('inline-flex', 'items-center', 'align-middle')
+    return div
+  }
+
+  updateDOM(): false {
+    return false
+  }
+
+  decorate(): JSX.Element {
+    return (
+      <HistoryBlockComponent
+        nodeKey={this.getKey()}
+        roleName={this.getRoleName()}
+        onEditRole={this.getOnEditRole()}
+      />
+    )
+  }
+
+  getRoleName(): RoleName {
+    const self = this.getLatest()
+
+    return self.__roleName
+  }
+
+  getOnEditRole(): () => void {
+    const self = this.getLatest()
+
+    return self.__onEditRole
+  }
+
+  static importJSON(serializedNode: SerializedNode): HistoryBlockNode {
+    const node = $createHistoryBlockNode(serializedNode.roleName, serializedNode.onEditRole)
+
+    return node
+  }
+
+  exportJSON(): SerializedNode {
+    return {
+      type: 'history-block',
+      version: 1,
+      roleName: this.getRoleName(),
+      onEditRole: this.getOnEditRole,
+    }
+  }
+
+  getTextContent(): string {
+    return '{{#histories#}}'
+  }
+}
+export function $createHistoryBlockNode(roleName: RoleName, onEditRole: () => void): HistoryBlockNode {
+  return new HistoryBlockNode(roleName, onEditRole)
+}
+
+export function $isHistoryBlockNode(
+  node: HistoryBlockNode | LexicalNode | null | undefined,
+): node is HistoryBlockNode {
+  return node instanceof HistoryBlockNode
+}