From bf4820c68fe58d442004f3db1aab9a5d86debc3d Mon Sep 17 00:00:00 2001
From: JeffJiang <for-eleven@hotmail.com>
Date: Thu, 15 May 2025 10:39:53 +0800
Subject: [PATCH] Check the output links are hallucinations from AI (#139)

* feat: check output links if a hallucination from AI
---
 .../app/chat/components/research-block.tsx    | 18 ++++++-
 .../chat/components/research-report-block.tsx |  4 +-
 web/src/components/deer-flow/link.tsx         | 50 +++++++++++++++++++
 web/src/components/deer-flow/markdown.tsx     | 15 ++----
 web/src/core/store/store.ts                   | 11 ++++
 web/src/styles/prosemirror.css                |  4 ++
 6 files changed, 88 insertions(+), 14 deletions(-)
 create mode 100644 web/src/components/deer-flow/link.tsx

diff --git a/web/src/app/chat/components/research-block.tsx b/web/src/app/chat/components/research-block.tsx
index 36f47c2..d02d59d 100644
--- a/web/src/app/chat/components/research-block.tsx
+++ b/web/src/app/chat/components/research-block.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { Check, Copy, Headphones, X } from "lucide-react";
+import { Check, Copy, Headphones, Pencil, Undo2, X } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
 import { ScrollContainer } from "~/components/deer-flow/scroll-container";
@@ -47,6 +47,7 @@ export function ResearchBlock({
     await listenToPodcast(researchId);
   }, [researchId]);
 
+  const [editing, setEditing] = useState(false);
   const [copied, setCopied] = useState(false);
   const handleCopy = useCallback(() => {
     if (!reportId) {
@@ -63,6 +64,10 @@ export function ResearchBlock({
     }, 1000);
   }, [reportId]);
 
+  const handleEdit = useCallback(() => {
+    setEditing((editing) => !editing);
+  }, []);
+
   // When the research id changes, set the active tab to activities
   useEffect(() => {
     if (!hasReport) {
@@ -87,6 +92,16 @@ export function ResearchBlock({
                   <Headphones />
                 </Button>
               </Tooltip>
+              <Tooltip title="Edit">
+                <Button
+                  className="text-gray-400"
+                  size="icon"
+                  variant="ghost"
+                  onClick={handleEdit}
+                >
+                  {editing ? <Undo2 /> : <Pencil />}
+                </Button>
+              </Tooltip>
               <Tooltip title="Copy">
                 <Button
                   className="text-gray-400"
@@ -147,6 +162,7 @@ export function ResearchBlock({
                   className="mt-4"
                   researchId={researchId}
                   messageId={reportId}
+                  editing={editing}
                 />
               )}
             </ScrollContainer>
diff --git a/web/src/app/chat/components/research-report-block.tsx b/web/src/app/chat/components/research-report-block.tsx
index e27b894..cad2941 100644
--- a/web/src/app/chat/components/research-report-block.tsx
+++ b/web/src/app/chat/components/research-report-block.tsx
@@ -13,10 +13,12 @@ import { cn } from "~/lib/utils";
 export function ResearchReportBlock({
   className,
   messageId,
+  editing,
 }: {
   className?: string;
   researchId: string;
   messageId: string;
+  editing: boolean;
 }) {
   const message = useMessage(messageId);
   const { isReplay } = useReplay();
@@ -55,7 +57,7 @@ export function ResearchReportBlock({
       ref={contentRef}
       className={cn("relative flex flex-col pt-4 pb-8", className)}
     >
-      {!isReplay && isCompleted ? (
+      {!isReplay && isCompleted && editing ? (
         <ReportEditor
           content={message?.content}
           onMarkdownChange={handleMarkdownChange}
diff --git a/web/src/components/deer-flow/link.tsx b/web/src/components/deer-flow/link.tsx
new file mode 100644
index 0000000..2d4d7c8
--- /dev/null
+++ b/web/src/components/deer-flow/link.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useMemo } from "react";
+import { useToolCalls } from "~/core/store";
+import { cn } from "~/lib/utils";
+import { Tooltip } from "./tooltip";
+
+export const Link = ({
+  href,
+  children,
+}: {
+  href: string | undefined;
+  children: React.ReactNode;
+}) => {
+  const toolCalls = useToolCalls();
+  const credibleLinks = useMemo(() => {
+    const links = new Set<string>();
+    (toolCalls || []).forEach((call) => {
+      if (call && call.name === "web_search" && call.result) {
+        const result = JSON.parse(call.result) as Array<{ url: string }>;
+        result.forEach((r) => {
+          links.add(r.url);
+        });
+      }
+    });
+    return links;
+  }, [toolCalls]);
+  const isCredible = useMemo(() => {
+    return href ? credibleLinks.has(href) : true;
+  }, [credibleLinks, href]);
+
+  if (isCredible) {
+    return (
+      <Tooltip title="This link might be a hallucination from AI model and may not be reliable.">
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={cn(isCredible && "after:ml-0.5 after:content-['⚠️']")}
+        >
+          {children}
+        </a>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  );
+};
diff --git a/web/src/components/deer-flow/markdown.tsx b/web/src/components/deer-flow/markdown.tsx
index ed53dc1..947dfae 100644
--- a/web/src/components/deer-flow/markdown.tsx
+++ b/web/src/components/deer-flow/markdown.tsx
@@ -18,13 +18,10 @@ import { cn } from "~/lib/utils";
 
 import Image from "./image";
 import { Tooltip } from "./tooltip";
+import { Link } from "./link";
 
 const components: ReactMarkdownOptions["components"] = {
-  a: ({ href, children }) => (
-    <a href={href} target="_blank" rel="noopener noreferrer">
-      {children}
-    </a>
-  ),
+  a: ({ href, children }) => <Link href={href}>{children}</Link>,
   img: ({ src, alt }) => (
     <a href={src as string} target="_blank" rel="noopener noreferrer">
       <Image className="rounded" src={src as string} alt={alt ?? ""} />
@@ -52,13 +49,7 @@ export function Markdown({
     return [rehypeKatex];
   }, [animated]);
   return (
-    <div
-      className={cn(
-        className,
-        "prose dark:prose-invert prose-p:my-0 prose-img:mt-0 flex flex-col gap-4",
-      )}
-      style={style}
-    >
+    <div className={cn(className, "prose dark:prose-invert")} style={style}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm, remarkMath]}
         rehypePlugins={rehypePlugins}
diff --git a/web/src/core/store/store.ts b/web/src/core/store/store.ts
index 291e71f..ff4e7b1 100644
--- a/web/src/core/store/store.ts
+++ b/web/src/core/store/store.ts
@@ -377,3 +377,14 @@ export function useLastFeedbackMessageId() {
   );
   return waitingForFeedbackMessageId;
 }
+
+export function useToolCalls() {
+  return useStore(
+    useShallow((state) => {
+      return state.messageIds
+        ?.map((id) => getMessage(id)?.toolCalls)
+        .filter((toolCalls) => toolCalls != null)
+        .flat();
+    }),
+  );
+}
diff --git a/web/src/styles/prosemirror.css b/web/src/styles/prosemirror.css
index 9ef6739..c747417 100644
--- a/web/src/styles/prosemirror.css
+++ b/web/src/styles/prosemirror.css
@@ -4,6 +4,10 @@
   color: inherit;
 }
 
+.ProseMirror {
+  line-height: 1.75;
+}
+
 .ProseMirror .is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;