refactor(ui): improve message visibility filtering and optimize bundle
- Refactor message filtering logic across AgentExecution, ClaudeCodeSession, SessionOutputViewer, and StreamMessage components to better handle visibility of user messages with tool results - Replace inefficient every() loop with for-loop for better performance when checking message content visibility - Add renderedSomething tracking in StreamMessage to prevent rendering empty components - Optimize SessionOutputViewer with useMemo for displayableMessages filtering - Remove unused GitHub API response fields (url, html_url, git_url) in Rust agents command - Add Vite build configuration with manual code splitting for better bundle optimization - Remove TypeScript expect-error comment for process global variable These changes improve UI performance by reducing unnecessary re-renders and bundle size through better code splitting.
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { X, Maximize2, Minimize2, Copy, RefreshCw, RotateCcw, ChevronDown } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -282,6 +282,47 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
|
||||
loadOutput();
|
||||
}, [session.id]);
|
||||
|
||||
const displayableMessages = useMemo(() => {
|
||||
return messages.filter((message, index) => {
|
||||
if (message.isMeta && !message.leafUuid && !message.summary) return false;
|
||||
|
||||
if (message.type === "user" && message.message) {
|
||||
if (message.isMeta) return false;
|
||||
|
||||
const msg = message.message;
|
||||
if (!msg.content || (Array.isArray(msg.content) && msg.content.length === 0)) return false;
|
||||
|
||||
if (Array.isArray(msg.content)) {
|
||||
let hasVisibleContent = false;
|
||||
for (const content of msg.content) {
|
||||
if (content.type === "text") { hasVisibleContent = true; break; }
|
||||
if (content.type === "tool_result") {
|
||||
let willBeSkipped = false;
|
||||
if (content.tool_use_id) {
|
||||
for (let i = index - 1; i >= 0; i--) {
|
||||
const prevMsg = messages[i];
|
||||
if (prevMsg.type === 'assistant' && prevMsg.message?.content && Array.isArray(prevMsg.message.content)) {
|
||||
const toolUse = prevMsg.message.content.find((c: any) => c.type === 'tool_use' && c.id === content.tool_use_id);
|
||||
if (toolUse) {
|
||||
const toolName = toolUse.name?.toLowerCase();
|
||||
const toolsWithWidgets = ['task','edit','multiedit','todowrite','ls','read','glob','bash','write','grep'];
|
||||
if (toolsWithWidgets.includes(toolName) || toolUse.name?.startsWith('mcp__')) {
|
||||
willBeSkipped = true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!willBeSkipped) { hasVisibleContent = true; break; }
|
||||
}
|
||||
}
|
||||
if (!hasVisibleContent) return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [messages]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -432,7 +473,7 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
|
||||
) : (
|
||||
<>
|
||||
<AnimatePresence>
|
||||
{messages.map((message: ClaudeStreamMessage, index: number) => (
|
||||
{displayableMessages.map((message: ClaudeStreamMessage, index: number) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
@@ -556,7 +597,7 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
|
||||
) : (
|
||||
<>
|
||||
<AnimatePresence>
|
||||
{messages.map((message: ClaudeStreamMessage, index: number) => (
|
||||
{displayableMessages.map((message: ClaudeStreamMessage, index: number) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
|
Reference in New Issue
Block a user