Skip to content

Commit 14d6099

Browse files
ulivzulivz
committed
feat: init new web ui
1 parent 728f829 commit 14d6099

File tree

8 files changed

+306
-1
lines changed

8 files changed

+306
-1
lines changed

‎packages/multimodal/agent-tars-web-ui/package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "@agent-tars/web-ui",
3+
"version": "0.0.0",
4+
"dependencies": {
5+
"framer-motion": "^10.16.4",
6+
"react-icons": "^4.11.0",
7+
"@headlessui/react": "^1.7.17",
8+
"react": "^18.2.0",
9+
"react-dom": "^18.2.0",
10+
"socket.io-client": "^4.7.2",
11+
"react-markdown": "^8.0.7",
12+
"react-syntax-highlighter": "^15.5.0",
13+
"uuid": "^9.0.0"
14+
},
15+
"devDependencies": {
16+
"@multimodal/agent-interface": "workspace:*",
17+
"react-router-dom": "^7.1.5",
18+
"@rsbuild/core": "1.3.18",
19+
"@rsbuild/plugin-react": "1.1.1",
20+
"@types/react": "^18.2.75",
21+
"@types/react-dom": "^18.2.24",
22+
"autoprefixer": "^10.4.20",
23+
"postcss": "^8.4.49",
24+
"tailwindcss": "^3.4.15"
25+
},
26+
"scripts": {
27+
"dev": "rsbuild dev --open",
28+
"build": "rsbuild build",
29+
"preview": "rsbuild preview"
30+
}
31+
}

‎packages/multimodal/agent-tars-web-ui/postcss.config.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
plugins: {
5+
tailwindcss: {
6+
content: ['./src/**/*.{js,jsx,ts,tsx}'],
7+
darkMode: 'class',
8+
theme: {
9+
extend: {
10+
fontFamily: {
11+
sans: [
12+
'Inter',
13+
'ui-sans-serif',
14+
'system-ui',
15+
'-apple-system',
16+
'BlinkMacSystemFont',
17+
'sans-serif',
18+
],
19+
display: [
20+
'Outfit',
21+
'ui-sans-serif',
22+
'system-ui',
23+
'-apple-system',
24+
'BlinkMacSystemFont',
25+
'sans-serif',
26+
],
27+
},
28+
colors: {
29+
gray: {
30+
50: '#f9fafb',
31+
100: '#f3f4f6',
32+
200: '#e5e7eb',
33+
300: '#d1d5db',
34+
400: '#9ca3af',
35+
500: '#6b7280',
36+
600: '#4b5563',
37+
700: '#374151',
38+
800: '#1f2937',
39+
900: '#111827',
40+
},
41+
},
42+
animation: {
43+
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
44+
},
45+
},
46+
},
47+
plugins: [],
48+
},
49+
autoprefixer: {},
50+
},
51+
};

