Skip to content

Commit 90a7a8d

Browse files
ulivzulivz
authored
feat(tarko): improve workspace header icons and raw mode spacing
Improved workspace header icons and optimized RAW mode spacing for better visual design: 1. Fixed workspace toggle icons: Changed UI mode to use eye icon (FiEye) and RAW mode to use code icon (FiCode) 2. Optimized RAW mode spacing: Reduced padding, margins, and icon sizes while maintaining elegant design 3. Enhanced JSON renderer: Default expand to level 1 for better UX Co-authored-by: ulivz <[email protected]>
1 parent 858c8c7 commit 90a7a8d

File tree

3 files changed

+34
-32
lines changed

3 files changed

+34
-32
lines changed

‎multimodal/tarko/agent-web-ui/src/common/components/JsonRenderer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ interface JsonItemProps {
1717
}
1818

1919
const JsonItem: React.FC<JsonItemProps> = ({ label, value, level = 0, isRoot = false }) => {
20-
const [isExpanded, setIsExpanded] = useState(level === 0); // Expand only root level
20+
const [isExpanded, setIsExpanded] = useState(level <= 1); // Expand root and first level
2121
const [copied, setCopied] = useState(false);
2222
const [isStringExpanded, setIsStringExpanded] = useState(false);
2323

‎multimodal/tarko/agent-web-ui/src/standalone/workspace/components/RawModeRenderer.tsx‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,20 @@ export const RawModeRenderer: React.FC<RawModeRendererProps> = ({ toolMapping })
1313
const { toolCall, toolResult } = toolMapping;
1414

1515
return (
16-
<div className="space-y-4 mt-4">
16+
<div className="space-y-3 mt-3">
1717
{/* Tool Call Section */}
1818
<motion.div
1919
initial={{ opacity: 0, y: 20 }}
2020
animate={{ opacity: 1, y: 0 }}
2121
className="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 rounded-2xl border border-slate-200/60 dark:border-slate-700/60 shadow-sm overflow-hidden"
2222
>
23-
<div className="flex items-center gap-4 px-6 py-4 bg-gradient-to-r from-indigo-500/5 to-blue-500/5 dark:from-indigo-400/10 dark:to-blue-400/10 border-b border-slate-200/50 dark:border-slate-700/50">
24-
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center shadow-lg">
25-
<FiPlay size={16} className="text-white ml-0.5" />
23+
<div className="flex items-center gap-3 px-4 py-3 bg-gradient-to-r from-indigo-500/5 to-blue-500/5 dark:from-indigo-400/10 dark:to-blue-400/10 border-b border-slate-200/50 dark:border-slate-700/50">
24+
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center shadow-md">
25+
<FiPlay size={14} className="text-white ml-0.5" />
2626
</div>
2727
<div className="flex-1">
28-
<h3 className="font-semibold text-slate-800 dark:text-slate-100 text-lg">Input</h3>
29-
<div className="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400 mt-1">
28+
<h3 className="font-semibold text-slate-800 dark:text-slate-100 text-base">Input</h3>
29+
<div className="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-400 mt-0.5">
3030
<div className="flex items-center gap-1.5">
3131
<FiClock size={11} />
3232
<span className="font-medium">{formatTimestamp(toolCall.timestamp, true)}</span>
@@ -38,23 +38,23 @@ export const RawModeRenderer: React.FC<RawModeRendererProps> = ({ toolMapping })
3838
</div>
3939
</div>
4040
</div>
41-
<div className="p-6">
42-
<div className="space-y-5">
41+
<div className="p-4">
42+
<div className="space-y-3">
4343
<div>
44-
<div className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3 flex items-center gap-2">
44+
<div className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2 flex items-center gap-2">
4545
<FiTerminal size={14} className="text-slate-500" />
4646
Tool
4747
</div>
48-
<div className="px-4 py-3 bg-white/60 dark:bg-slate-800/60 rounded-xl font-mono text-sm text-slate-800 dark:text-slate-200 border border-slate-200/40 dark:border-slate-700/40">
48+
<div className="px-3 py-2 bg-white/60 dark:bg-slate-800/60 rounded-lg font-mono text-sm text-slate-800 dark:text-slate-200 border border-slate-200/40 dark:border-slate-700/40">
4949
{toolCall.name}
5050
</div>
5151
</div>
5252
{toolCall.arguments && (
5353
<div>
54-
<div className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
54+
<div className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
5555
Parameters
5656
</div>
57-
<div className="bg-white/60 dark:bg-slate-800/60 rounded-xl p-4 border border-slate-200/40 dark:border-slate-700/40">
57+
<div className="bg-white/60 dark:bg-slate-800/60 rounded-lg p-3 border border-slate-200/40 dark:border-slate-700/40">
5858
<JsonRenderer data={toolCall.arguments} emptyMessage="No parameters provided" />
5959
</div>
6060
</div>
@@ -71,7 +71,7 @@ export const RawModeRenderer: React.FC<RawModeRendererProps> = ({ toolMapping })
7171
className="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 rounded-2xl border border-slate-200/60 dark:border-slate-700/60 shadow-sm overflow-hidden"
7272
>
7373
<div
74-
className={`flex items-center gap-4 px-6 py-4 border-b border-slate-200/50 dark:border-slate-700/50 ${
74+
className={`flex items-center gap-3 px-4 py-3 border-b border-slate-200/50 dark:border-slate-700/50 ${
7575
toolResult
7676
? toolResult.error
7777
? 'bg-gradient-to-r from-red-500/5 to-rose-500/5 dark:from-red-400/10 dark:to-rose-400/10'
@@ -80,7 +80,7 @@ export const RawModeRenderer: React.FC<RawModeRendererProps> = ({ toolMapping })
8080
}`}
8181
>
8282
<div
83-
className={`w-10 h-10 rounded-xl flex items-center justify-center shadow-lg ${
83+
className={`w-8 h-8 rounded-lg flex items-center justify-center shadow-md ${
8484
toolResult
8585
? toolResult.error
8686
? 'bg-gradient-to-br from-red-500 to-rose-600'
@@ -90,18 +90,18 @@ export const RawModeRenderer: React.FC<RawModeRendererProps> = ({ toolMapping })
9090
>
9191
{toolResult ? (
9292
toolResult.error ? (
93-
<FiXCircle size={16} className="text-white" />
93+
<FiXCircle size={14} className="text-white" />
9494
) : (
95-
<FiCheckCircle size={16} className="text-white" />
95+
<FiCheckCircle size={14} className="text-white" />
9696
)
9797
) : (
98-
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
98+
<div className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin" />
9999
)}
100100
</div>
101101
<div className="flex-1">
102-
<h3 className="font-semibold text-slate-800 dark:text-slate-100 text-lg">Output</h3>
102+
<h3 className="font-semibold text-slate-800 dark:text-slate-100 text-base">Output</h3>
103103
{toolResult ? (
104-
<div className="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400 mt-1">
104+
<div className="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-400 mt-0.5">
105105
<div className="flex items-center gap-1.5">
106106
<FiClock size={11} />
107107
<span className="font-medium">{formatTimestamp(toolResult.timestamp, true)}</span>
@@ -116,47 +116,47 @@ export const RawModeRenderer: React.FC<RawModeRendererProps> = ({ toolMapping })
116116
)}
117117
</div>
118118
) : (
119-
<div className="text-xs text-slate-500 dark:text-slate-400 mt-1">Processing...</div>
119+
<div className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Processing...</div>
120120
)}
121121
</div>
122122
</div>
123-
<div className="p-6">
123+
<div className="p-4">
124124
{toolResult ? (
125-
<div className="space-y-5">
125+
<div className="space-y-3">
126126
{toolResult.error && (
127127
<div>
128-
<div className="text-sm font-semibold text-red-700 dark:text-red-300 mb-3 flex items-center gap-2">
128+
<div className="text-sm font-semibold text-red-700 dark:text-red-300 mb-2 flex items-center gap-2">
129129
<FiXCircle size={14} className="text-red-500" />
130130
Error
131131
</div>
132-
<div className="px-4 py-3 bg-red-50/80 dark:bg-red-900/20 rounded-xl text-sm text-red-800 dark:text-red-200 font-mono border border-red-200/40 dark:border-red-800/40">
132+
<div className="px-3 py-2 bg-red-50/80 dark:bg-red-900/20 rounded-lg text-sm text-red-800 dark:text-red-200 font-mono border border-red-200/40 dark:border-red-800/40">
133133
{toolResult.error}
134134
</div>
135135
</div>
136136
)}
137137
<div>
138-
<div className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
138+
<div className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
139139
Response
140140
</div>
141-
<div className="bg-white/60 dark:bg-slate-800/60 rounded-xl p-4 border border-slate-200/40 dark:border-slate-700/40">
141+
<div className="bg-white/60 dark:bg-slate-800/60 rounded-lg p-3 border border-slate-200/40 dark:border-slate-700/40">
142142
<JsonRenderer data={toolResult.content} emptyMessage="No response data" />
143143
</div>
144144
</div>
145145
{toolResult._extra && (
146146
<div>
147-
<div className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
147+
<div className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
148148
Metadata
149149
</div>
150-
<div className="bg-white/60 dark:bg-slate-800/60 rounded-xl p-4 border border-slate-200/40 dark:border-slate-700/40">
150+
<div className="bg-white/60 dark:bg-slate-800/60 rounded-lg p-3 border border-slate-200/40 dark:border-slate-700/40">
151151
<JsonRenderer data={toolResult._extra} emptyMessage="No metadata" />
152152
</div>
153153
</div>
154154
)}
155155
</div>
156156
) : (
157-
<div className="flex items-center justify-center py-12">
157+
<div className="flex items-center justify-center py-8">
158158
<div className="text-center">
159-
<div className="w-8 h-8 border-2 border-slate-300 dark:border-slate-600 border-t-slate-600 dark:border-t-slate-300 rounded-full animate-spin mx-auto mb-3"></div>
159+
<div className="w-6 h-6 border-2 border-slate-300 dark:border-slate-600 border-t-slate-600 dark:border-t-slate-300 rounded-full animate-spin mx-auto mb-2"></div>
160160
<p className="text-sm text-slate-600 dark:text-slate-400 font-medium">
161161
Processing request...
162162
</p>

‎multimodal/tarko/agent-web-ui/src/standalone/workspace/components/WorkspaceHeader.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { motion } from 'framer-motion';
3-
import { FiArrowLeft, FiBookOpen, FiMaximize, FiMonitor } from 'react-icons/fi';
3+
import { FiArrowLeft, FiBookOpen, FiMaximize, FiMonitor, FiEye, FiCode } from 'react-icons/fi';
44
import { formatTimestamp } from '@/common/utils/formatters';
55
import { useTool } from '@/common/hooks/useTool';
66
import { normalizeFilePath } from '@/common/utils/pathNormalizer';
@@ -134,6 +134,8 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
134134
rightValue="raw"
135135
leftLabel="UI"
136136
rightLabel="RAW"
137+
leftIcon={<FiEye size={12} />}
138+
rightIcon={<FiCode size={12} />}
137139
/>
138140
)}
139141

0 commit comments

Comments
 (0)