codicent-app-sdk 0.3.120 → 0.4.1

package/dist/index.d.ts

@@ -1,14 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ComponentType, PropsWithChildren, ReactNode, FC } from 'react';
+import React__default, { ComponentType, PropsWithChildren, ReactNode, Component, ErrorInfo, FC } from 'react';
 import { ToolDefinitionType } from '@openai/realtime-api-beta/dist/lib/client';
 import { RedirectLoginOptions, AppState, Auth0ContextInterface } from '@auth0/auth0-react';
-import { State, StateMachine } from 'statechart-lib';
+import { State as State$1, StateMachine } from 'statechart-lib';
 export { State, StateMachine } from 'statechart-lib';
 import { DatePickerProps } from '@fluentui/react-datepicker-compat';
 import { IColorPickerProps } from '@fluentui/react';
 import { TimePickerProps } from '@fluentui/react-timepicker-compat';
 import { BrandVariants, ToastIntent } from '@fluentui/react-components';
+import { Root } from 'react-dom/client';
 
 declare const setBaseUrl: (url: string) => void;
 interface UserInfo {
@@ -35,7 +36,7 @@ interface AppInfo {
     title: string;
     logo: string;
 }
-interface Form {
+interface Form$1 {
     name: string;
     prompt: string;
     title: string;
@@ -59,6 +60,7 @@ interface CodicentServiceOptions {
     BUTTON_TAG: string;
     STRIPE_PUBLIC_KEY: string;
     STRIPE_SOURCE?: string;
+    STRIPE_TRIAL_PERIOD_DAYS?: number;
     SUBSCRIPTION_NEEDED: boolean;
     USER_PREFIX: string;
     ANONYMOUS_TOKEN?: string;
@@ -69,6 +71,11 @@ declare class CodicentService {
     readOneDataMessage: (id: string) => Promise<DataMessage | null>;
     updateDataMessage: (id: string, data: object, codicent?: string) => Promise<string>;
     deleteDataMessage: (id: string, codicent?: string) => Promise<string>;
+    /**
+     * Gets the JSON Schema for a given data tag.
+     * Schemas are stored as data messages with #schema #tagname tags.
+     */
+    getSchema: (tag: string, codicent?: string) => Promise<object | null>;
     codicent: string;
     private options;
     onUnauthorized?: () => void;
@@ -150,8 +157,8 @@ declare class CodicentService {
      * @param pollingInterval - Interval between poll requests in milliseconds (default: 2 seconds)
      */
     static getMiniChatReply: (message: string, project?: string, messageId?: string, maxPollingTime?: number, pollingInterval?: number) => Promise<string | undefined>;
-    getForms: () => Promise<Form[]>;
-    getFormById: (id: string) => Promise<Form>;
+    getForms: () => Promise<Form$1[]>;
+    getFormById: (id: string) => Promise<Form$1>;
     private handleUnauthorized;
     getTodoStatus: (messageId: string) => Promise<"done" | "undone" | "unknown">;
     updateTodoStatus: (messageId: string, status: "done" | "undone") => Promise<boolean>;
@@ -368,26 +375,26 @@ interface StateContext {
     needsValidation?: boolean;
 }
 interface AppStateDefinition {
-    initial: State;
-    notAuthenticated: State;
-    authenticating: State;
-    authenticated: State;
-    registering: State;
-    registered: State;
-    checkingPurchase: State;
-    needsPurchase: State;
-    gettingApps: State;
-    checkingAccess: State;
-    noAccess: State;
-    error: State;
-    hasAccess: State;
-    loadingUser: State;
-    loggingOut: State;
-    creatingApp: State;
-    checkingCodicentAccess: State;
-    anonymous: State;
-    restoringFromCache: State;
-    validatingCache: State;
+    initial: State$1;
+    notAuthenticated: State$1;
+    authenticating: State$1;
+    authenticated: State$1;
+    registering: State$1;
+    registered: State$1;
+    checkingPurchase: State$1;
+    needsPurchase: State$1;
+    gettingApps: State$1;
+    checkingAccess: State$1;
+    noAccess: State$1;
+    error: State$1;
+    hasAccess: State$1;
+    loadingUser: State$1;
+    loggingOut: State$1;
+    creatingApp: State$1;
+    checkingCodicentAccess: State$1;
+    anonymous: State$1;
+    restoringFromCache: State$1;
+    validatingCache: State$1;
 }
 declare class AppStateMachine extends StateMachine {
     context: StateContext;
@@ -569,14 +576,14 @@ declare class CacheManager {
 }
 declare const stateMachineCacheManager: CacheManager;
 
-interface Message$1 {
+interface Message$2 {
     id: string;
     sender: "user" | "bot";
     content: string;
     isNew?: boolean;
 }
 declare function useChat(state: AppStateMachine, temporaryCodicent?: string): {
-    messages: Message$1[];
+    messages: Message$2[];
     isBotTyping: boolean;
     handleSend: (text: string, retryCount?: number) => void;
     newChat: () => void;
@@ -759,6 +766,51 @@ declare const useToaster: () => {
     ToasterComponent: () => react_jsx_runtime.JSX.Element;
 };
 
+declare const useDebugLogs: () => {
+    logs: string[];
+    clearLogs: () => void;
+};
+
+interface SchemaItem {
+    title: string;
+    type: string;
+    description: string;
+    format?: string;
+    readonly?: boolean;
+    items?: {
+        type: string;
+        enum?: string[];
+    };
+    default?: string;
+}
+interface Schema {
+    title: string;
+    description: string;
+    properties: {
+        [key: string]: SchemaItem;
+    };
+    "ui:options"?: {
+        backgroundColor?: string;
+        icon?: string;
+    };
+}
+interface DataSchemas {
+    [mention: string]: {
+        [key: string]: Schema;
+    };
+}
+/**
+ * Hook to observe data messages tagged with 'schema'
+ * @param user - User properties for the query
+ * @returns Array of data messages with dataschema tag
+ */
+declare function useObserveDataSchemas({ service }: {
+    service: CodicentService;
+}): {
+    getSchemas: () => Promise<DataSchemas>;
+    createDefaultDataFromSchema: (schema: Schema) => any;
+};
+
 interface CombinedPlaceholderDialogProps {
     open: boolean;
     templateVariables: TemplateVariable[];
@@ -957,6 +1009,123 @@ interface QrCodeDialogProps {
 }
 declare const QrCodeDialog: React__default.FC<QrCodeDialogProps>;
 
+interface QrScannerProps {
+    onScan?: (result: string) => void;
+    onError?: (error: string) => void;
+    width?: number;
+    height?: number;
+    facingMode?: "user" | "environment";
+    className?: string;
+}
+declare const QrScanner: React__default.FC<QrScannerProps>;
+
+interface Message$1 {
+    id: string;
+    content: string;
+    parentId?: string;
+    type?: string;
+    createdAt: Date;
+}
+interface GenericJsonRendererProps {
+    schema: Schema;
+    item: Message$1;
+    onPhotoUpdate?: (newPhoto: string) => void;
+    onStatusUpdate?: (isOpen: boolean) => void;
+    onUpdated?: (content: string) => void;
+    onSend?: (content: string, parentId?: string) => Promise<string>;
+}
+declare const GenericJsonRenderer: React__default.FC<GenericJsonRendererProps>;
+
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): ReactNode;
+}
+
+/**
+ * Component to display when the app is offline
+ */
+declare const OfflineMessage: () => react_jsx_runtime.JSX.Element;
+
+interface LanguageOption {
+    key: string;
+    name: string;
+}
+interface LanguageSelectorProps {
+    languages?: LanguageOption[];
+    defaultLanguage?: string;
+}
+declare const LanguageSelector: React.FC<LanguageSelectorProps>;
+
+/** Action configuration for a column, similar to app button actions */
+interface ColumnAction {
+    /** Icon component to display (e.g., from @fluentui/react-icons). Pass the component itself, not a string name. */
+    icon: React__default.ComponentType;
+    /** Tooltip text for the action icon */
+    tooltip?: string;
+    /** Callback when the action icon is clicked, receives the row data as context */
+    onClick: (rowData: Record<string, unknown>) => void;
+}
+interface ColumnDefinition {
+    key: string | string[];
+    title?: string;
+    hidden?: boolean;
+    hideOnMobile?: boolean;
+    maxWidth?: number;
+    type?: "file" | "checkbox" | undefined;
+    editable?: boolean;
+    filterable?: boolean;
+    /** Default sort direction for this column. If multiple columns have defaultSort, only the first one is used. */
+    defaultSort?: "asc" | "desc";
+    /** Optional action icon configuration. When set, displays an icon in the cell that triggers the callback with row data. */
+    action?: ColumnAction;
+    /** Optional formatter function to transform the cell value for display. Receives the raw value and returns the formatted string. */
+    format?: (value: unknown) => string;
+}
+interface ListViewProps$1 {
+    data: Record<string, unknown>[];
+    columns?: ColumnDefinition[];
+    canEdit?: boolean;
+    onEdit?: (item: Record<string, unknown>, index: number) => void;
+    onDelete?: (item: Record<string, unknown>, index: number) => void;
+    onToggleCheckbox?: (item: Record<string, unknown>, key: string | string[], newValue: boolean, index: number) => void;
+    onFilteredDataChange?: (filteredData: Record<string, unknown>[]) => void;
+}
+declare const _default: React__default.NamedExoticComponent<ListViewProps$1>;
+
+interface RecordModalProps {
+    open: boolean;
+    onClose: () => void;
+    onSave: (data: Record<string, unknown>) => Promise<void>;
+    columns: ColumnDefinition[];
+    initialData?: Record<string, unknown>;
+    title?: string;
+}
+declare const RecordModal: React__default.FC<RecordModalProps>;
+
+interface BulkUploadDialogProps {
+    project: string;
+    hidden: boolean;
+    onDismiss: () => void;
+    sendMessage: (text: string) => Promise<string | undefined>;
+    onUploaded?: () => void;
+    service: CodicentService;
+    tags?: string[];
+    title?: string;
+    description?: string;
+    dropText?: string;
+}
+declare const BulkUploadDialog: (props: BulkUploadDialogProps) => react_jsx_runtime.JSX.Element;
+
 declare class AppConfig {
     constructor();
     CHAT_INSTRUCTIONS: string;
@@ -1071,6 +1240,7 @@ interface AppConfigOptions {
     STRIPE_PRICE_ID: string;
     STRIPE_PUBLIC_KEY: string;
     STRIPE_SOURCE: string;
+    STRIPE_TRIAL_PERIOD_DAYS: number;
     SUBSCRIPTION_NEEDED: boolean;
     THEME_WELCOME: undefined | string;
     USER_PREFIX: string | undefined;
@@ -1176,4 +1346,327 @@ declare const Purchase: ({ state }: {
     state: CodicentAppState;
 }) => react_jsx_runtime.JSX.Element;
 
-export { AiInput, AppConfig, AppConfigOptions, AppFrame, AppInfo, AppStateDefinition, AppStateMachine, AudioIcon, AudioRecorder, AudioRecorderState, Button, CacheEntry, CacheManager, CachedUserSession, Chat, ChatInput, ChatMessage, CodicentAppState, CodicentService, CodicentServiceOptions, ColorPicker, CombinedPlaceholderDialog, Compose, CompoundButton, Content, CrmPage, CrmPagePersistent, DatePicker, FilePlaceholder, FileThumbnail, Footer, Form, FormAccept, FormInvite, Header, HtmlView, HtmlViewer, ImageViewer as ImageView, Input, ItemType, Label, Login, Logout, Markdown, MemberInfo, Message$1 as Message, Content$1 as MessageContent, MessageInput, MessageItem, Page, Profile, Prompt, Purchase, QrCodeDialog, RealtimeVoice, Sales, Search, SearchBox, Snap, SnapFooter, Spinner, StateContext, TemplateVariable, Text, TextHeader, Textarea, TimePicker, Title, Tool, ToolMergeStrategy, ToolsConfig, TranslationResponse, TypingIndicator, UploadFile, UploadFileProps, UploadFileRef, UrlProcessor, UseAuthState, UseCodicentAppOptions, UserInfo, VoiceIcon, VoiceIconProps, WavRecorder, WavStreamPlayer, createAppStateMachine, generateBrandVariants, getConfigValue, getGpsLocation, getTimeString, initCodicentApp, isMobileDevice, log, setBaseUrl, stateMachineCacheManager, useAppStyles, useAudioRecorder, useAuthState, useChat, useCodicentApp, useCodicentState, useLocalization, useRealtimeVoiceAI, useStateWithLocalStorage, useTemplateVariables, useToaster, useTools, withWakeLock };
+interface HelpProps {
+    content?: string;
+}
+declare const Help: FC<HelpProps>;
+
+declare const Debug: React__default.FC;
+
+declare function SchemaEditor(): react_jsx_runtime.JSX.Element;
+
+interface QrScanProps {
+    title?: string;
+    singleShot?: boolean;
+    onScanned: (result: string) => Promise<void>;
+    onBack?: () => void;
+    backgroundImageUrl?: string;
+    audioUrl?: string;
+}
+declare const QrScan: FC<QrScanProps>;
+
+interface FormProps {
+    formId: string;
+    service: CodicentService;
+    appName: string;
+    onFormSubmit?: (messageId: string) => void;
+}
+declare const Form: React__default.FC<FormProps>;
+
+/**
+ * @fileoverview Public TypeScript type definitions for codicent-app-sdk
+ * @module codicent-app-sdk/types
+ * @public
+ */
+/**
+ * Configuration for a button in the app navigation
+ * @public
+ */
+interface ButtonConfig {
+    /** Button title/label */
+    title: string;
+    /** Target URL or special action (e.g., "voice:...", "mailto:...", "./#/path") */
+    url: string;
+    /** Button type/style variant */
+    type?: string;
+    /** Required claim for button visibility (RBAC) */
+    claim?: string;
+    /** Inverse claim - hide button if user has this claim */
+    notClaim?: string;
+    /** Optional subtitle for compound buttons */
+    subtitle?: string;
+    /** Sub-buttons for multi-option buttons */
+    options?: ButtonConfig[];
+}
+
+/**
+ * List definitions keyed by tag name (e.g., "customer2", "offertjson")
+ * @public
+ */
+interface ListDefinitions {
+    [tagName: string]: ColumnDefinition[];
+}
+/**
+ * AI chat instructions configuration
+ * @public
+ */
+interface ChatInstructions {
+    /** Text-based chat instructions (system prompt for chat AI) */
+    chat?: string;
+    /** Voice-based chat instructions (system prompt for voice AI) */
+    voice?: string;
+}
+/**
+ * Per-app configuration for multi-app SDK instances
+ * @public
+ */
+interface AppButtonsConfig {
+    /** Navigation buttons for this app */
+    buttons: ButtonConfig[];
+    /** Task definitions (legacy, may be deprecated) */
+    tasks: {
+        id: string;
+        title: string;
+        content: string;
+    }[];
+    /** Optional list of suggested questions for chat prompts */
+    questions?: string[];
+    /** Voice AI instructions for this app */
+    voiceInstructions: string;
+    /** Whether to show HTML view in this app */
+    showHtmlView?: boolean;
+    /** Text chat AI instructions for this app */
+    chatInstructions: string;
+    /** List view column definitions per tag */
+    listDefinitions?: ListDefinitions;
+}
+/**
+ * Translation dictionary: { [translationKey: string]: translatedText }
+ * @public
+ */
+interface TranslationDictionary {
+    [key: string]: string;
+}
+/**
+ * Translations map: { [languageCode: string]: TranslationDictionary }
+ * @public
+ */
+interface Translations {
+    [languageCode: string]: TranslationDictionary;
+}
+/**
+ * Feature module flags
+ * @public
+ */
+interface ModuleFlags {
+    /** Enable sales/CRM module */
+    sales?: boolean;
+    /** Enable voice AI module */
+    voice?: boolean;
+    /** Enable forms module */
+    forms?: boolean;
+    /** Enable search module */
+    search?: boolean;
+    /** Enable QR code scanning module */
+    qr?: boolean;
+    /** Enable snap/camera module */
+    snap?: boolean;
+}
+/**
+ * Props for ListView component
+ * @public
+ */
+interface ListViewProps {
+    /** Array of data records to display */
+    data: Record<string, unknown>[];
+    /** Column definitions (if omitted, auto-generates from data keys) */
+    columns?: ColumnDefinition[];
+    /** Enable edit action */
+    canEdit?: boolean;
+    /** Edit callback */
+    onEdit?: (item: Record<string, unknown>, index: number) => void;
+    /** Delete callback */
+    onDelete?: (item: Record<string, unknown>, index: number) => void;
+    /** Checkbox toggle callback */
+    onToggleCheckbox?: (item: Record<string, unknown>, key: string | string[], newValue: boolean, index: number) => void;
+    /** Callback when filtered data changes (for parent component to track) */
+    onFilteredDataChange?: (filteredData: Record<string, unknown>[]) => void;
+}
+/**
+ * Props for Chat component
+ * @public
+ */
+interface ChatProps {
+    /** Codicent/project to chat with */
+    codicent?: string;
+    /** Initial message to send on mount */
+    initialMessage?: string;
+    /** Custom chat instructions (overrides default) */
+    instructions?: string;
+    /** Show/hide message bar */
+    showMessageBar?: boolean;
+    /** Custom placeholder text for input */
+    placeholder?: string;
+}
+/**
+ * Schema definition for data tags
+ * @public
+ */
+interface SchemaDefinition {
+    /** JSON Schema for the tag */
+    schema: object;
+    /** UI hints for form generation */
+    uiSchema?: object;
+}
+
+/**
+ * Data message structure (returned by readDataMessages)
+ * Defined in global.d.ts as part of the Codicent global API
+ * @public
+ */
+interface DataMessage$1 {
+    id: string;
+    fileId: string | null;
+    fileIds: string[];
+    data: {
+        [key: string]: string;
+    };
+    createdAt: string;
+    tags: string[];
+    mentions: string[];
+}
+/**
+ * File information structure
+ * @public
+ */
+interface FileInfo$1 {
+    id: string;
+    filename: string;
+    contentType: string;
+    createdAt: string;
+}
+/**
+ * Generic message structure
+ * Note: There's also a Message interface in hooks/useChat that may differ
+ * @public
+ */
+interface CodicentMessage {
+    id: string;
+    content: string;
+    parentId?: string;
+    type?: string;
+    createdAt: Date;
+}
+
+/**
+ * @fileoverview Simplified app bootstrap for codicent-app-sdk v2
+ * @module codicent-app-sdk/bootstrap
+ * @public
+ */
+
+/**
+ * Complete app configuration for createCodicentApp()
+ * @public
+ */
+interface CreateAppConfig {
+    /** Application name */
+    name: string;
+    /** API base URL (e.g., "https://codicent.com/" or custom domain) */
+    apiBaseUrl: string;
+    /** App-specific URL prefix (used in routing and namespacing) */
+    appPrefix?: string;
+    /** User namespace prefix */
+    userPrefix?: string;
+    /** Navigation buttons */
+    buttons?: ButtonConfig[];
+    /** List view column definitions per tag */
+    listDefinitions?: ListDefinitions;
+    /** i18n translations map */
+    translations?: Translations;
+    /** Default language code (e.g., "en", "sv") */
+    defaultLanguage?: string;
+    /** Feature module flags */
+    modules?: ModuleFlags;
+    /** AI chat instructions */
+    chatInstructions?: string;
+    /** AI voice instructions */
+    voiceInstructions?: string;
+    /** Auth0 configuration */
+    auth0?: {
+        domain: string;
+        clientId: string;
+        audience?: string;
+    };
+    /** Stripe configuration */
+    stripe?: {
+        publicKey: string;
+        priceId?: string;
+        trialDays?: number;
+    };
+    /** Theme/branding configuration */
+    theme?: {
+        headerColor?: string;
+        footerColor?: string;
+        buttonColor?: string;
+        logoUrl?: string;
+    };
+}
+/**
+ * CodicentApp instance returned by createCodicentApp()
+ * @public
+ */
+interface CodicentApp {
+    /**
+     * Render the app to a DOM element
+     * @param container - DOM element or selector to render into
+     */
+    render(container: HTMLElement | string): Root;
+    /**
+     * Unmount the app
+     */
+    unmount(): void;
+    /**
+     * Get the current configuration
+     */
+    getConfig(): CreateAppConfig;
+}
+/**
+ * Create a Codicent app with the specified configuration.
+ *
+ * This is the recommended way to bootstrap a new Codicent vertical app.
+ * Pass a configuration object and call `.render()` to mount the app.
+ *
+ * @example
+ * ```tsx
+ * import { createCodicentApp } from "codicent-app-sdk";
+ *
+ * const app = createCodicentApp({
+ *   name: "My CRM",
+ *   apiBaseUrl: "https://codicent.com/",
+ *   buttons: [
+ *     { title: "Customers", url: "./#/list?tag=customer2" },
+ *     { title: "Chat", url: "./#/chat" },
+ *   ],
+ *   listDefinitions: {
+ *     customer2: [
+ *       { key: "name", title: "Name", filterable: true },
+ *       { key: "email", title: "Email" },
+ *     ],
+ *   },
+ *   translations: {
+ *     en: { "Kunder": "Customers" },
+ *     sv: { "Customers": "Kunder" },
+ *   },
+ *   modules: { sales: true, voice: false },
+ * });
+ *
+ * app.render("#root");
+ * ```
+ *
+ * @param config - App configuration
+ * @returns CodicentApp instance with render() method
+ * @public
+ */
+declare function createCodicentApp(config: CreateAppConfig): CodicentApp;
+
+export { AiInput, AppButtonsConfig, AppConfig, AppConfigOptions, AppFrame, AppInfo, AppStateDefinition, AppStateMachine, AudioIcon, AudioRecorder, AudioRecorderState, BulkUploadDialog, Button, ButtonConfig, CacheEntry, CacheManager, CachedUserSession, Chat, ChatInput, ChatInstructions, ChatMessage, ChatProps, CodicentApp, CodicentAppState, CodicentMessage, CodicentService, CodicentServiceOptions, ColorPicker, ColumnAction, ColumnDefinition, CombinedPlaceholderDialog, Compose, CompoundButton, Content, CreateAppConfig, CrmPage, CrmPagePersistent, DataMessage$1 as DataMessage, DataSchemas, DatePicker, Debug, ErrorBoundary, FileInfo$1 as FileInfo, FilePlaceholder, FileThumbnail, Footer, Form$1 as Form, FormAccept, FormInvite, Form as FormPage, GenericJsonRenderer, Header, Help, HtmlView, HtmlViewer, ImageViewer as ImageView, Input, ItemType, Label, LanguageSelector, ListDefinitions, _default as ListView, ListViewProps, Login, Logout, Markdown, MemberInfo, Message$2 as Message, Content$1 as MessageContent, MessageInput, MessageItem, ModuleFlags, OfflineMessage, Page, Profile, Prompt, Purchase, QrCodeDialog, QrScan, QrScanner, RealtimeVoice, RecordModal, RecordModalProps, Sales, Schema, SchemaDefinition, SchemaEditor, SchemaItem, Search, SearchBox, Snap, SnapFooter, Spinner, StateContext, TemplateVariable, Text, TextHeader, Textarea, TimePicker, Title, Tool, ToolMergeStrategy, ToolsConfig, TranslationDictionary, TranslationResponse, Translations, TypingIndicator, UploadFile, UploadFileProps, UploadFileRef, UrlProcessor, UseAuthState, UseCodicentAppOptions, UserInfo, VoiceIcon, VoiceIconProps, WavRecorder, WavStreamPlayer, createAppStateMachine, createCodicentApp, generateBrandVariants, getConfigValue, getGpsLocation, getTimeString, initCodicentApp, isMobileDevice, log, setBaseUrl, stateMachineCacheManager, useAppStyles, useAudioRecorder, useAuthState, useChat, useCodicentApp, useCodicentState, useDebugLogs, useLocalization, useObserveDataSchemas, useRealtimeVoiceAI, useStateWithLocalStorage, useTemplateVariables, useToaster, useTools, withWakeLock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codicent-app-sdk",
-  "version": "0.3.120",
+  "version": "0.4.1",
   "description": "SDK for building AI-powered applications with Codicent",
   "type": "module",
   "main": "dist/cjs/index.js",
@@ -47,6 +47,7 @@
     "react-router-dom": "^6.27.0"
   },
   "dependencies": {
+    "jsqr": "^1.4.0",
     "lodash": "^4.17.21",
     "nosleep.js": "^0.12.0",
     "react-json-editor-ajrm": "^2.5.14",
@@ -58,10 +59,10 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@fluentui/react-components": "^9.60.0",
-    "@fluentui/react-icons": "^2.0.292",
     "@fluentui/react": "^8.123.0",
+    "@fluentui/react-components": "^9.60.0",
     "@fluentui/react-datepicker-compat": "^0.6.3",
+    "@fluentui/react-icons": "^2.0.292",
     "@fluentui/react-timepicker-compat": "^0.4.3",
     "@openai/realtime-api-beta": "github:izaxon/openai-realtime-api-beta",
     "@rollup/plugin-commonjs": "^24.0.1",