@mitodl/smoot-design 0.0.0-1967631

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

@@ -0,0 +1,254 @@
+import * as React from "react";
+import { AiChat } from "./AiChat";
+import styled from "@emotion/styled";
+import { handlers } from "./test-utils/api";
+import { useEffect, useRef, useState } from "react";
+import { MathJaxContext } from "better-react-mathjax";
+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",
+    },
+    {
+        content: "I need to brush up on my Calculus",
+        role: "user",
+    },
+    {
+        content: "Great! Do you want to start with the basics, like limits and derivatives, or jump into more advanced topics like integrals and series? Let me know how I can help!",
+        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.div({
+    width: "100%",
+    height: "800px",
+});
+const meta = {
+    title: "smoot-design/AI/AiChat",
+    component: AiChat,
+    parameters: {
+        msw: { handlers },
+    },
+    render: (args) => React.createElement(AiChat, Object.assign({}, args)),
+    decorators: (Story, context) => {
+        return (React.createElement(MathJaxContext, null,
+            React.createElement(Container, null,
+                React.createElement(Story, { key: String(context.args.entryScreenEnabled) }))));
+    },
+    args: {
+        entryScreenTitle: "What do you want to learn from MIT?",
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        conversationStarters: STARTERS,
+        askTimTitle: "to recommend a course",
+    },
+    argTypes: {
+        conversationStarters: {
+            control: { type: "object", disable: true },
+        },
+        initialMessages: {
+            control: { type: "object", disable: true },
+        },
+        requestOpts: {
+            control: { type: "object", disable: true },
+            table: { readonly: true }, // See above
+        },
+    },
+};
+export default meta;
+export const StreamingResponses = {};
+/**
+ * Here `AiChat` is used with a non-streaming JSON API. The JSON is converted
+ * to text via `parseContent`.
+ */
+export const JsonResponses = {
+    args: {
+        requestOpts: { apiUrl: TEST_API_JSON },
+        initialMessages: INITIAL_MESSAGES,
+        entryScreenEnabled: false,
+        parseContent: (content) => {
+            return JSON.parse(content).message;
+        },
+    },
+};
+const DEMO_MARKDOWN = `This shows default markdown styling. Here's are some lists:
+- Item 1
+- Item 2 - an unordered list (bullets)
+    - Point A
+    - Point B
+- Item 3 - an ordered list (numbers)
+    1. Item 3.1
+    2. Item 3.2
+    3. Item 3.3
+
+Sometimes, unordered lists are nested within ordered lists:
+1. Item 1
+    - Item 1.1
+    - Item 1.2
+2. Item 2
+    - Item 2.1
+    - Item 2.2
+
+Sometimes, ordered lists are nested within unordered lists:
+- Item 1
+    1. Item 1.1
+    2. Item 1.2
+- Item 2
+    1. Item 2.1
+    2. Item 2.2
+
+Here is a longer paragraph and **bold text** and *italic text*. Lorem ipsum dolor sit amet, consectetur adipiscing elit
+sed do eiusmod tempor [incididunt](https://mit.edu) ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+
+And some inline code, \`\`<inline></inline>\`\` and code block:
+\`\`\`
+def f(x):
+    print(x)
+\`\`\`
+
+And some inline  math: $x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$
+
+And some block math:
+\n
+
+$$
+x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}
+$$
+
+Math is rendered using MathJax only if the useMathJax prop is set to true.
+`;
+/**
+ * This story shows the component's builtin markdown styling.
+ */
+export const MarkdownStyling = {
+    args: {
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        entryScreenEnabled: false,
+        conversationStarters: [],
+        initialMessages: [
+            {
+                role: "assistant",
+                content: DEMO_MARKDOWN,
+            },
+        ],
+        useMathJax: true,
+    },
+};
+const ScrollComponent = (args) => {
+    const ref = useRef(null);
+    const [scrollElement, setScrollElement] = useState(null);
+    useEffect(() => {
+        setScrollElement(ref.current);
+    }, []);
+    return (React.createElement("div", { style: {
+            height: "800px",
+            overflowY: "scroll",
+            border: "2px solid #e0e6ea",
+            position: "relative",
+        }, ref: ref },
+        React.createElement(AiChat, Object.assign({}, args, { scrollElement: scrollElement }))));
+};
+/**
+ * Where a scrollable container exists in the including component, it can be passed in
+ * for the AiChat component to use in place of its own height constrained message container
+ * overflow scroll. This is useful for cases such as use inside a modal or drawer.
+ */
+export const ScrollContainer = {
+    args: {
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        entryScreenEnabled: false,
+        conversationStarters: [],
+        initialMessages: [
+            {
+                content: "Hi! What are you interested in learning about?",
+                role: "assistant",
+            },
+            {
+                content: "I'm looking for a course in computer science, but I'm not sure where to start.",
+                role: "user",
+            },
+            {
+                content: "I can help you find the right course! Could you tell me about your background? Have you done any programming before, and what are your goals?",
+                role: "assistant",
+            },
+            {
+                content: "I've done some basic Python programming, and I'm interested in AI and machine learning. I work full-time though, so I need something flexible.",
+                role: "user",
+            },
+            {
+                content: "Given your background and interests, I have a few recommendations:\n\n1. 6.0001 - Introduction to Computer Science and Programming in Python\n2. 6.0002 - Introduction to Computational Thinking and Data Science\n3. 6.036 - Introduction to Machine Learning\n\nAll these courses offer flexible online options. Would you like more details about any of these?",
+                role: "assistant",
+            },
+            {
+                content: "Yes, could you tell me more about the machine learning course? What are the prerequisites?",
+                role: "user",
+            },
+            {
+                content: "6.036 (Introduction to Machine Learning) requires:\n\n- Basic Python programming\n- Linear algebra fundamentals\n- Basic probability and statistics\n- Calculus I\n\nThe course covers:\n- Supervised learning\n- Neural networks\n- Deep learning basics\n- 12 weeks of content\n- 10-12 hours per week commitment\n\nGiven your Python background, you might need to brush up on math concepts first. Would you like me to suggest some preparatory courses?",
+                role: "assistant",
+            },
+            {
+                content: "Yes, what math courses would you recommend I take first?",
+                role: "user",
+            },
+            {
+                content: "Here are the recommended math prerequisites:\n\n1. 18.01 - Single Variable Calculus\n2. 18.06 - Linear Algebra\n3. 6.041 - Probability\n\nYou can take these online through our OpenCourseWare platform. Each course takes about 8-12 weeks. Would you like to start with any of these? I can provide more details about the course format and materials.",
+                role: "assistant",
+            },
+            {
+                content: "How long would it take to complete all the prerequisites before starting the ML course?",
+                role: "user",
+            },
+            {
+                content: "If you study part-time (10-15 hours per week):\n\n- Calculus: 12 weeks\n- Linear Algebra: 10 weeks\n- Probability: 8 weeks\n\nYou could complete them in:\n1. Sequential order: 7-8 months total\n2. Parallel study (2 courses at a time): 4-5 months\n\nMany students take Calculus and Linear Algebra together. Would you like to see a suggested study schedule?",
+                role: "assistant",
+            },
+            {
+                content: "Yes, a study schedule would be helpful. Also, are there any costs involved?",
+                role: "user",
+            },
+            {
+                content: "Here's the breakdown:\n\nCosts:\n- OpenCourseWare materials: Free\n- Optional verified certificate: $49-99 per course\n- Full ML course with certificate: $149\n\nSuggested Schedule (15 hrs/week):\nMonths 1-3:\n- Calculus (8 hrs/week)\n- Linear Algebra (7 hrs/week)\n\nMonths 4-5:\n- Probability (10 hrs/week)\n\nMonths 6-8:\n- ML course (12 hrs/week)\n\nWould you like me to help you enroll in any of these courses?",
+                role: "assistant",
+            },
+            {
+                content: "Can I start with just the Calculus course first to see how it goes?",
+                role: "user",
+            },
+            {
+                content: "Absolutely! That's a smart approach. 18.01 (Single Variable Calculus) has:\n\n- Flexible start dates\n- Self-paced learning\n- Video lectures\n- Practice problems\n- Online discussion forums\n- 24/7 access to materials\n\nYou can enroll right now and start today. Would you like the enrollment link and first week's syllabus?",
+                role: "assistant",
+            },
+            {
+                content: "Yes, please share the enrollment link. Also, will I have access to any tutoring support?",
+                role: "user",
+            },
+            {
+                content: "Yes! You'll have several support options:\n\n1. Teaching Assistants (TAs) available via:\n   - Discussion forums\n   - Weekly online office hours\n   - Email support\n\n2. Study Groups:\n   - Optional virtual study groups\n   - Peer-to-peer learning\n   - Weekly problem-solving sessions\n\nHere's your enrollment link: [Course Registration Link]\n\nWould you like me to connect you with a TA to discuss your study plan?",
+                role: "assistant",
+            },
+            {
+                content: "Not right now, but I might later. What happens if I find the course too difficult?",
+                role: "user",
+            },
+            {
+                content: "Don't worry! We have several options if you find the course challenging:\n\n1. You can:\n   - Pause your progress anytime\n   - Retake modules as needed\n   - Switch to a more basic math course\n   - Get extra tutoring support\n\n2. We also offer a 2-week trial period with a full refund if you decide it's not the right fit.\n\nWould you like to start with some preliminary practice problems to assess your readiness?",
+                role: "assistant",
+            },
+            {
+                content: "Yes, that would be helpful. Can you send me some practice problems?",
+                role: "user",
+            },
+            {
+                content: "I'll send you our Calculus readiness assessment. It covers:\n\n- Basic algebra\n- Functions and graphs\n- Trigonometry basics\n- Pre-calculus concepts\n\nYou can access it here: [Assessment Link]\n\nTake your time with it - there's no time limit. Once you complete it, I can provide personalized recommendations for where to start. Would you like to try it now?",
+                role: "assistant",
+            },
+        ],
+    },
+    render: (args) => React.createElement(ScrollComponent, Object.assign({}, args)),
+};

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

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

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

@@ -0,0 +1,209 @@
+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());
+    });
+};
+// This was giving false positives
+/* eslint-disable testing-library/await-async-utils */
+import { render, screen, waitFor } from "@testing-library/react";
+import user from "@testing-library/user-event";
+import { AiChat } from "./AiChat";
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider";
+import * as React from "react";
+import { faker } from "@faker-js/faker/locale/en";
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+const counter = jest.fn(); // use jest.fn as counter because it resets on each test
+const API_URL = "http://localhost:4567/test";
+const server = setupServer(http.post(API_URL, () => __awaiter(void 0, void 0, void 0, function* () {
+    const count = counter.mock.calls.length;
+    counter();
+    return HttpResponse.text(`AI Response ${count}`);
+})));
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+jest.mock("react-markdown", () => {
+    return {
+        __esModule: true,
+        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"));
+};
+const getConversationStarters = () => {
+    return Array.from(document.querySelectorAll("button.MitAiChat--conversationStarter"));
+};
+const whenCount = (cb, count) => __awaiter(void 0, void 0, void 0, function* () {
+    return yield waitFor(() => {
+        const result = cb();
+        expect(result).toHaveLength(count);
+        return result;
+    });
+});
+describe("AiChat", () => {
+    beforeEach(() => {
+        const MockObserverInstance = {
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn(),
+        };
+        global.ResizeObserver = jest
+            .fn()
+            .mockImplementation(() => MockObserverInstance);
+    });
+    const setup = (props = {}) => {
+        const initialMessages = [
+            { role: "assistant", content: faker.lorem.sentence() },
+        ];
+        const conversationStarters = [
+            { content: faker.lorem.sentence() },
+            { content: faker.lorem.sentence() },
+        ];
+        const view = render(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: API_URL }, placeholder: "Type a message...", entryScreenEnabled: false }, props)), { wrapper: ThemeProvider });
+        const rerender = (newProps) => {
+            view.rerender(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: API_URL }, entryScreenEnabled: false }, newProps)));
+        };
+        return { initialMessages, conversationStarters, rerender };
+    };
+    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 = faker.helpers.arrayElement([0, 1]);
+        yield user.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.click(screen.getByPlaceholderText("Type a message..."));
+        yield user.paste("User message");
+        yield user.click(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("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 = faker.helpers.arrayElement([0, 1]);
+        yield user.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 mockFetch = jest.spyOn(window, "fetch");
+        const fakeBody = { message: faker.lorem.sentence() };
+        const transformBody = jest.fn(() => fakeBody);
+        const { initialMessages } = setup({
+            requestOpts: { apiUrl: API_URL, transformBody },
+        });
+        yield user.click(screen.getByPlaceholderText("Type a message..."));
+        yield user.paste("User message");
+        yield user.click(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(API_URL, 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: faker.lorem.sentence() };
+        const transformBody = jest.fn(() => fakeBody);
+        const { initialMessages, conversationStarters } = setup({
+            requestOpts: { apiUrl: API_URL, transformBody },
+            parseContent: jest.fn((content) => `Parsed: ${content}`),
+        });
+        yield user.click(getConversationStarters()[0]);
+        yield whenCount(getMessages, initialMessages.length + 2);
+        yield user.click(screen.getByPlaceholderText("Type a message..."));
+        yield user.paste("User message");
+        yield user.click(screen.getByRole("button", { name: "Send" }));
+        yield whenCount(getMessages, initialMessages.length + 4);
+        const messagesTexts = getMessages().map((el) => el.textContent);
+        expect(messagesTexts).toEqual([
+            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: faker.lorem.sentence() };
+        const transformBody = jest.fn(() => fakeBody);
+        setup({
+            requestOpts: { apiUrl: API_URL, transformBody },
+            parseContent: jest.fn((content) => `Parsed: ${content}`),
+        });
+        expect(screen.getByTestId("ai-chat")).toBeInTheDocument();
+    });
+    test("If the API returns an error, an alert is shown", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup();
+        server.use(http.post(API_URL, () => __awaiter(void 0, void 0, void 0, function* () {
+            return new HttpResponse(null, { status: 500 });
+        })));
+        yield user.click(getConversationStarters()[0]);
+        const alert = yield screen.findByRole("alert");
+        expect(alert).toHaveTextContent("An unexpected error has occurred");
+    }));
+    test("Shows the entry screen if entryScreenEnabled is true", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+        });
+        yield expect(screen.getByText("Entry Screen Title")).toBeInTheDocument();
+    }));
+    test("User can submit a prompt from the entry screen", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+            initialMessages: [],
+            conversationStarters: [],
+        });
+        yield user.click(screen.getByRole("textbox"));
+        yield user.paste("User message");
+        yield user.click(screen.getByRole("button", { name: "Send" }));
+        const messages = getMessages();
+        expect(messages[0]).toHaveTextContent("User message");
+    }));
+    test("User can click starter on the entry screen to submit a prompt", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+            initialMessages: [],
+            conversationStarters: [{ content: "Starter 1" }],
+        });
+        yield user.click(screen.getByRole("button", { name: "Starter 1" }));
+        const messages = getMessages();
+        expect(messages[0]).toHaveTextContent("Starter 1");
+    }));
+});

