@mitodl/smoot-design 2.0.1 → 3.0.0

package/dist/cjs/components/AiChat/AiChat.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AiChat = void 0;
 const React = require("react");
@@ -12,32 +23,74 @@ const react_markdown_1 = require("react-markdown");
 const ScrollSnap_1 = require("../ScrollSnap/ScrollSnap");
 const classnames_1 = require("classnames");
 const SrAnnouncer_1 = require("../SrAnnouncer/SrAnnouncer");
-const ChatContainer = styled_1.default.div(({ theme }) => ({
+const mit_mascot_tim_png_1 = require("../../../static/images/mit_mascot_tim.png");
+const VisuallyHidden_1 = require("../VisuallyHidden/VisuallyHidden");
+const ImageAdapter_1 = require("../ImageAdapter/ImageAdapter");
+const Typography_1 = require("@mui/material/Typography");
+const classes = {
+    root: "MitAiChat--root",
+    conversationStarter: "MitAiChat--conversationStarter",
+    messagesContainer: "MitAiChat--messagesContainer",
+    messageRow: "MitAiChat--messageRow",
+    messageRowUser: "MitAiChat--messageRowUser",
+    messageRowAssistant: "MitAiChat--messageRowAssistant",
+    message: "MitAiChat--message",
+    avatar: "MitAiChat--avatar",
+    input: "MitAiChat--input",
+};
+const ChatContainer = styled_1.default.div({
     width: "100%",
     height: "100%",
-    border: `1px solid ${theme.custom.colors.silverGrayLight}`,
-    backgroundColor: theme.custom.colors.lightGray1,
     display: "flex",
     flexDirection: "column",
-}));
-const MessagesContainer = (0, styled_1.default)(ScrollSnap_1.ScrollSnap)({
+});
+const MessagesContainer = (0, styled_1.default)(ScrollSnap_1.ScrollSnap)(({ theme }) => ({
     display: "flex",
     flexDirection: "column",
     flex: 1,
     padding: "24px",
-    paddingBottom: "0px",
+    paddingBottom: "12px",
     overflow: "auto",
+    gap: "24px",
+    backgroundColor: theme.custom.colors.lightGray1,
+    borderColor: theme.custom.colors.silverGrayLight,
+    borderStyle: "solid",
+    borderWidth: "0 1px",
+}));
+const MessageRow = styled_1.default.div({
+    display: "flex",
+    width: "100%",
+    gap: "10px",
+    [`&.${classes.messageRowUser}`]: {
+        flexDirection: "row-reverse",
+    },
+    "> *": {
+        minWidth: 0,
+    },
+    position: "relative",
 });
-const MessageRow = styled_1.default.div(({ reverse }) => [
-    {
-        margin: "8px 0",
-        display: "flex",
-        width: "100%",
-        flexDirection: reverse ? "row-reverse" : "row",
+const Avatar = styled_1.default.div(({ theme }) => ({
+    flexShrink: 0,
+    borderRadius: "50%",
+    backgroundColor: theme.custom.colors.white,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    img: {
+        width: "66%",
+    },
+    width: "32px",
+    height: "32px",
+    position: "absolute",
+    top: "-16px",
+    [`.${classes.messageRowAssistant} &`]: {
+        left: "-10px",
+    },
+    [`.${classes.messageRowUser} &`]: {
+        right: "16px",
     },
-]);
-const Avatar = styled_1.default.div({});
-const Message = styled_1.default.div(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, borderRadius: "24px", padding: "4px 16px" }, theme.typography.body2), { "p:first-of-type": {
+}));
+const Message = styled_1.default.div(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, padding: "12px" }, theme.typography.body2), { "p:first-of-type": {
         marginTop: 0,
     }, "p:last-of-type": {
         marginBottom: 0,
@@ -47,27 +100,32 @@ const Message = styled_1.default.div(({ theme }) => (Object.assign(Object.assign
     }, "a:hover": {
         color: theme.custom.colors.red,
         textDecoration: "underline",
+    }, borderRadius: "12px", [`.${classes.messageRowAssistant} &`]: {
+        borderRadius: "0 12px 12px 12px",
+    }, [`.${classes.messageRowUser} &`]: {
+        borderRadius: "12px 0 12px 12px",
     } })));
 const StarterContainer = styled_1.default.div({
     alignSelf: "flex-end",
+    alignItems: "end",
     display: "flex",
     flexDirection: "column",
-    gap: "4px",
+    gap: "12px",
 });
-const Starter = styled_1.default.button(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, borderRadius: "24px", padding: "4px 16px" }, theme.typography.body2), { cursor: "pointer", "&:hover": {
+const Starter = styled_1.default.button(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, padding: "8px 16px" }, theme.typography.subtitle3), { cursor: "pointer", "&:hover": {
         backgroundColor: theme.custom.colors.lightGray1,
-    } })));
-const Controls = styled_1.default.div(({ theme }) => ({
-    display: "flex",
-    justifyContent: "space-around",
-    padding: "12px 24px",
-    backgroundColor: theme.custom.colors.white,
-}));
-const Form = styled_1.default.form(() => ({
-    display: "flex",
-    width: "80%",
-    gap: "12px",
-    alignItems: "center",
+    }, borderRadius: "100vh" })));
+const InputStyled = (0, styled_1.default)(Input_1.Input)({
+    borderRadius: "0 0 8px 8px",
+});
+const ActionButtonStyled = (0, styled_1.default)(ActionButton_1.ActionButton)(({ theme }) => ({
+    backgroundColor: theme.custom.colors.red,
+    flexShrink: 0,
+    marginRight: "24px",
+    marginLeft: "12px",
+    "&:hover:not(:disabled)": {
+        backgroundColor: theme.custom.colors.mitRed,
+    },
 }));
 const DotsContainer = styled_1.default.span(({ theme }) => ({
     display: "inline-flex",
@@ -82,18 +140,37 @@ const Dots = () => {
         React.createElement(Skeleton_1.default, { variant: "circular", width: "8px", height: "8px" }),
         React.createElement(Skeleton_1.default, { variant: "circular", width: "8px", height: "8px" })));
 };
-const classes = {
-    root: "MitAiChat--root",
-    conversationStarter: "MitAiChat--conversationStarter",
-    messagesContainer: "MitAiChat--messagesContainer",
-    messageRow: "MitAiChat--messageRow",
-    message: "MitAiChat--message",
-    avatar: "MitAiChat--avatar",
-    input: "MitAiChat--input",
-};
-const AiChat = function AiChat({ className, conversationStarters, requestOpts, initialMessages: initMsgs, parseContent, srLoadingMessages, }) {
-    var _a;
-    const [showStarters, setShowStarters] = React.useState(true);
+const CloseButton = (0, styled_1.default)(ActionButton_1.ActionButton)(({ theme }) => ({
+    color: "inherit",
+    backgroundColor: theme.custom.colors.red,
+    "&:hover:not(:disabled)": {
+        backgroundColor: theme.custom.colors.mitRed,
+    },
+}));
+const RobotIcon = (0, styled_1.default)(react_1.RiRobot2Line)({
+    width: "40px",
+    height: "40px",
+});
+const ChatTitle = (0, styled_1.default)(({ title, onClose, className }) => {
+    return (React.createElement("div", { className: className },
+        React.createElement(RobotIcon, null),
+        React.createElement(Typography_1.default, { flex: 1, variant: "h5" }, title),
+        onClose ? (React.createElement(CloseButton, { variant: "text", onClick: onClose, "aria-label": "Close chat" },
+            React.createElement(react_1.RiCloseLine, null))) : null));
+})(({ theme }) => ({
+    backgroundColor: theme.custom.colors.red,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "12px 24px",
+    gap: "16px",
+    color: theme.custom.colors.white,
+    borderRadius: "8px 8px 0 0",
+}));
+const AiChatInternal = function AiChat(_a) {
+    var _b;
+    var { chatId, className, conversationStarters, requestOpts, initialMessages: initMsgs, parseContent, srLoadingMessages, title, onClose, ImgComponent, placeholder = "Type a message..." } = _a, others = __rest(_a, ["chatId", "className", "conversationStarters", "requestOpts", "initialMessages", "parseContent", "srLoadingMessages", "title", "onClose", "ImgComponent", "placeholder"]) // Could contain data attributes
+    ;
     const messagesRef = React.useRef(null);
     const initialMessages = React.useMemo(() => {
         const prefix = Math.random().toString().slice(2);
@@ -101,6 +178,7 @@ const AiChat = function AiChat({ className, conversationStarters, requestOpts, i
     }, [initMsgs]);
     const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, } = (0, utils_1.useAiChat)(requestOpts, {
         initialMessages: initialMessages,
+        id: chatId,
     });
     const messages = React.useMemo(() => {
         const initial = initialMessages.map((m) => m.id);
@@ -112,7 +190,8 @@ const AiChat = function AiChat({ className, conversationStarters, requestOpts, i
             return m;
         });
     }, [parseContent, unparsed, initialMessages]);
-    const waiting = !showStarters && ((_a = messages[messages.length - 1]) === null || _a === void 0 ? void 0 : _a.role) === "user";
+    const showStarters = messages.length === initialMessages.length;
+    const waiting = !showStarters && ((_b = messages[messages.length - 1]) === null || _b === void 0 ? void 0 : _b.role) === "user";
     const scrollToBottom = () => {
         var _a;
         (_a = messagesRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
@@ -121,30 +200,43 @@ const AiChat = function AiChat({ className, conversationStarters, requestOpts, i
         });
     };
     const lastMsg = messages[messages.length - 1];
-    return (React.createElement(ChatContainer, { className: (0, classnames_1.default)(className, classes.root) },
+    return (React.createElement(ChatContainer, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, others),
+        React.createElement(ChatTitle, { title: title, onClose: onClose }),
         React.createElement(MessagesContainer, { className: classes.messagesContainer, ref: messagesRef },
-            messages.map((m) => (React.createElement(MessageRow, { key: m.id, reverse: m.role === "user", "data-chat-role": m.role, className: classes.messageRow },
-                React.createElement(Avatar, null),
+            messages.map((m) => (React.createElement(MessageRow, { key: m.id, "data-chat-role": m.role, className: (0, classnames_1.default)(classes.messageRow, {
+                    [classes.messageRowUser]: m.role === "user",
+                    [classes.messageRowAssistant]: m.role === "assistant",
+                }) },
+                m.role === "assistant" ? (React.createElement(Avatar, { className: classes.avatar },
+                    React.createElement(ImageAdapter_1.ImageAdapter, { src: mit_mascot_tim_png_1.default, alt: "", Component: ImgComponent }))) : null,
                 React.createElement(Message, { className: classes.message },
-                    React.createElement(react_markdown_1.default, null, m.content))))),
+                    React.createElement(VisuallyHidden_1.VisuallyHidden, null, m.role === "user" ? "You said: " : "Assistant said: "),
+                    React.createElement(react_markdown_1.default, { skipHtml: true }, m.content))))),
             showStarters ? (React.createElement(StarterContainer, null, conversationStarters === null || conversationStarters === void 0 ? void 0 : conversationStarters.map((m) => (React.createElement(Starter, { className: classes.conversationStarter, key: m.content, onClick: () => {
-                    setShowStarters(false);
                     scrollToBottom();
                     append({ role: "user", content: m.content });
                 } }, m.content))))) : null,
-            waiting ? (React.createElement(MessageRow, { key: "loading" },
-                React.createElement(Avatar, { className: classes.avatar }),
+            waiting ? (React.createElement(MessageRow, { className: (0, classnames_1.default)(classes.messageRow, classes.messageRowAssistant), key: "loading" },
+                React.createElement(Avatar, { className: classes.avatar },
+                    React.createElement(ImageAdapter_1.ImageAdapter, { src: mit_mascot_tim_png_1.default, alt: "", Component: ImgComponent })),
                 React.createElement(Message, null,
                     React.createElement(Dots, null)))) : null),
-        React.createElement(Controls, null,
-            React.createElement(Form, { onSubmit: (e) => {
-                    setShowStarters(false);
-                    scrollToBottom();
-                    handleSubmit(e);
-                } },
-                React.createElement(Input_1.Input, { className: classes.input, placeholder: "Type a message...", name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange }),
-                React.createElement(ActionButton_1.ActionButton, { "aria-label": "Send", type: "submit", disabled: isLoading || !input },
-                    React.createElement(react_1.RiSendPlaneFill, null)))),
+        React.createElement("form", { onSubmit: (e) => {
+                scrollToBottom();
+                handleSubmit(e);
+            } },
+            React.createElement(InputStyled, { fullWidth: true, size: "hero", className: classes.input, placeholder: placeholder, name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange, endAdornment: React.createElement(ActionButtonStyled, { size: "large", "aria-label": "Send", type: "submit", disabled: isLoading || !input },
+                    React.createElement(react_1.RiSendPlaneFill, null)) })),
         React.createElement(SrAnnouncer_1.SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: lastMsg.role === "assistant" ? lastMsg.content : "" })));
 };
+const AiChat = (props) => (
+/**
+ * Changing the `useChat` chatId seems to persist some state between
+ * hook calls. This can cause strange effects like loading API responses
+ * for previous chatId into new chatId.
+ *
+ * To avoid this, let's chnge the key, this will force React to make a new component
+ * not sharing any of the old state.
+ */
+React.createElement(AiChatInternal, Object.assign({ key: props.chatId }, props)));
 exports.AiChat = AiChat;

package/dist/cjs/components/AiChat/AiChat.stories.js

@@ -5,6 +5,7 @@ const React = require("react");
 const AiChat_1 = require("./AiChat");
 const story_utils_1 = require("./story-utils");
 const styled_1 = require("@emotion/styled");
+const test_1 = require("@storybook/test");
 const TEST_API_STREAMING = "http://localhost:4567/streaming";
 const TEST_API_JSON = "http://localhost:4567/json";
 const INITIAL_MESSAGES = [
@@ -20,10 +21,10 @@ const STARTERS = [
 ];
 const Container = styled_1.default.div({
     width: "100%",
-    height: "350px",
+    height: "500px",
 });
 const meta = {
-    title: "smoot-design/AiChat",
+    title: "smoot-design/ai/AiChat",
     component: AiChat_1.AiChat,
     render: (args) => React.createElement(AiChat_1.AiChat, Object.assign({}, args)),
     decorators: (Story) => {
@@ -34,6 +35,8 @@ const meta = {
         initialMessages: INITIAL_MESSAGES,
         requestOpts: { apiUrl: TEST_API_STREAMING },
         conversationStarters: STARTERS,
+        title: "Chat with AI",
+        onClose: (0, test_1.fn)(),
     },
     argTypes: {
         conversationStarters: {

package/dist/cjs/components/AiChat/AiChat.test.js

@@ -34,6 +34,10 @@ jest.mock("react-markdown", () => {
         default: ({ children }) => React.createElement("div", null, children),
     };
 });
+const msg = {
+    ai: (text) => `Assistant said: ${text}`,
+    you: (text) => `You said: ${text}`,
+};
 const getMessages = () => {
     return Array.from(document.querySelectorAll(".MitAiChat--message"));
 };
@@ -56,8 +60,11 @@ describe("AiChat", () => {
             { content: en_1.faker.lorem.sentence() },
             { content: en_1.faker.lorem.sentence() },
         ];
-        (0, react_1.render)(React.createElement(AiChat_1.AiChat, Object.assign({ initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, props)), { wrapper: ThemeProvider_1.ThemeProvider });
-        return { initialMessages, conversationStarters };
+        const view = (0, react_1.render)(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, props)), { wrapper: ThemeProvider_1.ThemeProvider });
+        const rerender = (newProps) => {
+            view.rerender(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, newProps)));
+        };
+        return { initialMessages, conversationStarters, rerender };
     };
     test("Clicking conversation starters and sending chats", () => __awaiter(void 0, void 0, void 0, function* () {
         const { initialMessages, conversationStarters } = setup();
@@ -85,6 +92,21 @@ describe("AiChat", () => {
         expect(afterSending[3]).toHaveTextContent("User message");
         expect(afterSending[4]).toHaveTextContent("AI Response 1");
     }));
+    test("Messages persist if chat has same chatId", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { rerender } = setup({ chatId: "test-123" });
+        const starterEls = getConversationStarters();
+        const chosen = en_1.faker.helpers.arrayElement([0, 1]);
+        yield user_event_1.default.click(starterEls[chosen]);
+        yield whenCount(getMessages, 3);
+        // New chat ... starters should be shown
+        rerender({ chatId: "test-345" });
+        expect(getConversationStarters().length).toBeGreaterThan(0);
+        yield whenCount(getMessages, 1);
+        // existing chat ... starters should not be shown, messages should be restored
+        rerender({ chatId: "test-123" });
+        expect(getConversationStarters().length).toBe(0);
+        yield whenCount(getMessages, 3);
+    }));
     test("transformBody is called before sending requests", () => __awaiter(void 0, void 0, void 0, function* () {
         const fakeBody = { message: en_1.faker.lorem.sentence() };
         const apiUrl = en_1.faker.internet.url();
@@ -120,11 +142,21 @@ describe("AiChat", () => {
         yield whenCount(getMessages, initialMessages.length + 4);
         const messagesTexts = getMessages().map((el) => el.textContent);
         expect(messagesTexts).toEqual([
-            initialMessages[0].content,
-            conversationStarters[0].content,
-            "Parsed: AI Response 0",
-            "User message",
-            "Parsed: AI Response 1",
+            msg.ai(initialMessages[0].content),
+            msg.you(conversationStarters[0].content),
+            msg.ai("Parsed: AI Response 0"),
+            msg.you("User message"),
+            msg.ai("Parsed: AI Response 1"),
         ]);
     }));
+    test("Passes extra attributes to root", () => {
+        const fakeBody = { message: en_1.faker.lorem.sentence() };
+        const apiUrl = en_1.faker.internet.url();
+        const transformBody = jest.fn(() => fakeBody);
+        setup({
+            requestOpts: { apiUrl, transformBody },
+            parseContent: jest.fn((content) => `Parsed: ${content}`),
+        });
+        expect(react_1.screen.getByTestId("ai-chat")).toBeInTheDocument();
+    });
 });

package/dist/cjs/components/AiChat/story-utils.js

@@ -16,6 +16,7 @@ const SAMPLE_RESPONSES = [
 1. **[Machine Learning, Modeling, and Simulation Principles](https://xpro.mit.edu/courses/course-v1:xPRO+MLx1/)**: Offered by MIT xPRO, this course is part of the program "Machine Learning, Modeling, and Simulation: Engineering Problem-Solving in the Age of AI." It focuses on the principles of machine learning and how they can be applied to solve engineering problems, which is highly relevant for business applications of AI.
 
 This course is not free, but it provides a certification upon completion, which can be valuable for professionals looking to apply AI in business contexts. It covers essential concepts that can help you understand how AI can be leveraged to improve business processes and decision-making.
+<!-- Comment! -->
 `,
     `
 To understand global warming, I recommend the following resources from MIT:
@@ -25,6 +26,7 @@ To understand global warming, I recommend the following resources from MIT:
 2. **[Global Warming Science](https://openlearninglibrary.mit.edu/courses/course-v1:MITx+12.340x+1T2020/about)**: Another offering of the same course by MITx, available through the Open Learning Library. It provides the same in-depth exploration of the earth's climate system.
 
 These courses are free and provide a solid foundation in understanding the scientific aspects of global warming. They are suitable for anyone interested in the topic, regardless of prior knowledge.
+<!-- Comment! -->
 `,
     `
 Here are some courses on linear algebra that you can explore:
@@ -36,6 +38,7 @@ Here are some courses on linear algebra that you can explore:
 3. **[Quantum Information Science I, Part 1 (MITx)](https://openlearninglibrary.mit.edu/courses/course-v1:MITx+8.370.1x+1T2018/about)**: While primarily focused on quantum information science, this course requires some knowledge of linear algebra and is suitable for those interested in quantum mechanics. It is free and available through MITx.
 
 These courses provide a comprehensive introduction to linear algebra and its applications across various fields.
+<!-- Comment! -->
 `,
 ];
 const rand = (min, max) => {
@@ -61,7 +64,7 @@ const mockStreaming = function mockApi() {
         }, []);
         const num = chunks.length;
         let i = 0;
-        yield new Promise((resolve) => setTimeout(resolve, 1500));
+        yield new Promise((resolve) => setTimeout(resolve, 800));
         const body = new ReadableStream({
             start(controller) {
                 timerId = setInterval(() => {
@@ -72,7 +75,7 @@ const mockStreaming = function mockApi() {
                         controller.close();
                         clearInterval(timerId);
                     }
-                }, 250);
+                }, 100);
             },
             cancel() {
                 if (timerId) {
@@ -90,7 +93,7 @@ const mockStreaming = function mockApi() {
 exports.mockStreaming = mockStreaming;
 const mockJson = () => __awaiter(void 0, void 0, void 0, function* () {
     const message = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
-    yield new Promise((res) => setTimeout(res, 2000));
+    yield new Promise((res) => setTimeout(res, 1000));
     return Promise.resolve(new Response(JSON.stringify({ message }), {
         headers: {
             "Content-Type": "application/json",

package/dist/cjs/components/AiChat/types.d.ts

@@ -15,21 +15,36 @@ type RequestOpts = {
     transformBody?: (messages: ChatMessage[]) => unknown;
     /**
      * Extra options to pass to fetch.
-     *
-     * If headers are specified, they will override the headersOpts.
      */
     fetchOpts?: RequestInit;
-    /**
-     * Extra headers to pass to fetch.
-     */
-    headersOpts?: HeadersInit;
+    onFinish?: (message: ChatMessage) => void;
 };
 type AiChatProps = {
+    /**
+     * Changing the `chatId` will reset the chat. Changing the `chatId` to a
+     * previously used value will restore the session state.
+     */
+    chatId?: string;
+    /**
+     * If provided, renders a title bar.
+     */
+    title?: string;
+    /**
+     * Plaeholder message for chat input
+     */
+    placeholder?: string;
+    /**
+     * Fired when "Close" button within title bar is clicked.
+     */
+    onClose?: () => void;
     className?: string;
     initialMessages: Omit<ChatMessage, "id">[];
     conversationStarters?: {
         content: string;
     }[];
+    /**
+     * Options for making requests to the AI service.
+     */
     requestOpts: RequestOpts;
     parseContent?: (content: unknown) => string;
     /**
@@ -41,5 +56,10 @@ type AiChatProps = {
         delay: number;
         text: string;
     }[];
+    /**
+     * If provided, element to use for rendering avatar images.
+     * By default, the theme's ImageAdater is used.
+     */
+    ImgComponent?: React.ElementType;
 };
 export type { RequestOpts, AiChatProps, ChatMessage };

package/dist/cjs/components/AiChat/utils.js

@@ -14,18 +14,28 @@ const react_1 = require("ai/react");
 const react_2 = require("react");
 const identity = (x) => x;
 const getFetcher = (requestOpts) => (url, opts) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a;
+    var _a, _b;
     if (typeof (opts === null || opts === void 0 ? void 0 : opts.body) !== "string") {
         console.error("Unexpected body type.");
         return window.fetch(url, opts);
     }
     const messages = JSON.parse(opts === null || opts === void 0 ? void 0 : opts.body).messages;
     const transformBody = (_a = requestOpts.transformBody) !== null && _a !== void 0 ? _a : identity;
-    const options = Object.assign(Object.assign(Object.assign({}, opts), { body: JSON.stringify(transformBody(messages)), headers: Object.assign(Object.assign(Object.assign({}, opts === null || opts === void 0 ? void 0 : opts.headers), { "Content-Type": "application/json" }), requestOpts.headersOpts) }), requestOpts.fetchOpts);
+    const options = Object.assign(Object.assign(Object.assign(Object.assign({}, opts), { body: JSON.stringify(transformBody(messages)) }), requestOpts.fetchOpts), { headers: Object.assign(Object.assign(Object.assign({}, opts === null || opts === void 0 ? void 0 : opts.headers), { "Content-Type": "application/json" }), (_b = requestOpts.fetchOpts) === null || _b === void 0 ? void 0 : _b.headers) });
     return fetch(url, options);
 });
 const useAiChat = (requestOpts, opts) => {
     const fetcher = (0, react_2.useMemo)(() => getFetcher(requestOpts), [requestOpts]);
-    return (0, react_1.useChat)(Object.assign({ api: requestOpts.apiUrl, streamProtocol: "text", fetch: fetcher }, opts));
+    return (0, react_1.useChat)(Object.assign({ api: requestOpts.apiUrl, streamProtocol: "text", fetch: fetcher, onFinish: (message) => {
+            var _a;
+            if (!requestOpts.onFinish)
+                return;
+            if (message.role === "assistant" || message.role === "user") {
+                (_a = requestOpts.onFinish) === null || _a === void 0 ? void 0 : _a.call(requestOpts, message);
+            }
+            else {
+                console.info("Unexpected message role.", message);
+            }
+        } }, opts));
 };
 exports.useAiChat = useAiChat;

package/dist/cjs/components/Button/Button.d.ts

@@ -31,9 +31,7 @@ declare const ButtonRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & ButtonStyleProps, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-declare const ButtonLinkRoot: import("@emotion/styled").StyledComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    Component?: React.ElementType;
-} & LinkAdapterPropsOverrides, "ref"> & React.RefAttributes<HTMLAnchorElement> & {
+declare const ButtonLinkRoot: import("@emotion/styled").StyledComponent<Omit<import("../LinkAdapter/LinkAdapter").LinkAdapterProps, "ref"> & React.RefAttributes<HTMLAnchorElement> & {
     theme?: import("@emotion/react").Theme;
 } & ButtonStyleProps, {}, {}>;
 type ButtonProps = ButtonStyleProps & React.ComponentProps<"button">;

package/dist/cjs/components/ImageAdapter/ImageAdapter.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+/**
+ * ImageAdapterPropsOverrides can be used with module augmentation to provide
+ * extra props to ButtonLink.
+ *
+ * For example, in a NextJS App, you might set `next/image` as your default
+ * image implementation, and use ImageAdapterPropsOverrides to provide
+ * `next/image`-specific props.
+ */
+interface ImageAdapterPropsOverrides {
+}
+type ImageAdapterProps = React.ComponentProps<"img"> & {
+    Component?: React.ElementType;
+} & ImageAdapterPropsOverrides;
+/**
+ * Overrideable Image component.
+ * - If `Component` is provided, renders as `Component`
+ * - else, if `theme.custom.ImageAdapter` is provided, renders as `theme.custom.ImageAdapter`
+ * - else, renders as `img` tag
+ */
+declare const ImageAdapter: React.ForwardRefExoticComponent<Omit<ImageAdapterProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export { ImageAdapter };
+export type { ImageAdapterPropsOverrides, ImageAdapterProps };

package/dist/cjs/components/ImageAdapter/ImageAdapter.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageAdapter = void 0;
+const React = require("react");
+const react_1 = require("@emotion/react");
+/**
+ * Overrideable Image component.
+ * - If `Component` is provided, renders as `Component`
+ * - else, if `theme.custom.ImageAdapter` is provided, renders as `theme.custom.ImageAdapter`
+ * - else, renders as `img` tag
+ */
+const ImageAdapter = React.forwardRef(function ImageAdapter(_a, ref) {
+    var _b;
+    var { Component } = _a, props = __rest(_a, ["Component"]);
+    const theme = (0, react_1.useTheme)();
+    const ImgComponent = (_b = Component !== null && Component !== void 0 ? Component : theme.custom.ImgAdapter) !== null && _b !== void 0 ? _b : "img";
+    return React.createElement(ImgComponent, Object.assign({ ref: ref }, props));
+});
+exports.ImageAdapter = ImageAdapter;

package/dist/cjs/components/LinkAdapter/LinkAdapter.d.ts

@@ -20,4 +20,4 @@ type LinkAdapterProps = React.ComponentProps<"a"> & {
  */
 declare const LinkAdapter: React.ForwardRefExoticComponent<Omit<LinkAdapterProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export { LinkAdapter };
-export type { LinkAdapterPropsOverrides };
+export type { LinkAdapterPropsOverrides, LinkAdapterProps };

package/dist/cjs/components/ThemeProvider/ThemeProvider.stories.d.ts

@@ -22,7 +22,6 @@ type Story = StoryObj<typeof ThemeProvider>;
  * </ThemeProvider>
  * ```
  *
- *
  * ### Custom Link Adapter
  * One particularly notable property is `theme.custom.LinkAdapter`. Some `smoot-design`
  * components render links. These links are native anchor tags by default. In
@@ -53,6 +52,12 @@ type Story = StoryObj<typeof ThemeProvider>;
  *   }
  * }
  * ```
+ *
+ * ### ImageAdapter
+ * Similarly, `theme.custom.ImageAdapter` can be used to customize the image
+ * component used by `smoot-design`. By default, `ImageAdapter` uses a simple `img`
+ * tag. Interface `ImageAdapterPropsOverrides` is similarly available for
+ * augmentation.
  */
 export declare const LinkAdapterOverride: Story;
 export default meta;

package/dist/cjs/components/ThemeProvider/ThemeProvider.stories.js

@@ -53,7 +53,6 @@ const meta = {
  * </ThemeProvider>
  * ```
  *
- *
  * ### Custom Link Adapter
  * One particularly notable property is `theme.custom.LinkAdapter`. Some `smoot-design`
  * components render links. These links are native anchor tags by default. In
@@ -84,6 +83,12 @@ const meta = {
  *   }
  * }
  * ```
+ *
+ * ### ImageAdapter
+ * Similarly, `theme.custom.ImageAdapter` can be used to customize the image
+ * component used by `smoot-design`. By default, `ImageAdapter` uses a simple `img`
+ * tag. Interface `ImageAdapterPropsOverrides` is similarly available for
+ * augmentation.
  */
 exports.LinkAdapterOverride = {
     args: {