feat!: AI Chat styling changes, ImageAdapter, image imports (#44)

jest.config.ts

@@ -13,8 +13,7 @@ const config: Config.InitialOptions = {
     "^.+\\.(t|j)sx?$": "@swc/jest",
   },
   moduleNameMapper: {
-    "\\.(svg|jpg|jpeg|png)$": "ol-test-utilities/filemocks/imagemock.js",
-    "\\.(css|scss)$": "ol-test-utilities/filemocks/filemock.js",
+    "\\.(css|scss|svg|jpg|jpeg|png)$": "<rootDir>/test-utils/filemock.js",
   },
   rootDir: "./src",
 }

package.json

@@ -16,8 +16,9 @@
     "typecheck": "tsc --noEmit",
     "build:esm": "tsc",
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "build:static": "cp -r ./static dist/static",
     "build:type-augmentation": "cp -r src/type-augmentation dist/type-augmentation",
-    "build": "rm -rf dist && rm -f .tsbuildinfo && npm run build:esm && npm run build:cjs && npm run build:type-augmentation",
+    "build": "./scripts/build.sh",
     "lint-check": "eslint src/ .storybook/",
     "lint-fix": "yarn lint-check --fix",
     "fmt-check": "prettier --ignore-path .gitignore --ignore-path .prettierignore --check .",

scripts/build.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+set -e -o pipefail
+
+rm -rf dist &&
+	rm -f .tsbuildinfo &&
+	npm run build:esm &&
+	npm run build:cjs &&
+	npm run build:type-augmentation &&
+	npm run build:static

src/Installation.mdx

@@ -0,0 +1,15 @@
+import { Meta } from "@storybook/blocks"
+
+<Meta title="Smoot-Design/Installation/Installation" />
+
+# Installation
+
+## ThemeProvider
+
+All components must be descendants of a `ThemeProvider` component. This component provides the theme to all styled components in the tree. See [https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-themeprovider--docs] for more.
+
+## Image Imports
+
+Some components import images in their source code. Your bundler must be configured to handle these imports.
+
+- **NextJS:** If using NextJS, provide `ImgAdapter: Image` to the theme and specify `transpilePackages: ["@mitodl/smoot-design/ai"],` in the `next.config.js` file.

src/components/AiChat/AiChat.stories.tsx

@@ -4,6 +4,7 @@ import { AiChat } from "./AiChat"
 import type { AiChatProps } from "./types"
 import { mockJson, mockStreaming } from "./story-utils"
 import styled from "@emotion/styled"
+import { fn } from "@storybook/test"
 
 const TEST_API_STREAMING = "http://localhost:4567/streaming"
 const TEST_API_JSON = "http://localhost:4567/json"
@@ -23,11 +24,11 @@ const STARTERS = [
 
 const Container = styled.div({
   width: "100%",
-  height: "350px",
+  height: "500px",
 })
 
 const meta: Meta<typeof AiChat> = {
-  title: "smoot-design/AiChat",
+  title: "smoot-design/ai/AiChat",
   component: AiChat,
   render: (args) => <AiChat {...args} />,
   decorators: (Story) => {
@@ -41,6 +42,8 @@ const meta: Meta<typeof AiChat> = {
     initialMessages: INITIAL_MESSAGES,
     requestOpts: { apiUrl: TEST_API_STREAMING },
     conversationStarters: STARTERS,
+    title: "Chat with AI",
+    onClose: fn(),
   },
   argTypes: {
     conversationStarters: {

src/components/AiChat/AiChat.test.tsx

@@ -30,6 +30,11 @@ jest.mock("react-markdown", () => {
   }
 })
 
+const msg = {
+  ai: (text: string) => `Assistant said: ${text}`,
+  you: (text: string) => `You said: ${text}`,
+}
+
 const getMessages = (): HTMLElement[] => {
   return Array.from(document.querySelectorAll(".MitAiChat--message"))
 }
@@ -55,8 +60,9 @@ describe("AiChat", () => {
       { content: faker.lorem.sentence() },
       { content: faker.lorem.sentence() },
     ]
-    render(
+    const view = render(
       <AiChat
+        data-testid="ai-chat"
         initialMessages={initialMessages}
         conversationStarters={conversationStarters}
         requestOpts={{ apiUrl: "http://localhost:4567/test" }}
@@ -65,7 +71,19 @@ describe("AiChat", () => {
       { wrapper: ThemeProvider },
     )
 
-    return { initialMessages, conversationStarters }
+    const rerender = (newProps: Partial<AiChatProps>) => {
+      view.rerender(
+        <AiChat
+          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", async () => {
@@ -106,6 +124,25 @@ describe("AiChat", () => {
     expect(afterSending[4]).toHaveTextContent("AI Response 1")
   })
 
+  test("Messages persist if chat has same chatId", async () => {
+    const { rerender } = setup({ chatId: "test-123" })
+    const starterEls = getConversationStarters()
+    const chosen = faker.helpers.arrayElement([0, 1])
+
+    await user.click(starterEls[chosen])
+    await whenCount(getMessages, 3)
+
+    // New chat ... starters should be shown
+    rerender({ chatId: "test-345" })
+    expect(getConversationStarters().length).toBeGreaterThan(0)
+    await whenCount(getMessages, 1)
+
+    // existing chat ... starters should not be shown, messages should be restored
+    rerender({ chatId: "test-123" })
+    expect(getConversationStarters().length).toBe(0)
+    await whenCount(getMessages, 3)
+  })
+
   test("transformBody is called before sending requests", async () => {
     const fakeBody = { message: faker.lorem.sentence() }
     const apiUrl = faker.internet.url()
@@ -151,12 +188,24 @@ describe("AiChat", () => {
     await 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: faker.lorem.sentence() }
+    const apiUrl = faker.internet.url()
+    const transformBody = jest.fn(() => fakeBody)
+    setup({
+      requestOpts: { apiUrl, transformBody },
+      parseContent: jest.fn((content) => `Parsed: ${content}`),
+    })
+    expect(screen.getByTestId("ai-chat")).toBeInTheDocument()
+  })
 })