feat: change to lucide Icons

web/src/app/_components/input-box.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { ArrowUpOutlined, CloseOutlined } from "@ant-design/icons";
 import { AnimatePresence, motion } from "framer-motion";
+import { ArrowUp, X } from "lucide-react";
 import {
   type KeyboardEvent,
   useCallback,
@@ -105,8 +105,9 @@ export function InputBox({
               <div className="text-brand flex h-full w-full items-center justify-center text-sm opacity-90">
                 {feedback.option.text}
               </div>
-              <CloseOutlined
+              <X
-                className="cursor-pointer text-[9px] opacity-60"
+                className="cursor-pointer opacity-60"
+                size={16}
                 onClick={onRemoveFeedback}
               />
             </motion.div>
@@ -148,7 +149,7 @@ export function InputBox({
                   <div className="bg-foreground h-4 w-4 rounded-sm opacity-70" />
                 </div>
               ) : (
-                <ArrowUpOutlined />
+                <ArrowUp />
               )}
             </Button>
           </Tooltip>

web/src/app/_components/markdown.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { CheckOutlined, CopyOutlined } from "@ant-design/icons";
+import { Check, Copy } from "lucide-react";
 import { useMemo, useState } from "react";
 import ReactMarkdown, {
   type Options as ReactMarkdownOptions,
@@ -91,9 +91,9 @@ function CopyButton({ content }: { content: string }) {
         }}
       >
         {copied ? (
-          <CheckOutlined className="h-4 w-4" />
+          <Check className="h-4 w-4" />
         ) : (
-          <CopyOutlined className="h-4 w-4" />
+          <Copy className="h-4 w-4" />
         )}{" "}
       </Button>
     </Tooltip>

web/src/app/_components/message-list-view.tsx

@@ -1,13 +1,10 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import {
+import { LoadingOutlined } from "@ant-design/icons";
-  DownloadOutlined,
-  SoundOutlined,
-  LoadingOutlined,
-} from "@ant-design/icons";
 import { parse } from "best-effort-json-parser";
 import { motion } from "framer-motion";
+import { Download, Podcast } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 
 import { Button } from "~/components/ui/button";
@@ -383,7 +380,7 @@ function PodcastCard({
       <CardHeader>
         <div className="text-muted-foreground flex items-center justify-between text-sm">
           <div className="flex items-center gap-2">
-            {isGenerating ? <LoadingOutlined /> : <SoundOutlined />}
+            {isGenerating ? <LoadingOutlined /> : <Podcast />}
             <RainbowText animated={isGenerating}>
               {isGenerating
                 ? "Generating podcast..."
@@ -400,7 +397,7 @@ function PodcastCard({
                     href={audioUrl}
                     download={`${(title ?? "podcast").replaceAll(" ", "-")}.mp3`}
                   >
-                    <DownloadOutlined />
+                    <Download />
                   </a>
                 </Button>
               </Tooltip>

web/src/app/_components/research-activities-block.tsx

@@ -1,14 +1,11 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import {
+import { PythonOutlined } from "@ant-design/icons";
-  BookOutlined,
-  PythonOutlined,
-  SearchOutlined,
-} from "@ant-design/icons";
 import { parse } from "best-effort-json-parser";
 import { motion } from "framer-motion";
 import { LRUCache } from "lru-cache";
+import { BookOpenText, Search } from "lucide-react";
 import { useMemo } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
@@ -139,20 +136,20 @@ function WebSearchToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
     [searchResults],
   );
   return (
-    <section className="mt-4">
+    <section className="mt-4 pl-4">
       <div className="font-medium italic">
         <RainbowText
           className="flex items-center"
           animated={searchResults === undefined}
         >
-          <SearchOutlined className={"mr-2"} />
+          <Search className={"mr-2"} />
           <span>Searching for&nbsp;</span>
           <span className="max-w-[500px] overflow-hidden text-ellipsis whitespace-nowrap">
             {(toolCall.args as { query: string }).query}
           </span>
         </RainbowText>
       </div>
-      <div className="px-5">
+      <div className="pr-4">
         {pageResults && (
           <ul className="mt-2 flex flex-wrap gap-4">
             {searching &&
@@ -231,17 +228,16 @@ function CrawlToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
   );
   const title = useMemo(() => __pageCache.get(url), [url]);
   return (
-    <section className="mt-4">
+    <section className="mt-4 pl-4">
       <div className="font-medium italic">
         <RainbowText
           className="flex items-center"
           animated={toolCall.result === undefined}
         >
-          <BookOutlined className={"mr-2"} />
+          <BookOpenText className={"mr-2"} />
           <span>Reading</span>
         </RainbowText>
       </div>
-      <div className="px-5">
       <ul className="mt-2 flex flex-wrap gap-4">
         <motion.li
           className="text-muted-foreground bg-accent flex h-40 w-40 gap-2 rounded-md px-2 py-1 text-sm"
@@ -258,7 +254,6 @@ function CrawlToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
           </a>
         </motion.li>
       </ul>
-      </div>
     </section>
   );
 }
@@ -268,7 +263,7 @@ function PythonToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
     return (toolCall.args as { code: string }).code;
   }, [toolCall.args]);
   return (
-    <section>
+    <section className="mt-4 pl-4">
       <div className="font-medium italic">
         <PythonOutlined className={"mr-2"} />
         <RainbowText animated={toolCall.result === undefined}>

web/src/app/_components/research-block.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { CloseOutlined } from "@ant-design/icons";
+import { X } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { Button } from "~/components/ui/button";
@@ -48,7 +48,7 @@ export function ResearchBlock({
                 openResearch(null);
               }}
             >
-              <CloseOutlined />
+              <X />
             </Button>
           </Tooltip>
         </div>

web/src/app/_components/research-report-block.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { SoundOutlined } from "@ant-design/icons";
+import { Podcast } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 
 import { Button } from "~/components/ui/button";
@@ -51,7 +51,7 @@ export function ResearchReportBlock({
                 void handleListenToReport();
               }}
             >
-              <SoundOutlined />
+              <Podcast />
             </Button>
           </Tooltip>
         )}