1 ? 'cursor-grab' : 'cursor-default'
)}
onWheel={handleWheel}
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
index 904f73b..4c75373 100644
--- a/packages/cletus/src/browser/components/MessageItem.tsx
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -1,12 +1,15 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import { User, Bot, Info } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
import { OperationDisplay } from '../operations';
import { TypingIndicator } from './TypingIndicator';
import { cn } from '../lib/utils';
import { ClickableImage } from './ImageViewer';
import type { Message } from '../../schemas';
+import type { Components } from 'react-markdown';
interface MessageItemProps {
message: Message;
@@ -15,8 +18,68 @@ interface MessageItemProps {
onApproveOperation: (message: Message, idx: number) => void;
onRejectOperation: (message: Message, idx: number) => void;
hasMultiplePendingOps?: boolean;
+ isProcessing?: boolean;
}
+// Preprocess content to convert LaTeX delimiters to markdown math delimiters
+const preprocessLatex = (text: string): string => {
+ // Convert \[...\] to $$...$$ (display math)
+ text = text.replace(/\\\[([\s\S]*?)\\\]/g, (match, content) => `$$${content}$$`);
+ // Convert \(...\) to $...$ (inline math)
+ text = text.replace(/\\\(([\s\S]*?)\\\)/g, (match, content) => `$${content}$`);
+ // Convert standalone [... ] patterns that look like display math (with array/equation content)
+ // Only convert if it contains LaTeX commands like \begin, \text, etc.
+ text = text.replace(/\[\s*(\\begin|\\text|\\frac|\\int|\\sum|\\prod)([\s\S]*?)\s*\]/g, (match, cmd, rest) => `$$${cmd}${rest}$$`);
+ return text;
+};
+
+// Stable markdown components reference - created once and reused
+const markdownComponents: Components = {
+ p: ({ children }) =>
{children}
,
+ ul: ({ children }) =>
,
+ ol: ({ children }) =>
{children}
,
+ li: ({ children }) =>
{children},
+ code: ({ inline, children, ...props }: any) => {
+ return inline ? (
+
+ {children}
+
+ ) : (
+
+ {children}
+
+ );
+ },
+ pre: ({ children }) =>
{children},
+ a: ({ href, children }) => (
+
+ {children}
+
+ ),
+ img: ({ src, alt, ...props }: any) => {
+ // Transform local file paths to use the /file route
+ const imageSrc = src && !src.startsWith('http://') && !src.startsWith('https://') && !src.startsWith('data:')
+ ? `/file?path=${encodeURIComponent(src)}`
+ : src;
+ return
;
+ },
+};
+
+// Memoized markdown content renderer
+const MarkdownContent = React.memo<{ content: string }>(({ content }) => {
+ const processedContent = useMemo(() => preprocessLatex(content), [content]);
+
+ return (
+
+ {processedContent}
+
+ );
+});
+
export const MessageItem: React.FC
= ({
message,
operationDecisions,
@@ -24,6 +87,7 @@ export const MessageItem: React.FC = ({
onApproveOperation,
onRejectOperation,
hasMultiplePendingOps = false,
+ isProcessing = false,
}) => {
const { role, name, content, operations = [] } = message;
@@ -79,11 +143,11 @@ export const MessageItem: React.FC = ({
{/* Content and Operations in order */}
- {visibleContent.length === 0 && isAssistant ? (
+ {visibleContent.length === 0 && isAssistant && isProcessing ? (
- ) : (
+ ) : visibleContent.length === 0 && isAssistant ? null : (
visibleContent.map((item, index) => {
// Render operation if this content item has an operation
if (item.operation && item.operationIndex !== undefined) {
@@ -121,41 +185,7 @@ export const MessageItem: React.FC
= ({
isSystem && 'bg-muted/50 border border-muted italic'
)}
>
- {children}
,
- ul: ({ children }) => ,
- ol: ({ children }) => {children}
,
- li: ({ children }) => {children},
- code: ({ inline, children, ...props }: any) => {
- return inline ? (
-
- {children}
-
- ) : (
-
- {children}
-
- );
- },
- pre: ({ children }) => {children},
- a: ({ href, children }) => (
-
- {children}
-
- ),
- img: ({ src, alt, ...props }: any) => {
- // Transform local file paths to use the /file route
- const imageSrc = src && !src.startsWith('http://') && !src.startsWith('https://') && !src.startsWith('data:')
- ? `/file?path=${encodeURIComponent(src)}`
- : src;
- return ;
- },
- }}
- >
- {item.content}
-
+
{messages.map((message, index) => {
// Check if this is the last message with pending operations
- // const isLastMessage = index === messages.length - 1;
+ const isLastMessage = index === messages.length - 1;
// const hasPendingOps = message.operations?.some(op => op.status === 'analyzed');
const pendingOpCount = message.operations?.filter(op => op.status === 'analyzed' || op.status === 'doing').length || 0;
@@ -57,6 +57,7 @@ export const MessageList: React.FC
= ({
onApproveOperation={onApproveOperation}
onRejectOperation={onRejectOperation}
hasMultiplePendingOps={pendingOpCount > 1}
+ isProcessing={isLastMessage && loading}
/>
);
})}
diff --git a/packages/cletus/src/browser/components/OperationDisplay.tsx b/packages/cletus/src/browser/components/OperationDisplay.tsx
index f49dcf1..ac84dea 100644
--- a/packages/cletus/src/browser/components/OperationDisplay.tsx
+++ b/packages/cletus/src/browser/components/OperationDisplay.tsx
@@ -370,6 +370,7 @@ export interface OperationDisplayProps {
operation: Operation;
label: string;
summary?: React.ReactNode | string | null;
+ summaryClasses?: string;
borderColor?: string;
bgColor?: string;
labelColor?: string;
@@ -390,6 +391,7 @@ export const OperationDisplay: React.FC = ({
label,
summary,
borderColor = 'border-border',
+ summaryClasses = 'max-h-[8rem] overflow-y-auto',
bgColor = 'bg-card/50',
labelColor = 'text-foreground',
message,
@@ -425,7 +427,7 @@ export const OperationDisplay: React.FC = ({
{/* Summary */}
{displaySummary && (
-
+
{typeof displaySummary === 'string' ? (
<>
→
diff --git a/packages/cletus/src/browser/operations/artist.tsx b/packages/cletus/src/browser/operations/artist.tsx
index e1c40bb..cc44644 100644
--- a/packages/cletus/src/browser/operations/artist.tsx
+++ b/packages/cletus/src/browser/operations/artist.tsx
@@ -1,8 +1,13 @@
-import React from 'react';
-import { abbreviate, pluralize } from '../../shared';
-import { createRenderer } from './render';
+import * as echarts from 'echarts';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { abbreviate, deepMerge, pluralize } from '../../shared';
import { ClickableImage } from '../components/ImageViewer';
+import { createRenderer } from './render';
+import { ChartDataPoint, ChartVariant } from '../../helpers/artist';
+import { type EChartsOption } from 'echarts';
import { ClickableDiagram } from '../components/DiagramViewer';
+import { ClickableChart } from '../components/ChartViewer';
+
const renderer = createRenderer({
borderColor: "border-neon-pink/30",
@@ -36,7 +41,8 @@ export const image_generate = renderer<'image_generate'>(
return `Generated ${pluralize(count, 'image')}`;
}
return null;
- }
+ },
+ () => ({ summaryClasses: '' })
);
export const image_edit = renderer<'image_edit'>(
@@ -59,7 +65,8 @@ export const image_edit = renderer<'image_edit'>(
return 'Edited image saved';
}
return null;
- }
+ },
+ () => ({ summaryClasses: '' })
);
export const image_analyze = renderer<'image_analyze'>(
@@ -109,6 +116,30 @@ export const image_attach = renderer<'image_attach'>(
}
);
+// ============================================================================
+// Chart Display Renderer
+// ============================================================================
+
+export const chart_display = renderer<'chart_display'>(
+ (op) => `ChartDisplay(${op.input.chart.chartGroup}, ${op.input.chart.data?.length || 0} points)`,
+ (op): string | React.ReactNode | null => {
+ if (op.output) {
+ return (
+
+ );
+ }
+ return null;
+ },
+ () => ({ summaryClasses: '' })
+);
+
export const diagram_show = renderer<'diagram_show'>(
(op) => `DiagramShow()`,
(op): string | React.ReactNode | null => {
@@ -124,5 +155,277 @@ export const diagram_show = renderer<'diagram_show'>(
);
}
return null;
- }
+ },
+ () => ({ summaryClasses: '' })
);
+
+
+// ============================================================================
+// Chart Display Component
+// ============================================================================
+
+const ChartDisplay: React.FC<{
+ chartGroup: string;
+ availableVariants: ChartVariant[];
+ currentVariant: ChartVariant;
+ option: EChartsOption;
+ data: ChartDataPoint[];
+ variantOptions: Partial
>>;
+}> = ({ chartGroup, availableVariants, currentVariant: initialVariant, option: initialOption, data, variantOptions }) => {
+ const [currentVariant, setCurrentVariant] = useState(initialVariant);
+
+ // Extract global options (title, etc.) from initial option to preserve across variants
+ const globalOptions = useMemo>(() => ({
+ title: initialOption.title,
+ grid: initialOption.grid,
+ backgroundColor: initialOption.backgroundColor,
+ }), [initialOption.title, initialOption.grid, initialOption.backgroundColor]);
+
+ // Compute current option based on selected variant
+ const currentOption = useMemo(() => {
+ const variantSpecificOption = buildOptionForVariant(currentVariant, data, variantOptions[currentVariant] || {});
+ // Merge global options (title, etc.) with variant-specific options
+ return deepMerge(variantSpecificOption, globalOptions);
+ }, [currentVariant, data, variantOptions, globalOptions]);
+
+ const handleVariantChange = (variant: ChartVariant) => {
+ setCurrentVariant(variant);
+ };
+
+ return (
+
+
+
Type:
+
+ {availableVariants.map((variant) => (
+
+ ))}
+
+
+
+
{
+ setShowDeleteConfirm(false);
+ setDeleteConfirmText('');
+ }}
+ >
+
e.stopPropagation()}
+ >
+
Delete Chat
+
+ Are you sure you want to delete "{chatMeta.title}"? This will permanently delete all messages in this chat. This action cannot be undone.
+
+
+ Type DELETE to confirm:
+
+
setDeleteConfirmText(e.target.value)}
+ placeholder="Type DELETE"
+ className="mb-4 font-mono"
+ autoFocus
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ handleConfirmDelete();
+ } else if (e.key === 'Escape') {
+ setShowDeleteConfirm(false);
+ setDeleteConfirmText('');
+ }
+ }}
+ />
+
+
+
+
+
+