Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 agent_coder
|
d34b5f532f | ||
|
agent_coder
|
0f4b03d89f | ||
|
agent_coder
|
d70b80c449 | ||
|
agent_coder
|
5f02b7c80e |
@@ -257,8 +257,6 @@
|
||||
"Copy": "Copy",
|
||||
"Copy to space": "Copy to space",
|
||||
"Copy chat": "Copy chat",
|
||||
"Dock to sidebar": "Dock to sidebar",
|
||||
"Undock": "Undock",
|
||||
"Copied": "Copied",
|
||||
"Failed to export chat": "Failed to export chat",
|
||||
"Duplicate": "Duplicate",
|
||||
|
||||
@@ -715,8 +715,6 @@
|
||||
"Ask the AI agent anything about your workspace.": "Спросите AI-агента о чём угодно по вашему рабочему пространству.",
|
||||
"Ask the AI agent…": "Спросите AI-агента…",
|
||||
"Copy chat": "Копировать чат",
|
||||
"Dock to sidebar": "Закрепить в боковой панели",
|
||||
"Undock": "Открепить",
|
||||
"Created successfully": "Успешно создано",
|
||||
"Context size / model limit": "Размер контекста / лимит модели",
|
||||
"Context window (tokens)": "Окно контекста (токены)",
|
||||
|
||||
@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
|
||||
import SettingsSidebar from "@/components/settings/settings-sidebar.tsx";
|
||||
import { useAtom } from "jotai";
|
||||
import {
|
||||
APP_NAVBAR_ID,
|
||||
asideStateAtom,
|
||||
desktopSidebarAtom,
|
||||
mobileSidebarAtom,
|
||||
@@ -107,7 +106,6 @@ export default function GlobalAppShell({
|
||||
<AppHeader />
|
||||
</AppShell.Header>
|
||||
<AppShell.Navbar
|
||||
id={APP_NAVBAR_ID}
|
||||
className={classes.navbar}
|
||||
withBorder={false}
|
||||
ref={sidebarRef}
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
import { atomWithWebStorage } from "@/lib/jotai-helper.ts";
|
||||
import { atom } from "jotai";
|
||||
|
||||
// Stable DOM id set on the app-shell navbar (<AppShell.Navbar>). Declared here —
|
||||
// alongside the sidebar atoms — rather than in the chat window so the AI chat
|
||||
// window can reference the navbar by id without importing the app shell (which
|
||||
// would create a shell -> chat-window -> shell import cycle).
|
||||
export const APP_NAVBAR_ID = "app-shell-navbar";
|
||||
|
||||
export const mobileSidebarAtom = atom<boolean>(false);
|
||||
|
||||
export const desktopSidebarAtom = atomWithWebStorage<boolean>(
|
||||
|
||||
@@ -18,18 +18,6 @@ export const aiChatWindowGeomAtom = atomWithStorage<AiChatWindowGeom | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
/**
|
||||
* Whether the AI chat window is docked into the sidebar (page-tree navbar).
|
||||
* Persisted to localStorage so the docked/floating mode survives a full page
|
||||
* reload and close/reopen. `false` = the default floating window. When docked,
|
||||
* the SAME window instance pins itself to the live bounding rect of the app
|
||||
* navbar (see AiChatWindow), overlaying the page tree.
|
||||
*/
|
||||
export const aiChatWindowDockedAtom = atomWithStorage<boolean>(
|
||||
"ai-chat-window-docked",
|
||||
false,
|
||||
);
|
||||
|
||||
/**
|
||||
* The currently selected chat id. `null` means a fresh (not-yet-created) chat:
|
||||
* the server creates the chat row on the first streamed message and echoes its
|
||||
|
||||
@@ -35,35 +35,6 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Docked into the sidebar: the window pins itself to the live navbar rect
|
||||
(position/size supplied inline). It sits flush inside the navbar area, so we
|
||||
drop the floating chrome — no border-radius, drop shadow or user resize — and
|
||||
remove the floating min/max clamps so the size is driven ENTIRELY by the
|
||||
inline navbar rect (which may be narrower than the floating min-width of
|
||||
300px, e.g. the 220px navbar minimum). z-index 105 keeps it above the page
|
||||
tree (navbar 101) but below the header and Mantine overlays. */
|
||||
.docked {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
resize: none;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
/* Drop-zone highlight shown over the navbar bounds while a floating window is
|
||||
dragged onto the sidebar. Sits just above the docked window (106) so the cue
|
||||
is visible; purely decorative, so it never intercepts pointer events. */
|
||||
.dockHighlight {
|
||||
position: fixed;
|
||||
z-index: 106;
|
||||
border: 2px dashed light-dark(var(--mantine-color-blue-5), var(--mantine-color-blue-4));
|
||||
background: light-dark(rgba(34, 139, 230, 0.08), rgba(34, 139, 230, 0.14));
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* When minimized the window collapses to the header only: auto height, no
|
||||
resize. Width/height inline values are overridden. */
|
||||
.minimized {
|
||||
|
||||
@@ -13,29 +13,21 @@ import {
|
||||
IconChevronDown,
|
||||
IconCopy,
|
||||
IconGripVertical,
|
||||
IconLayoutSidebarLeftCollapse,
|
||||
IconLayoutSidebarLeftExpand,
|
||||
IconMinus,
|
||||
IconPlus,
|
||||
IconX,
|
||||
} from "@tabler/icons-react";
|
||||
import { useAtom, useSetAtom } from "jotai";
|
||||
import { useLocation, useMatch } from "react-router-dom";
|
||||
import { useMatch } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
activeAiChatIdAtom,
|
||||
aiChatWindowOpenAtom,
|
||||
aiChatWindowGeomAtom,
|
||||
aiChatWindowDockedAtom,
|
||||
aiChatDraftAtom,
|
||||
selectedAiRoleIdAtom,
|
||||
} from "@/features/ai-chat/atoms/ai-chat-atom.ts";
|
||||
import {
|
||||
APP_NAVBAR_ID,
|
||||
desktopSidebarAtom,
|
||||
mobileSidebarAtom,
|
||||
} from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
import { usePageQuery } from "@/features/page/queries/page-query.ts";
|
||||
import { extractPageSlugId } from "@/lib";
|
||||
import {
|
||||
@@ -54,11 +46,6 @@ import {
|
||||
isHeaderClick,
|
||||
} from "@/features/ai-chat/utils/collapse-helpers.ts";
|
||||
import { selectContextBadge } from "@/features/ai-chat/utils/context-badge.ts";
|
||||
import {
|
||||
isPointWithinRect,
|
||||
isNavbarRectVisible,
|
||||
type NavbarRect,
|
||||
} from "@/features/ai-chat/utils/dock-helpers.ts";
|
||||
import { useClipboard } from "@/hooks/use-clipboard";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import classes from "@/features/ai-chat/components/ai-chat-window.module.css";
|
||||
@@ -125,28 +112,6 @@ function clampGeom(g: {
|
||||
};
|
||||
}
|
||||
|
||||
// Live bounding rect of the app-shell navbar (the page-tree sidebar), by its
|
||||
// stable id. Returns null when the navbar is absent OR collapsed: Mantine
|
||||
// collapses the navbar by translating it off-screen (its right edge lands at or
|
||||
// left of the viewport), so a zero-size or off-screen rect is treated as "no
|
||||
// navbar" — the docked window then falls back to floating instead of pinning to
|
||||
// an off-screen box. Reads the DOM, so call it inside effects / handlers only.
|
||||
function getNavbarRect(): NavbarRect | null {
|
||||
const el = document.getElementById(APP_NAVBAR_ID);
|
||||
if (!el) return null;
|
||||
const r = el.getBoundingClientRect();
|
||||
// Off-screen/collapsed navbar (visibility predicate extracted + unit-tested).
|
||||
if (!isNavbarRectVisible(r)) return null;
|
||||
return { left: r.left, top: r.top, width: r.width, height: r.height };
|
||||
}
|
||||
|
||||
// Whether a viewport point falls within the (visible) navbar bounds. Used to
|
||||
// decide dock-on-drop and undock-on-drag-out. The point-in-rect math is the pure
|
||||
// isPointWithinRect helper (unit-tested); this only supplies the live rect.
|
||||
function isPointerOverNavbar(x: number, y: number): boolean {
|
||||
return isPointWithinRect(x, y, getNavbarRect());
|
||||
}
|
||||
|
||||
/**
|
||||
* Floating, draggable, resizable, minimizable AI chat window. Replaces the
|
||||
* former right-aside `AiChatPanel`: it owns ALL chat orchestration (active
|
||||
@@ -173,43 +138,6 @@ export default function AiChatWindow() {
|
||||
const minimizedRef = useRef(minimized);
|
||||
minimizedRef.current = minimized;
|
||||
|
||||
// Docked-into-sidebar mode (#276). Persisted so it survives reload + reopen.
|
||||
// When docked the SAME window instance pins itself to the navbar rect below.
|
||||
const [docked, setDocked] = useAtom(aiChatWindowDockedAtom);
|
||||
// Mirror for the useCallback([]) drag handlers (same reason as minimizedRef).
|
||||
const dockedRef = useRef(docked);
|
||||
dockedRef.current = docked;
|
||||
// Live navbar rect the docked window is pinned to; synced before paint by the
|
||||
// layout effect below. null = navbar absent/collapsed -> floating fallback.
|
||||
const [dockRect, setDockRect] = useState<NavbarRect | null>(null);
|
||||
// While dragging a FLOATING window over the navbar: show the drop-zone hint.
|
||||
const [dockHint, setDockHint] = useState(false);
|
||||
// Live window position during a drag. Normally the drag is fully imperative
|
||||
// (el.style updated per mousemove, no re-render — matching the pre-#276
|
||||
// behavior), so this stays null. It is set ONLY at a navbar-boundary crossing:
|
||||
// that crossing already forces a re-render (dockHint flips), which would
|
||||
// otherwise re-apply the committed geom and snap the box back for a frame — so
|
||||
// we hand the render the live position at that instant instead. Cleared on drop.
|
||||
const [dragPos, setDragPos] = useState<{ left: number; top: number } | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
// Subscribed (read-only) so this component re-renders — and the dockRect-sync
|
||||
// effect below re-runs — when the sidebar is collapsed/expanded via the header
|
||||
// toggle. Mantine collapses the navbar with a transform (width/border-box
|
||||
// unchanged), so the navbar's ResizeObserver never fires; these deps + the
|
||||
// navbar `transitionend` listener are what re-measure the rect on toggle.
|
||||
const [desktopSidebarOpen] = useAtom(desktopSidebarAtom);
|
||||
const [mobileSidebarOpen] = useAtom(mobileSidebarAtom);
|
||||
|
||||
// Dock mode is only EFFECTIVE when a navbar rect is available. When docked but
|
||||
// the navbar is absent/collapsed (dockRect === null) the window falls back to
|
||||
// the floating look, so effects gated on "is docked" must use this — not the
|
||||
// raw `docked` flag — or a fallback-floating window would behave half-docked.
|
||||
const useDock = docked && dockRect !== null;
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
const winRef = useRef<HTMLDivElement>(null);
|
||||
// Live window geometry (position + size); persisted to localStorage so a
|
||||
// drag/resize survives a full page reload (and close/reopen). `null` means
|
||||
@@ -397,47 +325,6 @@ export default function AiChatWindow() {
|
||||
setMinimized(false);
|
||||
}, [windowOpen]);
|
||||
|
||||
// While docked, keep the window pinned to the navbar's LIVE rect. useLayoutEffect
|
||||
// (not useEffect) so dockRect is measured/committed before the browser paints,
|
||||
// avoiding a first-frame jump. Re-measures on: navbar size changes (manual
|
||||
// sidebar resize -> ResizeObserver), viewport resize (window `resize`), and
|
||||
// route changes that swap the navbar width (space <-> shared/global sidebar are
|
||||
// 300px vs sidebarWidth -> re-run on location.pathname). If the navbar is
|
||||
// absent/collapsed, getNavbarRect() returns null and the render falls back to
|
||||
// the floating look (the window does NOT vanish).
|
||||
useLayoutEffect(() => {
|
||||
if (!windowOpen || !docked) return;
|
||||
const sync = () => setDockRect(getNavbarRect());
|
||||
sync();
|
||||
const navbar = document.getElementById(APP_NAVBAR_ID);
|
||||
let ro: ResizeObserver | null = null;
|
||||
if (navbar) {
|
||||
ro = new ResizeObserver(sync);
|
||||
ro.observe(navbar);
|
||||
// Collapsing/expanding the sidebar translates the navbar off-screen WITHOUT
|
||||
// changing its width/border-box, so the ResizeObserver never fires and the
|
||||
// effect's initial sync() may measure mid-transition (stale). Re-measure at
|
||||
// transitionend so getNavbarRect() sees the final position: null once the
|
||||
// navbar is translated off (right <= 0) -> fall back to floating; the real
|
||||
// rect once it slides back -> re-dock. The sidebar-state deps below force
|
||||
// this effect (and the immediate sync) to re-run on each toggle, covering
|
||||
// the reduced-motion case where no transition -> no transitionend.
|
||||
navbar.addEventListener("transitionend", sync);
|
||||
}
|
||||
window.addEventListener("resize", sync);
|
||||
return () => {
|
||||
ro?.disconnect();
|
||||
navbar?.removeEventListener("transitionend", sync);
|
||||
window.removeEventListener("resize", sync);
|
||||
};
|
||||
}, [
|
||||
windowOpen,
|
||||
docked,
|
||||
location.pathname,
|
||||
desktopSidebarOpen,
|
||||
mobileSidebarOpen,
|
||||
]);
|
||||
|
||||
// Auto-collapse the window into its header as soon as the user interacts with
|
||||
// anything outside it (clicks the page/editor). Armed ONLY while the window is
|
||||
// open and expanded, so it never fires repeatedly and never collapses on the
|
||||
@@ -446,12 +333,7 @@ export default function AiChatWindow() {
|
||||
// (shouldCollapseOnOutsidePointer) prevent false collapses from clicks inside
|
||||
// the window or inside Mantine portals (kebab menu, delete-confirm modal).
|
||||
useEffect(() => {
|
||||
// Disabled while EFFECTIVELY docked: a docked window intentionally overlays
|
||||
// the page tree, so a click on the surrounding page must NOT auto-collapse
|
||||
// it. Gated on useDock (not raw `docked`) so a fallback-floating window
|
||||
// (docked but navbar absent/collapsed) still auto-collapses like a normal
|
||||
// floating window.
|
||||
if (!windowOpen || minimized || useDock) return;
|
||||
if (!windowOpen || minimized) return;
|
||||
const onPointerDown = (e: MouseEvent): void => {
|
||||
if (shouldCollapseOnOutsidePointer(e.target, winRef.current)) {
|
||||
setMinimized(true);
|
||||
@@ -459,18 +341,13 @@ export default function AiChatWindow() {
|
||||
};
|
||||
document.addEventListener("mousedown", onPointerDown, true);
|
||||
return () => document.removeEventListener("mousedown", onPointerDown, true);
|
||||
}, [windowOpen, minimized, useDock]);
|
||||
}, [windowOpen, minimized]);
|
||||
|
||||
// Persist the user's resize into state so it survives close/reopen. Skipped
|
||||
// while minimized so the collapsed (auto) height is never captured. The
|
||||
// equality guard avoids an update loop.
|
||||
useEffect(() => {
|
||||
// Disabled while EFFECTIVELY docked: in dock mode the size is driven by the
|
||||
// navbar rect, not a user resize, so we must not capture the navbar-sized box
|
||||
// into the persisted floating geom (it would clobber the remembered floating
|
||||
// size). Gated on useDock so a fallback-floating window (docked but navbar
|
||||
// absent) still persists user resizes like a normal floating window.
|
||||
if (!windowOpen || minimized || useDock) return;
|
||||
if (!windowOpen || minimized) return;
|
||||
const el = winRef.current;
|
||||
// `geom` is in the deps so this re-runs once geometry is settled and the
|
||||
// window is actually rendered (on the first open `geom` is still null on the
|
||||
@@ -488,30 +365,18 @@ export default function AiChatWindow() {
|
||||
});
|
||||
ro.observe(el);
|
||||
return () => ro.disconnect();
|
||||
}, [windowOpen, minimized, useDock, geom !== null]);
|
||||
}, [windowOpen, minimized, geom !== null]);
|
||||
|
||||
const startDrag = useCallback((e: React.MouseEvent): void => {
|
||||
// Ignore drags that originate on a button (dock/minimize/close/new chat).
|
||||
// Ignore drags that originate on a button (minimize/close/new chat).
|
||||
if ((e.target as HTMLElement).closest("button")) return;
|
||||
const el = winRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const sx = e.clientX;
|
||||
const sy = e.clientY;
|
||||
// Starting position: the element's current inline left/top, whether it was
|
||||
// placed by the floating geom or pinned to the navbar rect (both render as
|
||||
// "<n>px"). getBoundingClientRect would work too, but the inline values keep
|
||||
// the drag math identical to the pre-#276 floating behavior.
|
||||
const ol = parseFloat(el.style.left) || 0;
|
||||
const ot = parseFloat(el.style.top) || 0;
|
||||
// Freeze the box size for the drag: a docked window keeps its navbar size
|
||||
// while being pulled out, a floating window keeps its own size.
|
||||
const dragW = el.offsetWidth;
|
||||
const dragH = el.offsetHeight;
|
||||
|
||||
// Latch for the drop-zone hint so setState fires only when the pointer
|
||||
// actually crosses the navbar boundary, not on every mousemove.
|
||||
let overNavbar = false;
|
||||
|
||||
const move = (ev: MouseEvent): void => {
|
||||
let nl = ol + (ev.clientX - sx);
|
||||
@@ -520,58 +385,20 @@ export default function AiChatWindow() {
|
||||
// with position: fixed) with an 8px margin.
|
||||
nl = Math.max(
|
||||
EDGE_MARGIN,
|
||||
Math.min(nl, window.innerWidth - dragW - EDGE_MARGIN),
|
||||
Math.min(nl, window.innerWidth - el.offsetWidth - EDGE_MARGIN),
|
||||
);
|
||||
nt = Math.max(
|
||||
EDGE_MARGIN,
|
||||
Math.min(nt, window.innerHeight - dragH - EDGE_MARGIN),
|
||||
Math.min(nt, window.innerHeight - el.offsetHeight - EDGE_MARGIN),
|
||||
);
|
||||
el.style.left = `${nl}px`;
|
||||
el.style.top = `${nt}px`;
|
||||
// Drop-zone highlight: only meaningful when dragging a FLOATING window in
|
||||
// to dock it (a docked window is already over the navbar).
|
||||
if (!dockedRef.current) {
|
||||
const nowOver = isPointerOverNavbar(ev.clientX, ev.clientY);
|
||||
if (nowOver !== overNavbar) {
|
||||
overNavbar = nowOver;
|
||||
// This re-render would re-apply the committed geom; hand it the live
|
||||
// position so the box does not snap back for a frame.
|
||||
setDragPos({ left: nl, top: nt });
|
||||
setDockHint(nowOver);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const up = (ev: MouseEvent): void => {
|
||||
document.removeEventListener("mousemove", move);
|
||||
document.removeEventListener("mouseup", up);
|
||||
document.body.style.userSelect = "";
|
||||
setDragPos(null);
|
||||
setDockHint(false);
|
||||
const overNavbarNow = isPointerOverNavbar(ev.clientX, ev.clientY);
|
||||
|
||||
if (dockedRef.current) {
|
||||
// Docked window: releasing OUTSIDE the navbar pops it out as a floating
|
||||
// window at the drop point (clamped to the viewport). Released over the
|
||||
// navbar -> stays docked (a header click is a no-op here). The response
|
||||
// stream is untouched — only the mode flag / geom change.
|
||||
if (!overNavbarNow) {
|
||||
const el2 = winRef.current;
|
||||
const dropLeft = el2 ? parseFloat(el2.style.left) || 0 : 0;
|
||||
const dropTop = el2 ? parseFloat(el2.style.top) || 0 : 0;
|
||||
setGeom((prev) =>
|
||||
clampGeom({
|
||||
...(prev ?? computeInitialGeom()),
|
||||
left: dropLeft,
|
||||
top: dropTop,
|
||||
}),
|
||||
);
|
||||
setDocked(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Floating window.
|
||||
// Treat a near-zero-movement press as a click (not a drag). When the
|
||||
// window is minimized, a header click expands it; nothing to persist
|
||||
// because the position did not change. minimizedRef avoids the stale
|
||||
@@ -583,13 +410,6 @@ export default function AiChatWindow() {
|
||||
setMinimized(false);
|
||||
return;
|
||||
}
|
||||
// Released over the navbar -> dock. The layout effect then pins the window
|
||||
// to the navbar rect; the last floating geom is left untouched so a later
|
||||
// undock/close restores the remembered floating placement.
|
||||
if (overNavbarNow) {
|
||||
setDocked(true);
|
||||
return;
|
||||
}
|
||||
const el2 = winRef.current;
|
||||
// Persist the final position back into state (preserving the size) so
|
||||
// re-renders keep it.
|
||||
@@ -612,20 +432,6 @@ export default function AiChatWindow() {
|
||||
e.preventDefault();
|
||||
}, []);
|
||||
|
||||
// Dock/undock via the header button. Docking pins the window to the navbar;
|
||||
// undocking restores the floating window at its last remembered geom. On
|
||||
// undock we re-clamp that geom to the current viewport (matching drag-undock's
|
||||
// clampGeom) so a viewport shrink while docked can't leave the popped-out
|
||||
// window partly off-screen. The chat thread stays mounted across the toggle,
|
||||
// so a live stream is intact. dockedRef gives the live value inside this
|
||||
// useCallback([]) handler.
|
||||
const toggleDock = useCallback((): void => {
|
||||
if (dockedRef.current) {
|
||||
setGeom((prev) => (prev ? clampGeom(prev) : prev));
|
||||
}
|
||||
setDocked((d) => !d);
|
||||
}, [setDocked, setGeom]);
|
||||
|
||||
// Just toggle the flag. The `.minimized` CSS handles the collapsed height and
|
||||
// disables resize, and `.minimized .content` hides the body while keeping
|
||||
// ChatThread mounted (so an in-flight stream is not aborted).
|
||||
@@ -635,45 +441,17 @@ export default function AiChatWindow() {
|
||||
|
||||
if (!windowOpen || !geom) return null;
|
||||
|
||||
// `useDock` (computed above) is the EFFECTIVE dock state: docked AND a navbar
|
||||
// rect is available. If the navbar is absent/collapsed we keep the persisted
|
||||
// `docked` flag but render the floating look so the window never vanishes (it
|
||||
// re-docks once the navbar reappears — see the layout effect above). Minimize
|
||||
// is suppressed while actually docked.
|
||||
const showMinimized = minimized && !useDock;
|
||||
|
||||
// Position/size of the window this frame. `dragPos` (set only at a mid-drag
|
||||
// navbar-boundary crossing) overrides the committed position so the box does
|
||||
// not snap back for a frame when that crossing forces a re-render.
|
||||
const boxStyle = dockRect && useDock
|
||||
? {
|
||||
left: dockRect.left,
|
||||
top: dockRect.top,
|
||||
width: dockRect.width,
|
||||
height: dockRect.height,
|
||||
}
|
||||
: {
|
||||
return (
|
||||
<div
|
||||
ref={winRef}
|
||||
className={`${classes.window}${minimized ? ` ${classes.minimized}` : ""}`}
|
||||
style={{
|
||||
left: geom.left,
|
||||
top: geom.top,
|
||||
width: geom.width,
|
||||
// Height omitted when minimized so the `.minimized` CSS auto-height wins.
|
||||
height: showMinimized ? undefined : geom.height,
|
||||
};
|
||||
const style = dragPos
|
||||
? { ...boxStyle, left: dragPos.left, top: dragPos.top }
|
||||
: boxStyle;
|
||||
|
||||
// Drop-zone highlight over the navbar bounds while dragging a floating window
|
||||
// onto the sidebar. Rendered as a viewport-fixed sibling overlay (not inside
|
||||
// the moving window), so its position is independent of the drag.
|
||||
const hintRect = dockHint ? getNavbarRect() : null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={winRef}
|
||||
className={`${classes.window}${showMinimized ? ` ${classes.minimized}` : ""}${useDock ? ` ${classes.docked}` : ""}`}
|
||||
style={style}
|
||||
height: minimized ? undefined : geom.height,
|
||||
}}
|
||||
>
|
||||
{/* drag bar / header. Mouse users expand a minimized window by clicking
|
||||
anywhere on the bar (the click-vs-drag logic in startDrag, which
|
||||
@@ -693,11 +471,11 @@ export default function AiChatWindow() {
|
||||
is a plain, non-focusable label. */}
|
||||
<span
|
||||
className={classes.title}
|
||||
role={showMinimized ? "button" : undefined}
|
||||
tabIndex={showMinimized ? 0 : undefined}
|
||||
aria-label={showMinimized ? t("Expand") : undefined}
|
||||
role={minimized ? "button" : undefined}
|
||||
tabIndex={minimized ? 0 : undefined}
|
||||
aria-label={minimized ? t("Expand") : undefined}
|
||||
onKeyDown={
|
||||
showMinimized
|
||||
minimized
|
||||
? (event) => {
|
||||
if (event.key === "Enter" || event.key === " ") {
|
||||
event.preventDefault();
|
||||
@@ -753,39 +531,15 @@ export default function AiChatWindow() {
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{/* Dock/undock toggle. Effectively docked -> "Undock" (expand icon) pops
|
||||
the window back out to floating; floating -> "Dock to sidebar"
|
||||
(collapse icon) pins it into the navbar. The LABEL/icon reflect the
|
||||
EFFECTIVE state (useDock), consistent with the Minimize gate: when
|
||||
docked but the navbar is absent/collapsed the window renders floating,
|
||||
so an "Undock" label there would misdescribe a floating window. The
|
||||
action still toggles the raw `docked` atom. */}
|
||||
<button
|
||||
type="button"
|
||||
className={classes.headerBtn}
|
||||
title={useDock ? t("Undock") : t("Dock to sidebar")}
|
||||
aria-label={useDock ? t("Undock") : t("Dock to sidebar")}
|
||||
onClick={toggleDock}
|
||||
title={t("Minimize")}
|
||||
aria-label={t("Minimize")}
|
||||
onClick={toggleMinimize}
|
||||
>
|
||||
{useDock ? (
|
||||
<IconLayoutSidebarLeftExpand size={14} />
|
||||
) : (
|
||||
<IconLayoutSidebarLeftCollapse size={14} />
|
||||
)}
|
||||
<IconMinus size={14} />
|
||||
</button>
|
||||
{/* Minimize (collapse to header) makes no sense while docked — the
|
||||
window fills the navbar — so it is hidden in dock mode. */}
|
||||
{!useDock && (
|
||||
<button
|
||||
type="button"
|
||||
className={classes.headerBtn}
|
||||
title={t("Minimize")}
|
||||
aria-label={t("Minimize")}
|
||||
onClick={toggleMinimize}
|
||||
>
|
||||
<IconMinus size={14} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className={classes.headerBtn}
|
||||
@@ -887,29 +641,12 @@ export default function AiChatWindow() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* resize affordance icon (drawn manually; native resizer is hidden).
|
||||
Hidden while docked — the docked size follows the navbar, not a manual
|
||||
resize. */}
|
||||
{!showMinimized && !useDock && (
|
||||
{/* resize affordance icon (drawn manually; native resizer is hidden) */}
|
||||
{!minimized && (
|
||||
<span className={classes.resizeHandle}>
|
||||
<IconArrowsDiagonal size={12} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{/* Drop-zone highlight over the navbar while dragging a floating window in
|
||||
to dock it. Sibling of the window (position: fixed) so it tracks the
|
||||
navbar bounds, not the moving window. */}
|
||||
{hintRect && (
|
||||
<div
|
||||
className={classes.dockHighlight}
|
||||
style={{
|
||||
left: hintRect.left,
|
||||
top: hintRect.top,
|
||||
width: hintRect.width,
|
||||
height: hintRect.height,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import {
|
||||
isPointWithinRect,
|
||||
isNavbarRectVisible,
|
||||
type NavbarRect,
|
||||
} from "./dock-helpers.ts";
|
||||
|
||||
const NAVBAR: NavbarRect = { left: 0, top: 45, width: 300, height: 800 };
|
||||
|
||||
describe("isPointWithinRect", () => {
|
||||
it("returns true for a point inside the navbar", () => {
|
||||
expect(isPointWithinRect(150, 400, NAVBAR)).toBe(true);
|
||||
});
|
||||
|
||||
it("treats the boundary edges as inside (drop exactly on the edge docks)", () => {
|
||||
// Top-left corner and bottom-right corner are both inclusive.
|
||||
expect(isPointWithinRect(0, 45, NAVBAR)).toBe(true);
|
||||
expect(isPointWithinRect(300, 845, NAVBAR)).toBe(true);
|
||||
});
|
||||
|
||||
it("returns false for a point in the content area (to the right)", () => {
|
||||
expect(isPointWithinRect(500, 400, NAVBAR)).toBe(false);
|
||||
});
|
||||
|
||||
it("returns false above the navbar (in the header band)", () => {
|
||||
expect(isPointWithinRect(150, 10, NAVBAR)).toBe(false);
|
||||
});
|
||||
|
||||
it("returns false when the navbar rect is null (absent/collapsed)", () => {
|
||||
expect(isPointWithinRect(150, 400, null)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("isNavbarRectVisible", () => {
|
||||
it("returns true for a normal on-screen navbar rect", () => {
|
||||
expect(isNavbarRectVisible({ width: 300, height: 800, right: 300 })).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it("returns false for a zero-size rect (width or height 0)", () => {
|
||||
expect(isNavbarRectVisible({ width: 0, height: 800, right: 300 })).toBe(
|
||||
false,
|
||||
);
|
||||
expect(isNavbarRectVisible({ width: 300, height: 0, right: 300 })).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
it("returns false when the navbar is translated off-screen (right <= 0)", () => {
|
||||
expect(isNavbarRectVisible({ width: 300, height: 800, right: 0 })).toBe(
|
||||
false,
|
||||
);
|
||||
expect(isNavbarRectVisible({ width: 300, height: 800, right: -50 })).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -1,48 +0,0 @@
|
||||
// Pure geometry helper for the AI chat window dock/undock decision (#276). Kept
|
||||
// free of React and the DOM so it can be unit-tested in isolation (see
|
||||
// dock-helpers.test.ts). The DOM-reading getNavbarRect() lives in the window
|
||||
// component; this is only the point-in-rect math that decides dock-on-drop and
|
||||
// undock-on-drag-out from the measured navbar rect.
|
||||
|
||||
export type NavbarRect = {
|
||||
left: number;
|
||||
top: number;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Whether a viewport point (x, y) falls within `rect`. Edges are inclusive so a
|
||||
* drop exactly on the navbar boundary counts as "over the navbar". Returns false
|
||||
* when the rect is null (navbar absent/collapsed) so the caller falls back to the
|
||||
* floating behavior.
|
||||
*/
|
||||
export function isPointWithinRect(
|
||||
x: number,
|
||||
y: number,
|
||||
rect: NavbarRect | null,
|
||||
): boolean {
|
||||
if (!rect) return false;
|
||||
return (
|
||||
x >= rect.left &&
|
||||
x <= rect.left + rect.width &&
|
||||
y >= rect.top &&
|
||||
y <= rect.top + rect.height
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether a measured navbar rect represents a VISIBLE navbar. Mantine collapses
|
||||
* the navbar by translating it off-screen (its right edge lands at or left of the
|
||||
* viewport) without changing its width/border-box, so a zero-size or off-screen
|
||||
* rect means "no navbar" — the docked window then falls back to floating instead
|
||||
* of pinning to an invisible box. Pure (no DOM) so it can be unit-tested; the
|
||||
* DOM-reading getNavbarRect() in the window component supplies the rect.
|
||||
*/
|
||||
export function isNavbarRectVisible(r: {
|
||||
width: number;
|
||||
height: number;
|
||||
right: number;
|
||||
}): boolean {
|
||||
return !(r.width === 0 || r.height === 0 || r.right <= 0);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import {
|
||||
buildLayoutCandidates,
|
||||
getSuggestionItems,
|
||||
} from "./menu-items";
|
||||
|
||||
/**
|
||||
* `buildLayoutCandidates` maps a slash query across physical keyboard layouts
|
||||
* (RU ЙЦУКЕН <-> US QWERTY) so the menu matches Latin item titles/terms even
|
||||
* when typed with the wrong layout active, while keeping the original query so
|
||||
* genuine Cyrillic search terms still match. See bug #283.
|
||||
*/
|
||||
describe("buildLayoutCandidates", () => {
|
||||
it("remaps a RU-layout query to its US-QWERTY equivalent (сщву -> code)", () => {
|
||||
expect(buildLayoutCandidates("сщву")).toContain("code");
|
||||
});
|
||||
|
||||
it("remaps a US-layout query to its RU-ЙЦУКЕН equivalent (cyjcrf -> сноска)", () => {
|
||||
expect(buildLayoutCandidates("cyjcrf")).toContain("сноска");
|
||||
});
|
||||
|
||||
it("always includes the original query", () => {
|
||||
expect(buildLayoutCandidates("сщву")).toContain("сщву");
|
||||
expect(buildLayoutCandidates("cyjcrf")).toContain("cyjcrf");
|
||||
expect(buildLayoutCandidates("сноска")).toContain("сноска");
|
||||
});
|
||||
|
||||
it("leaves a query with no mappable keys as a single-element set", () => {
|
||||
// Digits are on neither layout map, so both remaps are no-ops and de-dup
|
||||
// back to one entry.
|
||||
expect(buildLayoutCandidates("123")).toEqual(["123"]);
|
||||
});
|
||||
});
|
||||
|
||||
/** Helper: flatten grouped suggestion items to a flat list of titles. */
|
||||
const titles = (groups: ReturnType<typeof getSuggestionItems>): string[] =>
|
||||
Object.values(groups).flatMap((items) => items.map((i) => i.title));
|
||||
|
||||
describe("getSuggestionItems layout-aware matching", () => {
|
||||
it("finds Code when 'code' is typed in RU layout (/сщву)", () => {
|
||||
expect(titles(getSuggestionItems({ query: "сщву" }))).toContain("Code");
|
||||
});
|
||||
|
||||
it("still finds Code for the plain /code query", () => {
|
||||
expect(titles(getSuggestionItems({ query: "code" }))).toContain("Code");
|
||||
});
|
||||
|
||||
it("still matches genuine Cyrillic search terms (/сноска -> Footnote)", () => {
|
||||
expect(titles(getSuggestionItems({ query: "сноска" }))).toContain(
|
||||
"Footnote",
|
||||
);
|
||||
});
|
||||
|
||||
it("finds Footnote when 'сноска' is typed in EN layout (/cyjcrf)", () => {
|
||||
expect(titles(getSuggestionItems({ query: "cyjcrf" }))).toContain(
|
||||
"Footnote",
|
||||
);
|
||||
});
|
||||
|
||||
it("does not surface Footnote for a short wrong-layout query (/cy)", () => {
|
||||
// "cy" EN->RU remaps to "сн", a substring of the "сноска" searchTerm, but
|
||||
// the gate blocks it because the remapped candidate is < 3 chars.
|
||||
expect(titles(getSuggestionItems({ query: "cy" }))).not.toContain(
|
||||
"Footnote",
|
||||
);
|
||||
});
|
||||
|
||||
it("does not surface Footnote for a single-char wrong-layout query (/b)", () => {
|
||||
// "b" EN->RU remaps to "и", a substring of the "примечание" searchTerm, but
|
||||
// the gate blocks it because the remapped candidate is < 3 chars.
|
||||
expect(titles(getSuggestionItems({ query: "b" }))).not.toContain(
|
||||
"Footnote",
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -35,6 +35,7 @@ import { PAGE_EMBED_PICKER_EVENT } from "@/features/editor/components/page-embed
|
||||
import {
|
||||
CommandProps,
|
||||
SlashMenuGroupedItemsType,
|
||||
SlashMenuItemType,
|
||||
} from "@/features/editor/components/slash-menu/types";
|
||||
import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
|
||||
import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
|
||||
@@ -835,6 +836,49 @@ export function isHtmlEmbedFeatureEnabled(): boolean {
|
||||
}
|
||||
}
|
||||
|
||||
// Russian ЙЦУКЕН -> US QWERTY by physical key position (lowercase; callers
|
||||
// lowercase first). Lets the slash menu match Latin item titles/terms even when
|
||||
// a command is typed with the wrong keyboard layout active (e.g. "/сщву" while
|
||||
// ЙЦУКЕН is on physically types the same keys as "/code").
|
||||
const RU_TO_EN_LAYOUT: Record<string, string> = {
|
||||
й: "q", ц: "w", у: "e", к: "r", е: "t", н: "y", г: "u", ш: "i", щ: "o",
|
||||
з: "p", х: "[", ъ: "]",
|
||||
ф: "a", ы: "s", в: "d", а: "f", п: "g", р: "h", о: "j", л: "k", д: "l",
|
||||
ж: ";", э: "'",
|
||||
я: "z", ч: "x", с: "c", м: "v", и: "b", т: "n", ь: "m", б: ",", ю: ".",
|
||||
ё: "`",
|
||||
};
|
||||
// Inverse map: US QWERTY -> Russian ЙЦУКЕН by physical key position. Handles the
|
||||
// mirror case (e.g. "cyjcrf" typed with EN layout on == "сноска" == Footnote).
|
||||
const EN_TO_RU_LAYOUT: Record<string, string> = Object.fromEntries(
|
||||
Object.entries(RU_TO_EN_LAYOUT).map(([ru, en]) => [en, ru]),
|
||||
);
|
||||
|
||||
function translitByLayout(text: string, map: Record<string, string>): string {
|
||||
let out = "";
|
||||
for (const ch of text) out += map[ch] ?? ch;
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the list of search strings to try for a given query: the original
|
||||
* query first, followed by its RU->EN and EN->RU physical-layout remappings.
|
||||
* Keeping the original first preserves genuine Cyrillic search terms (e.g.
|
||||
* "сноска"/"примечание" for Footnote) and lets callers treat the original
|
||||
* differently from the remapped candidates. De-duplication only collapses the
|
||||
* list to one element when nothing is remappable (e.g. digits/spaces), so a
|
||||
* typical ASCII query still yields multiple candidates.
|
||||
*/
|
||||
export function buildLayoutCandidates(search: string): string[] {
|
||||
return [
|
||||
...new Set([
|
||||
search,
|
||||
translitByLayout(search, RU_TO_EN_LAYOUT),
|
||||
translitByLayout(search, EN_TO_RU_LAYOUT),
|
||||
]),
|
||||
];
|
||||
}
|
||||
|
||||
export const getSuggestionItems = ({
|
||||
query,
|
||||
excludeItems,
|
||||
@@ -843,6 +887,18 @@ export const getSuggestionItems = ({
|
||||
excludeItems?: Set<string>;
|
||||
}): SlashMenuGroupedItemsType => {
|
||||
const search = query.toLowerCase();
|
||||
const candidates = buildLayoutCandidates(search);
|
||||
// Only the original query is allowed to match via a short substring. Remapped
|
||||
// (wrong-layout) candidates must be at least REMAP_MIN_LEN chars before they
|
||||
// can match, so a 1-2 char ASCII query does not spuriously substring-match
|
||||
// unrelated Cyrillic search terms (e.g. "/cy" -> "сн" hitting "сноска",
|
||||
// "/b" -> "и" hitting "примечание"). buildLayoutCandidates already dedupes
|
||||
// the remaps against the original, so candidates[0] is the original query.
|
||||
const REMAP_MIN_LEN = 3;
|
||||
const [originalCandidate, ...remapped] = candidates;
|
||||
const remappedCandidates = remapped.filter(
|
||||
(candidate) => candidate.length >= REMAP_MIN_LEN,
|
||||
);
|
||||
const filteredGroups: SlashMenuGroupedItemsType = {};
|
||||
const htmlEmbedFeatureEnabled = isHtmlEmbedFeatureEnabled();
|
||||
|
||||
@@ -856,24 +912,42 @@ export const getSuggestionItems = ({
|
||||
return false;
|
||||
};
|
||||
|
||||
const candidateMatchesItem = (
|
||||
candidate: string,
|
||||
item: SlashMenuItemType,
|
||||
description: string,
|
||||
) =>
|
||||
fuzzyMatch(candidate, item.title) ||
|
||||
description.includes(candidate) ||
|
||||
(item.searchTerms != null &&
|
||||
item.searchTerms.some((term: string) => term.includes(candidate)));
|
||||
|
||||
for (const [group, items] of Object.entries(CommandGroups)) {
|
||||
const filteredItems = items.filter((item) => {
|
||||
if (excludeItems?.has(item.title)) return false;
|
||||
// Hide the HTML embed item unless the workspace master toggle is ON.
|
||||
if (item.requiresHtmlEmbedFeature && !htmlEmbedFeatureEnabled)
|
||||
return false;
|
||||
const description = item.description.toLowerCase();
|
||||
return (
|
||||
fuzzyMatch(search, item.title) ||
|
||||
item.description.toLowerCase().includes(search) ||
|
||||
(item.searchTerms &&
|
||||
item.searchTerms.some((term: string) => term.includes(search)))
|
||||
candidateMatchesItem(originalCandidate, item, description) ||
|
||||
remappedCandidates.some((candidate) =>
|
||||
candidateMatchesItem(candidate, item, description),
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
if (filteredItems.length) {
|
||||
const titleMatchesAnyCandidate = (title: string) => {
|
||||
const lower = title.toLowerCase();
|
||||
return (
|
||||
lower.includes(originalCandidate) ||
|
||||
remappedCandidates.some((candidate) => lower.includes(candidate))
|
||||
);
|
||||
};
|
||||
filteredGroups[group] = filteredItems.sort((a, b) => {
|
||||
const aTitle = a.title.toLowerCase().includes(search) ? 0 : 1;
|
||||
const bTitle = b.title.toLowerCase().includes(search) ? 0 : 1;
|
||||
const aTitle = titleMatchesAnyCandidate(a.title) ? 0 : 1;
|
||||
const bTitle = titleMatchesAnyCandidate(b.title) ? 0 : 1;
|
||||
return aTitle - bTitle;
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user