style: window style adjustment

src-tauri/tauri.conf.json

@@ -24,8 +24,8 @@
         "dragDropEnabled": true,
         "focus": true,
         "fullscreen": false,
-        "height": 600,
+        "height": 596,
-        "maxHeight": 600,
+        "maxHeight": 596,
         "minHeight": 90,
         "width": 680,
         "maxWidth": 680,

src/components/ChatAI/Chat.tsx

@@ -211,7 +211,7 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
     return (
       <div
         data-tauri-drag-region
-        className={`h-[500px] flex flex-col rounded-xl overflow-hidden bg-chat_bg_light dark:bg-chat_bg_dark bg-cover`}
+        className={`h-[500px] flex flex-col rounded-xl overflow-hidden`}
       >
         <header
           data-tauri-drag-region

src/components/SearchChat/DropdownList.tsx

@@ -103,7 +103,7 @@ function DropdownList({ selected, suggests }: DropdownListProps) {
     <div
       ref={containerRef}
       data-tauri-drag-region
-      className="h-[500px] w-full p-2 pb-10 flex flex-col bg-search_bg_light dark:bg-chat_bg_dark bg-cover rounded-xl overflow-y-auto overflow-hidden focus:outline-none"
+      className="h-[500px] w-full p-2 pb-10 flex flex-col rounded-xl overflow-y-auto overflow-hidden focus:outline-none"
       tabIndex={0}
     >
       {suggests?.map((item, index) => {

src/components/SearchChat/InputBox.tsx

@@ -54,7 +54,7 @@ export default function ChatInput({
 
   return (
     <div className="w-full rounded-xl overflow-hidden">
-      <div className="bg-inputbox_bg_light dark:bg-inputbox_bg_dark bg-cover rounded-xl">
+      <div className="rounded-xl">
         <div className="p-[13px] flex items-center dark:text-[#D8D8D8] bg-white dark:bg-[#202126] rounded-xl transition-all">
           <div className="flex flex-wrap gap-2 flex-1 items-center">
             {isChatMode ? (

src/components/SearchChat/Search.tsx

@@ -56,17 +56,22 @@ function Search({ isTransitioned, isChatMode, input }: SearchProps) {
     !isChatMode && debouncedSearch();
   }, [input]);
 
-  if (suggests.length === 0) return null;
+  console.log(11111, isChatMode);
+  if (isChatMode || suggests.length === 0) return null;
 
   return (
     <div
-      className={`absolute w-full transition-opacity duration-500 ${
+      className={`rounded-xl overflow-hidden bg-search_bg_light dark:bg-search_bg_dark bg-cover border border-[#E6E6E6] dark:border-[#272626] absolute w-full transition-opacity duration-500 ${
         isTransitioned ? "opacity-0 pointer-events-none" : "opacity-100"
       } bottom-0 h-[500px]`}
+      style={{
+        backgroundPosition: "-1px 0",
+        backgroundSize: "101% 100%",
+      }}
     >
       {isChatMode ? null : (
         <div
-          className={`min-h-full w-full flex items-start justify-center rounded-xl overflow-hidden relative`}
+          className={`min-h-full w-full flex items-start justify-center overflow-hidden relative`}
         >
           {/* Search Results Panel */}
           {suggests.length > 0 ? (

src/components/SearchChat/Transition.tsx

@@ -10,12 +10,12 @@ const TransitionComponent = () => {
   return (
     <div
       data-tauri-drag-region
-      className="w-[680px] h-[600px] mx-auto bg-gray-100 overflow-hidden relative"
+      className="w-[680px] h-[596px] mx-auto overflow-hidden relative"
     >
       <div
         data-tauri-drag-region
-        className={`absolute w-full bg-red-500 text-white flex items-center justify-center transition-all duration-500 ${
+        className={`shadow-window-custom border border-[#E6E6E6] dark:border-[#272626] absolute w-full bg-red-500 text-white flex items-center justify-center transition-all duration-500 ${
-          isTransitioned ? "top-[510px] h-[90px]" : "top-0 h-[90px]"
+          isTransitioned ? "top-[506px] h-[90px]" : "top-0 h-[90px]"
         }`}
       >
         <button
@@ -28,17 +28,17 @@ const TransitionComponent = () => {
 
       <div
         data-tauri-drag-region
-        className={`absolute w-full bg-green-500 transition-opacity duration-500 ${
+        className={`shadow-window-custom border border-[#E6E6E6] dark:border-[#272626] absolute w-full bg-green-500 transition-opacity duration-500 ${
           isTransitioned ? "opacity-0 pointer-events-none" : "opacity-100"
         } bottom-0 h-[500px]`}
       ></div>
 
       <div
         data-tauri-drag-region
-        className={`absolute w-full bg-yellow-500 transition-all duration-500 ${
+        className={`shadow-window-custom border border-[#E6E6E6] dark:border-[#272626] absolute w-full bg-yellow-500 transition-all duration-500 ${
           isTransitioned
             ? "top-0 opacity-100 pointer-events-auto"
-            : "-top-[510px] opacity-0 pointer-events-none"
+            : "-top-[506px] opacity-0 pointer-events-none"
         } h-[500px]`}
       ></div>
     </div>

src/components/SearchChat/index.tsx

@@ -54,8 +54,8 @@ export default function SearchChat() {
       className={`w-full h-full min-h-screen mx-auto overflow-hidden relative`}
     >
       <div
-        className={`absolute z-100 w-full flex items-center justify-center duration-500 ${
+        className={`rounded-xl overflow-hidden bg-inputbox_bg_light dark:bg-inputbox_bg_dark bg-cover border border-[#E6E6E6] dark:border-[#272626] absolute z-100 w-full flex items-center justify-center duration-500 ${
-          isTransitioned ? "top-[510px] h-[90px]" : "top-0 h-[90px]"
+          isTransitioned ? "top-[506px] h-[90px]" : "top-0 h-[90px]"
         }`}
       >
         <InputBox
@@ -73,10 +73,10 @@ export default function SearchChat() {
       </div>
 
       <div
-        className={`absolute w-full transition-all duration-500 ${
+        className={`rounded-xl overflow-hidden bg-chat_bg_light dark:bg-chat_bg_dark bg-cover border border-[#E6E6E6] dark:border-[#272626] absolute w-full transition-all duration-500 ${
           isTransitioned
             ? "top-0 opacity-100 pointer-events-auto"
-            : "-top-[510px] opacity-0 pointer-events-none"
+            : "-top-[506px] opacity-0 pointer-events-none"
         } h-[500px]`}
       >
         <ChatAI
@@ -88,13 +88,15 @@ export default function SearchChat() {
         />
       </div>
 
-      <Search
+      {isChatMode ? null : (
-        key="Search"
+        <Search
-        input={input}
+          key="Search"
-        isChatMode={isChatMode}
+          input={input}
-        isTransitioned={isTransitioned}
+          isChatMode={isChatMode}
-        changeInput={changeInput}
+          isTransitioned={isTransitioned}
-      />
+          changeInput={changeInput}
+        />
+      )}
     </div>
   );
 }

src/main.css

@@ -82,4 +82,8 @@
   .dark .custom-scrollbar::-webkit-scrollbar-thumb {
     background-color: #475569;
   }
+
+  .bg-100 {
+    background-size: 100% 100%;
+  }
 }

tailwind.config.js

@@ -11,12 +11,12 @@ export default {
         separator: "rgb(var(--color-separator) / <alpha-value>)",
       },
       backgroundImage: {
-        'chat_bg_light': "url('/chat_bg_light.png')",
+        chat_bg_light: "url('/chat_bg_light.png')",
-        'chat_bg_dark': "url('/chat_bg_dark.png')",
+        chat_bg_dark: "url('/chat_bg_dark.png')",
-        'search_bg_light': "url('/search_bg_light.png')",
+        search_bg_light: "url('/search_bg_light.png')",
-        'search_bg_dark': "url('/search_bg_dark.png')",
+        search_bg_dark: "url('/search_bg_dark.png')",
-        'inputbox_bg_light': "url('/inputbox_bg_light.png')",
+        inputbox_bg_light: "url('/inputbox_bg_light.png')",
-        'inputbox_bg_dark': "url('/inputbox_bg_dark.png')",
+        inputbox_bg_dark: "url('/inputbox_bg_dark.png')",
       },
       textColor: {
         primary: "rgb(var(--color-foreground) / <alpha-value>)",
@@ -30,6 +30,9 @@ export default {
           "100%": { opacity: "1" },
         },
       },
+      boxShadow: {
+        'window-custom': '0 1px 5px 0 rgba(0, 0, 0, 0.15), 0 1px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1)',
+      },
     },
   },
   plugins: [],