mirror of https://github.com/kortix-ai/suna.git
wip: standardize desing
This commit is contained in:
Vukasin
marko-kraemer
parent
f779c9f704
commit
8c158f910f
|
|
@ -196,9 +196,9 @@ export const Examples = ({
|
|||
onClick={() => onSelectPrompt && onSelectPrompt(prompt.query)}
|
||||
>
|
||||
<CardHeader className="p-2 grid-rows-1">
|
||||
<div className="flex items-start justify-center gap-1.5">
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
{React.cloneElement(prompt.icon as React.ReactElement, { size: 14 })}
|
||||
<div className="flex items-center justify-center gap-1.5">
|
||||
<div className="flex-shrink-0">
|
||||
{React.cloneElement(prompt.icon as React.ReactElement, { size: 14, })}
|
||||
</div>
|
||||
<CardTitle className="font-normal group-hover:text-foreground transition-all text-muted-foreground text-xs leading-relaxed line-clamp-3">
|
||||
{prompt.title}
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@ export function NavUserWithTeams({
|
|||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
|
||||
className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
|
||||
side={isMobile ? 'bottom' : 'top'}
|
||||
align="start"
|
||||
sideOffset={4}
|
||||
|
|
|
|||
|
|
@ -34,9 +34,6 @@ const ChatDropdown = () => {
|
|||
align="end"
|
||||
className="w-64 p-0 border"
|
||||
sideOffset={4}
|
||||
style={{
|
||||
borderRadius: '16px'
|
||||
}}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent border-b m-0"
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
|
|||
isVisible={showToolPreview}
|
||||
/>
|
||||
<Card
|
||||
className="-mb-2 bg-red-400 shadow-none w-full max-w-4xl mx-auto bg-transparent border-none rounded-3xl overflow-hidden"
|
||||
className="-mb-2 shadow-none w-full max-w-4xl mx-auto bg-transparent border-none rounded-3xl overflow-hidden"
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={(e) => {
|
||||
|
|
|
|||
|
|
@ -179,15 +179,18 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
|
|||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="px-2 text-xs font-medium"
|
||||
className="px-3 py-2 text-sm font-medium hover:bg-accent"
|
||||
disabled={disabled}
|
||||
style={{
|
||||
borderRadius: '12px'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
{agentDisplay.icon}
|
||||
<span className="hidden sm:inline-block truncate max-w-[80px]">
|
||||
{agentDisplay.name}
|
||||
</span>
|
||||
<ChevronDown className="h-3 w-3 opacity-50" />
|
||||
<ChevronDown size={14} className="opacity-50" />
|
||||
</div>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
|
@ -198,10 +201,17 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
|
|||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
<DropdownMenuContent align="end" className="w-80 p-0" sideOffset={4}>
|
||||
<div className="p-3 border-b">
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="w-80 p-0 border"
|
||||
sideOffset={4}
|
||||
style={{
|
||||
borderRadius: '16px'
|
||||
}}
|
||||
>
|
||||
<div className="p-4 border-b">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
|
|
@ -209,17 +219,18 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
|
|||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={handleSearchInputKeyDown}
|
||||
className="w-full pl-8 pr-3 py-2 text-sm bg-transparent border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
className="w-full pl-10 pr-3 py-2 text-sm bg-transparent border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent">
|
||||
{agentsLoading ? (
|
||||
<div className="p-3 text-sm text-muted-foreground text-center">
|
||||
<div className="px-4 py-3 text-sm text-muted-foreground text-center">
|
||||
Loading agents...
|
||||
</div>
|
||||
) : filteredAgents.length === 0 ? (
|
||||
<div className="p-3 text-sm text-muted-foreground text-center">
|
||||
<div className="px-4 py-3 text-sm text-muted-foreground text-center">
|
||||
No agents found
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -231,37 +242,40 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
|
|||
<TooltipProvider key={agent.id || 'default'}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="w-full">
|
||||
<DropdownMenuItem
|
||||
className={cn(
|
||||
"text-sm mx-2 my-0.5 flex items-center justify-between cursor-pointer",
|
||||
isHighlighted && "bg-accent",
|
||||
)}
|
||||
onClick={() => handleAgentSelect(agent.id)}
|
||||
onMouseEnter={() => setHighlightedIndex(index)}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent border-b m-0",
|
||||
isHighlighted && "bg-accent",
|
||||
index === filteredAgents.length - 1 && "border-b-0"
|
||||
)}
|
||||
style={{
|
||||
borderRadius: '0'
|
||||
}}
|
||||
onClick={() => handleAgentSelect(agent.id)}
|
||||
onMouseEnter={() => setHighlightedIndex(index)}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
{agent.icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-shrink-0">
|
||||
{agent.icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm truncate">
|
||||
{agent.name}
|
||||
</span>
|
||||
{agent.type === 'custom' && (
|
||||
<Badge variant="outline" className="text-xs px-1 py-0 h-4">
|
||||
custom
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-semibold text-sm truncate">
|
||||
{agent.name}
|
||||
</span>
|
||||
{agent.type === 'custom' && (
|
||||
<Badge variant="outline" className="text-xs px-1 py-0 h-4">
|
||||
custom
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{isSelected && (
|
||||
<Check className="h-4 w-4 text-blue-500 flex-shrink-0" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
{agent.description}
|
||||
</span>
|
||||
</div>
|
||||
{isSelected && (
|
||||
<Check className="h-4 w-4 text-blue-500 flex-shrink-0" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="left" className="text-xs max-w-xs">
|
||||
<p className="truncate">{truncateString(agent.description, 35)}</p>
|
||||
|
|
@ -272,27 +286,28 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
|
|||
})
|
||||
)}
|
||||
</div>
|
||||
<div className="border-t p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
|
||||
<div className="border-t p-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleExploreAll}
|
||||
className="text-xs"
|
||||
className="text-xs flex items-center gap-2"
|
||||
>
|
||||
<Search className="h-3 w-3" />
|
||||
Explore All
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleMoreOptions}
|
||||
className="text-xs"
|
||||
className="text-xs flex items-center gap-1"
|
||||
>
|
||||
<Settings className="h-3 w-3" />
|
||||
More Options
|
||||
<ChevronRight className="h-3 w-3 ml-1" />
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export const FloatingToolPreview: React.FC<FloatingToolPreviewProps> = ({
|
|||
setIsExpanding(false);
|
||||
}
|
||||
}, [isVisible]);
|
||||
|
||||
|
||||
if (!currentToolCall || totalCalls === 0) return null;
|
||||
|
||||
const toolName = currentToolCall.assistantCall?.name || 'Tool Call';
|
||||
|
|
@ -106,19 +106,19 @@ export const FloatingToolPreview: React.FC<FloatingToolPreviewProps> = ({
|
|||
layoutId={CONTENT_LAYOUT_ID}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
whileTap={{ scale: 0.99 }}
|
||||
className="bg-sidebar border border-border rounded-2xl p-2 w-full cursor-pointer group"
|
||||
className="bg-sidebar border border-border rounded-3xl p-2 w-full cursor-pointer group"
|
||||
onClick={handleClick}
|
||||
style={{ opacity: isExpanding ? 0 : 1 }}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
<motion.div
|
||||
<motion.div
|
||||
layoutId="tool-icon"
|
||||
className={cn(
|
||||
"w-10 h-10 rounded-xl flex items-center justify-center",
|
||||
isStreaming
|
||||
? "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800"
|
||||
: isSuccess
|
||||
"w-10 h-10 rounded-2xl flex items-center justify-center",
|
||||
isStreaming
|
||||
? "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800"
|
||||
: isSuccess
|
||||
? "bg-green-50 dark:bg-green-900/20 border border-green-300 dark:border-green-800"
|
||||
: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"
|
||||
)}
|
||||
|
|
@ -131,7 +131,7 @@ export const FloatingToolPreview: React.FC<FloatingToolPreviewProps> = ({
|
|||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex-1 min-w-0" style={{ opacity: isExpanding ? 0 : 1 }}>
|
||||
<motion.div layoutId="tool-title" className="flex items-center gap-2 mb-1">
|
||||
<h4 className="text-sm font-medium text-foreground truncate">
|
||||
|
|
@ -143,27 +143,27 @@ export const FloatingToolPreview: React.FC<FloatingToolPreviewProps> = ({
|
|||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
|
||||
<motion.div layoutId="tool-status" className="flex items-center gap-2">
|
||||
<div className={cn(
|
||||
"w-2 h-2 rounded-full",
|
||||
isStreaming
|
||||
? "bg-blue-500 animate-pulse"
|
||||
: isSuccess
|
||||
? "bg-green-500"
|
||||
isStreaming
|
||||
? "bg-blue-500 animate-pulse"
|
||||
: isSuccess
|
||||
? "bg-green-500"
|
||||
: "bg-red-500"
|
||||
)} />
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
{isStreaming
|
||||
? `${agentName || 'Suna'} is working...`
|
||||
: isSuccess
|
||||
? "Success"
|
||||
{isStreaming
|
||||
? `${agentName || 'Suna'} is working...`
|
||||
: isSuccess
|
||||
? "Success"
|
||||
: "Failed"
|
||||
}
|
||||
</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
|
||||
<Button value='ghost' className="bg-transparent hover:bg-transparent flex-shrink-0" style={{ opacity: isExpanding ? 0 : 1 }}>
|
||||
<Maximize2 className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -110,11 +110,11 @@ export function renderMarkdownContent(
|
|||
if (isNewXmlFormat(content)) {
|
||||
const contentParts: React.ReactNode[] = [];
|
||||
let lastIndex = 0;
|
||||
|
||||
|
||||
// Find all function_calls blocks
|
||||
const functionCallsRegex = /<function_calls>([\s\S]*?)<\/function_calls>/gi;
|
||||
let match;
|
||||
|
||||
|
||||
while ((match = functionCallsRegex.exec(content)) !== null) {
|
||||
// Add text before the function_calls block
|
||||
if (match.index > lastIndex) {
|
||||
|
|
@ -127,22 +127,22 @@ export function renderMarkdownContent(
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Parse the tool calls in this block
|
||||
const toolCalls = parseXmlToolCalls(match[0]);
|
||||
|
||||
|
||||
toolCalls.forEach((toolCall, index) => {
|
||||
const toolName = toolCall.functionName.replace(/_/g, '-');
|
||||
|
||||
|
||||
if (toolName === 'ask') {
|
||||
// Handle ask tool specially - extract text and attachments
|
||||
const askText = toolCall.parameters.text || '';
|
||||
const attachments = toolCall.parameters.attachments || [];
|
||||
|
||||
|
||||
// Convert single attachment to array for consistent handling
|
||||
const attachmentArray = Array.isArray(attachments) ? attachments :
|
||||
(typeof attachments === 'string' ? attachments.split(',').map(a => a.trim()) : []);
|
||||
|
||||
const attachmentArray = Array.isArray(attachments) ? attachments :
|
||||
(typeof attachments === 'string' ? attachments.split(',').map(a => a.trim()) : []);
|
||||
|
||||
// Render ask tool content with attachment UI
|
||||
contentParts.push(
|
||||
<div key={`ask-${match.index}-${index}`} className="space-y-3">
|
||||
|
|
@ -152,7 +152,7 @@ export function renderMarkdownContent(
|
|||
);
|
||||
} else {
|
||||
const IconComponent = getToolIcon(toolName);
|
||||
|
||||
|
||||
// Extract primary parameter for display
|
||||
let paramDisplay = '';
|
||||
if (toolCall.parameters.file_path) {
|
||||
|
|
@ -164,12 +164,12 @@ export function renderMarkdownContent(
|
|||
} else if (toolCall.parameters.url) {
|
||||
paramDisplay = toolCall.parameters.url;
|
||||
}
|
||||
|
||||
|
||||
contentParts.push(
|
||||
<div key={`tool-${match.index}-${index}`} className="my-1">
|
||||
<button
|
||||
onClick={() => handleToolClick(messageId, toolName)}
|
||||
className="inline-flex items-center gap-1.5 py-1 px-1 text-xs text-muted-foreground bg-muted hover:bg-muted/80 rounded-md transition-colors cursor-pointer border border-neutral-200 dark:border-neutral-700/50"
|
||||
className="inline-flex items-center gap-1.5 py-1 px-1 text-xs text-muted-foreground bg-muted hover:bg-muted/80 rounded-lg transition-colors cursor-pointer border border-neutral-200 dark:border-neutral-700/50"
|
||||
>
|
||||
<div className='border-2 bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800 flex items-center justify-center p-0.5 rounded-sm border-neutral-400/20 dark:border-neutral-600'>
|
||||
<IconComponent className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
|
||||
|
|
@ -181,10 +181,10 @@ export function renderMarkdownContent(
|
|||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
lastIndex = match.index + match[0].length;
|
||||
}
|
||||
|
||||
|
||||
// Add any remaining text after the last function_calls block
|
||||
if (lastIndex < content.length) {
|
||||
const remainingText = content.substring(lastIndex);
|
||||
|
|
@ -196,7 +196,7 @@ export function renderMarkdownContent(
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return contentParts.length > 0 ? contentParts : <Markdown className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none break-words">{content}</Markdown>;
|
||||
}
|
||||
|
||||
|
|
@ -251,7 +251,7 @@ export function renderMarkdownContent(
|
|||
<div key={toolCallKey} className="my-1">
|
||||
<button
|
||||
onClick={() => handleToolClick(messageId, toolName)}
|
||||
className="inline-flex items-center gap-1.5 py-1 px-1 text-xs text-muted-foreground bg-muted hover:bg-muted/80 rounded-md transition-colors cursor-pointer border border-neutral-200 dark:border-neutral-700/50"
|
||||
className="inline-flex items-center gap-1.5 py-1 px-1 text-xs text-muted-foreground bg-muted hover:bg-muted/80 rounded-lg transition-colors cursor-pointer border border-neutral-200 dark:border-neutral-700/50"
|
||||
>
|
||||
<div className='border-2 bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800 flex items-center justify-center p-0.5 rounded-sm border-neutral-400/20 dark:border-neutral-600'>
|
||||
<IconComponent className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
|
||||
|
|
@ -260,7 +260,7 @@ export function renderMarkdownContent(
|
|||
{paramDisplay && <span className="ml-1 text-muted-foreground truncate max-w-[200px]" title={paramDisplay}>{paramDisplay}</span>}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
lastIndex = xmlRegex.lastIndex;
|
||||
}
|
||||
|
|
@ -328,7 +328,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
// React Query file preloader
|
||||
const { preloadFiles } = useFilePreloader();
|
||||
|
||||
const containerClassName = isPreviewMode
|
||||
const containerClassName = isPreviewMode
|
||||
? "flex-1 overflow-y-auto scrollbar-thin scrollbar-track-secondary/0 scrollbar-thumb-primary/10 scrollbar-thumb-rounded-full hover:scrollbar-thumb-primary/10 px-6 py-4 pb-72"
|
||||
: "flex-1 overflow-y-auto scrollbar-thin scrollbar-track-secondary/0 scrollbar-thumb-primary/10 scrollbar-thumb-rounded-full hover:scrollbar-thumb-primary/10 px-6 py-4 pb-72 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60";
|
||||
|
||||
|
|
@ -428,14 +428,14 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
groupedMessages.push({ type: 'user', messages: [message], key });
|
||||
} else if (messageType === 'assistant' || messageType === 'tool' || messageType === 'browser_state') {
|
||||
// Check if we can add to existing assistant group (same agent)
|
||||
const canAddToExistingGroup = currentGroup &&
|
||||
const canAddToExistingGroup = currentGroup &&
|
||||
currentGroup.type === 'assistant_group' &&
|
||||
(() => {
|
||||
// For assistant messages, check if agent matches
|
||||
if (messageType === 'assistant') {
|
||||
const lastAssistantMsg = currentGroup.messages.findLast(m => m.type === 'assistant');
|
||||
if (!lastAssistantMsg) return true; // No assistant message yet, can add
|
||||
|
||||
|
||||
// Compare agent info - both null/undefined should be treated as same (default agent)
|
||||
const currentAgentId = message.agent_id;
|
||||
const lastAgentId = lastAssistantMsg.agent_id;
|
||||
|
|
@ -567,7 +567,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
if (debugMode) {
|
||||
return (
|
||||
<div key={group.key} className="flex justify-end">
|
||||
<div className="flex max-w-[85%] rounded-xl bg-primary/10 px-4 py-3 break-words overflow-hidden">
|
||||
<div className="flex max-w-[85%] rounded-2xl bg-primary/10 px-4 py-3 break-words overflow-hidden">
|
||||
<pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto min-w-0 flex-1">
|
||||
{message.content}
|
||||
</pre>
|
||||
|
|
@ -590,7 +590,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
|
||||
return (
|
||||
<div key={group.key} className="flex justify-end">
|
||||
<div className="flex max-w-[85%] rounded-xl bg-primary/10 px-4 py-3 break-words overflow-hidden">
|
||||
<div className="flex max-w-[85%] rounded-2xl bg-primary/10 px-4 py-3 break-words overflow-hidden">
|
||||
<div className="space-y-3 min-w-0 flex-1">
|
||||
{cleanContent && (
|
||||
<Markdown className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none [&>:first-child]:mt-0 prose-headings:mt-3 break-words overflow-wrap-anywhere">{cleanContent}</Markdown>
|
||||
|
|
@ -609,14 +609,14 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
<div className="flex items-center">
|
||||
<div className="rounded-md flex items-center justify-center">
|
||||
{(() => {
|
||||
const firstAssistantWithAgent = group.messages.find(msg =>
|
||||
const firstAssistantWithAgent = group.messages.find(msg =>
|
||||
msg.type === 'assistant' && (msg.agents?.avatar || msg.agents?.avatar_color)
|
||||
);
|
||||
if (firstAssistantWithAgent?.agents?.avatar) {
|
||||
const avatar = firstAssistantWithAgent.agents.avatar;
|
||||
const color = firstAssistantWithAgent.agents.avatar_color;
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
className="h-4 w-5 flex items-center justify-center rounded text-xs"
|
||||
>
|
||||
<span className="text-lg">{avatar}</span>
|
||||
|
|
@ -628,7 +628,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
</div>
|
||||
<p className='ml-2 text-sm text-muted-foreground'>
|
||||
{(() => {
|
||||
const firstAssistantWithAgent = group.messages.find(msg =>
|
||||
const firstAssistantWithAgent = group.messages.find(msg =>
|
||||
msg.type === 'assistant' && msg.agents?.name
|
||||
);
|
||||
if (firstAssistantWithAgent?.agents?.name) {
|
||||
|
|
@ -638,7 +638,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
})()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Message content - ALL messages in the group */}
|
||||
<div className="flex max-w-[90%] rounded-lg text-sm break-words overflow-hidden">
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
|
|
@ -690,7 +690,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
if (message.type === 'assistant') {
|
||||
const parsedContent = safeJsonParse<ParsedContent>(message.content, {});
|
||||
const msgKey = message.message_id || `submsg-assistant-${msgIndex}`;
|
||||
|
||||
|
||||
if (!parsedContent.content) return;
|
||||
|
||||
const renderedContent = renderMarkdownContent(
|
||||
|
|
@ -710,7 +710,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
assistantMessageCount++; // Increment after adding the element
|
||||
}
|
||||
});
|
||||
|
|
@ -877,11 +877,11 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
>
|
||||
<CircleDashed className="h-3.5 w-3.5 text-primary flex-shrink-0 animate-spin animation-duration-2000" />
|
||||
<span className="font-mono text-xs text-primary">
|
||||
{detectedTag === 'function_calls' ?
|
||||
{detectedTag === 'function_calls' ?
|
||||
(() => {
|
||||
const extractedToolName = extractToolNameFromStream(streamingText);
|
||||
return extractedToolName ? getUserFriendlyToolName(extractedToolName) : 'Using Tool...';
|
||||
})() :
|
||||
})() :
|
||||
getUserFriendlyToolName(detectedTag)
|
||||
}
|
||||
</span>
|
||||
|
|
@ -916,7 +916,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
</div>
|
||||
<p className='ml-2 text-sm text-muted-foreground'>{agentName || 'Suna'}</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Loader content */}
|
||||
<div className="space-y-2 w-full h-12">
|
||||
<AgentLoader />
|
||||
|
|
@ -936,7 +936,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
</div>
|
||||
<p className='ml-2 text-sm text-muted-foreground'>{agentName || 'Suna'}</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Tool call content */}
|
||||
<div className="space-y-2">
|
||||
<div className="animate-shimmer inline-flex items-center gap-1.5 py-1.5 px-3 text-xs font-medium text-primary bg-primary/10 rounded-md border border-primary/20">
|
||||
|
|
@ -961,7 +961,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
|
|||
</div>
|
||||
<p className='ml-2 text-sm text-muted-foreground'>{agentName || 'Suna'}</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Streaming indicator content */}
|
||||
<div className="max-w-[90%] px-4 py-3 text-sm">
|
||||
<div className="flex items-center gap-1.5 py-1">
|
||||
|
|
|
|||
|
|
@ -294,7 +294,7 @@ export function FileAttachment({
|
|||
<button
|
||||
onClick={handleClick}
|
||||
className={cn(
|
||||
"group relative min-h-[54px] rounded-xl cursor-pointer",
|
||||
"group relative min-h-[54px] rounded-2xl cursor-pointer",
|
||||
"border border-black/10 dark:border-white/10",
|
||||
"bg-black/5 dark:bg-black/20",
|
||||
"p-0 overflow-hidden", // No padding, content touches borders
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ function AlertDialogContent({
|
|||
<AlertDialogPrimitive.Content
|
||||
data-slot="alert-dialog-content"
|
||||
className={cn(
|
||||
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
|
||||
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border p-6 shadow-lg duration-200 sm:max-w-lg',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
|
|||
import { cn } from '@/lib/utils';
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
|
@ -19,9 +19,9 @@ const buttonVariants = cva(
|
|||
'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
|
||||
ghost:
|
||||
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||
node_outline:
|
||||
node_outline:
|
||||
'bg-transparent border border-primary/10',
|
||||
node_secondary:
|
||||
node_secondary:
|
||||
'px-0 bg-transparent hover:opacity-60',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ function DialogContent({
|
|||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200',
|
||||
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border p-6 shadow-lg duration-200',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function DropdownMenuContent({
|
|||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
|
||||
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border p-1 shadow-md',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
Loading…
Reference in New Issue