move around chat for embed rourtes

apps/web/src/components/features/global/NotFoundCard.tsx

@@ -4,7 +4,7 @@ import { Card, CardContent, CardFooter } from '@/components/ui/card/CardBase';
 
 // Displays a full-screen, visually polished 404 not found state
 // inspired by GlobalErrorCard with consistent styling and components.
-export const NotFoundCard: NotFoundRouteComponent = () => {
+export const NotFoundCard = () => {
   return (
     <section
       className="flex flex-col items-center z-[999] absolute inset-0 top-0 left-0 right-0 bottom-0 justify-center h-full w-full p-8 bg-background"

apps/web/src/context/BusterAssets/useIsEmbed.ts

@@ -1,4 +1,4 @@
-import { useMatch, useMatches, useMatchRoute } from '@tanstack/react-router';
+import { useMatchRoute } from '@tanstack/react-router';
 import { Route as EmbedRoute } from '@/routes/embed';
 
 export const useIsEmbed = () => {

apps/web/src/lib/routes/createSimpleAssetRoute.ts

@@ -64,7 +64,7 @@ export const createChatAssetRoute = (asset: {
   if (asset.asset_type === 'chat' || !asset.asset_type || !asset.id) {
     if (asset.isEmbed) {
       return defineLink({
-        to: '/embed/chats/$chatId',
+        to: '/embed/chat/$chatId',
         params: { chatId: asset.chatId },
       });
     }
@@ -78,7 +78,7 @@ export const createChatAssetRoute = (asset: {
   if (asset.asset_type === 'metric_file') {
     if (asset.isEmbed) {
       return defineLink({
-        to: '/embed/chats/$chatId/metrics/$metricId',
+        to: '/embed/chat/$chatId/metrics/$metricId',
         params: { metricId: asset.id || '', chatId: asset.chatId },
         search: { metric_version_number: asset.versionNumber },
       });
@@ -93,7 +93,7 @@ export const createChatAssetRoute = (asset: {
   if (asset.asset_type === 'dashboard_file') {
     if (asset.isEmbed) {
       return defineLink({
-        to: '/embed/chats/$chatId/dashboards/$dashboardId',
+        to: '/embed/chat/$chatId/dashboards/$dashboardId',
         params: { dashboardId: asset.id || '', chatId: asset.chatId },
         search: { dashboard_version_number: asset.versionNumber },
       });
@@ -108,7 +108,7 @@ export const createChatAssetRoute = (asset: {
   if (asset.asset_type === 'report_file') {
     if (asset.isEmbed) {
       return defineLink({
-        to: '/embed/chats/$chatId/reports/$reportId',
+        to: '/embed/chat/$chatId/reports/$reportId',
         params: { reportId: asset.id || '', chatId: asset.chatId },
         search: { report_version_number: asset.versionNumber },
       });
@@ -123,7 +123,7 @@ export const createChatAssetRoute = (asset: {
   if (asset.asset_type === 'reasoning') {
     if (asset.isEmbed) {
       return defineLink({
-        to: '/embed/chats/$chatId/reasoning/$messageId',
+        to: '/embed/chat/$chatId/reasoning/$messageId',
         params: { messageId: asset.id || '', chatId: asset.chatId },
       });
     }

apps/web/src/routes/embed.tsx

@@ -1,7 +1,8 @@
 import type { AssetType } from '@buster/server-shared/assets';
 import { createFileRoute, Outlet, type RouteContext } from '@tanstack/react-router';
 import { prefetchGetMyUserInfo } from '@/api/buster_rest/users';
-import { Text } from '@/components/ui/typography';
+import { NotFoundCard } from '@/components/features/global/NotFoundCard';
+import { useGetChatId } from '@/context/Chats/useGetChatId';
 import { getSupabaseSession } from '@/integrations/supabase/getSupabaseUserClient';
 import { signInWithAnonymousUser } from '@/integrations/supabase/signIn';
 import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout';
@@ -15,6 +16,7 @@ export const Route = createFileRoute('/embed')({
 
     const assetType = [...matches].reverse().find(({ staticData }) => staticData?.assetType)
       ?.staticData?.assetType as AssetType;
+
     return {
       assetType,
     };
@@ -30,17 +32,21 @@ export const Route = createFileRoute('/embed')({
 const stableCtxSelector = (ctx: RouteContext) => ctx.assetType;
 function RouteComponent() {
   const assetType = Route.useLoaderData({ select: stableCtxSelector });
+  const chatId = useGetChatId();
 
   if (!assetType) {
     return (
-      <div className="flex h-full w-full items-center justify-center">No asset type found</div>
+      <div className="flex flex-col gap-3 h-full w-full items-center justify-center">
+        <NotFoundCard />
+      </div>
     );
   }
 
-  const isChat = assetType === 'chat';
+  const isChat = assetType === 'chat' || !!chatId;
 
   return (
     <main
+      data-testid={`embed-main-${assetType}`}
       className={cn(
         'h-full w-full bg-page-background overflow-y-auto',
         isChat && 'overflow-y-hidden bg-background-secondary'

apps/web/src/routes/embed/chat.$chatId.tsx

@@ -4,13 +4,15 @@ import * as chatLayoutServerContext from '@/context/BusterAssets/chat-server/cha
 export const Route = createFileRoute('/embed/chat/$chatId')({
   ...chatLayoutServerContext,
   ssr: false,
-  component: () => {
-    return (
-      <div className="h-full w-full p-2 max-h-[100vh] ">
-        <div className="h-full w-full border rounded bg-background">
-          {chatLayoutServerContext.component()}
-        </div>
-      </div>
-    );
-  },
+  component: RouteComponent,
 });
+
+function RouteComponent() {
+  return (
+    <div className="h-full w-full p-2 max-h-[100vh]" data-testid="embed-chat-container">
+      <div className="h-full w-full border rounded bg-background">
+        {chatLayoutServerContext.component()}
+      </div>
+    </div>
+  );
+}

apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/_layout.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import * as dashboardLayoutServerAssetContext from '@/context/BusterAssets/dashboard-server/dashboardLayoutServerAssetContext';
 
-export const Route = createFileRoute('/embed/chats/$chatId/dashboards/$dashboardId/_layout')({
+export const Route = createFileRoute('/embed/chat/$chatId/dashboards/$dashboardId/_layout')({
   ...dashboardLayoutServerAssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/_layout/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import * as dashboardContentServerContext from '@/context/BusterAssets/dashboard-server/dashboardContentContext';
 
-export const Route = createFileRoute('/embed/chats/$chatId/dashboards/$dashboardId/_layout/')({
+export const Route = createFileRoute('/embed/chat/$chatId/dashboards/$dashboardId/_layout/')({
   ...dashboardContentServerContext,
 });

apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/metrics.$metricId/_content.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import * as metricLayoutServerContext from '@/context/BusterAssets/metric-server/metricLayoutServerAssetContext';
 
 export const Route = createFileRoute(
-  '/embed/chats/$chatId/dashboards/$dashboardId/metrics/$metricId/_content'
+  '/embed/chat/$chatId/dashboards/$dashboardId/metrics/$metricId/_content'
 )({
   ...metricLayoutServerContext,
   loader: metricLayoutServerContext.loader<{ metricId: string; dashboardId: string }>,

apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/chart.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import * as metricChartServerAssetContext from '@/context/BusterAssets/metric-server/metricChartServerAssetContext';
 
 export const Route = createFileRoute(
-  '/embed/chats/$chatId/dashboards/$dashboardId/metrics/$metricId/_content/chart'
+  '/embed/chat/$chatId/dashboards/$dashboardId/metrics/$metricId/_content/chart'
 )({
   ...metricChartServerAssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/index.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import * as metricIndexServerContext from '@/context/BusterAssets/metric-server/metricIndexServerAssetContext';
 
 export const Route = createFileRoute(
-  '/embed/chats/$chatId/dashboards/$dashboardId/metrics/$metricId/_content/'
+  '/embed/chat/$chatId/dashboards/$dashboardId/metrics/$metricId/_content/'
 )({
   ...metricIndexServerContext,
 });

apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/results.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import * as metricResultsServerAssetContext from '@/context/BusterAssets/metric-server/metricResultsServerAssetContext';
 
 export const Route = createFileRoute(
-  '/embed/chats/$chatId/dashboards/$dashboardId/metrics/$metricId/_content/results'
+  '/embed/chat/$chatId/dashboards/$dashboardId/metrics/$metricId/_content/results'
 )({
   ...metricResultsServerAssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/sql.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import * as metricSQLServerAsssetContext from '@/context/BusterAssets/metric-server/metricSQLServerAsssetContext';
 
 export const Route = createFileRoute(
-  '/embed/chats/$chatId/dashboards/$dashboardId/metrics/$metricId/_content/sql'
+  '/embed/chat/$chatId/dashboards/$dashboardId/metrics/$metricId/_content/sql'
 )({
   ...metricSQLServerAsssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/index.tsx

@@ -1,7 +1,10 @@
 import { createFileRoute } from '@tanstack/react-router';
 
-export const Route = createFileRoute('/embed/chats/$chatId/')({
+export const Route = createFileRoute('/embed/chat/$chatId/')({
   component: RouteComponent,
+  staticData: {
+    assetType: 'chat',
+  },
 });
 
 function RouteComponent() {

apps/web/src/routes/embed/chat.$chatId/metrics.$metricId/_layout.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router';
 import * as metricLayoutServerContext from '@/context/BusterAssets/metric-server/metricLayoutServerAssetContext';
 
-export const Route = createFileRoute('/embed/chats/$chatId/metrics/$metricId/_layout')({
+export const Route = createFileRoute('/embed/chat/$chatId/metrics/$metricId/_layout')({
   ...metricLayoutServerContext,
   loader: metricLayoutServerContext.loader<{ metricId: string }>,
 });

apps/web/src/routes/embed/chat.$chatId/metrics.$metricId/_layout/chart.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import * as metricChartServerAssetContext from '@/context/BusterAssets/metric-server/metricChartServerAssetContext';
 
-export const Route = createFileRoute('/embed/chats/$chatId/metrics/$metricId/_layout/chart')({
+export const Route = createFileRoute('/embed/chat/$chatId/metrics/$metricId/_layout/chart')({
   ...metricChartServerAssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/metrics.$metricId/_layout/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import * as metricIndexServerContext from '@/context/BusterAssets/metric-server/metricIndexServerAssetContext';
 
-export const Route = createFileRoute('/embed/chats/$chatId/metrics/$metricId/_layout/')({
+export const Route = createFileRoute('/embed/chat/$chatId/metrics/$metricId/_layout/')({
   ...metricIndexServerContext,
 });

apps/web/src/routes/embed/chat.$chatId/metrics.$metricId/_layout/results.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import * as metricResultsServerAssetContext from '@/context/BusterAssets/metric-server/metricResultsServerAssetContext';
 
-export const Route = createFileRoute('/embed/chats/$chatId/metrics/$metricId/_layout/results')({
+export const Route = createFileRoute('/embed/chat/$chatId/metrics/$metricId/_layout/results')({
   ...metricResultsServerAssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/metrics.$metricId/_layout/sql.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import * as metricSQLServerAsssetContext from '@/context/BusterAssets/metric-server/metricSQLServerAsssetContext';
 
-export const Route = createFileRoute('/embed/chats/$chatId/metrics/$metricId/_layout/sql')({
+export const Route = createFileRoute('/embed/chat/$chatId/metrics/$metricId/_layout/sql')({
   ...metricSQLServerAsssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/reasoning.$messageId/index.tsx

@@ -4,7 +4,7 @@ import { AppSegmented } from '@/components/ui/segmented';
 import { ReasoningController } from '@/controllers/ReasoningController/ReasoningController';
 import { AssetContainer } from '@/layouts/AssetContainer/AssetContainer';
 
-export const Route = createFileRoute('/embed/chats/$chatId/reasoning/$messageId/')({
+export const Route = createFileRoute('/embed/chat/$chatId/reasoning/$messageId/')({
   component: RouteComponent,
 });
 

apps/web/src/routes/embed/chat.$chatId/reports.$reportId/_layout.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import * as reportLayoutServerAssetContext from '@/context/BusterAssets/report-server/reportLayoutServerAssetContext';
 
-export const Route = createFileRoute('/embed/chats/$chatId/reports/$reportId/_layout')({
+export const Route = createFileRoute('/embed/chat/$chatId/reports/$reportId/_layout')({
   ...reportLayoutServerAssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/reports.$reportId/_layout/content.tsx

@@ -2,6 +2,6 @@ import { createFileRoute } from '@tanstack/react-router';
 
 import * as reportContentServerContext from '@/context/BusterAssets/report-server/reportContentServerAssetContext';
 
-export const Route = createFileRoute('/embed/chats/$chatId/reports/$reportId/_layout/content')({
+export const Route = createFileRoute('/embed/chat/$chatId/reports/$reportId/_layout/content')({
   ...reportContentServerContext,
 });

apps/web/src/routes/embed/chat.$chatId/reports.$reportId/_layout/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import * as reportIndexServerAssetContext from '@/context/BusterAssets/report-server/reportContentServerAssetContext';
 
-export const Route = createFileRoute('/embed/chats/$chatId/reports/$reportId/_layout/')({
+export const Route = createFileRoute('/embed/chat/$chatId/reports/$reportId/_layout/')({
   ...reportIndexServerAssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/reports.$reportId/metrics.$metricId/_content.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import * as metricLayoutServerContext from '@/context/BusterAssets/metric-server/metricLayoutServerAssetContext';
 
 export const Route = createFileRoute(
-  '/embed/chats/$chatId/reports/$reportId/metrics/$metricId/_content'
+  '/embed/chat/$chatId/reports/$reportId/metrics/$metricId/_content'
 )({
   ...metricLayoutServerContext,
   loader: metricLayoutServerContext.loader<{ metricId: string }>,

apps/web/src/routes/embed/chat.$chatId/reports.$reportId/metrics.$metricId/_content/chart.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import * as metricChartServerAssetContext from '@/context/BusterAssets/metric-server/metricChartServerAssetContext';
 
 export const Route = createFileRoute(
-  '/embed/chats/$chatId/reports/$reportId/metrics/$metricId/_content/chart'
+  '/embed/chat/$chatId/reports/$reportId/metrics/$metricId/_content/chart'
 )({
   ...metricChartServerAssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/reports.$reportId/metrics.$metricId/_content/index.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import * as metricIndexServerContext from '@/context/BusterAssets/metric-server/metricIndexServerAssetContext';
 
 export const Route = createFileRoute(
-  '/embed/chats/$chatId/reports/$reportId/metrics/$metricId/_content/'
+  '/embed/chat/$chatId/reports/$reportId/metrics/$metricId/_content/'
 )({
   ...metricIndexServerContext,
 });

apps/web/src/routes/embed/chat.$chatId/reports.$reportId/metrics.$metricId/_content/results.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import * as metricResultsServerAssetContext from '@/context/BusterAssets/metric-server/metricResultsServerAssetContext';
 
 export const Route = createFileRoute(
-  '/embed/chats/$chatId/reports/$reportId/metrics/$metricId/_content/results'
+  '/embed/chat/$chatId/reports/$reportId/metrics/$metricId/_content/results'
 )({
   ...metricResultsServerAssetContext,
 });

apps/web/src/routes/embed/chat.$chatId/reports.$reportId/metrics.$metricId/_content/sql.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import * as metricSQLServerAsssetContext from '@/context/BusterAssets/metric-server/metricSQLServerAsssetContext';
 
 export const Route = createFileRoute(
-  '/embed/chats/$chatId/reports/$reportId/metrics/$metricId/_content/sql'
+  '/embed/chat/$chatId/reports/$reportId/metrics/$metricId/_content/sql'
 )({
   ...metricSQLServerAsssetContext,
 });