feat: RAG Integration (#238)

* feat: add rag provider and retriever

* feat: retriever tool

* feat: add retriever tool to the researcher node

* feat: add rag http apis

* feat: new message input supports resource mentions

* feat: new message input component support resource mentions

* refactor: need_web_search to need_search

* chore: RAG integration docs

* chore: change example api host

* fix: user message color in dark mode

* fix: mentions style

* feat: add local_search_tool to researcher prompt

* chore: research prompt

* fix: ragflow page size and reporter with

* docs: ragflow integration and add acknowledgment projects

* chore: format

web/src/components/deer-flow/link.tsx

@@ -37,7 +37,7 @@ export const Link = ({
   }, [credibleLinks, href, responding, checkLinkCredibility]);
 
   return (
-    <span className="flex items-center gap-1.5">
+    <span className="inline-flex items-center gap-1.5">
       <a href={href} target="_blank" rel="noopener noreferrer">
         {children}
       </a>

web/src/components/deer-flow/message-input.tsx

@@ -0,0 +1,184 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+"use client";
+
+import Mention from "@tiptap/extension-mention";
+import { Editor, Extension, type Content } from "@tiptap/react";
+import {
+  EditorContent,
+  type EditorInstance,
+  EditorRoot,
+  type JSONContent,
+  StarterKit,
+  Placeholder,
+} from "novel";
+import { Markdown } from "tiptap-markdown";
+import { useDebouncedCallback } from "use-debounce";
+import { cx } from "class-variance-authority";
+
+import "~/styles/prosemirror.css";
+import { resourceSuggestion } from "./resource-suggestion";
+import React, { forwardRef, useMemo, useRef } from "react";
+import type { Resource } from "~/core/messages";
+import { useRAGProvider } from "~/core/api/hooks";
+
+export interface MessageInputRef {
+  focus: () => void;
+  submit: () => void;
+}
+
+export interface MessageInputProps {
+  className?: string;
+  placeholder?: string;
+  onChange?: (markdown: string) => void;
+  onEnter?: (message: string, resources: Array<Resource>) => void;
+}
+
+function formatMessage(content: JSONContent) {
+  if (content.content) {
+    const output: {
+      text: string;
+      resources: Array<Resource>;
+    } = {
+      text: "",
+      resources: [],
+    };
+    for (const node of content.content) {
+      const { text, resources } = formatMessage(node);
+      output.text += text;
+      output.resources.push(...resources);
+    }
+    return output;
+  } else {
+    return formatItem(content);
+  }
+}
+
+function formatItem(item: JSONContent): {
+  text: string;
+  resources: Array<Resource>;
+} {
+  if (item.type === "text") {
+    return { text: item.text ?? "", resources: [] };
+  }
+  if (item.type === "mention") {
+    return {
+      text: `[${item.attrs?.label}](${item.attrs?.id})`,
+      resources: [
+        { uri: item.attrs?.id ?? "", title: item.attrs?.label ?? "" },
+      ],
+    };
+  }
+  return { text: "", resources: [] };
+}
+
+const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
+  ({ className, onChange, onEnter }: MessageInputProps, ref) => {
+    const editorRef = useRef<Editor>(null);
+    const debouncedUpdates = useDebouncedCallback(
+      async (editor: EditorInstance) => {
+        if (onChange) {
+          const markdown = editor.storage.markdown.getMarkdown();
+          onChange(markdown);
+        }
+      },
+      200,
+    );
+
+    React.useImperativeHandle(ref, () => ({
+      focus: () => {
+        editorRef.current?.view.focus();
+      },
+      submit: () => {
+        if (onEnter) {
+          const { text, resources } = formatMessage(
+            editorRef.current?.getJSON() ?? [],
+          );
+          onEnter(text, resources);
+        }
+      },
+    }));
+
+    const { provider, loading } = useRAGProvider();
+
+    const extensions = useMemo(() => {
+      const extensions = [
+        StarterKit,
+        Markdown.configure({
+          html: true,
+          tightLists: true,
+          tightListClass: "tight",
+          bulletListMarker: "-",
+          linkify: false,
+          breaks: false,
+          transformPastedText: false,
+          transformCopiedText: false,
+        }),
+        Placeholder.configure({
+          placeholder: provider
+            ? "What can I do for you? \nYou may refer to RAG resources by using @."
+            : "What can I do for you?",
+          emptyEditorClass: "placeholder",
+        }),
+        Extension.create({
+          name: "keyboardHandler",
+          addKeyboardShortcuts() {
+            return {
+              Enter: () => {
+                if (onEnter) {
+                  const { text, resources } = formatMessage(
+                    this.editor.getJSON() ?? [],
+                  );
+                  onEnter(text, resources);
+                }
+                return this.editor.commands.clearContent();
+              },
+            };
+          },
+        }),
+      ];
+      if (provider) {
+        extensions.push(
+          Mention.configure({
+            HTMLAttributes: {
+              class: "mention",
+            },
+            suggestion: resourceSuggestion,
+          }) as Extension,
+        );
+      }
+      return extensions;
+    }, [onEnter, provider]);
+
+    if (loading) {
+      return null;
+    }
+
+    return (
+      <div className={className}>
+        <EditorRoot>
+          <EditorContent
+            immediatelyRender={false}
+            extensions={extensions}
+            className="border-muted h-full w-full overflow-auto"
+            editorProps={{
+              attributes: {
+                class:
+                  "prose prose-base dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
+              },
+            }}
+            onCreate={({ editor }) => {
+              editorRef.current = editor;
+            }}
+            onUpdate={({ editor }) => {
+              debouncedUpdates(editor);
+            }}
+          ></EditorContent>
+        </EditorRoot>
+      </div>
+    );
+  },
+);
+
+export default MessageInput;

web/src/components/deer-flow/resource-mentions.tsx

@@ -0,0 +1,84 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import type { Resource } from "~/core/messages";
+import { cn } from "~/lib/utils";
+
+export interface ResourceMentionsProps {
+  items: Array<Resource>;
+  command: (item: { id: string; label: string }) => void;
+}
+
+export const ResourceMentions = forwardRef<
+  { onKeyDown: (args: { event: KeyboardEvent }) => boolean },
+  ResourceMentionsProps
+>((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectItem = (index: number) => {
+    const item = props.items[index];
+
+    if (item) {
+      props.command({ id: item.uri, label: item.title });
+    }
+  };
+
+  const upHandler = () => {
+    setSelectedIndex(
+      (selectedIndex + props.items.length - 1) % props.items.length,
+    );
+  };
+
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
+
+  const enterHandler = () => {
+    selectItem(selectedIndex);
+  };
+
+  useEffect(() => setSelectedIndex(0), [props.items]);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (event.key === "ArrowUp") {
+        upHandler();
+        return true;
+      }
+
+      if (event.key === "ArrowDown") {
+        downHandler();
+        return true;
+      }
+
+      if (event.key === "Enter") {
+        enterHandler();
+        return true;
+      }
+
+      return false;
+    },
+  }));
+
+  return (
+    <div className="bg-card border-var(--border) relative flex flex-col gap-1 overflow-auto rounded-md border p-2 shadow">
+      {props.items.length ? (
+        props.items.map((item, index) => (
+          <button
+            className={cn(
+              "focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground inline-flex h-9 w-full items-center justify-start gap-2 rounded-md px-4 py-2 text-sm whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+              selectedIndex === index &&
+                "bg-secondary text-secondary-foreground",
+            )}
+            key={index}
+            onClick={() => selectItem(index)}
+          >
+            {item.title}
+          </button>
+        ))
+      ) : (
+        <div className="items-center justify-center text-gray-500">
+          No result
+        </div>
+      )}
+    </div>
+  );
+});

