@factorialco/f0-react 4.7.0 → 4.8.0

package/dist/ai.d.ts

@@ -1810,6 +1810,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";
@@ -4742,8 +4746,10 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        transcript: {
-            insertTranscript: (data: TranscriptData) => ReturnType;
+        videoEmbed: {
+            setVideoEmbed: (options: {
+                src: string;
+            }) => ReturnType;
         };
     }
 }
@@ -4751,10 +4757,8 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        videoEmbed: {
-            setVideoEmbed: (options: {
-                src: string;
-            }) => ReturnType;
+        transcript: {
+            insertTranscript: (data: TranscriptData) => ReturnType;
         };
     }
 }

package/dist/ai.js

@@ -1,6 +1,6 @@
-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 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-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 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-msevU72I.js";
 export {
   P as AiChatTranslationsProvider,
   e as ChatSpinner,

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";
@@ -8199,6 +8203,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 +8366,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 +9419,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.
@@ -9802,8 +9974,10 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        transcript: {
-            insertTranscript: (data: TranscriptData) => ReturnType;
+        videoEmbed: {
+            setVideoEmbed: (options: {
+                src: string;
+            }) => ReturnType;
         };
     }
 }
@@ -9811,10 +9985,8 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        videoEmbed: {
-            setVideoEmbed: (options: {
-                src: string;
-            }) => ReturnType;
+        transcript: {
+            insertTranscript: (data: TranscriptData) => ReturnType;
         };
     }
 }