feat: Tracking events for drawer (#137)

Author: ChristopherChudzicki

src/bundles/AiDrawer/AiDrawer.stories.tsx

@@ -3,17 +3,15 @@ import * as React from "react"
 import type { Meta, StoryObj } from "@storybook/react"
 import { http, HttpResponse } from "msw"
 import { handlers } from "../../components/AiChat/test-utils/api"
-import { AiDrawer, AiDrawerInitMessage } from "./AiDrawer"
+import { AiDrawer, AiDrawerSettings } from "./AiDrawer"
 import { MathJaxContext } from "better-react-mathjax"
 import Button from "@mui/material/Button"
 
-type InitPayload = AiDrawerInitMessage["payload"]
-
 const TEST_API_STREAMING = "http://localhost:4567/streaming"
 const CONTENT_FILE_URL =
   "http://localhost:4567/api/v1/contentfiles/?edx_module_id=1"
 
-const INITIAL_MESSAGES: InitPayload["chat"]["initialMessages"] = [
+const INITIAL_MESSAGES: AiDrawerSettings["chat"]["initialMessages"] = [
   {
     content: "Hi! What are you interested in learning about?",
     role: "assistant",
@@ -29,18 +27,18 @@ const STARTERS = [
 const meta: Meta<typeof AiDrawer> = {
   title: "smoot-design/AI/AiDrawer",
   component: AiDrawer,
-  render: ({ payload }) => {
+  render: ({ settings }) => {
     const [open, setOpen] = React.useState(false)
     return (
       <>
         <Button variant="outlined" onClick={() => setOpen(true)}>
           Open Drawer
         </Button>
         <p>Message data:</p>
-        <pre>{JSON.stringify({ payload }, null, 2)}</pre>
+        <pre>{JSON.stringify({ settings }, null, 2)}</pre>
         <MathJaxContext>
           <AiDrawer
-            payload={payload}
+            settings={settings}
             open={open}
             onClose={() => setOpen(false)}
           />
@@ -49,7 +47,7 @@ const meta: Meta<typeof AiDrawer> = {
     )
   },
   argTypes: {
-    payload: {
+    settings: {
       // JSON controls break form submission via keyboard. See
       // https://github.com/storybookjs/storybook/issues/31881
       control: false,
@@ -63,9 +61,8 @@ type Story = StoryObj<typeof AiDrawer>
 
 export const ProblemStory: Story = {
   args: {
-    payload: {
+    settings: {
       blockType: "problem",
-      target: "problem-frame",
       title: "AskTIM for help with Problem: Derivatives 1.1",
       chat: {
         apiUrl: TEST_API_STREAMING,
@@ -78,9 +75,9 @@ export const ProblemStory: Story = {
 
 export const ProblemDefaultInitialMessagesStory: Story = {
   args: {
-    payload: {
+    settings: {
       blockType: "problem",
-      target: "problem-frame-default-initial-messages",
+
       title: "AskTIM for help with Problem: Derivatives 1.1",
       chat: {
         apiUrl: TEST_API_STREAMING,
@@ -92,9 +89,8 @@ export const ProblemDefaultInitialMessagesStory: Story = {
 
 export const EntryScreenStory: Story = {
   args: {
-    payload: {
+    settings: {
       blockType: "problem",
-      target: "entry-screen-frame",
       chat: {
         apiUrl: TEST_API_STREAMING,
         initialMessages: INITIAL_MESSAGES,
@@ -111,9 +107,8 @@ export const EntryScreenStory: Story = {
  */
 export const VideoStory: Story = {
   args: {
-    payload: {
+    settings: {
       blockType: "video",
-      target: "video-frame",
       chat: {
         apiUrl: TEST_API_STREAMING,
         conversationStarters: STARTERS,
@@ -141,9 +136,8 @@ export const VideoStory: Story = {
  */
 export const FlashcardConversationStartersStory: Story = {
   args: {
-    payload: {
+    settings: {
       blockType: "video",
-      target: "starters-frame",
       chat: {
         apiUrl: TEST_API_STREAMING,
       },