feat(docx): Integrate triton to next gen docs

packages/site/package.json

@@ -22,6 +22,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-element-to-jsx-string": "^15.0.0",
+    "react-markdown": "^9.0.1",
     "react-native-svg-web": "^1.0.9",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4"

packages/site/src/components/PageBlock.tsx

@@ -8,6 +8,7 @@ import { CategoryCardSection } from "./CategoryCardSection";
 import { PageWrapper } from "../layout/PageWrapper";
 import { ContentCardProps } from "../types/components";
 import usePageTitle from "../hooks/usePageTitle";
+import { TopNav } from "../layout/TopNav";
 
 interface PageBlockProps {
   readonly structure: {
@@ -63,48 +64,62 @@ export const PageBlock = ({ structure }: PageBlockProps) => {
 
   return (
     <PageWrapper>
-      <HeaderBlock {...structure.header} />
-      <BodyBlock>
-        {structure.showSegmentedControl && (
-          <div
-            style={{
-              width: "240px",
-              margin: "auto",
-              paddingBottom: "var(--space-largest)",
-            }}
-          >
-            <SegmentedControl
-              selectedValue={cardView}
-              onSelectValue={setCardView}
-            >
-              <SegmentedControl.Option value={"category"}>
-                Categorical
-              </SegmentedControl.Option>
-              <SegmentedControl.Option value={"a-z"}>
-                Alphabetical
-              </SegmentedControl.Option>
-            </SegmentedControl>
-          </div>
-        )}
+      <TopNav />
+      <main
+        style={{
+          boxShadow: "var(--shadow-base)",
+          borderRadius: "var(--radius-base) var(--radius-base) 0 0",
+          overflow: "hidden",
+          position: "relative",
+          flexGrow: 1,
+          backgroundColor: "var(--color-surface)",
+        }}
+      >
+        <div style={{ overflowY: "scroll", height: "100%" }}>
+          <HeaderBlock {...structure.header} />
+          <BodyBlock>
+            {structure.showSegmentedControl && (
+              <div
+                style={{
+                  width: "240px",
+                  margin: "auto",
+                  paddingBottom: "var(--space-largest)",
+                }}
+              >
+                <SegmentedControl
+                  selectedValue={cardView}
+                  onSelectValue={setCardView}
+                >
+                  <SegmentedControl.Option value={"category"}>
+                    Categorical
+                  </SegmentedControl.Option>
+                  <SegmentedControl.Option value={"a-z"}>
+                    Alphabetical
+                  </SegmentedControl.Option>
+                </SegmentedControl>
+              </div>
+            )}
 
-        {structure.useCategories && cardView === "category" ? (
-          <>
-            {sectionedComponents().map(({ section, items }) => (
-              <CategoryCardSection key={section} category={section}>
-                {items.map((content, index) => (
+            {structure.useCategories && cardView === "category" ? (
+              <>
+                {sectionedComponents().map(({ section, items }) => (
+                  <CategoryCardSection key={section} category={section}>
+                    {items.map((content, index) => (
+                      <ContentCard {...content} key={index} />
+                    ))}
+                  </CategoryCardSection>
+                ))}
+              </>
+            ) : (
+              <ContentCardWrapper>
+                {structure.body.content.map((content, index) => (
                   <ContentCard {...content} key={index} />
                 ))}
-              </CategoryCardSection>
-            ))}
-          </>
-        ) : (
-          <ContentCardWrapper>
-            {structure.body.content.map((content, index) => (
-              <ContentCard {...content} key={index} />
-            ))}
-          </ContentCardWrapper>
-        )}
-      </BodyBlock>
+              </ContentCardWrapper>
+            )}
+          </BodyBlock>
+        </div>
+      </main>
     </PageWrapper>
   );
 };

packages/site/src/components/ToggleThemeButton.tsx

@@ -17,23 +17,10 @@ export const ToggleThemeButton = () => {
   };
 
   return (
-    <div
-      style={{
-        position: "fixed",
-        bottom: "var(--space-base)",
-        right: "var(--space-base)",
-        boxShadow: "var(--shadow-base)",
-        borderRadius: "var(--radius-base)",
-        zIndex: 1,
-      }}
-      data-elevation="elevated"
-    >
-      <Button
-        type="secondary"
-        variation="subtle"
-        label={isDark ? "☀️" : "🌒"}
-        onClick={handleClick}
-      />
-    </div>
+    <Button
+      variation="subtle"
+      label={isDark ? "☀️" : "🌒"}
+      onClick={handleClick}
+    />
   );
 };

packages/site/src/components/TritonConversation.module.css

@@ -0,0 +1,21 @@
+.codeWrapper {
+  position: relative;
+  max-width: 100%;
+  padding: var(--space-small);
+  border: var(--border-base) solid var(--color-border);
+  border-radius: var(--radius-base);
+  background: var(--color-surface--background);
+  overflow-x: hidden;
+}
+
+.codeWrapper,
+.codeWrapper code {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.codeWrapper:focus {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}

packages/site/src/components/TritonConversation.tsx

@@ -0,0 +1,95 @@
+import { Box, Content, Heading, Icon, Link, Text } from "@jobber/components";
+import ReactMarkdown from "react-markdown";
+import { ReactElement } from "react";
+import styles from "./TritonConversation.module.css";
+import { CopyCodeButton } from "./CodeCopyButton";
+import { componentMap, getComponentPath } from "../utils/TritonLinks";
+import { useTritonChat } from "../providers/TritonProvider";
+
+const WelcomeMessage = () => (
+  <Content>
+    <Heading level={2}>Welcome!</Heading>
+    <div style={{ marginBottom: 80 }}>
+      <Text>
+        I am an early-stage AI that can help you build with Atlantis components.
+        You can ask me questions, I will generate custom component code and you
+        can test it all out in the live preview.
+      </Text>
+    </div>
+  </Content>
+);
+
+interface MessageProps {
+  readonly question: string;
+  readonly response: string;
+}
+
+const Message = ({ question, response }: MessageProps) => (
+  <div>
+    <div style={{ width: "100%", display: "flex" }}>
+      <Box
+        background="surface--background"
+        padding="small"
+        radius="base"
+        margin={{ bottom: "base" }}
+      >
+        <Text>{question}</Text>
+      </Box>
+    </div>
+    <div style={{ display: "flex", gap: 6, marginBottom: "large" }}>
+      <Icon name="sparkles" size="small" color="interactiveSubtle" />
+      <div style={{ flex: 1, marginBottom: 40 }}>
+        <Content spacing="base">
+          <ReactMarkdown
+            components={{
+              a: ({ children }) => {
+                const text = String(children);
+                const key = Object.keys(componentMap).find(mapKey =>
+                  text.toLowerCase().includes(mapKey.toLowerCase()),
+                );
+
+                return (
+                  <Link url={getComponentPath(key || "")} external={false}>
+                    {children}
+                  </Link>
+                );
+              },
+              p: ({ children }) => <Text>{children}</Text>,
+              pre: ({ children, ...props }) => {
+                const codeContent =
+                  (children as ReactElement)?.props?.children || "";
+
+                return (
+                  <div style={{ position: "relative" }}>
+                    <pre className={styles.codeWrapper} tabIndex={0} {...props}>
+                      {children}
+                    </pre>
+                    <CopyCodeButton code={codeContent} />
+                  </div>
+                );
+              },
+            }}
+          >
+            {response}
+          </ReactMarkdown>
+        </Content>
+      </div>
+    </div>
+  </div>
+);
+
+export function TritonConversation() {
+  const { responses, questions } = useTritonChat();
+
+  if (responses.length === 0) {
+    return <WelcomeMessage />;
+  }
+
+  return (
+    <div style={{ paddingRight: "var(--space-base)" }}>
+      {responses.map((response, index) => (
+        <Message key={index} question={questions[index]} response={response} />
+      ))}
+    </div>
+  );
+}