@mitodl/smoot-design 0.0.0-0a23f44

package/dist/cjs/VERSION.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file is auto-generated at build time.
+ * Run node ./scripts/set_version.js to update the version.
+ * Do not update this file manually.
+ *
+ * NOTES:
+ * - In development, VERSION will always be "0.0.0"
+ * - The version should not simply be imported from package.json. This would
+ *   result in all of the package.json being included in the bundled code, which
+ *   is not desired.
+ */
+export declare const VERSION = "0.0.0-0a23f44";

package/dist/cjs/VERSION.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VERSION = void 0;
+/**
+ * This file is auto-generated at build time.
+ * Run node ./scripts/set_version.js to update the version.
+ * Do not update this file manually.
+ *
+ * NOTES:
+ * - In development, VERSION will always be "0.0.0"
+ * - The version should not simply be imported from package.json. This would
+ *   result in all of the package.json being included in the bundled code, which
+ *   is not desired.
+ */
+exports.VERSION = "0.0.0-0a23f44";

package/dist/cjs/ai.d.ts

@@ -0,0 +1,3 @@
+export { AiChat, AiChatDisplay } from "./components/AiChat/AiChat";
+export { AiChatProvider, useAiChat } from "./components/AiChat/AiChatContext";
+export type { AiChatMessage, AiChatContextProps, AiChatDisplayProps, AiChatProps, } from "./components/AiChat/types";

package/dist/cjs/ai.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAiChat = exports.AiChatProvider = exports.AiChatDisplay = exports.AiChat = void 0;
+var AiChat_1 = require("./components/AiChat/AiChat");
+Object.defineProperty(exports, "AiChat", { enumerable: true, get: function () { return AiChat_1.AiChat; } });
+Object.defineProperty(exports, "AiChatDisplay", { enumerable: true, get: function () { return AiChat_1.AiChatDisplay; } });
+var AiChatContext_1 = require("./components/AiChat/AiChatContext");
+Object.defineProperty(exports, "AiChatProvider", { enumerable: true, get: function () { return AiChatContext_1.AiChatProvider; } });
+Object.defineProperty(exports, "useAiChat", { enumerable: true, get: function () { return AiChatContext_1.useAiChat; } });

package/dist/cjs/bundles/AiDrawer/AiDrawer.d.ts

@@ -0,0 +1,55 @@
+import { FC } from "react";
+import type { AiChatProps, AiChatMessage } from "../../components/AiChat/types";
+type AiDrawerInitMessage = {
+    type: "smoot-design::ai-drawer-open" | "smoot-design::tutor-drawer-open";
+    payload: {
+        blockType?: "problem" | "video";
+        target?: string;
+        /**
+         * If the title begins "AskTIM", it is styled as the AskTIM logo.
+         */
+        title?: string;
+        chat: {
+            chatId?: AiChatProps["chatId"];
+            conversationStarters?: AiChatProps["conversationStarters"];
+            initialMessages?: AiChatProps["initialMessages"];
+            apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+            requestBody?: Record<string, unknown>;
+            entryScreenEnabled?: AiChatProps["entryScreenEnabled"];
+            entryScreenTitle?: AiChatProps["entryScreenTitle"];
+        };
+        summary?: {
+            apiUrl: string;
+        };
+    };
+};
+type AiDrawerProps = {
+    className?: string;
+    /**
+     * Transform the body of the request before sending it to the server.
+     * Its result will be merged with the per-message requestBody opt, with
+     * transformBody taking precedence.
+     *
+     * *This cannot be supplied via message events since the function is not serializable.*
+     *
+     */
+    transformBody?: (messages: AiChatMessage[]) => Iterable<unknown>;
+    /**
+     * Fetch options to be passed to the fetch call.
+     *
+     * NOTE: By default, the credentials are set to "include" to enable thread-
+     * identifying cookies.
+     */
+    fetchOpts?: AiChatProps["requestOpts"]["fetchOpts"];
+    /**
+     * Pass to target a specific drawer instance where multiple are on the page.
+     */
+    /** @deprecated The AiDrawerManager now handles multiple AiDrawer instance removing the need to target */
+    target?: string;
+    payload?: AiDrawerInitMessage["payload"];
+    open?: boolean;
+    onClose?: () => void;
+};
+declare const AiDrawer: FC<AiDrawerProps>;
+export { AiDrawer };
+export type { AiDrawerProps, AiDrawerInitMessage };

