docs: track code copy + AI assistant event (#14193)

* docs: track code copy + AI assistant event

* add pathname to callback
This commit is contained in:
Shahed Nasser
2025-12-02 17:24:31 +02:00
committed by GitHub
parent ef162f8b5f
commit 00052b9e50
12 changed files with 75 additions and 64 deletions
@@ -1,10 +1,15 @@
import React, { useEffect, useMemo, useRef } from "react"
import clsx from "clsx"
import { ArrowUpCircleSolid, LightBulb, LightBulbSolid } from "@medusajs/icons"
import { useAiAssistant, useIsBrowser } from "../../../../providers"
import {
useAiAssistant,
useAnalytics,
useIsBrowser,
} from "../../../../providers"
import { useChat, useDeepThinking } from "@kapaai/react-sdk"
import { useAiAssistantChatNavigation } from "../../../../hooks"
import { Tooltip } from "../../../Tooltip"
import { DocsTrackingEvents } from "../../../../constants"
type AiAssistantChatWindowInputProps = {
chatWindowRef: React.RefObject<HTMLDivElement | null>
@@ -16,6 +21,7 @@ export const AiAssistantChatWindowInput = ({
const { chatOpened, inputRef, loading, setChatOpened, isCaptchaLoaded } =
useAiAssistant()
const { submitQuery, conversation } = useChat()
const { track } = useAnalytics()
const { active, toggle } = useDeepThinking()
const { isBrowser } = useIsBrowser()
const { searchQuery, searchQueryType } = useMemo(() => {
@@ -38,6 +44,13 @@ export const AiAssistantChatWindowInput = ({
) => {
e?.preventDefault()
submitQuery(overrideQuestion || question)
if (!conversation.length) {
track({
event: {
event: DocsTrackingEvents.AI_ASSISTANT_START_CHAT,
},
})
}
setQuestion("")
}
@@ -1,7 +1,7 @@
"use client"
import React, { useEffect, useState } from "react"
import { CopyButton } from "../../../.."
import { CopyButton, DocsTrackingEvents, useAnalytics } from "../../../.."
import clsx from "clsx"
import { CheckMini, SquareTwoStack } from "@medusajs/icons"
@@ -15,6 +15,7 @@ export const CodeBlockCopyAction = ({
inHeader,
}: CodeBlockCopyActionProps) => {
const [copied, setCopied] = useState(false)
const { track } = useAnalytics()
useEffect(() => {
if (copied) {
@@ -22,6 +23,12 @@ export const CodeBlockCopyAction = ({
setCopied(false)
}, 1000)
}
track({
event: {
event: DocsTrackingEvents.CODE_BLOCK_COPY,
},
})
}, [copied])
const iconClassName = [
@@ -4,13 +4,13 @@ import React, { useEffect, useMemo, useRef, useState } from "react"
import clsx from "clsx"
import { Highlight, HighlightProps, themes, Token } from "prism-react-renderer"
import { ApiRunner } from "@/components"
import { useColorMode } from "@/providers"
import { useAnalytics, useColorMode } from "@/providers"
import { CodeBlockHeader, CodeBlockHeaderMeta } from "./Header"
import { CodeBlockLine } from "./Line"
import { ApiAuthType, ApiDataOptions, ApiMethod } from "types"
// @ts-expect-error can't install the types package because it doesn't support React v19
import { CSSTransition } from "react-transition-group"
import { useCollapsibleCodeLines } from "../.."
import { DocsTrackingEvents, useCollapsibleCodeLines } from "../.."
import { HighlightProps as CollapsibleHighlightProps } from "@/hooks"
import { CodeBlockActions, CodeBlockActionsProps } from "./Actions"
import { CodeBlockCollapsibleButton } from "./Collapsible/Button"
@@ -103,6 +103,7 @@ export const CodeBlock = ({
}
const { colorMode } = useColorMode()
const { track } = useAnalytics()
const [showTesting, setShowTesting] = useState(false)
const codeContainerRef = useRef<HTMLDivElement>(null)
const codeRef = useRef<HTMLElement>(null)
@@ -296,6 +297,14 @@ export const CodeBlock = ({
)
}, [codeContainerRef.current, codeRef.current])
const trackCopy = () => {
track({
event: {
event: DocsTrackingEvents.CODE_BLOCK_COPY,
},
})
}
const actionsProps: Omit<CodeBlockActionsProps, "inHeader"> = useMemo(
() => ({
source,
@@ -435,6 +444,7 @@ export const CodeBlock = ({
"pl-docs_1",
preClassName
)}
onCopy={trackCopy}
>
<code
className={clsx(
@@ -20,7 +20,6 @@ import { RadioGroup } from "@medusajs/ui"
export type FeedbackProps = {
event: string
pathName: string
reportLink?: string
question?: string
positiveBtn?: string
@@ -55,7 +54,6 @@ const feedbackOptions = {
export const Feedback = ({
event,
pathName,
reportLink: initReportLink,
question = "Was this page helpful?",
positiveBtn = "It was helpful",
@@ -106,15 +104,12 @@ export const Feedback = ({
event: {
event,
options: {
url: pathName,
label: document.title,
feedback:
(feedback !== null && feedback) ||
(feedback === null && positiveFeedback)
? "yes"
: "no",
message: message?.length ? message : null,
os: window.navigator.userAgent,
feedbackOption,
...extraData,
},
@@ -124,7 +119,6 @@ export const Feedback = ({
resetForm()
}
},
tracker: ["segment", "posthog"],
},
})
}