‎packages/multimodal/agent-tars-web-ui/public/index.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Agent TARS</title>
7+
<meta name="description" content="Agent TARS - An AI powered agent for various tasks">
8+
<meta name="theme-color" content="#111827">
9+
<style>
10+
body {
11+
background-color: #fff;
12+
margin: 0;
13+
padding: 0;
14+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
15+
}
16+
17+
.dark-theme {
18+
color-scheme: dark;
19+
--foreground: #f3f4f6;
20+
--background: #111827;
21+
--bg-secondary: #1f2937;
22+
}
23+
24+
.light-theme {
25+
color-scheme: light;
26+
--foreground: #111827;
27+
--background: #ffffff;
28+
--bg-secondary: #f9fafb;
29+
}
30+
31+
.loading-indicator {
32+
position: absolute;
33+
top: 50%;
34+
left: 50%;
35+
transform: translate(-50%, -50%);
36+
display: flex;
37+
flex-direction: column;
38+
align-items: center;
39+
justify-content: center;
40+
}
41+
42+
.spinner {
43+
width: 40px;
44+
height: 40px;
45+
border-radius: 50%;
46+
border: 3px solid rgba(0, 0, 0, 0.1);
47+
border-top-color: #3b82f6;
48+
animation: spin 1s ease-in-out infinite;
49+
}
50+
51+
@media (prefers-color-scheme: dark) {
52+
body {
53+
background-color: #111827;
54+
}
55+
56+
.spinner {
57+
border: 3px solid rgba(255, 255, 255, 0.1);
58+
border-top-color: #3b82f6;
59+
}
60+
}
61+
62+
@keyframes spin {
63+
to {
64+
transform: rotate(360deg);
65+
}
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<div id="root">
71+
<div class="loading-indicator">
72+
<div class="spinner"></div>
73+
<p style="margin-top: 20px; color: var(--foreground, #111827);">Loading Agent TARS...</p>
74+
</div>
75+
</div>
76+
<script>
77+
// Set initial theme based on user preference
78+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
79+
document.documentElement.classList.add(prefersDark ? 'dark-theme' : 'light-theme');
80+
</script>
81+
</body>
82+
</html>

‎packages/multimodal/agent-tars-web-ui/rsbuild.config.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { defineConfig } from '@rsbuild/core';
2+
import { pluginReact } from '@rsbuild/plugin-react';
3+
4+
export default defineConfig({
5+
plugins: [pluginReact()],
6+
source: {
7+
entry: {
8+
index: './src/entry.tsx',
9+
},
10+
},
11+
html: {
12+
title: 'Agent TARS - An Open-source Multimodal AI Agent',
13+
meta: {
14+
description:
15+
'Agent TARS is an open-source multimodal AI agent designed to revolutionize GUI interaction by visually interpreting web pages and seamlessly integrating with command lines and file systems.',
16+
keywords:
17+
'AI agent, multimodal, GUI interaction, Agent TARS, open-source, browser automation',
18+
author: 'Agent TARS Team',
19+
// Viewport for mobile responsiveness
20+
viewport: 'width=device-width, initial-scale=1, maximum-scale=5',
21+
},
22+
},
23+
});

‎packages/multimodal/agent-tars-web-ui/src/entry.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
2+
@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css');
3+
4+
@tailwind base;
5+
@tailwind components;
6+
@tailwind utilities;
7+
8+
body {
9+
margin: 0;
10+
font-family: var(--font-primary);
11+
-webkit-font-smoothing: antialiased;
12+
-moz-osx-font-smoothing: grayscale;
13+
background-color: var(--background);
14+
background: var(--bg-secondary);
15+
height: 100vh;
16+
margin: 0;
17+
padding: 0;
18+
overflow: hidden;
19+
user-select: none;
20+
color: var(--foreground);
21+
overflow-x: hidden;
22+
line-height: 1.5;
23+
}

‎packages/multimodal/agent-tars-web-ui/src/entry.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import './entry.css';
2+
3+
import React from 'react';
4+
import ReactDOM from 'react-dom/client';
5+
6+
const App = () => {
7+
return <h1>Hello</h1>;
8+
};
9+
10+
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
11+
<React.StrictMode>
12+
<App />
13+
</React.StrictMode>,
14+
);

‎packages/multimodal/agent-tars-web-ui/tsconfig.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"compilerOptions": {
3+
"declaration": false,
4+
"noImplicitAny": true,
5+
"moduleResolution": "bundler",
6+
"module": "ESNext",
7+
"jsx": "react-jsx",
8+
"baseUrl": "./",
9+
"paths": {
10+
"@/*": [
11+
"./src/*"
12+
]
13+
},
14+
"strict": true,
15+
"target": "ES2017",
16+
"emitDecoratorMetadata": true,
17+
"experimentalDecorators": true,
18+
"allowSyntheticDefaultImports": true
19+
},
20+
"include": [
21+
"src"
22+
]
23+
}

‎pnpm-lock.yaml

Lines changed: 59 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)