scroll-tech · Holybasil · Jun 4, 2025 · Apr 15, 2025 · Apr 16, 2025 · Apr 16, 2025
diff --git a/package.json b/package.json
@@ -43,10 +43,12 @@
     "immer": "^9.0.7",
     "lodash": "^4.17.21",
     "motion": "^11.18.1",
+    "nanoid": "^5.1.5",
     "next": "15.1.4",
     "notistack": "^3.0.1",
     "number-flip": "^1.2.3",
     "numbro": "^2.3.6",
+    "openai": "^4.94.0",
     "path-to-regexp": "^6.2.1",
     "react": "19.0.0",
     "react-awesome-reveal": "^4.2.5",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -5,6 +5,8 @@
 
 @config "../../tailwind.config.ts";
 
+@import "../assets/css/assistant-message.css";
+
 @theme {
   --breakpoint-sm: 600px;
   --breakpoint-md: 900px;
@@ -47,7 +49,7 @@ body {
   background-color: var(--theme-bg);
 }
 
-body.mobile-top-nav-open {
+body.disable-body-scroll {
   overflow: hidden !important;
 }
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,7 @@ import { GoogleAnalytics } from "@next/third-parties/google"
 import { SpeedInsights } from "@vercel/speed-insights/next"
 import clsx from "clsx"
 import { Metadata } from "next"
-import { Roboto } from "next/font/google"
+import { Inter, Roboto } from "next/font/google"
 import localFont from "next/font/local"
 import React, { Suspense } from "react"
 
@@ -22,6 +22,8 @@ import "./globals.css"
 
 export const metadata: Metadata = ROOT_METADATA
 
+export const maxDuration = 90
+
 // same as scroll documnet
 const robotoFont = Roboto({
   variable: "--font-developer",
@@ -30,6 +32,13 @@ const robotoFont = Roboto({
   subsets: ["latin"],
 })
 
+const interFont = Inter({
+  variable: "--font-inter",
+  weight: ["400", "500", "700"],
+  display: "swap",
+  subsets: ["latin"],
+})
+
 const titleFont = localFont({
   src: [
     {
@@ -55,7 +64,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="dns-prefetch" href={process.env.NEXT_PUBLIC_API_BASE_URI} crossOrigin="anonymous" />
         {/* <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet" /> */}
       </head>
-      <body className={clsx(titleFont.variable, robotoFont.variable)}>
+      <body className={clsx(titleFont.variable, robotoFont.variable, interFont.variable)}>
         <InitColorSchemeScript attribute="class"></InitColorSchemeScript>
         <AppRouterCacheProvider options={{ key: "css" }}>
           <ScrollThemeProvider>

diff --git a/src/assets/css/assistant-message.css b/src/assets/css/assistant-message.css
@@ -0,0 +1,91 @@
+.assistant-message {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  font-family: var(--font-inter);
+}
+
+.assistant-message p {
+  margin: 0 0 16px;
+  max-width: 100%;
+  line-height: 2.6rem;
+}
+
+.assistant-message h1,
+.assistant-message h2,
+.assistant-message h3 {
+  font-weight: 700;
+  margin-bottom: 1.6rem;
+}
+
+.assistant-message ol {
+  list-style-type: decimal;
+  margin-left: 1.8rem;
+  margin-bottom: 1.6rem;
+}
+.assistant-message > ol > li {
+  margin-bottom: 1.6rem;
+}
+.assistant-message > ol > li::marker {
+  font-weight: 700;
+}
+.assistant-message > ol > li p {
+  margin-bottom: 0;
+}
+
+.assistant-message ul {
+  list-style-type: disc;
+  margin-left: 1.5rem;
+  margin-bottom: 1.6rem;
+}
+
+.assistant-message li {
+  margin-bottom: 0.8rem;
+}
+
+.assistant-message blockquote:not(:empty) {
+  border-left: 2px solid #9b9b9b;
+  font-style: italic;
+  font-size: 15px;
+  color: #777;
+  padding: 8px 8px 8px 16px;
+  margin-bottom: 1.6rem;
+}
+.assistant-message blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.assistant-message pre {
+  background-color: #1010100d;
+  padding: 0.8rem 1.6rem;
+  border-radius: 0.4rem;
+  margin-bottom: 1.6rem;
+}
+
+.assistant-message pre code {
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.assistant-message code {
+  background-color: #1010100d;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.2rem;
+}
+
+.assistant-message a {
+  color: #ff684b;
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-position: from-font;
+}
+
+.assistant-message img {
+  background-color: transparent;
+}
+
+.assistant-message strong {
+  font-weight: 700;
+}
diff --git a/src/assets/images/common/ai-bot.png b/src/assets/images/common/ai-bot.png
diff --git a/src/assets/images/common/scrolly-cool.png b/src/assets/images/common/scrolly-cool.png
diff --git a/src/assets/svgs/header/checked.svg b/src/assets/svgs/header/checked.svg
diff --git a/src/assets/svgs/header/close.svg b/src/assets/svgs/header/close.svg
diff --git a/src/assets/svgs/header/copy.svg b/src/assets/svgs/header/copy.svg
diff --git a/src/assets/svgs/header/enter.svg b/src/assets/svgs/header/enter.svg
diff --git a/src/assets/svgs/header/re-send.svg b/src/assets/svgs/header/re-send.svg
diff --git a/src/assets/svgs/header/send.svg b/src/assets/svgs/header/send.svg
diff --git a/src/assets/svgs/header/spin.svg b/src/assets/svgs/header/spin.svg
diff --git a/src/assets/svgs/header/thumb-down.svg b/src/assets/svgs/header/thumb-down.svg
diff --git a/src/assets/svgs/header/thumb-up.svg b/src/assets/svgs/header/thumb-up.svg
diff --git a/src/components/AIModal/AIInput.tsx b/src/components/AIModal/AIInput.tsx
@@ -0,0 +1,52 @@
+import { IconButton, Stack, TextareaAutosize } from "@mui/material"
+
+import SendSvg from "@/assets/svgs/header/send.svg"
+
+const AIInput = props => {
+  const { value, disabled, onChat, ...restProps } = props
+
+  const handleKeyDown = e => {
+    if (e.key === "Enter" && !e.shiftKey && !disabled) {
+      e.preventDefault()
+      onChat(value.trim())
+    }
+  }
+
+  return (
+    <Stack
+      direction="row"
+      sx={{
+        borderRadius: "2.8rem",
+        border: disabled ? "2px solid #1010101A" : "2px solid #101010",
+        p: "0.6rem",
+        gap: "1.6rem",
+        alignItems: "center",
+      }}
+    >
+      <TextareaAutosize
+        maxRows={4}
+        placeholder="Message"
+        autoFocus
+        style={{
+          fontSize: "1.6rem",
+          lineHeight: "2.4rem",
+          border: "none",
+          outline: "none",
+          resize: "none",
+          width: "100%",
+          paddingLeft: "1.6rem",
+          scrollbarColor: "#ececec transparent",
+          scrollbarWidth: "thin",
+        }}
+        value={value}
+        {...restProps}
+        onKeyDown={handleKeyDown}
+      ></TextareaAutosize>
+      <IconButton sx={{ p: 0, opacity: disabled ? "0.4" : "1" }} aria-label="Enter" onClick={() => onChat(value)}>
+        <SendSvg></SendSvg>
+      </IconButton>
+    </Stack>
+  )
+}
+
+export default AIInput
diff --git a/src/components/AIModal/AssistantMessage.tsx b/src/components/AIModal/AssistantMessage.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from "react"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+
+import { Box } from "@mui/material"
+
+import Operation from "./Operation"
+
+const AssistantMessage = props => {
+  const { children, feedback, allowOperation, isLast, onRetry, onThumbUp, onThumbDown } = props
+
+  const [operationVisible, setOperationVisible] = useState<boolean>(false)
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setOperationVisible(true)
+  }
+
+  const handlePopoverClose = () => {
+    setOperationVisible(false)
+  }
+
+  return (
+    <>
+      <Box onMouseEnter={handlePopoverOpen} onMouseLeave={handlePopoverClose}>
+        <ReactMarkdown
+          children={children as string}
+          remarkPlugins={[remarkGfm]}
+          components={{
+            a: ({ node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
+          }}
+          className="assistant-message"
+        />
+        <Box sx={{ height: "2rem", marginTop: "-0.4rem", marginBottom: "1.6rem" }}>
+          <Operation
+            visible={allowOperation && (isLast || operationVisible)}
+            message={children as string}
+            feedback={feedback}
+            onThumbUp={onThumbUp}
+            onThumbDown={onThumbDown}
+            onRetry={onRetry}
+          ></Operation>
+        </Box>
+      </Box>
+    </>
+  )
+}
+
+export default AssistantMessage
diff --git a/src/components/AIModal/FeedbackAlert.tsx b/src/components/AIModal/FeedbackAlert.tsx
@@ -0,0 +1,44 @@
+import { AnimatePresence, motion } from "motion/react"
+import { useEffect } from "react"
+
+import { Box } from "@mui/material"
+
+const MotionBox = motion(Box)
+const FeedbackAlert = props => {
+  const { sx, open, duration, children, onClose } = props
+
+  useEffect(() => {
+    if (open) {
+      const timer = setTimeout(() => {
+        onClose?.()
+      }, duration || 2e3) // Auto close after 3 seconds
+      return () => clearTimeout(timer)
+    }
+  }, [open])
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <MotionBox
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          transition={{ duration: 0.3 }}
+          sx={{
+            borderRadius: "0.4rem",
+            backgroundColor: "#101010",
+            color: "#fff",
+            fontSize: "1.2rem",
+            padding: "0.4rem 1.2rem",
+
+            ...sx,
+          }}
+        >
+          {children}
+        </MotionBox>
+      )}
+    </AnimatePresence>
+  )
+}
+
+export default FeedbackAlert