@mitodl/smoot-design 1.1.0 → 1.2.0

package/dist/cjs/ai.d.ts

@@ -0,0 +1,2 @@
+export { AiChat } from "./components/AiChat/AiChat";
+export type { AiChatProps } from "./components/AiChat/AiChat";

package/dist/cjs/ai.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiChat = void 0;
+var AiChat_1 = require("./components/AiChat/AiChat");
+Object.defineProperty(exports, "AiChat", { enumerable: true, get: function () { return AiChat_1.AiChat; } });

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { AiChatProps } from "./types";
+declare const AiChat: React.FC<AiChatProps>;
+export { AiChat };
+export type { AiChatProps };

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

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiChat = void 0;
+const React = require("react");
+const styled_1 = require("@emotion/styled");
+const Skeleton_1 = require("@mui/material/Skeleton");
+const Input_1 = require("../Input/Input");
+const ActionButton_1 = require("../Button/ActionButton");
+const react_1 = require("@remixicon/react");
+const utils_1 = require("./utils");
+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 }) => ({
+    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)({
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    padding: "24px",
+    paddingBottom: "0px",
+    overflow: "auto",
+});
+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({});
+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": {
+        marginTop: 0,
+    }, "p:last-of-type": {
+        marginBottom: 0,
+    }, a: {
+        color: theme.custom.colors.mitRed,
+        textDecoration: "none",
+    }, "a:hover": {
+        color: theme.custom.colors.red,
+        textDecoration: "underline",
+    } })));
+const StarterContainer = styled_1.default.div({
+    alignSelf: "flex-end",
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+});
+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": {
+        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",
+}));
+const DotsContainer = styled_1.default.span(({ theme }) => ({
+    display: "inline-flex",
+    gap: "4px",
+    ".MuiSkeleton-root": {
+        backgroundColor: theme.custom.colors.silverGray,
+    },
+}));
+const Dots = () => {
+    return (React.createElement(DotsContainer, null,
+        React.createElement(Skeleton_1.default, { variant: "circular", width: "8px", height: "8px" }),
+        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 messagesRef = React.useRef(null);
+    const initialMessages = React.useMemo(() => {
+        const prefix = Math.random().toString().slice(2);
+        return initMsgs.map((m, i) => (Object.assign(Object.assign({}, m), { id: `initial-${prefix}-${i}` })));
+    }, [initMsgs]);
+    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, } = (0, utils_1.useAiChat)(requestOpts, {
+        initialMessages: initialMessages,
+    });
+    const messages = React.useMemo(() => {
+        const initial = initialMessages.map((m) => m.id);
+        return unparsed.map((m) => {
+            if (m.role === "assistant" && !initial.includes(m.id)) {
+                const content = parseContent ? parseContent(m.content) : m.content;
+                return Object.assign(Object.assign({}, m), { content });
+            }
+            return m;
+        });
+    }, [parseContent, unparsed, initialMessages]);
+    const waiting = !showStarters && ((_a = messages[messages.length - 1]) === null || _a === void 0 ? void 0 : _a.role) === "user";
+    const scrollToBottom = () => {
+        var _a;
+        (_a = messagesRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
+            behavior: "instant",
+            top: messagesRef.current.scrollHeight,
+        });
+    };
+    const lastMsg = messages[messages.length - 1];
+    return (React.createElement(ChatContainer, { className: (0, classnames_1.default)(className, classes.root) },
+        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),
+                React.createElement(Message, { className: classes.message },
+                    React.createElement(react_markdown_1.default, null, 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 }),
+                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(SrAnnouncer_1.SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: lastMsg.role === "assistant" ? lastMsg.content : "" })));
+};
+exports.AiChat = AiChat;

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AiChat } from "./AiChat";
+declare const meta: Meta<typeof AiChat>;
+export default meta;
+type Story = StoryObj<typeof AiChat>;
+export declare const StreamingResponses: Story;
+/**
+ * Here `AiChat` is used with a non-streaming JSON API. The JSON is converted
+ * to text via `parseContent`.
+ */
+export declare const JsonResponses: Story;

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JsonResponses = exports.StreamingResponses = void 0;
+const React = require("react");
+const AiChat_1 = require("./AiChat");
+const story_utils_1 = require("./story-utils");
+const styled_1 = require("@emotion/styled");
+const TEST_API_STREAMING = "http://localhost:4567/streaming";
+const TEST_API_JSON = "http://localhost:4567/json";
+const INITIAL_MESSAGES = [
+    {
+        content: "Hi! What are you interested in learning about?",
+        role: "assistant",
+    },
+];
+const STARTERS = [
+    { content: "I'm interested in quantum computing" },
+    { content: "I want to understand global warming. " },
+    { content: "I am curious about AI applications for business" },
+];
+const Container = styled_1.default.div({
+    width: "100%",
+    height: "350px",
+});
+const meta = {
+    title: "smoot-design/AiChat",
+    component: AiChat_1.AiChat,
+    render: (args) => React.createElement(AiChat_1.AiChat, Object.assign({}, args)),
+    decorators: (Story) => {
+        return (React.createElement(Container, null,
+            React.createElement(Story, null)));
+    },
+    args: {
+        initialMessages: INITIAL_MESSAGES,
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        conversationStarters: STARTERS,
+    },
+    argTypes: {
+        conversationStarters: {
+            control: { type: "object", disable: true },
+        },
+        initialMessages: {
+            control: { type: "object", disable: true },
+        },
+        requestOpts: {
+            control: { type: "object", disable: true },
+            table: { readonly: true }, // See above
+        },
+    },
+    beforeEach: () => {
+        const originalFetch = window.fetch;
+        window.fetch = (url, opts) => {
+            if (url === TEST_API_STREAMING) {
+                return (0, story_utils_1.mockStreaming)();
+            }
+            else if (url === TEST_API_JSON) {
+                return (0, story_utils_1.mockJson)();
+            }
+            return originalFetch(url, opts);
+        };
+    },
+};
+exports.default = meta;
+exports.StreamingResponses = {};
+/**
+ * Here `AiChat` is used with a non-streaming JSON API. The JSON is converted
+ * to text via `parseContent`.
+ */
+exports.JsonResponses = {
+    args: {
+        requestOpts: { apiUrl: TEST_API_JSON },
+        parseContent: (content) => {
+            return JSON.parse(content).message;
+        },
+    },
+};

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

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

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

