Revert "removed-context (#519)"

This reverts commit efaa33e.
thirdweb-dev · Jul 27, 2024 · bd40ed6 · bd40ed6
1 parent 1634287
commit bd40ed6
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 0 deletions.
diff --git a/src/app/Header.tsx b/src/app/Header.tsx
@@ -14,6 +14,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useState } from "react";
 import { DocSearch } from "@/components/others/DocSearch";
+import { ContextAIBotButton } from "@/components/others/ContextAIButton";
 import { ThemeSwitcher } from "../components/others/theme/ThemeSwitcher";
 import { ThirdwebIcon } from "../icons/thirdweb";
 import { FaGithub } from "react-icons/fa";
@@ -190,6 +191,10 @@ export function Header() {
 							<ThemeSwitcher />
 						</div>
 
+						<div className="hidden xl:flex">
+							<ContextAIBotButton />
+						</div>
+
 						<div className="hidden xl:block">
 							<DocSearch variant="search" />
 						</div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,10 @@ import { Inter, Fira_Code } from "next/font/google";
 import { Header } from "./Header";
 import NextTopLoader from "nextjs-toploader";
 import { PosthogHeadSetup, PosthogPageView } from "@/lib/posthog/Posthog";
+import {
+	ContextAIBotButton,
+	ContextAIBotScript,
+} from "@/components/others/ContextAIButton";
 import Script from "next/script";
 import { createMetadata } from "@/components/Document";
 import { SetStoredTheme } from "../components/others/theme/theme";
@@ -46,6 +50,7 @@ export default function RootLayout({
 					data-domain="portal.thirdweb.com"
 					data-api="https://pl.thirdweb.com/api/event"
 				/>
+				<ContextAIBotScript />
 			</head>
 			<body
 				className={`${sansFont.variable} ${monoFont.variable} font-sans`}
@@ -60,6 +65,9 @@ export default function RootLayout({
 				/>
 				<PosthogPageView />
 				<EnableSmoothScroll />
+				<div className="fixed bottom-4 right-4 z-floatingButton xl:hidden">
+					<ContextAIBotButton />
+				</div>
 
 				<div className="relative flex min-h-screen flex-col">
 					<StickyTopContainer>

diff --git a/src/components/others/ContextAIButton.tsx b/src/components/others/ContextAIButton.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import Script from "next/script";
+import { Button } from "../ui/button";
+import posthog from "posthog-js";
+
+const contextBotId = "SV3HwtSN0";
+
+export function ContextAIBotButton() {
+	const handleClick = () => {
+		posthog.capture("ai-bot.click");
+	};
+
+	return (
+		// eslint-disable-next-line svg-jsx/camel-case-dash
+		<div context-launcher="true" context-bot-id={contextBotId}>
+			<Button
+				onClick={handleClick}
+				className="rounded-lg border border-accent-500 bg-accent-900 px-3 py-2.5 text-sm font-medium hover:bg-accent-700 hover:text-f-100 xl:border-border xl:bg-b-700 xl:hover:bg-b-700"
+				variant="outline"
+			>
+				<StarsIcon />
+				Ask AI
+			</Button>
+		</div>
+	);
+}
+
+export function ContextAIBotScript() {
+	return (
+		<Script
+			// defer
+			id="__CONTEXT_BUBBLE__"
+			src="https://portal.usecontext.io/portal/portal.js"
+			data-theme="dark"
+			data-type="attribute"
+		></Script>
+	);
+}
+
+function StarsIcon() {
+	return (
+		<svg
+			stroke="currentColor"
+			fill="currentColor"
+			strokeWidth="0"
+			viewBox="0 0 16 16"
+			height="1.1em"
+			width="1.1em"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"></path>
+		</svg>
+	);
+}