+ {buttons.map((btn, index) => {
+ const IconComp = btn.icon.type === "lucide" ? LUCIDE_ICON_MAP[btn.icon.name] : null;
+ const isChat = ["ask_ai", "translate", "summary"].includes(btn.action.type);
+ const visualType: "Chat" | "Search" | "Tool" = isChat ? "Chat" : btn.action.type === "search" ? "Search" : "Tool";
+
+ return (
+
+ );
+};
+
+export default ButtonsList;
\ No newline at end of file
diff --git a/src/components/Settings/Advanced/components/Selection/index.tsx b/src/components/Settings/Advanced/components/Selection/index.tsx
new file mode 100644
index 00000000..91ec5538
--- /dev/null
+++ b/src/components/Settings/Advanced/components/Selection/index.tsx
@@ -0,0 +1,202 @@
+import { useEffect, useState } from "react";
+import { Sparkles } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { useSelectionStore } from "@/stores/selectionStore";
+import SettingsToggle from "@/components/Settings/SettingsToggle";
+import SettingsItem from "@/components/Settings/SettingsItem";
+import platformAdapter from "@/utils/platformAdapter";
+import { useEnabledServers } from "@/hooks/useEnabledServers";
+import ButtonsList from "./ButtonsList";
+
+/**
+ * Selection toolbar button config types
+ */
+type IconConfig =
+ | { type: "lucide"; name: LucideIconName; color?: string }
+ | { type: "custom"; dataUrl: string; color?: string };
+
+type ActionType =
+ | "search"
+ | "ask_ai"
+ | "translate"
+ | "summary"
+ | "copy"
+ | "speak"
+ | "custom";
+
+type ButtonConfig = {
+ id: string;
+ label: string;
+ icon: IconConfig;
+ action: {
+ type: ActionType;
+ assistantId?: string;
+ assistantServerId?: string;
+ eventName?: string;
+ };
+ // i18n key for built-in labels; if present, render by t(labelKey)
+ labelKey?: string;
+};
+
+type LucideIconName =
+ | "Search"
+ | "Bot"
+ | "Languages"
+ | "FileText"
+ | "Copy"
+ | "Volume2";
+
+
+const DEFAULT_CONFIG: ButtonConfig[] = [
+ {
+ id: "search",
+ label: "搜索",
+ labelKey: "selection.actions.search",
+ icon: { type: "lucide", name: "Search", color: "#6366F1" },
+ action: { type: "search" },
+ },
+ {
+ id: "ask_ai",
+ label: "问答",
+ labelKey: "selection.actions.ask_ai",
+ icon: { type: "lucide", name: "Bot", color: "#0287FF" },
+ action: { type: "ask_ai" },
+ },
+ {
+ id: "translate",
+ label: "翻译",
+ labelKey: "selection.actions.translate",
+ icon: { type: "lucide", name: "Languages", color: "#14B8A6" },
+ action: { type: "translate" },
+ },
+ {
+ id: "summary",
+ label: "总结",
+ labelKey: "selection.actions.summary",
+ icon: { type: "lucide", name: "FileText", color: "#0EA5E9" },
+ action: { type: "summary" },
+ },
+ {
+ id: "copy",
+ label: "复制",
+ labelKey: "selection.actions.copy",
+ icon: { type: "lucide", name: "Copy", color: "#64748B" },
+ action: { type: "copy" },
+ },
+ {
+ id: "speak",
+ label: "朗读",
+ labelKey: "selection.actions.speak",
+ icon: { type: "lucide", name: "Volume2", color: "#F59E0B" },
+ action: { type: "speak" },
+ },
+];
+
+const STORAGE_KEY = "selection_toolbar_config";
+
+/**
+ * Utilities: load/save local toolbar config
+ */
+function loadToolbarConfig(): ButtonConfig[] {
+ try {
+ const raw = localStorage.getItem(STORAGE_KEY);
+ if (!raw) return DEFAULT_CONFIG;
+ const parsed = JSON.parse(raw);
+ if (Array.isArray(parsed) && parsed.length > 0)
+ return parsed as ButtonConfig[];
+ return DEFAULT_CONFIG;
+ } catch {
+ return DEFAULT_CONFIG;
+ }
+}
+function saveToolbarConfig(cfg: ButtonConfig[]) {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(cfg));
+}
+
+/**
+ * Selection settings panel: toolbar buttons with sorting and assistant mapping
+ */
+const SelectionSettings = () => {
+ const { t } = useTranslation();
+ // Reactive service and assistant list
+ const { enabledServers: serverList } = useEnabledServers();
+
+ const selectionEnabled = useSelectionStore((state) => state.selectionEnabled);
+ const iconsOnly = useSelectionStore((state) => state.iconsOnly);
+ const setIconsOnly = useSelectionStore((state) => state.setIconsOnly);
+
+ useEffect(() => {
+ useSelectionStore.getState().initSync();
+ }, []);
+
+ // Initialize from global store; write back on change for multi-window sync
+ const toolbarConfig = useSelectionStore((s) => s.toolbarConfig);
+ const setToolbarConfig = useSelectionStore((s) => s.setToolbarConfig);
+
+ const [buttons, setButtons] = useState onDragStart(index)}
+ onDragOver={(e) => e.preventDefault()}
+ onDrop={() => onDrop(index)}
+ >
+
+ );
+ })}
+
+ 
+ )}
+ {btn.labelKey ? t(btn.labelKey) : btn.label}
+
+ {visualType}
+
+
+
+
+ {isChat && (
+ <>
+
+
+ {(() => {
+ const sid = btn.action.assistantServerId;
+ const list = (sid && assistantByServer[sid]) || [];
+ const loading = !!(sid && assistantLoadingByServer[sid]);
+ return (
+
+ );
+ })()}
+
+ )}
+
+
+
+ {
+ try {
+ await platformAdapter.invokeBackend("set_selection_enabled", {
+ enabled: value,
+ });
+ } catch (e) {
+ console.error("set_selection_enabled invoke failed:", e);
+ }
+ }}
+ label={t("settings.ai.toggle")}
+ />
+
+
+ {selectionEnabled && (
+
+ );
+};
+
+export default SelectionSettings;
diff --git a/src/components/Settings/Advanced/index.tsx b/src/components/Settings/Advanced/index.tsx
index c3d3a1b6..4a7f64f6 100644
--- a/src/components/Settings/Advanced/index.tsx
+++ b/src/components/Settings/Advanced/index.tsx
@@ -10,6 +10,7 @@ import {
Unplug,
} from "lucide-react";
import { useMount } from "ahooks";
+import { isNil } from "lodash-es";
import Shortcuts from "./components/Shortcuts";
import SettingsItem from "../SettingsItem";
@@ -20,7 +21,7 @@ import SettingsInput from "@/components//Settings/SettingsInput";
import platformAdapter from "@/utils/platformAdapter";
import UpdateSettings from "./components/UpdateSettings";
import SettingsToggle from "../SettingsToggle";
-import { isNil } from "lodash-es";
+import SelectionSettings from "./components/Selection";
const Advanced = () => {
const { t } = useTranslation();
@@ -189,6 +190,8 @@ const Advanced = () => {
})}
+
+
+
+ {t("selection.title")}
+
+
+ {
+ // Update local store
+ setIconsOnly(value);
+ }}
+ label={t("selection.display.iconsOnlyLabel")}
+ />
+
+
+ )}
+
+
+ );
+ };
+
+ // Component: speak controls
+ const SpeakControls = () => {
+ return (
+
+ {text || t("selection.noText")}
+
+ {copied && (
+
+
+ {t("selection.copied")}
+
+
+ )}
+
+
+
+
+
+ );
+ };
+
+ return (
+ {
+ if (e.target === containerRef.current && !isSpeaking) {
+ close();
+ }
+ }}
+ className={clsx(
+ "m-0 p-0 w-full h-full overflow-hidden",
+ "text-[13px] select-none",
+ "bg-white dark:bg-[#1E293B]",
+ "text-[#111] dark:text-[#ddd]",
+ "rounded-xl",
+ "transition-all duration-150",
+ {
+ "translate-y-0": visible && !animatingOut,
+ "translate-y-1": !visible || animatingOut,
+ }
+ )}
+ >
+
+ );
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index adb3196a..7479f07f 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -7,6 +7,7 @@ import SettingsPage from "@/pages/settings/index";
import StandaloneChat from "@/pages/chat/index";
import WebPage from "@/pages/web/index";
import CheckPage from "@/pages/check/index";
+import SelectionWindow from "@/pages/selection/index";
const routerOptions = {
basename: "/",
@@ -27,6 +28,7 @@ export const router = createBrowserRouter(
{ path: "/ui/settings", element:
+
+
+
+
+