package/dist/cjs/bundles/AiDrawer/AiDrawer.js

@@ -0,0 +1,262 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiDrawer = void 0;
+// @format
+const React = require("react");
+const react_1 = require("react");
+const styled_1 = require("@emotion/styled");
+const react_markdown_1 = require("react-markdown");
+const rehype_raw_1 = require("rehype-raw");
+const react_2 = require("@remixicon/react");
+const Drawer_1 = require("@mui/material/Drawer");
+const TabButtonList_1 = require("../../components/TabButtons/TabButtonList");
+const Typography_1 = require("@mui/material/Typography");
+const TabContext_1 = require("@mui/lab/TabContext");
+const TabPanel_1 = require("@mui/lab/TabPanel");
+const AiChat_1 = require("../../components/AiChat/AiChat");
+const ActionButton_1 = require("../../components/Button/ActionButton");
+const FlashcardsScreen_1 = require("./FlashcardsScreen");
+const VERSION_1 = require("../../VERSION");
+const Header = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "4px",
+    color: theme.custom.colors.white,
+    position: "sticky",
+    top: 0,
+    padding: "32px 0 16px 0",
+    zIndex: 2,
+    backgroundColor: theme.custom.colors.white,
+    borderRadius: 0,
+}));
+const Title = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    color: theme.custom.colors.darkGray2,
+    img: {
+        width: "24px",
+        height: "24px",
+    },
+    svg: {
+        fill: theme.custom.colors.red,
+        width: "24px",
+        height: "24px",
+        flexShrink: 0,
+    },
+    overflow: "hidden",
+    p: {
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+    },
+}));
+const CloseButton = (0, styled_1.default)(ActionButton_1.ActionButton)(({ theme }) => ({
+    backgroundColor: theme.custom.colors.lightGray2,
+    "&&:hover": {
+        backgroundColor: theme.custom.colors.red,
+        color: theme.custom.colors.white,
+    },
+    zIndex: 3,
+    flexShrink: 0,
+}));
+const StyledTabButtonList = (0, styled_1.default)(TabButtonList_1.TabButtonList)(({ theme }) => ({
+    padding: "0 0 16px",
+    backgroundColor: theme.custom.colors.white,
+    position: "sticky",
+    top: "88px",
+    zIndex: 2,
+    overflow: "visible",
+}));
+const StyledTabPanel = (0, styled_1.default)(TabPanel_1.default)({
+    padding: "0",
+    height: "calc(100% - 138px)",
+    position: "relative",
+});
+const StyledAiChat = (0, styled_1.default)(AiChat_1.AiChat)(({ hasTabs, theme }) => ({
+    ".MitAiChat--entryScreenContainer": {
+        padding: hasTabs ? "114px 0 24px" : "168px 32px 24px",
+        [theme.breakpoints.down("md")]: {
+            padding: hasTabs ? "114px 0 24px" : "168px 16px 24px",
+        },
+    },
+    ".MitAiChat--chatScreenContainer": {
+        padding: hasTabs ? 0 : "0 32px",
+        [theme.breakpoints.down("md")]: {
+            padding: hasTabs ? 0 : "0 16px",
+        },
+    },
+    ".MitAiChat--messagesContainer": {
+        paddingTop: hasTabs ? "8px" : "88px",
+    },
+}));
+const StyledHTML = styled_1.default.div(({ theme }) => (Object.assign(Object.assign({ color: theme.custom.colors.darkGray2, backgroundColor: theme.custom.colors.white, padding: "12px 0 100px" }, theme.typography.body2), { "p:first-of-type": {
+        marginTop: 0,
+    }, "p:last-of-type": {
+        marginBottom: 0,
+    }, "ol, ul": {
+        paddingInlineStart: "32px",
+        li: {
+            margin: "16px 0",
+        },
+    }, ul: {
+        marginInlineStart: "-16px",
+    }, a: {
+        color: theme.custom.colors.red,
+        fontWeight: "normal",
+    } })));
+const identity = (x) => x;
+const DEFAULT_FETCH_OPTS = {
+    credentials: "include",
+};
+const useContentFetch = (contentUrl) => {
+    const [response, setResponse] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!contentUrl)
+            return;
+        const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            try {
+                const response = yield fetch(contentUrl);
+                const result = yield response.json();
+                if (!result.results) {
+                    throw new Error("Unexpected response");
+                }
+                const [contentFile] = result.results;
+                if (!contentFile) {
+                    throw new Error("No result found");
+                }
+                setResponse({
+                    summary: contentFile.summary,
+                    flashcards: contentFile.flashcards,
+                });
+            }
+            catch (error) {
+                console.error("Error fetching content", error);
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        fetchData();
+    }, [contentUrl]);
+    return { response, loading };
+};
+const DEFAULT_PROBLEM_INITIAL_MESSAGES = [
+    {
+        role: "assistant",
+        content: "Let's try to work on this problem together. It would be great to hear how you're thinking about solving it. Can you walk me through the approach you're considering?",
+    },
+];
+const DEFAULT_VIDEO_ENTRY_SCREEN_TITLE = "What do you want to know about this video?";
+const DEFAULT_VIDEO_STARTERS = [
+    { content: "What are the most important concepts introduced in the video?" },
+    {
+        content: "What examples are used to illustrate concepts covered in the video?",
+    },
+    { content: "What are the key terms introduced in this video?" },
+];
+const ChatComponent = ({ payload, transformBody, fetchOpts, scrollElement, entryScreenEnabled, entryScreenTitle, conversationStarters, initialMessages, hasTabs, needsMathJax, }) => {
+    if (!payload)
+        return null;
+    return (React.createElement(StyledAiChat, { key: payload.chatId, chatId: payload.chatId, conversationStarters: conversationStarters, initialMessages: initialMessages, scrollElement: scrollElement, entryScreenEnabled: entryScreenEnabled, entryScreenTitle: entryScreenTitle, requestOpts: {
+            transformBody: (messages) => (Object.assign(Object.assign({}, payload.requestBody), transformBody === null || transformBody === void 0 ? void 0 : transformBody(messages))),
+            apiUrl: payload.apiUrl,
+            fetchOpts: Object.assign(Object.assign({}, DEFAULT_FETCH_OPTS), fetchOpts),
+        }, hasTabs: hasTabs, useMathJax: needsMathJax }));
+};
+const randomItems = (array, count) => {
+    const shuffled = [...array].sort(() => 0.5 - Math.random());
+    return shuffled.slice(0, count);
+};
+const AiDrawer = ({ transformBody = identity, className, fetchOpts, payload, open, onClose, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const [tab, setTab] = (0, react_1.useState)("chat");
+    const { response } = useContentFetch((_a = payload === null || payload === void 0 ? void 0 : payload.summary) === null || _a === void 0 ? void 0 : _a.apiUrl);
+    const [_wasKeyboardFocus, setWasKeyboardFocus] = (0, react_1.useState)(false);
+    const mouseInteracted = (0, react_1.useRef)(false);
+    const handleMouseDown = () => {
+        mouseInteracted.current = true;
+    };
+    const handleFocus = () => {
+        if (!mouseInteracted.current) {
+            setWasKeyboardFocus(true);
+        }
+        mouseInteracted.current = false;
+    };
+    const [scrollElement, setScrollElement] = (0, react_1.useState)(null);
+    const paperRefCallback = (node) => {
+        if (node) {
+            setScrollElement(node);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.scrollTo) === null || _a === void 0 ? void 0 : _a.call(scrollElement, {
+            top: tab === "chat" ? scrollElement.scrollHeight : 0,
+        });
+    }, [tab, scrollElement]);
+    const conversationStarters = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!payload)
+            return [];
+        return (payload.chat.conversationStarters ||
+            (((_a = response === null || response === void 0 ? void 0 : response.flashcards) === null || _a === void 0 ? void 0 : _a.length) && response.flashcards.length >= 3
+                ? randomItems(response.flashcards, 3).map((flashcard) => ({
+                    content: flashcard.question,
+                }))
+                : DEFAULT_VIDEO_STARTERS));
+    }, [payload, response]);
+    if (!payload) {
+        return React.createElement("div", { "data-testid": "ai-drawer-waiting" });
+    }
+    const { title, blockType, chat } = payload;
+    const hasTabs = blockType === "video";
+    return (React.createElement(Drawer_1.default, { "data-smoot-version": VERSION_1.VERSION, className: className, PaperProps: {
+            ref: paperRefCallback,
+            sx: {
+                width: "900px",
+                maxWidth: "100%",
+                boxSizing: "border-box",
+                padding: {
+                    xs: "0 16px",
+                    md: "0 32px",
+                },
+            },
+        }, anchor: "right", open: open, onClose: onClose, role: "dialog", "aria-modal": "true", keepMounted: true },
+        React.createElement(Header, null,
+            React.createElement(Title, null,
+                title ? React.createElement(react_2.RiSparkling2Line, null) : null,
+                React.createElement(Typography_1.default, { variant: "body1", component: "h1" }, (title === null || title === void 0 ? void 0 : title.includes("AskTIM")) ? (React.createElement(React.Fragment, null,
+                    "Ask",
+                    React.createElement("strong", null, "TIM"),
+                    title.replace("AskTIM", ""))) : (title))),
+            React.createElement(CloseButton, { variant: "text", size: "medium", onClick: onClose, "aria-label": "Close" },
+                React.createElement(react_2.RiCloseLine, null))),
+        blockType === "problem" ? (React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_b = chat === null || chat === void 0 ? void 0 : chat.entryScreenEnabled) !== null && _b !== void 0 ? _b : false, entryScreenTitle: chat.entryScreenTitle, initialMessages: chat.initialMessages || DEFAULT_PROBLEM_INITIAL_MESSAGES, hasTabs: hasTabs, needsMathJax: true })) : null,
+        blockType === "video" ? (React.createElement(TabContext_1.default, { value: tab },
+            React.createElement(StyledTabButtonList, { styleVariant: "chat", onChange: (e, tab) => setTab(tab) },
+                React.createElement(TabButtonList_1.TabButton, { value: "chat", label: "Chat" }),
+                ((_c = response === null || response === void 0 ? void 0 : response.flashcards) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(TabButtonList_1.TabButton, { value: "flashcards", label: "Flashcards", onMouseDown: handleMouseDown, onFocus: handleFocus })) : null,
+                React.createElement(TabButtonList_1.TabButton, { value: "summary", label: "Summary" })),
+            React.createElement(StyledTabPanel, { value: "chat", keepMounted: true },
+                React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_d = chat === null || chat === void 0 ? void 0 : chat.entryScreenEnabled) !== null && _d !== void 0 ? _d : true, entryScreenTitle: (_e = chat.entryScreenTitle) !== null && _e !== void 0 ? _e : DEFAULT_VIDEO_ENTRY_SCREEN_TITLE, conversationStarters: conversationStarters, initialMessages: chat.initialMessages, hasTabs: hasTabs, needsMathJax: false })),
+            ((_f = response === null || response === void 0 ? void 0 : response.flashcards) === null || _f === void 0 ? void 0 : _f.length) ? (React.createElement(StyledTabPanel, { value: "flashcards" },
+                React.createElement(FlashcardsScreen_1.FlashcardsScreen, { flashcards: response === null || response === void 0 ? void 0 : response.flashcards, wasKeyboardFocus: _wasKeyboardFocus }))) : null,
+            React.createElement(StyledTabPanel, { value: "summary" },
+                React.createElement(Typography_1.default, { variant: "h4", component: "h4" }),
+                React.createElement(StyledHTML, null,
+                    React.createElement(react_markdown_1.default, { rehypePlugins: [rehype_raw_1.default] }, (_g = response === null || response === void 0 ? void 0 : response.summary) !== null && _g !== void 0 ? _g : ""))))) : null));
+};
+exports.AiDrawer = AiDrawer;

