Skip to content

Commit 37babcc

Browse files
ulivzulivz
authored
feat(tarko-agent-ui): welcome cards (#1643)
1 parent c3e8513 commit 37babcc

File tree

12 files changed

+859
-170
lines changed

12 files changed

+859
-170
lines changed

‎multimodal/omni-tars/omni-agent/src/index.ts‎

Lines changed: 99 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,105 @@ export default class OmniTARSAgent extends ComposableAgent {
1515
logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/zyha-aulnh/ljhwZthlaukjlkulzlp/icon.png',
1616
title: 'Omni Agent',
1717
subtitle: 'Offering seamless integration with a wide range of real-world tools.',
18-
welcomTitle: 'A multimodal AI agent',
19-
welcomePrompts: [
20-
'Search for the latest GUI Agent papers',
21-
'Find information about UI TARS',
22-
'Tell me the top 5 most popular projects on ProductHunt today',
23-
'Write hello world using python',
24-
'Use jupyter to calculate which is greater in 9.11 and 9.9',
25-
'Write code to reproduce seed-tars.com',
26-
'Summary seed-tars.com/1.5',
27-
'Write a python code to download the paper https://arxiv.org/abs/2505.12370, and convert the pdf to markdown',
28-
'Search news about bytedance seed1.6 model, then write a web page in modern style and deploy it',
29-
'Write a minimal code sample to help me use transformer',
30-
'Please search for trending datasets on Hugging Face, download the top-ranked dataset, and calculate the total number of characters in the entire datase.',
31-
`Identify the independence process of a twin-island nation where the pro-self-governance political group won thirteen out of seventeen legislative seats in spring 1980 national polls, a second constitutional conference was held at a historic London venue in late 1980, liberation from colonial rule is annually commemorated on November 1st as a public holiday, and an agreement revised the smaller island's local governance legislation for enhanced autonomy. What was the composition of the associated state that preceded its independence?`,
32-
`I am a high school music theory teacher and i'm preparing a course on basic music theory to explain knowledge about music names, roll titles, major scales, octave distribution, and physical frequency. Please help me collect enough informations, design fulfilling and authoritative course content with demonstration animations, and finally output them as web page`,
18+
welcomTitle: 'Let’s work it out',
19+
welcomePrompts: [],
20+
welcomeCards: [
21+
{
22+
title: 'GUI Agent Research',
23+
category: 'Research',
24+
prompt: 'Search for the latest GUI Agent papers',
25+
image:
26+
'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&crop=center',
27+
},
28+
{
29+
title: 'UI TARS Information',
30+
category: 'Research',
31+
prompt: 'Find information about UI TARS',
32+
image:
33+
'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=400&h=300&fit=crop&crop=center',
34+
},
35+
{
36+
title: 'ProductHunt Trends',
37+
category: 'Research',
38+
prompt: 'Tell me the top 5 most popular projects on ProductHunt today',
39+
image:
40+
'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&crop=center',
41+
},
42+
{
43+
title: 'Python Hello World',
44+
category: 'Code',
45+
prompt: 'Write hello world using python',
46+
image:
47+
'https://images.unsplash.com/photo-1526379095098-d400fd0bf935?w=400&h=300&fit=crop&crop=center',
48+
},
49+
{
50+
title: 'Jupyter Math Comparison',
51+
category: 'Code',
52+
prompt: 'Use jupyter to calculate which is greater in 9.11 and 9.9',
53+
image:
54+
'https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=400&h=300&fit=crop&crop=center',
55+
},
56+
{
57+
title: 'Reproduce Seed-TARS',
58+
category: 'Code',
59+
prompt: 'Write code to reproduce seed-tars.com',
60+
image:
61+
'https://images.unsplash.com/photo-1627398242454-45a1465c2479?w=400&h=300&fit=crop&crop=center',
62+
},
63+
{
64+
title: 'Seed-TARS Summary',
65+
category: 'Research',
66+
prompt: 'Summary seed-tars.com/1.5',
67+
image:
68+
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop&crop=center',
69+
},
70+
{
71+
title: 'PDF to Markdown Converter',
72+
category: 'Code',
73+
prompt:
74+
'Write a python code to download the paper https://arxiv.org/abs/2505.12370, and convert the pdf to markdown',
75+
image:
76+
'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=400&h=300&fit=crop&crop=center',
77+
},
78+
{
79+
title: 'ByteDance News Website',
80+
category: 'Code',
81+
prompt:
82+
'Search news about bytedance seed1.6 model, then write a web page in modern style and deploy it',
83+
image:
84+
'https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=400&h=300&fit=crop&crop=center',
85+
},
86+
{
87+
title: 'Transformer Code Sample',
88+
category: 'Code',
89+
prompt: 'Write a minimal code sample to help me use transformer',
90+
image:
91+
'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=400&h=300&fit=crop&crop=center',
92+
},
93+
{
94+
title: 'HuggingFace Dataset Analysis',
95+
category: 'Research',
96+
prompt:
97+
'Please search for trending datasets on Hugging Face, download the top-ranked dataset, and calculate the total number of characters in the entire dataset.',
98+
image:
99+
'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&crop=center',
100+
},
101+
{
102+
title: 'Political History Analysis',
103+
category: 'Research',
104+
prompt:
105+
"Identify the independence process of a twin-island nation where the pro-self-governance political group won thirteen out of seventeen legislative seats in spring 1980 national polls, a second constitutional conference was held at a historic London venue in late 1980, liberation from colonial rule is annually commemorated on November 1st as a public holiday, and an agreement revised the smaller island's local governance legislation for enhanced autonomy. What was the composition of the associated state that preceded its independence?",
106+
image:
107+
'https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?w=400&h=300&fit=crop&crop=center',
108+
},
109+
{
110+
title: 'Music Theory Course Builder',
111+
category: 'Research',
112+
prompt:
113+
"I am a high school music theory teacher and i'm preparing a course on basic music theory to explain knowledge about music names, roll titles, major scales, octave distribution, and physical frequency. Please help me collect enough informations, design fulfilling and authoritative course content with demonstration animations, and finally output them as web page",
114+
image:
115+
'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=300&fit=crop&crop=center',
116+
},
33117
],
34118
workspace: {
35119
navItems: [

‎multimodal/tarko/agent-server/src/utils/webui/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,5 @@ export function mergeWebUIConfig(
1919
server?: AgentServer,
2020
): AgentWebUIImplementation & Record<string, any> {
2121
const agentConstructorWebConfig = server?.getAgentConstructorWebConfig();
22-
return deepMerge(agentConstructorWebConfig || {}, baseWebUIConfig);
22+
return deepMerge(baseWebUIConfig, agentConstructorWebConfig || {});
2323
}

‎multimodal/tarko/agent-ui/src/standalone/app/App.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,12 @@ export const App: React.FC = () => {
6262
<Route
6363
path="/"
6464
element={
65-
<div className="flex h-screen bg-[#F2F3F5] dark:bg-gray-900 text-gray-900 dark:text-gray-100 overflow-hidden">
65+
<div className="flex h-screen bg-[#F2F3F5] dark:bg-gray-900 text-gray-900 dark:text-gray-100">
6666
{sidebarEnabled && <Sidebar />}
6767
<div className="flex-1 flex flex-col overflow-hidden">
68-
<HomePage />
68+
<div className="flex-1 overflow-y-auto">
69+
<HomePage />
70+
</div>
6971
</div>
7072
</div>
7173
}

‎multimodal/tarko/agent-ui/src/standalone/components/ThemeToggle.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { useCallback } from 'react';
2+
import { FiMoon, FiSun } from 'react-icons/fi';
3+
import { useNavbarStyles } from '@tarko/ui';
4+
5+
interface ThemeToggleProps {
6+
className?: string;
7+
size?: 'small' | 'medium' | 'large';
8+
variant?: 'navbar' | 'floating' | 'button';
9+
}
10+
11+
export const ThemeToggle: React.FC<ThemeToggleProps> = ({
12+
className = '',
13+
size = 'medium',
14+
variant = 'navbar'
15+
}) => {
16+
const { isDarkMode } = useNavbarStyles();
17+
18+
const toggleDarkMode = useCallback(() => {
19+
const newMode = !isDarkMode;
20+
document.documentElement.classList.toggle('dark', newMode);
21+
localStorage.setItem('agent-tars-theme', newMode ? 'dark' : 'light');
22+
}, [isDarkMode]);
23+
24+
const sizeClasses = {
25+
small: 'w-6 h-6',
26+
medium: 'w-8 h-8',
27+
large: 'w-10 h-10'
28+
};
29+
30+
const iconSizes = {
31+
small: 12,
32+
medium: 16,
33+
large: 20
34+
};
35+
36+
const variantClasses = {
37+
navbar: 'rounded-full flex items-center justify-center text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100/40 dark:hover:bg-gray-800/40 transition-all hover:scale-110 active:scale-95',
38+
floating: 'rounded-full flex items-center justify-center text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-200/60 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:text-gray-800 dark:hover:text-gray-200 transition-all hover:scale-105 active:scale-95 shadow-lg dark:shadow-none',
39+
button: 'rounded-lg flex items-center justify-center text-gray-600 dark:text-gray-400 bg-gray-100/80 dark:bg-gray-800/80 hover:bg-gray-200/80 dark:hover:bg-gray-700/80 hover:text-gray-800 dark:hover:text-gray-200 transition-all hover:scale-105 active:scale-95'
40+
};
41+
42+
return (
43+
<button
44+
onClick={toggleDarkMode}
45+
className={`${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
46+
title={isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
47+
aria-label={isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
48+
>
49+
{isDarkMode ? (
50+
<FiSun size={iconSizes[size]} />
51+
) : (
52+
<FiMoon size={iconSizes[size]} />
53+
)}
54+
</button>
55+
);
56+
};
57+
58+
export default ThemeToggle;

‎multimodal/tarko/agent-ui/src/standalone/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ThemeToggle } from './ThemeToggle';

0 commit comments

Comments
 (0)