@jupyter/chat 0.1.0

package/lib/__tests__/model.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/__tests__/model.spec.js

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */
+import { ChatModel } from '../model';
+describe('test chat model', () => {
+    describe('model instantiation', () => {
+        it('should create a ChatModel', () => {
+            const model = new ChatModel();
+            expect(model).toBeInstanceOf(ChatModel);
+        });
+        it('should dispose a ChatModel', () => {
+            const model = new ChatModel();
+            model.dispose();
+            expect(model.isDisposed).toBeTruthy();
+        });
+    });
+    describe('incoming message', () => {
+        class TestChat extends ChatModel {
+            formatChatMessage(message) {
+                message.body = 'formatted msg';
+                return message;
+            }
+        }
+        let model;
+        let messages;
+        const msg = {
+            type: 'msg',
+            id: 'message1',
+            time: Date.now() / 1000,
+            body: 'message test',
+            sender: { username: 'user' }
+        };
+        beforeEach(() => {
+            messages = [];
+        });
+        it('should signal incoming message', () => {
+            model = new ChatModel();
+            model.messagesUpdated.connect((sender) => {
+                expect(sender).toBe(model);
+                messages = model.messages;
+            });
+            model.messageAdded(msg);
+            expect(messages).toHaveLength(1);
+            expect(messages[0]).toBe(msg);
+        });
+        it('should format message', () => {
+            model = new TestChat();
+            model.messagesUpdated.connect((sender) => {
+                expect(sender).toBe(model);
+                messages = model.messages;
+            });
+            model.messageAdded({ ...msg });
+            expect(messages).toHaveLength(1);
+            expect(messages[0]).not.toBe(msg);
+            expect(messages[0].body).toBe('formatted msg');
+        });
+    });
+    describe('model config', () => {
+        it('should have empty config', () => {
+            const model = new ChatModel();
+            expect(model.config.sendWithShiftEnter).toBeUndefined();
+        });
+        it('should allow config', () => {
+            const model = new ChatModel({ config: { sendWithShiftEnter: true } });
+            expect(model.config.sendWithShiftEnter).toBeTruthy();
+        });
+    });
+});

package/lib/__tests__/widgets.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/__tests__/widgets.spec.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */
+import { RenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ChatModel } from '../model';
+import { ChatWidget } from '../widgets/chat-widget';
+describe('test chat widget', () => {
+    let model;
+    let rmRegistry;
+    beforeEach(() => {
+        model = new ChatModel();
+        rmRegistry = new RenderMimeRegistry();
+    });
+    describe('model instantiation', () => {
+        it('should create a ChatModel', () => {
+            const widget = new ChatWidget({ model, rmRegistry });
+            expect(widget).toBeInstanceOf(ChatWidget);
+        });
+        it('should dispose a ChatModel', () => {
+            const widget = new ChatWidget({ model, rmRegistry });
+            widget.dispose();
+            expect(widget.isDisposed).toBeTruthy();
+        });
+        it('should provides the model', () => {
+            const widget = new ChatWidget({ model, rmRegistry });
+            expect(widget.model).toBe(model);
+        });
+    });
+});

package/lib/components/chat-input.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material';
+export declare function ChatInput(props: ChatInput.IProps): JSX.Element;
+/**
+ * The chat input namespace.
+ */
+export declare namespace ChatInput {
+    /**
+     * The properties of the react element.
+     */
+    interface IProps {
+        /**
+         * The initial value of the input (default to '')
+         */
+        value?: string;
+        /**
+         * The function to be called to send the message.
+         */
+        onSend: (input: string) => unknown;
+        /**
+         * The function to be called to cancel editing.
+         */
+        onCancel?: () => unknown;
+        /**
+         * Whether using shift+enter to send the message.
+         */
+        sendWithShiftEnter: boolean;
+        /**
+         * Custom mui/material styles.
+         */
+        sx?: SxProps<Theme>;
+    }
+}

