Svelte => SvelteKit (stitionai#17)

* deleted old svelte files; initialized sveltekit project; moved api.js and store.js to src/lib; moved ui/public/assets to ui/static/assets * moved components to src/lib * src/App.svelte => src/routes/+page.svelte; fixed imports () * added /components * src/routes/+layout.js: ssr = false (temporary fix for xterm not working in ssr context) * moved Sidebar to +layout.svelte so that it's persistent across pages; made Sidebar a fixed element (fixed top-0 left-0 h-dvh z-10) * force added api.js & store.js --------- Co-authored-by: Vivek R <[email protected]>
DEARsunshine · Mar 23, 2024 · c246fa7 · c246fa7
1 parent 68f3dd4
commit c246fa7
Show file tree

Hide file tree

Showing 37 changed files with 182 additions and 166 deletions.
diff --git a/ui/.DS_Store b/ui/.DS_Store
diff --git a/ui/.gitignore b/ui/.gitignore
@@ -1,2 +1,11 @@
+.DS_Store
 node_modules/
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
 pnpm-lock.yaml
diff --git a/ui/.npmrc b/ui/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/ui/bun.lockb b/ui/bun.lockb
diff --git a/ui/index.html b/ui/index.html
diff --git a/ui/package.json b/ui/package.json
@@ -1,38 +1,26 @@
 {
-  "name": "devika-ui",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "name": "ui",
+  "version": "0.0.1",
+  "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "postcss-load-config": "^5.0.2",
+    "svelte": "^4.2.7",
+    "tailwindcss": "^3.3.6",
+    "vite": "^5.0.3"
+  },
+  "type": "module",
   "dependencies": {
-    "@babel/core": "^7.24.1",
-    "@babel/preset-env": "^7.24.1",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "autoprefixer": "latest",
-    "css-loader": "^6.10.0",
-    "mini-css-extract-plugin": "^2.8.1",
-    "postcss": "latest",
-    "postcss-loader": "^8.1.1",
-    "rollup": "^4.13.0",
-    "rollup-plugin-css-only": "^4.5.2",
-    "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-svelte": "^7.2.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^4.2.12",
-    "svelte-loader": "^3.2.0",
-    "tailwindcss": "latest",
-    "vite": "^5.1.6",
-    "xterm": "^5.2.0",
+    "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   }
-}
+}
diff --git a/ui/postcss.config.cjs b/ui/postcss.config.cjs
@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer,
+  ],
+};
+
+module.exports = config;
diff --git a/ui/postcss.config.js b/ui/postcss.config.js
diff --git a/ui/public/.DS_Store b/ui/public/.DS_Store
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
diff --git a/ui/src/app.html b/ui/src/app.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="bg-slate-950 text-white font-sans">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/ui/src/app.pcss b/ui/src/app.pcss
@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/ui/src/index.css b/ui/src/index.css
diff --git a/ui/src/api.js → ui/src/lib/api.js b/ui/src/api.js → ui/src/lib/api.js
diff --git a/ui/src/components/BrowserWidget.svelte → ui/src/lib/components/BrowserWidget.svelte b/ui/src/components/BrowserWidget.svelte → ui/src/lib/components/BrowserWidget.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { agentState } from "../store";
-  import { API_BASE_URL } from "../api";
+  import { agentState } from "$lib/store";
+  import { API_BASE_URL } from "$lib/api";
 </script>
 
 <div class="flex flex-col bg-slate-950 border border-indigo-700 rounded flex-1 overflow-hidden">

diff --git a/ui/src/components/ControlPanel.svelte → ui/src/lib/components/ControlPanel.svelte b/ui/src/components/ControlPanel.svelte → ui/src/lib/components/ControlPanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte';
-  import { projectList, modelList, internet } from "../store";
-  import { createProject, fetchProjectList, getTokenUsage } from "../api";
+  import { projectList, modelList, internet } from "$lib/store";
+  import { createProject, fetchProjectList, getTokenUsage } from "$lib/api";
 
   let selectedProject = localStorage.getItem("selectedProject") || "Select Project";
   let selectedModel = localStorage.getItem("selectedModel") || "Select Model";

diff --git a/ui/src/components/InternalMonologue.svelte → ...c/lib/components/InternalMonologue.svelte b/ui/src/components/InternalMonologue.svelte → ...c/lib/components/InternalMonologue.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { agentState } from "../store";
+  import { agentState } from "$lib/store";
 </script>
 
 <div

diff --git a/ui/src/components/MessageContainer.svelte → ...rc/lib/components/MessageContainer.svelte b/ui/src/components/MessageContainer.svelte → ...rc/lib/components/MessageContainer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { messages } from "../store";
+  import { messages } from "$lib/store";
   import { onMount, afterUpdate } from "svelte";
 
   let messageContainer;

diff --git a/ui/src/components/MessageInput.svelte → ui/src/lib/components/MessageInput.svelte b/ui/src/components/MessageInput.svelte → ui/src/lib/components/MessageInput.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { sendMessage, executeAgent, API_BASE_URL } from "../api";
-  import { agentState, messages } from "../store";
+  import { sendMessage, executeAgent, API_BASE_URL } from "$lib/api";
+  import { agentState, messages } from "$lib/store";
 
   let isAgentActive = false;
 

