From dd2260a9e0f28b83b8ef88869b89727627b1c310 Mon Sep 17 00:00:00 2001
From: BiggerRain <15911122312@163.COM>
Date: Fri, 20 Dec 2024 18:53:41 +0800
Subject: [PATCH] feat: add keyboard events and tooltip (#61)

---
 .vscode/settings.json                         |   2 +
 src-tauri/src/lib.rs                          |   2 +-
 .../SearchChat/AutoResizeTextarea.tsx         |  26 ++-
 src/components/SearchChat/ChatSwitch.tsx      |   5 +-
 src/components/SearchChat/InputBox.tsx        | 154 +++++++++++++++---
 src/components/Settings/GeneralSettings.tsx   |  21 ++-
 src/components/Settings/SettingsPanel.tsx     |   2 +-
 src/components/Settings/index.tsx             |   2 +-
 src/components/UI/Tooltip/index.tsx           |  34 ++++
 src/components/UI/Tooltip/style.css           |  54 ++++++
 src/contexts/ThemeContext.tsx                 |   2 +-
 src/hooks/useWindows.ts                       |   1 +
 src/main.css                                  |   2 +-
 13 files changed, 256 insertions(+), 51 deletions(-)
 create mode 100644 src/components/UI/Tooltip/index.tsx
 create mode 100644 src/components/UI/Tooltip/style.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d751aff..dd08ab3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,11 +17,13 @@
     "maximizable",
     "Minimizable",
     "nord",
+    "nowrap",
     "nspanel",
     "nsstring",
     "partialize",
     "Raycast",
     "rehype",
+    "rgba",
     "serde",
     "tailwindcss",
     "tauri",
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 5cd7dbc..258ead1 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -118,7 +118,7 @@ fn change_shortcut<R: Runtime>(
         .on_shortcut(shortcut, move |_app, scut, event| {
             if scut == &shortcut {
                 if let ShortcutState::Pressed = event.state() {
-                    if main_window.is_focused().unwrap() {
+                    if main_window.is_visible().unwrap() {
                         main_window.hide().unwrap();
                     } else {
                         main_window.show().unwrap();
diff --git a/src/components/SearchChat/AutoResizeTextarea.tsx b/src/components/SearchChat/AutoResizeTextarea.tsx
index 89d50e0..cfd6527 100644
--- a/src/components/SearchChat/AutoResizeTextarea.tsx
+++ b/src/components/SearchChat/AutoResizeTextarea.tsx
@@ -1,16 +1,15 @@
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef, useImperativeHandle, forwardRef } from "react";
 
 interface AutoResizeTextareaProps {
   input: string;
   setInput: (value: string) => void;
-  handleKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
 }
 
-const AutoResizeTextarea: React.FC<AutoResizeTextareaProps> = ({
-  input,
-  setInput,
-  handleKeyDown,
-}) => {
+// Forward ref to allow parent to interact with this component
+const AutoResizeTextarea = forwardRef<
+  { reset: () => void; focus: () => void },
+  AutoResizeTextareaProps
+>(({ input, setInput }, ref) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -21,6 +20,16 @@ const AutoResizeTextarea: React.FC<AutoResizeTextareaProps> = ({
     }
   }, [input]);
 
+  // Expose methods to the parent via ref
+  useImperativeHandle(ref, () => ({
+    reset: () => {
+      setInput("");
+    },
+    focus: () => {
+      textareaRef.current?.focus();
+    },
+  }));
+
   return (
     <textarea
       ref={textareaRef}
@@ -32,7 +41,6 @@ const AutoResizeTextarea: React.FC<AutoResizeTextareaProps> = ({
       placeholder="Ask whatever you want ..."
       value={input}
       onChange={(e) => setInput(e.target.value)}
-      onKeyDown={handleKeyDown}
       rows={1}
       style={{
         resize: "none", // Prevent manual resize
@@ -42,6 +50,6 @@ const AutoResizeTextarea: React.FC<AutoResizeTextareaProps> = ({
       }}
     />
   );
-};
+});
 
 export default AutoResizeTextarea;
diff --git a/src/components/SearchChat/ChatSwitch.tsx b/src/components/SearchChat/ChatSwitch.tsx
index 8eb8203..142860d 100644
--- a/src/components/SearchChat/ChatSwitch.tsx
+++ b/src/components/SearchChat/ChatSwitch.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
 import { Bot, Search } from "lucide-react";
 
 interface ChatSwitchProps {
@@ -7,13 +7,12 @@ interface ChatSwitchProps {
 }
 
 const ChatSwitch: React.FC<ChatSwitchProps> = ({ isChatMode, onChange }) => {
-
   useEffect(() => {
     const handleKeydown = (event: KeyboardEvent) => {
       if (event.metaKey && event.key === "t") {
         event.preventDefault();
         console.log("Switch mode triggered");
-        handleToggle()
+        handleToggle();
       }
     };
 
diff --git a/src/components/SearchChat/InputBox.tsx b/src/components/SearchChat/InputBox.tsx
index aa7e036..5268ca7 100644
--- a/src/components/SearchChat/InputBox.tsx
+++ b/src/components/SearchChat/InputBox.tsx
@@ -1,5 +1,5 @@
 import { Library, Mic, Send, Plus, AudioLines, Image } from "lucide-react";
-import { useRef, type KeyboardEvent } from "react";
+import { useRef, useState, useEffect } from "react";
 
 import ChatSwitch from "../SearchChat/ChatSwitch";
 import AutoResizeTextarea from "./AutoResizeTextarea";
@@ -26,36 +26,86 @@ export default function ChatInput({
   disabledChange,
 }: ChatInputProps) {
   const inputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<{ reset: () => void; focus: () => void }>(null);
 
   const { curChatEnd } = useChatStore();
 
+  const [isCommandPressed, setIsCommandPressed] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (e: any) => {
+      if (e.code === "MetaLeft" || e.code === "MetaRight") {
+        setIsCommandPressed(true);
+      }
+
+      if (e.metaKey) {
+        switch (e.code) {
+          case "KeyI":
+            if (isChatMode) {
+              textareaRef.current?.focus();
+            } else {
+              inputRef.current?.focus();
+            }
+            break;
+          case "KeyM":
+            console.log("KeyM");
+            break;
+          case "Enter":
+            isChatMode && handleSubmit();
+            break;
+          case "KeyO":
+            console.log("KeyO");
+            break;
+          case "KeyU":
+            console.log("KeyU");
+            break;
+          case "KeyN":
+            console.log("KeyN");
+            break;
+          case "KeyG":
+            console.log("KeyG");
+            break;
+          default:
+            break;
+        }
+      }
+    };
+
+    const handleKeyUp = (e: any) => {
+      if (e.code === "MetaLeft" || e.code === "MetaRight") {
+        setIsCommandPressed(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [isChatMode]);
+
   const handleSubmit = () => {
     if (inputValue.trim() && !disabled) {
       onSend(inputValue.trim());
     }
   };
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  };
-
   const openChatAI = async () => {
     console.log("Chat AI opened.");
   };
 
   return (
-    <div className="w-full rounded-xl overflow-hidden">
+    <div className="w-full rounded-xl overflow-hidden relative">
       <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">
+        <div className="p-[13px] flex items-center dark:text-[#D8D8D8] bg-white dark:bg-[#202126] rounded-xl transition-all relative">
+          <div className="flex flex-wrap gap-2 flex-1 items-center relative">
             {isChatMode ? (
               <AutoResizeTextarea
+                ref={textareaRef}
                 input={inputValue}
                 setInput={changeInput}
-                handleKeyDown={handleKeyDown}
               />
             ) : (
               <input
@@ -73,6 +123,20 @@ export default function ChatInput({
                 }}
               />
             )}
+            {isCommandPressed ? (
+              <div
+                className={`absolute bg-black bg-opacity-70 text-white font-bold px-2.5 py-1 rounded-md text-xs transition-opacity duration-200`}
+              >
+                ⌘ + i
+              </div>
+            ) : null}
+            {isChatMode && isCommandPressed ? (
+              <div
+                className={`absolute right-0 bg-black bg-opacity-70 text-white font-bold px-2.5 py-1 rounded-md text-xs transition-opacity duration-200`}
+              >
+                ⌘ + m
+              </div>
+            ) : null}
           </div>
 
           {isChatMode ? (
@@ -83,10 +147,13 @@ export default function ChatInput({
               <Mic className="w-4 h-4 text-[#999] dark:text-[#999]" />
             </button>
           ) : null}
+
           {isChatMode && curChatEnd ? (
             <button
               className={`ml-1 p-1 ${
-                inputValue ? "bg-[#0072FF]" : "bg-[#E4E5F0] dark:bg-[#545454]"
+                inputValue
+                  ? "bg-[#0072FF]"
+                  : "bg-[#E4E5F0] dark:bg-[rgb(84,84,84)]"
               } rounded-full transition-colors`}
               type="submit"
               onClick={() => onSend(inputValue.trim())}
@@ -116,38 +183,75 @@ export default function ChatInput({
           {isChatMode ? (
             <div className="flex gap-1 text-xs text-[#333] dark:text-[#d8d8d8]">
               <button
-                className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors "
+                className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors relative"
                 onClick={openChatAI}
               >
                 <Library className="w-4 h-4 mr-1 text-[#000] dark:text-[#d8d8d8]" />
                 Coco
+                {isCommandPressed ? (
+                  <div
+                    className={`absolute left-0 bg-black bg-opacity-70 text-white font-bold px-2.5 py-1 rounded-md text-xs transition-opacity duration-200`}
+                  >
+                    ⌘ + o
+                  </div>
+                ) : null}
               </button>
-              <button className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-color">
+              <button className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-color relative">
                 <Plus className="w-4 h-4 mr-1 text-[#000] dark:text-[#d8d8d8]" />
                 Upload
+                {isCommandPressed ? (
+                  <div
+                    className={`absolute left-1 bg-black bg-opacity-70 text-white font-bold px-2.5 py-1 rounded-md text-xs transition-opacity duration-200`}
+                  >
+                    ⌘ + u
+                  </div>
+                ) : null}
               </button>
             </div>
           ) : (
-            <div className="flex gap-1">
+            <div className="w-28 flex gap-1 relative">
               <button
-                className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors "
+                className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors relative"
                 onClick={openChatAI}
               >
                 <AudioLines className="w-4 h-4 text-[#000] dark:text-[#d8d8d8]" />
               </button>
-              <button className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-color">
+              <button className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-color relative">
                 <Image className="w-4 h-4 text-[#000] dark:text-[#d8d8d8]" />
               </button>
+              {isCommandPressed ? (
+                <div
+                  className={`absolute left-0 bg-black bg-opacity-70 text-white font-bold px-2.5 py-1 rounded-md text-xs transition-opacity duration-200`}
+                >
+                  ⌘ + n
+                </div>
+              ) : null}
+              {isCommandPressed ? (
+                <div
+                  className={`absolute left-14 bg-black bg-opacity-70 text-white font-bold px-2.5 py-1 rounded-md text-xs transition-opacity duration-200`}
+                >
+                  ⌘ + g
+                </div>
+              ) : null}
             </div>
           )}
 
-          <ChatSwitch
-            isChatMode={isChatMode}
-            onChange={(value) => {
-              value && disabledChange();
-              changeMode(value);
-            }}
-          />
+          <div className="relative w-24 flex justify-end items-center">
+            {isCommandPressed ? (
+              <div
+                className={`absolute left-0 z-10 bg-black bg-opacity-70 text-white font-bold px-2.5 py-1 rounded-md text-xs transition-opacity duration-200`}
+              >
+                ⌘ + t
+              </div>
+            ) : null}
+            <ChatSwitch
+              isChatMode={isChatMode}
+              onChange={(value) => {
+                value && disabledChange();
+                changeMode(value);
+              }}
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/Settings/GeneralSettings.tsx b/src/components/Settings/GeneralSettings.tsx
index 782e182..75c2e16 100644
--- a/src/components/Settings/GeneralSettings.tsx
+++ b/src/components/Settings/GeneralSettings.tsx
@@ -11,7 +11,7 @@ import SettingsSelect from "./SettingsSelect";
 import SettingsToggle from "./SettingsToggle";
 import { ThemeOption } from "./index2";
 import { type Hotkey } from "../../utils/tauri";
-import { useTheme } from '../../contexts/ThemeContext';
+import { useTheme } from "../../contexts/ThemeContext";
 
 export default function GeneralSettings() {
   const { theme, changeTheme } = useTheme();
@@ -104,7 +104,7 @@ export default function GeneralSettings() {
   }
 
   useEffect(() => {
-    getCurrentShortcut()
+    getCurrentShortcut();
   }, []);
 
   useEffect(() => {
@@ -190,7 +190,7 @@ export default function GeneralSettings() {
 
   const handleStartListening = () => {
     setPressedKeys(new Set());
-    setHotkey(null);
+    // setHotkey(null);
     setListening(true);
   };
 
@@ -220,12 +220,15 @@ export default function GeneralSettings() {
             title="Coco Hotkey"
             description="Global shortcut to open Coco"
           >
-            <button
-              onClick={handleStartListening}
-              className="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200"
-            >
-              {listening ? "Listening..." : formatHotkey(hotkey)}
-            </button>
+            <div className="flex items-center gap-2">
+              <span className="text-blue-500">{listening ? "Listening..." : ""}</span>
+              <button
+                onClick={handleStartListening}
+                className="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200"
+              >
+                {formatHotkey(hotkey)}
+              </button>
+            </div>
           </SettingsItem>
 
           {/* <SettingsItem
diff --git a/src/components/Settings/SettingsPanel.tsx b/src/components/Settings/SettingsPanel.tsx
index 3057a78..ebe264f 100644
--- a/src/components/Settings/SettingsPanel.tsx
+++ b/src/components/Settings/SettingsPanel.tsx
@@ -7,7 +7,7 @@ interface SettingsPanelProps {
 
 const SettingsPanel: React.FC<SettingsPanelProps> = ({ children }) => {
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
+    <div className="bg-white dark:bg-gray-800 rounded-xl p-6">
       {/* <h2 className="text-xl font-semibold mb-6">{title}</h2> */}
       {children}
     </div>
diff --git a/src/components/Settings/index.tsx b/src/components/Settings/index.tsx
index 073b98a..23c8bbe 100644
--- a/src/components/Settings/index.tsx
+++ b/src/components/Settings/index.tsx
@@ -59,7 +59,7 @@ function AppSettings() {
   return (
     <div className="min-h-screen bg-gray-50">
       <div className="max-w-7xl mx-auto px-4 py-8">
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-200 flex min-h-[500px]">
+        <div className="bg-white rounded-2xl border border-gray-200 flex min-h-[500px]">
           <div className="w-64 p-4 border-r border-gray-100">
             <div className="space-y-1">
               {sections.map((section) => (
diff --git a/src/components/UI/Tooltip/index.tsx b/src/components/UI/Tooltip/index.tsx
new file mode 100644
index 0000000..47d6b30
--- /dev/null
+++ b/src/components/UI/Tooltip/index.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import "./style.css";
+
+interface TooltipProps {
+  content: string;
+  position?: "top" | "bottom" | "left" | "right";
+  children: React.ReactNode;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  position = "top",
+  children,
+}) => {
+  const [visible, setVisible] = useState(false);
+
+  const handleMouseEnter = () => setVisible(true);
+  const handleMouseLeave = () => setVisible(false);
+
+  return (
+    <div
+      className="tooltip-container"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+      {visible && (
+        <div className={`tooltip-box tooltip-${position}`}>{content}</div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;
diff --git a/src/components/UI/Tooltip/style.css b/src/components/UI/Tooltip/style.css
new file mode 100644
index 0000000..cf08da3
--- /dev/null
+++ b/src/components/UI/Tooltip/style.css
@@ -0,0 +1,54 @@
+.tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-box {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 1000;
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 0.2s, transform 0.2s;
+  pointer-events: none;
+}
+
+.tooltip-box.tooltip-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+
+.tooltip-box.tooltip-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+
+.tooltip-box.tooltip-left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 8px;
+}
+
+.tooltip-box.tooltip-right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
+}
+
+.tooltip-container:hover .tooltip-box,
+.tooltip-container:focus-within .tooltip-box {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
index e0dc920..eaede89 100644
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -32,7 +32,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
   const getAppTheme = async () => {
     const theme = await invoke("plugin:theme|get_theme");
-    console.log(33333, theme);
+    console.log("theme", theme);
   };
 
   const changeTheme = async (value: AppTheme) => {
diff --git a/src/hooks/useWindows.ts b/src/hooks/useWindows.ts
index 8a8723e..9150627 100644
--- a/src/hooks/useWindows.ts
+++ b/src/hooks/useWindows.ts
@@ -110,6 +110,7 @@ export const useWindows = () => {
         center: true,
         width: 800,
         height: 600,
+        alwaysOnTop: true,
         shadow: true,
         decorations: true,
         closable: true,
diff --git a/src/main.css b/src/main.css
index 1bd1990..1e14879 100644
--- a/src/main.css
+++ b/src/main.css
@@ -33,7 +33,7 @@
   }
 
   .dark body,
-  .dark #root{
+  .dark #root {
     @apply text-gray-100 rounded-xl antialiased;
   }
 }