package/lib/components/chat-input.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { useState } from 'react';
+import { Box, TextField, IconButton, InputAdornment } from '@mui/material';
+import { Send, Cancel } from '@mui/icons-material';
+import clsx from 'clsx';
+const INPUT_BOX_CLASS = 'jp-chat-input-container';
+const SEND_BUTTON_CLASS = 'jp-chat-send-button';
+const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
+export function ChatInput(props) {
+    const [input, setInput] = useState(props.value || '');
+    function handleKeyDown(event) {
+        if (event.key === 'Enter' &&
+            ((props.sendWithShiftEnter && event.shiftKey) ||
+                (!props.sendWithShiftEnter && !event.shiftKey))) {
+            onSend();
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    /**
+     * Triggered when sending the message.
+     */
+    function onSend() {
+        setInput('');
+        props.onSend(input);
+    }
+    /**
+     * Triggered when cancelling edition.
+     */
+    function onCancel() {
+        setInput(props.value || '');
+        props.onCancel();
+    }
+    // Set the helper text based on whether Shift+Enter is used for sending.
+    const helperText = props.sendWithShiftEnter ? (React.createElement("span", null,
+        "Press ",
+        React.createElement("b", null, "Shift"),
+        "+",
+        React.createElement("b", null, "Enter"),
+        " to send message")) : (React.createElement("span", null,
+        "Press ",
+        React.createElement("b", null, "Shift"),
+        "+",
+        React.createElement("b", null, "Enter"),
+        " to add a new line"));
+    return (React.createElement(Box, { sx: props.sx, className: clsx(INPUT_BOX_CLASS) },
+        React.createElement(Box, { sx: { display: 'flex' } },
+            React.createElement(TextField, { value: input, onChange: e => setInput(e.target.value), fullWidth: true, variant: "outlined", multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", InputProps: {
+                    endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                        props.onCancel && (React.createElement(IconButton, { size: "small", color: "primary", onClick: onCancel, disabled: !input.trim().length, title: 'Cancel edition', className: clsx(CANCEL_BUTTON_CLASS) },
+                            React.createElement(Cancel, null))),
+                        React.createElement(IconButton, { size: "small", color: "primary", onClick: onSend, disabled: !input.trim().length, title: `Send message ${props.sendWithShiftEnter ? '(SHIFT+ENTER)' : '(ENTER)'}`, className: clsx(SEND_BUTTON_CLASS) },
+                            React.createElement(Send, null))))
+                }, FormHelperTextProps: {
+                    sx: { marginLeft: 'auto', marginRight: 0 }
+                }, helperText: input.length > 2 ? helperText : ' ' }))));
+}

package/lib/components/chat-messages.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import type { SxProps, Theme } from '@mui/material';
+import { IChatModel } from '../model';
+import { IChatMessage, IUser } from '../types';
+type BaseMessageProps = {
+    rmRegistry: IRenderMimeRegistry;
+    model: IChatModel;
+};
+type ChatMessageProps = BaseMessageProps & {
+    message: IChatMessage;
+};
+type ChatMessagesProps = BaseMessageProps & {
+    messages: IChatMessage[];
+};
+export type ChatMessageHeaderProps = IUser & {
+    timestamp: number;
+    rawTime?: boolean;
+    deleted?: boolean;
+    edited?: boolean;
+    sx?: SxProps<Theme>;
+};
+export declare function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element;
+/**
+ * The messages list UI.
+ */
+export declare function ChatMessages(props: ChatMessagesProps): JSX.Element;
+/**
+ * the message UI.
+ */
+export declare function ChatMessage(props: ChatMessageProps): JSX.Element;
+export {};

package/lib/components/chat-messages.js

