added basic embed checks

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

@@ -0,0 +1,9 @@
+import { useMatch, useMatches } from '@tanstack/react-router';
+
+export const useIsEmbed = () => {
+  const match = useMatch({
+    from: '/embed',
+  });
+  console.log(match);
+  return !!match?.id;
+};

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

@@ -1,10 +1,21 @@
-import { getRouteApi, type RouteContext, useParams, useSearch } from '@tanstack/react-router';
+import type { AssetType } from '@buster/server-shared/assets';
+import {
+  type StaticDataRouteOption,
+  useMatches,
+  useParams,
+  useSearch,
+} from '@tanstack/react-router';
+import findLast from 'lodash/findLast';
 
-const assetRouteApi = getRouteApi('/app/_app/_asset');
+export const useSelectedAssetType = (): NonNullable<StaticDataRouteOption['assetType']> => {
+  const matches = useMatches();
 
-const stableCtxSelector = (ctx: RouteContext) => ctx.assetType;
-export const useSelectedAssetType = () => {
-  const data = assetRouteApi.useRouteContext({ select: stableCtxSelector });
+  const lastMatch = findLast(matches, (match) => match.staticData?.assetType);
+  if (typeof lastMatch === 'number') {
+    return 'chat';
+  }
+  // @ts-expect-error - lastMatch is not undefined
+  const data = lastMatch?.staticData?.assetType as StaticDataRouteOption['assetType'];
   const { messageId } = useParams({
     strict: false,
   });

apps/web/src/layouts/ChatLayout/ChatContainer.tsx

@@ -5,11 +5,12 @@ import { ChatHeader } from './ChatHeader';
 
 export const CHAT_CONTAINER_ID = 'chat-container-content';
 
-export const ChatContainer = React.memo(({ chatId }: { chatId: string | undefined }) => {
+export const ChatContainer = React.memo(
+  ({ chatId, isEmbed }: { chatId: string | undefined; isEmbed: boolean }) => {
     return (
       <AppPageLayout
         headerSizeVariant="default"
-      header={<ChatHeader />}
+        header={<ChatHeader isEmbed={isEmbed} />}
         headerBorderVariant="ghost"
         headerClassName="bg-page-background"
         mainClassName="bg-page-background"
@@ -17,9 +18,10 @@ export const ChatContainer = React.memo(({ chatId }: { chatId: string | undefine
         id={CHAT_CONTAINER_ID}
         className="flex h-full w-full min-w-[295px] flex-col"
       >
-      <ChatContent chatId={chatId} />
+        <ChatContent chatId={chatId} isEmbed={isEmbed} />
       </AppPageLayout>
     );
-});
+  }
+);
 
 ChatContainer.displayName = 'ChatContainer';

apps/web/src/layouts/ChatLayout/ChatContent/ChatContent.tsx

@@ -12,7 +12,8 @@ import { FollowUpChatInput } from './FollowupChatInput';
 
 const autoClass = 'mx-auto max-w-[600px] w-full';
 
-export const ChatContent: React.FC<{ chatId: string | undefined }> = React.memo(({ chatId }) => {
+export const ChatContent: React.FC<{ chatId: string | undefined; isEmbed: boolean }> = React.memo(
+  ({ chatId, isEmbed }) => {
     const chatMessageIds = useGetChatMessageIds(chatId);
     const containerRef = useRef<HTMLElement>(null);
 
@@ -55,6 +56,7 @@ export const ChatContent: React.FC<{ chatId: string | undefined }> = React.memo(
           </ClientOnly>
         </div>
 
+        {!isEmbed && (
           <ChatInputWrapper>
             {showScrollToBottomButton && (
               <ScrollToBottomButton
@@ -64,9 +66,11 @@ export const ChatContent: React.FC<{ chatId: string | undefined }> = React.memo(
               />
             )}
           </ChatInputWrapper>
+        )}
       </>
     );
-});
+  }
+);
 
 ChatContent.displayName = 'ChatContent';
 

apps/web/src/layouts/ChatLayout/ChatContent/ChatMessageOptions.tsx

@@ -89,6 +89,7 @@ export const ChatMessageOptions: React.FC<{
           />
         </AppTooltip>
       )}
+      {canEditChat && (
         <AppTooltip title="Report message">
           <Button
             variant="ghost"
@@ -101,6 +102,7 @@ export const ChatMessageOptions: React.FC<{
             }
           />
         </AppTooltip>
+      )}
 
       {postProcessingMessage && (
         <AppTooltip title="View assumptions">

apps/web/src/layouts/ChatLayout/ChatHeader.tsx

@@ -4,7 +4,7 @@ import { ChatHeaderTitle } from '@/components/features/chat/ChatHeaderTitle';
 import { useGetActiveChatTitle, useIsStreamingMessage } from '@/context/Chats';
 import { useGetChatId } from '@/context/Chats/useGetChatId';
 
-export const ChatHeader: React.FC = React.memo(() => {
+export const ChatHeader: React.FC<{ isEmbed: boolean }> = React.memo(({ isEmbed }) => {
   const chatId = useGetChatId();
   const chatTitle = useGetActiveChatTitle();
   const isStreamingMessage = useIsStreamingMessage();
@@ -16,7 +16,7 @@ export const ChatHeader: React.FC = React.memo(() => {
         chatId={chatId || ''}
         isStreamingMessage={isStreamingMessage}
       />
-      <ChatHeaderOptions />
+      {!isEmbed && <ChatHeaderOptions />}
     </>
   );
 });

apps/web/src/layouts/ChatLayout/ChatLayout.tsx

@@ -5,6 +5,7 @@ import {
   type AppSplitterRef,
   type LayoutSize,
 } from '@/components/ui/layouts/AppSplitter';
+import { useIsEmbed } from '@/context/BusterAssets/useIsEmbed';
 import { useGetCurrentMessageId, useIsStreamingMessage } from '@/context/Chats';
 import { useGetChatId } from '@/context/Chats/useGetChatId';
 import type { LayoutMode } from '@/layouts/ChatLayout/config';
@@ -38,6 +39,7 @@ export const ChatLayout: React.FC<ChatSplitterProps> = ({
   const selectedAssetId = useSelectedAssetId();
   const currentMessageId = useGetCurrentMessageId() || '';
   const chatId = useGetChatId();
+  const isEmbed = useIsEmbed();
   const isStreamingMessage = useIsStreamingMessage();
 
   const leftPanelMinSize = selectedAssetId ? DEFAULT_CHAT_OPTION_SIDEBAR_SIZE : '0px';
@@ -57,7 +59,7 @@ export const ChatLayout: React.FC<ChatSplitterProps> = ({
   return (
     <AppSplitter
       ref={appSplitterRef}
-      leftChildren={renderLeftPanel && <ChatContainer chatId={chatId} />}
+      leftChildren={renderLeftPanel && <ChatContainer chatId={chatId} isEmbed={isEmbed} />}
       rightChildren={renderRightPanel && children}
       autoSaveId={autoSaveId}
       defaultLayout={defaultLayout}

apps/web/src/routes/embed.tsx

@@ -5,6 +5,7 @@ import { Text } from '@/components/ui/typography';
 import { getSupabaseSession } from '@/integrations/supabase/getSupabaseUserClient';
 import { signInWithAnonymousUser } from '@/integrations/supabase/signIn';
 import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout';
+import { cn } from '@/lib/classMerge';
 
 export const Route = createFileRoute('/embed')({
   beforeLoad: async ({ context, matches }) => {
@@ -36,18 +37,15 @@ function RouteComponent() {
     );
   }
 
-  if (assetType === 'chat') {
-    return (
-      <div className="flex h-full w-full items-center justify-center">
-        <Text className="text-lg">
-          Sharing a chat is not supported yet... But it is on our roadmap!
-        </Text>
-      </div>
-    );
-  }
+  const isChat = assetType === 'chat';
 
   return (
-    <main className="h-full w-full bg-page-background overflow-y-auto">
+    <main
+      className={cn(
+        'h-full w-full bg-page-background overflow-y-auto',
+        isChat && 'overflow-y-hidden bg-background-secondary'
+      )}
+    >
       <AppAssetCheckLayout assetType={assetType}>
         <Outlet />
       </AppAssetCheckLayout>

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

@@ -1,10 +1,16 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
 import * as chatLayoutServerContext from '@/context/BusterAssets/chat-server/chatLayoutServer';
 
 export const Route = createFileRoute('/embed/chat/$chatId')({
   ...chatLayoutServerContext,
   ssr: false,
   component: () => {
-    return <div>Hello "/embed/chat/$chatId"!</div>;
+    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>
+    );
   },
 });