fix: import soploading error

src/frontend/client/src/components/Sop/SOPEditor.tsx

@@ -4,8 +4,6 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { saveSop, startLinsight } from '~/api/linsight';
 import { useLinsightManager, useLinsightSessionManager } from '~/hooks/useLinsightManager';
 import { Button, Textarea } from '../ui';
-import CopyButton from './components/CopyButton';
-import { LoadingDots } from './components/sopLoading';
 import SopMarkdown from './SopMarkdown';
 
 export const enum SopStatus {
@@ -166,7 +164,9 @@ export const SOPEditor = ({ versionId, sopError, onRun }) => {
                 {/* <CopyButton text={linsight.sop} /> */}
             </div>
 
-            {linsight.status === SopStatus.SopGenerating && !linsight.sop?.trim() && <LoadingDots size="md" />}
+            {linsight.status === SopStatus.SopGenerating && !linsight.sop?.trim() && <p className='p-6 text-sm flex gap-2'>
+                <img className='size-5' src={__APP_ENV__.BASE_URL + '/assets/load.webp'} alt="" />
+            </p>}
             <p className={linsight.sopError ? 'bg-red-100 p-2 rounded-md text-sm text-red-500 m-2' : 'hidden'}>SOP生成失败：{linsight.sopError}</p>
             <div className={`p-8 linsight-markdown flex-1 min-h-0 ${linsight.sopError && 'hidden'}`}>
                 <SopMarkdown ref={markdownRef} linsight={linsight} edit={showSopEdit} onChange={handleChange} />

src/frontend/client/src/components/Sop/TaskFlowContent.tsx

@@ -24,7 +24,7 @@ const ToolButtonLink = ({ params, setCurrentDirectFile }) => {
     const name = params.file_path.split('/').pop();
     return <Button
         variant="link"
-        className='text-xs p-0 h-4 underline underline-offset-2'
+        className='text-xs p-0 h-4 text-blue-400 underline underline-offset-2'
         onClick={() => setCurrentDirectFile({
             content: params.content,
             name,
@@ -58,10 +58,6 @@ const Tool = ({ data, setCurrentDirectFile }) => {
         read_text_file: "正在阅读文件",
         add_text_to_file: "正在向文件添加内容",
         replace_file_lines: "正在编辑文件",
-        web_content_to_markdown_llm: <a href={params.url} target='_blank'><Button
-            variant="link"
-            className='text-xs p-0 h-4 underline underline-offset-2'
-        >正在使用 {toolName} 工具</Button></a>,
         default: `正在使用 ${toolName} 工具`
     };
 
@@ -75,6 +71,10 @@ const Tool = ({ data, setCurrentDirectFile }) => {
         read_text_file: () => <ToolButtonLink params={params} setCurrentDirectFile={setCurrentDirectFile} />,
         add_text_to_file: () => <ToolButtonLink params={params} setCurrentDirectFile={setCurrentDirectFile} />,
         replace_file_lines: () => <ToolButtonLink params={params} setCurrentDirectFile={setCurrentDirectFile} />,
+        web_content_to_markdown_llm: () => <a href={params.url} target='_blank'><Button
+            variant="link"
+            className='text-xs p-0 h-4 text-blue-400 underline underline-offset-2'
+        >{params.url}</Button></a>,
         default: () => '',
     };
 
@@ -105,7 +105,7 @@ const Tool = ({ data, setCurrentDirectFile }) => {
     const Icon = iconMap[toolName] || iconMap.default;
 
     return (
-        <div className='inline-flex items-center gap-2 bg-[#F9FAFD] border rounded-full my-1.5 px-3 py-1.5 text-muted-foreground'>
+        <div className='inline-flex items-center gap-2 bg-[#F9FAFD] border rounded-full my-1.5 mb-4 px-3 py-1.5 text-muted-foreground'>
             <Icon size={16} />
             <div className='flex gap-4 items-center'>
                 <span className='text-xs text-gray-600 truncate'>{displayName}</span>

src/frontend/client/src/components/Sop/index.tsx

@@ -6,7 +6,7 @@ import { useGetLinsightToolList, useGetOrgToolList, useGetPersonalToolList } fro
 import { useGenerateSop, useLinsightManager } from '~/hooks/useLinsightManager';
 import { formatTime } from '~/utils';
 import { SopCase } from './case';
-import { LoadingBox } from './components/sopLoading';
+import { LoadingBox } from './components/SopLoading';
 import { Header } from './Header';
 import { SOPEditor, SopStatus } from './SOPEditor';
 import { TaskFlow } from './TaskFlow';