From 084da234424f5e6b4b4ac59ef48aab0d1e04958d Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Wed, 4 Jun 2025 17:30:48 +0200 Subject: [PATCH] updating foss with saas changes --- .../Player/ClickMapRenderer/Renderer.tsx | 1 + .../Player/ClipPlayer/ClipPlayerContent.tsx | 27 ++++- .../Player/ClipPlayer/ClipPlayerHeader.tsx | 2 +- .../Player/ClipPlayer/ClipPlayerOverlay.tsx | 11 ++- .../Player/ClipPlayer/QueueControls.tsx | 2 +- .../Session/Player/ClipPlayer/Timeline.tsx | 12 +-- .../Player/ReplayPlayer/PlayerInst.tsx | 1 + .../ReplayPlayer/SummaryBlock/index.tsx | 82 +++++---------- .../shared/MDRenderer/MDRenderer.tsx | 4 + .../ProjectDropdown/ProjectDropdown.tsx | 3 +- .../SessionFilters/AiSessionSearchField.tsx | 99 +------------------ .../shared/SharePopup/SharePopup.tsx | 15 ++- frontend/app/mstore/aiFiltersStore.ts | 5 + frontend/app/mstore/clipStore.ts | 9 +- 14 files changed, 92 insertions(+), 181 deletions(-) create mode 100644 frontend/app/components/shared/MDRenderer/MDRenderer.tsx diff --git a/frontend/app/components/Session/Player/ClickMapRenderer/Renderer.tsx b/frontend/app/components/Session/Player/ClickMapRenderer/Renderer.tsx index 018b7660f..ef71e7c35 100644 --- a/frontend/app/components/Session/Player/ClickMapRenderer/Renderer.tsx +++ b/frontend/app/components/Session/Player/ClickMapRenderer/Renderer.tsx @@ -22,6 +22,7 @@ function Player() {
(PlayerContext); const screenWrapper = React.useRef(null); - const { time } = playerContext.store.get(); - const { range, isFull } = props; + const { time, error } = playerContext.store.get(); + const { range, isFull, isHighlight } = props; React.useEffect(() => { if (!playerContext.player) return; @@ -57,7 +58,16 @@ function ClipPlayerContent(props: Props) { const outerHeight = props.isHighlight ? 556 + 39 : 556; const innerHeight = props.isHighlight ? 504 + 39 : 504; - return ( + return error ? ( +
+
+ +
+
+ ) : (
- +
{props.message}
) : null} - +
); diff --git a/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerHeader.tsx b/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerHeader.tsx index b7fd37c9e..450b7f996 100644 --- a/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerHeader.tsx +++ b/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerHeader.tsx @@ -35,7 +35,7 @@ function ClipPlayerHeader(props: Props) { return (
{isHighlight && !isFull ? : null} - + {props.session ? : null} diff --git a/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerOverlay.tsx b/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerOverlay.tsx index d8ae4681e..e34db8b33 100644 --- a/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerOverlay.tsx +++ b/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerOverlay.tsx @@ -8,9 +8,10 @@ import AutoplayTimer from 'Components/Session/Player/ClipPlayer/AutoPlayTimer'; interface Props { autoplay: boolean; + isHighlight?: boolean; } -function Overlay({ autoplay }: Props) { +function Overlay({ autoplay, isHighlight }: Props) { const { player, store } = React.useContext(PlayerContext); const togglePlay = () => player.togglePlay(); @@ -19,9 +20,11 @@ function Overlay({ autoplay }: Props) { return ( <> {messagesLoading ? : null} - {/*
*/} - {/* */} - {/*
*/} + {isHighlight ? null : ( +
+ +
+ )} {completed && autoplay && } diff --git a/frontend/app/components/Session/Player/ClipPlayer/QueueControls.tsx b/frontend/app/components/Session/Player/ClipPlayer/QueueControls.tsx index 830ee23b6..d5ef44e2e 100644 --- a/frontend/app/components/Session/Player/ClipPlayer/QueueControls.tsx +++ b/frontend/app/components/Session/Player/ClipPlayer/QueueControls.tsx @@ -12,7 +12,7 @@ interface Props {} function QueueControls(props: Props) { const { t } = useTranslation(); - const { clipStore, projectsStore, sessionStore, searchStore } = useStore(); + const { clipStore } = useStore(); const previousId = clipStore.prevId; const { nextId } = clipStore; diff --git a/frontend/app/components/Session/Player/ClipPlayer/Timeline.tsx b/frontend/app/components/Session/Player/ClipPlayer/Timeline.tsx index c50d77bb0..751d999f2 100644 --- a/frontend/app/components/Session/Player/ClipPlayer/Timeline.tsx +++ b/frontend/app/components/Session/Player/ClipPlayer/Timeline.tsx @@ -132,17 +132,7 @@ function Timeline({ range }: any) { // }; return ( -
+
{!fullscreen && !!bottomBlock && ( diff --git a/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx b/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx index 1444790ff..deb72a8be 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx @@ -7,15 +7,10 @@ import { debounce } from 'App/utils'; import { IResourceRequest, IResourceTiming } from 'App/player'; import { WsChannel } from 'App/player/web/messages'; import { PlayerContext } from 'App/components/Session/playerContext'; +import MDRenderer from 'Shared/MDRenderer/MDRenderer'; let debounceUpdate: any = () => {}; -const boldLine = /\*\*(.*?)\*\*/i; - -function isTitleLine(line: string): boolean { - return boldLine.test(line); -} - function SummaryBlock({ sessionId }: { sessionId: string }) { const { store } = React.useContext(PlayerContext); const { tabStates } = store.get(); @@ -24,7 +19,7 @@ function SummaryBlock({ sessionId }: { sessionId: string }) { const zoomEnabled = uiPlayerStore.timelineZoom.enabled; const zoomStartTs = uiPlayerStore.timelineZoom.startTs; const zoomEndTs = uiPlayerStore.timelineZoom.endTs; - const { zoomTab } = uiPlayerStore; + const zoomTab = uiPlayerStore.zoomTab; React.useEffect(() => { debounceUpdate = debounce( @@ -76,31 +71,13 @@ function SummaryBlock({ sessionId }: { sessionId: string }) { } }, [zoomTab]); - const formattedText = aiSummaryStore.text.split('\n').map((line) => { - if (isTitleLine(line)) { - return ( -
{line.replace(/\*/g, '')}
- ); - } - if (line.startsWith('*')) { - return ( -
  • - -
    • - ); - } - return ( -
    - -
    - ); - }); - return (
    {aiSummaryStore.text ? ( -
    - {formattedText.map((v) => v)} +
    +
    ) : ( @@ -111,44 +88,31 @@ function SummaryBlock({ sessionId }: { sessionId: string }) { function TextPlaceholder() { return ( -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    -
    -
    -
    +
    +
    +
    ); } -function CodeStringFormatter({ text }: { text: string }) { - const parts = text.split(/(`[^`]*`)/).map((part, index) => - part.startsWith('`') && part.endsWith('`') ? ( -
    - {part.substring(1, part.length - 1)} -
    - ) : ( - {part} - ), - ); - - return <>{parts}; -} - const summaryBlockStyle: React.CSSProperties = { background: 'linear-gradient(180deg, #E8EBFF -24.14%, rgba(236, 254, 255, 0.00) 100%)', diff --git a/frontend/app/components/shared/MDRenderer/MDRenderer.tsx b/frontend/app/components/shared/MDRenderer/MDRenderer.tsx new file mode 100644 index 000000000..339153196 --- /dev/null +++ b/frontend/app/components/shared/MDRenderer/MDRenderer.tsx @@ -0,0 +1,4 @@ +export default function MDRenderer(props: any) { + console.warn('saas comp') + return null; +} diff --git a/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx b/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx index 47818773e..fc31b7340 100644 --- a/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx +++ b/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx @@ -17,7 +17,7 @@ const { Text } = Typography; function ProjectDropdown(props: { location: any }) { const mstore = useStore(); const { t } = useTranslation(); - const { projectsStore, searchStore, searchStoreLive, userStore } = mstore; + const { projectsStore, searchStore, searchStoreLive, userStore, aiFiltersStore } = mstore; const { account } = userStore; const sites = projectsStore.list; const { siteId } = projectsStore; @@ -32,6 +32,7 @@ function ProjectDropdown(props: { location: any }) { const handleSiteChange = async (newSiteId: string) => { mstore.initClient(); + aiFiltersStore.clearFilters(); setSiteId(newSiteId); searchStore.clearSearch(); searchStore.clearList(); diff --git a/frontend/app/components/shared/SessionFilters/AiSessionSearchField.tsx b/frontend/app/components/shared/SessionFilters/AiSessionSearchField.tsx index 247cd42b5..96cc8e0a8 100644 --- a/frontend/app/components/shared/SessionFilters/AiSessionSearchField.tsx +++ b/frontend/app/components/shared/SessionFilters/AiSessionSearchField.tsx @@ -1,100 +1,5 @@ -import { CloseOutlined, EnterOutlined } from '@ant-design/icons'; -import { observer } from 'mobx-react-lite'; -import React, { useState } from 'react'; -import { useStore } from 'App/mstore'; -import { Input } from 'UI'; - -const AiSearchField = observer(() => { - const { searchStore } = useStore(); - const appliedFilter = searchStore.instance; - const hasFilters = - appliedFilter && appliedFilter.filters && appliedFilter.filters.length > 0; - const { aiFiltersStore } = useStore(); - const [searchQuery, setSearchQuery] = useState(''); - - const onSearchChange = ({ target: { value } }: any) => { - setSearchQuery(value); - }; - - const fetchResults = () => { - if (searchQuery) { - void aiFiltersStore.getSearchFilters(searchQuery); - } - }; - - const handleKeyDown = (event: any) => { - if (event.key === 'Enter') { - fetchResults(); - } - }; - - const clearAll = () => { - searchStore.clearSearch(); - setSearchQuery(''); - }; - - React.useEffect(() => { - if (aiFiltersStore.filtersSetKey !== 0) { - searchStore.edit(aiFiltersStore.filters); - } - }, [aiFiltersStore.filters, aiFiltersStore.filtersSetKey]); - - return ( -
    - -
    - {hasFilters ? : } -
    -
    - ) : null - } - /> -
    - ); -}); - function AiSessionSearchField() { - const { aiFiltersStore } = useStore(); - - return ( -
    -
    - -
    -
    - ); + return null; } -export const gradientBox = { - border: 'double 1.5px transparent', - borderRadius: '100px', - background: - 'linear-gradient(#ffffff, #ffffff), linear-gradient(-45deg, #394eff, #3eaaaf, #3ccf65)', - backgroundOrigin: 'border-box', - backgroundSize: '200% 200%', - backgroundClip: 'content-box, border-box', - display: 'flex', - gap: '0.25rem', - alignItems: 'center', - width: '100%', - overflow: 'hidden', -}; - -export default observer(AiSessionSearchField); +export default AiSessionSearchField; diff --git a/frontend/app/components/shared/SharePopup/SharePopup.tsx b/frontend/app/components/shared/SharePopup/SharePopup.tsx index f34d99488..93ca7a94c 100644 --- a/frontend/app/components/shared/SharePopup/SharePopup.tsx +++ b/frontend/app/components/shared/SharePopup/SharePopup.tsx @@ -7,6 +7,7 @@ import { useStore } from 'App/mstore'; import SessionCopyLink from './SessionCopyLink'; import IntegrateSlackButton from '../IntegrateSlackButton/IntegrateSlackButton'; import { useTranslation } from 'react-i18next'; +import { signalService } from 'App/services'; interface Channel { webhookId: string; @@ -126,7 +127,19 @@ const ShareModalComp: React.FC = ({ showCopyLink, hideModal, time }) => { ); const sendMsg = async () => { - shareTo === 'slack' ? await shareToSlack() : await shareToMSTeams(); + if (shareTo === 'slack') { + await shareToSlack(); + } else { + await shareToMSTeams(); + } + + signalService.send( + { + source: 'share', + value: shareTo, + }, + sessionId, + ); }; const hasBoth = slackOptions.length > 0 && msTeamsOptions.length > 0; diff --git a/frontend/app/mstore/aiFiltersStore.ts b/frontend/app/mstore/aiFiltersStore.ts index 96417104a..37526de30 100644 --- a/frontend/app/mstore/aiFiltersStore.ts +++ b/frontend/app/mstore/aiFiltersStore.ts @@ -49,6 +49,11 @@ export default class AiFiltersStore { console.log(r); }; + clearFilters = (): void => { + this.filters = { filters: [] }; + this.filtersSetKey = 0; + }; + setLoading = (loading: boolean): void => { this.isLoading = loading; }; diff --git a/frontend/app/mstore/clipStore.ts b/frontend/app/mstore/clipStore.ts index 33ea78b19..d91af3d1f 100644 --- a/frontend/app/mstore/clipStore.ts +++ b/frontend/app/mstore/clipStore.ts @@ -1,2 +1,9 @@ -export default class ClipStore {} +export default class ClipStore { + prevId = undefined; + nextId = undefined; + currentId = undefined; + + next() {} + prev() {} +} // SAAS only