style: modify the style (#370)

* style: modify the style

* style: adjust page style

* style: web style

* docs: update notes

.env

@@ -1,3 +1,3 @@
-COCO_SERVER_URL=http://localhost:9000 https://coco.infini.cloud  #http://localhost:9000
+COCO_SERVER_URL=https://coco.infini.cloud  #http://localhost:9000
 
-COCO_WEBSOCKET_URL=ws://localhost:9000/ws wss://coco.infini.cloud/ws #ws://localhost:9000/ws
+COCO_WEBSOCKET_URL=wss://coco.infini.cloud/ws #ws://localhost:9000/ws

docs/content.en/docs/release-notes/_index.md

@@ -32,6 +32,7 @@ Information about release notes of Coco Server is provided here.
 - refactor: web components #331
 - refactor: refactoring login callback, receive access_token from coco-server
 - chore: adjust web component styles #362
+- style: modify the style #370
 
 ## 0.3.0 (2025-03-31)
 

src-tauri/tauri.conf.json

@@ -31,7 +31,7 @@
         "visible": false,
         "windowEffects": {
           "effects": [],
-          "radius": 12
+          "radius": 6
         },
         "visibleOnAllWorkspaces": true,
         "alwaysOnTop": true

src/components/Assistant/Chat.tsx

@@ -367,7 +367,7 @@ const ChatAI = memo(
       return (
         <div
           data-tauri-drag-region
-          className={`h-full flex flex-col rounded-xl relative`}
+          className={`h-full flex flex-col rounded-md relative`}
         >
           {showChatHistory && !setIsSidebarOpen && (
             <ChatSidebar

src/components/Common/UI/Footer.tsx

@@ -50,7 +50,7 @@ export default function Footer({
   return (
     <div
       data-tauri-drag-region={isTauri}
-      className="px-4 z-999 mx-[1px] h-8 absolute bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between rounded-xl rounded-t-none overflow-hidden"
+      className="px-4 z-999 mx-[1px] h-8 absolute bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between rounded-md rounded-t-none overflow-hidden"
     >
       {isTauri ? (
         <div className="flex items-center">

src/components/Search/DropdownList.tsx

@@ -158,7 +158,7 @@ function DropdownList({
     <div
       ref={containerRef}
       data-tauri-drag-region
-      className="h-[458px] w-full p-2 flex flex-col overflow-y-auto custom-scrollbar focus:outline-none"
+      className="h-full w-full p-2 flex flex-col overflow-y-auto custom-scrollbar focus:outline-none"
       tabIndex={0}
     >
       {showError ? (

src/components/Search/InputBox.tsx

@@ -287,7 +287,7 @@ export default function ChatInput({
   return (
     <div className={`w-full relative`}>
       <div
-        className={`p-2 flex items-center dark:text-[#D8D8D8] bg-[#ededed] dark:bg-[#202126] rounded transition-all relative overflow-hidden`}
+        className={`p-2 flex items-center dark:text-[#D8D8D8] bg-[#ededed] dark:bg-[#202126] rounded-md transition-all relative overflow-hidden`}
       >
         <div className="flex flex-wrap gap-2 flex-1 items-center relative">
           {!isChatMode && !sourceData ? (
@@ -428,7 +428,7 @@ export default function ChatInput({
         className="flex justify-between items-center py-2"
       >
         {isChatMode ? (
-          <div className="flex gap-2 text-sm text-[#333] dark:text-[#d8d8d8]">
+          <div className="flex gap-2 text-[12px] leading-3 text-[#333] dark:text-[#d8d8d8]">
             {/* {sessionId && (
               <InputExtra
                 checkScreenPermission={checkScreenPermission}
@@ -446,16 +446,16 @@ export default function ChatInput({
             {hasFeature.includes("think") && (
               <button
                 className={clsx(
-                  "flex items-center gap-1 p-1 h-6 rounded-lg transition hover:bg-[#EDEDED] dark:hover:bg-[#202126]",
+                  "flex items-center gap-1 py-[3px] pl-1 pr-1.5 rounded-md transition hover:bg-[#EDEDED] dark:hover:bg-[#202126]",
                   {
                     "!bg-[rgba(0,114,255,0.3)]": isDeepThinkActive,
                   }
                 )}
                 onClick={DeepThinkClick}
               >
-                <VisibleKey shortcut={deepThinking} onKeypress={DeepThinkClick}>
+                <VisibleKey shortcut={deepThinking} onKeypress={DeepThinkClick} className="!size-3">
                   <Brain
-                    className={`size-4 ${
+                    className={`size-3 ${
                       isDeepThinkActive
                         ? "text-[#0072FF] dark:text-[#0072FF]"
                         : "text-[#333] dark:text-white"
@@ -464,9 +464,9 @@ export default function ChatInput({
                 </VisibleKey>
                 {isDeepThinkActive && (
                   <span
-                    className={
+                    className={`${
                       isDeepThinkActive ? "text-[#0072FF]" : "dark:text-white"
-                    }
+                    }`}
                   >
                     {t("search.input.deepThink")}
                   </span>

src/components/Search/ListRight.tsx

@@ -1,6 +1,5 @@
 import TypeIcon from "@/components/Common/Icons/TypeIcon";
 import RichIcon from "@/components/Common/Icons/RichIcon";
-import { useAppStore } from "@/stores/appStore";
 
 interface ListRightProps {
   item: any;
@@ -17,17 +16,13 @@ export default function ListRight({
   currentIndex,
   goToTwoPage,
 }: ListRightProps) {
-  const isTauri = useAppStore((state) => state.isTauri);
-
   return (
     <div
-      className={`${
+      className={`flex flex-1 md:text-right text-left md:min-w-[160px] w-full h-full md:pl-5 text-[12px] gap-2 items-center md:justify-end justify-start relative`}
-        isTauri ? "flex" : "hidden md:flex"
-      } flex-1 text-right min-w-[160px] h-full pl-5 text-[12px] gap-2 items-center justify-end relative`}
     >
       {item?.rich_categories ? null : (
         <div
-          className="w-4 h-4 cursor-pointer"
+          className="hidden md:inline-block w-4 h-4 cursor-pointer"
           onClick={(e) => {
             e.stopPropagation();
             goToTwoPage && goToTwoPage(item);
@@ -48,7 +43,7 @@ export default function ListRight({
         <div className="flex items-center justify-end max-w-[calc(100%-20px)] whitespace-nowrap">
           <RichIcon
             item={item}
-            className="w-4 h-4 mr-2 cursor-pointer"
+            className="hidden md:inline-block w-4 h-4 mr-2 cursor-pointer"
             onClick={(e) => {
               e.stopPropagation();
               goToTwoPage && goToTwoPage(item);

src/components/Search/SearchListItem.tsx

@@ -42,16 +42,16 @@ const SearchListItem: React.FC<SearchListItemProps> = React.memo(({
       ref={itemRef}
       onMouseEnter={onMouseEnter}
       onClick={onItemClick}
-      className={`w-full px-2 py-2.5 text-sm flex items-center justify-between rounded-lg transition-colors cursor-pointer ${
+      className={`w-full px-2 py-2.5 md:mb-0 mb-2 text-sm flex md:flex-row flex-col md:items-center items-start justify-between rounded-lg transition-colors cursor-pointer ${
         isSelected
           ? "text-white bg-[var(--coco-primary-color)] hover:bg-[var(--coco-primary-color)]"
-          : "text-[#333] dark:text-[#d8d8d8]"
+          : "text-[#333] dark:text-[#d8d8d8] md:bg-transparent bg-gray-200/80 dark:bg-gray-700/50"
-      } ${showListRight ? "gap-7" : ""}`}
+      } ${showListRight ? "md:gap-7 gap-1" : ""}`}
       onContextMenu={onContextMenu}
     >
       <div
         className={`${
-          showListRight ? "max-w-[450px]" : "flex-1"
+          showListRight ? "md:max-w-[450px] w-full" : "flex-1"
         } min-w-0 flex gap-2 items-center justify-start `}
       >
         <ItemIcon item={item} />

src/components/Search/SearchPopover.tsx

@@ -188,16 +188,16 @@ export default function SearchPopover({
   return (
     <div
       className={clsx(
-        "flex items-center gap-1 p-1 h-6 rounded-lg transition hover:bg-[#EDEDED] dark:hover:bg-[#202126] cursor-pointer",
+        "flex items-center gap-1 p-[3px] pr-1 rounded-md transition hover:bg-[#EDEDED] dark:hover:bg-[#202126] cursor-pointer",
         {
           "!bg-[rgba(0,114,255,0.3)]": isSearchActive,
         }
       )}
       onClick={setIsSearchActive}
     >
-      <VisibleKey shortcut={internetSearch} onKeypress={setIsSearchActive}>
+      <VisibleKey shortcut={internetSearch} onKeypress={setIsSearchActive} className="!size-3">
         <Globe
-          className={`size-4 ${
+          className={`size-3 ${
             isSearchActive
               ? "text-[#0072FF] dark:text-[#0072FF]"
               : "text-[#333] dark:text-white"
@@ -208,7 +208,7 @@ export default function SearchPopover({
       {isSearchActive && (
         <>
           <span
-            className={isSearchActive ? "text-[#0072FF]" : "dark:text-white"}
+            className={`${isSearchActive ? "text-[#0072FF]" : "dark:text-white"}`}
           >
             {t("search.input.search")}
           </span>
@@ -229,9 +229,10 @@ export default function SearchPopover({
                   onKeypress={() => {
                     buttonRef.current?.click();
                   }}
+                  className="!size-3"
                 >
                   <ChevronDownIcon
-                    className={clsx("size-5", [
+                    className={clsx("size-3", [
                       isSearchActive
                         ? "text-[#0072FF] dark:text-[#0072FF]"
                         : "text-[#333] dark:text-white",

src/components/Search/SearchResults.tsx

@@ -31,7 +31,7 @@ export function SearchResults({ input, isChatMode, queryDocuments }: SearchResul
   }
 
   return (
-    <div className="h-[458px] w-full p-2 pr-0 flex flex-col rounded-xl focus:outline-none">
+    <div className="h-full w-full p-2 pr-0 flex flex-col rounded-xl focus:outline-none">
       <div className="h-full flex">
         {/* Left Panel */}
         <DocumentList

src/components/SearchChat/index.tsx

@@ -8,6 +8,7 @@ import {
   useState,
 } from "react";
 import clsx from "clsx";
+import { useMount } from "ahooks";
 
 import Search from "@/components/Search/Search";
 import InputBox from "@/components/Search/InputBox";
@@ -23,10 +24,6 @@ import { useStartupStore } from "@/stores/startupStore";
 import { DataSource } from "@/types/commands";
 import { useThemeStore } from "@/stores/themeStore";
 import { Get } from "@/api/axiosRequest";
-import { useKeyPress, useMount } from "ahooks";
-import { modifierKeys } from "../Settings/Advanced/components/Shortcuts";
-import { useShortcutsStore } from "@/stores/shortcutsStore";
-import { useModifierKeyPress } from "@/hooks/useModifierKeyPress";
 
 interface SearchChatProps {
   isTauri?: boolean;
@@ -282,7 +279,7 @@ function SearchChat({
         {
           "size-full": !isTauri,
           "w-screen h-screen": isTauri,
-          "rounded-xl": !isWin,
+          "rounded-md": !isWin,
           "border border-[#E6E6E6] dark:border-[#272626]": isTauri && isLinux,
           "border-t border-t-[#999] dark:border-t-[#333]": isTauri && isWin10,
         }
@@ -290,10 +287,10 @@ function SearchChat({
     >
       <div
         data-tauri-drag-region={isTauri}
-        className={`p-2 pb-0 absolute w-full flex items-center justify-center transition-all duration-500 ${
+        className={`p-2 absolute w-full flex justify-center transition-all duration-500 ${
           isTransitioned
-            ? "top-[calc(100%-90px)] h-[90px] border-t"
+            ? "top-[calc(100%-84px)] h-[84px] border-t"
-            : "top-0 h-[90px] border-b"
+            : "top-0 h-[84px] border-b"
         } border-[#E6E6E6] dark:border-[#272626]`}
       >
         <InputBox
@@ -332,7 +329,7 @@ function SearchChat({
         data-tauri-drag-region={isTauri}
         className={`absolute w-full transition-opacity duration-500 ${
           isTransitioned ? "opacity-0 pointer-events-none" : "opacity-100"
-        } bottom-0 h-[calc(100%-90px)] `}
+        } bottom-0 h-[calc(100%-84px)] `}
       >
         <Suspense fallback={<LoadingFallback />}>
           <Search

src/components/Settings/Advanced/components/Shortcuts/index.tsx

@@ -1,12 +1,13 @@
 import { useTranslation } from "react-i18next";
 import { Command } from "lucide-react";
 import { ChangeEvent, useEffect } from "react";
-import { emit } from "@tauri-apps/api/event";
 
 import { formatKey } from "@/utils/keyboardUtils";
 import SettingsItem from "@/components/Settings/SettingsItem";
 import { isMac } from "@/utils/platform";
-import { ModifierKey, useShortcutsStore } from "@/stores/shortcutsStore";
+import { useShortcutsStore } from "@/stores/shortcutsStore";
+import { ModifierKey } from "@/types/index";
+import platformAdapter from "@/utils/platformAdapter";
 
 export const modifierKeys: ModifierKey[] = isMac
   ? ["meta", "ctrl"]
@@ -53,7 +54,7 @@ const Shortcuts = () => {
 
   useEffect(() => {
     const unlisten = useShortcutsStore.subscribe((state) => {
-      emit("change-shortcuts-store", state);
+      platformAdapter.emitEvent("change-shortcuts-store", state);
     });
 
     return unlisten;

src/main.css

@@ -96,7 +96,7 @@
   }
 
   .input-body {
-    @apply rounded-xl overflow-hidden;
+    @apply rounded-md overflow-hidden;
   }
 
   .icon {

src/pages/web/index.tsx

@@ -31,7 +31,7 @@ function WebApp({
   height = 590,
   headers = {
     "X-API-TOKEN":
-      "cvqt6r02sdb2v3bkgip0x3ixv01f3r2lhnxoz1efbn160wm9og58wtv8t6wrv1ebvnvypuc23dx9pb33aemh",
+      "cvv8e2ehpcevm89r0khg8iesn4hbuzhxvy3y621n0ca2cqs3vw46mhs91yr5us82emdg46r0qtrt23nl1lux",
     "APP-INTEGRATION-ID": "cvkm9hmhpcemufsg3vug",
   },
   // token = "cva1j5ehpcenic3ir7k0h8fb8qtv35iwtywze248oscrej8yoivhb5b1hyovp24xejjk27jy9ddt69ewfi3n",   // https://coco.infini.cloud
@@ -41,7 +41,7 @@ function WebApp({
   hideCoco = () => {},
   hasModules = ["search", "chat"],
   defaultModule = "search",
-  hasFeature = ["search", "think_active", "search_active"],
+  hasFeature = ["search", "think", "think_active", "search_active"],
   theme = "dark",
   searchPlaceholder = "",
   chatPlaceholder = "",
@@ -142,7 +142,7 @@ function WebApp({
       {isMobile() && (
         <div
           className={`fixed ${
-            isChatMode ? "top-2" : "top-4"
+            isChatMode ? "top-2" : "top-3"
           } right-2 flex items-center justify-center w-8 h-8 rounded-full bg-black/10 dark:bg-white/10 cursor-pointer z-50`}
           onClick={onCancel}
         >

src/stores/shortcutsStore.ts

@@ -1,8 +1,8 @@
-import { isMac } from "@/utils/platform";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
-export type ModifierKey = "meta" | "ctrl" | "alt";
+import { isMac } from "@/utils/platform";
+import { ModifierKey } from "@/types/index";
 
 export type IShortcutsStore = {
   modifierKey: ModifierKey;

src/types/index.ts

@@ -1,2 +1,5 @@
 export type AppEndpoint = string
+
 export type AppTheme = "auto" | "light" | "dark"
+
+export type ModifierKey = "meta" | "ctrl" | "alt";

src/utils/platformAdapter.ts

@@ -1,8 +1,8 @@
 // manual modification
-// import { createWebAdapter } from './webAdapter';
+//import { createWebAdapter } from './webAdapter';
 import { createTauriAdapter } from "./tauriAdapter";
 
 let platformAdapter = createTauriAdapter();
-// let platformAdapter: WebPlatformAdapter = createWebAdapter();
+//let platformAdapter = createWebAdapter();
 
 export default platformAdapter;

src/utils/webAdapter.ts

@@ -171,7 +171,7 @@ export const createWebAdapter = (): WebPlatformAdapter => {
     isWindows10: async () => false,
 
     async setShadow(enable) {
-      console.warn("setShadow is not supported in web environment", enable);
+      console.log("setShadow is not supported in web environment", enable);
       return Promise.resolve();
     },
   };

src/web.css

@@ -155,7 +155,7 @@ body,
 
 .input-body {
   overflow: hidden;
-  border-radius: 0.75rem;
+  border-radius: 0.375rem;
 }
 
 .icon {