@allbluecn/web-app 0.6.3 → 0.7.0

package/src/components/tiptap/ui/ai-menu/ai-menu-hooks.ts

@@ -0,0 +1,325 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { type Editor } from "@tiptap/react"
+import type { Transaction } from "@tiptap/pm/state"
+import { getSelectedDOMElement } from "../../lib/advanced-utils.ts"
+import {
+  findPrioritizedAIElement,
+  cleanupFallbackAnchors,
+  getSelectionRangeRect,
+  createVirtualAnchor,
+  createEditorWidthAnchorRect,
+} from "./ai-menu-utils.ts"
+import type {
+  AiMenuState,
+  AiMenuStateContextValue,
+} from "./ai-menu-types.ts"
+
+/** Safely remove an element ref and nullify it. */
+function cleanupRef(ref: React.MutableRefObject<HTMLElement | null>) {
+  if (ref.current) {
+    ref.current.remove()
+    ref.current = null
+  }
+}
+
+export const AiMenuStateContext = createContext<AiMenuStateContextValue | null>(
+  null
+)
+
+export const initialState: AiMenuState = {
+  isOpen: false,
+  tone: undefined,
+  language: "en",
+  shouldShowInput: true,
+  inputIsFocused: false,
+  fallbackAnchor: { element: null, rect: null },
+}
+
+export function useAiMenuState() {
+  const context = useContext(AiMenuStateContext)
+
+  if (!context) {
+    throw new Error("useAiMenuState must be used within an AiMenuStateProvider")
+  }
+
+  return context
+}
+
+export function useAiMenuStateProvider() {
+  const [state, setState] = useState<AiMenuState>(initialState)
+
+  const updateState = useCallback((updates: Partial<AiMenuState>) => {
+    setState((prev) => ({ ...prev, ...updates }))
+  }, [])
+
+  const setFallbackAnchor = useCallback(
+    (element: HTMLElement | null, rect?: DOMRect | null) => {
+      updateState({
+        fallbackAnchor: {
+          element,
+          rect: rect || element?.getBoundingClientRect() || null,
+        },
+      })
+    },
+    [updateState]
+  )
+
+  const reset = useCallback(() => {
+    setState(initialState)
+    cleanupFallbackAnchors()
+  }, [])
+
+  const value = useMemo(
+    () => ({ state, updateState, setFallbackAnchor, reset }),
+    [state, updateState, setFallbackAnchor, reset]
+  )
+
+  return { value, AiMenuStateContext }
+}
+
+// ─── Content Tracker ─────────────────────────────────────────────────
+
+function getLastAiElement(editorDom: HTMLElement): HTMLElement | null {
+  const elements = editorDom.querySelectorAll(
+    ".tiptap-ai-insertion"
+  ) as NodeListOf<HTMLElement>
+  return elements[elements.length - 1] ?? null
+}
+
+function isAiLoading(editor: Editor): boolean {
+  return editor.storage.ai?.state === "loading"
+}
+
+export function useAiContentTracker({
+  editor,
+  aiGenerationActive,
+  setAnchorElement,
+  anchorToSelection = false,
+}: {
+  editor: Editor | null
+  aiGenerationActive: boolean
+  setAnchorElement: (element: HTMLElement) => void
+  anchorToSelection?: boolean
+}) {
+  const fallbackAnchorRef = useRef<HTMLElement | null>(null)
+  const streamingAnchorRef = useRef<HTMLElement | null>(null)
+  const resizeObserverRef = useRef<ResizeObserver | null>(null)
+  const rafIdRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (!editor || !aiGenerationActive) return
+
+    const cleanupStreamingAnchor = () => {
+      resizeObserverRef.current?.disconnect()
+      resizeObserverRef.current = null
+
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current)
+        rafIdRef.current = null
+      }
+
+      cleanupRef(streamingAnchorRef)
+    }
+
+    const updateStreamingAnchor = (aiElement: HTMLElement) => {
+      const anchorRect = createEditorWidthAnchorRect(
+        editor.view.dom,
+        aiElement.getBoundingClientRect()
+      )
+
+      if (streamingAnchorRef.current) {
+        streamingAnchorRef.current.remove()
+      }
+
+      streamingAnchorRef.current = createVirtualAnchor(
+        anchorRect,
+        editor.view.dom
+      )
+      setAnchorElement(streamingAnchorRef.current)
+    }
+
+    const scheduleStreamingUpdate = (aiElement: HTMLElement) => {
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current)
+      rafIdRef.current = requestAnimationFrame(() =>
+        updateStreamingAnchor(aiElement)
+      )
+    }
+
+    const handleStreamingMode = () => {
+      const lastAiElement = getLastAiElement(editor.view.dom)
+      if (!lastAiElement) return
+
+      scheduleStreamingUpdate(lastAiElement)
+
+      if (!resizeObserverRef.current) {
+        resizeObserverRef.current = new ResizeObserver(() =>
+          scheduleStreamingUpdate(lastAiElement)
+        )
+        resizeObserverRef.current.observe(lastAiElement)
+      }
+    }
+
+    const handleStaticMode = () => {
+      let targetElement: HTMLElement | null = null
+
+      if (anchorToSelection) {
+        targetElement = getLastAiElement(editor.view.dom)
+      }
+
+      if (!targetElement) {
+        const aiMarkedElement = findPrioritizedAIElement(editor)
+        if (aiMarkedElement && aiMarkedElement !== editor.view.dom) {
+          targetElement = aiMarkedElement
+        }
+      }
+
+      if (!targetElement) return
+
+      cleanupRef(fallbackAnchorRef)
+
+      const anchorRect = createEditorWidthAnchorRect(
+        editor.view.dom,
+        targetElement.getBoundingClientRect()
+      )
+      const anchor = createVirtualAnchor(anchorRect, editor.view.dom)
+      fallbackAnchorRef.current = anchor
+
+      setAnchorElement(anchor)
+    }
+
+    const handleTransaction = ({ editor }: { editor: Editor }) => {
+      if (isAiLoading(editor) && anchorToSelection) {
+        handleStreamingMode()
+      } else {
+        cleanupStreamingAnchor()
+        handleStaticMode()
+      }
+    }
+
+    editor.on("transaction", handleTransaction)
+
+    return () => {
+      editor.off("transaction", handleTransaction)
+      cleanupStreamingAnchor()
+      cleanupRef(fallbackAnchorRef)
+    }
+  }, [aiGenerationActive, anchorToSelection, editor, setAnchorElement])
+}
+
+// ─── Text Selection Tracker ──────────────────────────────────────────
+
+export function useTextSelectionTracker({
+  editor,
+  aiGenerationActive,
+  showMenuAtElement,
+  setMenuVisible,
+  onSelectionChange,
+  prevent = false,
+  anchorToSelection = false,
+}: {
+  editor: Editor | null
+  aiGenerationActive: boolean
+  showMenuAtElement: (element: HTMLElement) => void
+  setMenuVisible: (visible: boolean) => void
+  onSelectionChange?: (
+    element: HTMLElement | null,
+    rect: DOMRect | null
+  ) => void
+  prevent?: boolean
+  anchorToSelection?: boolean
+}) {
+  const selectionAnchorRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    if (!editor || !aiGenerationActive || prevent) return
+
+    const showAtAnchor = (anchor: HTMLElement, rect: DOMRect) => {
+      setMenuVisible(true)
+      onSelectionChange?.(anchor, rect)
+      showMenuAtElement(anchor)
+    }
+
+    const handleSelectionAnchored = (editor: Editor) => {
+      const selectionRect = getSelectionRangeRect(editor)
+      if (!selectionRect) return false
+
+      const anchorRect = createEditorWidthAnchorRect(
+        editor.view.dom,
+        selectionRect
+      )
+
+      cleanupRef(selectionAnchorRef)
+
+      const anchor = createVirtualAnchor(anchorRect, editor.view.dom)
+      selectionAnchorRef.current = anchor
+
+      showAtAnchor(anchor, anchorRect)
+      return true
+    }
+
+    const handleSelectionDefault = (editor: Editor) => {
+      const selectedElement = getSelectedDOMElement(editor)
+      const shouldShow = Boolean(selectedElement && aiGenerationActive)
+
+      setMenuVisible(shouldShow)
+
+      if (shouldShow && selectedElement) {
+        showAtAnchor(selectedElement, selectedElement.getBoundingClientRect())
+      }
+    }
+
+    const handleTransaction = ({
+      editor,
+      transaction,
+    }: {
+      editor: Editor
+      transaction: Transaction
+    }) => {
+      if (transaction.selection?.empty) return
+
+      if (anchorToSelection && handleSelectionAnchored(editor)) return
+
+      handleSelectionDefault(editor)
+    }
+
+    editor.on("transaction", handleTransaction)
+
+    return () => {
+      editor.off("transaction", handleTransaction)
+      cleanupRef(selectionAnchorRef)
+    }
+  }, [
+    editor,
+    aiGenerationActive,
+    showMenuAtElement,
+    setMenuVisible,
+    onSelectionChange,
+    prevent,
+    anchorToSelection,
+  ])
+}

