This commit is contained in:
Nate Kelley 2025-03-07 17:45:20 -07:00
parent 9ecf04f65b
commit e6e4ecf359
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
10 changed files with 35 additions and 17 deletions

3
.gitignore vendored
View File

@ -63,4 +63,5 @@ node_modules/
.secrets
/prds
/prds
.DS_Store

View File

@ -3,7 +3,7 @@ import React from 'react';
function Microsoft() {
return (
<svg height="1em" width="1em" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g fill="#212121">
<g fill="currentColor">
<path d="M3,3H15.381V15.381H3V3Z" />
<path d="M16.619,3h12.381V15.381h-12.381V3Z" />
<path d="M3,16.619H15.381v12.381H3v-12.381Z" />

View File

@ -15,13 +15,24 @@ export const BarContainer: React.FC<{
title: string;
secondaryTitle?: string;
contentClassName?: string;
animationKey?: string;
}> = React.memo(
({ showBar, status, isCompletedStream, children, title, secondaryTitle, contentClassName }) => {
({
showBar,
status,
isCompletedStream,
children,
title,
secondaryTitle,
contentClassName,
animationKey
}) => {
return (
<AnimatePresence initial={!isCompletedStream}>
<AnimatePresence initial={!isCompletedStream} mode="wait">
<motion.div
className={'relative flex space-x-1.5 overflow-hidden'}
{...itemAnimationConfig}>
{...itemAnimationConfig}
key={animationKey}>
<VerticalBarContainer showBar={showBar} status={status} />
<div className={`flex w-full flex-col space-y-2 overflow-hidden ${contentClassName}`}>

View File

@ -4,7 +4,6 @@ import { useQuery } from '@tanstack/react-query';
import React from 'react';
import { queryKeys } from '@/api/query_keys';
import { BarContainer } from './BarContainer';
import { Text } from '@/components/ui/typography';
export const BlackBoxMessage: React.FC<{ messageId: string }> = React.memo(({ messageId }) => {
const blackBoxMessage = useQuery({
@ -24,7 +23,7 @@ export const BlackBoxMessage: React.FC<{ messageId: string }> = React.memo(({ me
);
}
return <span className="text-red-500">no black box {messageId}</span>;
return null;
});
BlackBoxMessage.displayName = 'BlackBoxMessage';

View File

@ -10,6 +10,7 @@ export interface ReasoningMessageProps {
messageId: string;
isCompletedStream: boolean;
chatId: string;
animationKey?: string;
}
const ReasoningMessageRecord: Record<
@ -45,7 +46,8 @@ export const ReasoningMessageSelector: React.FC<ReasoningMessageSelectorProps> =
return (
<ReasoningMessage
key={reasoningMessageId + reasoningMessageType} //force in case the type changes
key={reasoningMessageId} //force in case the type changes
animationKey={reasoningMessageId + reasoningMessageType}
reasoningMessageId={reasoningMessageId}
isCompletedStream={isCompletedStream}
messageId={messageId}

View File

@ -12,22 +12,19 @@ const getReasoningMessage = (x: BusterChatMessage | undefined, reasoningMessageI
x?.reasoning_messages[reasoningMessageId] as BusterChatMessageReasoning_files;
export const ReasoningMessage_Files: React.FC<ReasoningMessageProps> = React.memo(
({ isCompletedStream, chatId, reasoningMessageId, messageId }) => {
({ isCompletedStream, chatId, reasoningMessageId, messageId, animationKey }) => {
const status = useMessageIndividual(
messageId,
(x) => getReasoningMessage(x, reasoningMessageId)?.status
);
const file_ids = useMessageIndividual(
messageId,
(x) => getReasoningMessage(x, reasoningMessageId)?.file_ids
);
const title = useMessageIndividual(
messageId,
(x) => getReasoningMessage(x, reasoningMessageId)?.title
);
const secondary_title = useMessageIndividual(
messageId,
(x) => getReasoningMessage(x, reasoningMessageId)?.secondary_title
@ -35,14 +32,13 @@ export const ReasoningMessage_Files: React.FC<ReasoningMessageProps> = React.mem
if (!title) return null;
console.log(reasoningMessageId, isCompletedStream);
return (
<BarContainer
showBar={true}
status={status}
isCompletedStream={isCompletedStream}
title={title}
animationKey={animationKey}
secondaryTitle={secondary_title}
contentClassName="mb-2">
<div className="flex flex-col gap-3">

View File

@ -1,5 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react';
import { ReasoningMessagePillsContainer } from './ReasoningMessagePillsContainer';
import { ReasoningMessage_Text } from '../ReasoningMessage_Text';
import type { BusterChatMessageReasoning_pills, ThoughtFileType } from '@/api/asset_interfaces';
import { useState } from 'react';
import { Button } from '@/components/ui/buttons';
@ -98,6 +99,10 @@ export const Loading: Story = {
render: () => <InteractiveLoadingWrapper />
};
export const LoadingTextThenPills: Story = {
render: () => <InteractiveLoadingWrapper />
};
export const Failed: Story = {
args: {
...mockReasoningMessage,

View File

@ -39,8 +39,9 @@ export const ReasoningMessagePillsContainer: React.FC<
BusterChatMessageReasoning_pills & {
status: NonNullable<BusterChatMessageReasoning_pills['status']>;
isCompletedStream: boolean;
animationKey?: string;
}
> = ({ title, secondary_title, pill_containers, status, isCompletedStream }) => {
> = ({ title, secondary_title, pill_containers, status, isCompletedStream, animationKey }) => {
const hasPills = !!pill_containers && pill_containers.length > 0;
const loadingStatus: NonNullable<BusterChatMessageReasoning_pills['status']> = status;
@ -48,6 +49,7 @@ export const ReasoningMessagePillsContainer: React.FC<
<BarContainer
showBar={hasPills}
status={loadingStatus}
animationKey={animationKey}
isCompletedStream={isCompletedStream}
title={title}
secondaryTitle={secondary_title}

View File

@ -5,7 +5,7 @@ import { useMessageIndividual } from '@/context/Chats';
import { ReasoningMessagePillsContainer } from './ReasoningMessagePillsContainer';
export const ReasoningMessage_PillsContainer: React.FC<ReasoningMessageProps> = React.memo(
({ reasoningMessageId, messageId, isCompletedStream }) => {
({ reasoningMessageId, messageId, isCompletedStream, animationKey }) => {
const reasoningMessage = useMessageIndividual(
messageId,
(x) => x?.reasoning_messages[reasoningMessageId]
@ -19,6 +19,7 @@ export const ReasoningMessage_PillsContainer: React.FC<ReasoningMessageProps> =
{...reasoningMessagePills}
status={status}
isCompletedStream={isCompletedStream}
animationKey={animationKey}
/>
);
}

View File

@ -6,7 +6,7 @@ import { BarContainer } from '../BarContainer';
import { useMessageIndividual } from '@/context/Chats';
export const ReasoningMessage_Text: React.FC<ReasoningMessageProps> = React.memo(
({ reasoningMessageId, messageId, isCompletedStream }) => {
({ reasoningMessageId, messageId, isCompletedStream, animationKey }) => {
const reasoningMessage = useMessageIndividual(
messageId,
(x) => x?.reasoning_messages[reasoningMessageId]
@ -19,6 +19,7 @@ export const ReasoningMessage_Text: React.FC<ReasoningMessageProps> = React.memo
<BarContainer
showBar={!!message?.length}
status={status}
animationKey={animationKey}
isCompletedStream={isCompletedStream}
title={title}
secondaryTitle={secondary_title}>