web/src/components/deer-flow/resource-suggestion.tsx

@@ -0,0 +1,83 @@
+import type { MentionOptions } from "@tiptap/extension-mention";
+import { ReactRenderer } from "@tiptap/react";
+import {
+  ResourceMentions,
+  type ResourceMentionsProps,
+} from "./resource-mentions";
+import type { Instance, Props } from "tippy.js";
+import tippy from "tippy.js";
+import { resolveServiceURL } from "~/core/api/resolve-service-url";
+import type { Resource } from "~/core/messages";
+
+export const resourceSuggestion: MentionOptions["suggestion"] = {
+  items: ({ query }) => {
+    return fetch(resolveServiceURL(`rag/resources?query=${query}`), {
+      method: "GET",
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        return res.resources as Array<Resource>;
+      })
+      .catch((err) => {
+        return [];
+      });
+  },
+
+  render: () => {
+    let reactRenderer: ReactRenderer<
+      { onKeyDown: (args: { event: KeyboardEvent }) => boolean },
+      ResourceMentionsProps
+    >;
+    let popup: Instance<Props>[] | null = null;
+
+    return {
+      onStart: (props) => {
+        if (!props.clientRect) {
+          return;
+        }
+
+        reactRenderer = new ReactRenderer(ResourceMentions, {
+          props,
+          editor: props.editor,
+        });
+
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect as any,
+          appendTo: () => document.body,
+          content: reactRenderer.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "top-start",
+        });
+      },
+
+      onUpdate(props) {
+        reactRenderer.updateProps(props);
+
+        if (!props.clientRect) {
+          return;
+        }
+
+        popup?.[0]?.setProps({
+          getReferenceClientRect: props.clientRect as any,
+        });
+      },
+
+      onKeyDown(props) {
+        if (props.event.key === "Escape") {
+          popup?.[0]?.hide();
+
+          return true;
+        }
+
+        return reactRenderer.ref?.onKeyDown(props) ?? false;
+      },
+
+      onExit() {
+        popup?.[0]?.destroy();
+        reactRenderer.destroy();
+      },
+    };
+  },
+};

web/src/components/editor/index.tsx

@@ -66,17 +66,6 @@ const ReportEditor = ({ content, onMarkdownChange }: ReportEditorProps) => {
 
   const debouncedUpdates = useDebouncedCallback(
     async (editor: EditorInstance) => {
-      // const json = editor.getJSON();
-      // // setCharsCount(editor.storage.characterCount.words());
-      // window.localStorage.setItem(
-      //   "html-content",
-      //   highlightCodeblocks(editor.getHTML()),
-      // );
-      // window.localStorage.setItem("novel-content", JSON.stringify(json));
-      // window.localStorage.setItem(
-      //   "markdown",
-      //   editor.storage.markdown.getMarkdown(),
-      // );
       if (onMarkdownChange) {
         const markdown = editor.storage.markdown.getMarkdown();
         onMarkdownChange(markdown);
@@ -86,12 +75,6 @@ const ReportEditor = ({ content, onMarkdownChange }: ReportEditorProps) => {
     500,
   );
 
-  // useEffect(() => {
-  //   const content = window.localStorage.getItem("novel-content");
-  //   if (content) setInitialContent(JSON.parse(content));
-  //   else setInitialContent(defaultEditorContent);
-  // }, []);
-
   if (!initialContent) return null;
 
   return (