package/src/components/tiptap/ui/ai-menu/ai-menu-input/ai-menu-input-hooks.ts

@@ -0,0 +1,61 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { isHotkey } from "is-hotkey"
+import { useCallback } from "react"
+
+export function useKeyboardHandlers(
+  promptValue: string | undefined,
+  onClose?: () => void,
+  onInputSubmit?: () => void
+) {
+  return useCallback(
+    (event: React.KeyboardEvent) => {
+      if (isHotkey("backspace", event) && !promptValue?.length) {
+        event.preventDefault()
+        onClose?.()
+      } else if (isHotkey("enter", event) && !event.shiftKey) {
+        event.preventDefault()
+        onInputSubmit?.()
+      } else if (isHotkey("escape", event)) {
+        event.preventDefault()
+        onClose?.()
+      }
+    },
+    [promptValue, onClose, onInputSubmit]
+  )
+}
+
+export function useBlurHandler(
+  isEmpty: boolean,
+  onBlur?: () => void,
+  onEmptyBlur?: () => void
+) {
+  return useCallback(
+    (e: React.FocusEvent<HTMLElement>) => {
+      const hasFocus = e.currentTarget.contains(e.relatedTarget as Node)
+      if (hasFocus) return
+
+      if (isEmpty && onEmptyBlur) {
+        onEmptyBlur()
+      } else if (onBlur) {
+        onBlur()
+      }
+    },
+    [isEmpty, onBlur, onEmptyBlur]
+  )
+}