diff --git a/ui/src/components/Sidebar.svelte → ui/src/lib/components/Sidebar.svelte b/ui/src/components/Sidebar.svelte → ui/src/lib/components/Sidebar.svelte
@@ -1,5 +1,5 @@
 <div
-  class="flex flex-col w-20 bg-slate-950 p-4 space-y-4 items-center shadow-2xl shadow-indigo-700"
+  class="flex flex-col w-20 h-dvh fixed top-0 left-0 z-10 bg-slate-950 p-4 space-y-4 items-center shadow-2xl shadow-indigo-700"
 >
   <div class="p-5 rounded nav-button relative">
     <button class="text-gray-400 hover:text-white flex justify-center w-full">

diff --git a/ui/src/components/TerminalWidget.svelte → ui/src/lib/components/TerminalWidget.svelte b/ui/src/components/TerminalWidget.svelte → ui/src/lib/components/TerminalWidget.svelte
@@ -3,7 +3,7 @@
   import { Terminal } from "xterm";
   import "xterm/css/xterm.css";
   import { FitAddon } from "xterm-addon-fit";
-  import { agentState } from "../store";
+  import { agentState } from "$lib/store";
 
   let terminalElement;
   let terminal;

diff --git a/ui/src/store.js → ui/src/lib/store.js b/ui/src/store.js → ui/src/lib/store.js
diff --git a/ui/src/main.js b/ui/src/main.js
diff --git a/ui/src/routes/+layout.js b/ui/src/routes/+layout.js
@@ -0,0 +1 @@
+export const ssr = false
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
@@ -0,0 +1,9 @@
+<script>
+	import "../app.pcss"
+	import Sidebar from '$lib/components/Sidebar.svelte'
+</script>
+
+<main class="h-dvh w-[calc(100dvw-5rem)] ml-20">
+	<Sidebar />
+	<slot />
+</main>
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
@@ -0,0 +1,67 @@
+<script>
+  import { onMount } from "svelte";
+  import ControlPanel from "$lib/components/ControlPanel.svelte";
+  import MessageContainer from "$lib/components/MessageContainer.svelte";
+  import InternalMonologue from "$lib/components/InternalMonologue.svelte";
+  import MessageInput from "$lib/components/MessageInput.svelte";
+  import BrowserWidget from "$lib/components/BrowserWidget.svelte";
+  import TerminalWidget from "$lib/components/TerminalWidget.svelte";
+  import {
+    fetchProjectList,
+    fetchModelList,
+    fetchAgentState,
+    fetchMessages,
+    checkInternetStatus,
+  } from "$lib/api";
+
+  onMount(() => {
+    localStorage.clear();
+
+    const intervalId = setInterval(async () => {
+      await fetchProjectList();
+      await fetchModelList();
+      await fetchAgentState();
+      await fetchMessages();
+      await checkInternetStatus();
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  });
+</script>
+
+<div class="flex flex-col p-4 h-full">
+  <ControlPanel />
+
+  <div class="flex h-full space-x-4">
+    <div class="flex flex-col w-1/2">
+      <MessageContainer />
+      <InternalMonologue />
+      <MessageInput />
+    </div>
+
+    <div class="flex flex-col w-1/2 space-y-4">
+      <BrowserWidget />
+      <TerminalWidget />
+    </div>
+  </div>
+</div>
+
+<style>
+  :global(::-webkit-scrollbar) {
+    width: 10px;
+  }
+
+  :global(::-webkit-scrollbar-track) {
+    background: #2d3748;
+    border-radius: 10px;
+  }
+
+  :global(::-webkit-scrollbar-thumb) {
+    background: #4a5568;
+    border-radius: 10px;
+  }
+
+  :global(::-webkit-scrollbar-thumb:hover) {
+    background: #6b7280;
+  }
+</style>
diff --git a/ui/public/assets/bootup.mp3 → ui/static/assets/bootup.mp3 b/ui/public/assets/bootup.mp3 → ui/static/assets/bootup.mp3
diff --git a/ui/public/assets/devika-avatar.png → ui/static/assets/devika-avatar.png b/ui/public/assets/devika-avatar.png → ui/static/assets/devika-avatar.png
diff --git a/ui/public/assets/loading-lottie.json → ui/static/assets/loading-lottie.json b/ui/public/assets/loading-lottie.json → ui/static/assets/loading-lottie.json
diff --git a/ui/public/assets/user-avatar.png → ui/static/assets/user-avatar.png b/ui/public/assets/user-avatar.png → ui/static/assets/user-avatar.png
diff --git a/ui/static/favicon.png b/ui/static/favicon.png
diff --git a/ui/public/index.html → ui/static/index.html b/ui/public/index.html → ui/static/index.html
diff --git a/ui/svelte.config.js b/ui/svelte.config.js
@@ -0,0 +1,16 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import adapter from "@sveltejs/adapter-auto";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter(),
+  },
+
+  preprocess: [vitePreprocess({})],
+};
+
+export default config;
diff --git a/ui/tailwind.config.cjs b/ui/tailwind.config.cjs
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config}*/
+const config = {
+  content: ["./src/**/*.{html,js,svelte,ts}"],
+
+  theme: {
+    extend: {},
+  },
+
+  plugins: [],
+};
+
+module.exports = config;