👷 Add CI to check types (#161)

.eslintrc.cjs

@@ -14,6 +14,8 @@ module.exports = {
 	},
 	rules: {
 		"no-shadow": ["error"],
+		"@typescript-eslint/no-explicit-any": "error",
+		"@typescript-eslint/no-non-null-assertion": "error",
 	},
 	env: {
 		browser: true,

.github/workflows/lint-and-test.yml

@@ -0,0 +1,27 @@
+name: Lint and test
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: "npm"
+      - run: |
+          npm install ci
+      - name: "Checking lint/format errors"
+        run: |
+          npm run lint
+      - name: "Checking type errors"
+        run: |
+          npm run check

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "chat-ui",
-	"version": "0.0.1",
+	"version": "0.1.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "chat-ui",
-			"version": "0.0.1",
+			"version": "0.1.0",
 			"dependencies": {
 				"@huggingface/inference": "^2.2.0",
 				"autoprefixer": "^10.4.14",
@@ -23,8 +23,8 @@
 			},
 			"devDependencies": {
 				"@iconify-json/carbon": "^1.1.16",
-				"@sveltejs/adapter-node": "^1.2.0",
-				"@sveltejs/kit": "^1.5.0",
+				"@sveltejs/adapter-node": "^1.2.4",
+				"@sveltejs/kit": "^1.15.10",
 				"@tailwindcss/typography": "^0.5.9",
 				"@types/marked": "^4.0.8",
 				"@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -35,8 +35,8 @@
 				"prettier": "^2.8.0",
 				"prettier-plugin-svelte": "^2.8.1",
 				"prettier-plugin-tailwindcss": "^0.2.7",
-				"svelte": "^3.54.0",
-				"svelte-check": "^3.0.1",
+				"svelte": "^3.58.0",
+				"svelte-check": "^3.2.0",
 				"tslib": "^2.4.1",
 				"typescript": "^4.9.3",
 				"unplugin-icons": "^0.16.1",
@@ -769,9 +769,9 @@
 			}
 		},
 		"node_modules/@sveltejs/adapter-node": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.2.0.tgz",
-			"integrity": "sha512-j0nxkrNZ4zBkOIOtqHUET5l8qvcFo64xNL2xv8F1QICkz746o5DVCGaJEPC3B2X2fTklXExxe80yXZhf38p6zg==",
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.2.4.tgz",
+			"integrity": "sha512-TNnhS+OKRZ9RKnC+ho5mlE2FJquI61i0v7yOXxBUSU3LAoYH2kwVVL8P8ecjefmZ8BOfM1V54pBnDODBU5CEaA==",
 			"dev": true,
 			"dependencies": {
 				"@rollup/plugin-commonjs": "^24.0.0",
@@ -784,13 +784,13 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "1.15.7",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.7.tgz",
-			"integrity": "sha512-dgdKExsMJ16X3q8tEcuDlv+QIWAlJcf7IqCU2HWV13nmtTzwSA2n4VtEx9Gy5OGhH0SUAGNIupmlf0TdFSMXbw==",
+			"version": "1.15.10",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.10.tgz",
+			"integrity": "sha512-qRZxODfsixjgY+7OOxhAQB8viVaxjyDUz2lM6cE22kObzF5mNke81FIxB2wdaOX42LyfVwIYULZQSr7duxLZ7w==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
-				"@sveltejs/vite-plugin-svelte": "^2.0.0",
+				"@sveltejs/vite-plugin-svelte": "^2.1.1",
 				"@types/cookie": "^0.5.1",
 				"cookie": "^0.5.0",
 				"devalue": "^4.3.0",
@@ -799,10 +799,10 @@
 				"magic-string": "^0.30.0",
 				"mime": "^3.0.0",
 				"sade": "^1.8.1",
-				"set-cookie-parser": "^2.5.1",
+				"set-cookie-parser": "^2.6.0",
 				"sirv": "^2.0.2",
 				"tiny-glob": "^0.2.9",
-				"undici": "5.20.0"
+				"undici": "~5.22.0"
 			},
 			"bin": {
 				"svelte-kit": "svelte-kit.js"
@@ -816,17 +816,17 @@
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.0.2.tgz",
-			"integrity": "sha512-xCEan0/NNpQuL0l5aS42FjwQ6wwskdxC3pW1OeFtEKNZwRg7Evro9lac9HesGP6TdFsTv2xMes5ASQVKbCacxg==",
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.1.1.tgz",
+			"integrity": "sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==",
 			"dev": true,
 			"dependencies": {
 				"debug": "^4.3.4",
-				"deepmerge": "^4.2.2",
+				"deepmerge": "^4.3.1",
 				"kleur": "^4.1.5",
-				"magic-string": "^0.27.0",
+				"magic-string": "^0.30.0",
 				"svelte-hmr": "^0.15.1",
-				"vitefu": "^0.2.3"
+				"vitefu": "^0.2.4"
 			},
 			"engines": {
 				"node": "^14.18.0 || >= 16"
@@ -836,18 +836,6 @@
 				"vite": "^4.0.0"
 			}
 		},
-		"node_modules/@sveltejs/vite-plugin-svelte/node_modules/magic-string": {
-			"version": "0.27.0",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
-			"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
-			"dev": true,
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.13"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
 		"node_modules/@tailwindcss/typography": {
 			"version": "0.5.9",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
@@ -917,15 +905,6 @@
 			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
 			"dev": true
 		},
-		"node_modules/@types/sass": {
-			"version": "1.43.1",
-			"resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
-			"integrity": "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==",
-			"dev": true,
-			"dependencies": {
-				"@types/node": "*"
-			}
-		},
 		"node_modules/@types/semver": {
 			"version": "7.3.13",
 			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
@@ -1560,9 +1539,9 @@
 			"dev": true
 		},
 		"node_modules/deepmerge": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
-			"integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==",
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
 			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
@@ -2194,9 +2173,9 @@
 			"dev": true
 		},
 		"node_modules/graceful-fs": {
-			"version": "4.2.10",
-			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-			"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
 			"dev": true
 		},
 		"node_modules/grapheme-splitter": {
@@ -3430,9 +3409,9 @@
 			}
 		},
 		"node_modules/set-cookie-parser": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