package/src/components/tiptap/ui/ai-menu/ai-menu-input/ai-menu-input-types.ts

@@ -0,0 +1,32 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export interface BaseAiMenuInputProps {
+  onInputSubmit: (value: string) => void
+  onToneChange?: (tone: string) => void
+  onClose?: () => void
+  onInputFocus?: () => void
+  onInputBlur?: () => void
+  onEmptyBlur?: () => void
+  showPlaceholder?: boolean
+  onPlaceholderClick?: () => void
+}
+
+export interface AiMenuInputTextareaProps
+  extends BaseAiMenuInputProps, Omit<React.ComponentProps<"div">, "style"> {
+  placeholder?: string
+}

package/src/components/tiptap/ui/ai-menu/ai-menu-input/ai-menu-input.scss

@@ -0,0 +1,114 @@
+:root {
+  --tiptap-ai-prompt-input-content-placeholder: var(--tt-gray-light-a-400);
+  --tiptap-ai-prompt-input-bg-color: var(--white);
+  --tiptap-ai-prompt-input-focused-border-color: var(--tt-brand-color-500);
+  --tiptap-ai-prompt-input-border-color: var(--tt-gray-light-a-200);
+
+  [data-active-state="off"] {
+    --tiptap-ai-prompt-input-text-color: var(--tt-gray-light-a-400);
+
+    &.tiptap-ai-prompt-input:hover {
+      --tiptap-ai-prompt-input-border-color: var(--tt-gray-light-a-300);
+    }
+  }
+}
+
+.dark {
+  --tiptap-ai-prompt-input-content-placeholder: var(--tt-gray-dark-a-400);
+  --tiptap-ai-prompt-input-bg-color: var(--tt-gray-dark-50);
+  --tiptap-ai-prompt-input-focused-border-color: var(--tt-brand-color-500);
+  --tiptap-ai-prompt-input-border-color: var(--tt-gray-dark-a-200);
+
+  [data-active-state="off"] {
+    --tiptap-ai-prompt-input-text-color: var(--tt-gray-dark-a-400);
+
+    &.tiptap-ai-prompt-input:hover {
+      --tiptap-ai-prompt-input-border-color: var(--tt-gray-dark-a-300);
+    }
+  }
+}
+
+.tiptap-ai-prompt-input {
+  background-color: var(--tiptap-ai-prompt-input-bg-color);
+  border: 1px solid var(--tiptap-ai-prompt-input-border-color);
+  border-radius: var(--tt-radius-lg, 0.75rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 0.375rem;
+  width: 100%;
+
+  &[data-focused="true"] {
+    border-color: var(--tiptap-ai-prompt-input-focused-border-color);
+  }
+}
+
+.tiptap-ai-prompt-input-content {
+  max-height: 9rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  resize: none;
+
+  display: block;
+  width: 100%;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  background: none;
+  appearance: none;
+  outline: none;
+
+  .tiptap.ProseMirror {
+    font-family: "Inter", sans-serif;
+  }
+
+  &::placeholder {
+    color: var(--tiptap-ai-prompt-input-content-placeholder);
+  }
+}
+
+[data-active-state="off"] {
+  &.tiptap-ai-prompt-input {
+    height: 2.75rem;
+    cursor: pointer;
+    border: 1px solid var(--tiptap-ai-prompt-input-border-color);
+    color: var(--tiptap-ai-prompt-input-text-color);
+
+    &:hover {
+      border: 1px solid var(--tiptap-ai-prompt-input-border-color);
+    }
+  }
+
+  .tiptap-ai-prompt-input-toolbar {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+.tiptap-ai-prompt-input-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tiptap-ai-prompt-input-placeholder-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+}
+
+.tiptap-ai-prompt-input-placeholder-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.tiptap-ai-prompt-input-placeholder-text {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+}