From 40758dd093f8ed64c5a09a9dc1cd097220193699 Mon Sep 17 00:00:00 2001
From: BiggerRain <15911122312@163.COM>
Date: Wed, 20 Nov 2024 10:08:08 +0800
Subject: [PATCH] feat: add query search functionality and UI enhancements
 (#10)

* feat: add query serach & UI adjustments

* chore: Cleaning up the code

* fix: fix search bug

* chore: add /ui to the routing link
---
 src-tauri/capabilities/default.json          |  30 +-
 src-tauri/tauri.conf.json                    |  51 ++-
 src/components/ChatAI/AutoResizeTextarea.tsx |  43 ++
 src/components/ChatAI/Chat.tsx               | 394 +++++++++++++++++++
 src/components/ChatAI/ChatInput.tsx          | 100 ++---
 src/components/ChatAI/ChatMessage.tsx        |   2 -
 src/components/ChatAI/Markdown.tsx           |   1 -
 src/components/ChatAI/index.tsx              |  54 +--
 src/components/MySearch/ChatInterface.tsx    |   5 +-
 src/components/MySearch/CommandPalette.tsx   |   2 +-
 src/components/MySearch/SearchResults.tsx    |   3 -
 src/components/MySearch/index.tsx            |   2 +-
 src/components/SearchChat/ChatSwitch.tsx     |  18 +-
 src/components/SearchChat/DropdownList.tsx   | 121 ++++++
 src/components/SearchChat/Footer.tsx         | 198 +++++-----
 src/components/SearchChat/Search.tsx         | 179 +++++++--
 src/components/SearchChat/SearchResults.tsx  |   2 +-
 src/components/SearchChat/Switch.tsx         |  37 ++
 src/components/SearchChat/index.tsx          |  31 +-
 src/components/SearchChat/types.ts           |  12 +
 src/components/ThemeProvider.tsx             |   6 +-
 src/hooks/useWebSocket.ts                    |  15 +-
 src/hooks/useWindows.ts                      | 115 ++++++
 src/main.tsx                                 |   2 +-
 src/routes/Header.tsx                        |   9 +-
 src/routes/Layout.tsx                        |   6 +-
 src/routes/index.tsx                         |  10 +-
 src/stores/themeStore.ts                     |   6 +-
 vite.config.ts                               |   1 +
 29 files changed, 1169 insertions(+), 286 deletions(-)
 create mode 100644 src/components/ChatAI/AutoResizeTextarea.tsx
 create mode 100644 src/components/ChatAI/Chat.tsx
 create mode 100644 src/components/SearchChat/DropdownList.tsx
 create mode 100644 src/components/SearchChat/Switch.tsx
 create mode 100644 src/components/SearchChat/types.ts
 create mode 100644 src/hooks/useWindows.ts

diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index daa7ace7..023e5ad4 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -2,26 +2,39 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": ["main"],
+  "windows": ["main", "chat"],
   "permissions": [
+    "core:default",
+    "core:event:allow-emit",
     "core:event:allow-listen",
-    "core:window:default",
-    "core:window:allow-start-dragging",
     "core:webview:allow-create-webview",
-    "core:window:allow-show",
     "core:webview:allow-create-webview-window",
+    "core:webview:allow-get-all-webviews",
     "core:webview:allow-webview-close",
+    "core:webview:allow-webview-hide",
+    "core:webview:allow-webview-show",
+    "core:webview:allow-webview-size",
+    "core:webview:allow-set-webview-size",
+    "core:webview:allow-set-webview-zoom",
+    "core:window:default",
+    "core:window:allow-center",
     "core:window:allow-close",
     "core:window:allow-hide",
-    "core:webview:allow-set-webview-size",
+    "core:window:allow-show",
+    "core:window:allow-create",
+    "core:window:allow-destroy",
+    "core:window:allow-start-dragging",
     "core:window:allow-set-size",
-    "core:default",
+    "core:window:allow-get-all-windows",
     "shell:allow-open",
     "http:default",
     "http:allow-fetch",
     "http:allow-fetch-cancel",
     "http:allow-fetch-read-body",
     "http:allow-fetch-send",
+    "websocket:default",
+    "websocket:allow-connect",
+    "websocket:allow-send",
     {
       "identifier": "http:default",
       "allow": [
@@ -30,9 +43,6 @@
         }
       ],
       "deny": []
-    },
-    "websocket:default",
-    "websocket:allow-connect",
-    "websocket:allow-send"
+    }
   ]
 }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 5eb020c6..2fe5bc58 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -13,14 +13,46 @@
     "macOSPrivateApi": true,
     "windows": [
       {
-        "title": "Coco AI",
-        "width": 900,
-        "height": 800,
-        "maxHeight": 800,
-        "transparent": true,
-        "resizable": true,
+        "acceptFirstMouse": true,
+        "alwaysOnBottom": false,
+        "alwaysOnTop": false,
+        "center": false,
+        "closable": true,
+        "contentProtected": false,
+        "create": true,
+        "decorations": false,
+        "dragDropEnabled": true,
+        "focus": false,
         "fullscreen": false,
-        "decorations": false
+        "height": 90,
+        "maxHeight": 700,
+        "minHeight": 90,
+        "width": 680,
+        "maxWidth": 680,
+        "minWidth": 680,
+        "hiddenTitle": false,
+        "incognito": false,
+        "label": "main",
+        "maximizable": false,
+        "minimizable": true,
+        "maximized": false,
+        "proxyUrl": "http://localhost:2900",
+        "resizable": false,
+        "shadow": true,
+        "skipTaskbar": false,
+        "theme": "Light",
+        "title": "Coco AI",
+        "transparent": true,
+        "url": "/ui",
+        "visible": true,
+        "visibleOnAllWorkspaces": true,
+        "windowEffects": {
+          "effects": [],
+          "radius": 20
+        },
+        "x": null,
+        "y": null,
+        "zoomHotkeysEnabled": false
       }
     ],
     "security": {
@@ -45,6 +77,7 @@
   },
   "plugins": {
     "window": {},
-    "websocket": {}
+    "websocket": {},
+    "shell": {}
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/ChatAI/AutoResizeTextarea.tsx b/src/components/ChatAI/AutoResizeTextarea.tsx
new file mode 100644
index 00000000..ce5e81f8
--- /dev/null
+++ b/src/components/ChatAI/AutoResizeTextarea.tsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useRef } from "react";
+
+interface AutoResizeTextareaProps {
+  input: string;
+  setInput: (value: string) => void;
+  handleKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+
+const AutoResizeTextarea: React.FC<AutoResizeTextareaProps> = ({
+  input,
+  setInput,
+  handleKeyDown,
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto"; // Reset height to recalculate
+      textarea.style.height = `${textarea.scrollHeight}px`; // Adjust based on content
+    }
+  }, [input]);
+
+  return (
+    <textarea
+      ref={textareaRef}
+      className="text-3 flex-1 outline-none min-w-[200px] text-[#999] dark:text-gray-200 placeholder-text-3 placeholder-[#999] dark:placeholder-gray-500 bg-transparent"
+      placeholder="Ask whatever you want....."
+      value={input}
+      onChange={(e) => setInput(e.target.value)}
+      onKeyDown={handleKeyDown}
+      rows={1}
+      style={{
+        resize: "none", // Prevent manual resize
+        overflow: "auto", // Enable scrollbars when needed
+        maxHeight: "4.5rem", // Limit height to 3 rows (3 * 1.5 line-height)
+        lineHeight: "1.5rem", // Line height to match row height
+      }}
+    />
+  );
+};
+
+export default AutoResizeTextarea;
diff --git a/src/components/ChatAI/Chat.tsx b/src/components/ChatAI/Chat.tsx
new file mode 100644
index 00000000..7e54bcd6
--- /dev/null
+++ b/src/components/ChatAI/Chat.tsx
@@ -0,0 +1,394 @@
+import { useState, useRef, useEffect } from "react";
+import { MessageSquarePlus, PanelLeft } from "lucide-react";
+import { motion } from "framer-motion";
+
+import { ChatMessage } from "./ChatMessage";
+import { ChatInput } from "./ChatInput";
+import { Sidebar } from "./Sidebar";
+import type { Chat, Message } from "./types";
+import { useTheme } from "../ThemeProvider";
+import { tauriFetch } from "../../api/tauriFetchClient";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import useWindows from "../../hooks/useWindows";
+
+interface ChatAIProps {
+  changeMode: (isChatMode: boolean) => void;
+  inputValue: string;
+}
+
+export default function ChatAI({ changeMode, inputValue }: ChatAIProps) {
+  const [chats, setChats] = useState<Chat[]>([]);
+  const [activeChat, setActiveChat] = useState<Chat>();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const { theme } = useTheme();
+  const { createWin } = useWindows();
+
+  const [websocketId, setWebsocketId] = useState("");
+  const [curMessage, setCurMessage] = useState("");
+  const [curChatEnd, setCurChatEnd] = useState(true);
+  const { messages, setMessages } = useWebSocket(
+    "ws://localhost:2900/ws",
+    (msg) => {
+      if (msg.includes("websocket_session_id")) {
+        const array = msg.split(" ");
+        setWebsocketId(array[2]);
+      }
+
+      if (msg.includes("PRIVATE")) {
+        if (msg.includes("assistant finished output")) {
+          setCurChatEnd(true);
+        } else {
+          const cleanedData = msg.replace(/^PRIVATE /, "");
+          try {
+            const chunkData = JSON.parse(cleanedData);
+            setCurMessage((prev) => prev + chunkData.message_chunk);
+            return chunkData.message_chunk;
+          } catch (error) {
+            console.error("JSON Parse error:", error);
+          }
+          return "";
+        }
+      }
+
+      return "";
+    }
+  );
+
+  // websocket
+  useEffect(() => {
+    if (messages.length === 0 || !activeChat?._id) return;
+
+    const simulateAssistantResponse = () => {
+      console.log("messages", messages);
+
+      const assistantMessage: Message = {
+        _id: activeChat._id,
+        _source: {
+          type: "assistant",
+          message: messages,
+        },
+      };
+
+      const updatedChat = {
+        ...activeChat,
+        messages: [...(activeChat.messages || []), assistantMessage],
+      };
+      setMessages("");
+      setCurMessage("");
+      setActiveChat(updatedChat);
+      setTimeout(() => setIsTyping(false), 1000);
+    };
+    if (curChatEnd) {
+      simulateAssistantResponse();
+    }
+  }, [messages, isTyping, curChatEnd]);
+
+  // getChatHistory
+  useEffect(() => {
+    getChatHistory();
+  }, []);
+
+  const getChatHistory = async () => {
+    try {
+      const response = await tauriFetch({
+        url: "/chat/_history",
+        method: "GET",
+      });
+      console.log("_history", response);
+      const hits = response.data?.hits?.hits || [];
+      setChats(hits);
+      createNewChat();
+    } catch (error) {
+      console.error("Failed to fetch user data:", error);
+    }
+  };
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "end",
+    });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [activeChat?.messages, isTyping, curMessage]);
+
+  const createNewChat = async () => {
+    try {
+      const response = await tauriFetch({
+        url: "/chat/_new",
+        method: "POST",
+      });
+      console.log("_new", response);
+      const newChat: Chat = response.data;
+      setChats((prev) => [newChat, ...prev]);
+      setActiveChat(newChat);
+      setIsSidebarOpen(false);
+      //
+      console.log(1111, activeChat, inputValue)
+      if (inputValue) {
+        setTimeout(() => {
+          handleSendMessage(inputValue);
+        }, 500);
+      }
+    } catch (error) {
+      console.error("Failed to fetch user data:", error);
+    }
+  };
+
+  const deleteChat = (chatId: string) => {
+    setChats((prev) => prev.filter((chat) => chat._id !== chatId));
+    if (activeChat?._id === chatId) {
+      const remainingChats = chats.filter((chat) => chat._id !== chatId);
+      if (remainingChats.length > 0) {
+        setActiveChat(remainingChats[0]);
+      } else {
+        createNewChat();
+      }
+    }
+  };
+
+  const handleSendMessage = async (content: string) => {
+    if (!activeChat?._id) return;
+    try {
+      const response = await tauriFetch({
+        url: `/chat/${activeChat?._id}/_send`,
+        method: "POST",
+        headers: {
+          WEBSOCKET_SESSION_ID: websocketId,
+        },
+        body: JSON.stringify({ message: content }),
+      });
+      console.log("_send", response, websocketId);
+      const updatedChat: Chat = {
+        ...activeChat,
+        messages: [...(activeChat?.messages || []), ...(response.data || [])],
+      };
+
+      setActiveChat(updatedChat);
+      setIsTyping(true);
+      setCurChatEnd(false);
+    } catch (error) {
+      console.error("Failed to fetch user data:", error);
+    }
+  };
+
+  const chatHistory = async (chat: Chat) => {
+    try {
+      const response = await tauriFetch({
+        url: `/chat/${chat._id}/_history`,
+        method: "GET",
+      });
+      console.log("id_history", response);
+      const hits = response.data?.hits?.hits || [];
+      const updatedChat: Chat = {
+        ...chat,
+        messages: hits,
+      };
+      setActiveChat(updatedChat);
+    } catch (error) {
+      console.error("Failed to fetch user data:", error);
+    }
+  };
+
+  const chatClose = async () => {
+    if (!activeChat?._id) return;
+    try {
+      const response = await tauriFetch({
+        url: `/chat/${activeChat._id}/_close`,
+        method: "POST",
+      });
+      console.log("_close", response);
+    } catch (error) {
+      console.error("Failed to fetch user data:", error);
+    }
+  };
+
+  const onSelectChat = async (chat: any) => {
+    chatClose();
+    try {
+      const response = await tauriFetch({
+        url: `/chat/${chat._id}/_open`,
+        method: "POST",
+      });
+      console.log("_open", response);
+      chatHistory(response.data);
+      setIsSidebarOpen(false);
+    } catch (error) {
+      console.error("Failed to fetch user data:", error);
+    }
+  };
+
+  const cancelChat = async () => {
+    if (!activeChat?._id) return;
+    try {
+      const response = await tauriFetch({
+        url: `/chat/${activeChat._id}/_cancel`,
+        method: "POST",
+      });
+      console.log("_cancel", response);
+    } catch (error) {
+      console.error("Failed to fetch user data:", error);
+    }
+  };
+
+  async function openChatAI() {
+    createWin({
+      label: "chat",
+      title: "Coco AI",
+      dragDropEnabled: true,
+      center: true,
+      width: 900,
+      height: 800,
+      alwaysOnTop: true,
+      skipTaskbar: true,
+      decorations: true,
+      closable: true,
+      url: "/ui/chat",
+    });
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+      className="h-screen rounded-xl overflow-hidden relative"
+    >
+      <div className="h-[calc(100%-100px)] flex rounded-xl overflow-hidden">
+        {/* Sidebar */}
+        {isSidebarOpen ? (
+          <div
+            className={`fixed inset-y-0 left-0 z-50 w-64 transform ${
+              isSidebarOpen ? "translate-x-0" : "-translate-x-full"
+            } transition-transform duration-300 ease-in-out md:translate-x-0 md:static md:block ${
+              theme === "dark" ? "bg-gray-800" : "bg-gray-100"
+            }`}
+          >
+            {activeChat ? (
+              <Sidebar
+                chats={chats}
+                activeChat={activeChat}
+                isDark={theme === "dark"}
+                onNewChat={createNewChat}
+                onSelectChat={onSelectChat}
+                onDeleteChat={deleteChat}
+              />
+            ) : null}
+          </div>
+        ) : null}
+
+        {/* Main content */}
+        <div
+          className={`flex-1 flex flex-col rounded-xl overflow-hidden ${
+            theme === "dark" ? "bg-gray-900" : "bg-white"
+          }`}
+        >
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{ delay: 0.2 }}
+          >
+            <header
+              className={`flex items-center justify-between p-2 ${
+                theme === "dark" ? "border-gray-800" : "border-gray-200"
+              }`}
+            >
+              <button
+                onClick={() => openChatAI()}
+                className={`p-2 rounded-lg transition-colors ${
+                  theme === "dark"
+                    ? "hover:bg-gray-800 text-gray-300"
+                    : "hover:bg-gray-100 text-[#101010]"
+                }`}
+              >
+                <PanelLeft className="h-4 w-4" />
+              </button>
+
+              {/* <ThemeToggle /> */}
+
+              <button
+                onClick={() => createNewChat()}
+                className={`p-2 rounded-lg transition-colors ${
+                  theme === "dark"
+                    ? "hover:bg-gray-800 text-gray-300"
+                    : "hover:bg-gray-100 text-[#101010]"
+                }`}
+              >
+                <MessageSquarePlus className="h-4 w-4" />
+              </button>
+            </header>
+          </motion.div>
+
+          {/* Chat messages */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ delay: 0.3 }}
+            className="flex-1 overflow-y-auto border-t custom-scrollbar"
+          >
+            {activeChat?.messages?.map((message, index) => (
+              <ChatMessage
+                key={message._id + index}
+                message={message}
+                isTyping={
+                  isTyping &&
+                  index === (activeChat.messages?.length || 0) - 1 &&
+                  message._source?.type === "assistant"
+                }
+              />
+            ))}
+            {!curChatEnd && activeChat?._id ? (
+              <ChatMessage
+                key={"last"}
+                message={{
+                  _id: activeChat?._id,
+                  _source: {
+                    type: "assistant",
+                    message: curMessage,
+                  },
+                }}
+                isTyping={!curChatEnd}
+              />
+            ) : null}
+            {isTyping && (
+              <div className="flex pt-0 pb-4 pl-20 gap-2 items-center text-gray-500 dark:text-gray-400">
+                <div className="w-2 h-2 rounded-full bg-current animate-bounce" />
+                <div className="w-2 h-2 rounded-full bg-current animate-bounce [animation-delay:0.2s]" />
+                <div className="w-2 h-2 rounded-full bg-current animate-bounce [animation-delay:0.4s]" />
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </motion.div>
+        </div>
+      </div>
+
+      {/* Input area */}
+      <motion.div
+        initial={{ y: 100 }}
+        animate={{ y: 0 }}
+        exit={{ y: 100 }}
+        transition={{ type: "spring", stiffness: 300, damping: 30 }}
+        className={`mt-2.5 rounded-xl overflow-hidden ${
+          theme === "dark" ? "border-gray-800" : "border-gray-200"
+        }`}
+      >
+        <ChatInput
+          onSend={handleSendMessage}
+          disabled={isTyping}
+          disabledChange={(value) => {
+            cancelChat();
+            setIsTyping(value);
+          }}
+          changeMode={changeMode}
+        />
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/src/components/ChatAI/ChatInput.tsx b/src/components/ChatAI/ChatInput.tsx
index 48e3357b..daba20d4 100644
--- a/src/components/ChatAI/ChatInput.tsx
+++ b/src/components/ChatAI/ChatInput.tsx
@@ -1,4 +1,4 @@
-import { SendHorizontal, OctagonX, Filter, Upload } from "lucide-react";
+import { Library, Mic, Send, Plus } from "lucide-react";
 import {
   useState,
   type FormEvent,
@@ -7,6 +7,7 @@ import {
   useEffect,
 } from "react";
 import ChatSwitch from "../SearchChat/ChatSwitch";
+import AutoResizeTextarea from "./AutoResizeTextarea";
 
 interface ChatInputProps {
   onSend: (message: string) => void;
@@ -54,55 +55,60 @@ export function ChatInput({
     adjustTextareaHeight();
   }, [input]);
 
+  async function openChatAI() {}
+
   return (
-    <form
-      onSubmit={handleSubmit}
-      className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"
-    >
-      <div className="relative">
-        <textarea
-          ref={textareaRef}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Send a message... (Press Enter to send, Shift + Enter for new line)"
-          rows={1}
-          className="w-full resize-none rounded-lg border-0 bg-gray-50 dark:bg-gray-800/50 py-3 pl-4 pr-12 text-sm leading-6 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-200 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition-shadow"
-          disabled={disabled}
-        />
-        {disabled ? (
-          <button
-            type="submit"
-            className="absolute right-2 bottom-2.5 rounded-md p-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            <OctagonX
-              className="h-5 w-5"
-              onClick={() => disabledChange(false)}
-            />
-          </button>
-        ) : (
-          <button
-            type="submit"
-            disabled={disabled || !input.trim()}
-            className="absolute right-2 bottom-2.5 rounded-md p-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            <SendHorizontal className="h-5 w-5" />
-          </button>
-        )}
-      </div>
-      <div className="flex justify-between items-center p-2 rounded-xl overflow-hidden">
-        <div className="flex gap-3 text-xs">
-          <button className="inline-flex items-center px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-700 dark:text-gray-300">
-            <Filter className="w-4 h-4 mr-2" />问 Coco
-          </button>
-          <button className="inline-flex items-center px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-700 dark:text-gray-300">
-            <Upload className="w-4 h-4 mr-2" />
-            上传
-          </button>
+    <form onSubmit={handleSubmit} className="w-full rounded-xl overflow-hidden">
+      <div className="b-none bg-[#F2F2F2] dark:bg-gray-800 rounded-xl overflow-hidden">
+        {/* Search Bar */}
+        <div className="relative">
+          <div className="p-2.5 flex items-center bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 transition-all">
+            <div className="flex flex-wrap gap-2 flex-1 h-auto items-center">
+              <AutoResizeTextarea
+                input={input}
+                setInput={setInput}
+                handleKeyDown={handleKeyDown}
+              />
+            </div>
+            <button className="p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-full transition-colors">
+              <Mic className="w-3 h-3 text-[#333] dark:text-gray-500" />
+            </button>
+            <button
+              className={`ml-1 p-2 ${
+                input ? "bg-[rgba(66,133,244,1)]" : "bg-[#E4E5F0]"
+              } rounded-full transition-colors`}
+              onClick={(e) => handleSubmit(e as unknown as FormEvent)}
+            >
+              <Send className="w-3 h-3 text-white hover:text-[#333]" />
+            </button>
+          </div>
         </div>
 
-        {/* Switch */}
-        <ChatSwitch isChat={true} changeMode={changeMode} />
+        {/* Controls */}
+        <div className="flex justify-between items-center p-2 rounded-xl overflow-hidden bg-#F2F2F2">
+          <div className="flex gap-1 text-xs text-[#101010] dark:text-gray-300">
+            <button
+              className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors "
+              onClick={openChatAI}
+            >
+              <Library className="w-4 h-4 mr-1" />
+              Coco
+            </button>
+            <button className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-color">
+              <Plus className="w-4 h-4 mr-1" />
+              Upload
+            </button>
+          </div>
+
+          {/* Switch */}
+          <ChatSwitch
+            isChat={true}
+            changeMode={(value) => {
+              changeMode(value);
+              setInput("");
+            }}
+          />
+        </div>
       </div>
     </form>
   );
diff --git a/src/components/ChatAI/ChatMessage.tsx b/src/components/ChatAI/ChatMessage.tsx
index f507c961..22542723 100644
--- a/src/components/ChatAI/ChatMessage.tsx
+++ b/src/components/ChatAI/ChatMessage.tsx
@@ -23,7 +23,6 @@ export function ChatMessage({ message, isTyping }: ChatMessageProps) {
           isAssistant ? "" : "flex-row-reverse"
         }`}
       >
-        {/* 头像部分 */}
         <div
           className={`flex-shrink-0 h-8 w-8 rounded-lg flex items-center justify-center ${
             isAssistant
@@ -38,7 +37,6 @@ export function ChatMessage({ message, isTyping }: ChatMessageProps) {
           )}
         </div>
 
-        {/* 消息内容 */}
         <div
           className={`flex-1 space-y-2 ${
             isAssistant ? "text-left" : "text-right"
diff --git a/src/components/ChatAI/Markdown.tsx b/src/components/ChatAI/Markdown.tsx
index 9c3ca70f..d42f4957 100644
--- a/src/components/ChatAI/Markdown.tsx
+++ b/src/components/ChatAI/Markdown.tsx
@@ -231,7 +231,6 @@ function _MarkDownContent(props: { content: string }) {
     return tryWrapHtmlCode(escapeBrackets(props.content));
   }, [props.content]);
 
-  console.log(11212, props.content);
   return (
     <ReactMarkdown
       remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
diff --git a/src/components/ChatAI/index.tsx b/src/components/ChatAI/index.tsx
index 3c62f293..eb6aca04 100644
--- a/src/components/ChatAI/index.tsx
+++ b/src/components/ChatAI/index.tsx
@@ -1,9 +1,5 @@
 import { useState, useRef, useEffect } from "react";
-import {
-  PanelRightClose,
-  PanelRightOpen,
-  MessageSquarePlus,
-} from "lucide-react";
+import { PanelRightClose, PanelRightOpen, X } from "lucide-react";
 import { motion } from "framer-motion";
 
 // import { ThemeToggle } from "./ThemeToggle";
@@ -12,21 +8,20 @@ import { ChatInput } from "./ChatInput";
 import { Sidebar } from "./Sidebar";
 import type { Chat, Message } from "./types";
 import { useTheme } from "../ThemeProvider";
-// import { Footer } from "../SearchChat/Footer";
 import { tauriFetch } from "../../api/tauriFetchClient";
 import { useWebSocket } from "../../hooks/useWebSocket";
+import useWindows from "../../hooks/useWindows";
 
-interface ChatAIProps {
-  changeMode: (isChatMode: boolean) => void;
-}
+interface ChatAIProps {}
 
-export default function ChatAI({ changeMode }: ChatAIProps) {
+export default function ChatAI({}: ChatAIProps) {
   const [chats, setChats] = useState<Chat[]>([]);
   const [activeChat, setActiveChat] = useState<Chat>();
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const [isTyping, setIsTyping] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const { theme } = useTheme();
+  const { closeWin } = useWindows();
 
   const [websocketId, setWebsocketId] = useState("");
   const [curMessage, setCurMessage] = useState("");
@@ -133,7 +128,6 @@ export default function ChatAI({ changeMode }: ChatAIProps) {
       const newChat: Chat = response.data;
       setChats((prev) => [newChat, ...prev]);
       setActiveChat(newChat);
-      setIsSidebarOpen(false);
     } catch (error) {
       console.error("Failed to fetch user data:", error);
     }
@@ -216,11 +210,27 @@ export default function ChatAI({ changeMode }: ChatAIProps) {
       });
       console.log("_open", response);
       chatHistory(response.data);
-      setIsSidebarOpen(false);
     } catch (error) {
       console.error("Failed to fetch user data:", error);
     }
   };
+  
+  const cancelChat = async () => {
+    if (!activeChat?._id) return;
+    try {
+      const response = await tauriFetch({
+        url: `/chat/${activeChat._id}/_cancel`,
+        method: "POST",
+      });
+      console.log("_cancel", response);
+    } catch (error) {
+      console.error("Failed to fetch user data:", error);
+    }
+  };
+
+  async function closeWindow() {
+    await closeWin("chat");
+  }
 
   return (
     <motion.div
@@ -228,7 +238,7 @@ export default function ChatAI({ changeMode }: ChatAIProps) {
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.2 }}
-      className="h-screen pb-8 rounded-xl overflow-hidden"
+      className="h-screen"
     >
       <div className="h-[100%] flex">
         {/* Sidebar */}
@@ -266,13 +276,13 @@ export default function ChatAI({ changeMode }: ChatAIProps) {
             transition={{ delay: 0.2 }}
           >
             <header
-              className={`flex items-center justify-between p-4 border-b ${
+              className={`flex items-center justify-between p-2 border-b ${
                 theme === "dark" ? "border-gray-800" : "border-gray-200"
               }`}
             >
               <button
                 onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                className={`p-2 rounded-lg transition-colors ${
+                className={`rounded-lg transition-colors ${
                   theme === "dark"
                     ? "hover:bg-gray-800 text-gray-300"
                     : "hover:bg-gray-100 text-gray-600"
@@ -287,10 +297,7 @@ export default function ChatAI({ changeMode }: ChatAIProps) {
 
               {/* <ThemeToggle /> */}
 
-              <MessageSquarePlus
-                className="cursor-pointer"
-                onClick={createNewChat}
-              />
+              <X className="cursor-pointer" onClick={closeWindow} />
             </header>
           </motion.div>
 
@@ -350,15 +357,14 @@ export default function ChatAI({ changeMode }: ChatAIProps) {
               onSend={handleSendMessage}
               disabled={isTyping}
               disabledChange={(value) => {
-                setIsTyping(value)
+                cancelChat()
+                setIsTyping(value);
               }}
-              changeMode={changeMode}
+              changeMode={() => {}}
             />
           </motion.div>
         </div>
       </div>
-
-      {/* <Footer isChat={true} /> */}
     </motion.div>
   );
 }
diff --git a/src/components/MySearch/ChatInterface.tsx b/src/components/MySearch/ChatInterface.tsx
index 462a079e..980d5fde 100644
--- a/src/components/MySearch/ChatInterface.tsx
+++ b/src/components/MySearch/ChatInterface.tsx
@@ -25,14 +25,13 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ query }) => {
         },
       ]);
 
-      // 模拟 AI 响应
       setIsTyping(true);
       setTimeout(() => {
         setMessages((prev) => [
           ...prev,
           {
             id: (Date.now() + 1).toString(),
-            content: "这是一个 AI 助手的示例回复...",
+            content: "hello world...",
             isUser: false,
           },
         ]);
@@ -61,7 +60,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ query }) => {
       ))}
       {isTyping && (
         <div className="flex justify-start">
-          <div className="bg-gray-100 p-3 rounded-lg">正在输入...</div>
+          <div className="bg-gray-100 p-3 rounded-lg">...</div>
         </div>
       )}
     </div>
diff --git a/src/components/MySearch/CommandPalette.tsx b/src/components/MySearch/CommandPalette.tsx
index 84759e0a..57964706 100644
--- a/src/components/MySearch/CommandPalette.tsx
+++ b/src/components/MySearch/CommandPalette.tsx
@@ -74,7 +74,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({
                 type="text"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
-                placeholder={mode === "search" ? "搜索文件..." : "输入消息..."}
+                placeholder={mode === "search" ? "Search for files..." : "Input Message..."}
                 className="flex-1 ml-4 p-2 outline-none"
                 autoFocus
               />
diff --git a/src/components/MySearch/SearchResults.tsx b/src/components/MySearch/SearchResults.tsx
index e0c9e2ff..4df55c96 100644
--- a/src/components/MySearch/SearchResults.tsx
+++ b/src/components/MySearch/SearchResults.tsx
@@ -11,10 +11,7 @@ export const SearchResults: React.FC<SearchResultsProps> = ({ query }) => {
   >([]);
 
   useEffect(() => {
-    // 这里实现实际的文件搜索逻辑
-    // 可以使用 Electron 的 API 来搜索本地文件
     const searchFiles = async () => {
-      // 示例数据
       setResults([
         { name: "Document.pdf", path: "/documents/Document.pdf", type: "file" },
         { name: "Projects", path: "/documents/projects", type: "folder" },
diff --git a/src/components/MySearch/index.tsx b/src/components/MySearch/index.tsx
index 93bf3e6b..8325ca48 100644
--- a/src/components/MySearch/index.tsx
+++ b/src/components/MySearch/index.tsx
@@ -10,7 +10,7 @@ export default function MySearch() {
         onClick={() => setIsCommandPaletteOpen(true)}
         className="fixed bottom-4 right-4 p-4 bg-blue-500 text-white rounded-full"
       >
-        打开命令面板
+        Open the Command Palette
       </button>
 
       <CommandPalette
diff --git a/src/components/SearchChat/ChatSwitch.tsx b/src/components/SearchChat/ChatSwitch.tsx
index c701ad12..4487d089 100644
--- a/src/components/SearchChat/ChatSwitch.tsx
+++ b/src/components/SearchChat/ChatSwitch.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Switch } from "@headlessui/react";
+import Switch from "./Switch";
 
 interface ChatSwitchProps {
   isChat: boolean;
@@ -11,27 +11,13 @@ export default function ChatSwitch({ isChat, changeMode }: ChatSwitchProps) {
 
   return (
     <div className="flex items-center text-xs">
-      <span className="mr-3 text-sm font-medium text-gray-700 dark:text-gray-300">
-        Chat
-      </span>
       <Switch
         checked={isChatMode}
         onChange={(value) => {
           setIsChatMode(value);
           changeMode(value);
         }}
-        className={`${
-          isChatMode
-            ? "bg-blue-600 dark:bg-blue-500"
-            : "bg-gray-200 dark:bg-gray-700"
-        } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900`}
-      >
-        <span
-          className={`${
-            isChatMode ? "translate-x-6" : "translate-x-1"
-          } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
-        />
-      </Switch>
+      ></Switch>
     </div>
   );
 }
diff --git a/src/components/SearchChat/DropdownList.tsx b/src/components/SearchChat/DropdownList.tsx
new file mode 100644
index 00000000..48c0d59f
--- /dev/null
+++ b/src/components/SearchChat/DropdownList.tsx
@@ -0,0 +1,121 @@
+import { useEffect, useRef, useState } from "react";
+import { open } from "@tauri-apps/plugin-shell";
+
+interface DropdownListProps {
+  selected: (item: any) => void;
+  suggests: any[];
+  isSearchComplete: boolean;
+}
+
+function DropdownList({ selected, suggests, isSearchComplete }: DropdownListProps) {
+  const [selectedItem, setSelectedItem] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const handleOpenURL = async (url: string) => {
+    if (!url) return;
+    try {
+      await open(url);
+      console.log("URL opened in default browser");
+    } catch (error) {
+      console.error("Failed to open URL:", error);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!suggests.length) return;
+
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedItem((prev) =>
+        prev === null || prev === 0 ? suggests.length - 1 : prev - 1
+      );
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedItem((prev) =>
+        prev === null || prev === suggests.length - 1 ? 0 : prev + 1
+      );
+    } else if (e.key === "Enter" && selectedItem !== null) {
+      const item = suggests[selectedItem];
+      if (item?._source?.url) {
+        handleOpenURL(item?._source?.url);
+      } else {
+        selected(item);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (suggests.length > 0) {
+      setSelectedItem(0);
+
+      if (containerRef.current && isSearchComplete) {
+        containerRef.current.focus();
+      }
+    }
+  }, [JSON.stringify(suggests), isSearchComplete]);
+
+  useEffect(() => {
+    if (selectedItem !== null && itemRefs.current[selectedItem]) {
+      itemRefs.current[selectedItem]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+  }, [selectedItem]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-[calc(100vh-100px)] mt-2.5 pb-12 flex flex-col bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden focus:outline-none"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="flex-1 overflow-y-auto p-2">
+        {suggests?.map((item, index) => {
+          const isSelected = selectedItem === index;
+          return (
+            <button
+              key={item._id}
+              ref={(el) => (itemRefs.current[index] = el)}
+              onClick={() => {
+                setSelectedItem(index);
+                if (item?._source?.url) {
+                  handleOpenURL(item?._source?.url);
+                } else {
+                  selected(item);
+                }
+              }}
+              className={`w-full p-2 text-xs flex items-center justify-between rounded-lg transition-colors ${
+                isSelected
+                  ? "bg-[#f2f2f2] dark:bg-blue-900/30"
+                  : "hover:bg-[#f2f2f2] dark:hover:bg-gray-700/50"
+              }`}
+            >
+              <div className="flex gap-2 items-center">
+                <img className="w-4 h-4" src={item?._source?.icon} alt="icon" />
+                <span className="text-[#666] dark:text-gray-100">
+                  {item?._source?.source} / {item?._source?.title}
+                </span>
+              </div>
+              <div className="flex gap-2 items-center">
+                <span className="text-xs text-[#999] dark:text-gray-400">
+                  {item?._source?.type}
+                </span>
+                <div
+                  className={`w-3.5 h-3.5 flex items-center justify-center text-[#e4e5ef] border border-[#e4e5ef] rounded-sm ${
+                    isSelected ? "text-blue-500" : ""
+                  }`}
+                >
+                  {index + 1}
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default DropdownList;
diff --git a/src/components/SearchChat/Footer.tsx b/src/components/SearchChat/Footer.tsx
index 7f7160ba..d66a1187 100644
--- a/src/components/SearchChat/Footer.tsx
+++ b/src/components/SearchChat/Footer.tsx
@@ -1,13 +1,22 @@
-import { Settings, LogOut, Command, User, Home, ChevronUp } from "lucide-react";
-import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
-import { Link } from "react-router-dom";
+import {
+  Settings,
+  LogOut,
+  Command,
+  User,
+  Home,
+  ChevronUp,
+  AppWindowMac,
+  ArrowDownUp,
+  CornerDownLeft,
+} from "lucide-react";
+// import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
+// import { Link } from "react-router-dom";
 import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 
 const shortcuts = [
-  { label: "翻页/换行", keys: "↓" },
-  { label: "快速换行", keys: "Tab" },
-  { label: "Talk to AI", keys: "⌘ + /" },
-  { label: "Open", keys: "⌘ + O" },
+  { label: "Page turn/line break", keys: "ArrowDownUp" },
+  { label: "Quick line selection", keys: "Tab" },
+  { label: "Open", keys: "CornerDownLeft" },
 ];
 
 const isChatShortcuts = [
@@ -17,9 +26,10 @@ const isChatShortcuts = [
 
 interface FooterProps {
   isChat: boolean;
+  name?: string;
 }
 
-export const Footer = ({ isChat }: FooterProps) => {
+export const Footer = ({ isChat, name }: FooterProps) => {
   async function openWebviewWindowSettings() {
     const webview = new WebviewWindow("settings", {
       title: "Coco Settings",
@@ -31,7 +41,7 @@ export const Footer = ({ isChat }: FooterProps) => {
       skipTaskbar: true,
       decorations: true,
       closable: true,
-      url: "/settings",
+      url: "/ui/settings",
     });
     webview.once("tauri://created", function () {
       console.log("webview created");
@@ -44,96 +54,106 @@ export const Footer = ({ isChat }: FooterProps) => {
   return (
     <div
       style={{ zIndex: 999 }}
-      className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-4 h-8 flex items-center justify-between rounded-xl rounded-t-none overflow-hidden"
+      className="px-4 h-12 fixed bottom-1 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between rounded-xl rounded-t-none overflow-hidden"
     >
       <div className="flex items-center">
-        <Menu as="div" className="relative">
-          <MenuButton className="h-7 flex items-center space-x-2 px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-            <Command className="w-5 h-5 text-gray-600 dark:text-gray-400" />
-            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-              Coco
-            </span>
-            <ChevronUp className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-          </MenuButton>
-
-          <MenuItems className="absolute bottom-full mb-2 left-0 w-64 rounded-lg bg-white dark:bg-gray-700 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            <div className="p-1">
-              <MenuItem>
-                {({ active }) => (
-                  <button
-                    className={`${
-                      active
-                        ? "bg-gray-100 dark:bg-gray-700"
-                        : "text-gray-900 dark:text-gray-100"
-                    } group flex w-full items-center rounded-md px-3 py-2 text-sm`}
-                  >
-                    <Home className="w-4 h-4 mr-2" />
-                    <Link to={`/`}>Home</Link>
-                  </button>
-                )}
-              </MenuItem>
-              {/* <MenuItem>
-                {({ active }) => (
-                  <button
-                    className={`${
-                      active
-                        ? "bg-gray-100 dark:bg-gray-700"
-                        : "text-gray-900 dark:text-gray-100"
-                    } group flex w-full items-center rounded-md px-3 py-2 text-sm`}
-                  >
-                    <User className="w-4 h-4 mr-2" />
-                    Profile
-                  </button>
-                )}
-              </MenuItem> */}
-              <MenuItem>
-                {({ active }) => (
-                  <button
-                    className={`${
-                      active
-                        ? "bg-gray-100 dark:bg-gray-700"
-                        : "text-gray-900 dark:text-gray-100"
-                    } group flex w-full items-center rounded-md px-3 py-2 text-sm`}
-                    onClick={openWebviewWindowSettings}
-                  >
-                    <Settings className="w-4 h-4 mr-2" />
-                    Settings
-                  </button>
-                )}
-              </MenuItem>
-              {/* <div className="h-px bg-gray-200 dark:bg-gray-700 my-1" />
-              <MenuItem>
-                {({ active }) => (
-                  <button
-                    className={`${
-                      active
-                        ? "bg-gray-100 dark:bg-gray-700"
-                        : "text-gray-900 dark:text-gray-100"
-                    } group flex w-full items-center rounded-md px-3 py-2 text-sm`}
-                  >
-                    <LogOut className="w-4 h-4 mr-2" />
-                    Sign Out
-                  </button>
-                )}
-              </MenuItem> */}
+        {
+          name ? (
+            <div className="flex gap-2 items-center text-[#666] text-3">
+              <AppWindowMac className="w-5 h-5" /> {name}
             </div>
-          </MenuItems>
-        </Menu>
+          ) : null
+          // <Menu as="div" className="relative">
+          //   <MenuButton className="h-7 flex items-center space-x-2 px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+          //     <Command className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+          //     <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          //       Coco
+          //     </span>
+          //     <ChevronUp className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+          //   </MenuButton>
+
+          //   <MenuItems className="absolute bottom-full mb-2 left-0 w-64 rounded-lg bg-white dark:bg-gray-700 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          //     <div className="p-1">
+          //       <MenuItem>
+          //         {({ active }) => (
+          //           <button
+          //             className={`${
+          //               active
+          //                 ? "bg-gray-100 dark:bg-gray-700"
+          //                 : "text-gray-900 dark:text-gray-100"
+          //             } group flex w-full items-center rounded-md px-3 py-2 text-sm`}
+          //           >
+          //             <Home className="w-4 h-4 mr-2" />
+          //             <Link to={`/`}>Home</Link>
+          //           </button>
+          //         )}
+          //       </MenuItem>
+          //       {/* <MenuItem>
+          //       {({ active }) => (
+          //         <button
+          //           className={`${
+          //             active
+          //               ? "bg-gray-100 dark:bg-gray-700"
+          //               : "text-gray-900 dark:text-gray-100"
+          //           } group flex w-full items-center rounded-md px-3 py-2 text-sm`}
+          //         >
+          //           <User className="w-4 h-4 mr-2" />
+          //           Profile
+          //         </button>
+          //       )}
+          //     </MenuItem> */}
+          //       <MenuItem>
+          //         {({ active }) => (
+          //           <button
+          //             className={`${
+          //               active
+          //                 ? "bg-gray-100 dark:bg-gray-700"
+          //                 : "text-gray-900 dark:text-gray-100"
+          //             } group flex w-full items-center rounded-md px-3 py-2 text-sm`}
+          //             onClick={openWebviewWindowSettings}
+          //           >
+          //             <Settings className="w-4 h-4 mr-2" />
+          //             Settings
+          //           </button>
+          //         )}
+          //       </MenuItem>
+          //       {/* <div className="h-px bg-gray-200 dark:bg-gray-700 my-1" />
+          //     <MenuItem>
+          //       {({ active }) => (
+          //         <button
+          //           className={`${
+          //             active
+          //               ? "bg-gray-100 dark:bg-gray-700"
+          //               : "text-gray-900 dark:text-gray-100"
+          //           } group flex w-full items-center rounded-md px-3 py-2 text-sm`}
+          //         >
+          //           <LogOut className="w-4 h-4 mr-2" />
+          //           Sign Out
+          //         </button>
+          //       )}
+          //     </MenuItem> */}
+          //     </div>
+          //   </MenuItems>
+          // </Menu>
+        }
       </div>
 
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-2.5">
         {(isChat ? isChatShortcuts : shortcuts).map((shortcut, index) => (
           <div
             key={index}
-            className="flex items-center text-gray-500 dark:text-gray-400 text-sm"
+            className="flex items-center text-[#999] dark:text-gray-400 text-xs"
           >
-            {index > 0 && (
-              <div className="w-px h-4 bg-gray-200 dark:bg-gray-700 mr-4" />
-            )}
             <span className="mr-1.5">{shortcut.label}</span>
-            <kbd className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-xs font-medium">
-              {shortcut.keys}
-            </kbd>
+            {shortcut.keys === "Tab" ? (
+              <Command className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-xs font-medium" />
+            ) : null}
+            {shortcut.keys === "ArrowDownUp" || shortcut.keys === "Tab" ? (
+              <ArrowDownUp className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-xs font-medium" />
+            ) : null}
+            {shortcut.keys === "CornerDownLeft" ? (
+              <CornerDownLeft className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-xs font-medium" />
+            ) : null}
           </div>
         ))}
       </div>
diff --git a/src/components/SearchChat/Search.tsx b/src/components/SearchChat/Search.tsx
index 8baf08bf..164eba08 100644
--- a/src/components/SearchChat/Search.tsx
+++ b/src/components/SearchChat/Search.tsx
@@ -1,5 +1,13 @@
-import React, { useState } from "react";
-import { Mic, Filter, Upload } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import {
+  Mic,
+  Library,
+  AudioLines,
+  SquareChevronLeft,
+  Send,
+  Plus,
+  Image,
+} from "lucide-react";
 import {
   WebviewWindow,
   getCurrentWebviewWindow,
@@ -7,9 +15,11 @@ import {
 import { LogicalSize } from "@tauri-apps/api/dpi";
 import { motion } from "framer-motion";
 
-import { SearchResults } from "./SearchResults";
+import DropdownList from "./DropdownList";
 import { Footer } from "./Footer";
 import ChatSwitch from "./ChatSwitch";
+import { SearchResults } from "./SearchResults";
+import { tauriFetch } from "../../api/tauriFetchClient";
 
 interface Tag {
   id: string;
@@ -18,17 +28,49 @@ interface Tag {
 
 interface SearchProps {
   changeMode: (isChatMode: boolean) => void;
+  changeInput: (val: string) => void;
+  isChatMode: boolean;
 }
 
-function Search({ changeMode }: SearchProps) {
+function Search({ changeMode, changeInput, isChatMode }: SearchProps) {
   const [tags, setTags] = useState<Tag[]>([]);
+  const [suggests, setSuggests] = useState<any[]>([]);
+  const [isSearchComplete, setIsSearchComplete] = useState(false);
   const [input, setInput] = useState("");
+  const [selectedItem, setSelectedItem] = useState<any>(null);
 
-  const handleKeyDown = async (e: React.KeyboardEvent) => {
+  const getSuggest = async () => {
+    try {
+      const response = await tauriFetch({
+        url: `/query/_search?query=${input}`,
+        method: "GET",
+      });
+      console.log("_suggest", response);
+      const data = response.data?.hits?.hits || [];
+      if (data.length > 0) {
+        await getCurrentWebviewWindow().setSize(new LogicalSize(680, 600));
+      } else {
+        await getCurrentWebviewWindow().setSize(new LogicalSize(680, 90));
+      }
+      setSuggests(data);
+      setIsSearchComplete(true);
+    } catch (error) {
+      console.error("Failed to fetch user data:", error);
+    }
+  };
+  const getDataList = async () => {
+    if (isChatMode) {
+      changeInput(input);
+    } else {
+      getSuggest();
+      // setTags([...tags, { id: Date.now().toString(), text: input.trim() }]);
+      // setInput("");
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "Enter" && input.trim()) {
-      setTags([...tags, { id: Date.now().toString(), text: input.trim() }]);
-      setInput("");
-      await getCurrentWebviewWindow().setSize(new LogicalSize(800, 600));
+      getDataList();
     }
   };
 
@@ -36,7 +78,7 @@ function Search({ changeMode }: SearchProps) {
     const newTag = tags.filter((tag) => tag.id !== tagId);
     setTags(newTag);
     if (newTag.length === 0) {
-      await getCurrentWebviewWindow().setSize(new LogicalSize(800, 110));
+      await getCurrentWebviewWindow().setSize(new LogicalSize(680, 90));
     }
   };
 
@@ -52,7 +94,7 @@ function Search({ changeMode }: SearchProps) {
       skipTaskbar: true,
       decorations: true,
       closable: true,
-      url: "/chat",
+      url: "/ui/chat",
     });
     webview.once("tauri://created", function () {
       console.log("webview created");
@@ -62,23 +104,29 @@ function Search({ changeMode }: SearchProps) {
     });
   }
 
+  useEffect(() => {
+    if (selectedItem) {
+      setTags([]);
+    }
+  }, [selectedItem]);
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      transition={{ duration: 0.1 }}
+      transition={{ duration: 0 }}
       className={`min-h-screen bg-opacity-0 flex items-start justify-center rounded-xl overflow-hidden ${
-        tags.length > 0 ? "pb-8" : ""
+        tags.length > 0 ? "pb-32" : ""
       }`}
     >
       <div className="w-full rounded-xl overflow-hidden">
-        <div className="border b-t-none  bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
+        <div className="b-none bg-[#F2F2F2] dark:bg-gray-800 rounded-xl overflow-hidden">
           {/* Search Bar */}
           <div className="relative">
-            <div className="flex items-center bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-2 focus-within:ring-2 focus-within:ring-blue-100 dark:focus-within:ring-blue-900 focus-within:border-blue-400 dark:focus-within:border-blue-500 transition-all">
-              <div className="flex flex-wrap gap-2 flex-1 min-h-12 items-center">
-                {tags.map((tag) => (
+            <div className="p-2.5 flex items-center bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 transition-all">
+              <div className="flex flex-wrap gap-2 flex-1 h-6 items-center">
+                {/* {tags.map((tag) => (
                   <span
                     key={tag.id}
                     className="inline-flex items-center bg-blue-50 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 px-2.5 py-1 rounded-lg text-sm"
@@ -91,44 +139,97 @@ function Search({ changeMode }: SearchProps) {
                       ×
                     </button>
                   </span>
-                ))}
+                ))} */}
+                {!isChatMode && selectedItem ? (
+                  <SquareChevronLeft
+                    className="cursor-pointer text-gray-400 dark:text-gray-500"
+                    onClick={() => setSelectedItem(null)}
+                  />
+                ) : null}
                 <input
                   type="text"
-                  className="flex-1 outline-none min-w-[200px] text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent"
-                  placeholder="有问题尽管问 Coco"
+                  className="text-3 flex-1 outline-none min-w-[200px] text-[#999] dark:text-gray-200 placeholder-text-3 placeholder-[#999] dark:placeholder-gray-500 bg-transparent"
+                  placeholder="Ask whatever you want....."
                   value={input}
-                  onChange={(e) => setInput(e.target.value)}
+                  onChange={(e) => {
+                    setInput(e.target.value);
+                    setIsSearchComplete(false);
+                  }}
                   onKeyDown={handleKeyDown}
                 />
               </div>
-              <button className="p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
-                <Mic className="w-5 h-5 text-gray-400 dark:text-gray-500" />
+              <button className="p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-full transition-colors">
+                <Mic className="w-3 h-3 text-[#333] dark:text-gray-500" />
+              </button>
+              <button
+                className={`ml-1 p-2 ${
+                  input ? "bg-[rgba(66,133,244,1)]" : "bg-[#E4E5F0]"
+                } rounded-full transition-colors`}
+                onClick={() => getDataList()}
+              >
+                <Send className="w-3 h-3 text-white hover:text-[#333]" />
               </button>
             </div>
           </div>
 
           {/* Controls */}
-          <div className="flex justify-between items-center p-2 rounded-xl overflow-hidden">
-            <div className="flex gap-3 text-xs">
-              <button
-                className="inline-flex items-center px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-700 dark:text-gray-300"
-                onClick={openChatAI}
-              >
-                <Filter className="w-4 h-4 mr-2" />问 Coco
-              </button>
-              <button className="inline-flex items-center px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-700 dark:text-gray-300">
-                <Upload className="w-4 h-4 mr-2" />
-                上传
-              </button>
-            </div>
+          <div className="flex justify-between items-center p-2 rounded-xl overflow-hidden bg-#F2F2F2">
+            {isChatMode ? (
+              <div className="flex gap-1 text-xs text-[#101010] dark:text-gray-300">
+                <button
+                  className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors "
+                  onClick={openChatAI}
+                >
+                  <Library className="w-4 h-4 mr-1" />
+                  Coco
+                </button>
+                <button className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-color">
+                  <Plus className="w-4 h-4 mr-1" />
+                  Upload
+                </button>
+              </div>
+            ) : (
+              <div className="flex gap-1 text-xs text-[#101010] dark:text-gray-300">
+                <button
+                  className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors "
+                  onClick={openChatAI}
+                >
+                  <AudioLines className="w-4 h-4 mr-1" />
+                </button>
+                <button className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-color">
+                  <Image className="w-4 h-4 mr-1" />
+                </button>
+              </div>
+            )}
 
             {/* Switch */}
-            <ChatSwitch isChat={false} changeMode={changeMode} />
+            <ChatSwitch
+              isChat={isChatMode}
+              changeMode={(value) => {
+                changeMode(value);
+                setInput("");
+              }}
+            />
           </div>
         </div>
 
         {/* Search Results Panel */}
-        {tags.length > 0 ? (
+        {!isChatMode && suggests.length > 0 ? (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{ delay: 0.2 }}
+          >
+            <DropdownList
+              suggests={suggests}
+              isSearchComplete={isSearchComplete}
+              selected={(item) => setSelectedItem(item)}
+            />
+          </motion.div>
+        ) : null}
+
+        {!isChatMode && selectedItem ? (
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -140,14 +241,14 @@ function Search({ changeMode }: SearchProps) {
         ) : null}
       </div>
 
-      {tags.length > 0 ? (
+      {!isChatMode && (suggests.length > 0 || selectedItem) ? (
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: 20 }}
           transition={{ delay: 0.2 }}
         >
-          <Footer isChat={false} />
+          <Footer isChat={false} name={selectedItem?.source} />
         </motion.div>
       ) : null}
     </motion.div>
diff --git a/src/components/SearchChat/SearchResults.tsx b/src/components/SearchChat/SearchResults.tsx
index ca0ecffe..190ee9a8 100644
--- a/src/components/SearchChat/SearchResults.tsx
+++ b/src/components/SearchChat/SearchResults.tsx
@@ -8,7 +8,7 @@ export const SearchResults: React.FC = () => {
 
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mt-4 overflow-hidden">
-      <div className="flex h-[calc(100vh-130px)]">
+      <div className="flex h-[calc(100vh-100px)]">
         {/* Left Panel */}
         <div className="w-[420px] border-r border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden">
           <div className="px-4 flex-shrink-0">
diff --git a/src/components/SearchChat/Switch.tsx b/src/components/SearchChat/Switch.tsx
new file mode 100644
index 00000000..9109e4bb
--- /dev/null
+++ b/src/components/SearchChat/Switch.tsx
@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { Bot, Search } from "lucide-react";
+
+interface SwitchProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+const Switch: React.FC<SwitchProps> = ({ checked = false, onChange }) => {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  const toggleSwitch = () => {
+    setIsChecked(!isChecked);
+    if (onChange) onChange(!isChecked);
+  };
+
+  return (
+    <div
+      role="switch"
+      aria-checked={isChecked}
+      className={`relative flex items-center justify-between w-9 h-4 rounded-full cursor-pointer transition-colors duration-300 ${
+        isChecked ? "bg-[#4285f4]" : "bg-[#7373FF]"
+      }`}
+      onClick={toggleSwitch}
+    >
+      {isChecked ? <Bot className="w-3 ml-1 text-white" /> : <div></div>}
+      {!isChecked ? <Search className="w-3 mr-1 text-white" /> : <div></div>}
+      <div
+        className={`absolute top-0 h-3 w-3 m-0.5 bg-white rounded-full shadow-md transform transition-transform duration-300 flex items-center justify-center ${
+          isChecked ? "translate-x-5" : "translate-x-0"
+        }`}
+      ></div>
+    </div>
+  );
+};
+
+export default Switch;
diff --git a/src/components/SearchChat/index.tsx b/src/components/SearchChat/index.tsx
index 3d8151e6..7d080c54 100644
--- a/src/components/SearchChat/index.tsx
+++ b/src/components/SearchChat/index.tsx
@@ -4,26 +4,39 @@ import { LogicalSize } from "@tauri-apps/api/dpi";
 import { AnimatePresence, LayoutGroup } from "framer-motion";
 
 import Search from "./Search";
-import ChatAI from "../ChatAI";
+import ChatAI from "../ChatAI/Chat";
 
 export default function SearchChat() {
-  const [isChatMode, setIsChatMode] = useState(true);
+  const [isChatMode, setIsChatMode] = useState(false);
+  const [input, setInput] = useState("");
 
   async function changeMode(value: boolean) {
     setIsChatMode(value);
-    if (value) {
-      await getCurrentWebviewWindow()?.setSize(new LogicalSize(900, 800));
-    } else {
-      await getCurrentWebviewWindow()?.setSize(new LogicalSize(900, 110));
+    setInput("");
+    if (!value) {
+      await getCurrentWebviewWindow()?.setSize(new LogicalSize(680, 90));
     }
   }
+
+  async function changeInput(value: string) {
+    setInput(value);
+    if (isChatMode) {
+      await getCurrentWebviewWindow()?.setSize(new LogicalSize(680, 600));
+    }
+  }
+
   return (
     <LayoutGroup>
       <AnimatePresence mode="wait">
-        {isChatMode ? (
-          <ChatAI key="ChatAI" changeMode={changeMode} />
+        {isChatMode && input ? (
+          <ChatAI key="ChatAI" inputValue={input} changeMode={changeMode} />
         ) : (
-          <Search key="Search" changeMode={changeMode} />
+          <Search
+            key="Search"
+            isChatMode={isChatMode}
+            changeMode={changeMode}
+            changeInput={changeInput}
+          />
         )}
       </AnimatePresence>
     </LayoutGroup>
diff --git a/src/components/SearchChat/types.ts b/src/components/SearchChat/types.ts
new file mode 100644
index 00000000..5d72351f
--- /dev/null
+++ b/src/components/SearchChat/types.ts
@@ -0,0 +1,12 @@
+export interface SearchItem {
+  id: number;
+  name: string;
+  description: string;
+}
+
+export interface SearchCategory {
+  id: string;
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  items: SearchItem[];
+}
\ No newline at end of file
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index b64c0e9c..c255e32d 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -1,4 +1,5 @@
 import { createContext, useContext, useEffect, useState } from "react";
+import { setTheme as setThemeApp } from '@tauri-apps/api/app';
 
 type Theme = "dark" | "light" | "system";
 
@@ -42,10 +43,13 @@ export function ThemeProvider({
         : "light";
 
       root.classList.add(systemTheme);
+      setThemeApp(systemTheme);
       return;
     }
 
     root.classList.add(theme);
+    setThemeApp(theme);
+
   }, [theme]);
 
   const value = {
@@ -67,7 +71,7 @@ export const useTheme = () => {
   const context = useContext(ThemeProviderContext);
 
   if (context === undefined)
-    throw new Error("useTheme 必须在 ThemeProvider 中使用");
+    throw new Error("useTheme must be used in ThemeProvider");
 
   return context;
 };
diff --git a/src/hooks/useWebSocket.ts b/src/hooks/useWebSocket.ts
index b425eb59..81562e26 100644
--- a/src/hooks/useWebSocket.ts
+++ b/src/hooks/useWebSocket.ts
@@ -9,16 +9,16 @@ export function useWebSocket(
   const [connected, setConnected] = useState(false);
 
   useEffect(() => {
-    // 创建 WebSocket 连接
+    // Create WebSocket
     const websocket = new WebSocket(url);
 
     websocket.onopen = () => {
-      console.log("WebSocket 连接成功");
+      console.log("WebSocket success");
       setConnected(true);
     };
 
     websocket.onmessage = (event) => {
-      // console.log("收到消息:", event.data);
+      // console.log("data:", event.data);
       const data = filterMessages ? filterMessages(event.data) : event.data;
       if (data) {
         setMessages((prevMessages) => prevMessages + data);
@@ -26,28 +26,25 @@ export function useWebSocket(
     };
 
     websocket.onclose = () => {
-      console.log("WebSocket 连接关闭");
+      console.log("WebSocket close");
       setConnected(false);
     };
 
     websocket.onerror = (error) => {
-      console.error("WebSocket 连接错误:", error);
+      console.error("WebSocket error:", error);
     };
 
-    // 将 WebSocket 实例保存在状态中
     setWs(websocket);
 
-    // 在组件卸载时关闭 WebSocket 连接
     return () => {
       websocket.close();
     };
   }, [url]);
 
-  // 发送消息的函数
   const sendMessage = (message: string) => {
     if (ws && connected) {
       ws.send(message);
-      console.log("发送消息:", message);
+      console.log("Send:", message);
     }
   };
 
diff --git a/src/hooks/useWindows.ts b/src/hooks/useWindows.ts
new file mode 100644
index 00000000..a86a3165
--- /dev/null
+++ b/src/hooks/useWindows.ts
@@ -0,0 +1,115 @@
+import { useEffect, useCallback } from "react";
+import { getAllWindows, getCurrentWindow } from "@tauri-apps/api/window";
+import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { listen } from "@tauri-apps/api/event";
+
+const defaultWindowConfig = {
+  label: null,
+  title: "",
+  url: "",
+  width: 1000,
+  height: 640,
+  minWidth: null,
+  minHeight: null,
+  x: null,
+  y: null,
+  center: true,
+  resizable: true,
+  maximized: false,
+  decorations: false,
+  alwaysOnTop: true,
+  dragDropEnabled: true,
+  visible: true,
+};
+
+const useWindows = () => {
+  const appWindow = getCurrentWindow();
+
+  const createWin = useCallback(async (options: any) => {
+    const args = { ...defaultWindowConfig, ...options };
+
+    const existWin = await getWin(args.label);
+    if (existWin) {
+      console.log("Window already exists>>", existWin);
+      return;
+    }
+
+    const win = new WebviewWindow(args.label, args);
+
+    win.once("tauri://created", async () => {
+      console.log("tauri://created");
+      if (args.label.includes("main")) {
+        //
+      }
+
+      if (args.maximized && args.resizable) {
+        console.log("is-maximized");
+        await win.maximize();
+      }
+    });
+
+    win.once("tauri://error", (error) => {
+      console.error("error:", error);
+    });
+  }, []);
+
+  const closeWin = useCallback(async (label: string) => {
+    const targetWindow = await getWin(label);
+
+    if (!targetWindow) {
+      console.warn(`no found "${label}"`);
+      return;
+    }
+
+    try {
+      await targetWindow.close();
+      console.log(`"${label}" close`);
+    } catch (error) {
+      console.error(`"${label}" error:`, error);
+    }
+  }, []);
+
+  const getWin = useCallback(async (label: string) => {
+    return WebviewWindow.getByLabel(label);
+  }, []);
+
+  const getAllWin = useCallback(async () => {
+    return getAllWindows();
+  }, []);
+
+  const listenEvents = useCallback(() => {
+    listen("win-create", (event) => {
+      console.log(event);
+      createWin(event.payload);
+    });
+
+    listen("win-show", async () => {
+      if (!appWindow || appWindow.label.indexOf("main") === -1) return;
+      await appWindow.show();
+      await appWindow.unminimize();
+      await appWindow.setFocus();
+    });
+
+    listen("win-hide", async () => {
+      if (!appWindow || appWindow.label.indexOf("main") === -1) return;
+      await appWindow.hide();
+    });
+
+    listen("win-close", async () => {
+      await appWindow.close();
+    });
+  }, [appWindow, createWin]);
+
+  useEffect(() => {
+    listenEvents();
+  }, [listenEvents]);
+
+  return {
+    createWin,
+    closeWin,
+    getWin,
+    getAllWin,
+  };
+};
+
+export default useWindows;
diff --git a/src/main.tsx b/src/main.tsx
index 8a34ca2c..a860db60 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -10,7 +10,7 @@ import "./main.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <ThemeProvider defaultTheme="dark" storageKey="theme">
+    <ThemeProvider defaultTheme="light" storageKey="theme">
       <RouterProvider router={router} />
     </ThemeProvider>
   </React.StrictMode>
diff --git a/src/routes/Header.tsx b/src/routes/Header.tsx
index 66507298..9fd603f6 100644
--- a/src/routes/Header.tsx
+++ b/src/routes/Header.tsx
@@ -1,18 +1,15 @@
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
 export default function Header() {
-  // 调用 navigate() 去你想去的地方 ⛱️
   const navigate = useNavigate();
-  // 我在哪？
   const location = useLocation();
-  const showBack = location.pathname !== "/";
+  const showBack = location.pathname !== "/ui";
 
   return (
     <div>
-      <div onClick={() => navigate("/")}>Home</div>
+      <div onClick={() => navigate("/ui")}>Home</div>
       <div>
-        {/* 相当于 HTML 中的 <a>，点击后跳转页面 */}
-        <Link to="/settings" title="更多">
+        <Link to="/ui/settings" title="more">
           Settings
         </Link>
       </div>
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index f18e525f..347952b1 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -1,9 +1,5 @@
 import { Outlet } from "react-router-dom";
 
 export default function Layout() {
-  return (
-    <main>
-      <Outlet />
-    </main>
-  );
+  return <Outlet />;
 }
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index efc84055..8693045c 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -5,7 +5,7 @@ import ErrorPage from "../error-page";
 // import Settings from "../components/Settings";
 import Settings2 from "../components/Settings/index2";
 import SearchChat from "../components/SearchChat";
-// import ChatAI from "../components/ChatAI";
+import ChatAI from "../components/ChatAI";
 import MySearch from "../components/MySearch";
 import Layout from "./Layout";
 
@@ -15,10 +15,10 @@ export const router = createBrowserRouter([
     element: <Layout />,
     errorElement: <ErrorPage />,
     children: [
-      { path: "/", element: <SearchChat /> },
-      { path: "/settings", element: <Settings2 /> },
-      // { path: "/chat", element: <ChatAI /> },
-      { path: "/my", element: <MySearch /> },
+      { path: "/ui", element: <SearchChat /> },
+      { path: "/ui/settings", element: <Settings2 /> },
+      { path: "/ui/chat", element: <ChatAI /> },
+      { path: "/ui/search", element: <MySearch /> },
     ],
   },
 ]);
diff --git a/src/stores/themeStore.ts b/src/stores/themeStore.ts
index 599ccbbf..b6413ca9 100644
--- a/src/stores/themeStore.ts
+++ b/src/stores/themeStore.ts
@@ -10,7 +10,6 @@ export type IThemeStore = {
 };
 
 export const useThemeStore = create<IThemeStore>()(
-  // 持久化中间件
   persist(
     (set) => ({
       themes: ["dark", "light", "system"],
@@ -18,9 +17,8 @@ export const useThemeStore = create<IThemeStore>()(
       setTheme: (activeTheme: ITheme) => set(() => ({ activeTheme })),
     }),
     {
-      name: "active-theme", // 存储在 storage 中的 key 名
-      // storage: createJSONStorage(() => sessionStorage), // 存储数据库配置，默认使用 localstorage
-      // 过滤函数
+      name: "active-theme",
+      // storage: createJSONStorage(() => sessionStorage), 
       partialize: (state) =>
         Object.fromEntries(
           Object.entries(state).filter(([key]) => key === "activeTheme")
diff --git a/vite.config.ts b/vite.config.ts
index 06da5522..c63e43d8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,6 +32,7 @@ export default defineConfig(async () => ({
         target: "http://localhost:2900",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/chat/, ""),
+        secure: false,
       },
     },
   },