@factorialco/f0-react 4.7.0 → 4.9.0

package/dist/ai.d.ts

@@ -20,6 +20,7 @@ import { HTMLAttributes } from 'react';
 import { ItemProps } from './types';
 import { JSX as JSX_2 } from 'react';
 import { LocalAudioTrack } from 'livekit-client';
+import { NamedExoticComponent } from 'react';
 import { Props as Props_3 } from './types';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
@@ -607,6 +608,7 @@ export declare const aiTranslations: {
         readonly inputPlaceholder: "Ask about time, people, or company info and a lot of other things...";
         readonly stopAnswerGeneration: "Stop generating";
         readonly responseStopped: "You stopped this response";
+        readonly applyingChanges: "Applying changes";
         readonly sendMessage: "Send message";
         readonly thoughtsGroupTitle: "Reasoning";
         readonly resourcesGroupTitle: "Resources";
@@ -1810,6 +1812,10 @@ export declare const defaultTranslations: {
     readonly navigation: {
         readonly sidebar: {
             readonly label: "Main navigation";
+            readonly search: "Search";
+            readonly tabs: {
+                readonly label: "Sidebar sections";
+            };
             readonly companySelector: {
                 readonly label: "Select a company";
                 readonly placeholder: "Select a company";
@@ -2106,6 +2112,7 @@ export declare const defaultTranslations: {
         readonly inputPlaceholder: "Ask about time, people, or company info and a lot of other things...";
         readonly stopAnswerGeneration: "Stop generating";
         readonly responseStopped: "You stopped this response";
+        readonly applyingChanges: "Applying changes";
         readonly sendMessage: "Send message";
         readonly thoughtsGroupTitle: "Reasoning";
         readonly resourcesGroupTitle: "Resources";
@@ -3018,6 +3025,34 @@ declare interface F0AiPongProps {
     onClose: () => void;
 }
 
+/**
+ * Wraps a panel/canvas that F0AiChat is regenerating. While `active`, the
+ * content blurs and stops receiving pointer events, and a centered pill — the
+ * One icon plus an "Applying changes" label — floats over it, so the user gets
+ * clear feedback that the surface is being updated and shouldn't be edited.
+ *
+ * Mirrors the survey form-builder "applying changes" affordance, lifted into
+ * the F0AiChat family so any surface paired with the chat can reuse it.
+ */
+export declare const F0AiProcessingOverlay: NamedExoticComponent<F0AiProcessingOverlayProps>;
+
+export declare interface F0AiProcessingOverlayProps {
+    /**
+     * When `true`, the wrapped content is blurred and locked
+     * (`pointer-events-none`) and the floating status pill is shown over it.
+     */
+    active: boolean;
+    /**
+     * Pill label. Defaults to the translated "Applying changes"
+     * (`ai.applyingChanges`).
+     */
+    label?: string;
+    /** Extra classes for the wrapper element. */
+    className?: string;
+    /** The panel/canvas content the assistant is editing. */
+    children: ReactNode;
+}
+
 export declare function F0AiProposalCard(props: F0AiProposalCardProps): JSX_2.Element;
 
 export declare namespace F0AiProposalCard {

package/dist/ai.js

@@ -1,23 +1,24 @@
-import { C as e, D as r, c as t, F as o, a as i, f as n, g as F, d as C, e as A, I as l, P as d, b as u, u as m } from "./F0CanvasPanel-NAs7-9VU.js";
+import { C as e, D as r, c as i, F as o, a as t, f as n, g as F, d as C, e as A, I as l, P as d, b as u, u as m } from "./F0CanvasPanel-B-6B9ckI.js";
 import { defaultTranslations as c } from "./i18n-provider-defaults.js";
-import { A as P, s as v, t as f, w as g, l as p, i as T, q as y, x as S, p as x, r as H, j as V, e as b, g as k, k as w, F as M, h as O, a as D, n as j, m as q, o as z, b as B, f as E, v as L, c as R, d as G, u as J } from "./useChatHistory-hrv_qH8R.js";
+import { A as v, s as I, t as g, w as f, l as p, i as y, q as T, x as S, y as x, p as H, r as O, j as V, e as b, g as k, k as w, F as M, h as D, a as j, n as q, m as z, o as B, b as E, f as L, v as R, c as G, d as J, u as K } from "./F0AiProcessingOverlay-B8K7o_Ei.js";
 export {
-  P as AiChatTranslationsProvider,
+  v as AiChatTranslationsProvider,
   e as ChatSpinner,
   r as DropOverlay,
-  t as F0ActionItem,
+  i as F0ActionItem,
   o as F0AiChat,
-  v as F0AiChatHeader,
-  f as F0AiChatHistory,
-  i as F0AiChatProvider,
-  g as F0AiChatTextArea,
+  I as F0AiChatHeader,
+  g as F0AiChatHistory,
+  t as F0AiChatProvider,
+  f as F0AiChatTextArea,
   p as F0AiInsightCard,
-  T as F0AiMask,
-  y as F0AiMessageSources,
+  y as F0AiMask,
+  T as F0AiMessageSources,
   S as F0AiMessagesContainer,
   n as F0AiPong,
-  x as F0AiProposalCard,
-  H as F0AiTableCard,
+  x as F0AiProcessingOverlay,
+  H as F0AiProposalCard,
+  O as F0AiTableCard,
   V as F0AuraVoiceAnimation,
   b as F0CanvasCard,
   F as F0CanvasPanel,
@@ -28,18 +29,18 @@ export {
   M as FormCardValueFormatterProvider,
   l as I18nProvider,
   d as PongBall,
-  O as actionItemStatuses,
-  D as aiTranslations,
-  j as contentTypes,
+  D as actionItemStatuses,
+  j as aiTranslations,
+  q as contentTypes,
   c as defaultTranslations,
-  q as markdownRenderers,
-  z as oneIconSizes,
+  z as markdownRenderers,
+  B as oneIconSizes,
   u as useAiChat,
-  B as useAiChatTranslations,
-  E as useCanvasEntity,
-  L as useChatHistory,
-  R as useFormCardValueFormatter,
+  E as useAiChatTranslations,
+  L as useCanvasEntity,
+  R as useChatHistory,
+  G as useFormCardValueFormatter,
   m as useI18n,
-  G as useSetFormCardValueFormatter,
-  J as useToolCallId
+  J as useSetFormCardValueFormatter,
+  K as useToolCallId
 };

package/dist/experimental.d.ts

@@ -3170,6 +3170,10 @@ declare const defaultTranslations: {
     readonly navigation: {
         readonly sidebar: {
             readonly label: "Main navigation";
+            readonly search: "Search";
+            readonly tabs: {
+                readonly label: "Sidebar sections";
+            };
             readonly companySelector: {
                 readonly label: "Select a company";
                 readonly placeholder: "Select a company";
@@ -3466,6 +3470,7 @@ declare const defaultTranslations: {
         readonly inputPlaceholder: "Ask about time, people, or company info and a lot of other things...";
         readonly stopAnswerGeneration: "Stop generating";
         readonly responseStopped: "You stopped this response";
+        readonly applyingChanges: "Applying changes";
         readonly sendMessage: "Send message";
         readonly thoughtsGroupTitle: "Reasoning";
         readonly resourcesGroupTitle: "Resources";
@@ -8199,6 +8204,135 @@ export declare const Sidebar: WithDataTestIdReturnType_5<typeof _Sidebar>;
 
 declare function _Sidebar({ header, body, footer, onFooterDropdownClick, }: SidebarProps): JSX_2.Element;
 
+export declare type SidebarChat = {
+    id: string;
+    label: string;
+    /** Person / team / company avatar (F0Avatar variant). */
+    avatar: AvatarVariant;
+    onClick?: () => void;
+    /** When > 0, the chat is rendered as unread (darker, bolder name). */
+    unreadCount?: number;
+    presence?: SidebarChatPresence;
+    /** Status icon shown to the right of the name. People only. */
+    status?: SidebarChatStatus;
+    /** Epoch ms of the last activity; used for ordering. */
+    lastActivityAt?: number;
+};
+
+/**
+ * A top-of-list action in the Messages tab (e.g. "New chat", "New group").
+ * The list renders one ghost button per action, so any number can be added.
+ */
+export declare type SidebarChatAction = {
+    label: string;
+    icon?: IconType;
+    onClick?: () => void;
+};
+
+export declare type SidebarChatActions = Omit<SidebarChatStore, "groups" | "activeChatId" | "unreadChatsCount">;
+
+export declare type SidebarChatGroup = {
+    id: string;
+    title: string;
+    /** Initial open state of the collapsible group. @default true */
+    isOpen?: boolean;
+    chats: SidebarChat[];
+};
+
+export declare const SidebarChatItem: ({ chat, isActive, onClick, }: {
+    chat: SidebarChat;
+    isActive: boolean;
+    onClick: () => void;
+}) => JSX_2.Element;
+
+/**
+ * Body of the "Messages" tab: chat groups read from `SidebarChatProvider`.
+ * Chats fade in/out as they are added/removed; live reordering from the store
+ * is applied instantly (Slack-style), without layout projection — that avoids
+ * the resize-like "bounce" when the tab mounts.
+ */
+export declare const SidebarChatList: ({ actions, }: {
+    /** Ghost actions rendered at the very top (e.g. New chat, New group). */
+    actions?: SidebarChatAction[];
+}) => JSX_2.Element;
+
+export declare type SidebarChatPresence = "online" | "offline";
+
+export declare const SidebarChatProvider: ({ children, initialGroups, initialActiveChatId, }: SidebarChatProviderProps) => JSX_2.Element;
+
+export declare type SidebarChatProviderProps = {
+    children: ReactNode;
+    /** Initial chat groups. Live updates are applied through the store actions. */
+    initialGroups?: SidebarChatGroup[];
+    /** Initially active chat id. Chats are not navigation links (see store). */
+    initialActiveChatId?: string;
+};
+
+/**
+ * Status shown as a small icon avatar to the right of a person's name (people
+ * only). The consumer fully controls it — pass any icon with an accessible
+ * label. F0 does not hardcode any set of statuses.
+ */
+export declare type SidebarChatStatus = {
+    icon: IconType;
+    label: string;
+};
+
+/**
+ * Imperative store API exposed by `useSidebarChats`. Every mutation is stable
+ * (identity preserved across renders) so it can be called from anywhere with
+ * access to the context — e.g. a websocket handler pushing live updates.
+ */
+export declare type SidebarChatStore = {
+    groups: SidebarChatGroup[];
+    /**
+     * Id of the currently active chat. Chats are not navigation links — you can
+     * be on any page (e.g. the dashboard) with a chat active — so the active
+     * state is driven from here, not from the router.
+     */
+    activeChatId?: string;
+    /** Number of conversations with unread messages (across all groups). */
+    unreadChatsCount: number;
+    /** Replace the whole tree. */
+    setGroups: (groups: SidebarChatGroup[]) => void;
+    /** Set (or clear, with `null`) the active chat. */
+    setActiveChat: (id: string | null) => void;
+    /** Insert a chat into a group, or update it in place if it already exists. */
+    upsertChat: (groupId: string, chat: SidebarChat) => void;
+    /** Patch an existing chat by id, regardless of its group. */
+    updateChat: (id: string, patch: Partial<SidebarChat>) => void;
+    /** Remove a chat by id. */
+    removeChat: (id: string) => void;
+    /** Convenience setter for the unread counter of a chat. */
+    setUnread: (id: string, count: number) => void;
+    /** Reorder the chats of a group given the new ordered list of ids. */
+    reorder: (groupId: string, orderedIds: string[]) => void;
+};
+
+/**
+ * Collapsible titled section used across the Sidebar (navigation categories,
+ * chat groups). Title + rotating chevron + animated height.
+ */
+export declare const SidebarCollapsibleSection: ({ title, isOpen: initialIsOpen, isRoot, onCollapse, children, highlightWhenCollapsed, isDragging, wasDragging, }: SidebarCollapsibleSectionProps) => JSX_2.Element;
+
+export declare interface SidebarCollapsibleSectionProps {
+    title: string;
+    /** Initial open state. @default true */
+    isOpen?: boolean;
+    /** Root sections render their content without the collapsible header. */
+    isRoot?: boolean;
+    onCollapse?: (isOpen: boolean) => void;
+    children?: ReactNode;
+    /**
+     * Emphasises the title (darker, bolder) while the section is collapsed —
+     * Slack-style hint that hidden items need attention (e.g. unread chats).
+     */
+    highlightWhenCollapsed?: boolean;
+    /** Drag-aware guards used by the sortable Menu; safe to omit elsewhere. */
+    isDragging?: boolean;
+    wasDragging?: RefObject<boolean>;
+}
+
 export declare function SidebarFooter({ user, options, showActivityButton, activityButtonShortcut, onActivityButtonClick, onDropdownClick, hasActivityUpdates, }: SidebarFooterProps): JSX_2.Element;
 
 declare interface SidebarFooterProps {
@@ -8233,6 +8367,35 @@ declare interface SidebarProps {
 
 declare type SidebarState = "locked" | "unlocked" | "hidden";
 
+export declare type SidebarTab = {
+    id: string;
+    label: string;
+    icon: IconType;
+    /** Unread counter shown next to the tab. */
+    badge?: number;
+};
+
+/**
+ * Tab switcher that replaces the `SearchBar` row when the Sidebar gains tabs.
+ * The active tab shows icon + label (animated in); inactive tabs are
+ * icon-only. Search becomes an icon button on the right.
+ *
+ * When no tabs are needed, keep composing the Sidebar header with `SearchBar`
+ * instead — that path is unchanged.
+ */
+export declare const SidebarTabs: ({ tabs, activeTab, onTabChange, search, }: SidebarTabsProps) => JSX_2.Element;
+
+export declare type SidebarTabsProps = {
+    tabs: SidebarTab[];
+    activeTab: string;
+    onTabChange: (id: string) => void;
+    search: {
+        /** Accessible label / tooltip for the search icon button. */
+        placeholder?: string;
+        onClick?: () => void;
+    };
+};
+
 /**
  * Response structure for non-paginated data
  */
@@ -9257,6 +9420,16 @@ declare interface User_2 {
 
 export declare function useSidebar(): FrameContextType;
 
+/**
+ * Access only the mutation actions, without subscribing to state changes.
+ * Use this from code that pushes updates (e.g. websocket handlers) so it
+ * doesn't re-render on every chat change.
+ */
+export declare const useSidebarChatActions: () => SidebarChatActions;
+
+/** Read the chat state (groups, active chat) and the imperative store API. */
+export declare const useSidebarChats: () => SidebarChatStore;
+
 /**
  * Profile data for a vacancy entity (ATS vacancy/position), resolved asynchronously
  * and displayed in the entity reference hover card.