@allbluecn/web-app 0.12.0 → 0.12.2

package/src/components/tiptap/extension/ai-extension.ts

@@ -33,6 +33,8 @@ export interface AiStorage {
   response: string
   insertPos: number
   format: AiFormat
+  abortController?: AbortController | null
+  resetListener?: (() => void) | null
 }
 
 declare module "@tiptap/core" {
@@ -89,18 +91,8 @@ async function* streamFromServer(
   body: Record<string, string | undefined>,
   signal: AbortSignal
 ): AsyncGenerator<StreamChunk> {
-  // 构建 messages 和 systemPrompts
-  const messages: Array<{ role: "user" | "assistant"; content: string }> = []
-  const systemPrompts: string[] = []
-
-  if (body.prompt) {
-    if (body.instruction) {
-      systemPrompts.push(body.instruction)
-    }
-    messages.push({ role: "user", content: body.prompt })
-  }
-
-  // 共享 useSelectedModel 的 localStorage key，与对话页/工作台同步模型选择
+  // 提示词由服务端 tiptap.improve 模板解析，客户端不注入 system prompt
+  // model 读 useSelectedModel 的 localStorage key，与对话页/工作台同步模型选择
   const model =
     (typeof window !== "undefined" &&
       localStorage.getItem("chat:selectedModel")) ||
@@ -109,8 +101,9 @@ async function* streamFromServer(
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
-      messages,
-      systemPrompts,
+      prompt: body.prompt,
+      instruction: body.instruction,
+      type: body.type,
       model,
     }),
     signal,
@@ -145,16 +138,15 @@ async function* streamFromServer(
   }
 }
 