@@ -0,0 +1,130 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// This was giving false positives
+/* eslint-disable testing-library/await-async-utils */
+const react_1 = require("@testing-library/react");
+const user_event_1 = require("@testing-library/user-event");
+const AiChat_1 = require("./AiChat");
+const ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
+const React = require("react");
+const en_1 = require("@faker-js/faker/locale/en");
+const counter = jest.fn(); // use jest.fn as counter because it resets on each test
+const mockFetch = jest.mocked(jest.fn(() => {
+    const count = counter.mock.calls.length;
+    counter();
+    return Promise.resolve(new Response(`AI Response ${count}`, {
+        headers: {
+            "Content-Type": "application/json",
+        },
+    }));
+}));
+window.fetch = mockFetch;
+jest.mock("react-markdown", () => {
+    return {
+        __esModule: true,
+        default: ({ children }) => React.createElement("div", null, children),
+    };
+});
+const getMessages = () => {
+    return Array.from(document.querySelectorAll(".MitAiChat--message"));
+};
+const getConversationStarters = () => {
+    return Array.from(document.querySelectorAll("button.MitAiChat--conversationStarter"));
+};
+const whenCount = (cb, count) => __awaiter(void 0, void 0, void 0, function* () {
+    return yield (0, react_1.waitFor)(() => {
+        const result = cb();
+        expect(result).toHaveLength(count);
+        return result;
+    });
+});
+describe("AiChat", () => {
+    const setup = (props = {}) => {
+        const initialMessages = [
+            { role: "assistant", content: en_1.faker.lorem.sentence() },
+        ];
+        const conversationStarters = [
+            { 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 };
+    };
+    test("Clicking conversation starters and sending chats", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { initialMessages, conversationStarters } = setup();
+        const scrollBy = jest.spyOn(HTMLElement.prototype, "scrollBy");
+        const initialMessageEls = getMessages();
+        expect(initialMessageEls.length).toBe(1);
+        expect(initialMessageEls[0]).toHaveTextContent(initialMessages[0].content);
+        const starterEls = getConversationStarters();
+        expect(starterEls.length).toBe(2);
+        expect(starterEls[0]).toHaveTextContent(conversationStarters[0].content);
+        expect(starterEls[1]).toHaveTextContent(conversationStarters[1].content);
+        const chosen = en_1.faker.helpers.arrayElement([0, 1]);
+        yield user_event_1.default.click(starterEls[chosen]);
+        expect(scrollBy).toHaveBeenCalled();
+        scrollBy.mockReset();
+        const messageEls = yield whenCount(getMessages, 3);
+        expect(messageEls[0]).toHaveTextContent(initialMessages[0].content);
+        expect(messageEls[1]).toHaveTextContent(conversationStarters[chosen].content);
+        expect(messageEls[2]).toHaveTextContent("AI Response 0");
+        yield user_event_1.default.click(react_1.screen.getByPlaceholderText("Type a message..."));
+        yield user_event_1.default.paste("User message");
+        yield user_event_1.default.click(react_1.screen.getByRole("button", { name: "Send" }));
+        expect(scrollBy).toHaveBeenCalled();
+        const afterSending = yield whenCount(getMessages, 5);
+        expect(afterSending[3]).toHaveTextContent("User message");
+        expect(afterSending[4]).toHaveTextContent("AI Response 1");
+    }));
+    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();
+        const transformBody = jest.fn(() => fakeBody);
+        const { initialMessages } = setup({
+            requestOpts: { apiUrl, transformBody },
+        });
+        yield user_event_1.default.click(react_1.screen.getByPlaceholderText("Type a message..."));
+        yield user_event_1.default.paste("User message");
+        yield user_event_1.default.click(react_1.screen.getByRole("button", { name: "Send" }));
+        expect(transformBody).toHaveBeenCalledWith([
+            expect.objectContaining(initialMessages[0]),
+            expect.objectContaining({ content: "User message", role: "user" }),
+        ]);
+        expect(mockFetch).toHaveBeenCalledTimes(1);
+        expect(mockFetch).toHaveBeenCalledWith(apiUrl, expect.objectContaining({
+            body: JSON.stringify(fakeBody),
+        }));
+    }));
+    test("parseContent is called on the API-received message content", () => __awaiter(void 0, void 0, void 0, function* () {
+        const fakeBody = { message: en_1.faker.lorem.sentence() };
+        const apiUrl = en_1.faker.internet.url();
+        const transformBody = jest.fn(() => fakeBody);
+        const { initialMessages, conversationStarters } = setup({
+            requestOpts: { apiUrl, transformBody },
+            parseContent: jest.fn((content) => `Parsed: ${content}`),
+        });
+        yield user_event_1.default.click(getConversationStarters()[0]);
+        yield whenCount(getMessages, initialMessages.length + 2);
+        yield user_event_1.default.click(react_1.screen.getByPlaceholderText("Type a message..."));
+        yield user_event_1.default.paste("User message");
+        yield user_event_1.default.click(react_1.screen.getByRole("button", { name: "Send" }));
+        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",
+        ]);
+    }));
+});

