Skip to content

Commit beacf6e

Browse files
nalasokartikk-kARajgor
authored
New UI (stitionai#295)
* cleaned new ui * added toast for agent monologue * added varibales for light and dark theme * added tab resize, improved theme * message duplication correction, terminal text selection * improvements * Add: bun run start * update readme * removed unused ui components --------- Co-authored-by: Kartik <[email protected]> Co-authored-by: ARajgor <[email protected]> Co-authored-by: Ayush Rajgor <[email protected]>
1 parent c944518 commit beacf6e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+986
-346
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,4 +160,4 @@ cython_debug/
160160
.idea/
161161

162162
notes.md
163-
data/
163+
data/

‎src/browser/browser.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ async def screenshot(self, project_name):
4646
path_to_save = os.path.join(screenshots_save_path, filename_to_save)
4747

4848
await self.page.emulate_media(media="screen")
49-
await self.page.screenshot(path=path_to_save)
49+
await self.page.screenshot(path=path_to_save, full_page=True)
5050
screenshot = await self.page.screenshot()
5151
screenshot_bytes = base64.b64encode(screenshot).decode()
5252
new_state = self.agent.new_state()

‎ui/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ node_modules/
99
vite.config.js.timestamp-*
1010
vite.config.ts.timestamp-*
1111
pnpm-lock.yaml
12+
.lockb

‎ui/bun.lockb

100644100755
8.37 KB
Binary file not shown.

‎ui/components.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"$schema": "https://shadcn-svelte.com/schema.json",
3+
"style": "default",
4+
"tailwind": {
5+
"config": "tailwind.config.js",
6+
"css": "src/app.pcss",
7+
"baseColor": "zinc"
8+
},
9+
"aliases": {
10+
"components": "$lib/components",
11+
"utils": "$lib/utils"
12+
},
13+
"typescript": false
14+
}

‎ui/package.json

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"private": true,
55
"scripts": {
66
"dev": "vite dev",
7+
"start": "vite build && vite preview",
78
"build": "vite build",
89
"preview": "vite preview"
910
},
@@ -15,16 +16,22 @@
1516
"postcss": "^8.4.32",
1617
"postcss-load-config": "^5.0.2",
1718
"svelte": "^4.2.7",
18-
"tailwindcss": "^3.3.6",
19-
"vite": "^5.0.3",
19+
"tailwindcss": "^3.4.3",
20+
"vite": "^5.2.8",
2021
"vite-plugin-wasm": "^3.3.0"
2122
},
2223
"type": "module",
2324
"dependencies": {
25+
"@xterm/addon-fit": "^0.10.0",
26+
"@xterm/xterm": "^5.5.0",
27+
"bits-ui": "^0.21.2",
2428
"clsx": "^2.1.0",
29+
"mode-watcher": "^0.3.0",
30+
"paneforge": "^0.0.3",
2531
"socket.io-client": "^4.7.5",
26-
"tiktoken": "^1.0.13",
27-
"xterm": "^5.3.0",
28-
"xterm-addon-fit": "^0.8.0"
32+
"svelte-sonner": "^0.3.21",
33+
"tailwind-merge": "^2.2.2",
34+
"tailwind-variants": "^0.2.1",
35+
"tiktoken": "^1.0.13"
2936
}
3037
}

‎ui/src/app.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
88
%sveltekit.head%
9+
<title>Devika AI</title>
910
</head>
1011

11-
<body data-sveltekit-preload-data="hover" class="bg-gray-50 h-dvh">
12+
<body data-sveltekit-preload-data="hover" class="h-dvh">
1213
<div style="display: contents">%sveltekit.body%</div>
1314
</body>
1415
</html>

‎ui/src/app.pcss