-			"integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==",
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
+			"integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==",
 			"dev": true
 		},
 		"node_modules/shebang-command": {
@@ -3657,18 +3636,18 @@
 			}
 		},
 		"node_modules/svelte": {
-			"version": "3.55.1",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.55.1.tgz",
-			"integrity": "sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==",
+			"version": "3.58.0",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.58.0.tgz",
+			"integrity": "sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==",
 			"dev": true,
 			"engines": {
 				"node": ">= 8"
 			}
 		},
 		"node_modules/svelte-check": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.0.3.tgz",
-			"integrity": "sha512-ByBFXo3bfHRGIsYEasHkdMhLkNleVfszX/Ns1oip58tPJlKdo5Ssr8kgVIuo5oq00hss8AIcdesuy0Xt0BcTvg==",
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.2.0.tgz",
+			"integrity": "sha512-6ZnscN8dHEN5Eq5LgIzjj07W9nc9myyBH+diXsUAuiY/3rt0l65/LCIQYlIuoFEjp2F1NhXqZiJwV9omPj9tMw==",
 			"dev": true,
 			"dependencies": {
 				"@jridgewell/trace-mapping": "^0.3.17",
@@ -3677,8 +3656,8 @@
 				"import-fresh": "^3.2.1",
 				"picocolors": "^1.0.0",
 				"sade": "^1.7.4",
-				"svelte-preprocess": "^5.0.0",
-				"typescript": "^4.9.4"
+				"svelte-preprocess": "^5.0.3",
+				"typescript": "^5.0.3"
 			},
 			"bin": {
 				"svelte-check": "bin/svelte-check"
@@ -3687,6 +3666,19 @@
 				"svelte": "^3.55.0"
 			}
 		},
+		"node_modules/svelte-check/node_modules/typescript": {
+			"version": "5.0.4",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
+			"integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+			"dev": true,
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=12.20"
+			}
+		},
 		"node_modules/svelte-hmr": {
 			"version": "0.15.1",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",
@@ -3700,14 +3692,13 @@
 			}
 		},
 		"node_modules/svelte-preprocess": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.1.tgz",