package/dist/cjs/components/AiChat/story-utils.d.ts

@@ -0,0 +1,3 @@
+declare const mockStreaming: () => Promise<Response>;
+declare const mockJson: () => Promise<Response>;
+export { mockStreaming, mockJson };

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

@@ -0,0 +1,100 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mockJson = exports.mockStreaming = void 0;
+const SAMPLE_RESPONSES = [
+    `For exploring AI applications in business, I recommend the following course from MIT:
+
+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.
+`,
+    `
+To understand global warming, I recommend the following resources from MIT:
+
+1. **[Global Warming Science](https://www.edx.org/learn/global-warming/massachusetts-institute-of-technology-global-warming-science)**: This course offered by MITx covers the physics, chemistry, biology, and geology of the earth’s climate system. It's a comprehensive introduction to the scientific principles underlying global warming.
+
+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.
+`,
+    `
+Here are some courses on linear algebra that you can explore:
+
+1. **[Linear Algebra (MIT OpenCourseWare)](https://openlearninglibrary.mit.edu/courses/course-v1:OCW+18.06SC+2T2019/about)**: This course covers matrix theory and linear algebra, emphasizing topics useful in various disciplines such as physics, economics, social sciences, natural sciences, and engineering. It parallels the combination of theory and applications in Professor Strang's textbook "Introduction to Linear Algebra." This course is free and available through MIT OpenCourseWare.
+
+2. **[Mathematical Methods for Quantitative Finance (MITx)](https://www.edx.org/learn/finance/massachusetts-institute-of-technology-mathematical-methods-for-quantitative-finance)**: This course covers the mathematical foundations essential for financial engineering and quantitative finance, including linear algebra, optimization, probability, stochastic processes, statistics, and applied computational techniques in R. It is free and offers certification upon completion.
+
+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.
+`,
+];
+const rand = (min, max) => {
+    // min and max included
+    return Math.floor(Math.random() * (max - min + 1) + min);
+};
+const mockStreaming = function mockApi() {
+    return __awaiter(this, void 0, void 0, function* () {
+        let timerId;
+        const response = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
+        const chunks = response.split(" ").reduce((acc, word) => {
+            const last = acc[acc.length - 1];
+            if (acc.length === 0) {
+                acc.push(word);
+            }
+            else if (Math.random() < 0.75) {
+                acc[acc.length - 1] = `${last} ${word}`;
+            }
+            else {
+                acc.push(` ${word}`);
+            }
+            return acc;
+        }, []);
+        const num = chunks.length;
+        let i = 0;
+        yield new Promise((resolve) => setTimeout(resolve, 1500));
+        const body = new ReadableStream({
+            start(controller) {
+                timerId = setInterval(() => {
+                    const msg = new TextEncoder().encode(chunks[i]);
+                    controller.enqueue(msg);
+                    i++;
+                    if (i === num) {
+                        controller.close();
+                        clearInterval(timerId);
+                    }
+                }, 250);
+            },
+            cancel() {
+                if (timerId) {
+                    clearInterval(timerId);
+                }
+            },
+        });
+        return Promise.resolve(new Response(body, {
+            headers: {
+                "Content-Type": "text/event-stream",
+            },
+        }));
+    });
+};
+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));
+    return Promise.resolve(new Response(JSON.stringify({ message }), {
+        headers: {
+            "Content-Type": "application/json",
+        },
+    }));
+});
+exports.mockJson = mockJson;

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

