@filigran/chatbot 1.1.1 → 3.0.0

package/dist/index.d.ts

@@ -1,228 +1,94 @@
-import { Ref } from 'react';
+import { FunctionComponent } from 'react';
 
-type BubbleParams = {
-    theme?: BubbleTheme;
-    ref?: HTMLElement;
-    left: number;
-    text?: string;
-};
-type BubbleTheme = {
-    chatWindow?: ChatWindowTheme;
-    button?: ButtonTheme;
-    tooltip?: ToolTipTheme;
-    disclaimer?: DisclaimerPopUpTheme;
-    customCSS?: string;
-    form?: FormTheme;
-};
-type FormTheme = {
-    backgroundColor?: string;
-    textColor?: string;
-};
-type TextInputTheme = {
-    backgroundColor?: string;
-    textColor?: string;
-    placeholder?: string;
-    sendButtonColor?: string;
-    maxChars?: number;
-    maxCharsWarningMessage?: string;
-    autoFocus?: boolean;
-    sendMessageSound?: boolean;
-    sendSoundLocation?: string;
-    receiveMessageSound?: boolean;
-    receiveSoundLocation?: string;
-};
-type UserMessageTheme = {
-    backgroundColor?: string;
-    textColor?: string;
-    showAvatar?: boolean;
-    avatarSrc?: string;
-};
-type BotMessageTheme = {
-    backgroundColor?: string;
-    textColor?: string;
-    showAvatar?: boolean;
-    avatarSrc?: string;
-};
-type FooterTheme = {
-    showFooter?: boolean;
-    textColor?: string;
-    text?: string;
-    company?: string;
-    companyLink?: string;
-};
-type ChatWindowTheme = {
-    showTitle?: boolean;
-    showAgentMessages?: boolean;
-    title?: string;
-    titleAvatarSrc?: string;
-    titleTextColor?: string;
-    titleBackgroundColor?: string;
-    welcomeMessage?: string;
-    errorMessage?: string;
-    backgroundColor?: string;
-    backgroundImage?: string;
-    boxShadow?: string;
-    height?: number;
-    width?: number;
-    fontSize?: number;
-    userMessage?: UserMessageTheme;
-    botMessage?: BotMessageTheme;
-    textInput?: TextInputTheme;
-    footer?: FooterTheme;
-    sourceDocsTitle?: string;
-    poweredByTextColor?: string;
-    starterPrompts?: string[];
-    starterPromptFontSize?: number;
-    clearChatOnReload?: boolean;
-    dateTimeToggle?: DateTimeToggleTheme;
-    renderHTML?: boolean;
-};
-type ButtonTheme = {
-    size?: 'small' | 'medium' | 'large' | number;
-    backgroundColor?: string;
-    iconColor?: string;
-    customIconSrc?: string;
-    top?: number;
-    left?: number;
-    dragAndDrop?: boolean;
-    autoWindowOpen?: autoWindowOpenTheme;
-};
-type ToolTipTheme = {
-    showTooltip?: boolean;
-    tooltipMessage?: string;
-    tooltipBackgroundColor?: string;
-    tooltipTextColor?: string;
-    tooltipFontSize?: number;
-};
-type autoWindowOpenTheme = {
-    autoOpen?: boolean;
-    openDelay?: number;
-    autoOpenOnMobile?: boolean;
-};
-type DisclaimerPopUpTheme = {
-    title?: string;
-    message?: string;
-    textColor?: string;
-    buttonColor?: string;
-    buttonTextColor?: string;
-    buttonText?: string;
-    blurredBackgroundColor?: string;
-    backgroundColor?: string;
-    denyButtonBgColor?: string;
-    denyButtonText?: string;
-};
-type DateTimeToggleTheme = {
-    date?: boolean;
-    time?: boolean;
-};
-
-type FilePreviewData = string | ArrayBuffer;
-type FilePreviewItem = {
-    data: FilePreviewData;
-    mime: string;
+type ChatMode = 'sidebar' | 'floating' | 'fullscreen';
+type BackendType = 'legacy' | 'rest' | 'ag-ui';
+/**
+ * Custom API endpoint configuration.
+ * When using single endpoint mode (like OpenCTI's /chatbot), set singleEndpoint to true
+ * and the component will POST everything to apiBaseUrl directly.
+ */
+interface ApiEndpoints {
+    /** If true, all requests go to apiBaseUrl as POST. Default false uses REST-style endpoints. */
+    singleEndpoint?: boolean;
+    /** Path for sending messages. Default: '/chat/messages' */
+    messages?: string;
+    /** Path for fetching agents. Default: '/chat/agents'. Set to null to disable. */
+    agents?: string | null;
+    /** Path for fetching session history. Default: '/chat/sessions'. Set to null to disable. */
+    sessions?: string | null;
+}
+interface ChatPanelProps {
+    mode: ChatMode;
+    onClose: () => void;
+    onModeChange: (mode: ChatMode) => void;
+    topOffset?: number;
+    apiBaseUrl: string;
+    /** Custom API endpoint configuration. */
+    apiEndpoints?: ApiEndpoints;
+    agentDashboardUrl?: string;
+    user: {
+        firstName: string;
+    };
+    t?: (key: string) => string;
+    accentColor?: string;
+    logoIcon?: React.ReactNode;
+    promptSuggestions?: string[];
+    /** Enable resizable sidebar (drag to resize). Only applies when mode is 'sidebar'. */
+    resizable?: boolean;
+    /** Callback when sidebar width changes during resize. */
+    onWidthChange?: (width: number) => void;
+    /** Callback when resize drag starts. */
+    onResizeStart?: () => void;
+    /** Callback when resize drag ends. */
+    onResizeEnd?: () => void;
+    /**
+     * CSS selector for the main content element that should be pushed when sidebar is open.
+     * When set, the component will automatically apply margin-right to push the content.
+     * Example: '#main-content' or '.app-content'
+     */
+    pushContentSelector?: string;
+    /**
+     * Backend protocol to use.
+     * - 'rest': XTM One Chat API (default)
+     * - 'legacy': Single POST endpoint with Flowise-style SSE events
+     * - 'ag-ui': AG-UI protocol (https://github.com/ag-ui-protocol/ag-ui)
+     */
+    backendType?: BackendType;
+}
+interface ChatToggleButtonProps {
+    isOpen: boolean;
+    onToggle: () => void;
+    label?: string;
+    accentColor?: string;
+    icon?: React.ReactNode;
+}
+interface ChatMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: Date;
+    files?: ChatFile[];
+    toolNames?: string[];
+    toolCallCount?: number;
+    iterations?: number;
+}
+interface ChatFile {
     name: string;
-    preview: string;
     type: string;
-};
-type messageType = 'apiMessage' | 'userMessage' | 'usermessagewaiting' | 'leadCaptureMessage';
-type IAgentReasoning = {
-    agentName?: string;
-    messages?: string[];
-    usedTools?: any[];
-    artifacts?: FileUpload[];
-    sourceDocuments?: any[];
-    instructions?: string;
-    nextAgent?: string;
-};
-type IAction = {
-    id?: string;
-    data?: any;
-    elements?: Array<{
-        type: string;
-        label: string;
-    }>;
-    mapping?: {
-        approve: string;
-        reject: string;
-        toolCalls: any[];
-    };
-};
-type FileUpload = Omit<FilePreviewItem, 'preview'>;
-type MessageType = {
-    messageId?: string;
-    message: string;
-    type: messageType;
-    sourceDocuments?: any;
-    fileAnnotations?: any;
-    fileUploads?: Partial<FileUpload>[];
-    artifacts?: Partial<FileUpload>[];
-    agentReasoning?: IAgentReasoning[];
-    execution?: any;
-    agentFlowEventStatus?: string;
-    agentFlowExecutedData?: any;
-    usedTools?: any[];
-    action?: IAction | null;
-    id?: string;
-    followUpPrompts?: string;
-    dateTime?: string;
-};
-type observerConfigType = (accessor: string | boolean | object | MessageType[]) => void;
-type observersConfigType = Record<'observeUserInput' | 'observeLoading' | 'observeMessages', observerConfigType>;
-type BotProps = {
-    expanded?: boolean;
-    onExpand?: () => void;
-    agenticUrl: string;
-    onRequest?: (request: RequestInit) => Promise<void>;
-    chatflowConfig?: Record<string, unknown> & {
-        vars: Record<string, string>;
-    };
-    backgroundColor?: string;
-    welcomeMessage?: string;
-    errorMessage?: string;
-    botMessage?: BotMessageTheme;
-    userMessage?: UserMessageTheme;
-    textInput?: TextInputTheme;
-    poweredByTextColor?: string;
-    badgeBackgroundColor?: string;
-    bubbleBackgroundColor?: string;
-    bubbleTextColor?: string;
-    showTitle?: boolean;
-    showAgentMessages?: boolean;
-    title?: string;
-    titleAvatarSrc?: string;
-    titleTextColor?: string;
-    titleBackgroundColor?: string;
-    formBackgroundColor?: string;
-    formTextColor?: string;
-    fontSize?: number;
-    isFullPage?: boolean;
-    footer?: FooterTheme;
-    sourceDocsTitle?: string;
-    observersConfig?: observersConfigType;
-    starterPrompts?: string[] | Record<string, {
-        prompt: string;
-    }>;
-    starterPromptFontSize?: number;
-    clearChatOnReload?: boolean;
-    disclaimer?: DisclaimerPopUpTheme;
-    dateTimeToggle?: DateTimeToggleTheme;
-    renderHTML?: boolean;
-    closeBot?: () => void;
-};
+    size: number;
+    dataUrl?: string;
+}
+interface XtmAgent {
+    id: string;
+    name: string;
+    slug: string | null;
+    icon: string | null;
+    description: string | null;
+}
 
-type BubbleProps = BotProps & BubbleParams & {
-    open?: boolean;
-    onClose?: () => void;
-};
+declare const ChatPanel: FunctionComponent<ChatPanelProps>;
 
-declare module 'react/jsx-runtime' {
-    namespace JSX {
-        interface IntrinsicElements {
-            "filigran-chatbot": Omit<BubbleProps, 'ref'> & {
-                ref: Ref<unknown>;
-            };
-        }
-    }
-}
+declare const ChatToggleButton: FunctionComponent<ChatToggleButtonProps>;
 
-export type { BotProps, BubbleProps };
+export { ChatPanel, ChatToggleButton };
+export type { ApiEndpoints, BackendType, ChatFile, ChatMessage, ChatMode, ChatPanelProps, ChatToggleButtonProps, XtmAgent };