fix: refine welcome page content in react ui

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/page/Page.tsx

@@ -19,9 +19,13 @@ import "./Page.css"
 
 const notFilled = { isFilled: false }
 const withPadding = { default: "padding" as const }
+const withoutPadding = { default: "noPadding" as const }
 
 type Props = PropsWithChildren<
   PageBreadcrumbProps & {
+    /** Should the page content use default padding? [default: true] */
+    padding?: boolean
+
     /** The trace content */
     value?: string
   }
@@ -35,7 +39,7 @@ export default function PDLPage(props: Props) {
   const [searchParams] = useSearchParams()
   const showingDetail = searchParams.has("detail")
 
-  const { value, children } = props
+  const { padding = true, value, children } = props
 
   return (
     <Page
@@ -58,7 +62,10 @@ export default function PDLPage(props: Props) {
       breadcrumb={<PageBreadcrumbs {...props} />}
     >
       {children && (
-        <PageSection padding={withPadding} aria-label="Non-viewer content">
+        <PageSection
+          padding={padding ? withPadding : withoutPadding}
+          aria-label="Non-viewer content"
+        >
           {children}
         </PageSection>
       )}

pdl-live-react/src/page/Welcome.tsx

@@ -0,0 +1,12 @@
+import { Content } from "@patternfly/react-core"
+
+export default function Intro() {
+  return (
+    <Content component="p" isEditorial>
+      PDL is a declarative language designed for developers to create reliable,
+      composable LLM prompts and integrate them into software systems. It
+      provides a structured way to specify prompt templates, enforce validation,
+      and compose LLM calls with traditional rule-based systems.
+    </Content>
+  )
+}

pdl-live-react/src/page/welcome/Intro.tsx

@@ -0,0 +1,36 @@
+import { Button, Content, Flex } from "@patternfly/react-core"
+
+import ExternalLinkSquareAltIcon from "@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon"
+
+export default function Links() {
+  return (
+    <Content component="p">
+      <Flex>
+        <Button
+          variant="link"
+          icon={<ExternalLinkSquareAltIcon />}
+          iconPosition="end"
+        >
+          <a
+            target="_blank"
+            href="https://ibm.github.io/prompt-declaration-language"
+          >
+            Home Page
+          </a>
+        </Button>
+        <Button
+          variant="link"
+          icon={<ExternalLinkSquareAltIcon />}
+          iconPosition="end"
+        >
+          <a
+            target="_blank"
+            href="https://github.com/IBM/prompt-declaration-language"
+          >
+            GitHub
+          </a>
+        </Button>
+      </Flex>
+    </Content>
+  )
+}

pdl-live-react/src/page/welcome/Links.tsx

@@ -0,0 +1,15 @@
+import { Gallery } from "@patternfly/react-core"
+
+import Demos from "./tiles/Demos"
+import Upload from "./tiles/Upload"
+import MyTraces from "./tiles/MyTraces"
+
+export default function Tiles() {
+  return (
+    <Gallery hasGutter>
+      <Upload />
+      <MyTraces />
+      <Demos />
+    </Gallery>
+  )
+}

pdl-live-react/src/page/welcome/Tiles.tsx

@@ -0,0 +1,32 @@
+import {
+  Panel,
+  PanelHeader,
+  PanelMain,
+  PanelMainBody,
+  Title,
+} from "@patternfly/react-core"
+import Page from "../Page"
+
+import Intro from "./Intro"
+import Links from "./Links"
+import Tiles from "./Tiles"
+
+export default function Welcome() {
+  return (
+    <Page breadcrumb1="Welcome" padding={false}>
+      <Panel>
+        <PanelHeader>
+          <Title headingLevel="h1">Prompt Declaration Language (PDL)</Title>
+        </PanelHeader>
+
+        <PanelMain>
+          <PanelMainBody>
+            <Intro />
+            <Links />
+            <Tiles />
+          </PanelMainBody>
+        </PanelMain>
+      </Panel>
+    </Page>
+  )
+}

pdl-live-react/src/page/welcome/Welcome.tsx

@@ -0,0 +1,34 @@
+import { Link } from "react-router"
+import {
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Flex,
+} from "@patternfly/react-core"
+
+import demos from "../../../demos/demos"
+
+export default function Demos() {
+  return (
+    <Card isLarge>
+      <CardHeader>
+        <CardTitle>View a Demo</CardTitle>
+      </CardHeader>
+      <CardBody>You may view one of the built-in PDL demos.</CardBody>
+      <CardFooter>
+        <Flex>
+          {demos.map((demo) => (
+            <Button key={demo.name} isInline variant="link">
+              <Link to={"/demos/" + encodeURIComponent(demo.name)}>
+                {demo.name}
+              </Link>
+            </Button>
+          ))}
+        </Flex>
+      </CardFooter>
+    </Card>
+  )
+}

pdl-live-react/src/page/welcome/tiles/Demos.tsx

@@ -0,0 +1,38 @@
+import { Link } from "react-router"
+import {
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Flex,
+} from "@patternfly/react-core"
+
+import { getMyTraces } from "../../MyTraces"
+
+export default function MyTraces() {
+  const myTraces = getMyTraces()
+
+  return (
+    myTraces.length > 0 && (
+      <Card isLarge>
+        <CardHeader>
+          <CardTitle>My Traces</CardTitle>
+        </CardHeader>
+        <CardBody>
+          You may view one of your previously uploaded traces.
+        </CardBody>
+        <CardFooter>
+          <Flex>
+            {myTraces.map(({ title, filename }) => (
+              <Button key={filename} isInline variant="link">
+                <Link to={"/my/" + encodeURIComponent(title)}>{title}</Link>
+              </Button>
+            ))}
+          </Flex>
+        </CardFooter>
+      </Card>
+    )
+  )
+}

pdl-live-react/src/page/welcome/tiles/MyTraces.tsx

@@ -0,0 +1,28 @@
+import { Link } from "react-router"
+import {
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@patternfly/react-core"
+
+export default function Upload() {
+  return (
+    <Card isLarge>
+      <CardHeader>
+        <CardTitle>Upload Trace</CardTitle>
+      </CardHeader>
+      <CardBody>
+        You may upload a trace from your computer to visualize the program
+        execution.
+      </CardBody>
+      <CardFooter>
+        <Button isInline variant="link">
+          <Link to="/upload">Choose Trace File</Link>
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}

pdl-live-react/src/page/welcome/tiles/Upload.tsx

@@ -5,7 +5,7 @@ const Demo = lazy(() => import("../page/Demo"))
 const About = lazy(() => import("../page/About"))
 const Local = lazy(() => import("../page/Local"))
 const MyTrace = lazy(() => import("../page/MyTrace"))
-const Welcome = lazy(() => import("../page/Welcome"))
+const Welcome = lazy(() => import("../page/welcome/Welcome"))
 const Uploader = lazy(() => import("../page/Uploader"))
 const PageNotFound = lazy(() => import("../page/PageNotFound"))