Zane
85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import MarkdownContent from './MarkdownContent';
|
|
|
|
function truncateText(text: string, maxLength: number = 100): string {
|
|
if (text.length <= maxLength) return text;
|
|
return text.slice(0, maxLength) + '...';
|
|
}
|
|
|
|
interface SplashPillProps {
|
|
content: string;
|
|
append: (text: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
function SplashPill({ content, append, className = '' }: SplashPillProps) {
|
|
const displayText = truncateText(content);
|
|
|
|
return (
|
|
<div
|
|
className={`px-4 py-2 text-sm text-center text-textStandard cursor-pointer border border-borderSubtle hover:bg-bgSubtle rounded-full transition-all duration-150 ${className}`}
|
|
onClick={async () => {
|
|
// Always use the full text (longForm or original content) when clicked
|
|
await append(content);
|
|
}}
|
|
title={content.length > 100 ? content : undefined} // Show full text on hover if truncated
|
|
>
|
|
<div className="whitespace-normal">{displayText}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ContextBlockProps {
|
|
content: string;
|
|
}
|
|
|
|
function ContextBlock({ content }: ContextBlockProps) {
|
|
// Remove the "message:" prefix and trim whitespace
|
|
const displayText = content.replace(/^message:/i, '').trim();
|
|
|
|
return (
|
|
<div className="mb-6 p-4 bg-bgSubtle rounded-lg border border-borderStandard animate-[fadein_500ms_ease-in_forwards]">
|
|
<MarkdownContent content={displayText} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface SplashPillsProps {
|
|
append: (text: string) => void;
|
|
activities: string[] | null;
|
|
}
|
|
|
|
export default function SplashPills({ append, activities = null }: SplashPillsProps) {
|
|
// If custom activities are provided, use those instead of the default ones
|
|
const defaultPills = [
|
|
'What can you do?',
|
|
'Demo writing and reading files',
|
|
'Make a snake game in a new folder',
|
|
'List files in my current directory',
|
|
'Take a screenshot and summarize',
|
|
];
|
|
|
|
const pills = activities || defaultPills;
|
|
|
|
// Find any pill that starts with "message:"
|
|
const messagePillIndex = pills.findIndex((pill) => pill.toLowerCase().startsWith('message:'));
|
|
|
|
// Extract the message pill and the remaining pills
|
|
const messagePill = messagePillIndex >= 0 ? pills[messagePillIndex] : null;
|
|
const remainingPills =
|
|
messagePillIndex >= 0
|
|
? [...pills.slice(0, messagePillIndex), ...pills.slice(messagePillIndex + 1)]
|
|
: pills;
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
{messagePill && <ContextBlock content={messagePill} />}
|
|
|
|
<div className="flex flex-wrap gap-2 animate-[fadein_500ms_ease-in_forwards]">
|
|
{remainingPills.map((content, index) => (
|
|
<SplashPill key={index} content={content} append={append} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|