diff --git a/apps/nextjs/src/app/[locale]/manage/assistant/_components/assistant-configuration.module.css b/apps/nextjs/src/app/[locale]/manage/assistant/_components/assistant-configuration.module.css index 1aa50dd4d..7f7d0d672 100644 --- a/apps/nextjs/src/app/[locale]/manage/assistant/_components/assistant-configuration.module.css +++ b/apps/nextjs/src/app/[locale]/manage/assistant/_components/assistant-configuration.module.css @@ -94,7 +94,8 @@ } .securityNote { - max-width: 66ch; + min-width: 0; + flex: 1; } .flowActions { diff --git a/apps/nextjs/src/app/[locale]/manage/assistant/_components/assistant-configuration.tsx b/apps/nextjs/src/app/[locale]/manage/assistant/_components/assistant-configuration.tsx index 61f05fefa..cbda5efe0 100644 --- a/apps/nextjs/src/app/[locale]/manage/assistant/_components/assistant-configuration.tsx +++ b/apps/nextjs/src/app/[locale]/manage/assistant/_components/assistant-configuration.tsx @@ -13,7 +13,6 @@ import { Group, Image, LoadingOverlay, - Modal, Paper, PasswordInput, Select, @@ -31,7 +30,6 @@ import { IconCircleCheck, IconDatabaseSearch, IconKey, - IconLock, IconPlus, IconSearch, IconShieldCheck, @@ -154,7 +152,6 @@ export const AssistantConfiguration = () => { const [modelId, setModelId] = useState(""); const [enabled, setEnabled] = useState(false); const [webSearchEnabled, setWebSearchEnabled] = useState(false); - const [clearCredentialsOpened, setClearCredentialsOpened] = useState(false); useEffect(() => { setProvider(configuration?.provider ?? "openrouter"); @@ -285,27 +282,7 @@ export const AssistantConfiguration = () => { onError: (error) => showErrorNotification({ title: t("notification.error.title"), message: error.message }), }); - const clearCredentials = clientApi.assistant.clearCredentials.useMutation({ - onSuccess: async () => { - setClearCredentialsOpened(false); - setApiKey(""); - setHeaders([]); - setModelId(""); - setEnabled(false); - await Promise.all([ - utils.assistant.getAdminConfiguration.invalidate(), - utils.assistant.discoverModels.invalidate(), - utils.assistant.getAvailability.invalidate(), - ]); - showSuccessNotification({ - title: t("notification.credentialsCleared.title"), - message: t("notification.credentialsCleared.message"), - }); - }, - onError: (error) => showErrorNotification({ title: t("notification.error.title"), message: error.message }), - }); - - const pending = updateConnection.isPending || saveConfiguration.isPending || clearCredentials.isPending; + const pending = updateConnection.isPending || saveConfiguration.isPending; const resetCredentialFlow = () => { setApiKey(""); @@ -419,11 +396,6 @@ export const AssistantConfiguration = () => { {t("serverTools.webSearch.label")} )} - {hasStoredApiKey && ( - }> - {t("overview.keyProtected")} - - )} {configuration?.enabled === false && ( {t("overview.disabled")} @@ -508,15 +480,7 @@ export const AssistantConfiguration = () => { ) } actions={ - - + {credentialFlow === "idle" && ( - - - - ); }; diff --git a/apps/nextjs/src/components/assistant/assistant-panel.module.css b/apps/nextjs/src/components/assistant/assistant-panel.module.css index a834504fd..abda0bf52 100644 --- a/apps/nextjs/src/components/assistant/assistant-panel.module.css +++ b/apps/nextjs/src/components/assistant/assistant-panel.module.css @@ -113,7 +113,7 @@ border-radius: var(--mantine-radius-lg); color: var(--mantine-color-text); background: var(--mantine-color-body); - box-shadow: var(--mantine-shadow-xl); + box-shadow: none; animation: assistant-panel-in 180ms cubic-bezier(0.22, 1, 0.36, 1); } @@ -1310,7 +1310,17 @@ } .composer:has(.composerInput:focus-within) { - box-shadow: inset 0 0 0 2px var(--mantine-color-red-filled); + box-shadow: inset 0 0 0 2px var(--mantine-primary-color-filled); +} + +.floatingPanel .composer { + border-end-start-radius: var(--mantine-radius-lg); + border-end-end-radius: var(--mantine-radius-lg); +} + +.widgetPanel[data-board-widget] .composer { + border-end-start-radius: var(--assistant-widget-radius); + border-end-end-radius: var(--assistant-widget-radius); } .composerDropzone[data-dragging] .composer { diff --git a/apps/nextjs/src/components/assistant/assistant-runtime-provider.spec.ts b/apps/nextjs/src/components/assistant/assistant-runtime-provider.spec.ts index ea0b7d037..44cd03775 100644 --- a/apps/nextjs/src/components/assistant/assistant-runtime-provider.spec.ts +++ b/apps/nextjs/src/components/assistant/assistant-runtime-provider.spec.ts @@ -16,6 +16,7 @@ import { MessagePrimitive, ThreadPrimitive, useAui, + useAuiEvent, useLocalRuntime, } from "@assistant-ui/react"; import { LexicalComposerInput } from "@assistant-ui/react-lexical"; @@ -118,14 +119,25 @@ const SurfaceProbe = ({ id, onReady }: SurfaceProbeProps) => { } as ComponentProps); }; +const LexicalRunFocusProbe = () => { + useAuiEvent("thread.runStart", () => { + queueMicrotask(() => { + document.querySelector('[data-testid="input-b"] [contenteditable="true"]')?.focus(); + }); + }); + return null; +}; + const SurfaceTestAssistant = ({ onReady, onRuntimeReady, allowImages = true, + simulateRunFocus = false, }: { onReady: SurfaceProbeProps["onReady"]; onRuntimeReady: (runtime: AssistantRuntime) => void; allowImages?: boolean; + simulateRunFocus?: boolean; }) => { const runtime = useLocalRuntime(noOpAdapter, { adapters: { attachments: createAttachmentAdapter(allowImages ? "image/png,text/plain" : "text/plain") }, @@ -145,10 +157,14 @@ const SurfaceTestAssistant = ({ { surfaceId: "surface-b" }, createElement(SurfaceProbe, { id: "b", onReady }), ), + simulateRunFocus ? createElement(LexicalRunFocusProbe) : null, ); }; -const renderSurfaceTestAssistant = async ({ allowImages = true }: { allowImages?: boolean } = {}) => { +const renderSurfaceTestAssistant = async ({ + allowImages = true, + simulateRunFocus = false, +}: { allowImages?: boolean; simulateRunFocus?: boolean } = {}) => { const container = document.createElement("div"); containers.push(container); document.body.append(container); @@ -160,6 +176,7 @@ const renderSurfaceTestAssistant = async ({ allowImages = true }: { allowImages? root.render( createElement(SurfaceTestAssistant, { allowImages, + simulateRunFocus, onReady: (id, aui) => clients.set(id, aui), onRuntimeReady: (runtime) => { sharedRuntime = runtime; @@ -334,6 +351,35 @@ describe("AssistantRuntimeProviderWithTools", () => { await act(async () => root.unmount()); }); + test("keeps focus and dashboard scroll on the surface that started the run", async () => { + const { container, root, a } = await renderSurfaceTestAssistant({ simulateRunFocus: true }); + const panelInput = getRequiredComposerInput(container, "input-a"); + const widgetInput = getRequiredComposerInput(container, "input-b"); + const scrollContainer = container; + scrollContainer.scrollTop = 120; + const focusWidget = widgetInput.focus.bind(widgetInput); + const widgetFocus = vi.spyOn(widgetInput, "focus").mockImplementation((options) => { + // jsdom does not implement native focus scrolling, so reproduce the dashboard jump that a + // browser performs when the off-screen widget composer receives programmatic focus. + scrollContainer.scrollTop = 640; + focusWidget(options); + }); + panelInput.focus(); + + act(() => { + a.composer().setText("Send from the floating panel"); + a.composer().send(); + }); + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 0)); + }); + + expect(widgetFocus).toHaveBeenCalled(); + expect(document.activeElement).toBe(panelInput); + expect(scrollContainer.scrollTop).toBe(120); + await act(async () => root.unmount()); + }); + test("adds pasted images only to the active surface composer", async () => { const { container, root, a, b } = await renderSurfaceTestAssistant(); const target = getRequiredComposerInput(container, "input-a"); diff --git a/apps/nextjs/src/components/assistant/assistant-runtime-provider.tsx b/apps/nextjs/src/components/assistant/assistant-runtime-provider.tsx index 42e5342b2..e849c2393 100644 --- a/apps/nextjs/src/components/assistant/assistant-runtime-provider.tsx +++ b/apps/nextjs/src/components/assistant/assistant-runtime-provider.tsx @@ -378,6 +378,42 @@ export const useAssistantComposerSurface = () => { }; const surfaceElements = new Map(); +let lastFocusedSurfaceElement: HTMLElement | null = null; +let lastFocusedSurfaceAt = 0; + +interface AssistantSurfaceScrollPosition { + element: HTMLElement; + left: number; + top: number; +} + +const captureAssistantSurfaceScrollPositions = () => { + const elements = new Set(); + for (const surfaceElement of surfaceElements.values()) { + let element: HTMLElement | null = surfaceElement; + while (element) { + elements.add(element); + element = element.parentElement; + } + } + + return Array.from( + elements, + (element): AssistantSurfaceScrollPosition => ({ + element, + left: element.scrollLeft, + top: element.scrollTop, + }), + ); +}; + +const restoreAssistantSurfaceScrollPositions = (positions: AssistantSurfaceScrollPosition[]) => { + for (const { element, left, top } of positions) { + if (!element.isConnected) continue; + element.scrollLeft = left; + element.scrollTop = top; + } +}; const getSurfaceIdForElement = (element: Element | null) => { if (!element) return null; @@ -461,7 +497,16 @@ const AssistantComposerSurfaceBoundary = ({ children, surfaceId }: PropsWithChil return ( -
+
{ + if (!(event.target instanceof HTMLElement)) return; + lastFocusedSurfaceElement = event.target; + lastFocusedSurfaceAt = performance.now(); + }} + onPasteCapture={handlePasteCapture} + > {children}
@@ -476,19 +521,42 @@ const AssistantComposerSurfaceBoundary = ({ children, surfaceId }: PropsWithChil */ export const AssistantRunFocusPreserver = () => { useAuiEvent("thread.runStart", () => { - const focusedBeforeRun = document.activeElement instanceof HTMLElement ? document.activeElement : null; + const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : null; + // Sending can briefly move focus to while Lexical reconciles the editor. Retain the + // last connected assistant input so the run still belongs to the surface the user submitted. + const recentlyFocusedSurface = performance.now() - lastFocusedSurfaceAt < 1000; + const focusedBeforeRun = + activeElement && activeElement !== document.body + ? activeElement + : recentlyFocusedSurface && lastFocusedSurfaceElement?.isConnected + ? lastFocusedSurfaceElement + : activeElement; const surfaceIdBeforeRun = getSurfaceIdForElement(focusedBeforeRun); + const scrollPositionsBeforeRun = captureAssistantSurfaceScrollPositions(); + let isRestoring = false; const restoreFocus = () => { + if (isRestoring) return; const surfaceIdAfterRun = getSurfaceIdForElement(document.activeElement); - if (!surfaceIdAfterRun || surfaceIdAfterRun === surfaceIdBeforeRun) return; + const movedToAnotherSurface = surfaceIdAfterRun !== null && surfaceIdAfterRun !== surfaceIdBeforeRun; + const leftInitiatingSurface = surfaceIdBeforeRun !== null && surfaceIdAfterRun !== surfaceIdBeforeRun; + if (!movedToAnotherSurface && !leftInitiatingSurface) return; - if (focusedBeforeRun?.isConnected) focusedBeforeRun.focus({ preventScroll: true }); - if ( - getSurfaceIdForElement(document.activeElement) !== surfaceIdBeforeRun && - document.activeElement instanceof HTMLElement - ) { - document.activeElement.blur(); + isRestoring = true; + try { + if (focusedBeforeRun?.isConnected) focusedBeforeRun.focus({ preventScroll: true }); + if ( + getSurfaceIdForElement(document.activeElement) !== surfaceIdBeforeRun && + document.activeElement instanceof HTMLElement + ) { + document.activeElement.blur(); + } + // Focusing the other mounted Lexical composer may already have scrolled the dashboard or + // one of its nested board containers. Put every assistant surface ancestor back before the + // browser paints so a send from the floating panel never jumps to the board widget. + restoreAssistantSurfaceScrollPositions(scrollPositionsBeforeRun); + } finally { + isRestoring = false; } }; diff --git a/apps/nextjs/src/components/assistant/assistant-widget.tsx b/apps/nextjs/src/components/assistant/assistant-widget.tsx index 898023337..e00ee137f 100644 --- a/apps/nextjs/src/components/assistant/assistant-widget.tsx +++ b/apps/nextjs/src/components/assistant/assistant-widget.tsx @@ -1,6 +1,6 @@ "use client"; -import type { ReactNode } from "react"; +import type { CSSProperties, ReactNode } from "react"; import { useCallback, useState } from "react"; import { useAui, useAuiState } from "@assistant-ui/react"; import { ActionIcon, Box, Button, Center, Group, Loader, Stack, Text, ThemeIcon, Tooltip } from "@mantine/core"; @@ -8,6 +8,7 @@ import { IconAlertTriangle, IconArrowsMaximize, IconMessage, IconRobot } from "@ import { useI18n } from "@homarr/translation/client"; import type { WidgetComponentProps } from "@homarr/widgets"; +import { useRequiredBoard } from "@homarr/boards/context"; import classes from "./assistant-panel.module.css"; import { AssistantConversationSurface } from "./assistant-panel"; @@ -31,6 +32,7 @@ export const AssistantBoardWidget = (props: WidgetComponentProps<"assistant">) = const EnabledAssistantBoardWidget = ({ options, width, height, isEditMode }: WidgetComponentProps<"assistant">) => { const t = useI18n(); + const board = useRequiredBoard(); const assistant = useHomarrAssistant(); const preferences = useAssistantPreferences(); const aui = useAui(); @@ -110,9 +112,11 @@ const EnabledAssistantBoardWidget = ({ options, width, height, isEditMode }: Wid return (