@@ -0,0 +1,162 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Avatar, Box, Typography } from '@mui/material';
+import clsx from 'clsx';
+import React, { useState, useEffect } from 'react';
+import { ChatInput } from './chat-input';
+import { RendermimeMarkdown } from './rendermime-markdown';
+const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
+const MESSAGE_CLASS = 'jp-chat-message';
+const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
+const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
+export function ChatMessageHeader(props) {
+    var _a, _b;
+    const [datetime, setDatetime] = useState({});
+    const sharedStyles = {
+        height: '24px',
+        width: '24px'
+    };
+    /**
+     * Effect: update cached datetime strings upon receiving a new message.
+     */
+    useEffect(() => {
+        if (!datetime[props.timestamp]) {
+            const newDatetime = {};
+            let datetime;
+            const currentDate = new Date();
+            const sameDay = (date) => date.getFullYear() === currentDate.getFullYear() &&
+                date.getMonth() === currentDate.getMonth() &&
+                date.getDate() === currentDate.getDate();
+            const msgDate = new Date(props.timestamp * 1000); // Convert message time to milliseconds
+            // Display only the time if the day of the message is the current one.
+            if (sameDay(msgDate)) {
+                // Use the browser's default locale
+                datetime = msgDate.toLocaleTimeString([], {
+                    hour: 'numeric',
+                    minute: '2-digit'
+                });
+            }
+            else {
+                // Use the browser's default locale
+                datetime = msgDate.toLocaleString([], {
+                    day: 'numeric',
+                    month: 'numeric',
+                    year: 'numeric',
+                    hour: 'numeric',
+                    minute: '2-digit'
+                });
+            }
+            newDatetime[props.timestamp] = datetime;
+            setDatetime(newDatetime);
+        }
+    });
+    const bgcolor = props.color;
+    const avatar = props.avatar_url ? (React.createElement(Avatar, { sx: {
+            ...sharedStyles,
+            ...(bgcolor && { bgcolor })
+        }, src: props.avatar_url })) : props.initials ? (React.createElement(Avatar, { sx: {
+            ...sharedStyles,
+            ...(bgcolor && { bgcolor })
+        } },
+        React.createElement(Typography, { sx: {
+                fontSize: 'var(--jp-ui-font-size1)',
+                color: 'var(--jp-ui-inverse-font-color1)'
+            } }, props.initials))) : null;
+    const name = (_b = (_a = props.display_name) !== null && _a !== void 0 ? _a : props.name) !== null && _b !== void 0 ? _b : (props.username || 'User undefined');
+    return (React.createElement(Box, { className: MESSAGE_HEADER_CLASS, sx: {
+            display: 'flex',
+            alignItems: 'center',
+            '& > :not(:last-child)': {
+                marginRight: 3
+            },
+            ...props.sx
+        } },
+        avatar,
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                flexGrow: 1,
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                alignItems: 'center'
+            } },
+            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+                React.createElement(Typography, { sx: { fontWeight: 700, color: 'var(--jp-ui-font-color1)' } }, name),
+                (props.deleted || props.edited) && (React.createElement(Typography, { sx: {
+                        fontStyle: 'italic',
+                        fontSize: 'var(--jp-content-font-size0)',
+                        paddingLeft: '0.5em'
+                    } }, props.deleted ? '(message deleted)' : '(edited)'))),
+            React.createElement(Typography, { className: MESSAGE_TIME_CLASS, sx: {
+                    fontSize: '0.8em',
+                    color: 'var(--jp-ui-font-color2)',
+                    fontWeight: 300
+                }, title: props.rawTime ? 'Unverified time' : '' }, `${datetime[props.timestamp]}${props.rawTime ? '*' : ''}`))));
+}
+/**
+ * The messages list UI.
+ */
+export function ChatMessages(props) {
+    return (React.createElement(Box, { sx: {
+            '& > :not(:last-child)': {
+                borderBottom: '1px solid var(--jp-border-color2)'
+            }
+        }, className: clsx(MESSAGES_BOX_CLASS) }, props.messages.map((message, i) => {
+        let sender;
+        if (typeof message.sender === 'string') {
+            sender = { username: message.sender };
+        }
+        else {
+            sender = message.sender;
+        }
+        return (
+        // extra div needed to ensure each bubble is on a new line
+        React.createElement(Box, { key: i, sx: { padding: '1em 1em 0 1em' }, className: clsx(MESSAGE_CLASS) },
+            React.createElement(ChatMessageHeader, { ...sender, timestamp: message.time, rawTime: message.raw_time, deleted: message.deleted, edited: message.edited, sx: { marginBottom: 3 } }),
+            React.createElement(ChatMessage, { ...props, message: message })));
+    })));
+}
+/**
+ * the message UI.
+ */
+export function ChatMessage(props) {
+    var _a;
+    const { message, model, rmRegistry } = props;
+    let canEdit = false;
+    let canDelete = false;
+    if (model.user !== undefined && !message.deleted) {
+        const username = typeof message.sender === 'string'
+            ? message.sender
+            : message.sender.username;
+        if (model.user.username === username && model.updateMessage !== undefined) {
+            canEdit = true;
+        }
+        if (model.user.username === username && model.deleteMessage !== undefined) {
+            canDelete = true;
+        }
+    }
+    const [edit, setEdit] = useState(false);
+    const cancelEdition = () => {
+        setEdit(false);
+    };
+    const updateMessage = (id, input) => {
+        if (!canEdit) {
+            return;
+        }
+        // Update the message
+        const updatedMessage = { ...message };
+        updatedMessage.body = input;
+        model.updateMessage(id, updatedMessage);
+        setEdit(false);
+    };
+    const deleteMessage = (id) => {
+        if (!canDelete) {
+            return;
+        }
+        // Delete the message
+        model.deleteMessage(id);
+    };
+    // Empty if the message has been deleted
+    return message.deleted ? (React.createElement(React.Fragment, null)) : (React.createElement("div", null, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), sendWithShiftEnter: (_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false })) : (React.createElement(RendermimeMarkdown, { rmRegistry: rmRegistry, markdownStr: message.body, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined }))));
+}

