common reasoning handler

apps/web/src/api/buster-electric/messages/hooks.ts

@@ -158,13 +158,19 @@ const useCheckIfWeHaveAFollowupDashboard = (messageId: string) => {
   return useMemoizedFn(method);
 };
 
-export const useTrackAndUpdateNewMessages = ({ chatId }: { chatId: string | undefined }) => {
+export const useTrackAndUpdateNewMessages = ({
+  chatId,
+  isEmbed,
+}: {
+  chatId: string | undefined;
+  isEmbed: boolean;
+}) => {
   const { onUpdateChat } = useChatUpdate();
   const getChatMemoized = useGetChatMemoized();
   const getChatMessageMemoized = useGetChatMessageMemoized();
   const queryClient = useQueryClient();
 
-  const subscribe = !!chatId;
+  const subscribe = !!chatId && !isEmbed;
 
   const shape = useMemo(() => {
     return messagesShape({ chatId: chatId || '', columns: ['id'] });

apps/web/src/components/features/chat/ClosePageButton.tsx

@@ -3,11 +3,11 @@ import { SelectableButton } from '@/components/ui/buttons/SelectableButton';
 import { useGetChatId } from '@/context/Chats/useGetChatId';
 import { Xmark } from '../../ui/icons';
 
-export const ClosePageButton = () => {
+export const ClosePageButton = ({ isEmbed }: { isEmbed: boolean }) => {
   const chatId = useGetChatId() || '';
 
   return (
-    <Link to="/app/chats/$chatId" params={{ chatId }}>
+    <Link to={isEmbed ? '/embed/chat/$chatId' : '/app/chats/$chatId'} params={{ chatId }}>
       <SelectableButton selected={false} tooltipText="Close" icon={<Xmark />} />
     </Link>
   );

apps/web/src/context/BusterAssets/reasoning-server/reasoningContent.tsx

@@ -0,0 +1,35 @@
+import { ClosePageButton } from '@/components/features/chat/ClosePageButton';
+import { AppSegmented } from '@/components/ui/segmented';
+import { useGetChatId } from '@/context/Chats/useGetChatId';
+import { ReasoningController } from '@/controllers/ReasoningController';
+import { AssetContainer } from '@/layouts/AssetContainer/AssetContainer';
+import { useGetReasoningMessageId } from '../useGetReasoningMessageId';
+import { useIsEmbed } from '../useIsEmbed';
+
+export const component = () => {
+  const chatId = useGetChatId() || '';
+  const messageId = useGetReasoningMessageId() || '';
+  return (
+    <AssetContainer header={<ReasoningControllerHeader />} headerBorderVariant="ghost" scrollable>
+      <ReasoningController chatId={chatId} messageId={messageId} />
+    </AssetContainer>
+  );
+};
+
+const ReasoningControllerHeader: React.FC = () => {
+  const isEmbed = useIsEmbed();
+  return (
+    <div className="w-full flex items-center justify-between">
+      <AppSegmented
+        type="button"
+        options={[
+          {
+            value: 'reasoning',
+            label: 'Reasoning',
+          },
+        ]}
+      />
+      <ClosePageButton isEmbed={isEmbed} />
+    </div>
+  );
+};

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

@@ -0,0 +1,6 @@
+import { useParams } from '@tanstack/react-router';
+
+export const useGetReasoningMessageId = () => {
+  const params = useParams({ strict: false });
+  return params?.messageId;
+};

apps/web/src/layouts/AssetContainer/DashboardAssetContainer/DashboardHeaderButtons.tsx

@@ -5,6 +5,7 @@ import { CreateChatButton } from '@/components/features/AssetLayout/CreateChatBu
 import { ShareDashboardButton } from '@/components/features/buttons/ShareDashboardButton';
 import { ClosePageButton } from '@/components/features/chat/ClosePageButton';
 import { DashboardThreeDotMenu } from '@/components/features/dashboard/DashboardThreeDotMenu';
+import { useIsEmbed } from '@/context/BusterAssets/useIsEmbed';
 import { useIsChatMode, useIsFileMode } from '@/context/Chats/useMode';
 import { useIsDashboardReadOnly } from '@/context/Dashboards/useIsDashboardReadOnly';
 import { canEdit, getIsEffectiveOwner } from '@/lib/share';
@@ -17,6 +18,7 @@ export const DashboardContainerHeaderButtons: React.FC<{
 }> = React.memo(({ dashboardId, dashboardVersionNumber }) => {
   const isChatMode = useIsChatMode();
   const isFileMode = useIsFileMode();
+  const isEmbed = useIsEmbed();
   const { isViewingOldVersion } = useIsDashboardReadOnly({
     dashboardId: dashboardId || '',
   });
@@ -36,15 +38,17 @@ export const DashboardContainerHeaderButtons: React.FC<{
           dashboardVersionNumber={dashboardVersionNumber}
         />
       )}
-      <DashboardThreeDotMenu
-        dashboardId={dashboardId}
-        isViewingOldVersion={isViewingOldVersion}
-        dashboardVersionNumber={dashboardVersionNumber}
-      />
+      {!isEmbed && (
+        <DashboardThreeDotMenu
+          dashboardId={dashboardId}
+          isViewingOldVersion={isViewingOldVersion}
+          dashboardVersionNumber={dashboardVersionNumber}
+        />
+      )}
       <HideButtonContainer show={isFileMode && isEditor}>
         <CreateChatButton assetId={dashboardId} assetType="dashboard_file" />
       </HideButtonContainer>
-      {isChatMode && <ClosePageButton />}
+      {isChatMode && <ClosePageButton isEmbed={isEmbed} />}
     </FileButtonContainer>
   );
 });

apps/web/src/layouts/AssetContainer/MetricAssetContainer/MetricHeaderButtons.tsx

@@ -9,6 +9,7 @@ import { ClosePageButton } from '@/components/features/chat/ClosePageButton';
 import { MetricThreeDotMenuButton } from '@/components/features/metrics/MetricThreeDotMenu';
 import { SelectableButton } from '@/components/ui/buttons/SelectableButton';
 import { SquareChartPen } from '@/components/ui/icons';
+import { useIsEmbed } from '@/context/BusterAssets/useIsEmbed';
 import { useIsChatMode, useIsFileMode } from '@/context/Chats/useMode';
 import { useIsMetricReadOnly } from '@/context/Metrics/useIsMetricReadOnly';
 import { canEdit, getIsEffectiveOwner } from '@/lib/share';
@@ -22,6 +23,7 @@ export const MetricContainerHeaderButtons: React.FC<{
 }> = React.memo(({ metricId, metricVersionNumber }) => {
   const isChatMode = useIsChatMode();
   const isFileMode = useIsFileMode();
+  const isEmbed = useIsEmbed();
   const { isViewingOldVersion } = useIsMetricReadOnly({
     metricId: metricId || '',
   });
@@ -42,15 +44,17 @@ export const MetricContainerHeaderButtons: React.FC<{
       {isEffectiveOwner && !isViewingOldVersion && (
         <ShareMetricButton metricId={metricId} metricVersionNumber={metricVersionNumber} />
       )}
-      <MetricThreeDotMenuButton
-        metricId={metricId}
-        isViewingOldVersion={isViewingOldVersion}
-        versionNumber={metricVersionNumber}
-      />
+      {!isEmbed && (
+        <MetricThreeDotMenuButton
+          metricId={metricId}
+          isViewingOldVersion={isViewingOldVersion}
+          versionNumber={metricVersionNumber}
+        />
+      )}
       <HideButtonContainer show={isFileMode && isEditor}>
         <CreateChatButton assetId={metricId} assetType="metric_file" />
       </HideButtonContainer>
-      {isChatMode && <ClosePageButton />}
+      {isChatMode && <ClosePageButton isEmbed={isEmbed} />}
     </FileButtonContainer>
   );
 });

apps/web/src/layouts/AssetContainer/ReportAssetContainer/ReportContainerHeaderButtons.tsx

@@ -6,6 +6,7 @@ import { CreateChatButton } from '@/components/features/AssetLayout/CreateChatBu
 import { ShareReportButton } from '@/components/features/buttons/ShareReportButton';
 import { ClosePageButton } from '@/components/features/chat/ClosePageButton';
 import { ReportThreeDotMenu } from '@/components/features/reports/ReportThreeDotMenu';
+import { useIsEmbed } from '@/context/BusterAssets/useIsEmbed';
 import { useIsChatMode, useIsFileMode } from '@/context/Chats/useMode';
 import { useIsReportReadOnly } from '@/context/Reports/useIsReportReadOnly';
 import { canEdit, getIsEffectiveOwner } from '@/lib/share';
@@ -23,6 +24,7 @@ export const ReportContainerHeaderButtons: React.FC<ReportContainerHeaderButtons
 }) => {
   const isChatMode = useIsChatMode();
   const isFileMode = useIsFileMode();
+  const isEmbed = useIsEmbed();
   const { isViewingOldVersion } = useIsReportReadOnly({
     reportId: reportId || '',
   });
@@ -38,16 +40,18 @@ export const ReportContainerHeaderButtons: React.FC<ReportContainerHeaderButtons
     <FileButtonContainer>
       {isEffectiveOwner && <ShareReportButton reportId={reportId} />}
 
-      <ReportThreeDotMenu
-        reportId={reportId}
-        reportVersionNumber={reportVersionNumber}
-        isViewingOldVersion={isViewingOldVersion}
-      />
+      {!isEmbed && (
+        <ReportThreeDotMenu
+          reportId={reportId}
+          reportVersionNumber={reportVersionNumber}
+          isViewingOldVersion={isViewingOldVersion}
+        />
+      )}
 
       <HideButtonContainer show={isFileMode && isEditor}>
         <CreateChatButton assetId={reportId} assetType="report_file" />
       </HideButtonContainer>
-      {isChatMode && <ClosePageButton />}
+      {isChatMode && <ClosePageButton isEmbed={isEmbed} />}
     </FileButtonContainer>
   );
 };

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

@@ -7,6 +7,7 @@ import { Text } from '@/components/ui/typography';
 import { ShimmerText } from '@/components/ui/typography/ShimmerText';
 import { useGetBlackBoxMessage } from '@/context/BlackBox/blackbox-store';
 import { BLACK_BOX_INITIAL_THOUGHT } from '@/context/BlackBox/useBlackboxMessage';
+import { useIsEmbed } from '@/context/BusterAssets/useIsEmbed';
 import { useSelectedAssetType } from '@/context/BusterAssets/useSelectedAssetType';
 import { useGetCurrentMessageId } from '@/context/Chats';
 
@@ -31,6 +32,7 @@ export const ChatResponseReasoning: React.FC<{
   const { data: lastMessageTitle } = useGetChatMessage(messageId, {
     select: stableLastMessageTitleSelector,
   });
+  const isEmbed = useIsEmbed();
   const selectedFileType = useSelectedAssetType();
   const isReasonginFileSelected = selectedFileType === 'reasoning' && urlMessageId === messageId;
   const showShimmerText = isReasonginFileSelected
@@ -49,7 +51,11 @@ export const ChatResponseReasoning: React.FC<{
   return (
     <Link
       to={
-        isReasonginFileSelected ? '/app/chats/$chatId' : '/app/chats/$chatId/reasoning/$messageId'
+        isEmbed
+          ? '/embed/chat/$chatId/reasoning/$messageId'
+          : isReasonginFileSelected
+            ? '/app/chats/$chatId'
+            : '/app/chats/$chatId/reasoning/$messageId'
       }
       params={{
         chatId,

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

@@ -11,6 +11,7 @@ import {
 import { chatQueryKeys } from '@/api/query_keys/chat';
 import { metricsQueryKeys } from '@/api/query_keys/metric';
 import { useBlackboxMessage } from '@/context/BlackBox/useBlackboxMessage';
+import { useIsEmbed } from '@/context/BusterAssets/useIsEmbed';
 import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { updateChatToIChat } from '@/lib/chat';
 
@@ -105,8 +106,9 @@ export const useChatStreaming = ({
   });
 
   //HOOKS FOR TRACKING CHAT AND MESSAGE CHANGES
+  const isEmbed = useIsEmbed();
   useTrackAndUpdateChatChanges({ chatId, isStreamingMessage });
-  useTrackAndUpdateNewMessages({ chatId });
+  useTrackAndUpdateNewMessages({ chatId, isEmbed });
   useTrackAndUpdateMessageChanges({ chatId, messageId, isStreamingMessage }, (c) => {
     const {
       reasoning_messages,

apps/web/src/routes/app/_app/_asset/chats.$chatId/reasoning.$messageId/index.tsx

@@ -1,35 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { ClosePageButton } from '@/components/features/chat/ClosePageButton';
-import { AppSegmented } from '@/components/ui/segmented';
-import { ReasoningController } from '@/controllers/ReasoningController/ReasoningController';
-import { AssetContainer } from '@/layouts/AssetContainer/AssetContainer';
+import * as reportContent from '@/context/BusterAssets/reasoning-server/reasoningContent';
 
 export const Route = createFileRoute('/app/_app/_asset/chats/$chatId/reasoning/$messageId/')({
-  component: RouteComponent,
+  ...reportContent,
 });
-
-function RouteComponent() {
-  const { chatId, messageId } = Route.useParams();
-  return (
-    <AssetContainer header={<ReasoningControllerHeader />} headerBorderVariant="ghost" scrollable>
-      <ReasoningController chatId={chatId} messageId={messageId} />
-    </AssetContainer>
-  );
-}
-
-const ReasoningControllerHeader: React.FC = () => {
-  return (
-    <div className="w-full flex items-center justify-between">
-      <AppSegmented
-        type="button"
-        options={[
-          {
-            value: 'reasoning',
-            label: 'Reasoning',
-          },
-        ]}
-      />
-      <ClosePageButton />
-    </div>
-  );
-};

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

@@ -1,35 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { ClosePageButton } from '@/components/features/chat/ClosePageButton';
-import { AppSegmented } from '@/components/ui/segmented';
-import { ReasoningController } from '@/controllers/ReasoningController/ReasoningController';
-import { AssetContainer } from '@/layouts/AssetContainer/AssetContainer';
+import * as reportContent from '@/context/BusterAssets/reasoning-server/reasoningContent';
 
 export const Route = createFileRoute('/embed/chat/$chatId/reasoning/$messageId/')({
-  component: RouteComponent,
+  ...reportContent,
 });
-
-function RouteComponent() {
-  const { chatId, messageId } = Route.useParams();
-  return (
-    <AssetContainer header={<ReasoningControllerHeader />} headerBorderVariant="ghost" scrollable>
-      <ReasoningController chatId={chatId} messageId={messageId} />
-    </AssetContainer>
-  );
-}
-
-const ReasoningControllerHeader: React.FC = () => {
-  return (
-    <div className="w-full flex items-center justify-between">
-      <AppSegmented
-        type="button"
-        options={[
-          {
-            value: 'reasoning',
-            label: 'Reasoning',
-          },
-        ]}
-      />
-      <ClosePageButton />
-    </div>
-  );
-};