Recommendation bot UI (#2019)

* Update chat page to use Smoot Design AiChat

* Homepage "Ask TIM" button and drawer entry screen

* Hook up entry screen prompt and suggestions. Hover styling

* Syllabus bot layout styles

* Replace SVG images with Remixicon

* Fix button selector for test

* Remove send code

* Latest smoot-design branch commit

* fix lockfile

* Match Input types

* Install git on the docker build container

* Install git in the container

* Imperative handle approach for appending initial message

* Prevent firing sppend twice if render between timer

* fix lockfile

* Starters as buttons for accessibility and disabled adornment button style

* Upgrade smoot-design and remove nlux

* Fix disabled hover

---------

Co-authored-by: Chris Chudzicki <[email protected]>

Author: jonkafton

frontends/main/Dockerfile.web

@@ -57,6 +57,7 @@ FROM node:22-alpine
 
 RUN apk update
 RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache git
 
 WORKDIR /app
 

frontends/main/package.json

@@ -14,10 +14,8 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/styled": "^11.11.0",
     "@mitodl/course-search-utils": "3.3.2",
-    "@mitodl/smoot-design": "^3.0.1",
+    "@mitodl/smoot-design": "^3.2.0",
     "@next/bundle-analyzer": "^14.2.15",
-    "@nlux/react": "^2.17.1",
-    "@nlux/themes": "^2.17.1",
     "@remixicon/react": "^4.2.0",
     "@sentry/nextjs": "^8.36.0",
     "@tanstack/react-query": "^5.66",

frontends/main/public/images/icons/tim.svg

@@ -1,61 +1,61 @@
 "use client"
-import React, { useMemo } from "react"
-import { makeSend } from "./send"
 
-import { FeatureFlags } from "@/common/feature_flags"
-import { useFeatureFlagEnabled } from "posthog-js/react"
-import StyledContainer from "@/page-components/StyledContainer/StyledContainer"
+import React from "react"
 import { styled } from "ol-components"
-import { NluxAiChat } from "@/page-components/Nlux-AiChat/AiChat"
+import { getCsrfToken } from "@/common/utils"
+import { AiChat, AiChatProps } from "@mitodl/smoot-design/ai"
 
-const StyledChat = styled(NluxAiChat)({
-  maxHeight: "60vh",
-  flex: 1,
+const Container = styled.div({
+  margin: "40px auto",
+  width: "60%",
 })
 
-const CONVERSATION_OPTIONS = {
-  conversationStarters: [
-    {
-      prompt:
-        "I'm interested in courses on quantum computing that offer certificates.",
-    },
-    {
-      prompt:
-        "I want to learn about global warming, can you recommend any videos?",
-    },
-    {
-      prompt:
-        "I am curious about AI applications for business.  Do you have any free courses about that?",
-    },
-    {
-      prompt:
-        "I would like to learn about linear regression, preferably at no cost.",
-    },
-  ],
-}
+const INITIAL_MESSAGES: AiChatProps["initialMessages"] = [
+  {
+    content: "What do you want to learn about today?",
+    role: "assistant",
+  },
+]
+
+export const STARTERS = [
+  {
+    content:
+      "I'm interested in courses on quantum computing that offer certificates.",
+  },
+  {
+    content:
+      "I want to learn about global warming, can you recommend any videos?",
+  },
+  {
+    content:
+      "I am curious about AI applications for business.  Do you have any free courses about that?",
+  },
+  {
+    content:
+      "I would like to learn about linear regression, preferably at no cost.",
+  },
+]
 
 const ChatPage = () => {
-  const recommendationBotEnabled = useFeatureFlagEnabled(
-    FeatureFlags.RecommendationBot,
-  )
-  const send = useMemo(() => {
-    return makeSend({ url: "/api/v0/chat_agent/" })
-  }, [])
   return (
-    <StyledContainer>
-      {
-        // eslint-disable-next-line no-constant-condition
-        recommendationBotEnabled ? (
-          <StyledChat
-            key={"agent"}
-            send={send}
-            conversationOptions={CONVERSATION_OPTIONS}
-          />
-        ) : (
-          <></>
-        )
-      }
-    </StyledContainer>
+    <Container>
+      <AiChat
+        askTimTitle="to recommend a course"
+        initialMessages={INITIAL_MESSAGES}
+        conversationStarters={STARTERS}
+        requestOpts={{
+          apiUrl: `${process.env.NEXT_PUBLIC_MITOL_API_BASE_URL}/api/v0/chat_agent/`,
+          fetchOpts: {
+            headers: {
+              "X-CSRFToken": getCsrfToken(),
+            },
+          },
+          transformBody: (messages) => ({
+            message: messages[messages.length - 1].content,
+          }),
+        }}
+      />
+    </Container>
   )
 }