docs: track code copy + AI assistant event (#14193)
* docs: track code copy + AI assistant event * add pathname to callback
This commit is contained in:
@@ -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"],
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user