much more aggressive "live demo" button(s)

Author: williamstein

src/packages/frontend/support/url.ts

@@ -17,7 +17,12 @@ export default function getURL(options: Options = {}) {
   if (!options.url) {
     // do not use window.location.href, since that might have extra params and anchors
     // which mess things up and don't help.
-    options.url = window.location.origin + window.location.pathname;
+    if (typeof window != "undefined") {
+      options.url = window.location.origin + window.location.pathname;
+    } else {
+      // ssr
+      options.url = "";
+    }
   }
   // Note that this is a 2K limit on URL lengths, so the body had better
   // not be too large (or it gets truncated).
@@ -27,6 +32,6 @@ export default function getURL(options: Options = {}) {
         options.type ?? ""
       }&subject=${options.subject ?? ""}&body=${options.body ?? ""}&context=${
         options.context ?? ""
-      }`
+      }`,
   );
 }

src/packages/next/components/landing/content.tsx

@@ -15,6 +15,7 @@ import { MAX_WIDTH_LANDING } from "lib/config";
 import useCustomize from "lib/use-customize";
 import Image from "./image";
 import SignIn from "./sign-in";
+import LiveDemo from "components/landing/live-demo";
 
 // See https://github.com/vercel/next.js/issues/29788 for why we have to define this for now (it's to work around a bug).
 interface StaticImageData {
@@ -172,18 +173,9 @@ export default function Content(props: Props) {
 
   function renderLogo() {
     if (typeof body === "string" || (body as StaticImageData)?.src != null) {
-      return (
-        <Logo
-          logo={body}
-          title={title}
-        />
-      );
+      return <Logo logo={body} title={title} />;
     } else {
-      return (
-        <>
-          {body}
-        </>
-      );
+      return <>{body}</>;
     }
   }
 
@@ -222,13 +214,17 @@ export default function Content(props: Props) {
             {renderTitle()}
             {subtitle && renderSubtitleTop()}
             {description && (
-              <Title
-                level={4}
-                style={{ color: COLORS.GRAY }}
-              >
+              <Title level={4} style={{ color: COLORS.GRAY }}>
                 {description}
               </Title>
             )}
+            <div style={{ marginTop: "15px" }}>
+              <LiveDemo
+                context={
+                  typeof title == "string" ? title : alt ?? "Feature Page"
+                }
+              />
+            </div>
             <SignIn startup={startup ?? title} hideFree={true} />
           </Space>
         </Col>

src/packages/next/components/landing/footer.tsx

@@ -15,6 +15,7 @@ import { MAX_WIDTH } from "lib/config";
 import { useCustomize } from "lib/customize";
 
 import SocialMediaIconList from "./social-media-icon-list";
+import { liveDemoUrl } from "components/landing/live-demo";
 
 const FOOTER_STYLE: CSS = {
   borderTop: "1px solid lightgrey",
@@ -68,7 +69,8 @@ export default function Footer() {
       header: "Product",
       links: [
         {
-          text: "Store", url: "/store",
+          text: "Store",
+          url: "/store",
           hide: !enabledPages?.store,
         },
         {
@@ -131,6 +133,11 @@ export default function Footer() {
           url: "/support",
           hide: !enabledPages?.support,
         },
+        {
+          text: "Get a Live Demo",
+          url: liveDemoUrl("footer"),
+          hide: !enabledPages?.support,
+        },
       ],
     },
     {

src/packages/next/components/landing/header.tsx

@@ -6,8 +6,6 @@
 import { Layout } from "antd";
 import Link from "next/link";
 import { join } from "path";
-
-import { Icon } from "@cocalc/frontend/components/icon";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
 import { SoftwareEnvNames } from "@cocalc/util/consts/software-envs";
 import { COLORS } from "@cocalc/util/theme";
@@ -20,6 +18,9 @@ import ChatGPTHelp from "components/openai/chatgpt-help";
 import basePath from "lib/base-path";
 import { useCustomize } from "lib/customize";
 import SubNav, { Page, SubPage } from "./sub-nav";
+import LiveDemo from "components/landing/live-demo";
+// import { Button } from "antd";
+// import { Icon } from "@cocalc/frontend/components/icon";
 
 const GAP = "4%";
 
@@ -67,32 +68,17 @@ export default function Header(props: Props) {
         <span
           style={{
             float: "right",
-            right: 15,
-            top: 25,
-            color: "white",
-            backgroundColor: COLORS.BLUE_D,
-            outline: `1px solid ${COLORS.BLUE_DD}`,
-            padding: "2px 8px",
-            borderRadius: "5px",
-            width: "100px", // CRITICAL -- this is to prevent flicker -- see https://github.com/sagemathinc/cocalc/issues/6504
+            width: "150px", // CRITICAL -- this is to prevent flicker -- see https://github.com/sagemathinc/cocalc/issues/6504
           }}
         >
-          <A
-            type="primary"
+          <LiveDemo context="header" />
+          {/*<Button
             size="large"
+            type="primary"
             href="/support/new?type=question&subject=&body=&title=Ask%20Us%20Anything!"
-            title="Ask a question"
-            style={{
-              color: "white",
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "center",
-              gap: "10px",
-            }}
           >
-            <Icon style={{ fontSize: "20px" }} name="question-circle" />{" "}
-            <div>Contact</div>
-          </A>
+            <Icon style={{ fontSize: "20px" }} name="question-circle" /> Contact
+          </Button>*/}
         </span>
       );
     }

src/packages/next/components/landing/live-demo.tsx

@@ -0,0 +1,32 @@
+import getSupportUrl from "@cocalc/frontend/support/url";
+import { Button } from "antd";
+import { Icon } from "@cocalc/frontend/components/icon";
+import { useEffect, useState } from "react";
+
+export function liveDemoUrl(context) {
+  return getSupportUrl({
+    subject: "Live Demo Request",
+    type: "question",
+    body: `I would like to request a live demo on CoCalc!\n\nWHEN IS A GOOD TIME (include timezone!):\n\n\nTELLS US AS MUCH AS YOU CAN ABOUT YOUR INTENDED USE OF COCALC:\n\n`,
+    hideExtra: true,
+    context,
+    url: "",
+  });
+}
+
+interface Props {
+  context: string;
+  label?;
+}
+
+export default function LiveDemo({ context, label }: Props) {
+  const [href, setHref] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    setHref(liveDemoUrl(context));
+  }, []);
+  return (
+    <Button href={href} type="primary">
+      <Icon name="users" /> {label ?? "Get a Live Demo"}
+    </Button>
+  );
+}

src/packages/next/components/landing/sign-in.tsx

@@ -39,7 +39,7 @@ export default function SignIn({ startup, hideFree, style }: Props) {
           title={`Open the ${siteName} app and view your projects.`}
           type="primary"
         >
-          Your {siteName} Projects...
+          Your {siteName} Projects
         </Button>
       </Paragraph>
     );

src/packages/next/components/landing/sub-nav.tsx

@@ -125,7 +125,7 @@ const support = {
   new: { label: "New Ticket", hide: (customize) => !customize.zendesk },
   tickets: { label: "Tickets", hide: (customize) => !customize.zendesk },
   chatgpt: {
-    label: "ChatGPT",
+    label: "AI",
     hide: (customize) => !customize.openaiEnabled || !customize.onCoCalcCom,
   },
 } as const;

src/packages/next/pages/index.tsx

@@ -10,9 +10,7 @@ import { join } from "path";
 import { getRecentHeadlines } from "@cocalc/database/postgres/news";
 import { COLORS } from "@cocalc/util/theme";
 import { RecentHeadline } from "@cocalc/util/types/news";
-import {
-  CoCalcComFeatures,
-} from "components/landing/cocalc-com-features";
+import { CoCalcComFeatures } from "components/landing/cocalc-com-features";
 import Content from "components/landing/content";
 import Footer from "components/landing/footer";
 import Head from "components/landing/head";

src/packages/next/pages/support/chatgpt.tsx

@@ -13,9 +13,9 @@ export default function ChatgptInfo({ customize }) {
   function renderChatGPT() {
     return (
       <div style={{ maxWidth: "1000px" }}>
-        Our integrated ChatGPT support is free and often very helpful since it
-        knows so much about the open source software in {siteName}. You can ask
-        a question below or use @chatgpt in any chat message when using{" "}
+        Our integrated AI support is often very helpful since it knows so much
+        about the open source software in {siteName}. You can ask a question
+        below or use @ mention an AI model in any chat message when using{" "}
         {siteName}.
         <ChatGPTHelp
           style={{ marginTop: "15px" }}

src/packages/next/pages/support/index.tsx

@@ -94,8 +94,8 @@ const dataSource = [
         <A href="https://docs.google.com/forms/d/e/1FAIpQLSesDZkGD2XVu8BHKd_sPwn5g7MrLAA8EYRTpB6daedGVMTpkA/viewform">
           fill out this form and request a live video chat with us
         </A>
-        . We love chatting (in English and German), and will hopefully be able
-        to answer all of your questions.
+        . We love chatting (in English, German and Russian), and will hopefully
+        be able to answer all of your questions.
       </>
     ),
   },