feat(sdk): add sdk instructions to embed code dialog

src/pages/Home/EmbedCodeDialog.tsx

@@ -1,57 +1,99 @@
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import Button from '@mui/material/Button'
+import Divider from '@mui/material/Divider'
 import Dialog from '@mui/material/Dialog'
 import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
 import DialogTitle from '@mui/material/DialogTitle'
+import Link from '@mui/material/Link'
 import { CopyableBlock } from 'components/CopyableBlock/CopyableBlock'
 
 import { iframeFeatureAllowList } from 'config/iframeFeatureAllowList'
 
 interface EmbedCodeDialogProps {
   showEmbedCode: boolean
   handleEmbedCodeWindowClose: () => void
-  embedUrl: URL
+  roomName: string
 }
 
 export const EmbedCodeDialog = ({
   showEmbedCode,
   handleEmbedCodeWindowClose,
-  embedUrl,
-}: EmbedCodeDialogProps) => (
-  <Dialog open={showEmbedCode} onClose={handleEmbedCodeWindowClose}>
-    <DialogTitle>Room embed code</DialogTitle>
-    <DialogContent>
-      <CopyableBlock>
-        <SyntaxHighlighter
-          language="html"
-          style={materialDark}
-          PreTag="div"
-          lineProps={{
-            style: {
-              wordBreak: 'break-all',
-              whiteSpace: 'pre-wrap',
-            },
+  roomName,
+}: EmbedCodeDialogProps) => {
+  const iframeSrc = new URL(`${window.location.origin}/public/${roomName}`)
+  iframeSrc.search = new URLSearchParams({ embed: '1' }).toString()
+
+  return (
+    <Dialog open={showEmbedCode} onClose={handleEmbedCodeWindowClose}>
+      <DialogTitle>Room embed code</DialogTitle>
+      <DialogContent>
+        <DialogContentText
+          sx={{
+            mb: 2,
+          }}
+        >
+          Copy and paste this <code>iframe</code> HTML snippet into your
+          project:
+        </DialogContentText>
+        <CopyableBlock>
+          <SyntaxHighlighter
+            language="html"
+            style={materialDark}
+            PreTag="div"
+            lineProps={{
+              style: {
+                wordBreak: 'break-all',
+                whiteSpace: 'pre-wrap',
+              },
+            }}
+            wrapLines={true}
+          >
+            {`<iframe src="${iframeSrc}" allow="${iframeFeatureAllowList.join(
+              ';'
+            )}" width="800" height="800" />`}
+          </SyntaxHighlighter>
+        </CopyableBlock>
+        <Divider sx={{ my: 2 }} />
+        <DialogContentText
+          sx={{
+            mb: 2,
           }}
-          wrapLines={true}
         >
-          {`<iframe src="${embedUrl}" allow="${iframeFeatureAllowList.join(
-            ';'
-          )}" width="800" height="800" />`}
-        </SyntaxHighlighter>
-      </CopyableBlock>
-      <DialogContentText
-        sx={{
-          mb: 2,
-        }}
-      >
-        Copy and paste this HTML snippet into your project.
-      </DialogContentText>
-    </DialogContent>
-    <DialogActions>
-      <Button onClick={handleEmbedCodeWindowClose}>Close</Button>
-    </DialogActions>
-  </Dialog>
-)
+          Alternatively, you can use the Chitchatter SDK to embed a chat room as
+          a{' '}
+          <Link
+            href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components"
+            target="_blank"
+          >
+            Web Component
+          </Link>
+          :
+        </DialogContentText>
+        <CopyableBlock>
+          <SyntaxHighlighter
+            language="html"
+            style={materialDark}
+            PreTag="div"
+            lineProps={{
+              style: {
+                wordBreak: 'break-all',
+                whiteSpace: 'pre-wrap',
+              },
+            }}
+            wrapLines={true}
+          >
+            {`<script src="${window.location.origin}${window.location.pathname}sdk.js"></script>
+
+<chat-room src="${roomName}" width="800" height="800" />`}
+          </SyntaxHighlighter>
+        </CopyableBlock>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleEmbedCodeWindowClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

src/pages/Home/Home.tsx

@@ -61,9 +61,6 @@ export function Home({ userId }: HomeProps) {
 
   const isRoomNameValid = roomName.length > 0
 
-  const embedUrl = new URL(`${window.location.origin}/public/${roomName}`)
-  embedUrl.search = new URLSearchParams({ embed: '1' }).toString()
-
   return (
     <Box className="Home">
       <main className="mt-6 px-4 max-w-3xl text-center mx-auto">
@@ -194,7 +191,7 @@ export function Home({ userId }: HomeProps) {
       <EmbedCodeDialog
         showEmbedCode={showEmbedCode}
         handleEmbedCodeWindowClose={handleEmbedCodeWindowClose}
-        embedUrl={embedUrl}
+        roomName={roomName}
       />
     </Box>
   )