Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1237 from buster-so/big-nate-bus-1988-view-only-chat-ui 

Big nate bus 1988 view only chat UI
This commit is contained in:
Nate Kelley 2025-10-01 15:48:07 -06:00 committed by GitHub
parent ac19b16362 fca1f61762
commit a33477a093
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
45 changed files with 834 additions and 725 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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'] });

4
apps/web/src/components/features/chat/ClosePageButton.tsx
View File

@ -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>
);

2
apps/web/src/components/features/global/NotFoundCard.tsx
View File

@ -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"

20
apps/web/src/routes/embed/chats.$chatId/reasoning.$messageId/index.tsx → apps/web/src/context/BusterAssets/reasoning-server/reasoningContent.tsx
View File

@ -1,23 +1,23 @@
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 { 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 Route = createFileRoute('/embed/chats/$chatId/reasoning/$messageId/')({
component: RouteComponent,
});
function RouteComponent() {
const { chatId, messageId } = Route.useParams();
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
@ -29,7 +29,7 @@ const ReasoningControllerHeader: React.FC = () => {
},
]}
/>
<ClosePageButton />
<ClosePageButton isEmbed={isEmbed} />
</div>
);
};

6
apps/web/src/context/BusterAssets/useGetReasoningMessageId.ts Normal file
View File

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

11
apps/web/src/context/BusterAssets/useIsEmbed.ts Normal file
View File

@ -0,0 +1,11 @@
import { useMatchRoute } from '@tanstack/react-router';
import { Route as EmbedRoute } from '@/routes/embed';
export const useIsEmbed = () => {
const matchRoute = useMatchRoute();
const matches = matchRoute({
to: EmbedRoute.id,
fuzzy: true,
});
return !!matches;
};

24
apps/web/src/context/BusterAssets/useSelectedAssetType.ts
View File

@ -1,10 +1,24 @@
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 lastMatch = useMatches({
select: (matches) => {
return findLast(matches, (match) => match.staticData?.assetType);
},
});
const stableCtxSelector = (ctx: RouteContext) => ctx.assetType;
export const useSelectedAssetType = () => {
const data = assetRouteApi.useRouteContext({ select: stableCtxSelector });
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,
});

16
apps/web/src/layouts/AssetContainer/DashboardAssetContainer/DashboardHeaderButtons.tsx
View File

@ -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>
);
});

16
apps/web/src/layouts/AssetContainer/MetricAssetContainer/MetricHeaderButtons.tsx
View File

@ -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>
);
});

16
apps/web/src/layouts/AssetContainer/ReportAssetContainer/ReportContainerHeaderButtons.tsx
View File

@ -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>
);
};

34
apps/web/src/layouts/ChatLayout/ChatContainer.tsx
View File

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

100
apps/web/src/layouts/ChatLayout/ChatContent/ChatContent.tsx
View File