-export function insertDelta(editor: any, insertPos: number, delta: string): number {
+export function insertDelta(editor: any, insertPos: number, delta: string, markName?: string): number {
   if (!delta) return insertPos
-  const inserted = editor
-    .chain()
-    .focus()
-    .insertContentAt(insertPos, delta)
-    .run()
-  if (!inserted) {
-    editor.chain().focus().insertContent(delta).run()
-    return insertPos + delta.length
+  editor.chain().focus().insertContentAt(insertPos, delta).run()
+  if (markName) {
+    editor.chain()
+      .focus()
+      .setTextSelection({ from: insertPos, to: insertPos + delta.length })
+      .setMark(markName)
+      .run()
   }
   return insertPos + delta.length
 }
@@ -221,11 +213,12 @@ function createAiCommand(
     editor.storage.ai.resetListener = resetListener
 
     let insertPos = shouldInsert ? prepareInsertionRange(editor) : -1
+    const startPos = insertPos
     let accumulated = ""
 
     try {
       for await (const chunk of streamFromServer(
-        "/api/chat",
+        "/server/ai-stream",
         {
           prompt: body.prompt,
           instruction: body.instruction,
@@ -254,7 +247,7 @@ function createAiCommand(
           accumulated += chunk.delta
           editor.storage.ai.response = accumulated
           if (shouldInsert && insertPos >= 0) {
-            insertPos = insertDelta(editor, insertPos, chunk.delta)
+            insertPos = insertDelta(editor, insertPos, chunk.delta, "aiSuggestion")
           }
         }
       }
@@ -263,6 +256,9 @@ function createAiCommand(
         console.error(`[Ai] ${action} error:`, error)
       }
     } finally {
+      if (shouldInsert && accumulated && startPos >= 0) {
+        editor.storage.ai.generatedWith = { range: { from: startPos, to: insertPos } }
+      }
       if (abortController.signal.aborted && !accumulated) {
         editor.storage.ai.state = "idle"
       } else {

package/src/components/tiptap/extension/ai-suggestion-mark.ts

@@ -0,0 +1,45 @@
+import { Mark, markInputRule, markPasteRule } from "@tiptap/core"
+
+export interface AiSuggestionMarkOptions {
+  HTMLAttributes: Record<string, any>
+}
+
+export const AiSuggestionMark = Mark.create<AiSuggestionMarkOptions>({
+  name: "aiSuggestion",
+
+  addOptions() {
+    return {
+      HTMLAttributes: { class: "tiptap-ai-suggestion" },
+    }
+  },
+
+  addAttributes() {
+    return {}
+  },
+
+  parseHTML() {
+    return [{ tag: 'span[data-type="ai-suggestion"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["span", { ...this.options.HTMLAttributes, "data-type": "ai-suggestion", ...HTMLAttributes }, 0]
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: new RegExp(/@@(.+?)@@/),
+        type: this.type,
+      }),
+    ]
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: new RegExp(/@@(.+?)@@/),
+        type: this.type,
+      }),
+    ]
+  },
+})

package/src/components/tiptap/lib/advanced-utils.ts

@@ -283,7 +283,6 @@ export function getAllMatchingNodes(
   if (selection instanceof NodeSelection) {
     const selectedNode = selection.node
     if (nodeMatches(selectedNode)) {
-      // @ts-ignore TipTap v3 types incomplete
       matches.push({
         node: selectedNode,
         pos: selection.from,
@@ -300,7 +299,6 @@ export function getAllMatchingNodes(
 
     if (nodeMatches(node)) {
       const pos = $from.before(depth)
-      // @ts-ignore TipTap v3 types incomplete
       matches.push({ node, pos, depth })
     }
     depth--

package/src/components/tiptap/lib/utils/selection.ts

@@ -216,3 +216,20 @@ export function getSelectedBlockNodes(editor: Editor): PMNode[] {
 
   return blocks
 }
+
+/**
+ * Checks whether the current selection range contains any image nodes.
+ */
+export function selectionContainsImage(editor: Editor | null): boolean {
+  if (!editor || editor.state.selection.empty) return false
+  const { from, to } = editor.state.selection
+  let hasImage = false
+  editor.state.doc.nodesBetween(from, to, (node) => {
+    if (node.type.name === "image") {
+      hasImage = true
+      return false
+    }
+    return true
+  })
+  return hasImage
+}

package/src/components/tiptap/mindmap/mind-map.tsx

@@ -83,8 +83,8 @@ function useResolvedTheme(themeProp?: Theme): Theme {
 interface MindMapContextValue {
   mind: MindElixirInstance | null
   isLoaded: boolean
-  direction: 0 | 1 | 2
-  onDirectionChange: (direction: 0 | 1 | 2) => void
+  direction: 0 | 1 | 2 | 3
+  onDirectionChange: (direction: 0 | 1 | 2 | 3) => void
 }
 const MindMapContext = createContext<MindMapContextValue | null>(null)
 
@@ -102,7 +102,7 @@ export interface MindMapProps {
   children?: ReactNode
   data?: MindElixirData
   className?: string
-  direction?: 0 | 1 | 2
+  direction?: 0 | 1 | 2 | 3
   contextMenu?: boolean
   nodeMenu?: boolean
   keypress?: boolean
@@ -255,7 +255,7 @@ export const MindMap = forwardRef<MindMapRef, MindMapProps>(function MindMap(
   const mindRef = useRef<MindElixirInstance | null>(null)
   const [isLoaded, setIsLoaded] = useState(false)
   const [mindInstance, setMindInstance] = useState<MindElixirInstance | null>(null)
-  const [currentDirection, setCurrentDirection] = useState<0 | 1 | 2>(() => data?.direction ?? direction)
+  const [currentDirection, setCurrentDirection] = useState<0 | 1 | 2 | 3>(() => data?.direction ?? direction)
   const resolvedTheme = useResolvedTheme(themeProp)
   const id = useId()
 
@@ -367,7 +367,7 @@ export const MindMap = forwardRef<MindMapRef, MindMapProps>(function MindMap(
     mindRef.current.changeTheme(getTheme(resolvedTheme === "dark"))
   }, [resolvedTheme, monochrome, isLoaded])
 
-  const handleDirectionChange = useCallback((newDir: 0 | 1 | 2) => {
+  const handleDirectionChange = useCallback((newDir: 0 | 1 | 2 | 3) => {
     if (!mindRef.current) return
     if (newDir === 0) mindRef.current.initLeft()
     else if (newDir === 1) mindRef.current.initRight()
@@ -470,61 +470,49 @@ export function MindMapControls({
     <div className={cn("absolute z-10 flex flex-col gap-1", positionClasses[position], className)}>
       {showClose && (
         <Tooltip>
-          <TooltipTrigger asChild>
-            <button onClick={onClose} className={btn} aria-label={m.mindmap_toolbar_close()}>
+          <TooltipTrigger render={<button onClick={onClose} className={btn} aria-label={m.mindmap_toolbar_close()} />}>
               <X className="size-4" />
-            </button>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent side="left">{m.mindmap_toolbar_close()}</TooltipContent>
         </Tooltip>
       )}
       {showZoom && (
         <>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button onClick={handleZoomIn} className={btn} aria-label={m.mindmap_toolbar_zoomIn()}>
+            <TooltipTrigger render={<button onClick={handleZoomIn} className={btn} aria-label={m.mindmap_toolbar_zoomIn()} />}>
                 <Plus className="size-4" />
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent side="left">{m.mindmap_toolbar_zoomIn()}</TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button onClick={handleZoomOut} className={btn} aria-label={m.mindmap_toolbar_zoomOut()}>
+            <TooltipTrigger render={<button onClick={handleZoomOut} className={btn} aria-label={m.mindmap_toolbar_zoomOut()} />}>
                 <Minus className="size-4" />
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent side="left">{m.mindmap_toolbar_zoomOut()}</TooltipContent>
           </Tooltip>
         </>
       )}
       {showFit && (
         <Tooltip>
-          <TooltipTrigger asChild>
-            <button onClick={handleFit} className={btn} aria-label={m.mindmap_toolbar_fit()}>
+          <TooltipTrigger render={<button onClick={handleFit} className={btn} aria-label={m.mindmap_toolbar_fit()} />}>
               <ScanSearch className="size-4" />
-            </button>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent side="left">{m.mindmap_toolbar_fit()}</TooltipContent>
         </Tooltip>
       )}
       {showFullscreen && (
         <Tooltip>
-          <TooltipTrigger asChild>
-            <button onClick={onFullscreen} className={btn} aria-label={m.mindmap_toolbar_fullscreen()}>
+          <TooltipTrigger render={<button onClick={onFullscreen} className={btn} aria-label={m.mindmap_toolbar_fullscreen()} />}>
               <Maximize className="size-4" />
-            </button>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent side="left">{m.mindmap_toolbar_fullscreen()}</TooltipContent>
         </Tooltip>
       )}
       {showExport && (
         <Tooltip>
-          <TooltipTrigger asChild>
-            <button onClick={handleExport} className={btn} aria-label={m.mindmap_toolbar_export()}>
+          <TooltipTrigger render={<button onClick={handleExport} className={btn} aria-label={m.mindmap_toolbar_export()} />}>
               <Download className="size-4" />
-            </button>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent side="left">{m.mindmap_toolbar_export()}</TooltipContent>
         </Tooltip>
       )}
@@ -533,39 +521,27 @@ export function MindMapControls({
         <>
           <div className="w-6 mx-auto border-b border-border/50" />
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onDirectionChange(0)}
+            <TooltipTrigger render={<button onClick={() => onDirectionChange(0)}
                 className={cn(btn, direction === 0 && "bg-accent text-accent-foreground")}
-                aria-label={m.mindmap_toolbar_layoutLeft()}
-              >
+                aria-label={m.mindmap_toolbar_layoutLeft()} />}>
                 <span className="size-4 -scale-x-100"><TreeStructureIcon /></span>
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent side="left">{m.mindmap_toolbar_layoutLeft()}</TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onDirectionChange(1)}
+            <TooltipTrigger render={<button onClick={() => onDirectionChange(1)}
                 className={cn(btn, direction === 1 && "bg-accent text-accent-foreground")}
-                aria-label={m.mindmap_toolbar_layoutRight()}
-              >
+                aria-label={m.mindmap_toolbar_layoutRight()} />}>
                 <span className="size-4"><TreeStructureIcon /></span>
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent side="left">{m.mindmap_toolbar_layoutRight()}</TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onDirectionChange(2)}
+            <TooltipTrigger render={<button onClick={() => onDirectionChange(2)}
                 className={cn(btn, direction === 2 && "bg-accent text-accent-foreground")}
-                aria-label={m.mindmap_toolbar_layoutBalance()}
-              >
+                aria-label={m.mindmap_toolbar_layoutBalance()} />}>
                 <span className="size-4"><GraphIcon /></span>
-              </button>
-            </TooltipTrigger>
+              </TooltipTrigger>
             <TooltipContent side="left">{m.mindmap_toolbar_layoutBalance()}</TooltipContent>
           </Tooltip>
         </>

package/src/components/tiptap/node/annotation-node/annotation-node-view.tsx

@@ -30,7 +30,7 @@ import {
   MessageSquareQuote,
   Square as SquareIcon,
 } from "lucide-react";
-import { toast } from '@/components/ui/sonner';
+import { toast } from '@/components/ui/toast';
 import "./annotation-node.scss";
 import { m } from "@/paraglide/messages.js";
 

package/src/components/tiptap/notion-like/notion-like-editor-header.tsx

@@ -66,15 +66,11 @@ export function NotionEditorHeader() {
         {showLocalFileBtn && editor && (
           <ButtonGroup>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
+              <TooltipTrigger render={<Button variant="ghost"
                   size="sm"
-                  onClick={() => insertLocalFile(editor)}
-                >
+                  onClick={() => insertLocalFile(editor)} />}>
                   <FolderOpen className="size-4" />
-                </Button>
-              </TooltipTrigger>
+                </TooltipTrigger>
               <TooltipContent> {m['editor_insert-local-file']() } </TooltipContent>
             </Tooltip>
           </ButtonGroup>

package/src/components/tiptap/notion-like/notion-like-editor.tsx

@@ -51,6 +51,7 @@ import { useScrollToHash } from "../ui/copy-anchor-link-button/use-scroll-to-has
 import { HorizontalRule } from "../node/horizontal-rule-node/horizontal-rule-node-extension.ts"
 import { UiState } from "../extension/ui-state-extension.ts"
 import { AiExtension } from "../extension/ai-extension.ts"
+import { AiSuggestionMark } from "../extension/ai-suggestion-mark.ts"
 import { Image } from "../node/image-node/image-node-extension.ts"
 import { NodeBackground } from "../extension/node-background-extension.ts"
 import { NodeAlignment } from "../extension/node-alignment-extension.ts"
@@ -439,6 +440,7 @@ function NotionDocEditorContent({
       Typography,
       UiState,
       AiExtension,
+      AiSuggestionMark,
       TocNode.configure({
         topOffset: 48,
       }),

package/src/components/tiptap/ui/ai-ask-button/use-ai-ask.ts

@@ -24,6 +24,7 @@ import {
   isExtensionAvailable,
   isNodeTypeSelected,
 } from "../../lib/utils.ts"
+import { selectionContainsImage } from "../../lib/utils/selection.ts"
 
 // --- Hooks ---
 import { useTiptapEditor } from "../../hooks/use-tiptap-editor.ts"
@@ -72,6 +73,10 @@ export const canPerformAiAsk = (editor: Editor | null): boolean => {
     }
   }
 
+  if (selectionContainsImage(editor)) {
+    return false
+  }
+
   return true
 }
 

package/src/components/tiptap/ui/ai-menu/ai-menu-actions/ai-menu-actions.tsx

@@ -47,9 +47,8 @@ editor,
 
   const handleRegenerate = useCallback(() => {
     if (!editor) return
-    editor.chain().focus().aiRegenerate(options).run()
     onRegenerate?.()
-  }, [editor, onRegenerate, options])
+  }, [editor, onRegenerate])
 
   const handleDiscard = useCallback(() => {
     if (!editor) return