56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
|
|
import { MessageSquare } from 'lucide-react';
|
|
|
|
import { MarkdownViewer } from '../viewers';
|
|
|
|
import { BaseItem } from './BaseItem';
|
|
import { truncateText } from './baseItemHelpers';
|
|
|
|
import type { SemanticStep } from '@renderer/types/data';
|
|
import type { TriggerColor } from '@shared/constants/triggerColors';
|
|
|
|
interface TextItemProps {
|
|
step: SemanticStep;
|
|
preview: string;
|
|
onClick: () => void;
|
|
isExpanded: boolean;
|
|
/** Additional classes for highlighting (e.g., error deep linking) */
|
|
highlightClasses?: string;
|
|
/** Inline styles for highlighting (used by custom hex colors) */
|
|
highlightStyle?: React.CSSProperties;
|
|
/** Notification dot color for custom triggers */
|
|
notificationDotColor?: TriggerColor;
|
|
}
|
|
|
|
export const TextItem: React.FC<TextItemProps> = ({
|
|
step,
|
|
preview,
|
|
onClick,
|
|
isExpanded,
|
|
highlightClasses,
|
|
highlightStyle,
|
|
notificationDotColor,
|
|
}) => {
|
|
const fullContent = step.content.outputText ?? preview;
|
|
const truncatedPreview = truncateText(preview, 60);
|
|
|
|
// Get token count from step.tokens.output or step.content.tokenCount
|
|
const tokenCount = step.tokens?.output ?? step.content.tokenCount ?? 0;
|
|
|
|
return (
|
|
<BaseItem
|
|
icon={<MessageSquare className="size-4" />}
|
|
label="Output"
|
|
summary={truncatedPreview}
|
|
tokenCount={tokenCount}
|
|
onClick={onClick}
|
|
isExpanded={isExpanded}
|
|
highlightClasses={highlightClasses}
|
|
highlightStyle={highlightStyle}
|
|
notificationDotColor={notificationDotColor}
|
|
>
|
|
<MarkdownViewer content={fullContent} maxHeight="max-h-96" copyable />
|
|
</BaseItem>
|
|
);
|
|
};
|