(EAI-598) [UI] Investigate further code splitting (#563)

packages/mongodb-chatbot-ui/package.json

@@ -81,7 +81,6 @@
     "@leafygreen-ui/icon": "^12.4.0",
     "@leafygreen-ui/icon-button": "^15.0.21",
     "@leafygreen-ui/leafygreen-provider": "^3.1.12",
-    "@leafygreen-ui/loading-indicator": "^2.0.12",
     "@leafygreen-ui/menu": "^22.0.9",
     "@leafygreen-ui/modal": "^16.0.7",
     "@leafygreen-ui/palette": "^4.0.10",

packages/mongodb-chatbot-ui/src/ChatMessageFeed.tsx

@@ -0,0 +1,98 @@
+import { css, cx } from "@emotion/css";
+import { useDarkMode } from "@leafygreen-ui/leafygreen-provider";
+import { DisclaimerText } from "@lg-chat/chat-disclaimer";
+import { MessageFeed } from "@lg-chat/message-feed";
+import { MessageData } from "./services/conversations";
+import { useChatbotContext } from "./useChatbotContext";
+import { lazy } from "react";
+import { DarkModeProps } from "./DarkMode";
+
+const Message = lazy(async () => ({
+  default: (await import("./Message")).Message,
+}));
+
+const styles = {
+  disclaimer_text: css`
+    text-align: center;
+    margin-top: 16px;
+    margin-bottom: 32px;
+  `,
+  message_feed: css`
+    height: 100%;
+    max-height: 70vh;
+    & > div {
+      box-sizing: border-box;
+      max-height: 70vh;
+    }
+  `,
+};
+
+export type ChatMessageFeedProps = DarkModeProps & {
+  className?: HTMLElement["className"];
+  disclaimer?: React.ReactNode;
+  disclaimerHeading?: string;
+  initialMessage?: MessageData | null;
+};
+
+export function ChatMessageFeed(props: ChatMessageFeedProps) {
+  const { darkMode } = useDarkMode(props.darkMode);
+  const { className, disclaimer, disclaimerHeading, initialMessage } = props;
+
+  const { awaitingReply, canSubmit, conversation, handleSubmit } =
+    useChatbotContext();
+
+  const messages = initialMessage
+    ? [initialMessage, ...conversation.messages]
+    : conversation.messages;
+
+  return messages.length === 0 ? null : (
+    <MessageFeed
+      darkMode={darkMode}
+      className={cx(styles.message_feed, className)}
+    >
+      {disclaimer ? (
+        <DisclaimerText
+          title={disclaimerHeading ?? "Terms of Use"}
+          className={styles.disclaimer_text}
+        >
+          {disclaimer}
+        </DisclaimerText>
+      ) : null}
+      {messages.map((message, idx) => {
+        const isLoading = conversation.isStreamingMessage
+          ? message.id === conversation.streamingMessage?.id &&
+            conversation.streamingMessage?.content === ""
+          : false;
+
+        const isInitialMessage = idx === 0;
+
+        return (
+          <Message
+            key={message.id}
+            messageData={message}
+            isLoading={isLoading}
+            showRating={
+              // Users can rate assistant messages that have started streaming
+              message.role === "assistant" &&
+              !isLoading &&
+              !(
+                awaitingReply &&
+                conversation.streamingMessage?.id === message.id
+              ) &&
+              // We don't want users to rate the initial message (and they can't because it's not in the database)
+              !isInitialMessage
+            }
+            conversation={conversation}
+            suggestedPrompts={message.suggestedPrompts}
+            showSuggestedPrompts={
+              // For now we'll only show suggested prompts for the initial message and hide them once the user submits anything
+              isInitialMessage && conversation.messages.length === 0
+            }
+            onSuggestedPromptClick={handleSubmit}
+            canSubmitSuggestedPrompt={canSubmit}
+          />
+        );
+      })}
+    </MessageFeed>
+  );
+}