add a websocket-based frontend page

env/frontend.env

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_MITOL_API_BASE_URL=${MITOL_APP_BASE_URL}
+NEXT_PUBLIC_MITOL_WS_API_BASE_URL=ws://ai.open.odl.local:8002
 NEXT_PUBLIC_CSRF_COOKIE_NAME=${CSRF_COOKIE_NAME}

frontend-demo/package.json

@@ -18,7 +18,7 @@
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mitodl/smoot-design": "^1.2.1",
+    "@mitodl/smoot-design": "https://github.com/mitodl/smoot-design.git#30f59df543232b85cf03a08633283bfcc80351c9",
     "@mui/material": "^6.1.8",
     "@mui/material-nextjs": "^6.1.8",
     "@remixicon/react": "^4.2.0",

frontend-demo/src/app/ws/page.tsx

@@ -0,0 +1,42 @@
+"use client"
+import React from "react"
+import { AiChatWs, AiChatProps } from "@mitodl/smoot-design/ai"
+import styled from "@emotion/styled"
+
+const INITIAL_MESSAGES: AiChatProps["initialMessages"] = [
+  {
+    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 REQUEST_OPTS: AiChatProps["requestOpts"] = {
+  apiUrl: `${process.env.NEXT_PUBLIC_MITOL_WS_API_BASE_URL}/ws/recommendation_agent/`,
+  transformBody(messages) {
+    const message = messages[messages.length - 1].content
+    return { message }
+  },
+}
+
+const StyledChat = styled(AiChatWs)({
+  height: "calc(80vh - 72px)",
+  marginTop: "16px",
+})
+
+const HomePage: React.FC = () => {
+  return (
+    <StyledChat
+      initialMessages={INITIAL_MESSAGES}
+      requestOpts={REQUEST_OPTS}
+      conversationStarters={STARTERS}
+    />
+  )
+}
+
+export default HomePage