feat(cloud): add support

frontend/index.html

@@ -45,5 +45,6 @@
 			}
 		</script>
 		<script type="module" src="/src/main.tsx"></script>
+		{{live_chat}}
 	</body>
 </html>

frontend/src/app/dialogs/connect-railway-frame.tsx

@@ -1,6 +1,7 @@
-import { faRailway, Icon } from "@rivet-gg/icons";
+import { faQuestionCircle, faRailway, Icon } from "@rivet-gg/icons";
 import * as ConnectRailwayForm from "@/app/forms/connect-railway-form";
-import { Flex, Frame } from "@/components";
+import { HelpDropdown } from "@/app/help-dropdown";
+import { Button, Flex, Frame } from "@/components";
 
 export default function CreateProjectFrameContent() {
 	return (
@@ -9,8 +10,15 @@ export default function CreateProjectFrameContent() {
 			defaultValues={{ name: "" }}
 		>
 			<Frame.Header>
-				<Frame.Title>
-					Add <Icon icon={faRailway} className="ml-0.5" /> Railway
+				<Frame.Title className="justify-between flex items-center">
+					<div>
+						Add <Icon icon={faRailway} className="ml-0.5" /> Railway
+					</div>
+					<HelpDropdown>
+						<Button variant="ghost" size="icon">
+							<Icon icon={faQuestionCircle} />
+						</Button>
+					</HelpDropdown>
 				</Frame.Title>
 			</Frame.Header>
 			<Frame.Content>

frontend/src/app/dialogs/connect-vercel-frame.tsx

@@ -1,7 +1,8 @@
-import { faVercel, Icon } from "@rivet-gg/icons";
+import { faQuestionCircle, faVercel, Icon } from "@rivet-gg/icons";
 import { useMutation } from "@tanstack/react-query";
 import * as ConnectVercelForm from "@/app/forms/connect-vercel-form";
-import { Flex, Frame } from "@/components";
+import { HelpDropdown } from "@/app/help-dropdown";
+import { Button, Flex, Frame } from "@/components";
 import { useEngineCompatDataProvider } from "@/components/actors";
 
 export default function CreateProjectFrameContent() {
@@ -26,9 +27,16 @@ export default function CreateProjectFrameContent() {
 			defaultValues={{ name: "" }}
 		>
 			<Frame.Header>
-				<Frame.Title>
-					Add <Icon icon={faVercel} className="ml-0.5" />
-					Vercel
+				<Frame.Title className="justify-between flex items-center">
+					<div>
+						Add <Icon icon={faVercel} className="ml-0.5" />
+						Vercel
+					</div>
+					<HelpDropdown>
+						<Button variant="ghost" size="icon">
+							<Icon icon={faQuestionCircle} />
+						</Button>
+					</HelpDropdown>
 				</Frame.Title>
 			</Frame.Header>
 			<Frame.Content>

frontend/src/app/help-dropdown.tsx

@@ -0,0 +1,61 @@
+import {
+	faBooks,
+	faComments,
+	faDiscord,
+	faGithub,
+	Icon,
+} from "@rivet-gg/icons";
+import type { ReactNode } from "react";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components";
+
+export const HelpDropdown = ({ children }: { children: ReactNode }) => {
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+			<DropdownMenuContent>
+				<DropdownMenuItem
+					indicator={<Icon icon={faGithub} />}
+					onSelect={() => {
+						window.open(
+							"https://github.com/rivet-dev/engine/issues",
+							"_blank",
+						);
+					}}
+				>
+					GitHub
+				</DropdownMenuItem>
+				<DropdownMenuItem
+					indicator={<Icon icon={faDiscord} />}
+					onSelect={() => {
+						window.open("https://rivet.dev/discord", "_blank");
+					}}
+				>
+					Discord
+				</DropdownMenuItem>
+				<DropdownMenuItem
+					indicator={<Icon icon={faBooks} />}
+					onSelect={() => {
+						window.open("https://rivet.dev/docs", "_blank");
+					}}
+				>
+					Documentation
+				</DropdownMenuItem>
+				{__APP_TYPE__ === "cloud" ? (
+					<DropdownMenuItem
+						indicator={<Icon icon={faComments} />}
+						onSelect={() => {
+							Plain.open();
+						}}
+					>
+						Live Chat
+					</DropdownMenuItem>
+				) : null}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+};

frontend/src/app/layout.tsx

@@ -48,6 +48,7 @@ import { ActorBuildsList } from "./actor-builds-list";
 import { Changelog } from "./changelog";
 import { ContextSwitcher } from "./context-switcher";
 import { useInspectorCredentials } from "./credentials-context";
+import { HelpDropdown } from "./help-dropdown";
 import { NamespaceSelect } from "./namespace-select";
 import { UserDropdown } from "./user-dropdown";
 
@@ -207,6 +208,15 @@ const Sidebar = ({
 									</a>
 								</Button>
 							</Changelog>
+							<HelpDropdown>
+								<Button
+									className="text-muted-foreground justify-start py-1 h-auto aria-expanded:text-foreground aria-expanded:bg-accent"
+									variant="ghost"
+									size="xs"
+								>
+									Support
+								</Button>
+							</HelpDropdown>
 							<DocsSheet
 								path={"https://rivet.gg/docs"}
 								title="Documentation"

frontend/src/routes/__root.tsx

@@ -52,6 +52,12 @@ export const Route = createRootRouteWithContext<RootRouteContext>()({
 								email: context.clerk.user?.primaryEmailAddress
 									?.emailAddress,
 							});
+
+							Plain.setCustomerDetails({
+								clerkId: context.clerk.user?.id,
+								email: context.clerk.user?.primaryEmailAddress
+									?.emailAddress,
+							});
 							return resolve(true);
 						}
 					});

frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx

@@ -1,11 +1,12 @@
-import { faRailway, faVercel, Icon } from "@rivet-gg/icons";
+import { faQuestionCircle, faRailway, faVercel, Icon } from "@rivet-gg/icons";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import {
 	createFileRoute,
 	notFound,
 	Link as RouterLink,
 } from "@tanstack/react-router";
 import { match } from "ts-pattern";
+import { HelpDropdown } from "@/app/help-dropdown";
 import { RunnersTable } from "@/app/runners-table";
 import { Button, DocsSheet, H1, H3, Link, Skeleton } from "@/components";
 import {
@@ -34,6 +35,16 @@ function RouteComponent() {
 		<div className="bg-card h-full border my-2 mr-2 rounded-lg">
 			<div className="max-w-5xl  mt-2 flex justify-between items-center px-6 py-4">
 				<H1>Connect</H1>
+				<div>
+					<HelpDropdown>
+						<Button
+							variant="outline"
+							startIcon={<Icon icon={faQuestionCircle} />}
+						>
+							Need help?
+						</Button>
+					</HelpDropdown>
+				</div>
 			</div>
 			<p className="max-w-5xl mb-6 px-6 text-muted-foreground">
 				Connect your RivetKit application to Rivet Cloud. Use your cloud
@@ -51,9 +62,9 @@ function RouteComponent() {
 					<div className="p-4 px-6 max-w-5xl ">
 						<Skeleton className="h-8 w-48 mb-4" />
 						<div className="flex flex-wrap gap-2 my-4">
-							<Skeleton className="h-10 w-32 rounded-md" />
-							<Skeleton className="h-10 w-32 rounded-md" />
-							<Skeleton className="h-10 w-32 rounded-md" />
+							<Skeleton className="min-w-48 h-auto min-h-28 rounded-md" />
+							<Skeleton className="min-w-48 h-auto min-h-28 rounded-md" />
+							<Skeleton className="min-w-48 h-auto min-h-28 rounded-md" />
 						</div>
 					</div>
 				</>
@@ -64,7 +75,7 @@ function RouteComponent() {
 						<Button
 							size="lg"
 							variant="outline"
-							className="min-w-32"
+							className="min-w-48 h-auto min-h-28 text-xl"
 							startIcon={<Icon icon={faRailway} />}
 							asChild
 						>
@@ -78,7 +89,7 @@ function RouteComponent() {
 						<Button
 							size="lg"
 							variant="outline"
-							className="min-w-32"
+							className="min-w-48 h-auto min-h-28 text-xl"
 							startIcon={<Icon icon={faVercel} />}
 							asChild
 						>

frontend/src/vite-env.d.ts

@@ -2,3 +2,29 @@
 
 declare const __APP_BUILD_ID__: string;
 declare const __APP_TYPE__: "engine" | "inspector" | "cloud";
+declare const Plain: {
+	// This takes the same arguments as Plain.init. It will update the chat widget in-place with the new configuration.
+	// Only top-level fields are updated, nested fields are not merged.
+	update(params: any): void;
+
+	// This takes the same arguments as `customerDetails` in Plain.init.
+	// This will update just the customer details in the chat widget. This may be useful if you have asynchronous authentication state
+	setCustomerDetails(params: any): void;
+
+	// Opens and closes the widget if using the default, floating mode
+	open(): void;
+	close(): void;
+
+	// These are event listeners that will be fired when the chat widget is opened or closed respectively
+	// These return a function that can be called to remove the listener
+	onOpen(callback: () => void): () => void;
+	onClose(callback: () => void): () => void;
+
+	// Returns whether or not the chat widget is initialized
+	isInitialized(): boolean;
+
+	// This returns an array with debug logs that have been collected by the chat widget
+	// This is useful if you are contacting Plain support with an issue regarding the chat widget
+	// This will redact sensitive information such as customer details
+	exportDebugLogs(): any[];
+};

frontend/vite.cloud.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig, loadEnv, mergeConfig } from "vite";
 import { cloudEnvSchema } from "./src/lib/env";
-import engineConfig from "./vite.engine.config";
+import engineConfig, { liveChatPlugin } from "./vite.engine.config";
 
 // https://vitejs.dev/config/
 export default defineConfig((config) => {
@@ -10,6 +10,25 @@ export default defineConfig((config) => {
 		engineConfig(config),
 		defineConfig({
 			base: "/",
+			plugins: [
+				{
+					...liveChatPlugin(`<script>
+(function(d, script) {
+  script = d.createElement('script');
+  script.async = false;
+  script.onload = function(){
+    Plain.init({
+      appId: 'liveChatApp_01K5D3WHR3CGKA56RPRMBB7FX0',
+	  hideLauncher: true,
+    });
+  };
+  script.src = 'https://chat.cdn-plain.com/index.js';
+  d.getElementsByTagName('head')[0].appendChild(script);
+}(document));
+</script>`),
+					enforce: "pre",
+				},
+			],
 			define: {
 				__APP_TYPE__: JSON.stringify("cloud"),
 			},
@@ -20,5 +39,6 @@ export default defineConfig((config) => {
 				port: 43710,
 			},
 		}),
+		true,
 	);
 });

frontend/vite.engine.config.ts

@@ -3,7 +3,7 @@ import path from "node:path";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
-import { defineConfig, loadEnv } from "vite";
+import { defineConfig, loadEnv, type Plugin } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { commonEnvSchema } from "./src/lib/env";
 
@@ -21,6 +21,7 @@ export default defineConfig(({ mode }) => {
 			tanstackRouter({ target: "react", autoCodeSplitting: true }),
 			tsconfigPaths(),
 			react(),
+			liveChatPlugin(),
 			env.SENTRY_AUTH_TOKEN
 				? sentryVitePlugin({
 						org: "rivet-gaming",
@@ -72,3 +73,12 @@ export default defineConfig(({ mode }) => {
 		},
 	};
 });
+
+export function liveChatPlugin(source: string = ""): Plugin {
+	return {
+		name: "live-chat-plugin",
+		transformIndexHtml(html) {
+			return html.replace(/{{live_chat}}/, source);
+		},
+	};
+}