package/dist/esm/components/AiChat/AiChatContext.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { UseChatHelpers } from "@ai-sdk/react";
+import type { AiChatMessage, AiChatContextProps } from "./types";
+/**
+ * All of `@ai-sdk/react`'s [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat)
+ * results, plus the initial messages.
+ */
+type AiChatContextResult = UseChatHelpers & {
+    initialMessages: AiChatMessage[] | null;
+};
+/**
+ * Provides AiChatContext to its children. Within this provider, you can consume
+ * the AiChatContext using the `useAiChat` hook.
+ */
+declare const AiChatProvider: React.FC<AiChatContextProps>;
+/**
+ * Returns the AiChatContext, which includes all results from `@ai-sdk/react`'s
+ * [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook as
+ * well as the initial messages.
+ *
+ * In addition to customizing the fetcher, using a context allows us to avoid
+ * this issue https://github.com/vercel/ai/issues/3266 since the caller no
+ * longer needs to provide the initial messages.
+ */
+declare const useAiChat: () => AiChatContextResult;
+export { useAiChat, AiChatProvider };

package/dist/esm/components/AiChat/AiChatContext.js

@@ -0,0 +1,101 @@
+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());
+    });
+};
+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;
+};
+import * as React from "react";
+import { useChat } from "@ai-sdk/react";
+import { useMemo, createContext } from "react";
+const identity = (x) => x;
+const getFetcher = (requestOpts) => (url, opts) => __awaiter(void 0, void 0, void 0, function* () {
+    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(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 AiChatContext = createContext(null);
+/**
+ * Provides AiChatContext to its children. Within this provider, you can consume
+ * the AiChatContext using the `useAiChat` hook.
+ */
+const AiChatProvider = ({ initialMessages: _initialMessages, requestOpts, chatId, parseContent, children, }) => {
+    const initialMessages = useMemo(() => {
+        var _a;
+        return ((_a = _initialMessages === null || _initialMessages === void 0 ? void 0 : _initialMessages.map((message, i) => (Object.assign(Object.assign({}, message), { id: `initial-${i}` })))) !== null && _a !== void 0 ? _a : []);
+    }, [_initialMessages]);
+    const fetcher = useMemo(() => getFetcher(requestOpts), [requestOpts]);
+    const _a = useChat({
+        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);
+            }
+        },
+        initialMessages,
+        id: chatId,
+    }), { messages: unparsed } = _a, others = __rest(_a, ["messages"]);
+    const messages = useMemo(() => {
+        const initial = initialMessages === null || initialMessages === void 0 ? void 0 : initialMessages.map((m) => m.id);
+        return unparsed.map((m) => {
+            if (m.role === "assistant" && !(initial === null || initial === void 0 ? void 0 : initial.includes(m.id))) {
+                const content = parseContent ? parseContent(m.content) : m.content;
+                return Object.assign(Object.assign({}, m), { content });
+            }
+            return m;
+        });
+    }, [parseContent, unparsed, initialMessages]);
+    return (React.createElement(AiChatContext.Provider
+    /**
+     * Ensure that child state is reset when chatId changes.
+     */
+    , { 
+        /**
+         * Ensure that child state is reset when chatId changes.
+         */
+        key: chatId, value: Object.assign({ initialMessages, messages }, others) }, children));
+};
+/**
+ * Returns the AiChatContext, which includes all results from `@ai-sdk/react`'s
+ * [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook as
+ * well as the initial messages.
+ *
+ * In addition to customizing the fetcher, using a context allows us to avoid
+ * this issue https://github.com/vercel/ai/issues/3266 since the caller no
+ * longer needs to provide the initial messages.
+ */
+const useAiChat = () => {
+    const context = React.useContext(AiChatContext);
+    if (!context) {
+        throw new Error("useAiChatContext must be used within an AiChatProvider");
+    }
+    return context;
+};
+export { useAiChat, AiChatProvider };

package/dist/esm/components/AiChat/AiChatContext.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AiChatProvider } from "./AiChatContext";
+/**
+ * AiChatProvider provides state and functions for managing chat. The higher-level
+ * `AiChat` component is a wrapper around this provider and the `AiChatDisplay`,
+ *  roughly.
+ *
+ * If you need to access chat state outside of the chat display, you can use
+ * `AiChatProvider` directly.
+ */
+declare const meta: Meta<typeof AiChatProvider>;
+export default meta;
+type Story = StoryObj<typeof AiChatProvider>;
+export declare const StreamingResponses: Story;