package/dist/cjs/bundles/AiDrawer/AiDrawer.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AiDrawer } from "./AiDrawer";
+declare const meta: Meta<typeof AiDrawer>;
+export default meta;
+type Story = StoryObj<typeof AiDrawer>;
+export declare const ProblemStory: Story;
+export declare const ProblemDefaultInitialMessagesStory: Story;
+export declare const EntryScreenStory: Story;
+/**
+ * The chat entry screen is shown by default for the video blocks Tutor drawer.
+ */
+export declare const VideoStory: Story;
+/**
+ * Where conversation starters are not provided, they will be selected at random from the returned flashcard questions
+ * or from `DEFAULT_VIDEO_STARTERS` provided.
+ */
+export declare const FlashcardConversationStartersStory: Story;

package/dist/cjs/bundles/AiDrawer/AiDrawer.stories.js

@@ -0,0 +1,264 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashcardConversationStartersStory = exports.VideoStory = exports.EntryScreenStory = exports.ProblemDefaultInitialMessagesStory = exports.ProblemStory = void 0;
+/* eslint-disable react-hooks/rules-of-hooks */
+const React = require("react");
+const msw_1 = require("msw");
+const api_1 = require("../../components/AiChat/test-utils/api");
+const AiDrawer_1 = require("./AiDrawer");
+const better_react_mathjax_1 = require("better-react-mathjax");
+const Button_1 = require("@mui/material/Button");
+const TEST_API_STREAMING = "http://localhost:4567/streaming";
+const CONTENT_FILE_URL = "http://localhost:4567/api/v1/contentfiles/?edx_module_id=1";
+const INITIAL_MESSAGES = [
+    {
+        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 meta = {
+    title: "smoot-design/AI/AiDrawer",
+    component: AiDrawer_1.AiDrawer,
+    render: ({ payload }) => {
+        const [open, setOpen] = React.useState(false);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Button_1.default, { variant: "outlined", onClick: () => setOpen(true) }, "Open Drawer"),
+            React.createElement("p", null, "Message data:"),
+            React.createElement("pre", null, JSON.stringify({ payload }, null, 2)),
+            React.createElement(better_react_mathjax_1.MathJaxContext, null,
+                React.createElement(AiDrawer_1.AiDrawer, { payload: payload, open: open, onClose: () => setOpen(false) }))));
+    },
+};
+exports.default = meta;
+exports.ProblemStory = {
+    args: {
+        payload: {
+            blockType: "problem",
+            target: "problem-frame",
+            title: "AskTIM for help with Problem: Derivatives 1.1",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+                initialMessages: INITIAL_MESSAGES,
+                conversationStarters: STARTERS,
+            },
+        },
+    },
+};
+exports.ProblemDefaultInitialMessagesStory = {
+    args: {
+        payload: {
+            blockType: "problem",
+            target: "problem-frame-default-initial-messages",
+            title: "AskTIM for help with Problem: Derivatives 1.1",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+                conversationStarters: STARTERS,
+            },
+        },
+    },
+};
+exports.EntryScreenStory = {
+    args: {
+        payload: {
+            blockType: "problem",
+            target: "entry-screen-frame",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+                initialMessages: INITIAL_MESSAGES,
+                conversationStarters: STARTERS,
+                entryScreenEnabled: true,
+                entryScreenTitle: "AskTIM about this problem",
+            },
+        },
+    },
+};
+/**
+ * The chat entry screen is shown by default for the video blocks Tutor drawer.
+ */
+exports.VideoStory = {
+    args: {
+        payload: {
+            blockType: "video",
+            target: "video-frame",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+                conversationStarters: STARTERS,
+            },
+            summary: {
+                apiUrl: CONTENT_FILE_URL,
+            },
+        },
+    },
+    parameters: {
+        msw: {
+            handlers: [
+                msw_1.http.get(CONTENT_FILE_URL, () => {
+                    return msw_1.HttpResponse.json(sampleResponse);
+                }),
+                ...api_1.handlers,
+            ],
+        },
+    },
+};
+/**
+ * Where conversation starters are not provided, they will be selected at random from the returned flashcard questions
+ * or from `DEFAULT_VIDEO_STARTERS` provided.
+ */
+exports.FlashcardConversationStartersStory = {
+    args: {
+        payload: {
+            blockType: "video",
+            target: "starters-frame",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+            },
+            summary: {
+                apiUrl: CONTENT_FILE_URL,
+            },
+        },
+    },
+    parameters: {
+        msw: {
+            handlers: [
+                msw_1.http.get(CONTENT_FILE_URL, () => {
+                    return msw_1.HttpResponse.json(sampleResponse);
+                }),
+                ...api_1.handlers,
+            ],
+        },
+    },
+};
+// From https://api.rc.learn.mit.edu/api/v1/contentfiles/?edx_module_id=asset-v1%3AMITxT%2B3.012Sx%2B3T2024%2Btype%40asset%2Bblock%400cc53e11-1f91-4ed8-8bab-0d873db8cb90-en.srt
+const sampleResponse = {
+    count: 1,
+    next: null,
+    previous: null,
+    results: [
+        {
+            id: 16649919,
+            run_id: 7462,
+            run_title: "Structure of Materials",
+            run_slug: null,
+            departments: [
+                {
+                    department_id: "3",
+                    name: "Materials Science and Engineering",
+                    channel_url: "https://rc.learn.mit.edu/c/department/materials-science-and-engineering/",
+                    school: {
+                        id: 2,
+                        name: "School of Engineering",
+                        url: "https://engineering.mit.edu/",
+                    },
+                },
+            ],
+            semester: null,
+            year: null,
+            topics: [
+                {
+                    id: 732,
+                    name: "Science & Math",
+                    icon: "RiTestTubeLine",
+                    parent: null,
+                    channel_url: "https://rc.learn.mit.edu/c/topic/science-math/",
+                },
+                {
+                    id: 734,
+                    name: "Chemistry",
+                    icon: "RiTestTubeLine",
+                    parent: 732,
+                    channel_url: "https://rc.learn.mit.edu/c/topic/chemistry/",
+                },
+                {
+                    id: 748,
+                    name: "Engineering",
+                    icon: "RiRobot2Line",
+                    parent: null,
+                    channel_url: "https://rc.learn.mit.edu/c/topic/engineering/",
+                },
+                {
+                    id: 755,
+                    name: "Materials Science and Engineering",
+                    icon: "RiRobot2Line",
+                    parent: 748,
+                    channel_url: "https://rc.learn.mit.edu/c/topic/materials-science-and-engineering/",
+                },
+            ],
+            key: "asset-v1:MITxT+3.012Sx+3T2024+type@asset+block@0cc53e11-1f91-4ed8-8bab-0d873db8cb90-en.srt",
+            uid: null,
+            title: null,
+            description: null,
+            url: null,
+            content_feature_type: [],
+            content_type: "file",
+            content: " So with this, we will conclude a discussion about the glasses. And I mentioned that there is another class of materials that we'll talk about that form amorphous materials, and they are called polymers. And one very important concept that we will introduce in terms of the polymers is called a random walk model. And it helps us to understand what is the structure of the polymers and how they look in different solvents, how they behave at different temperatures, et cetera. So you've probably heard about polymers. Some of you do know about the internal structure of the polymers. But the polymers, in general, are materials that are composed of individual units that are connected among each other to form relatively long chains. So the name itself comes from Latin that means many parts or units. So it simply means that one individual structural unit within the polymer is composed of many identical or different units. So there are many naturally occurring polymers. So for example, cotton, leather, rubber, wool, et cetera, they're all polymers. And what they all have again in common is that they have the structural units that they're interconnected among each other. There are many biopolymers, so DNA molecules, for example. They belong into the class of polymers simply because they have individual structural units that are connected in a relatively long chain. What we will mostly talk about are synthetic polymers. So these are the polymers that are man-made. And it turns out that they're mostly organic in composition. And I just gave you a couple of examples. So again, most of them are composed of hydrocarbons. They can have other elements, but again, mostly carbon and hydrogen. So one example that they would like to give you is ethylene. So the ethylene itself are two carbon atoms that they're connected among each other, and then each is surrounded by two hydrogen atoms. So this is a monomer, ethylene. if I make a polymer out of the structural unit, I will end up in polyethylene. So you've probably heard about this particular polymer. And its composition would be it is as follows. So you would, again, have carbon atoms that they're connected among each other. And they're surrounded by hydrogen atoms. And there would be many, many of them connected among each other. And again this would be my structural unit, or this would be my monomer. So the polyethylene would be, again, how I would typically write this is would be CH2 CH2, et cetera. And there would be n of them. And this n can be arbitrary. So we will see that there can be polyethylene polymers that are relatively short in the chain length, but some of them are relatively long. Another example would be vinyl chloride, or PVC in the polymer phase. So the vinyl chloride, again, the structure of the PVC would be that, again, you have carbon atoms that are connected among each other. You have hydrogen atoms that is surrounding one, but one has a chlorine atom. And this would be a monomer. And there would be, again, a number or n of these individual monitor units that would be connected among each other. And again, how we typically present this polymers is, again, we have individual units, or monomers, that are connected among each other in a relatively long chain. So this would be a relatively low molecular weight polymer, meaning that each polymer chain is relatively short. Or this would represent the high molecular weight polymer, meaning that the number of the monomer units is relatively high. So do you happen to know about what is the number of monomers in a typical polymer? What would be your guess? Here of we are drawing maybe 10 of them or maybe 30 of them. Yes? A couple thousands. Couple of thousands, that's right. So just to illustrate that fact, the molecular weight, typical molecular weight of a polymer would be, let's say, 10 to the fourth up to 10 to 15 grams per mole. And the molecular weight of an individual ethylene units would be C2 H2 is 28 grams per mole. So you can see that in individual polymer unit can have thousands and thousands of these individual monomer units. So these are very, very long chains. So how do we understand the structure of these materials when there are a number and number of these chains that are somehow forming the solid material? So to understand that we will represent polymers in a form that is shown here. So in other words, just to understand what this image here represents, if this was an example or representation of a polymer chain right-- these are just paper clips that they clip together-- if this is my monument, this would be a polymer chain. So if you have a material, if you have a solid material, if you have a piece of a polymer in the solid form, it's very, very unlikely, almost impossible to have this in a crystalline form where all of the chains are aligned like this. And they are periodically arranged in space. How this polymer units or polymer chains actually look like in this polymer is that they're somehow they form this type of a structure. So they are somehow clumped together, or they form as something that looks like a mess. So the question that we are trying to answer and that we will try to answer in the next couple of minutes is, how do we describe that mess? How do I describe whether the extension of this chain will be like this, or perhaps this chain will collapse completely like this? And this will strongly depend on the environment. For example, if you have a polymer in a specific solvent, how it behaves in that solvent and how far this chain extends in space will strongly depend on the interaction of that polymer with the solvent. But the main idea is that we are trying to quantify how far in space that chain expands. And to do that, we will use this random walk model that I will try to explain in the next couple of minutes. So the random walk model simply describes a set of steps that each monomer is taking. So this particular image shows a very, very long chain. And each individual component of this chain is a single monomer. So we are trying to quantify how this polymer chain behaves in space. So what we're doing is that we are describing a random walk model in which we are trying to make steps of individual monomers units, and we are trying to understand how they arrange in space. So you might be familiar with the random walk model, for example, from Brownian motion. So if you think about Brownian motion or how particles move in different liquids, you would use this random walk model. So it's a similar way how we describe, for example, diffusion of the atoms, et cetera. So one way to think about this is to have so-called a lattice random walk model, in which each unit, monomer unit is taking a step. So this arrow here will represent one monomer. So I'm going from the starting position to the end position of the monomer. And the lattice this random walk model would assume that each of these monomer units is making a specific steps in lattice. So this would be an example of a specific structure where, again, the lattice and the angle, where the length of this arrow, the monomer size, and the angle are fixed. So the angle is 90 degrees always. So in the lattice random walk model, the length of each step and the angle are fixed. And this would explain very well diffusion within a material-- So when you assume that each step has a very well-defined length and a very well-defined angle. On the other hand, in polymers, this angle is not necessarily fixed. So if I have one monomer unit, there is no reason to believe that the next monomer unit will be 90 degrees relatively to that first step. So we will develop something that is called variable angle of random walk model. So this is the variable angle of a random walk. Again, we are assuming that each step is, of the same length, which we'll call l. So the next monomer unit has the same length l, but it can have any angle relative to the first one. And so in this particular case, the length is fixed, but the angle is random. And this would be a very good example of a random walk model applied to polymers. ",
+            content_title: "",
+            content_author: null,
+            content_language: null,
+            image_src: null,
+            resource_id: "5124",
+            resource_readable_id: "course-v1:MITxT+3.012Sx",
+            course_number: ["course-v1:MITxT+3.012Sx"],
+            file_type: null,
+            file_extension: ".srt",
+            offered_by: {
+                code: "mitx",
+                name: "MITx",
+                channel_url: "https://rc.learn.mit.edu/c/unit/mitx/",
+            },
+            platform: {
+                code: "mitxonline",
+                name: "MITx Online",
+            },
+            run_readable_id: "course-v1:MITxT+3.012Sx+3T2024",
+            edx_module_id: "asset-v1:MITxT+3.012Sx+3T2024+type@asset+block@0cc53e11-1f91-4ed8-8bab-0d873db8cb90-en.srt",
+            summary: 'The video discusses polymers, a class of materials composed of long chains of interconnected structural units or monomers. Key points include:\n\n1. **Definition and Structure**: Polymers consist of many repeating units, which can be identical or different. They can be naturally occurring (like cotton and DNA) or synthetic (like polyethylene and PVC).\n\n2. **Monomers and Polymers**: Monomers are the individual units that make up polymers. For example, ethylene is a monomer that forms polyethylene when linked together. The molecular weight of polymers can be very high, often ranging from 10,000 to 10^15 grams per mole.\n\n3. **Random Walk Model**: This model is introduced to understand the structure and behavior of polymers in different environments. It describes how individual monomers take steps in space, akin to Brownian motion. \n\n4. **Lattice Random Walk vs. Variable Angle Random Walk**: The lattice model assumes fixed step lengths and angles, while the variable angle model allows for random angles between steps, better representing the behavior of polymer chains.\n\n5. **Impact of Environment**: The extension and arrangement of polymer chains depend on their interactions with solvents and environmental conditions, leading to a "messy" structure rather than a crystalline form.\n\nOverall, the video emphasizes the complexity and variability in the structure and behavior of polymers, which can be modeled using random walk principles.',
+            flashcards: [
+                {
+                    answer: "The main topic is about polymers and their structure, particularly the random walk model.",
+                    question: "What is the main topic discussed in the transcript regarding materials?",
+                },
+                {
+                    answer: "Polymers are materials composed of individual units connected to form long chains, derived from the Latin term meaning 'many parts or units'.",
+                    question: "What does the term 'polymers' mean?",
+                },
+                {
+                    answer: "Examples of naturally occurring polymers include cotton, leather, rubber, and wool.",
+                    question: "Can you name some naturally occurring polymers mentioned in the transcript?",
+                },
+                {
+                    answer: "Synthetic polymers are man-made polymers, mostly organic in composition, primarily composed of hydrocarbons.",
+                    question: "What is a synthetic polymer?",
+                },
+                {
+                    answer: "The monomer for polyethylene is ethylene, which consists of two carbon atoms connected to each other, each surrounded by two hydrogen atoms.",
+                    question: "What is the monomer for polyethylene?",
+                },
+                {
+                    answer: "The typical molecular weight of a polymer ranges from 10^4 to 10^15 grams per mole.",
+                    question: "What is the typical molecular weight range for polymers?",
+                },
+                {
+                    answer: "The random walk model helps to describe how polymer chains behave in space and their arrangement in different environments.",
+                    question: "What does the random walk model help to describe in polymers?",
+                },
+                {
+                    answer: "In the lattice random walk model, each step has a fixed length and angle (90 degrees), while in the variable angle random walk model, the length is fixed but the angle can vary.",
+                    question: "How does the lattice random walk model differ from the variable angle random walk model?",
+                },
+                {
+                    answer: "An example of a polymer derived from vinyl chloride is PVC (polyvinyl chloride).",
+                    question: "What is an example of a polymer mentioned that is derived from vinyl chloride?",
+                },
+                {
+                    answer: "The interactions of polymers with solvents strongly influence how far the polymer chain extends in space.",
+                    question: "How do the interactions of polymers with solvents affect their behavior?",
+                },
+            ],
+        },
+    ],
+};