Let me think…
@@ -52,52 +65,59 @@ export function Thread(): JSX.Element | null {
)
}
-const Message = React.forwardRef<
- HTMLDivElement,
- React.PropsWithChildren<{ role: 'user' | 'assistant'; className?: string }>
->(function Message({ role, children, className }, ref): JSX.Element {
- if (role === 'user') {
+const Message = React.forwardRef
>(
+ function Message({ type, children, className }, ref): JSX.Element {
+ if (type === AssistantMessageType.Human) {
+ return (
+
+ {children}
+
+ )
+ }
+
return (
-
+
{children}
)
}
-
- return (
-
- {children}
-
- )
-})
+)
function Answer({
message,
+ status,
previousMessage,
}: {
- message: ThreadMessage & { content: TrendGenerationResult }
+ message: VisualizationMessage
+ status?: MessageStatus
previousMessage: ThreadMessage
}): JSX.Element {
- const query: InsightVizNode = {
- kind: NodeKind.InsightVizNode,
- source: message.content?.answer as InsightQueryNode,
- showHeader: true,
- }
+ const query = useMemo
(() => {
+ if (message.answer) {
+ return {
+ kind: NodeKind.InsightVizNode,
+ source: message.answer as TrendsQuery,
+ showHeader: true,
+ }
+ }
+
+ return null
+ }, [message])
return (
<>
- {message.content?.reasoning_steps && (
-
+ {message.reasoning_steps && (
+
- {message.content.reasoning_steps.map((step, index) => (
+ {message.reasoning_steps.map((step, index) => (
- {step}
))}
)}
- {message.status === 'completed' && message.content?.answer && (
+ {status === 'completed' && query && (
<>
-
+
@@ -118,7 +138,9 @@ function Answer({