@@ -0,0 +1,45 @@
+type Role = "assistant" | "user";
+type ChatMessage = {
+    id: string;
+    content: string;
+    role: Role;
+};
+type RequestOpts = {
+    apiUrl: string;
+    /**
+     * Transforms array of chat messages into request body. Messages
+     * are ordered oldest to newest.
+     *
+     * JSON.stringify is applied to the return value.
+     */
+    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;
+};
+type AiChatProps = {
+    className?: string;
+    initialMessages: Omit<ChatMessage, "id">[];
+    conversationStarters?: {
+        content: string;
+    }[];
+    requestOpts: RequestOpts;
+    parseContent?: (content: unknown) => string;
+    /**
+     * A message to display while the component is in a loading state.
+     *
+     * Identical consecutive messages may not be read on some screen readers.
+     */
+    srLoadingMessages?: {
+        delay: number;
+        text: string;
+    }[];
+};
+export type { RequestOpts, AiChatProps, ChatMessage };

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

@@ -0,0 +1,3 @@
+"use strict";
+// Some of these are based on (compatible, but simplfied / restricted) versions of ai/react types.
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,9 @@
+import { UseChatOptions } from "ai/react";
+import type { RequestOpts } from "./types";
+declare const useAiChat: (requestOpts: RequestOpts, opts: UseChatOptions) => import("@ai-sdk/react").UseChatHelpers & {
+    addToolResult: ({ toolCallId, result, }: {
+        toolCallId: string;
+        result: any;
+    }) => void;
+};
+export { useAiChat };

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

@@ -0,0 +1,31 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAiChat = void 0;
+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;
+    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);
+    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));
+};
+exports.useAiChat = useAiChat;

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

@@ -4,7 +4,6 @@ declare const meta: Meta<typeof ActionButton>;
 export default meta;
 type Story = StoryObj<typeof ActionButton>;
 export declare const VariantsAndEdge: Story;
-export declare const Showcase: Story;
 /**
  * `ActionButtonLink` is styled as a `ActionButton` that renders an anchor tag.
  *
@@ -13,3 +12,4 @@ export declare const Showcase: Story;
  * default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
  */
 export declare const Links: Story;
+export declare const Showcase: Story;