[UI] add openreplay support; fix issue with search in model configs list (#866)

Author: deafnv

services/app/.env.example

@@ -6,6 +6,10 @@ OWL_URL="http://localhost:6969"
 PUBLIC_JAMAI_URL=""
 PUBLIC_ADMIN_ORGANIZATION_ID="0"
 
+# Openreplay
+PUBLIC_OPENREPLAY_INGEST_URL=""
+PUBLIC_OPENREPLAY_PROJECT_KEY=""
+
 # Auth config
 AUTH_SECRET="changeme"
 

services/app/package-lock.json

@@ -78,6 +78,7 @@
 		"@fontsource-variable/roboto-flex": "^5.0.15",
 		"@formkit/auto-animate": "^0.8.1",
 		"@monaco-editor/loader": "^1.5.0",
+		"@openreplay/tracker": "^17.0.1",
 		"@stripe/stripe-js": "^3.5.0",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"auth0": "^4.4.0",

services/app/package.json

@@ -0,0 +1,9 @@
+import Tracker from '@openreplay/tracker';
+
+const key = Symbol('openreplay tracker');
+
+export interface TrackerContext {
+	getTracker: () => Tracker | undefined;
+}
+
+export { Tracker, key };

services/app/src/lib/tracker/index.ts

@@ -289,7 +289,7 @@
 						</p>
 					</div>
 				{:else}
-					{#each paginatedConfigs as modelConfig (modelConfig.id)}
+					{#each paginatedConfigs as modelConfig}
 						<ModelConfigCard
 							{modelConfig}
 							{currentPage}

services/app/src/routes/(main)/system/models/(components)/ModelCatalogue.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { browser } from '$app/environment';
+	import { env } from '$env/dynamic/public';
+	import { onMount, setContext, getContext } from 'svelte';
+	import { browser, dev } from '$app/environment';
 	import { beforeNavigate, afterNavigate } from '$app/navigation';
 	import NProgress from 'nprogress';
 	import '../app.css';
 	import 'overlayscrollbars/overlayscrollbars.css';
 	import '@fontsource-variable/roboto-flex';
+	import { key, Tracker, type TrackerContext } from '$lib/tracker';
 	import { showDock, showRightDock, preferredTheme, activeOrganization } from '$globalStore';
 
 	import * as Tooltip from '$lib/components/ui/tooltip';
@@ -70,6 +72,20 @@
 	// });
 
 	onMount(() => {
+		if (env.PUBLIC_OPENREPLAY_INGEST_URL && env.PUBLIC_OPENREPLAY_PROJECT_KEY) {
+			const tracker = new Tracker({
+				ingestPoint: env.PUBLIC_OPENREPLAY_INGEST_URL,
+				projectKey: env.PUBLIC_OPENREPLAY_PROJECT_KEY,
+				__DISABLE_SECURE_MODE: dev
+			});
+
+			setContext<TrackerContext>(key, {
+				getTracker: () => tracker
+			});
+
+			tracker.start();
+		}
+
 		//* Reflect changes to user preference for immediately
 		window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
 			if ($preferredTheme == 'SYSTEM') {
@@ -82,6 +98,21 @@
 		});
 	});
 
+	$effect(() => {
+		const tracker = getContext<TrackerContext>(key)?.getTracker();
+		if (tracker) {
+			if (data.user) {
+				tracker?.setUserID(data.user.id);
+				tracker?.setMetadata('email', data.user.email);
+				tracker?.setMetadata('name', data.user.name);
+			} else {
+				tracker?.setUserID('');
+				tracker?.setMetadata('email', '');
+				tracker?.setMetadata('name', '');
+			}
+		}
+	});
+
 	// function switchTheme(e: KeyboardEvent) {
 	// 	const target = e.target as HTMLElement;
 	// 	if (