@allbluecn/web-app 0.6.3 → 0.7.1

package/src/components/tiptap/ui/ai-menu/ai-menu-items/tone-selection-submenu.tsx

@@ -0,0 +1,125 @@
+// 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 type { TextOptions } from "../../../lib/ai-types.ts"
+import type { Editor } from "@tiptap/react"
+import { useCallback, useMemo } from "react"
+import { useTranslation } from 'react-i18next'
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor.ts"
+import { getContextAndInsertAt, useAiMenuState } from "../index.tsx"
+import {
+  type Action,
+  filterMenuItems,
+  Menu,
+  MenuButton,
+  MenuButtonArrow,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  useComboboxValueState,
+} from "../../../ui-primitive/menu/index.tsx"
+import { Button } from "../../../ui-primitive/button/index.tsx"
+import { ComboboxList } from "../../../ui-primitive/combobox/index.tsx"
+import { ChevronRightIcon } from "../../../icons/chevron-right-icon.tsx"
+import { MicAiIcon } from "../../../icons/mic-ai-icon.tsx"
+import { SUPPORTED_TONES } from "./ai-menu-items-constants"
+
+export function ToneSelectionSubmenu({ editor: providedEditor }: {
+  editor?: Editor | null
+}) {
+  const { t } = useTranslation('editor')
+  const { editor } = useTiptapEditor(providedEditor)
+  const [searchValue] = useComboboxValueState()
+  const { state, updateState } = useAiMenuState()
+
+  const availableTones = useMemo(() => {
+    return filterMenuItems({ items: SUPPORTED_TONES }, searchValue)
+  }, [searchValue])
+
+  const handleToneSelection = useCallback(
+    (selectedTone: string) => {
+      if (!editor) return
+
+      const { insertAt, isSelection, context } = getContextAndInsertAt(editor)
+
+      if (!state.tone || state.tone !== selectedTone) {
+        updateState({ tone: selectedTone })
+      }
+
+      const toneOptions: TextOptions = {
+        stream: true,
+        format: "rich-text",
+        insertAt,
+        regenerate: !isSelection,
+      }
+
+      if (state.language) {
+        toneOptions.language = state.language
+      }
+
+      if (isSelection) {
+        toneOptions.text = context
+      }
+
+      editor.chain().aiAdjustTone(selectedTone, toneOptions).run()
+    },
+    [editor, state.language, state.tone, updateState]
+  )
+
+  const toneMenuItems = availableTones.map((tone) => (
+    <MenuItem
+      key={tone.value}
+      onClick={() => handleToneSelection(tone.value || "")}
+      render={
+        <Button variant="ghost">
+          <span className="tiptap-button-text">{tone.label}</span>
+        </Button>
+      }
+    />
+  ))
+
+  if (searchValue) {
+    return toneMenuItems
+  }
+
+  return (
+    <Menu
+      placement="right"
+      trigger={
+        <MenuButton
+          render={
+            <MenuItem
+              render={
+                <Button variant="ghost">
+                  <MicAiIcon className="tiptap-button-icon" />
+                  <span className="tiptap-button-text"> {t('adjust-tone') } </span>
+                  <MenuButtonArrow render={<ChevronRightIcon />} />
+                </Button>
+              }
+            />
+          }
+        />
+      }
+    >
+      <MenuContent>
+        <ComboboxList>
+          <MenuGroup>{toneMenuItems}</MenuGroup>
+        </ComboboxList>
+      </MenuContent>
+    </Menu>
+  )
+}

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

@@ -0,0 +1,42 @@
+// 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 type { Language, Tone } from "../../lib/ai-types.ts"
+
+export interface AiMenuPosition {
+  element: HTMLElement | null
+  rect: DOMRect | null
+}
+
+export interface AiMenuState {
+  isOpen: boolean
+  tone?: Tone
+  language: Language
+  shouldShowInput: boolean
+  inputIsFocused: boolean
+  fallbackAnchor: AiMenuPosition
+}
+
+export interface AiMenuStateContextValue {
+  state: AiMenuState
+  updateState: (updates: Partial<AiMenuState>) => void
+  setFallbackAnchor: (
+    element: HTMLElement | null,
+    rect?: DOMRect | null
+  ) => void
+  reset: () => void
+}

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

