Ls dev

README.md

@@ -13,7 +13,7 @@ Built with [Next.js](https://nextjs.org) and [Electron](https://electronjs.org).
 - **UI**: Ant Design + Tailwind CSS
 - **State Management**: Zustand
 - **Storage**: IndexedDB (via electron-store)
-- **AI Agent**: @jarvis-agent (based on [Eko](https://github.com/FellouAI/eko))
+- **AI Agent**: @jarvis-agent (based on [Eko](https://github.com/FellouAI/eko) - production-ready agent framework)
 - **Build Tools**: Vite + TypeScript
 
 ## Development Environment Configuration
@@ -79,6 +79,10 @@ The built application will include your API configuration, so end users don't ne
 
 ## Screenshots
 
+### Start
+
+![Start](./docs/shotscreen/start-loading.png)
+
 ### Home
 Input tasks and let AI execute automatically.
 

README.zh-CN.md

@@ -13,7 +13,7 @@
 - **UI**: Ant Design + Tailwind CSS
 - **状态管理**: Zustand
 - **存储**: IndexedDB (via electron-store)
-- **AI Agent**: @jarvis-agent (基于 [Eko](https://github.com/FellouAI/eko))
+- **AI Agent**: @jarvis-agent (基于 [Eko](https://github.com/FellouAI/eko) - 生产就绪的 Agent 框架)
 - **构建工具**: Vite + TypeScript
 
 ## 开发环境配置
@@ -79,6 +79,10 @@ pnpm run build
 
 ## 截图
 
+### 启动动画
+
+![启动动画](./docs/shotscreen/start-loading.png)
+
 ### 首页
 输入任务，让 AI 自动执行。
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-browser",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "DeepFundAI Browser - AI-Powered Intelligent Browser",
   "author": "Shuai Liu <lsustc@mail.ustc.edu.cn>",
   "private": true,
@@ -34,6 +34,7 @@
     "@jest/globals": "^30.1.2",
     "@react-spring/web": "^10.0.1",
     "antd": "^5.26.5",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dotenv": "^16.4.7",
     "electron-log": "^5.2.3",
@@ -49,6 +50,7 @@
     "react-dom": "19.1.0",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
+    "tailwind-merge": "^3.3.1",
     "vosk-browser": "0.0.7",
     "xmldom": "^0.6.0",
     "zhipu-ai-provider": "^0.1.1",

src/components/Header.tsx

@@ -47,7 +47,7 @@ export default function Header() {
         >
           <span className='text-3xl font-bold  tracking-normal hover:scale-105 transition-all duration-300 drop-shadow-2xl relative font-["Berkshire_Swash",_cursive]'>
             DeepFundAI
-            <span className='absolute inset-0 bg-gradient-to-r from-blue-500/20 via-purple-600/20 to-cyan-500/20 blur-sm -z-10'></span>
+            <span className='absolute inset-0 bg-gradient-to-r from-blue-500/20 via-blue-400/20 to-cyan-500/20 blur-sm -z-10'></span>
           </span>
         </div>
       )}

src/components/HistoryPanel.tsx

@@ -310,7 +310,10 @@ export const HistoryPanel: React.FC<HistoryPanelProps> = ({
         },
         body: {
           padding: '16px',
-          height: '100%'
+          height: '100%',
+          // Fellou.ai inspired elegant gradient background
+          background: 'linear-gradient(180deg, #1e1c23 0%, #281c39 100%)',
+          backdropFilter: 'blur(16px)',
         }
       }}
       extra={
@@ -355,8 +358,8 @@ export const HistoryPanel: React.FC<HistoryPanelProps> = ({
                 currentTaskId === item.id ? 'opacity-80' : 'hover:opacity-70'
               }`}
               style={{
-                backgroundColor: currentTaskId === item.id ? 'rgba(126, 141, 255, 0.1)' : undefined,
-                borderLeft: currentTaskId === item.id ? '3px solid #7E8DFF' : undefined
+                backgroundColor: currentTaskId === item.id ? 'rgba(59, 130, 246, 0.1)' : undefined,
+                borderLeft: currentTaskId === item.id ? '3px solid #3B82F6' : undefined
               }}
               onClick={() => handleSelectItem(item)}
               actions={[

src/components/ModelConfigBar.tsx

@@ -174,9 +174,16 @@ export const ModelConfigBar: React.FC = () => {
         <Select
           value={selectedProvider}
           onChange={handleProviderChange}
-          className="flex-1"
+          className="flex-1 custom-select"
           size="middle"
           style={{ minWidth: '160px' }}
+          dropdownStyle={{
+            background: 'rgba(8, 12, 16, 0.96)',
+            backdropFilter: 'blur(20px)',
+            border: '1px solid rgba(145, 75, 241, 0.3)',
+            borderRadius: '12px',
+            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(145, 75, 241, 0.2)',
+          }}
         >
           {PROVIDERS.map(p => (
             <Option key={p.value} value={p.value}>{p.label}</Option>
@@ -186,9 +193,16 @@ export const ModelConfigBar: React.FC = () => {
         <Select
           value={selectedModel}
           onChange={handleModelChange}
-          className="flex-1"
+          className="flex-1 custom-select"
           size="middle"
           style={{ minWidth: '200px' }}
+          dropdownStyle={{
+            background: 'rgba(8, 12, 16, 0.96)',
+            backdropFilter: 'blur(20px)',
+            border: '1px solid rgba(145, 75, 241, 0.3)',
+            borderRadius: '12px',
+            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(145, 75, 241, 0.2)',
+          }}
         >
           {MODELS[selectedProvider]?.map(model => (
             <Option key={model} value={model}>{model}</Option>
@@ -250,7 +264,7 @@ export const ModelConfigBar: React.FC = () => {
                 href={currentProvider?.getKeyUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1 text-purple-400 hover:text-purple-300 whitespace-nowrap"
+                className="flex items-center gap-1 text-blue-400 hover:text-blue-300 whitespace-nowrap"
               >
                 <LinkOutlined />
                 Get API Key

src/components/chat/MessageComponents.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Typography, Button } from "antd";
 import ReactMarkdown from "react-markdown";
-import { Executing, Browser, Search, DataAnalysis, ExpandCollapse, DeepThinking, FinishStatus, RuningStatus } from '../../icons/deepfundai-icons';
+import { Executing, Browser, Search, DataAnalysis, ExpandCollapse, DeepThinking, FinishStatus, RuningStatus, Atlas } from '../../icons/deepfundai-icons';
 import { DisplayMessage, AgentGroupMessage, ToolAction, AgentMessage } from '../../models';
 
 const { Text } = Typography;
@@ -21,7 +21,8 @@ const WorkflowDisplay = ({ workflow }: { workflow: any }) => {
   return (
     <div className="workflow-display space-y-4">
       <div className='flex items-center gap-2'>
-        <div className='bg-jarvis w-6 h-6 bg-origin-padding bg-no-repeat bg-center bg-size-[50px_50px]'></div> Jarvis
+        <Atlas />
+        <span className="text-lg font-bold">Atlas</span>
       </div>
 
       {/* Thinking process - dark theme style */}
@@ -97,7 +98,7 @@ const ThinkingDisplay = ({ content, isCompleted = false }: { content: string; is
 const StepAgentDisplay = ({ agent, stepNumber }: { agent: any; stepNumber: number }) => {
   return (
     <div className="step-agent-display text-base">
-      {/* Agent information - purple background, status display removed */}
+      {/* Agent information - status display removed */}
       <div className="px-2 border-l-2 border-text-05-dark mb-3">
         <div className="flex items-center gap-1 text-text-05-dark font-semibold ">
           <DeepThinking />

src/components/fellou/AmbientLightBg.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { cn } from "./utils";
+
+interface AnimatedBackgroundProps {
+  className?: string;
+  scale?: number;
+  blur?: number;
+  noise?: number;
+  opacity?: number;
+  speed?: number;
+}
+
+export function AnimatedBackground({
+  className,
+  scale = 0.9,
+  blur = 0.06,
+  noise = 0.08,
+  opacity = 0.0,
+  speed = 0.25,
+}: AnimatedBackgroundProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const colorBgRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    let isDestroyed = false;
+
+    // 动态创建并加载脚本
+    const script = document.createElement("script");
+    script.type = "module";
+
+    // 内联脚本来导入和初始化 AmbientLightBg
+    script.textContent = `
+      import { AmbientLightBg } from '/jsm/AmbientLightBg.module.js';
+
+      // 将 AmbientLightBg 暴露到全局，以便我们可以使用它
+      window.AmbientLightBg = AmbientLightBg;
+
+      // 触发自定义事件通知加载完成
+      window.dispatchEvent(new Event('ambientBgLoaded'));
+    `;
+
+    // 监听加载完成事件
+    const handleLoaded = () => {
+      if (isDestroyed || !containerRef.current || !window.AmbientLightBg) return;
+
+      // 创建 AmbientLightBg 实例
+      colorBgRef.current = new window.AmbientLightBg({
+        dom: containerRef.current.id,
+        colors: ["#004880", "#CDCFCF", "#3390C0", "#2B71A1", "#005A92", "#004880"],
+        //["#007FFE","#3099FE","#60B2FE","#90CCFE","#a8d3f0","#b7e1df"],
+        loop: true,
+        speed: speed,
+      });
+
+      // 应用自定义参数
+      if (colorBgRef.current && colorBgRef.current.update) {
+        // Scale 参数对应 pattern scale
+        colorBgRef.current.update("pattern scale", scale);
+
+        // Blur 参数对应 edge blur
+        colorBgRef.current.update("edge blur", blur);
+
+        // Noise 参数
+        colorBgRef.current.update("noise", noise);
+      }
+    };
+
+    window.addEventListener("ambientBgLoaded", handleLoaded);
+    document.body.appendChild(script);
+
+    // 清理函数
+    return () => {
+      isDestroyed = true;
+      window.removeEventListener("ambientBgLoaded", handleLoaded);
+
+      if (colorBgRef.current && colorBgRef.current.destroy) {
+        colorBgRef.current.destroy();
+      }
+
+      // 移除脚本
+      if (script.parentNode) {
+        script.parentNode.removeChild(script);
+      }
+
+      // 清理全局变量
+      if (window.AmbientLightBg) {
+        delete window.AmbientLightBg;
+      }
+    };
+  }, [scale, blur, noise, speed]);
+
+  return (
+    <div className={cn("absolute inset-0", className)}>
+      <div ref={containerRef} id="ambient-bg-container" className="absolute inset-0" />
+      <div className="absolute inset-0 bg-black pointer-events-none" style={{ opacity }} />
+    </div>
+  );
+}
+
+// 添加全局类型声明
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    AmbientLightBg?: any;
+  }
+}