@ -12,61 +12,65 @@ import { FollowUpChatInput } from './FollowupChatInput';
const autoClass = 'mx-auto max-w-[600px] w-full';
export const ChatContent: React.FC<{ chatId: string | undefined }> = React.memo(({ chatId }) => {
const chatMessageIds = useGetChatMessageIds(chatId);
const containerRef = useRef<HTMLElement>(null);
export const ChatContent: React.FC<{ chatId: string | undefined; isEmbed: boolean }> = React.memo(
({ chatId, isEmbed }) => {
const chatMessageIds = useGetChatMessageIds(chatId);
const containerRef = useRef<HTMLElement>(null);
const { isAutoScrollEnabled, isMountedAutoScrollObserver, scrollToBottom, enableAutoScroll } =
useAutoScroll(containerRef, {
observeSubTree: true,
enabled: false,
const { isAutoScrollEnabled, isMountedAutoScrollObserver, scrollToBottom, enableAutoScroll } =
useAutoScroll(containerRef, {
observeSubTree: true,
enabled: false,
});
useMount(() => {
const container = document
.getElementById(CHAT_CONTAINER_ID)
?.querySelector(`.${SCROLL_AREA_VIEWPORT_CLASS}`) as HTMLElement;
if (!container) return;
containerRef.current = container;
enableAutoScroll();
});
useMount(() => {
const container = document
.getElementById(CHAT_CONTAINER_ID)
?.querySelector(`.${SCROLL_AREA_VIEWPORT_CLASS}`) as HTMLElement;
if (!container) return;
containerRef.current = container;
enableAutoScroll();
});
const showScrollToBottomButton = isMountedAutoScrollObserver && containerRef.current;
const showScrollToBottomButton = isMountedAutoScrollObserver && containerRef.current;
return (
<>
<div
className={cn(
'mb-48 flex h-full w-full flex-col',
!isMountedAutoScrollObserver && 'invisible'
)}
>
<ClientOnly>
{chatMessageIds?.map((messageId, index) => (
<div key={messageId} className={autoClass}>
<ChatMessageBlock
key={messageId}
messageId={messageId}
chatId={chatId || ''}
messageIndex={index}
/>
</div>
))}
</ClientOnly>
</div>
return (
<>
<div
className={cn(
'mb-48 flex h-full w-full flex-col',
!isMountedAutoScrollObserver && 'invisible'
)}
>
<ClientOnly>
{chatMessageIds?.map((messageId, index) => (
<div key={messageId} className={autoClass}>
<ChatMessageBlock
key={messageId}
messageId={messageId}
chatId={chatId || ''}
messageIndex={index}
{!isEmbed && (
<ChatInputWrapper>
{showScrollToBottomButton && (
<ScrollToBottomButton
isAutoScrollEnabled={isAutoScrollEnabled}
scrollToBottom={scrollToBottom}
className={'absolute -top-10'}
/>
</div>
))}
</ClientOnly>
</div>
<ChatInputWrapper>
{showScrollToBottomButton && (
<ScrollToBottomButton
isAutoScrollEnabled={isAutoScrollEnabled}
scrollToBottom={scrollToBottom}
className={'absolute -top-10'}
/>
)}
</ChatInputWrapper>
)}
</ChatInputWrapper>
</>
);
});
</>
);
}
);
ChatContent.displayName = 'ChatContent';

26
apps/web/src/layouts/ChatLayout/ChatContent/ChatMessageOptions.tsx
View File

@ -89,18 +89,20 @@ export const ChatMessageOptions: React.FC<{
/>
</AppTooltip>
)}
<AppTooltip title="Report message">
<Button
variant="ghost"
prefix={feedback === 'negative' ? <ThumbsDownFilled /> : <ThumbsDown />}
onClick={() =>
updateChatMessageFeedback({
message_id: messageId,
feedback: feedback === 'negative' ? null : 'negative',
})
}
/>
</AppTooltip>
{canEditChat && (
<AppTooltip title="Report message">
<Button
variant="ghost"
prefix={feedback === 'negative' ? <ThumbsDownFilled /> : <ThumbsDown />}
onClick={() =>
updateChatMessageFeedback({
message_id: messageId,
feedback: feedback === 'negative' ? null : 'negative',
})
}
/>
</AppTooltip>
)}
{postProcessingMessage && (
<AppTooltip title="View assumptions">

3
apps/web/src/layouts/ChatLayout/ChatContent/ChatResponseMessages/ChatResponseMessage_File/ChatResponseMessage_File.tsx
View File

@ -1,6 +1,7 @@
import React, { useCallback, useMemo } from 'react';
import type { BusterChatMessage, BusterChatResponseMessage_file } from '@/api/asset_interfaces';
import { useGetChatMessage } from '@/api/buster_rest/chats';
import { useIsEmbed } from '@/context/BusterAssets/useIsEmbed';
import { createChatAssetRoute } from '@/lib/routes/createSimpleAssetRoute';
import type { ILinkProps } from '@/types/routes';
import type { ChatResponseMessageProps } from '../ChatResponseMessageSelector';
@ -21,12 +22,14 @@ export const ChatResponseMessage_File: React.FC<ChatResponseMessageProps> = Reac
const { file_type } = responseMessage;
const { isSelectedFile } = useGetIsSelectedFile({ responseMessage });
const isEmbed = useIsEmbed();
const linkParams = createChatAssetRoute({
asset_type: file_type,
id: responseMessage.id,
chatId,
versionNumber: responseMessage.version_number,
isEmbed,
}) as unknown as ILinkProps;
const SelectedComponent = useMemo(() => {

8
apps/web/src/layouts/ChatLayout/ChatContent/ChatResponseMessages/ChatResponseReasoning.tsx
View File

@ -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,

4
apps/web/src/layouts/ChatLayout/ChatHeader.tsx
View File

@ -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 />}
</>
);
});

4
apps/web/src/layouts/ChatLayout/ChatLayout.tsx
View File

@ -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}

4
apps/web/src/layouts/ChatLayout/ChatLayoutContext/useChatStreaming.tsx
View File

@ -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,

41
apps/web/src/lib/routes/createSimpleAssetRoute.ts
View File

@ -59,8 +59,16 @@ export const createChatAssetRoute = (asset: {
id: string | undefined;
chatId: string;
versionNumber?: number;
isEmbed: boolean;
}) => {
if (asset.asset_type === 'chat' || !asset.asset_type || !asset.id) {
if (asset.isEmbed) {
return defineLink({
to: '/embed/chat/$chatId',
params: { chatId: asset.chatId },
});
}
return defineLink({
to: '/app/chats/$chatId',
params: { chatId: asset.chatId },
@ -68,6 +76,13 @@ export const createChatAssetRoute = (asset: {
}
if (asset.asset_type === 'metric_file') {
if (asset.isEmbed) {
return defineLink({
to: '/embed/chat/$chatId/metrics/$metricId',
params: { metricId: asset.id || '', chatId: asset.chatId },
search: { metric_version_number: asset.versionNumber },
});
}
return defineLink({
to: '/app/chats/$chatId/metrics/$metricId',
params: { metricId: asset.id || '', chatId: asset.chatId },
@ -76,6 +91,13 @@ export const createChatAssetRoute = (asset: {
}
if (asset.asset_type === 'dashboard_file') {
if (asset.isEmbed) {
return defineLink({
to: '/embed/chat/$chatId/dashboards/$dashboardId',
params: { dashboardId: asset.id || '', chatId: asset.chatId },
search: { dashboard_version_number: asset.versionNumber },
});
}
return defineLink({
to: '/app/chats/$chatId/dashboards/$dashboardId',
params: { dashboardId: asset.id || '', chatId: asset.chatId },
@ -84,6 +106,13 @@ export const createChatAssetRoute = (asset: {
}
if (asset.asset_type === 'report_file') {
if (asset.isEmbed) {
return defineLink({
to: '/embed/chat/$chatId/reports/$reportId',
params: { reportId: asset.id || '', chatId: asset.chatId },
search: { report_version_number: asset.versionNumber },
});
}
return defineLink({
to: '/app/chats/$chatId/reports/$reportId',
params: { reportId: asset.id || '', chatId: asset.chatId },
@ -92,6 +121,12 @@ export const createChatAssetRoute = (asset: {
}
if (asset.asset_type === 'reasoning') {
if (asset.isEmbed) {
return defineLink({
to: '/embed/chat/$chatId/reasoning/$messageId',
params: { messageId: asset.id || '', chatId: asset.chatId },
});
}
return defineLink({
to: '/app/chats/$chatId/reasoning/$messageId',
params: { chatId: asset.chatId, messageId: asset.id || '' },
@ -99,6 +134,12 @@ export const createChatAssetRoute = (asset: {
}
if (asset.asset_type === 'collection') {
if (asset.isEmbed) {
console.warn('collection is actually not supported for embeds...', asset.id);
return defineLink({
to: '/auth/login',
});
}
return defineLink({
to: '/app/collections/$collectionId',
params: { collectionId: asset.id || '' },

1082
apps/web/src/routeTree.gen.ts
View File

File diff suppressed because it is too large Load Diff

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

@ -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>
);
};

28
apps/web/src/routes/embed.tsx
View File

@ -1,10 +1,12 @@
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';
import { cn } from '@/lib/classMerge';
export const Route = createFileRoute('/embed')({
beforeLoad: async ({ context, matches }) => {
@ -14,6 +16,7 @@ export const Route = createFileRoute('/embed')({
const assetType = [...matches].reverse().find(({ staticData }) => staticData?.assetType)
?.staticData?.assetType as AssetType;
return {
assetType,
};
@ -29,25 +32,26 @@ 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>
);
}
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 className="flex flex-col gap-3 h-full w-full items-center justify-center">
<NotFoundCard />
</div>
);
}
const isChat = assetType === 'chat' || !!chatId;
return (
<main className="h-full w-full bg-page-background overflow-y-auto">
<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'
)}
>
<AppAssetCheckLayout assetType={assetType}>
<Outlet />
</AppAssetCheckLayout>

16
apps/web/src/routes/embed/chat.$chatId.tsx
View File

@ -1,10 +1,18 @@
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>;
},
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>
);
}

2
apps/web/src/routes/embed/chats.$chatId/dashboards.$dashboardId/_layout.tsx → apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/_layout.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/dashboards.$dashboardId/_layout/index.tsx → apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/_layout/index.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/dashboards.$dashboardId/metrics.$metricId/_content.tsx → apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/metrics.$metricId/_content.tsx
View File

@ -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 }>,

2
apps/web/src/routes/embed/chats.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/chart.tsx → apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/chart.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/index.tsx → apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/index.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/results.tsx → apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/results.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/sql.tsx → apps/web/src/routes/embed/chat.$chatId/dashboards.$dashboardId/metrics.$metricId/_content/sql.tsx
View File

@ -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,
});

5
apps/web/src/routes/embed/chats.$chatId/index.tsx → apps/web/src/routes/embed/chat.$chatId/index.tsx
View File

@ -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() {

2
apps/web/src/routes/embed/chats.$chatId/metrics.$metricId/_layout.tsx → apps/web/src/routes/embed/chat.$chatId/metrics.$metricId/_layout.tsx
View File

@ -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 }>,
});

2
apps/web/src/routes/embed/chats.$chatId/metrics.$metricId/_layout/chart.tsx → apps/web/src/routes/embed/chat.$chatId/metrics.$metricId/_layout/chart.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/metrics.$metricId/_layout/index.tsx → apps/web/src/routes/embed/chat.$chatId/metrics.$metricId/_layout/index.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/metrics.$metricId/_layout/results.tsx → apps/web/src/routes/embed/chat.$chatId/metrics.$metricId/_layout/results.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/metrics.$metricId/_layout/sql.tsx → apps/web/src/routes/embed/chat.$chatId/metrics.$metricId/_layout/sql.tsx
View File

@ -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,
});

6
apps/web/src/routes/embed/chat.$chatId/reasoning.$messageId/index.tsx Normal file
View File

@ -0,0 +1,6 @@
import { createFileRoute } from '@tanstack/react-router';
import * as reportContent from '@/context/BusterAssets/reasoning-server/reasoningContent';
export const Route = createFileRoute('/embed/chat/$chatId/reasoning/$messageId/')({
...reportContent,
});

2
apps/web/src/routes/embed/chats.$chatId/reports.$reportId/_layout.tsx → apps/web/src/routes/embed/chat.$chatId/reports.$reportId/_layout.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/reports.$reportId/_layout/content.tsx → apps/web/src/routes/embed/chat.$chatId/reports.$reportId/_layout/content.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/reports.$reportId/_layout/index.tsx → apps/web/src/routes/embed/chat.$chatId/reports.$reportId/_layout/index.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/reports.$reportId/metrics.$metricId/_content.tsx → apps/web/src/routes/embed/chat.$chatId/reports.$reportId/metrics.$metricId/_content.tsx
View File

@ -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 }>,

2
apps/web/src/routes/embed/chats.$chatId/reports.$reportId/metrics.$metricId/_content/chart.tsx → apps/web/src/routes/embed/chat.$chatId/reports.$reportId/metrics.$metricId/_content/chart.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/reports.$reportId/metrics.$metricId/_content/index.tsx → apps/web/src/routes/embed/chat.$chatId/reports.$reportId/metrics.$metricId/_content/index.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/reports.$reportId/metrics.$metricId/_content/results.tsx → apps/web/src/routes/embed/chat.$chatId/reports.$reportId/metrics.$metricId/_content/results.tsx
View File

@ -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,
});

2
apps/web/src/routes/embed/chats.$chatId/reports.$reportId/metrics.$metricId/_content/sql.tsx → apps/web/src/routes/embed/chat.$chatId/reports.$reportId/metrics.$metricId/_content/sql.tsx
View File

@ -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,
});