Web app of commanddash

.github/workflows/web-app_web-app-prod.yml

@@ -0,0 +1,68 @@
+name: Build and deploy Node.js app to Azure Web App - web-app-prod
+
+on:
+  push:
+    branches:
+      - web-app
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+
+      - name: npm install, build, and test
+        run: |
+          cd commanddash_web_app
+          npm install
+          npm run build --if-present
+          npm run test --if-present
+      - name: Zip artifact for deployment
+        run: |
+          cd commanddash_web_app/build
+          zip -r ../release.zip build node_modules package.json package-lock.json
+      - name: Upload artifact for deployment job
+        uses: actions/upload-artifact@v3
+        with:
+          name: sveltekit-app
+          path: release.zip
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: "Production"
+      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
+    permissions:
+      id-token: write #This is required for requesting the JWT
+
+    steps:
+      - name: Download artifact from build job
+        uses: actions/download-artifact@v3
+        with:
+          name: sveltekit-app
+
+      - name: Unzip artifact for deployment
+        run: unzip release.zip -d deploy
+
+      - name: Login to Azure
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_818727A488FB487EA3BCC61BEC337FDD }}
+          tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_58CC6F3841FB49A38469650AD296DCC8 }}
+          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_7B7BF9D41759471DBA0ED64C44AF88AE }}
+
+      - name: "Deploy to Azure Web App"
+        id: deploy-to-webapp
+        uses: azure/webapps-deploy@v2
+        with:
+          app-name: "web-app-prod"
+          slot-name: "Production"
+          package: deploy

web/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+package-lock.json

web/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

web/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

web/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "commanddash-web-app",
+	"version": "0.0.1",
+	"private": true,
+	"engines": {
+		"node": ">=18.13.0"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"start": "node build/index.js"
+	},
+	"devDependencies": {
+		"@iconify-json/carbon": "^1.1.36",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-node": "^5.2.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/showdown": "^2.0.6",
+		"autoprefixer": "^10.4.19",
+		"postcss": "^8.4.39",
+		"svelte": "^4.2.7",
+		"svelte-adapter-azure-swa": "^0.20.0",
+		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.4.4",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"unplugin-icons": "^0.19.0",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"@lottiefiles/svelte-lottie-player": "^0.3.1",
+		"@tailwindcss/typography": "^0.5.13",
+		"showdown": "^2.1.0",
+		"tailwind-scrollbar": "^3.1.0"
+	}
+}

web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

web/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

web/src/app.html

@@ -0,0 +1,12 @@
+<!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" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="h-full dark:bg-gray-900">
+		<div id="app" class="contents h-full">%sveltekit.body%</div>
+	</body>
+</html>

web/src/lib/components/NavConversationItem.svelte

@@ -0,0 +1,7 @@
+<a
+	data-sveltekit-noscroll
+	href="#"
+	class="group flex h-10 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700
+		? 'bg-gray-100 dark:bg-gray-700'
+		: ''}"
+>Task</a>

web/src/lib/components/NavMenu.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import NavConversationItem from "./NavConversationItem.svelte";
+	import { env as envPublic } from "$env/dynamic/public";
+</script>
+
+<div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
+	<a
+		class="flex items-center rounded-xl text-lg font-semibold"
+		href="#"
+	>
+		{envPublic.PUBLIC_APP_NAME}
+	</a>
+</div>
+
+<div
+    class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 max-sm:bg-gradient-to-t md:bg-gradient-to-l dark:from-gray-800/30"
+>
+    <h4
+        class="mb-1.5 mt-4 pl-0.5 text-sm text-gray-400 first:mt-0 dark:text-gray-500"
+    >
+        Today
+    </h4>
+    <NavConversationItem />
+</div>
+<div
+    class="mt-0.5 flex flex-col gap-1 rounded-r-xl p-3 text-sm md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"
+>
+    <button
+        type="button"
+        class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+    >
+        Theme
+    </button>
+    <a
+        href="#"
+        class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+    >
+        Assistants
+        <span
+            class="ml-auto rounded-full border border-gray-300 px-2 py-0.5 text-xs text-gray-500 dark:border-gray-500 dark:text-gray-400"
+            >New</span
+        >
+    </a>
+    <a
+        href="#"
+        class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+    >
+        Settings
+    </a>
+    <a
+        href="#"
+        class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+    >
+        About & Privacy
+    </a>
+</div>

web/src/lib/components/chat/ChatInput.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { isDesktop } from "$lib/utils/isDesktop";
+    import { onMount, createEventDispatcher } from "svelte";
+
+    export let value: string = "";
+    export let placeholder: string = "";
+    export let minRows = 1;
+    export let maxRows: null | number = null;
+    export let disabled: boolean = false;
+
+    let textareaElement: HTMLTextAreaElement;
+
+    const dispatch = createEventDispatcher<{ submit: void }>();
+
+    $: minHeight = `${1 + minRows * 1.5}em`;
+    $: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
+
+    function handleKeydown(event: KeyboardEvent) {
+        //submit on enter
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+
+            textareaElement.blur();
+
+            if (isDesktop(window)) {
+                textareaElement.focus();
+            }
+
+            dispatch("submit");
+        }
+    }
+
+    onMount(() => {
+        if (isDesktop(window)) {
+            textareaElement.focus();
+        }
+    });
+</script>
+
+<div class="relative min-w-0 flex-1" on:paste>
+    <pre
+        class="scrollbar-custom invisible overflow-x-hidden overflow-y-scroll whitespace-pre-wrap break-words p-3"
+        aria-hidden="true"
+        style="min-height: {minHeight}; max-height: {maxHeight}"></pre>
+    <textarea
+        enterkeyhint="send"
+        tabindex="0"
+        rows="1"
+        bind:value
+        bind:this={textareaElement}
+        class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
+        {placeholder}
+        {disabled}
+        on:keydown={handleKeydown}
+    />
+</div>
+
+<style>
+    pre,
+    textarea {
+        font-family: inherit;
+        box-sizing: border-box;
+        line-height: 1.5;
+    }
+</style>