track all current events

Author: sigbjorn-myhre

src/components/content/chat/chatbubbles/BobAnswerBubble.tsx

@@ -5,6 +5,7 @@ import Bobhead from "../../../../assets/illustrations/Bob-hode-svg.svg"
 import { Message, NewMessage } from "../../../../types/Message.ts"
 import BobSuggests from "../suggestions/BobSuggests.tsx"
 import BobAnswerCitations from "./BobAnswerCitations.tsx"
+import amplitude from "../../../../utils/amplitude.ts"
 
 interface BobAnswerBubbleProps {
   message: Message
@@ -30,6 +31,14 @@ export const BobAnswerBubble = ({
     }
   }, [isReadMoreOpen])
 
+  const readMoreOpenOnChange = (value: boolean) => {
+    value
+      ? amplitude.kildeAccordionÅpnet()
+      : amplitude.kildeAccordionSkjult()
+
+    setIsReadMoreOpen(value)
+  }
+
   return (
     <VStack gap='1' align='stretch' className='pb-12'>
       <HStack gap='1' align='start' wrap={false} width='full'>
@@ -70,7 +79,7 @@ export const BobAnswerBubble = ({
               <ReadMore
                 header='Sitater fra kunnskapsbasen'
                 defaultOpen={true}
-                onOpenChange={setIsReadMoreOpen}
+                onOpenChange={readMoreOpenOnChange}
                 className='readmore-styling fade-in-citations'
               >
                 <div className='flex flex-col gap-2 pt-4'>

src/components/content/chat/feedback/GiveUsFeedback.tsx

@@ -3,6 +3,7 @@ import { BodyLong, Button, Heading, Modal } from "@navikt/ds-react"
 import { useRef } from "react"
 import Markdown from "react-markdown"
 import { Message } from "../../../../types/Message.ts"
+import amplitude from "../../../../utils/amplitude.ts"
 
 interface GiveUsFeedbackProps {
   message: Message
@@ -19,6 +20,7 @@ export const GiveUsFeedback = ({ message }: GiveUsFeedbackProps) => {
   }
 
   function handleButtonClick() {
+    amplitude.feilMeldt(message.id)
     window.open(
       `https://forms.office.com/Pages/ResponsePage.aspx?id=NGU2YsMeYkmIaZtVNSedCyBQAauBOz1OlySa0dtLBP9UNUZJQkJYVzhKWTZXS0g0V0RBM0JSN1pNMC4u&rc0fd63ffeb9146e1bec0b90cc73ca985=${encodedText(message.content)}%0A%0AMeldingsID: ${encodedText(message.id)}`,
       "_blank",

src/components/content/chat/suggestions/BobSuggests.tsx

@@ -3,6 +3,7 @@ import { Button, CopyButton, Dropdown, Label } from "@navikt/ds-react"
 import { Message, NewMessage } from "../../../../types/Message.ts"
 import { GiveUsFeedback } from "../feedback/GiveUsFeedback.tsx"
 import "./BobSuggests.css"
+import amplitude from "../../../../utils/amplitude.ts"
 
 interface BobSuggestsProps {
   message: Message
@@ -12,6 +13,7 @@ interface BobSuggestsProps {
 
 const BobSuggests = ({ message, onSend, isLastMessage }: BobSuggestsProps) => {
   function handleTranslate() {
+    amplitude.svarEndret("oversett")
     const translate: NewMessage = {
       content: isLastMessage
         ? "Oversett svaret til engelsk"
@@ -21,6 +23,7 @@ const BobSuggests = ({ message, onSend, isLastMessage }: BobSuggestsProps) => {
   }
 
   function handleBulletList() {
+    amplitude.svarEndret("punktliste")
     const bulletList: NewMessage = {
       content: isLastMessage
         ? "Gjør om svaret til punktliste"
@@ -30,6 +33,7 @@ const BobSuggests = ({ message, onSend, isLastMessage }: BobSuggestsProps) => {
   }
 
   function handleSimplify() {
+    amplitude.svarEndret("forenkle")
     const simplifyMessage: NewMessage = {
       content: isLastMessage
         ? "Forenkle svaret"
@@ -45,6 +49,7 @@ const BobSuggests = ({ message, onSend, isLastMessage }: BobSuggestsProps) => {
         size='small'
         text='Kopier'
         activeText='Kopiert'
+        onClick={() => amplitude.svarKopiert(message.id)}
       />
       <GiveUsFeedback message={message} />
 

src/components/header/tipsfrombob/TipsFromBob.tsx

@@ -3,17 +3,23 @@ import { Button } from "@navikt/ds-react"
 import { useRef } from "react"
 import "./TipsFromBob.css"
 import { ButtonClickModal, FirstTimeLoginModal } from "./TipsModals.tsx"
+import amplitude from "../../../utils/amplitude.ts"
 
 const TipsFromBob = () => {
   const firstTimeLoginModal = useRef<HTMLDialogElement>(null)
   const buttonClickModal = useRef<HTMLDialogElement>(null)
 
+  const showModal = () => {
+    amplitude.infoÅpnet()
+    buttonClickModal.current?.showModal()
+  }
+
   return (
     <div className='flex self-center'>
       <Button
         variant='tertiary'
         size='small'
-        onClick={() => buttonClickModal.current?.showModal()}
+        onClick={() => showModal()}
         icon={<InformationSquareIcon />}
         iconPosition='right'
         className='max-phone:hidden'
@@ -23,7 +29,7 @@ const TipsFromBob = () => {
       <Button
         variant='tertiary'
         size='medium'
-        onClick={() => buttonClickModal.current?.showModal()}
+        onClick={() => showModal()}
         icon={<InformationSquareIcon />}
         iconPosition='right'
         className='phone:hidden'

src/components/inputfield/InputField.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react"
 
 import { NewMessage } from "../../types/Message.ts"
 import "./InputField.css"
+import amplitude from "../../utils/amplitude.ts"
 
 interface InputFieldProps {
   onSend: (message: NewMessage) => void
@@ -31,6 +32,7 @@ function InputField({ onSend, disabled }: InputFieldProps) {
   }
 
   function handlePasteInfoAlert() {
+    amplitude.tekstInnholdLimtInn()
     setIsSensitiveInfoAlert(true)
   }
 
@@ -51,6 +53,7 @@ function InputField({ onSend, disabled }: InputFieldProps) {
         e.preventDefault()
 
         if (!sendDisabled) {
+          amplitude.meldingSendt("enter")
           sendMessage()
           setInputValue("")
           setIsSensitiveInfoAlert(false)
@@ -61,13 +64,19 @@ function InputField({ onSend, disabled }: InputFieldProps) {
 
   function handleButtonClick() {
     if (inputValue.trim() !== "") {
+      amplitude.meldingSendt("knapp")
       sendMessage()
       setInputValue("")
     }
   }
 
   useEffect(() => {
     const inputContainsFnr = checkContainsFnr(inputValue)
+
+    if (inputContainsFnr) {
+      amplitude.tekstInneholderFnr()
+    }
+
     setContainsFnr(inputContainsFnr)
     setSendDisabled(disabled || inputContainsFnr)
   }, [inputValue, disabled])

src/components/menu/darkmode/DarkModeToggle.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react"
 import "./DarkModeToggle.css"
+import amplitude from "../../../utils/amplitude"
 
 const DarkModeToggle = () => {
   const [dark, setDark] = useState(() => {
@@ -10,8 +11,10 @@ const DarkModeToggle = () => {
   useEffect(() => {
     if (dark) {
       document.body.classList.add("dark")
+      amplitude.mørkModusByttet("mørk")
     } else {
       document.body.classList.remove("dark")
+      amplitude.mørkModusByttet("lys")
     }
   }, [dark])
 

src/utils/amplitude.ts

@@ -28,6 +28,7 @@ const createAmpltiudeInstance = (): AmplitudeInstance => {
   return amplitude;
 };
 
+/*
 const mockedAmplitude = (): AmplitudeInstance => ({
   logEvent: (eventInput: Types.BaseEvent | string, eventProperties?: Record<string, any>) => {
     console.group('Mocked amplitude-event');
@@ -61,6 +62,7 @@ const mockedAmplitude = (): AmplitudeInstance => ({
     };
   },
 });
+*/
 
 const instance = createAmpltiudeInstance()