package/lib/components/chat.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { IThemeManager } from '@jupyterlab/apputils';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IChatModel } from '../model';
+export declare function Chat(props: Chat.IOptions): JSX.Element;
+/**
+ * The chat UI namespace
+ */
+export declare namespace Chat {
+    /**
+     * The options to build the Chat UI.
+     */
+    interface IOptions {
+        /**
+         * The chat model.
+         */
+        model: IChatModel;
+        /**
+         * The rendermime registry.
+         */
+        rmRegistry: IRenderMimeRegistry;
+        /**
+         * The theme manager.
+         */
+        themeManager?: IThemeManager | null;
+        /**
+         * The view to render.
+         */
+        chatView?: ChatView;
+        /**
+         * A settings panel that can be used for dedicated settings (e.g. jupyter-ai)
+         */
+        settingsPanel?: () => JSX.Element;
+    }
+    /**
+     * The view to render.
+     * The settings view is available only if the settings panel is provided in options.
+     */
+    enum ChatView {
+        Chat = 0,
+        Settings = 1
+    }
+}

package/lib/components/chat.js

@@ -0,0 +1,100 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { IconButton } from '@mui/material';
+import { Box } from '@mui/system';
+import React, { useState, useEffect } from 'react';
+import { JlThemeProvider } from './jl-theme-provider';
+import { ChatMessages } from './chat-messages';
+import { ChatInput } from './chat-input';
+import { ScrollContainer } from './scroll-container';
+function ChatBody({ model, rmRegistry: renderMimeRegistry }) {
+    var _a;
+    const [messages, setMessages] = useState([]);
+    /**
+     * Effect: fetch history and config on initial render
+     */
+    useEffect(() => {
+        async function fetchHistory() {
+            if (!model.getHistory) {
+                return;
+            }
+            model
+                .getHistory()
+                .then(history => setMessages(history.messages))
+                .catch(e => console.error(e));
+        }
+        fetchHistory();
+    }, [model]);
+    /**
+     * Effect: listen to chat messages
+     */
+    useEffect(() => {
+        function handleChatEvents(_) {
+            setMessages([...model.messages]);
+        }
+        model.messagesUpdated.connect(handleChatEvents);
+        return function cleanup() {
+            model.messagesUpdated.disconnect(handleChatEvents);
+        };
+    }, [model]);
+    // no need to append to messageGroups imperatively here. all of that is
+    // handled by the listeners registered in the effect hooks above.
+    const onSend = async (input) => {
+        // send message to backend
+        model.addMessage({ body: input });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ScrollContainer, { sx: { flexGrow: 1 } },
+            React.createElement(ChatMessages, { messages: messages, rmRegistry: renderMimeRegistry, model: model })),
+        React.createElement(ChatInput, { onSend: onSend, sx: {
+                paddingLeft: 4,
+                paddingRight: 4,
+                paddingTop: 3.5,
+                paddingBottom: 0,
+                borderTop: '1px solid var(--jp-border-color1)'
+            }, sendWithShiftEnter: (_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false })));
+}
+export function Chat(props) {
+    var _a;
+    const [view, setView] = useState(props.chatView || Chat.ChatView.Chat);
+    return (React.createElement(JlThemeProvider, { themeManager: (_a = props.themeManager) !== null && _a !== void 0 ? _a : null },
+        React.createElement(Box
+        // root box should not include padding as it offsets the vertical
+        // scrollbar to the left
+        , { 
+            // root box should not include padding as it offsets the vertical
+            // scrollbar to the left
+            sx: {
+                width: '100%',
+                height: '100%',
+                boxSizing: 'border-box',
+                background: 'var(--jp-layout-color0)',
+                display: 'flex',
+                flexDirection: 'column'
+            } },
+            React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
+                view !== Chat.ChatView.Chat ? (React.createElement(IconButton, { onClick: () => setView(Chat.ChatView.Chat) },
+                    React.createElement(ArrowBackIcon, null))) : (React.createElement(Box, null)),
+                view === Chat.ChatView.Chat && props.settingsPanel ? (React.createElement(IconButton, { onClick: () => setView(Chat.ChatView.Settings) },
+                    React.createElement(SettingsIcon, null))) : (React.createElement(Box, null))),
+            view === Chat.ChatView.Chat && (React.createElement(ChatBody, { model: props.model, rmRegistry: props.rmRegistry })),
+            view === Chat.ChatView.Settings && props.settingsPanel && (React.createElement(props.settingsPanel, null)))));
+}
+/**
+ * The chat UI namespace
+ */
+(function (Chat) {
+    /**
+     * The view to render.
+     * The settings view is available only if the settings panel is provided in options.
+     */
+    let ChatView;
+    (function (ChatView) {
+        ChatView[ChatView["Chat"] = 0] = "Chat";
+        ChatView[ChatView["Settings"] = 1] = "Settings";
+    })(ChatView = Chat.ChatView || (Chat.ChatView = {}));
+})(Chat || (Chat = {}));

