diff --git a/web-src/src/components/PromptEditor.js b/web-src/src/components/PromptEditor.js index d5cc7912..db00dd95 100644 --- a/web-src/src/components/PromptEditor.js +++ b/web-src/src/components/PromptEditor.js @@ -20,13 +20,14 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import { css, injectGlobal } from '@emotion/css'; import { Global } from '@emotion/react'; import { motion, AnimatePresence } from 'framer-motion'; - import Close from '@spectrum-icons/workflow/Close'; -import { NO_VALUE_STRING, renderPrompt } from '../helpers/PromptRenderer.js'; -import PreviewIcon from '../icons/PreviewIcon.js'; import { parametersState } from '../state/ParametersState.js'; import { promptState } from '../state/PromptState.js'; +import { NO_VALUE_STRING, renderPrompt } from '../helpers/PromptRenderer.js'; +import { log } from '../helpers/MetricsHelper.js'; + +import PreviewIcon from '../icons/PreviewIcon.js'; languages.custom = { function: /{{[^@#]([^{}]+)}}/, @@ -107,6 +108,12 @@ function PromptEditor({ isOpen, onClose, ...props }) { } }, [viewSource]); + useEffect(() => { + if (!viewSource) { + log('prompt:editor:previewed'); + } + }, [viewSource]); + const handleKeyDown = useCallback((event) => { if (event.key === 'Escape') { onClose(); diff --git a/web-src/src/components/PromptSessionPanel.js b/web-src/src/components/PromptSessionPanel.js index 87c92e73..d7f50920 100644 --- a/web-src/src/components/PromptSessionPanel.js +++ b/web-src/src/components/PromptSessionPanel.js @@ -10,16 +10,23 @@ * governing permissions and limitations under the License. */ import { Flex, Grid } from '@adobe/react-spectrum'; -import React from 'react'; +import React, { useEffect } from 'react'; import { useRecoilState } from 'recoil'; import { PromptSessionSideView } from './PromptSessionSideView.js'; import { PromptResultListView } from './PromptResultListView.js'; import PromptEditor from './PromptEditor.js'; import { promptEditorState } from '../state/PromptEditorState.js'; +import { log } from '../helpers/MetricsHelper.js'; export function PromptSessionPanel() { const [isOpenPromptEditor, setIsOpenPromptEditor] = useRecoilState(promptEditorState); + useEffect(() => { + if (isOpenPromptEditor) { + log('prompt:editor:opened'); + } + }, [isOpenPromptEditor]); + return (