@@ -0,0 +1,255 @@
+import { getClientI18n } from '@/i18n/client'
+// 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 { type Editor } from "@tiptap/react"
+import { getSelectedDOMElement } from "../../lib/advanced-utils.ts"
+
+/**
+ * Computes the content-area rect of the editor (excluding padding/border).
+ * @param editorDom
+ * @returns
+ */
+export function getEditorContentRect(editorDom: HTMLElement) {
+  const editorRect = editorDom.getBoundingClientRect()
+  const style = getComputedStyle(editorDom)
+
+  const paddingLeft = parseFloat(style.paddingLeft)
+  const paddingRight = parseFloat(style.paddingRight)
+  const borderLeft = parseFloat(style.borderLeftWidth)
+  const borderRight = parseFloat(style.borderRightWidth)
+
+  const left = editorRect.left + borderLeft + paddingLeft
+  const width =
+    editorRect.width - paddingLeft - paddingRight - borderLeft - borderRight
+
+  return { left, width }
+}
+
+/**
+ * Creates a full-width anchor rect spanning the editor's content area at a given vertical position.
+ * @param editorDom
+ * @param sourceRect
+ * @returns
+ */
+export function createEditorWidthAnchorRect(
+  editorDom: HTMLElement,
+  sourceRect: DOMRect
+): DOMRect {
+  const { left, width } = getEditorContentRect(editorDom)
+  return new DOMRect(left, sourceRect.top, width, sourceRect.height)
+}
+
+/**
+ * Gets the bounding rect of the current text selection using the browser's
+ * Selection API, falling back to ProseMirror coordinates.
+ */
+export function getSelectionRangeRect(editor: Editor): DOMRect | null {
+  const { state } = editor
+  const { selection } = state
+
+  if (selection.empty) return null
+
+  const domSelection = window.getSelection()
+  const editorDom = editor.view.dom as HTMLElement
+
+  if (domSelection && domSelection.rangeCount > 0 && editorDom) {
+    const range = domSelection.getRangeAt(0)
+    const commonAncestor = range.commonAncestorContainer
+
+    if (commonAncestor && editorDom.contains(commonAncestor)) {
+      const rect = range.getBoundingClientRect()
+      if (rect.width > 0 && rect.height > 0) {
+        return rect
+      }
+    }
+  }
+
+  // Fallback: use ProseMirror coordinates
+  const fromCoords = editor.view.coordsAtPos(selection.from)
+  const toCoords = editor.view.coordsAtPos(selection.to)
+
+  return new DOMRect(
+    Math.min(fromCoords.left, toCoords.left),
+    Math.min(fromCoords.top, toCoords.top),
+    Math.abs(toCoords.right - fromCoords.left),
+    Math.abs(toCoords.bottom - fromCoords.top)
+  )
+}
+
+/**
+ * Creates a virtual anchor element that reports a bounding rect.
+ * When a referenceElement is provided, the anchor tracks scroll by storing
+ * the offset relative to the reference and computing fresh viewport
+ * coordinates on each getBoundingClientRect() call.
+ */
+export function createVirtualAnchor(
+  rect: DOMRect,
+  referenceElement?: HTMLElement | null
+): HTMLElement {
+  const anchor = document.createElement("div")
+  Object.assign(anchor.style, {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "0",
+    height: "0",
+    pointerEvents: "none",
+    opacity: "0",
+    zIndex: "-1",
+  })
+
+  if (referenceElement) {
+    // Store the offset relative to the reference element so that
+    // getBoundingClientRect dynamically adjusts when the user scrolls.
+    const refRect = referenceElement.getBoundingClientRect()
+    const offsetTop = rect.top - refRect.top
+    const offsetLeft = rect.left - refRect.left
+
+    anchor.getBoundingClientRect = () => {
+      const currentRefRect = referenceElement.getBoundingClientRect()
+      return new DOMRect(
+        currentRefRect.left + offsetLeft,
+        currentRefRect.top + offsetTop,
+        rect.width,
+        rect.height
+      )
+    }
+  } else {
+    anchor.getBoundingClientRect = () => rect
+  }
+  anchor.setAttribute("data-fallback-anchor", "true")
+  document.body.appendChild(anchor)
+  return anchor
+}
+
+export function getContextAndInsertAt(editor: Editor) {
+  let context: string | undefined = ""
+  let insertAt = { from: 0, to: 0 }
+  let isSelection = true
+  const generatedWith = editor.storage.ai.generatedWith
+
+  if (generatedWith && generatedWith.range) {
+    context = editor.storage.ai.response
+    insertAt = generatedWith.range
+    isSelection = false
+  }
+
+  if (!generatedWith || !generatedWith.range) {
+    const { state } = editor
+    const { selection } = state
+    const { from, to } = editor.state.selection
+
+    const selectionContent = selection.content()
+
+    const htmlContent =
+      editor.view.serializeForClipboard(selectionContent).dom.innerHTML
+    const textContent = selectionContent.content.textBetween(
+      0,
+      selectionContent.content.size,
+      "\n"
+    )
+
+    context = htmlContent || textContent
+    insertAt = { from, to }
+  }
+
+  return { context, insertAt, isSelection }
+}
+
+export function createPositionAnchor(rect: DOMRect): HTMLElement {
+  const anchor = document.createElement("div")
+  Object.assign(anchor.style, {
+    position: "absolute",
+    left: `${rect.left}px`,
+    top: `${rect.top}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    pointerEvents: "none",
+    opacity: "0",
+    zIndex: "-1",
+  })
+
+  anchor.setAttribute("data-fallback-anchor", "true")
+  document.body.appendChild(anchor)
+  return anchor
+}
+
+export function cleanupFallbackAnchors(): void {
+  document
+    .querySelectorAll('[data-fallback-anchor="true"]')
+    .forEach((el) => el.remove())
+}
+
+export function getTopMostParentInsideEditor(
+  element: HTMLElement,
+  editorRoot: HTMLElement
+): HTMLElement {
+  if (!element || !editorRoot) {
+    throw new Error(getClientI18n().t('element-and-editorroot-required'))
+  }
+
+  if (element === editorRoot) return element
+
+  if (!editorRoot.contains(element)) {
+    throw new Error(getClientI18n().t('element-not-in-editor-root'))
+  }
+
+  let parent = element
+  while (parent.parentElement && parent.parentElement !== editorRoot) {
+    parent = parent.parentElement
+  }
+
+  return parent
+}
+
+export function findAiMarkedDOMElement(editor: Editor): HTMLElement | null {
+  const view = editor.view
+  const aiMarkedElements = view.dom.querySelectorAll(
+    ".tiptap-ai-insertion"
+  ) as NodeListOf<HTMLElement>
+
+  if (aiMarkedElements.length === 0) return null
+
+  const lastAiMarkElement = aiMarkedElements[aiMarkedElements.length - 1]
+
+  if (lastAiMarkElement && view.dom) {
+    try {
+      return getTopMostParentInsideEditor(lastAiMarkElement, view.dom)
+    } catch {
+      return lastAiMarkElement || null
+    }
+  }
+
+  return lastAiMarkElement || null
+}
+
+export function findPrioritizedAIElement(editor: Editor): HTMLElement | null {
+  // AI marked elements
+  const aiMarkedElement = findAiMarkedDOMElement(editor)
+  if (aiMarkedElement) {
+    return aiMarkedElement
+  }
+
+  // Currently selected element
+  const selectedElement = getSelectedDOMElement(editor)
+  if (selectedElement) {
+    return selectedElement
+  }
+
+  return null
+}

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

@@ -0,0 +1,101 @@
+:root {
+  --tiptap-ai-prompt-focused-border-color: var(--tt-brand-color-500);
+  --tiptap-ai-prompt-border-color: var(--tt-gray-light-a-200);
+  --tiptap-ai-loading-background-color: var(--tt-gray-light-a-200);
+}
+
+.dark {
+  --tiptap-ai-prompt-focused-border-color: var(--tt-brand-color-500);
+  --tiptap-ai-prompt-border-color: var(--tt-gray-dark-a-200);
+  --tiptap-ai-loading-background-color: var(--tt-gray-dark-a-200);
+}
+
+.tiptap-ai-menu-progress {
+  display: flex;
+  align-items: center;
+  padding: 6px;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.tiptap-spinner-alt {
+  color: var(--tt-brand-color-500);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: normal;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.dots-container {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.dot {
+  border-radius: 50%;
+  background: var(--tiptap-ai-loading-background-color);
+}
+
+.dot:nth-child(1) {
+  width: 6px;
+  height: 6px;
+  animation: loading1 0.8s infinite ease-in-out;
+  animation-delay: 0s;
+}
+
+.dot:nth-child(2) {
+  width: 12px;
+  height: 12px;
+  animation: loading2 0.8s infinite ease-in-out;
+  animation-delay: 0.1s;
+}
+
+.dot:nth-child(3) {
+  width: 8px;
+  height: 8px;
+  animation: loading3 0.8s infinite ease-in-out;
+  animation-delay: 0.2s;
+}
+
+@keyframes loading1 {
+  0%,
+  80%,
+  100% {
+    background: var(--tiptap-ai-loading-background-color);
+    transform: scale(0.8);
+  }
+  40% {
+    background: var(--tt-brand-color-400);
+    transform: scale(1.2);
+  }
+}
+
+@keyframes loading2 {
+  0%,
+  80%,
+  100% {
+    background: var(--tiptap-ai-loading-background-color);
+    transform: scale(0.8);
+  }
+  40% {
+    background: var(--tt-brand-color-500);
+    transform: scale(1.2);
+  }
+}
+
+@keyframes loading3 {
+  0%,
+  80%,
+  100% {
+    background: var(--tiptap-ai-loading-background-color);
+    transform: scale(0.8);
+  }
+  40% {
+    background: var(--tt-brand-color-200);
+    transform: scale(1.2);
+  }
+}