chore: adjust ai settings

Updated the AISmartSidebar component to utilize CSS animations instead of motion/react for smoother performance. Introduced a new hook to manage prompt visibility based on focusable scope, enhancing user experience. Removed the label from the PersonalizePromptSection for a cleaner UI and updated localization files accordingly.

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/AISmartSidebar.tsx

@@ -1,6 +1,7 @@
 // Replaced motion/react animations with CSS animations
 import "./AISmartSidebar.css"
 
+import { useGlobalFocusableScopeSelector } from "@follow/components/common/Focusable/hooks.js"
 import { Spring } from "@follow/components/constants/spring.js"
 import { useMousePosition } from "@follow/components/hooks/useMouse.js"
 import { KbdCombined } from "@follow/components/ui/kbd/Kbd.js"
@@ -9,6 +10,7 @@ import * as React from "react"
 import { useEffect, useState } from "react"
 
 import { setAIPanelVisibility, useAIPanelVisibility } from "~/atoms/settings/ai"
+import { FocusablePresets } from "~/components/common/Focusable"
 import { COMMAND_ID } from "~/modules/command/commands/id"
 import { useCommandShortcut } from "~/modules/command/hooks/use-command-binding"
 
@@ -18,7 +20,9 @@ const AIAmbientSidebar: React.FC<{ onExpand: () => void }> = ({ onExpand }) => {
   const isShowPromptRef = React.useRef(false)
   const mousePosition = useMousePosition()
 
+  const canShowPrompt = useGlobalFocusableScopeSelector(FocusablePresets.isNotFloatingLayerScope)
   useEffect(() => {
+    if (!canShowPrompt) return
     const rightEdgeDistance = window.innerWidth - mousePosition.x
     const maxDistance = 500
     const threshold = 80
@@ -47,9 +51,10 @@ const AIAmbientSidebar: React.FC<{ onExpand: () => void }> = ({ onExpand }) => {
       setShowPrompt(false)
       isShowPromptRef.current = false
     }
-  }, [mousePosition])
+  }, [canShowPrompt, mousePosition])
 
   const toggleAIChatShortcut = useCommandShortcut(COMMAND_ID.global.toggleAIChat)
+  if (!canShowPrompt) return null
   return (
     <>
       <div

apps/desktop/layer/renderer/src/modules/settings/tabs/ai/PersonalizePromptSection.tsx

@@ -1,6 +1,5 @@
 import { Spring } from "@follow/components/constants/spring.js"
 import { Button } from "@follow/components/ui/button/index.js"
-import { Label } from "@follow/components/ui/label/index.jsx"
 import { LexicalRichEditorTextArea } from "@follow/components/ui/lexical-rich-editor/index.js"
 import { AnimatePresence } from "motion/react"
 import { useRef, useState } from "react"
@@ -52,7 +51,6 @@ export const PersonalizePromptSection = () => {
   return (
     <div className="space-y-4">
       <div className="space-y-2">
-        <Label className="text-text text-sm font-medium">{t("personalize.prompt.label")}</Label>
         <div className="relative -ml-3">
           <LexicalRichEditorTextArea
             initialValue={aiSettings.personalizePrompt}

locales/ai/en.json

@@ -123,7 +123,6 @@
   "mentions.date.weekday.this.label": "This {{weekday}}",
   "personalize.description": "Tell me about yourself to get personalized AI responses.",
   "personalize.prompt.help": "This helps AI provide personalized responses based on your preferences.",
-  "personalize.prompt.label": "Personal Prompt",
   "personalize.prompt.placeholder": "Tell me about yourself and how you prefer to read content...",
   "personalize.saved": "Personalization saved successfully",
   "personalize.title": "Personalization",

locales/ai/ja.json

@@ -117,7 +117,6 @@
   "mentions.date.weekday.this.label": "今週{{weekday}}",
   "personalize.description": "あなた自身について教えてください。そうすれば、パーソナライズされたAIの応答が得られます。",
   "personalize.prompt.help": "これにより、AIはあなたの好みに基づいてパーソナライズされた応答を提供できます。",
-  "personalize.prompt.label": "個人用プロンプト",
   "personalize.prompt.placeholder": "あなた自身について、どのようにコンテンツを読みたいかを教えてください...",
   "personalize.saved": "パーソナライズが正常に保存されました",
   "personalize.title": "パーソナライズ",

locales/ai/zh-CN.json

@@ -119,7 +119,6 @@
   "mentions.date.weekday.this.label": "本周{{weekday}}",
   "personalize.description": "介绍一下您自己，以获得个性化的AI响应。",
   "personalize.prompt.help": "这有助于AI根据您的偏好提供个性化响应。",
-  "personalize.prompt.label": "个人提示",
   "personalize.prompt.placeholder": "介绍一下您自己以及您希望如何阅读内容...",
   "personalize.saved": "个性化设置保存成功",
   "personalize.title": "个性化",