Skip to content

Commit 311b2ad

Browse files
husseinmozannarhusseinmozannar
committed
final UI changes
1 parent 9605f0f commit 311b2ad

File tree

3 files changed

+53
-50
lines changed

3 files changed

+53
-50
lines changed

‎frontend/src/components/views/chat/rendermessage.tsx‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,10 @@ interface RenderStepExecutionProps {
7272

7373
interface ParsedContent {
7474
text:
75-
| string
76-
| FunctionCall[]
77-
| (string | ImageContent)[]
78-
| FunctionExecutionResult[];
75+
| string
76+
| FunctionCall[]
77+
| (string | ImageContent)[]
78+
| FunctionExecutionResult[];
7979
metadata?: Record<string, string>;
8080
plan?: IPlanStep[];
8181
}
@@ -191,7 +191,7 @@ const parseorchestratorContent = (
191191
if (messageUtils.isStepExecution(metadata)) {
192192
return { type: "step-execution" as const, content: parsedContent };
193193
}
194-
} catch {}
194+
} catch { }
195195

196196
return { type: "default" as const, content };
197197
};
@@ -297,7 +297,7 @@ const RenderToolResult: React.FC<{ content: FunctionExecutionResult[] }> = memo(
297297
return (
298298
<div key={result.call_id} className="rounded p-2">
299299
<div className="font-medium">Result ID: {result.call_id}</div>
300-
<div
300+
<div
301301
className="cursor-pointer hover:bg-secondary/50 rounded p-1"
302302
onClick={() => toggleExpand(result.call_id)}
303303
>
@@ -664,9 +664,9 @@ const RenderUserMessage: React.FC<{
664664
<PlanView
665665
task={""}
666666
plan={parsedContent.plan}
667-
setPlan={() => {}} // No-op since it's read-only
667+
setPlan={() => { }} // No-op since it's read-only
668668
viewOnly={true}
669-
onSavePlan={() => {}} // No-op since it's read-only
669+
onSavePlan={() => { }} // No-op since it's read-only
670670
/>
671671
)}
672672
</div>
@@ -783,29 +783,25 @@ export const RenderMessage: React.FC<MessageProps> = memo(
783783

784784
return (
785785
<div
786-
className={`relative group mb-3 ${className} w-full break-words ${
787-
hidden &&
788-
(!orchestratorContent ||
789-
orchestratorContent.type !== "step-execution")
786+
className={`relative group mb-3 ${className} w-full break-words ${hidden &&
787+
(!orchestratorContent ||
788+
orchestratorContent.type !== "step-execution")
790789
? "hidden"
791790
: ""
792-
}`}
791+
}`}
793792
>
794793
<div
795-
className={`flex ${
796-
isUser || isUserProxy ? "justify-end" : "justify-start"
797-
} items-start w-full transition-all duration-200`}
794+
className={`flex ${isUser || isUserProxy ? "justify-end" : "justify-start"
795+
} items-start w-full transition-all duration-200`}
798796
>
799797
<div
800-
className={`${
801-
isUser || isUserProxy
802-
? `text-primary rounded-2xl bg-tertiary rounded-tr-sm px-4 py-2 ${
803-
parsedContent.plan && parsedContent.plan.length > 0
804-
? "w-[80%]"
805-
: "max-w-[80%]"
806-
}`
798+
className={`${isUser || isUserProxy
799+
? `text-primary rounded-2xl bg-tertiary rounded-tr-sm px-4 py-2 ${parsedContent.plan && parsedContent.plan.length > 0
800+
? "w-[80%]"
801+
: "max-w-[80%]"
802+
}`
807803
: "w-full text-primary"
808-
} break-words overflow-hidden`}
804+
} break-words overflow-hidden`}
809805
>
810806
{/* Show user message content first */}
811807
{(isUser || isUserProxy) && (

‎frontend/src/components/views/chat/rendersentinelstep.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const RenderSentinelStep: React.FC<RenderSentinelStepProps> = ({
3232
}) => {
3333
const [currentCheckIndex, setCurrentCheckIndex] = useState(0);
3434
const [checks, setChecks] = useState<SentinelCheck[]>([]);
35-
const [expandedCheck, setExpandedCheck] = useState<number | null>(null);
35+
const [collapsedChecks, setCollapsedChecks] = useState<Set<number>>(new Set());
3636
const [totalChecks, setTotalChecks] = useState(0);
3737
const [runtime, setRuntime] = useState(0);
3838
const [currentStatus, setCurrentStatus] = useState<"checking" | "sleeping" | "complete">("checking");
@@ -127,9 +127,9 @@ const RenderSentinelStep: React.FC<RenderSentinelStepProps> = ({
127127
const check1Messages = sentinelMessages.filter(msg => {
128128
const msgCheckNumber = parseInt(msg.config.metadata?.check_number || "0");
129129
return msgCheckNumber === 1 &&
130-
msg.config.metadata?.type !== "sentinel_sleeping" &&
131-
msg.config.metadata?.type !== "sentinel_complete" &&
132-
msg.config.metadata?.type !== "sentinel_status";
130+
msg.config.metadata?.type !== "sentinel_sleeping" &&
131+
msg.config.metadata?.type !== "sentinel_complete" &&
132+
msg.config.metadata?.type !== "sentinel_status";
133133
});
134134

135135
if (!checkMap.has(1)) {
@@ -176,6 +176,9 @@ const RenderSentinelStep: React.FC<RenderSentinelStepProps> = ({
176176
return () => clearInterval(interval);
177177
}, [currentStatus, sleepStartTimestamp, sleepDurationSeconds]);
178178

179+
// Helper to check if a check is expanded (expanded by default, collapsed if in set)
180+
const isCheckExpanded = (checkNumber: number) => !collapsedChecks.has(checkNumber);
181+
179182
const currentCheck = checks[currentCheckIndex];
180183

181184
const formatTime = (seconds: number): string => {
@@ -292,22 +295,28 @@ const RenderSentinelStep: React.FC<RenderSentinelStepProps> = ({
292295
<div className="space-y-2">
293296
<div className="text-sm">
294297
{currentCheck.reason ||
295-
`Check #${currentCheck.checkNumber} - Condition not yet satisfied`}
298+
`Actively Checking...`}
296299
</div>
297300

298301
{/* Expandable section for agent messages */}
299302
{currentCheck.messages.length > 0 && (
300303
<div className="mt-2">
301304
<button
302-
onClick={() => setExpandedCheck(
303-
expandedCheck === currentCheck.checkNumber ? null : currentCheck.checkNumber
304-
)}
305-
className="text-sm text-magenta-800 hover:text-magenta-900 underline"
305+
onClick={() => setCollapsedChecks((prev) => {
306+
const newSet = new Set(prev);
307+
if (newSet.has(currentCheck.checkNumber)) {
308+
newSet.delete(currentCheck.checkNumber);
309+
} else {
310+
newSet.add(currentCheck.checkNumber);
311+
}
312+
return newSet;
313+
})}
314+
className="text-magenta-800 hover:text-magenta-900 underline"
306315
>
307-
{expandedCheck === currentCheck.checkNumber ? "Hide" : "Show"} check steps ({currentCheck.messages.length})
316+
{isCheckExpanded(currentCheck.checkNumber) ? "Hide" : "Show"} check steps ({currentCheck.messages.length})
308317
</button>
309318

310-
{expandedCheck === currentCheck.checkNumber && (
319+
{isCheckExpanded(currentCheck.checkNumber) && (
311320
<div className="mt-2 space-y-1">
312321
{currentCheck.messages.map((msg, idx) => (
313322
<RenderMessage

‎frontend/src/components/views/chat/runview.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const RunView: React.FC<RunViewProps> = ({
101101

102102
// Track if user was at bottom before new messages
103103
const wasAtBottomRef = useRef(true);
104-
104+
105105
// Check if user is at bottom before messages change
106106
useEffect(() => {
107107
if (threadContainerRef.current) {
@@ -430,7 +430,7 @@ const RunView: React.FC<RunViewProps> = ({
430430
// delay for 100ms
431431
await new Promise((resolve) => setTimeout(resolve, 100));
432432
}
433-
} catch {}
433+
} catch { }
434434
}
435435
}
436436
continue;
@@ -454,11 +454,11 @@ const RunView: React.FC<RunViewProps> = ({
454454
await new Promise((resolve) => setTimeout(resolve, 100));
455455
}
456456
}
457-
} catch {}
457+
} catch { }
458458
}
459459
}
460460
}
461-
} catch {}
461+
} catch { }
462462
}
463463

464464
if (
@@ -556,8 +556,8 @@ const RunView: React.FC<RunViewProps> = ({
556556
// Find the most recent sentinel-related status message
557557
const sentinelStatusMessages = run.messages.filter(
558558
(msg) => msg.config.metadata?.type === "sentinel_status" ||
559-
msg.config.metadata?.type === "sentinel_sleeping" ||
560-
msg.config.metadata?.type === "sentinel_complete"
559+
msg.config.metadata?.type === "sentinel_sleeping" ||
560+
msg.config.metadata?.type === "sentinel_complete"
561561
);
562562

563563
if (sentinelStatusMessages.length === 0) return false;
@@ -577,7 +577,7 @@ const RunView: React.FC<RunViewProps> = ({
577577
const container = threadContainerRef.current;
578578
if (container) {
579579
const isNearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 100; // 100px threshold
580-
580+
581581
// Only scroll to approval buttons if user is near the bottom
582582
if (isNearBottom) {
583583
buttonsContainerRef.current?.scrollIntoView({
@@ -597,15 +597,14 @@ const RunView: React.FC<RunViewProps> = ({
597597
>
598598
{/* Messages section */}
599599
<div
600-
className={`items-start relative flex flex-col h-full ${
601-
showDetailViewer &&
602-
novncPort !== undefined &&
603-
!isDetailViewerMinimized
600+
className={`items-start relative flex flex-col h-full ${showDetailViewer &&
601+
novncPort !== undefined &&
602+
!isDetailViewerMinimized
604603
? detailViewerExpanded
605604
? "w-0"
606605
: "w-[50%]"
607606
: "w-full"
608-
} transition-all duration-300`}
607+
} transition-all duration-300`}
609608
>
610609
{/* Thread Section - use flex-1 for height, but remove overflow-y-auto */}
611610
<div className="w-full flex-1">
@@ -742,9 +741,8 @@ const RunView: React.FC<RunViewProps> = ({
742741
novncPort !== undefined &&
743742
!isDetailViewerMinimized && (
744743
<div
745-
className={`${
746-
detailViewerExpanded ? "w-full" : "w-[50%]"
747-
} self-start sticky top-0 h-full`}
744+
className={`${detailViewerExpanded ? "w-full" : "w-[50%]"
745+
} self-start sticky top-0 h-full`}
748746
>
749747
<div className="h-full flex-1">
750748
<DetailViewer

0 commit comments

Comments
 (0)