package/lib/components/copy-button.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type CopyButtonProps = {
+    value: string;
+};
+export declare function CopyButton(props: CopyButtonProps): JSX.Element;
+export {};

package/lib/components/copy-button.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { useState, useCallback } from 'react';
+import { Box, Button } from '@mui/material';
+var CopyStatus;
+(function (CopyStatus) {
+    CopyStatus[CopyStatus["None"] = 0] = "None";
+    CopyStatus[CopyStatus["Copied"] = 1] = "Copied";
+})(CopyStatus || (CopyStatus = {}));
+const COPYBTN_TEXT_BY_STATUS = {
+    [CopyStatus.None]: 'Copy to Clipboard',
+    [CopyStatus.Copied]: 'Copied!'
+};
+export function CopyButton(props) {
+    const [copyStatus, setCopyStatus] = useState(CopyStatus.None);
+    const copy = useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(props.value);
+        }
+        catch (err) {
+            console.error('Failed to copy text: ', err);
+            setCopyStatus(CopyStatus.None);
+            return;
+        }
+        setCopyStatus(CopyStatus.Copied);
+        setTimeout(() => setCopyStatus(CopyStatus.None), 1000);
+    }, [props.value]);
+    return (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column' } },
+        React.createElement(Button, { onClick: copy, disabled: copyStatus !== CopyStatus.None, "aria-label": "Copy To Clipboard", sx: {
+                alignSelf: 'flex-end',
+                textTransform: 'none'
+            } }, COPYBTN_TEXT_BY_STATUS[copyStatus])));
+}

package/lib/components/jl-theme-provider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { IThemeManager } from '@jupyterlab/apputils';
+export declare function JlThemeProvider(props: {
+    themeManager: IThemeManager | null;
+    children: React.ReactNode;
+}): JSX.Element;

package/lib/components/jl-theme-provider.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { useState, useEffect } from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { getJupyterLabTheme } from '../theme-provider';
+export function JlThemeProvider(props) {
+    const [theme, setTheme] = useState(createTheme());
+    useEffect(() => {
+        var _a;
+        async function setJlTheme() {
+            setTheme(await getJupyterLabTheme());
+        }
+        setJlTheme();
+        (_a = props.themeManager) === null || _a === void 0 ? void 0 : _a.themeChanged.connect(setJlTheme);
+    }, []);
+    return React.createElement(ThemeProvider, { theme: theme }, props.children);
+}

package/lib/components/mui-extras/stacking-alert.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { AlertColor } from '@mui/material';
+export type StackingAlert = {
+    /**
+     * A function that triggers an alert. Successive alerts are indicated in the
+     * JSX element.
+     * @param alertType Type of alert.
+     * @param msg Message contained within the alert.
+     * @returns
+     */
+    show: (alertType: AlertColor, msg: string | Error) => void;
+    /**
+     * The Alert JSX element that should be rendered by the consumer.
+     * This will be `null` if no alerts were triggered.
+     */
+    jsx: JSX.Element | null;
+    /**
+     * An async function that closes the alert, and returns a Promise that
+     * resolves when the onClose animation is completed.
+     */
+    clear: () => void | Promise<void>;
+};
+/**
+ * Hook that returns a function to trigger an alert, and a corresponding alert
+ * JSX element for the consumer to render. The number of successive identical
+ * alerts `X` is indicated in the element via the suffix "(X)".
+ */
+export declare function useStackingAlert(): StackingAlert;