@object-ui/app-shell 6.2.2 → 7.0.0

package/dist/console/ConsoleShell.js

@@ -10,13 +10,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * JSX in App.tsx. See examples/console-starter/src/App.tsx for a minimal example,
  * apps/console/src/App.tsx for one with custom system routes + CreateApp.
  */
-import { Suspense, useEffect } from 'react';
+import { Suspense, useEffect, useRef } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { AuthGuard, useAuth } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { SchemaRendererProvider } from '@object-ui/react';
 import { createObjectStackUserStateAdapter } from '@object-ui/data-objectstack';
 import { AdapterProvider, useAdapter } from '../providers/AdapterProvider';
 import { MetadataProvider, useMetadata } from '../providers/MetadataProvider';
+import { PreviewModeProvider } from '../preview/PreviewModeContext';
 import { NavigationProvider } from '../context/NavigationContext';
 import { FavoritesProvider } from '../context/FavoritesProvider';
 import { RecentItemsProvider } from '../context/RecentItemsProvider';
@@ -48,15 +50,42 @@ export function ConsoleShell({ children }) {
  * rendering objects / dashboards / pages.
  */
 export function ConnectedShell({ children }) {
-    return (_jsx(AdapterProvider, { children: _jsx(ConnectedShellInner, { children: children }) }));
+    return (_jsx(AdapterProvider, { children: _jsx(PreviewModeProvider, { children: _jsx(ConnectedShellInner, { children: children }) }) }));
 }
 function ConnectedShellInner({ children }) {
     const adapter = useAdapter();
+    const { language } = useObjectTranslation();
+    // ── Language switch → relabel without a page refresh (issue #1319) ──
+    //
+    // Static UI strings already flip reactively through react-i18next, and
+    // metadata labels that have a translation key resolve client-side via
+    // `useObjectLabel`. The gap is *server-resolved* labels (object/field/view
+    // labels, action-dialog text) with no client key: renderers fetch those into
+    // local state keyed by object name, so they never re-fetch on a language
+    // change and the UI ends up half-translated until a hard refresh.
+    //
+    // We close the gap in two moves, both keyed off `language`:
+    //   1. Drop the adapter's locale-blind metadata cache (render phase, before
+    //      any child re-fetches) so the next read hits the network. This runs in
+    //      render — not an effect — because the remount below mounts children
+    //      (and their fetch effects) before a parent effect here would fire, so
+    //      an effect-based clear would race and serve the stale entry.
+    //   2. Remount the metadata subtree via `key={language}` so every renderer's
+    //      fetch effect re-runs; combined with the new `Accept-Language` header
+    //      (see `createAuthenticatedFetch`) the refetch comes back in the new
+    //      locale. The adapter — and its live connection — sits above the key and
+    //      is preserved, so this is an in-app relabel, not a reconnect.
+    const lastLanguage = useRef(null);
+    if (adapter && lastLanguage.current !== null && lastLanguage.current !== language) {
+        adapter.clearCache?.();
+    }
+    if (adapter)
+        lastLanguage.current = language;
     if (!adapter)
         return _jsx(LoadingFallback, {});
     // Expose the adapter via SchemaRendererContext so descendant hooks like
     // useDiscovery() (used to gate the global AI chatbot) can resolve it.
-    return (_jsx(SchemaRendererProvider, { dataSource: adapter, children: _jsxs(MetadataProvider, { adapter: adapter, children: [_jsx(UserStateBridge, {}), children] }) }));
+    return (_jsx(SchemaRendererProvider, { dataSource: adapter, children: _jsxs(MetadataProvider, { adapter: adapter, children: [_jsx(UserStateBridge, {}), children] }, language) }));
 }
 /**
  * UserStateBridge — once we have an authenticated user + a connected data

package/dist/console/ai/AiChatPage.d.ts

@@ -1,8 +1,95 @@
+/**
+ * AiChatPage — full-page ChatGPT-style AI surface.
+ *
+ * Mounted at `/ai` (new chat) and `/ai/:conversationId` (resume an existing
+ * conversation). Left rail lists the signed-in user's `ai_conversations`;
+ * right pane embeds `ChatbotEnhanced` wired to
+ * `POST /api/v1/ai/agents/:name/chat`.
+ *
+ * Auto-persist is handled server-side in `@objectstack/service-ai`: as long
+ * as the request body carries `conversationId`, the user + assistant + tool
+ * turns are appended to `ai_messages` automatically.
+ */
+import React from 'react';
+import { type ChatMessage } from '@object-ui/plugin-chatbot';
+import { type HydratedUIMessage } from '../../hooks/useChatConversation';
+/** Exported for tests — maps persisted/cached history to renderable messages. */
+export declare function hydratedMessagesToChatMessages(messages: HydratedUIMessage[]): ChatMessage[];
 export interface AiChatPageProps {
     /** Override the resolved AI service base URL. */
     apiBase?: string;
     /** Default agent to select on first render. */
     defaultAgent?: string;
 }
-export declare function AiChatPage({ apiBase: apiBaseProp, defaultAgent: defaultAgentProp }?: AiChatPageProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapsibleChatsList {
+    /** Whether the desktop conversations list is currently hidden. */
+    collapsed: boolean;
+    /** User-driven collapse/expand; persists the preference and takes manual control. */
+    toggle: () => void;
+    /** Wire to the preview pane: auto-tucks the list when it opens, restores on close. */
+    handleCanvasOpenChange: (open: boolean) => void;
+}
+/**
+ * State for the collapsible desktop conversations list. Exported for tests.
+ *
+ * Two drivers, one rule — never fight the user:
+ *  - **Manual** `toggle()` flips it and PERSISTS the preference (localStorage),
+ *    and marks the user as having taken control.
+ *  - **Auto** `handleCanvasOpenChange(open)` tucks the list away when the Live
+ *    Canvas preview opens (the chat + preview split is tight) and restores it on
+ *    close — but ONLY if the auto-collapse is what hid it. A manual toggle (or a
+ *    list the user already collapsed) is never overridden, and auto-collapse is
+ *    transient (not persisted).
+ */
+export declare function useCollapsibleChatsList(): CollapsibleChatsList;
+/**
+ * Clamp a desired chat-column width so neither pane collapses: at least
+ * `min`, and never so wide that the preview drops below `previewMin`. Pure +
+ * exported for tests. `containerWidth <= 0` (unmeasured) skips the upper bound.
+ */
+export declare function clampChatPaneWidth(desired: number, opts: {
+    min: number;
+    previewMin: number;
+    containerWidth: number;
+}): number;
+interface ResizableChatPane {
+    /** Current chat-column width in px (clamped). */
+    width: number;
+    /** True while a drag is in progress (for cursor/overlay styling). */
+    dragging: boolean;
+    /** Ref for the split container — measures available width to bound the preview. */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Start a pointer drag from the divider. */
+    onHandlePointerDown: (e: React.PointerEvent) => void;
+    /** Keyboard resize (←/→) when the divider is focused. */
+    onHandleKeyDown: (e: React.KeyboardEvent) => void;
+    /** Reset to the default width (double-click the divider). */
+    reset: () => void;
+}
+/**
+ * Draggable width for the chat column when the Live Canvas preview is open
+ * (ChatGPT/Claude-style split). Width persists; drags and keyboard nudges are
+ * clamped against the live container so the preview always keeps room, and a
+ * ResizeObserver re-clamps when the window shrinks. All DOM reads happen in
+ * handlers/effects, never during render.
+ */
+export declare function useResizableChatPane(active: boolean): ResizableChatPane;
+export type AiChatShortcut = 'toggle-list' | 'new-chat';
+/**
+ * Match a keydown to an AI-chat shortcut, mirroring ChatGPT/Claude:
+ *  - ⌘/Ctrl+Shift+O → new chat
+ *  - ⌘/Ctrl+Shift+S → toggle the conversations list
+ *
+ * Both use the ⌘/Ctrl+Shift modifier so they're safe to fire even while the
+ * composer is focused (they can't be produced by ordinary typing). Pure +
+ * exported for tests.
+ */
+export declare function matchAiChatShortcut(e: {
+    key: string;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+}): AiChatShortcut | null;
+export declare function AiChatPage({ apiBase: apiBaseProp, defaultAgent: defaultAgentProp }?: AiChatPageProps): React.JSX.Element;
 export default AiChatPage;