-			"integrity": "sha512-0HXyhCoc9rsW4zGOgtInylC6qj259E1hpFnJMJWTf+aIfeqh4O/QHT31KT2hvPEqQfdjmqBR/kO2JDkkciBLrQ==",
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.3.tgz",
+			"integrity": "sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
 				"@types/pug": "^2.0.6",
-				"@types/sass": "^1.43.1",
 				"detect-indent": "^6.1.0",
 				"magic-string": "^0.27.0",
 				"sorcery": "^0.11.0",
@@ -3727,7 +3718,7 @@
 				"stylus": "^0.55.0",
 				"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
 				"svelte": "^3.23.0",
-				"typescript": "^3.9.5 || ^4.0.0"
+				"typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0"
 			},
 			"peerDependenciesMeta": {
 				"@babel/core": {
@@ -3962,15 +3953,15 @@
 			}
 		},
 		"node_modules/undici": {
-			"version": "5.20.0",
-			"resolved": "https://registry.npmjs.org/undici/-/undici-5.20.0.tgz",
-			"integrity": "sha512-J3j60dYzuo6Eevbawwp1sdg16k5Tf768bxYK4TUJRH7cBM4kFCbf3mOnM/0E3vQYXvpxITbbWmBafaDbxLDz3g==",
+			"version": "5.22.0",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-5.22.0.tgz",
+			"integrity": "sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==",
 			"dev": true,
 			"dependencies": {
 				"busboy": "^1.6.0"
 			},
 			"engines": {
-				"node": ">=12.18"
+				"node": ">=14.0"
 			}
 		},
 		"node_modules/unplugin": {

package.json

@@ -13,8 +13,8 @@
 	},
 	"devDependencies": {
 		"@iconify-json/carbon": "^1.1.16",
-		"@sveltejs/adapter-node": "^1.2.0",
-		"@sveltejs/kit": "^1.5.0",
+		"@sveltejs/adapter-node": "^1.2.4",
+		"@sveltejs/kit": "^1.15.10",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/marked": "^4.0.8",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -25,8 +25,8 @@
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"prettier-plugin-tailwindcss": "^0.2.7",
-		"svelte": "^3.54.0",
-		"svelte-check": "^3.0.1",
+		"svelte": "^3.58.0",
+		"svelte-check": "^3.2.0",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",
 		"unplugin-icons": "^0.16.1",

src/lib/actions/snapScrollToBottom.ts

@@ -8,7 +8,7 @@ const detachedOffset = 10;
  * @param node element to snap scroll to bottom
  * @param dependency pass in a dependency to update scroll on changes.
  */
-export const snapScrollToBottom = (node: HTMLElement, dependency: any) => {
+export const snapScrollToBottom = (node: HTMLElement, dependency: unknown) => {
 	let prevScrollValue = node.scrollTop;
 	let isDetached = false;
 

src/lib/buildPrompt.ts

@@ -12,7 +12,7 @@ import type { Message } from "./types/Message";
  *
  * <|assistant|>hi<|endoftext|><|prompter|>hello<|endoftext|><|assistant|>
  */
-export function buildPrompt(messages: Message[]): string {
+export function buildPrompt(messages: Pick<Message, "from" | "content">[]): string {
 	const prompt =
 		messages
 			.map(

src/lib/components/CopyToClipBoardBtn.svelte

@@ -8,7 +8,7 @@
 	export let value: string;
 
 	let isSuccess = false;
-	let timeout: any;
+	let timeout: ReturnType<typeof setTimeout>;
 
 	const handleClick = async () => {
 		// writeText() can be unavailable or fail in some cases (iframe, etc) so we try/catch

src/lib/components/EthicsModal.svelte

@@ -5,7 +5,7 @@
 	import type { Settings } from "$lib/types/Settings";
 	import { updateSettings } from "$lib/updateSettings";
 
-	export let settings: Omit<Settings, "sessionId">;
+	export let settings: Omit<Settings, "sessionId" | "createdAt" | "updatedAt">;
 </script>
 
 <Modal>

src/lib/components/ScrollToBottomBtn.svelte

@@ -6,7 +6,7 @@
 	export let scrollNode: HTMLElement;
 	export { className as class };
 
-	let visible: boolean = false;
+	let visible = false;
 	let className = "";
 	let observer: ResizeObserver | null = null;
 

src/lib/components/StopGeneratingBtn.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import CarbonPause from "~icons/carbon/pause-filled";
 
-	export let visible: boolean = false;
+	export let visible = false;
 	export let className = "";
 </script>
 

src/lib/components/chat/ChatMessage.svelte

@@ -25,13 +25,13 @@
 	}
 
 	export let message: Message;
-	export let loading: boolean = false;
+	export let loading = false;
 
 	const dispatch = createEventDispatcher<{ retry: void }>();
 
 	let contentEl: HTMLElement;
-	let loadingEl: any;
-	let pendingTimeout: NodeJS.Timeout;
+	let loadingEl: IconLoading;
+	let pendingTimeout: ReturnType<typeof setTimeout>;
 
 	const renderer = new marked.Renderer();
 

src/lib/components/chat/ChatWindow.svelte

@@ -11,9 +11,9 @@
 	import { PUBLIC_MODEL_ID, PUBLIC_MODEL_NAME } from "$env/static/public";
 
 	export let messages: Message[] = [];
-	export let disabled: boolean = false;
-	export let loading: boolean = false;
-	export let pending: boolean = false;
+	export let disabled = false;
+	export let loading = false;
+	export let pending = false;
 
 	let message: string;
 

src/lib/components/icons/IconChevron.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames: string = "";
+	export let classNames = "";
 </script>
 
 <svg

src/lib/components/icons/IconLoading.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames: string = "";
+	export let classNames = "";
 </script>
 
 <svg

src/lib/components/icons/Logo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames: string = "";
+	export let classNames = "";
 </script>
 
 <svg

src/routes/+layout.svelte

@@ -20,7 +20,7 @@
 
 	let isNavOpen = false;
 	let isSettingsOpen = false;
-	let errorToastTimeout: NodeJS.Timeout;
+	let errorToastTimeout: ReturnType<typeof setTimeout>;
 	let currentError: string | null;
 
 	async function onError() {

src/routes/conversation/[id]/+page.svelte

@@ -41,8 +41,8 @@
 					top_p: 0.95,
 					repetition_penalty: 1.2,
 					top_k: 50,
-					// @ts-ignore
 					truncate: parseInt(PUBLIC_MAX_INPUT_TOKENS),
+					// @ts-expect-error this param is not available in @huggingface/inference
 					watermark: false,
 					max_new_tokens: 1024,
 					stop: [PUBLIC_SEP_TOKEN],
@@ -56,10 +56,10 @@
 			}
 		);
 
-		for await (const data of response) {
+		for await (const output of response) {
 			pending = false;
 
-			if (!data) {
+			if (!output) {
 				break;
 			}
 
@@ -79,17 +79,17 @@
 			}
 
 			// final message
-			if (data.generated_text) {
+			if (output.generated_text) {
 				const lastMessage = messages[messages.length - 1];
 
 				if (lastMessage) {
-					lastMessage.content = data.generated_text;
+					lastMessage.content = output.generated_text;
 					messages = [...messages];
 				}
 				break;
 			}
 
-			if (!data.token.special) {
+			if (!output.token.special) {
 				const lastMessage = messages[messages.length - 1];
 
 				if (lastMessage?.from !== "assistant") {
@@ -97,10 +97,10 @@
 					messages = [
 						...messages,
 						// id doesn't match the backend id but it's not important for assistant messages
-						{ from: "assistant", content: data.token.text.trimStart(), id: randomUUID() },
+						{ from: "assistant", content: output.token.text.trimStart(), id: randomUUID() },
 					];
 				} else {
-					lastMessage.content += data.token.text;
+					lastMessage.content += output.token.text;
 					messages = [...messages];
 				}
 			}

src/routes/conversation/[id]/+server.ts

@@ -83,7 +83,11 @@ export async function POST({ request, fetch, locals, params }) {
 		signal: abortController.signal,
 	});
 
-	const [stream1, stream2] = resp.body!.tee();
+	if (!resp.body) {
+		throw new Error("Response body is empty");
+	}
+
+	const [stream1, stream2] = resp.body.tee();
 
 	async function saveMessage() {
 		let generated_text = await parseGeneratedText(stream2, convId, date, abortController);