Initial UI

.github/workflows/test.yaml

@@ -11,10 +11,10 @@ jobs:
   test:
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 1
-      - uses: actions/setup-go@v4
+      - uses: actions/setup-go@v5
         with:
           cache: false
           go-version: "1.21"

.gitignore

@@ -1,2 +1,3 @@
 /bin
 /.idea
+/static/ui

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch file",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "main.go",
+      "args": ["--server"]
+    }
+  ]
+}

Makefile

@@ -1,3 +1,8 @@
+all: build-ui build
+
+build-ui:
+	$(MAKE) -C ui
+
 build:
 	CGO_ENABLED=0 go build -o bin/gptscript -tags "${GO_TAGS}" -ldflags "-s -w" .
 

pkg/server/server.go

@@ -234,6 +234,21 @@ func (s *Server) Connect(session *melody.Session) {
 }
 
 func (s *Server) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
+	isUpgrade := strings.Contains(strings.ToLower(req.Header.Get("Connection")), "upgrade")
+	isBrowser := strings.Contains(strings.ToLower(req.Header.Get("User-Agent")), "mozilla")
+	isAjax := req.Header.Get("X-Requested-With") != ""
+
+	if req.URL.Path == "/" && isBrowser && !isAjax && !isUpgrade {
+		rw.Header().Set("Location", "/ui/")
+		rw.WriteHeader(302)
+		return
+	}
+
+	if req.URL.Path == "/favicon.ico" {
+		http.ServeFileFS(rw, req, static.UI, "/ui/favicon.ico")
+		return
+	}
+
 	if strings.HasPrefix(req.URL.Path, "/ui") {
 		path := req.URL.Path
 		if path == "/ui" || path == "/ui/" {
@@ -250,7 +265,7 @@ func (s *Server) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
 	case http.MethodPost:
 		s.run(rw, req)
 	case http.MethodGet:
-		if req.URL.Path == "/" && strings.Contains(strings.ToLower(req.Header.Get("Connection")), "upgrade") {
+		if req.URL.Path == "/" && isUpgrade {
 			err := s.melody.HandleRequest(rw, req)
 			if err != nil {
 				http.Error(rw, err.Error(), http.StatusInternalServerError)

ui/.ackrc

@@ -0,0 +1,14 @@
+--ignore-dir=.git
+--ignore-dir=.nuxt
+--ignore-dir=.nuxt-prod
+--ignore-dir=.nyc_output
+--ignore-dir=.output
+--ignore-dir=.vscode
+--ignore-dir=coverage
+--ignore-dir=dist
+--ignore-dir=node_modules
+--ignore-dir=tmp
+--ignore-dir=vendor
+--ignore-file=ext:svg
+--ignore-file=is:selection.json
+--ignore-file=is:yarn.lock

ui/.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+.nuxt
+.nuxt-prod
+.env
+.nuxt
+.nyc_output
+coverage
+node_modules

ui/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

ui/.vscode/settings.json

@@ -0,0 +1,58 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.detectIndentation": false,
+  "editor.insertSpaces": true,
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "editor.tabSize": 2,
+  "eslint.format.enable": true,
+  "eslint.run": "onSave",
+  "eslint.validate": [
+    "vue",
+    "html",
+    "javascript",
+    "typescript"
+  ],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "files.exclude": {
+    ".ackrc": true,
+    ".dockerignore": true,
+    ".drone.yml": true,
+    ".editorconfig": true,
+    ".eslintcache": true,
+    ".eslintignore": true,
+    ".eslintrc.js": true,
+    ".gitignore": true,
+    ".nuxt*": true,
+    ".nyc_output": true,
+    "babel.config.js": true,
+    "coverage": true,
+    "jsconfig.json": true,
+    "LICENSE": true,
+    "yarn-error.log": true
+  },
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "prettier.enable": false,
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ui"
+  ],
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "ui:\\s*{([^)]*)\\s*}",
+      "[\"'`]([^\"'`]*).*?[\"'`]"
+    ],
+    [
+      "/\\*ui\\*/\\s*{([^;]*)}",
+      ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"
+    ]
+  ],
+  "tailwindCSS.experimental.configFile": "tailwind.config.ts",
+  "typescript.preferences.importModuleSpecifier": "non-relative"
+}

ui/Acornfile

@@ -0,0 +1,25 @@
+args: {
+  // Number of replicas
+  replicas: 1
+
+  // API Endpoint
+  api: "https://localhost:9090/v1"
+}
+
+services: default: {
+    default: true
+    ports: ["80/http"]
+    container: "ui"
+}
+
+containers: ui: {
+  scale: args.replicas
+  build: context: "."
+
+  env: {
+    NUXT_PUBLIC_API: args.api
+  }
+
+  ports: publish: "80/http"
+  probes: "http://localhost/healthz"
+}

ui/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:18-alpine as builder
+ENV NODE_OPTIONS --max_old_space_size=8192
+WORKDIR /src
+COPY package.json .
+COPY yarn.lock .
+RUN yarn --pure-lockfile install
+COPY . .
+ENV NUXT_PUBLIC_APP_VERSION=${NUXT_PUBLIC_APP_VERSION:-dev}
+RUN yarn build
+
+FROM node:18-alpine
+ENV HOST 0.0.0.0
+ENV PORT 80
+EXPOSE 80
+WORKDIR /src
+COPY package.json .
+COPY --from=builder /src/.output /src/.output
+ENV NUXT_PUBLIC_APP_VERSION=${NUXT_PUBLIC_APP_VERSION:-dev}
+CMD ["yarn","start"]

ui/Makefile

@@ -0,0 +1,9 @@
+build: clean
+	yarn
+	yarn generate
+	rm -rf ../static/ui/_nuxt
+	cp -rp .output/public/* ../static/ui/
+	touch ../static/ui/_nuxt/_placeholder
+
+clean:
+	yarn clean

ui/README.md

@@ -0,0 +1,25 @@
+# GPTScript UI
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+```bash
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:9091`:
+
+```bash
+yarn dev
+```
+
+## Production
+
+Build the application for embedding into GPTScript:
+
+```bash
+yarn run generate
+```

ui/app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'slate',
+    gray: 'cool',
+  },
+})

ui/app.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+  import '@/styles/app.scss'
+
+  const sock = useSocket()
+</script>
+<template>
+  <div class="root bg-slate-100 dark:bg-slate-950">
+    <nav class="bg-slate-200 dark:bg-slate-900">
+      <LeftNav />
+    </nav>
+    <aside class="bg-slate-200 dark:bg-slate-900">
+      <ThemeToggle />
+      {{sock.status}}
+    </aside>
+    <main>
+      <NuxtPage />
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .root {
+    --nav-width: 300px;
+    --aside-height: 50px;
+
+    display: grid;
+    grid-template-areas: "nav main"
+                         "aside main";
+    grid-template-columns: var(--nav-width) 1fr;
+    grid-template-rows: 1fr var(--aside-height);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    NAV {
+      grid-area: nav;
+      overflow: auto;
+    }
+
+    ASIDE {
+      grid-area: aside;
+      line-height: var(--aside-height);
+    }
+
+    MAIN {
+      grid-area: main;
+      overflow: auto;
+      position: relative;
+      padding: 1rem;
+    }
+  }
+</style>