@gooddata/sdk-ui-dashboard 11.67.0-alpha.2 → 11.67.0-alpha.4

package/styles/scss/dashboard.scss

@@ -39,90 +39,6 @@ $headline-compact-margin-bottom: 5px;
     opacity: 0.5;
 }
 
-.gd-dashboard-interaction-composing__status {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    pointer-events: all;
-    gap: var(--gd-spacing-10px);
-    opacity: 1;
-    top: var(--gd-spacing-20px);
-    left: 50%;
-    z-index: zIndexes.$dashboard-ai-building-banner;
-    box-sizing: border-box;
-    min-width: 400px;
-    max-width: calc(100% - 2 * var(--gd-spacing-10px));
-    padding: var(--gd-spacing-10px) var(--gd-spacing-20px);
-    border: 1px solid var(--gd-palette-complementary-3);
-    border-radius: var(--gd-modal-borderRadius);
-    box-shadow:
-        var(--gd-shadow-color) 0 2px 9px,
-        var(--gd-shadow-color) 0 1px 3px;
-    background: var(--gd-palette-complementary-0);
-    color: var(--gd-palette-complementary-8);
-    text-align: left;
-    overflow-wrap: anywhere;
-    transform: translateX(-50%);
-    transition:
-        opacity 0.3s ease-in-out,
-        top 0.3s ease-in-out;
-
-    &.hidden {
-        opacity: 0;
-        top: -100px;
-    }
-}
-
-.gd-dashboard-interaction-composing__message {
-    flex: 1 1 auto;
-    min-width: 0;
-    font-weight: 700;
-}
-
-.gd-dashboard-ai-composing-overlay {
-    position: absolute;
-    inset: 0;
-    z-index: zIndexes.$dashboard-ai-composing-overlay;
-    pointer-events: none;
-
-    svg {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        overflow: visible;
-    }
-
-    rect {
-        fill: none;
-        stroke: var(--gd-palette-primary-base);
-        stroke-width: 2px;
-        stroke-linecap: round;
-    }
-
-    &__bloom {
-        filter: blur(14px);
-        opacity: 0.5;
-
-        rect {
-            stroke-width: 12px;
-        }
-    }
-
-    &__glow {
-        filter: blur(5px);
-        opacity: 0.55;
-
-        rect {
-            stroke-width: 6px;
-        }
-    }
-
-    &__tail {
-        opacity: 0.35;
-    }
-}
-
 // this must be used on the body element in gdc-dashboards
 .gd-dashboards-root {
     background: variables.$gd-dashboards-content-backgroundColor;

package/esm/presentation/dashboard/components/DashboardAiComposingOverlay.d.ts

@@ -1,4 +0,0 @@
-export declare function DashboardAiComposingOverlay({ isWaiting }: {
-    isWaiting: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DashboardAiComposingOverlay.d.ts.map

package/esm/presentation/dashboard/components/DashboardAiComposingOverlay.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardAiComposingOverlay.d.ts","sourceRoot":"","sources":["../../../../src/presentation/dashboard/components/DashboardAiComposingOverlay.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,2BAA2B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,2CAuKhF"}

package/esm/presentation/dashboard/components/DashboardAiComposingOverlay.js

@@ -1,151 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// (C) 2026 GoodData Corporation
-import { useLayoutEffect, useRef } from "react";
-const speed = 1 / 3.6;
-const springAt = 0.05;
-const stiffness = 7;
-const damping = 0.55;
-export function DashboardAiComposingOverlay({ isWaiting }) {
-    const overlayRef = useRef(null);
-    const stateRef = useRef(null);
-    useLayoutEffect(() => {
-        const overlay = overlayRef.current;
-        if (!overlay) {
-            return;
-        }
-        const rects = Array.from(overlay.querySelectorAll("rect"));
-        const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
-        let state = stateRef.current;
-        let width = 0;
-        let perimeter = 0;
-        let previousTime;
-        let frame;
-        const segment = (rect, start, length) => {
-            rect.style.strokeDasharray = `${length} ${Math.max(0, perimeter - length)}`;
-            rect.style.strokeDashoffset = String(-(((start % perimeter) + perimeter) % perimeter));
-        };
-        const animate = (time) => {
-            frame = undefined;
-            if (!state || !perimeter) {
-                return;
-            }
-            const dt = Math.min(0.05, (time - (previousTime ?? time)) / 1000);
-            previousTime = time;
-            const top = width / 2 / perimeter;
-            const runningLength = Math.min(600, perimeter * 0.25);
-            const waitingLength = Math.min(120, runningLength);
-            let settled = false;
-            if (isWaiting && state.mode === "run") {
-                state.mode = "cruise";
-                state.lap = Math.ceil(state.center + springAt - top);
-            }
-            else if (!isWaiting && state.mode !== "run") {
-                state.mode = "run";
-                state.speed = 0;
-            }
-            if (reducedMotion.matches) {
-                state.center = top;
-                state.length = isWaiting ? waitingLength : runningLength;
-                state.head = isWaiting ? 0 : 1;
-                state.lap = 0;
-                state.velocity = 0;
-                state.speed = 0;
-                state.mode = isWaiting ? "spring" : "run";
-                settled = true;
-            }
-            else if (state.mode === "cruise") {
-                state.center += speed * dt;
-                if (state.lap + top - state.center <= springAt) {
-                    state.mode = "spring";
-                    state.velocity = speed;
-                }
-            }
-            else if (state.mode === "spring") {
-                // Keep the spring target aligned with the top center while the dashboard resizes.
-                const target = state.lap + top;
-                const steps = Math.max(1, Math.ceil(dt * 240));
-                const step = dt / steps;
-                for (let i = 0; i < steps; i++) {
-                    const acceleration = -stiffness * stiffness * (state.center - target) -
-                        2 * damping * stiffness * state.velocity;
-                    state.velocity += acceleration * step;
-                    state.center += state.velocity * step;
-                }
-                const easing = 1 - Math.exp(-dt * 3.2);
-                state.length += (waitingLength - state.length) * easing;
-                state.head += -state.head * easing;
-                settled =
-                    Math.abs(state.center - target) < 0.00001 &&
-                        Math.abs(state.velocity) < 0.00001 &&
-                        Math.abs(state.length - waitingLength) < 0.01 &&
-                        state.head < 0.0001;
-                if (settled) {
-                    state.center = target;
-                    state.length = waitingLength;
-                    state.head = 0;
-                }
-            }
-            else {
-                state.speed = Math.min(1, state.speed + dt / 0.9);
-                state.center += speed * dt * state.speed * state.speed;
-                const easing = 1 - Math.exp(-dt * 2.5);
-                state.length += (runningLength - state.length) * easing;
-                state.head += (1 - state.head) * easing;
-            }
-            const start = state.center * perimeter - state.length / 2;
-            const coreLength = state.length * 0.55;
-            const coreStart = start + (state.length - coreLength) * (0.5 + 0.5 * state.head);
-            const [bloom, glow, tail, core] = rects;
-            segment(tail, start, state.length);
-            for (const rect of [bloom, glow, core]) {
-                segment(rect, coreStart, coreLength);
-            }
-            if (!settled) {
-                frame = requestAnimationFrame(animate);
-            }
-        };
-        const refresh = () => {
-            if (frame !== undefined) {
-                cancelAnimationFrame(frame);
-            }
-            previousTime = undefined;
-            animate(performance.now());
-        };
-        const fit = () => {
-            width = Math.max(0, overlay.clientWidth - 2);
-            const height = Math.max(0, overlay.clientHeight - 2);
-            perimeter = width && height ? 2 * (width + height) : 0;
-            for (const rect of rects) {
-                rect.setAttribute("width", String(width));
-                rect.setAttribute("height", String(height));
-            }
-            if (!state && perimeter) {
-                state = {
-                    center: isWaiting ? width / 2 / perimeter : 0.62,
-                    length: isWaiting ? Math.min(120, perimeter * 0.25) : Math.min(600, perimeter * 0.25),
-                    head: isWaiting ? 0 : 1,
-                    speed: 1,
-                    mode: isWaiting ? "spring" : "run",
-                    lap: 0,
-                    velocity: 0,
-                };
-                stateRef.current = state;
-            }
-            refresh();
-        };
-        const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(fit);
-        observer?.observe(overlay);
-        window.addEventListener("resize", fit);
-        reducedMotion.addEventListener("change", refresh);
-        fit();
-        return () => {
-            if (frame !== undefined) {
-                cancelAnimationFrame(frame);
-            }
-            observer?.disconnect();
-            window.removeEventListener("resize", fit);
-            reducedMotion.removeEventListener("change", refresh);
-        };
-    }, [isWaiting]);
-    return (_jsx("div", { "data-testid": "gd-dashboard-ai-composing-overlay", className: "gd-dashboard-ai-composing-overlay", ref: overlayRef, "aria-hidden": "true", children: ["bloom", "glow", "tail", "core"].map((layer) => (_jsx("svg", { className: `gd-dashboard-ai-composing-overlay__${layer}`, focusable: "false", children: _jsx("rect", { x: "1", y: "1", width: "0", height: "0" }) }, layer))) }));
-}

package/esm/presentation/dashboard/components/DashboardInteractionComposing.d.ts

@@ -1,8 +0,0 @@
-import { type ReactNode } from "react";
-interface IDashboardInteractionComposingProps {
-    children: ReactNode;
-    onReplyInChat?: () => void;
-}
-export declare function DashboardInteractionComposing({ children, onReplyInChat, }: IDashboardInteractionComposingProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=DashboardInteractionComposing.d.ts.map

package/esm/presentation/dashboard/components/DashboardInteractionComposing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardInteractionComposing.d.ts","sourceRoot":"","sources":["../../../../src/presentation/dashboard/components/DashboardInteractionComposing.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC,UAAU,mCAAmC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,6BAA6B,CAAC,EAC1C,QAAQ,EACR,aAAa,GAChB,EAAE,mCAAmC,2CA8CrC"}

package/esm/presentation/dashboard/components/DashboardInteractionComposing.js

@@ -1,23 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cx from "classnames";
-import { FormattedMessage, defineMessages, useIntl } from "react-intl";
-import { UiButton } from "@gooddata/sdk-ui-kit";
-import { useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js";
-import { selectAiReasoningTitle, selectIsAiBuilding, selectIsAiGenerating, selectIsAiWaiting, } from "../../../model/store/config/configSelectors.js";
-import { DashboardAiComposingOverlay } from "./DashboardAiComposingOverlay.js";
-const messages = defineMessages({
-    replyNow: { id: "dashboard.ai.composing.replyNow", defaultMessage: "Reply now" },
-});
-export function DashboardInteractionComposing({ children, onReplyInChat, }) {
-    const intl = useIntl();
-    const isAiGenerating = useDashboardSelector(selectIsAiGenerating);
-    const isAiBuilding = useDashboardSelector(selectIsAiBuilding);
-    const isAiWaiting = useDashboardSelector(selectIsAiWaiting);
-    const aiReasoningTitle = useDashboardSelector(selectAiReasoningTitle);
-    const isAiActive = isAiBuilding || isAiWaiting || isAiGenerating;
-    const showReasoningTitle = (isAiGenerating || isAiBuilding) && !!aiReasoningTitle;
-    const showStatus = isAiWaiting || showReasoningTitle;
-    return (_jsxs(_Fragment, { children: [children, isAiActive ? (_jsx("div", { children: _jsx(DashboardAiComposingOverlay, { isWaiting: isAiWaiting }) })) : null, _jsxs("div", { className: cx("gd-dashboard-interaction-composing__status", {
-                    hidden: !showStatus,
-                }), "aria-hidden": !showStatus, children: [_jsx("div", { className: "gd-dashboard-interaction-composing__message", role: showStatus ? "status" : undefined, "aria-hidden": !showStatus, children: isAiWaiting || !showReasoningTitle ? (_jsx(FormattedMessage, { id: "dashboard.ai.composing.waiting" })) : (aiReasoningTitle) }), isAiWaiting && onReplyInChat ? (_jsx(UiButton, { variant: "tertiary", label: intl.formatMessage(messages.replyNow), onClick: onReplyInChat })) : null] })] }));
-}