Lexical @唤起BOT选择

Author: manerfan

src/app.ts

@@ -19,6 +19,7 @@ import {
   llmProviderService,
   systemService,
   userService,
+  workspaceService,
 } from '@/services';
 import type { Response } from '@/services/typings';
 import {
@@ -33,6 +34,7 @@ import { ACCESS_TOKEN, TOKEN_TYPE } from './constants';
 import { LLM } from './services/llm/typings';
 import { SYSTEM } from './services/system/typings';
 import { USER } from './services/user/typings';
+import { WORKSPACE } from './services/workspace/typings';
 
 const loginPath = '/login';
 const ignoreAuthPath = ['/login', '/setup'];
@@ -49,6 +51,8 @@ export function render(oldRender: Function) {
 export async function getInitialState(): Promise<{
   // 当前登录账号
   userMe?: USER.UserEntity;
+  // 我的工作空间
+  mineWorkspace?: WORKSPACE.WorkspaceEntity;
   // 初始化状态
   setupStatus?: boolean;
   // 应用
@@ -67,6 +71,15 @@ export async function getInitialState(): Promise<{
     }
   };
 
+  const fetchMineWorkspace = async () => {
+    try {
+      const result = await workspaceService.mine();
+      return result.content;
+    } catch (ex) {
+      return undefined;
+    }
+  };
+
   const fetchSetupStatus = async () => {
     try {
       const result = await systemService.isSetup();
@@ -94,17 +107,19 @@ export async function getInitialState(): Promise<{
     }
   };
 
-  const [userMe, setupStatus, appInfo, providers] = await Promise.all<
+  const [userMe, workspace, setupStatus, appInfo, providers] = await Promise.all<
     [
       Promise<USER.UserEntity | undefined>,
+      Promise<WORKSPACE.WorkspaceEntity | undefined>,
       Promise<boolean | undefined>,
       Promise<SYSTEM.AppInfo | undefined>,
       Promise<LLM.ProviderSchema[] | undefined>,
     ]
-  >([fetchUserInfo(), fetchSetupStatus(), fetchAppInfo(), fetchProviders()]);
+  >([fetchUserInfo(), fetchMineWorkspace(), fetchSetupStatus(), fetchAppInfo(), fetchProviders()]);
 
   return {
     userMe: await userMe,
+    mineWorkspace: await workspace,
     setupStatus: await setupStatus,
     appInfo: await appInfo,
     providers: await providers,

src/components/chat/chat-input/index.tsx

@@ -113,7 +113,15 @@ const ChatInput: React.FC<{
               readOnly={loading}
               defaultValue=''
               showToolbar={false}
-              onChange={(markdown) => setQuery(markdown)} />
+              onChange={(markdown) => setQuery(markdown)}
+              botMentionOptions={{
+                enable: true,
+                trigger: '@',
+                onSelect: (botFavorite) => {
+                  console.log('===1===', botFavorite);
+                },
+              }}
+            />
           </div>
 
           {/* 底部按钮 */}

src/components/chat/index.tsx

@@ -41,7 +41,7 @@ const ChatContent: React.FC<{
 }> = ({ workspaceUid, conversationUid: _conversationUid, className, withChatBackgroundImage=true, emptyNode }) => {
   const [messageApi, contextHolder] = message.useMessage();
 
-  const chatContentPopoverRef = useRef<ScrollToBottomBtnRefProperty>();
+  const chatContentPopoverRef = useRef<ScrollToBottomBtnRefProperty>(null);
   const { initialState } = useModel('@@initialState');
 
   // 当前会话

src/components/common/ScrollToBottomBtn.tsx

@@ -16,14 +16,14 @@
 
 import { Button } from 'antd';
 import { ArrowDownToLine } from 'lucide-react';
-import React, { forwardRef, useImperativeHandle } from 'react';
+import { forwardRef, useImperativeHandle } from 'react';
 import { useScrollToBottom, useSticky } from 'react-scroll-to-bottom';
 
 export interface ScrollToBottomBtnRefProperty {
   trigScrollToBottom: () => void;
 }
 
-const ScrollToBottomBtn: React.FC<{ className?: string }> = forwardRef(({ className }, ref) => {
+const ScrollToBottomBtn = forwardRef<ScrollToBottomBtnRefProperty, { className?: string }>(({ className }, ref) => {
   const scrollToBottom = useScrollToBottom();
   const [sticky] = useSticky();
 

src/components/common/TabHeader.tsx

@@ -17,12 +17,14 @@
 import { getPathAndModule } from '@/services/common';
 import { history, useLocation } from '@umijs/max';
 import { Tabs, TabsProps } from 'antd';
+import { TabsType } from 'antd/es/tabs';
 import { SizeType } from 'antd/lib/config-provider/SizeContext';
 import { useState } from 'react';
 import StickyBox from 'react-sticky-box';
 
 const TabHeader: React.FC<{
   items: TabsProps['items'],
+  type?: TabsType,
   centered?: boolean,
   size?: SizeType;
   sticky?: boolean,
@@ -32,7 +34,7 @@ const TabHeader: React.FC<{
   tabBarRender?: boolean,
   defaultActiveKey?: string;
   tabBarExtraContent?: Partial<Record<'left' | 'right', React.ReactNode>>
-}> = ({ items, centered, size, sticky, className, contentNoPpadding, locationUpdate, tabBarRender, defaultActiveKey, tabBarExtraContent }) => {
+}> = ({ items, type, centered, size, sticky, className, contentNoPpadding, locationUpdate, tabBarRender, defaultActiveKey, tabBarExtraContent }) => {
   const location = useLocation();
 
   // 选择的菜单KEY
@@ -62,6 +64,7 @@ const TabHeader: React.FC<{
 
   return (
     <Tabs
+      type={type}
       centered={centered}
       size={size || "large"}
       defaultActiveKey={defaultActiveKey}

src/components/markdown/lexical/lexical-editor.tsx

@@ -21,7 +21,6 @@ import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
-import ToolbarPlugin from './plugins/ToolbarPlugin';
 
 import { $convertToMarkdownString } from '@lexical/markdown';
 import { Typography } from 'antd';
@@ -49,27 +48,35 @@ import TabFocusPlugin from './plugins/TabFocusPlugin';
 import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
 import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
 import { useSharedHistoryContext } from './context/SharedHistoryContext';
+import { USER_FAVORITE } from '@/services/user/favorite/typings';
 
 export interface LexicalInnerEditorRefProperty {
     getEditor: () => LexicalEditor;
     getMarkdownContent: () => string;
 }
 
+export type BotMentionOptions = {
+    enable?: boolean,
+    trigger?: string,
+    onSelect?: (botFavorite: USER_FAVORITE.BotFavoriteEntity) => void;
+}
+
 /**
  * 需要保证该组件无状态
  */
-const LexicalInnerEditor: React.FC<{
+const LexicalInnerEditor = forwardRef<LexicalInnerEditorRefProperty, {
     placeholder?: string,
     showToolbar?: boolean,
     onChange?: (markdown: string) => void,
-}> = forwardRef(({ placeholder, showToolbar = true, onChange }, ref) => {
+    botMentionOptions?: BotMentionOptions
+}>(({ placeholder, showToolbar = true, onChange, botMentionOptions }, ref) => {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null);
     const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false);
     const [editor] = useLexicalComposerContext();
     const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
     const { historyState } = useSharedHistoryContext();
 
-    const [markdown, setMarkdown] = useState<string>();
+    const [markdown, setMarkdown] = useState<string>('');
 
     useImperativeHandle(ref, () => ({
         getEditor() {
@@ -105,14 +112,15 @@ const LexicalInnerEditor: React.FC<{
 
     return <>
         {/* 工具栏 */}
-        {showToolbar &&
-            <ToolbarPlugin
+        {showToolbar && (() => {
+            const ToolbarPlugin = require('./plugins/ToolbarPlugin').default;
+            return <ToolbarPlugin
                 editor={editor}
                 activeEditor={editor}
                 setActiveEditor={() => { }}
                 setIsLinkEditMode={setIsLinkEditMode}
-            />
-        }
+            />;
+        })()}
 
         {/* 键盘事件监听 */}
         {/* <KeyboardEventPlugin editor={editor} onKeyboardEvent={(event: KeyboardEvent) => {
@@ -177,7 +185,16 @@ const LexicalInnerEditor: React.FC<{
         <SelectionAlwaysOnDisplay />
 
         {/* 斜杠青年 */}
-        <ComponentPickerPlugin trigger="/" />
+        <ComponentPickerPlugin />
+
+        {/* @BOT */}
+        {botMentionOptions?.enable && (() => {
+            const BotMentionsPlugin = require('./plugins/BotMentionsPlugin').default;
+            return <BotMentionsPlugin
+                trigger={botMentionOptions.trigger}
+                onSelect={botMentionOptions.onSelect}
+            />;
+        })()}
 
         {floatingAnchorElem && !isSmallWidthViewport && (<>
             {/* 代码块工具 */}

src/components/markdown/lexical/lexical-textarea.tsx

@@ -24,7 +24,7 @@ import { TRANSFORMERS } from './plugins/ExtTransformers';
 import { ToolbarContext } from './context/ToolbarContext';
 import { SharedHistoryContext } from './context/SharedHistoryContext';
 import { TableContext } from './plugins/TablePlugin';
-import LexicalInnerEditor, { LexicalInnerEditorRefProperty } from './lexical-editor';
+import LexicalInnerEditor, { BotMentionOptions, LexicalInnerEditorRefProperty } from './lexical-editor';
 import nodes from './nodes';
 import {
     CLEAR_EDITOR_COMMAND,
@@ -46,8 +46,9 @@ const LexicalTextarea: React.FC<{
     defaultValue?: string,
     showToolbar?: boolean,
     onChange?: (markdown: string) => void,
-}> = forwardRef(({ placeholder, readOnly, defaultValue, showToolbar, onChange }, ref) => {
-    const lexicalInnerEditorPopoverRef = useRef<LexicalInnerEditorRefProperty>();
+    botMentionOptions?: BotMentionOptions,
+}> = forwardRef(({ placeholder, readOnly, defaultValue, showToolbar, onChange, botMentionOptions }, ref) => {
+    const lexicalInnerEditorPopoverRef = useRef<LexicalInnerEditorRefProperty>(null);
 
     useImperativeHandle(ref, () => ({
         clearEditor() {
@@ -108,7 +109,8 @@ const LexicalTextarea: React.FC<{
                             ref={lexicalInnerEditorPopoverRef}
                             placeholder={placeholder}
                             showToolbar={showToolbar}
-                            onChange={onChange} />
+                            onChange={onChange}
+                            botMentionOptions={botMentionOptions} />
                     </ToolbarContext>
                 </TableContext>
             </SharedHistoryContext>

src/components/markdown/lexical/nodes/MentionNode.ts

@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  $applyNodeReplacement,
+  type DOMConversionMap,
+  type DOMConversionOutput,
+  type DOMExportOutput,
+  type EditorConfig,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedTextNode,
+  type Spread,
+  TextNode,
+} from 'lexical';
+
+export type SerializedMentionNode = Spread<
+  {
+    mentionName: string;
+  },
+  SerializedTextNode
+>;
+
+function $convertMentionElement(
+  domNode: HTMLElement,
+): DOMConversionOutput | null {
+  const textContent = domNode.textContent;
+
+  if (textContent !== null) {
+    const node = $createMentionNode(textContent);
+    return {
+      node,
+    };
+  }
+
+  return null;
+}
+
+const mentionStyle = 'background-color: rgba(24, 119, 232, 0.2)';
+export class MentionNode extends TextNode {
+  __mention: string;
+
+  static getType(): string {
+    return 'mention';
+  }
+
+  static clone(node: MentionNode): MentionNode {
+    return new MentionNode(node.__mention, node.__text, node.__key);
+  }
+  static importJSON(serializedNode: SerializedMentionNode): MentionNode {
+    const node = $createMentionNode(serializedNode.mentionName);
+    node.setTextContent(serializedNode.text);
+    node.setFormat(serializedNode.format);
+    node.setDetail(serializedNode.detail);
+    node.setMode(serializedNode.mode);
+    node.setStyle(serializedNode.style);
+    return node;
+  }
+
+  constructor(mentionName: string, text?: string, key?: NodeKey) {
+    super(text ?? mentionName, key);
+    this.__mention = mentionName;
+  }
+
+  exportJSON(): SerializedMentionNode {
+    return {
+      ...super.exportJSON(),
+      mentionName: this.__mention,
+      type: 'mention',
+      version: 1,
+    };
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config);
+    dom.style.cssText = mentionStyle;
+    dom.className = 'mention';
+    dom.spellcheck = false;
+    return dom;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('span');
+    element.setAttribute('data-lexical-mention', 'true');
+    element.textContent = this.__text;
+    return {element};
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      span: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-mention')) {
+          return null;
+        }
+        return {
+          conversion: $convertMentionElement,
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  isTextEntity(): true {
+    return true;
+  }
+
+  canInsertTextBefore(): boolean {
+    return false;
+  }
+
+  canInsertTextAfter(): boolean {
+    return false;
+  }
+}
+
+export function $createMentionNode(mentionName: string): MentionNode {
+  const mentionNode = new MentionNode(mentionName);
+  mentionNode.setMode('segmented').toggleDirectionless();
+  return $applyNodeReplacement(mentionNode);
+}
+
+export function $isMentionNode(
+  node: LexicalNode | null | undefined,
+): node is MentionNode {
+  return node instanceof MentionNode;
+}