@mitodl/smoot-design 6.0.1 → 6.2.0

package/dist/esm/components/AiChat/AiChat.js

@@ -40,10 +40,10 @@ const classes = {
     bottomSection: "MitAiChat--bottomSection",
 };
 const Container = styled.div();
-const ChatScreen = styled.div(({ externalScroll, theme }) => (Object.assign({ padding: "16px 28px 0", [theme.breakpoints.down("md")]: {
+const ChatScreen = styled.div(({ externalScroll, theme }) => (Object.assign({ padding: "16px 32px 0", [theme.breakpoints.down("md")]: {
         padding: "16px 16px 0",
     }, boxSizing: "border-box", background: "white", position: "absolute", bottom: 0, top: 0, left: 0, right: 0, zIndex: 1 }, (externalScroll && {
-    padding: "0 28px",
+    padding: "0 32px",
     [theme.breakpoints.down("md")]: {
         padding: "0 16px",
     },
@@ -183,15 +183,6 @@ const AiChat = (_a) => {
                 return;
             }
             setShowEntryScreen(false);
-            if (entryScreenTitle && !initialMessages) {
-                setInitialMessages([
-                    {
-                        role: "assistant",
-                        content: entryScreenTitle,
-                        id: `initial-${Math.random().toString().slice(2)}-0`,
-                    },
-                ]);
-            }
             append({ role: "user", content: prompt });
         } })) : (React.createElement(ChatScreen, { className: classes.chatScreenContainer, "data-testid": "ai-chat-screen", externalScroll: externalScroll, ref: chatScreenRef },
         React.createElement(ChatContainer, Object.assign({ className: classNames(className, classes.root), externalScroll: externalScroll }, others),

package/dist/esm/components/AiChat/AiChat.test.js

@@ -175,4 +175,35 @@ describe("AiChat", () => {
         const alert = yield screen.findByRole("alert");
         expect(alert).toHaveTextContent("An unexpected error has occurred");
     }));
+    test("Shows the entry screen if entryScreenEnabled is true", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+        });
+        yield expect(screen.getByText("Entry Screen Title")).toBeInTheDocument();
+    }));
+    test("User can submit a prompt from the entry screen", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+            initialMessages: [],
+            conversationStarters: [],
+        });
+        yield user.click(screen.getByRole("textbox"));
+        yield user.paste("User message");
+        yield user.click(screen.getByRole("button", { name: "Send" }));
+        const messages = getMessages();
+        expect(messages[0]).toHaveTextContent("User message");
+    }));
+    test("User can click starter on the entry screen to submit a prompt", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+            initialMessages: [],
+            conversationStarters: [{ content: "Starter 1" }],
+        });
+        yield user.click(screen.getByRole("button", { name: "Starter 1" }));
+        const messages = getMessages();
+        expect(messages[0]).toHaveTextContent("Starter 1");
+    }));
 });

package/dist/esm/components/AiChat/EntryScreen.js

@@ -75,7 +75,6 @@ const Starter = styled.button(({ theme }) => ({
     backgroundColor: "transparent",
     textAlign: "left",
     [theme.breakpoints.down("sm")]: {
-        textAlign: "center",
         padding: "12px 36px",
     },
     ":hover": {

package/dist/esm/components/TabButtons/TabButtonList.d.ts

@@ -3,7 +3,7 @@ import type { TabProps } from "@mui/material/Tab";
 import type { TabListProps } from "@mui/lab/TabList";
 import type { ButtonLinkProps } from "../Button/Button";
 type StyleVariant = "chat";
-export type TabButtonListProps = TabListProps & {
+type TabButtonListProps = TabListProps & {
     styleVariant?: StyleVariant;
 };
 declare const TabButtonList: React.FC<TabButtonListProps>;
@@ -11,6 +11,15 @@ declare const TabLinkInner: React.ForwardRefExoticComponent<Omit<ButtonLinkProps
 type TabButtonProps = Omit<TabProps<"button">, "color"> & {
     styleVariant?: StyleVariant;
 };
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * Button as the `component` implementation.
+ */
 declare const TabButton: (props: TabButtonProps) => React.JSX.Element;
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * ButtonLink as the `component` implementation.
+ */
 declare const TabButtonLink: ({ ...props }: TabProps<typeof TabLinkInner>) => React.JSX.Element;
 export { TabButtonList, TabButton, TabButtonLink };
+export type { TabButtonListProps, TabButtonProps };

package/dist/esm/components/TabButtons/TabButtonList.js

@@ -20,7 +20,10 @@ const defaultTabListProps = {
     allowScrollButtonsMobile: true,
     scrollButtons: "auto",
 };
-const TabButtonList = styled((props) => (React.createElement(MuiTabList, Object.assign({}, defaultTabListProps, props))))(({ theme, styleVariant }) => (Object.assign({ minHeight: "unset", ".MuiTabs-indicator": {
+const TabButtonList = styled((_a) => {
+    var { styleVariant } = _a, props = __rest(_a, ["styleVariant"]);
+    return (React.createElement(MuiTabList, Object.assign({}, defaultTabListProps, props)));
+})(({ theme, styleVariant }) => (Object.assign({ minHeight: "unset", ".MuiTabs-indicator": {
         display: "none",
     }, ".MuiTabs-flexContainer": {
         gap: "8px",
@@ -73,7 +76,15 @@ const TabLinkInner = React.forwardRef((props, ref) => {
     return React.createElement(TabLinkStyled, Object.assign({}, defaultTabButtonProps, others, { ref: ref }));
 });
 TabLinkInner.displayName = "TabLinkInner";
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * Button as the `component` implementation.
+ */
 const TabButton = (props) => (React.createElement(MuiTab, Object.assign({}, props, { component: TabButtonInner })));
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * ButtonLink as the `component` implementation.
+ */
 const TabButtonLink = (_a) => {
     var props = __rest(_a, []);
     return (React.createElement(MuiTab, Object.assign({}, props, { component: TabLinkInner })));

package/dist/esm/index.d.ts

@@ -12,4 +12,5 @@ export { TextField } from "./components/TextField/TextField";
 export type { TextFieldProps } from "./components/TextField/TextField";
 export { SrAnnouncer } from "./components/SrAnnouncer/SrAnnouncer";
 export type { SrAnnouncerProps } from "./components/SrAnnouncer/SrAnnouncer";
+export { TabButton, TabButtonLink, TabButtonList, } from "./components/TabButtons/TabButtonList";
 export { VisuallyHidden } from "./components/VisuallyHidden/VisuallyHidden";

package/dist/esm/index.js

@@ -7,4 +7,5 @@ export { ActionButton, ActionButtonLink, } from "./components/Button/ActionButto
 export { Input } from "./components/Input/Input";
 export { TextField } from "./components/TextField/TextField";
 export { SrAnnouncer } from "./components/SrAnnouncer/SrAnnouncer";
+export { TabButton, TabButtonLink, TabButtonList, } from "./components/TabButtons/TabButtonList";
 export { VisuallyHidden } from "./components/VisuallyHidden/VisuallyHidden";