Lines changed: 86 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,93 @@
1-
/* Write your global styles here, in PostCSS syntax */
21
@tailwind base;
32
@tailwind components;
43
@tailwind utilities;
4+
5+
@layer base {
6+
:root {
7+
--primary: #2F3337;
8+
--background: #ffffff;
9+
--secondary: #f1f2f5;
10+
--tertiary: #919AA3;
511

6-
body {
7-
margin: 0;
8-
padding: 0;
9-
font-family: "Inter", sans-serif;
10-
font-size: 14px;
12+
--foreground: #303438;
13+
--foreground-invert: #ffffff;
14+
--foreground-light: #9CA3AB;
15+
--foreground-secondary: #9CA3AB;
1116

12-
}
17+
--btn: #2F3337;
18+
--btn-active: #000000;
19+
20+
--border: #E4E3E8;
21+
--seperator: #E4E3E8;
22+
23+
--window-outline: #E4E3E8;
24+
25+
--browser-window-dots: #E4E3E8;
26+
--browser-window-search: #F7F8FA;
27+
--browser-window-ribbon: #ffffff;
28+
--browser-window-foreground: #303438;
29+
--browser-window-background: #F7F8FA;
30+
31+
--terminal-window-dots: #E4E3E8;
32+
--terminal-window-ribbon: #ffffff;
33+
--terminal-window-background: #F7F8FA;
34+
--terminal-window-foreground: #313336;
35+
36+
--slider-empty: #9CA3AB;
37+
--slider-filled: #2F3337;
38+
--slider-thumb: #303438;
39+
40+
--monologue-background: #F1F3F5;
41+
--monologue-outline: #B2BAC2;
42+
}
43+
.dark{
44+
--primary: #ECECEC;
45+
--background: #1D1F21;
46+
--secondary: #2F3337;
47+
--tertiary: #81878C;
48+
49+
--foreground: #dcdcdc;
50+
--foreground-invert: #1D1F21;
51+
--foreground-light: #E6E9EB;
52+
--foreground-secondary: #9CA3AB;
53+
54+
--btn: #ECECEC;
55+
--btn-active: #ffffff;
56+
57+
--border: #2B2F34;
58+
--seperator: #495058;
59+
60+
--window-outline: #4E555D;
61+
62+
--browser-window-dots: #191C1E;
63+
--browser-window-search: #1D2124;
64+
--browser-window-ribbon: #292E32;
65+
--browser-window-foreground: #DDDFE1;
66+
--browser-window-background: #111315;
1367

14-
/* Styling for scrollbar */
68+
--terminal-window-dots: #191C1E;
69+
--terminal-window-ribbon: #292E32;
70+
--terminal-window-background: #111315;
71+
--terminal-window-foreground: #9CA3AB;
72+
73+
--slider-empty: #2F3337;
74+
--slider-filled: #81878C;
75+
--slider-thumb: #ffffff;
76+
77+
--monologue-background: #242729;
78+
--monologue-outline: #464C51;
79+
}
80+
}
81+
82+
@layer base {
83+
* {
84+
@apply border-border;
85+
}
86+
body {
87+
@apply bg-background text-foreground;
88+
}
89+
90+
/* Styling for scrollbar */
1591

1692
/* WebKit (Chrome, Safari) */
1793
*::-webkit-scrollbar {
@@ -56,4 +132,5 @@ body {
56132
}
57133
:global(*::-ms-scrollbar-thumb:hover) {
58134
background: #6b7280;
59-
}
135+
}
136+
}

‎ui/src/lib/api.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,13 @@ import { io } from "socket.io-client";
1111

1212
const getApiBaseUrl = () => {
1313
if (typeof window !== 'undefined') {
14-
// Client-side code
1514
const host = window.location.hostname;
1615
if (host === 'localhost' || host === '127.0.0.1') {
1716
return 'http://127.0.0.1:1337';
1817
} else {
1918
return `http://${host}:1337`;
2019
}
2120
} else {
22-
// Server-side code (Node.js)
2321
return 'http://127.0.0.1:1337';
2422
}
2523
};

‎ui/src/lib/components/BrowserWidget.svelte

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import { agentState } from "$lib/store";
33
import { API_BASE_URL, socket } from "$lib/api";
4-
4+
55
socket.on('screenshot', function(msg) {
66
const data = msg['data'];
77
const img = document.querySelector('.browser-img');
@@ -10,31 +10,30 @@
1010
1111
</script>
1212

13-
<div class="flex flex-col border-2 rounded-lg h-1/2 overflow-y-auto">
14-
<div class="p-2 flex items-center border-b">
13+
<div class="w-full h-full flex flex-col border-[3px] rounded-xl overflow-y-auto bg-browser-window-background border-window-outline">
14+
<div class="p-2 flex items-center border-b border-border bg-browser-window-ribbon h-12">
1515
<div class="flex space-x-2 ml-2 mr-4">
16-
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
17-
<div class="w-3 h-3 bg-yellow-400 rounded-full"></div>
18-
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
16+
<div class="w-3 h-3 bg-browser-window-dots rounded-full"></div>
17+
<div class="w-3 h-3 bg-browser-window-dots rounded-full"></div>
18+
<div class="w-3 h-3 bg-browser-window-dots rounded-full"></div>
1919
</div>
2020
<input
2121
type="text"
2222
id="browser-url"
23-
class="flex-grow border-2 rounded-lg p-2 overflow-x-auto"
24-
placeholder="chrome://newtab"
23+
class="flex-grow h-7 text-xs rounded-lg p-2 overflow-x-auto bg-browser-window-search text-browser-window-foreground"
24+
placeholder="devika://newtab"
2525
value={$agentState?.browser_session.url || ""}
26-
2726
/>
2827
</div>
2928
<div id="browser-content" class="flex-grow overflow-y-auto">
3029
{#if $agentState?.browser_session.screenshot}
3130
<img
3231
class="browser-img"
33-
alt="Browser snapshot"
3432
src={API_BASE_URL + "/api/get-browser-snapshot?snapshot_path=" + $agentState?.browser_session.screenshot}
33+
alt="Browser snapshot"
3534
/>
3635
{:else}
37-
<div class="text-gray-400 text-center mt-5"><strong>💡 TIP:</strong> You can include a Git URL in your prompt to clone a repo!</div>
36+
<div class="text-gray-400 text-sm text-center mt-5"><strong>💡 TIP:</strong> You can include a Git URL in your prompt to clone a repo!</div>
3837
{/if}
3938
</div>
4039
</div>

0 commit comments

Comments
 (0)