Initial Commit, includes stubs from chat app
This commit is contained in:
27
.gitignore
vendored
Normal file
27
.gitignore
vendored
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
.vscode
|
||||||
|
.cursor
|
||||||
5
README.md
Normal file
5
README.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + TypeScript + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||||
24
components.json
Normal file
24
components.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://shadcn-vue.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"font": "playfair-display",
|
||||||
|
"typescript": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/style.css",
|
||||||
|
"baseColor": "mauve",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide",
|
||||||
|
"rtl": false,
|
||||||
|
"pointer": false,
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"composables": "@/composables"
|
||||||
|
},
|
||||||
|
"registries": {}
|
||||||
|
}
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>my-vue-app</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7394
package-lock.json
generated
Normal file
7394
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "my-vue-app",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc -b && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@lucide/vue": "^1.16.0",
|
||||||
|
"@tailwindcss/vite": "^4.3.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"reka-ui": "^2.9.8",
|
||||||
|
"tailwind-merge": "^3.6.0",
|
||||||
|
"tailwindcss": "^4.3.0",
|
||||||
|
"vue": "^3.5.34",
|
||||||
|
"vue-router": "^5.0.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^24.12.4",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.6",
|
||||||
|
"@vue/tsconfig": "^0.9.1",
|
||||||
|
"shadcn-vue": "^2.7.3",
|
||||||
|
"tw-animate-css": "^1.4.0",
|
||||||
|
"typescript": "~6.0.2",
|
||||||
|
"vite": "^8.0.12",
|
||||||
|
"vue-tsc": "^3.2.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
public/icons.svg
Normal file
24
public/icons.svg
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
7
src/App.vue
Normal file
7
src/App.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import HelloWorld from './components/HelloWorld.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<HelloWorld />
|
||||||
|
</template>
|
||||||
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
1
src/assets/vite.svg
Normal file
1
src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
29
src/boot/app.ts
Normal file
29
src/boot/app.ts
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import { App } from '../services/app'
|
||||||
|
|
||||||
|
import type { App as VueApp } from 'vue'
|
||||||
|
import type { Router } from 'vue-router'
|
||||||
|
|
||||||
|
export default async ({
|
||||||
|
app: vueApp,
|
||||||
|
router,
|
||||||
|
}: {
|
||||||
|
app: VueApp
|
||||||
|
router: Router
|
||||||
|
}): Promise<void> => {
|
||||||
|
console.log('booting app')
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Instantiate new app instance.
|
||||||
|
const app = await App.create(router, { apiUrl: 'http://localhost:3000' })
|
||||||
|
|
||||||
|
// Inject the app instance so that all children can access it.
|
||||||
|
vueApp.provide('app', app)
|
||||||
|
} catch (error) {
|
||||||
|
// Log the error to the console.
|
||||||
|
console.error(error)
|
||||||
|
// Create a dialog that never resolves so execution does not continue.
|
||||||
|
await new Promise(() => {
|
||||||
|
alert(`Failed to initialize app: ${error}`)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
31
src/components/ui/button/Button.vue
Normal file
31
src/components/ui/button/Button.vue
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { PrimitiveProps } from "reka-ui"
|
||||||
|
import type { HTMLAttributes } from "vue"
|
||||||
|
import type { ButtonVariants } from "."
|
||||||
|
import { Primitive } from "reka-ui"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { buttonVariants } from "."
|
||||||
|
|
||||||
|
interface Props extends PrimitiveProps {
|
||||||
|
variant?: ButtonVariants["variant"]
|
||||||
|
size?: ButtonVariants["size"]
|
||||||
|
class?: HTMLAttributes["class"]
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
as: "button",
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Primitive
|
||||||
|
data-slot="button"
|
||||||
|
:data-variant="variant"
|
||||||
|
:data-size="size"
|
||||||
|
:as="as"
|
||||||
|
:as-child="asChild"
|
||||||
|
:class="cn(buttonVariants({ variant, size }), props.class)"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</Primitive>
|
||||||
|
</template>
|
||||||
38
src/components/ui/button/index.ts
Normal file
38
src/components/ui/button/index.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import type { VariantProps } from "class-variance-authority"
|
||||||
|
import { cva } from "class-variance-authority"
|
||||||
|
|
||||||
|
export { default as Button } from "./Button.vue"
|
||||||
|
|
||||||
|
export const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
"default": "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
"sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
"lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
"icon": "size-9",
|
||||||
|
"icon-sm": "size-8",
|
||||||
|
"icon-lg": "size-10",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
export type ButtonVariants = VariantProps<typeof buttonVariants>
|
||||||
7
src/lib/utils.ts
Normal file
7
src/lib/utils.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import type { ClassValue } from "clsx"
|
||||||
|
import { clsx } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
18
src/main.ts
Normal file
18
src/main.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
|
||||||
|
import App from './App.vue';
|
||||||
|
import router from './router/index.js';
|
||||||
|
import bootApp from './boot/app.js';
|
||||||
|
|
||||||
|
import './style.css';
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
|
||||||
|
app.use(router);
|
||||||
|
|
||||||
|
await bootApp({
|
||||||
|
app,
|
||||||
|
router,
|
||||||
|
});
|
||||||
|
|
||||||
|
app.mount('#app');
|
||||||
14
src/pages/HomePage.vue
Normal file
14
src/pages/HomePage.vue
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="home-page">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
25
src/router/index.ts
Normal file
25
src/router/index.ts
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
|
|
||||||
|
import HomePage from '@/pages/HomePage.vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Application routes.
|
||||||
|
*/
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: HomePage,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Vue Router instance.
|
||||||
|
*/
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
|
|
||||||
213
src/services/api-client.ts
Normal file
213
src/services/api-client.ts
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
import { EventEmitter } from "../utils/event-emitter";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
export interface ApiClientOptions {
|
||||||
|
baseUrl: string;
|
||||||
|
tokens: AuthTokens;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AuthTokens = {
|
||||||
|
accessToken: string;
|
||||||
|
accessTokenExpiresAt: number;
|
||||||
|
refreshToken: string;
|
||||||
|
refreshTokenExpiresAt: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ApiClientEventMap = {
|
||||||
|
'tokens-refreshed': AuthTokens;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ApiClient extends EventEmitter<ApiClientEventMap> {
|
||||||
|
static AUTH_TOKENS_SCHEMA = z.object({
|
||||||
|
accessToken: z.string(),
|
||||||
|
accessTokenExpiresAt: z.number(),
|
||||||
|
refreshToken: z.string(),
|
||||||
|
refreshTokenExpiresAt: z.number(),
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* API responses for token refresh can omit `accessTokenExpiresAt` today, so
|
||||||
|
* this schema intentionally keeps the expiration optional and lets us derive it
|
||||||
|
* from the token payload when needed.
|
||||||
|
*/
|
||||||
|
private static AUTH_TOKEN_REFRESH_RESPONSE_SCHEMA = z.object({
|
||||||
|
accessToken: z.string(),
|
||||||
|
accessTokenExpiresAt: z.number().optional(),
|
||||||
|
refreshToken: z.string().optional(),
|
||||||
|
refreshTokenExpiresAt: z.number().optional(),
|
||||||
|
})
|
||||||
|
|
||||||
|
private baseUrl: string;
|
||||||
|
private tokens: AuthTokens;
|
||||||
|
|
||||||
|
constructor(options: ApiClientOptions) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
// validate the tokens
|
||||||
|
const { refreshToken, refreshTokenExpiresAt } = options.tokens;
|
||||||
|
const accessTokenExpiresAt = ApiClient.resolveAccessTokenExpiresAt(
|
||||||
|
options.tokens.accessToken,
|
||||||
|
options.tokens.accessTokenExpiresAt,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (typeof accessTokenExpiresAt !== "number" || Number.isNaN(accessTokenExpiresAt)) {
|
||||||
|
throw new Error("Failed to resolve access token expiration from token payload");
|
||||||
|
}
|
||||||
|
|
||||||
|
// If we have no refresh token or its expired, don't create the client
|
||||||
|
if (!refreshToken || !refreshTokenExpiresAt || refreshTokenExpiresAt < Date.now()) {
|
||||||
|
throw new Error('No refresh token found for user during creation');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create the client
|
||||||
|
this.baseUrl = options.baseUrl;
|
||||||
|
this.tokens = {
|
||||||
|
...options.tokens,
|
||||||
|
accessTokenExpiresAt,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send a JSON request to the API and return the parsed response.
|
||||||
|
* @param path - The path to the API endpoint.
|
||||||
|
* @param options - The options for the request.
|
||||||
|
* @returns The parsed response.
|
||||||
|
*/
|
||||||
|
public async request<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||||
|
const headers: Record<string, any> = {
|
||||||
|
...(options.headers || {}),
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.body !== undefined && options.body !== null && options.body !== '') {
|
||||||
|
headers['Content-Type'] = 'application/json';
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await this.requestRaw(path, {
|
||||||
|
...options,
|
||||||
|
headers,
|
||||||
|
});
|
||||||
|
return response.json() as Promise<T>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send a request to the API and return the raw response.
|
||||||
|
* @param path - The path to the API endpoint.
|
||||||
|
* @param options - The options for the request.
|
||||||
|
* @returns The raw response.
|
||||||
|
*/
|
||||||
|
public async requestRaw(path: string, options: RequestInit = {}): Promise<Response> {
|
||||||
|
// First, we are going to check if we need to refresh the tokens
|
||||||
|
if (this.tokens.accessTokenExpiresAt < Date.now()) {
|
||||||
|
console.log('Access Token Expired At:', new Date(this.tokens.accessTokenExpiresAt).toLocaleString('en-AU'));
|
||||||
|
await this.refreshTokens();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.headers && options.headers instanceof Headers) {
|
||||||
|
options.headers = Object.fromEntries(options.headers.entries());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make the request
|
||||||
|
const response = await fetch(`${this.baseUrl}${path}`, {
|
||||||
|
...options,
|
||||||
|
headers: {
|
||||||
|
...options.headers,
|
||||||
|
'Authorization': `Bearer ${this.tokens.accessToken}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return response;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh the tokens for the API client.
|
||||||
|
* @returns The new tokens.
|
||||||
|
*/
|
||||||
|
public async refreshTokens(): Promise<AuthTokens> {
|
||||||
|
// We need to refresh the tokens
|
||||||
|
const response = await fetch(`${this.baseUrl}/users/refresh`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ refreshToken: this.tokens.refreshToken }),
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// If the response is not ok, throw an error
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`API request failed (${response.status} ${response.statusText}): ${await response.text()}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parse the response
|
||||||
|
const data = ApiClient.AUTH_TOKEN_REFRESH_RESPONSE_SCHEMA.parse(await response.json());
|
||||||
|
|
||||||
|
const accessTokenExpiresAt = ApiClient.resolveAccessTokenExpiresAt(
|
||||||
|
data.accessToken,
|
||||||
|
data.accessTokenExpiresAt,
|
||||||
|
);
|
||||||
|
if (typeof accessTokenExpiresAt !== "number" || Number.isNaN(accessTokenExpiresAt)) {
|
||||||
|
throw new Error("Failed to resolve access token expiration from token refresh response");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the tokens
|
||||||
|
this.tokens = {
|
||||||
|
accessToken: data.accessToken,
|
||||||
|
accessTokenExpiresAt,
|
||||||
|
refreshToken: data.refreshToken ?? this.tokens.refreshToken,
|
||||||
|
refreshTokenExpiresAt: data.refreshTokenExpiresAt ?? this.tokens.refreshTokenExpiresAt,
|
||||||
|
};
|
||||||
|
this.emit('tokens-refreshed', this.tokens);
|
||||||
|
return this.tokens;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resolve the access token expiration timestamp.
|
||||||
|
*
|
||||||
|
* If `accessTokenExpiresAt` is missing, we parse the token payload from the
|
||||||
|
* first segment and read `expiresAt`.
|
||||||
|
*
|
||||||
|
* @param accessToken - Signed token in `payload.signature` format.
|
||||||
|
* @param accessTokenExpiresAt - Optional explicit expiresAt value from API payload.
|
||||||
|
* @returns The parsed expiration timestamp in milliseconds.
|
||||||
|
*/
|
||||||
|
private static resolveAccessTokenExpiresAt(
|
||||||
|
accessToken: string,
|
||||||
|
accessTokenExpiresAt?: number,
|
||||||
|
): number | undefined {
|
||||||
|
if (typeof accessTokenExpiresAt === "number") {
|
||||||
|
return accessTokenExpiresAt;
|
||||||
|
}
|
||||||
|
|
||||||
|
return ApiClient.parseAccessTokenExpiresAt(accessToken);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Read the `expiresAt` field from the base64url payload of the token.
|
||||||
|
*
|
||||||
|
* The token format is `base64urlPayload.base64PayloadSignature`.
|
||||||
|
*
|
||||||
|
* @param accessToken - Signed access token.
|
||||||
|
* @returns The expiresAt value from payload, when parseable.
|
||||||
|
*/
|
||||||
|
private static parseAccessTokenExpiresAt(accessToken: string): number | undefined {
|
||||||
|
const [encodedPayload] = accessToken.split(".");
|
||||||
|
if (!encodedPayload) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalizedPayload = encodedPayload
|
||||||
|
.replace(/-/g, '+')
|
||||||
|
.replace(/_/g, '/');
|
||||||
|
const paddedPayload = normalizedPayload + "=".repeat((4 - (normalizedPayload.length % 4)) % 4);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const payloadJson = atob(paddedPayload);
|
||||||
|
const payload = JSON.parse(payloadJson) as { expiresAt?: number };
|
||||||
|
if (typeof payload.expiresAt !== "number") {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return payload.expiresAt;
|
||||||
|
} catch {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
43
src/services/app.ts
Normal file
43
src/services/app.ts
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import { inject } from 'vue';
|
||||||
|
import { type Router } from 'vue-router';
|
||||||
|
|
||||||
|
export type AppDependencies = {
|
||||||
|
router: Router;
|
||||||
|
apiUrl: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export class App {
|
||||||
|
//---------------------------------------------------------------------------
|
||||||
|
// Initialization
|
||||||
|
//---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
public router: Router;
|
||||||
|
public apiUrl: string;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
dependencies: AppDependencies
|
||||||
|
) {
|
||||||
|
this.router = dependencies.router;
|
||||||
|
this.apiUrl = dependencies.apiUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
static async create(router: Router, { apiUrl }: { apiUrl: string }) {
|
||||||
|
// Create new instance of app.
|
||||||
|
return new this(
|
||||||
|
{
|
||||||
|
router,
|
||||||
|
apiUrl,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// Composition API
|
||||||
|
// Boilerplate for Vue3, so we can call useApp() to get the app instance inside a component.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
export function useApp() {
|
||||||
|
const app = inject<App>('app');
|
||||||
|
if (!app) throw new Error('App not properly initialized');
|
||||||
|
return app;
|
||||||
|
}
|
||||||
181
src/services/modals/catalog.ts
Normal file
181
src/services/modals/catalog.ts
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
import { EventEmitter } from "../utils/event-emitter.js";
|
||||||
|
import z from "zod";
|
||||||
|
import { ref, shallowRef, triggerRef, type Ref, type ShallowRef } from "vue";
|
||||||
|
|
||||||
|
export type MessageEventMap = {
|
||||||
|
'deleted': void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MessageDependencies = {
|
||||||
|
apiClient: ApiClient
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MessageCreateOptions = {
|
||||||
|
hydratePartsFromStorage?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MessageSchema = z.infer<typeof Message.MESSAGE_SCHEMA>
|
||||||
|
|
||||||
|
export class Message extends EventEmitter<MessageEventMap> {
|
||||||
|
static MESSAGE_SCHEMA = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
chatId: z.string(),
|
||||||
|
branchId: z.string().nullable().optional(),
|
||||||
|
branchOrdinal: z.number().nullable().optional(),
|
||||||
|
parentMessageId: z.string().nullable().optional(),
|
||||||
|
role: z.enum(["user", "assistant", "system", "tool"]),
|
||||||
|
status: z.string().nullable().optional(),
|
||||||
|
createdAt: z.number(),
|
||||||
|
updatedAt: z.number().optional(),
|
||||||
|
|
||||||
|
contentParts: z.array(MessagePart.MESSAGE_PART_SCHEMA).optional(),
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Async generator that yields messages one-by-one in reverse chronological
|
||||||
|
* order (newest first). Raw message data is bulk-loaded and sorted upfront
|
||||||
|
* (fast), then each Message instance is created and yielded individually so
|
||||||
|
* the consumer can render recent messages immediately.
|
||||||
|
*/
|
||||||
|
static async *fromStorage(deps: MessageDependencies): AsyncGenerator<Message> {
|
||||||
|
const { storage } = deps
|
||||||
|
const messageIds = await storage.keys()
|
||||||
|
if (messageIds.length === 0) return
|
||||||
|
|
||||||
|
// Bulk-load raw message data so we can sort before creating instances.
|
||||||
|
// IndexedDB reads are fast; the expensive work is creating Message
|
||||||
|
// instances and loading their parts.
|
||||||
|
const rawMessages = (await Promise.all(
|
||||||
|
messageIds.map(async (messageId) => storage.get<MessageSchema>(messageId))
|
||||||
|
)).filter((m): m is MessageSchema => m !== null)
|
||||||
|
|
||||||
|
// Sort newest-first so the most recent messages are yielded first
|
||||||
|
rawMessages.sort((a, b) => b.createdAt - a.createdAt)
|
||||||
|
|
||||||
|
for (const message of rawMessages) {
|
||||||
|
yield await Message.create(deps, message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static async create(
|
||||||
|
deps: MessageDependencies,
|
||||||
|
message: MessageSchema,
|
||||||
|
options: MessageCreateOptions = {},
|
||||||
|
): Promise<Message> {
|
||||||
|
const { storage } = deps
|
||||||
|
|
||||||
|
const messageStore = storage.child(message.id)
|
||||||
|
|
||||||
|
const messageInstance = new Message({ ...deps, storage: messageStore }, message)
|
||||||
|
if (message.contentParts?.length) {
|
||||||
|
await messageInstance.mergeInitialParts(message.contentParts)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.hydratePartsFromStorage === false) {
|
||||||
|
await messageInstance.saveToStorage()
|
||||||
|
return messageInstance
|
||||||
|
}
|
||||||
|
|
||||||
|
await messageInstance.start();
|
||||||
|
return messageInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
private deps: MessageDependencies;
|
||||||
|
|
||||||
|
public data: Ref<MessageSchema> = ref<MessageSchema>({
|
||||||
|
id: '',
|
||||||
|
chatId: '',
|
||||||
|
branchId: null,
|
||||||
|
branchOrdinal: null,
|
||||||
|
parentMessageId: null,
|
||||||
|
role: 'user',
|
||||||
|
status: 'pending',
|
||||||
|
createdAt: Date.now(),
|
||||||
|
updatedAt: Date.now(),
|
||||||
|
})
|
||||||
|
|
||||||
|
public parts: ShallowRef<ExtMap<MessagePart>> = shallowRef<ExtMap<MessagePart>>(new ExtMap<MessagePart>())
|
||||||
|
|
||||||
|
constructor(deps: MessageDependencies, message: MessageSchema) {
|
||||||
|
super();
|
||||||
|
this.deps = deps;
|
||||||
|
|
||||||
|
const messageData: MessageSchema = { ...message }
|
||||||
|
delete messageData.contentParts
|
||||||
|
// Set the message's data
|
||||||
|
this.data.value = messageData;
|
||||||
|
}
|
||||||
|
|
||||||
|
async start(): Promise<void> {
|
||||||
|
// Load all parts in parallel but merge each one as soon as its data
|
||||||
|
// resolves. This is faster than sequential iteration (parts per message
|
||||||
|
// are few) while still triggering reactivity incrementally.
|
||||||
|
const partsStorage = this.deps.storage.child('message-parts')
|
||||||
|
const partIds = await partsStorage.keys()
|
||||||
|
|
||||||
|
await Promise.all(partIds.map(async (partId) => {
|
||||||
|
const partData = await partsStorage.get<MessagePartSchema>(partId)
|
||||||
|
if (!partData) return
|
||||||
|
await this.mergePart(partData)
|
||||||
|
}))
|
||||||
|
|
||||||
|
this.saveToStorage();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async mergeInitialParts(parts: MessagePartSchema[]): Promise<void> {
|
||||||
|
for (const part of parts) {
|
||||||
|
await this.mergePart(part)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public async saveToStorage(): Promise<void> {
|
||||||
|
await this.deps.storage.set(this.data.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async mergePart(part: MessagePartSchema): Promise<void> {
|
||||||
|
const existing = this.parts.value.get(part.id);
|
||||||
|
if (existing) {
|
||||||
|
existing.data.value = part;
|
||||||
|
await existing.saveToStorage();
|
||||||
|
} else {
|
||||||
|
const partInstance = await MessagePart.create({ ...this.deps, storage: this.deps.storage.child('message-parts') }, part);
|
||||||
|
this.parts.value.set(partInstance.data.value.id, partInstance);
|
||||||
|
|
||||||
|
partInstance.on('deleted', () => this.removePart(partInstance.data.value));
|
||||||
|
}
|
||||||
|
|
||||||
|
triggerRef(this.parts);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async addPart(part: MessagePartSchema): Promise<void> {
|
||||||
|
await this.mergePart(part);
|
||||||
|
triggerRef(this.parts);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async updatePart(part: MessagePartSchema): Promise<void> {
|
||||||
|
await this.mergePart(part);
|
||||||
|
triggerRef(this.parts);
|
||||||
|
}
|
||||||
|
|
||||||
|
public removePart(part: MessagePartSchema): void {
|
||||||
|
this.parts.value.delete(part.id);
|
||||||
|
this.deps.storage
|
||||||
|
.child('message-parts')
|
||||||
|
.child(part.id)
|
||||||
|
.clear()
|
||||||
|
.catch((error) => console.error('Failed to clear deleted message part from storage:', error));
|
||||||
|
triggerRef(this.parts);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async delete(): Promise<void> {
|
||||||
|
await this.deps.apiClient.requestRaw(`/messages/${this.data.value.id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
await this.deps.storage.delete();
|
||||||
|
this.parts.value.forEach(part => part.delete());
|
||||||
|
this.parts.value.clear();
|
||||||
|
triggerRef(this.parts);
|
||||||
|
|
||||||
|
this.emit('deleted', undefined);
|
||||||
|
}
|
||||||
|
}
|
||||||
188
src/services/modals/invitation.ts
Normal file
188
src/services/modals/invitation.ts
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
import { EventEmitter } from "../utils/event-emitter.js";
|
||||||
|
import z from "zod";
|
||||||
|
import { ref, shallowRef, triggerRef, type Ref, type ShallowRef } from "vue";
|
||||||
|
|
||||||
|
import type { BaseStore } from "./storage/base-store.js";
|
||||||
|
import type { ApiClient } from "./api-client.js";
|
||||||
|
|
||||||
|
import { ExtMap } from "../utils/ext-map.js";
|
||||||
|
import { MessagePart, type MessagePartSchema } from './message-part.js';
|
||||||
|
|
||||||
|
export type MessageEventMap = {
|
||||||
|
'deleted': void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MessageDependencies = {
|
||||||
|
storage: BaseStore
|
||||||
|
apiClient: ApiClient
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MessageCreateOptions = {
|
||||||
|
hydratePartsFromStorage?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MessageSchema = z.infer<typeof Message.MESSAGE_SCHEMA>
|
||||||
|
|
||||||
|
export class Message extends EventEmitter<MessageEventMap> {
|
||||||
|
static MESSAGE_SCHEMA = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
chatId: z.string(),
|
||||||
|
branchId: z.string().nullable().optional(),
|
||||||
|
branchOrdinal: z.number().nullable().optional(),
|
||||||
|
parentMessageId: z.string().nullable().optional(),
|
||||||
|
role: z.enum(["user", "assistant", "system", "tool"]),
|
||||||
|
status: z.string().nullable().optional(),
|
||||||
|
createdAt: z.number(),
|
||||||
|
updatedAt: z.number().optional(),
|
||||||
|
|
||||||
|
contentParts: z.array(MessagePart.MESSAGE_PART_SCHEMA).optional(),
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Async generator that yields messages one-by-one in reverse chronological
|
||||||
|
* order (newest first). Raw message data is bulk-loaded and sorted upfront
|
||||||
|
* (fast), then each Message instance is created and yielded individually so
|
||||||
|
* the consumer can render recent messages immediately.
|
||||||
|
*/
|
||||||
|
static async *fromStorage(deps: MessageDependencies): AsyncGenerator<Message> {
|
||||||
|
const { storage } = deps
|
||||||
|
const messageIds = await storage.keys()
|
||||||
|
if (messageIds.length === 0) return
|
||||||
|
|
||||||
|
// Bulk-load raw message data so we can sort before creating instances.
|
||||||
|
// IndexedDB reads are fast; the expensive work is creating Message
|
||||||
|
// instances and loading their parts.
|
||||||
|
const rawMessages = (await Promise.all(
|
||||||
|
messageIds.map(async (messageId) => storage.get<MessageSchema>(messageId))
|
||||||
|
)).filter((m): m is MessageSchema => m !== null)
|
||||||
|
|
||||||
|
// Sort newest-first so the most recent messages are yielded first
|
||||||
|
rawMessages.sort((a, b) => b.createdAt - a.createdAt)
|
||||||
|
|
||||||
|
for (const message of rawMessages) {
|
||||||
|
yield await Message.create(deps, message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static async create(
|
||||||
|
deps: MessageDependencies,
|
||||||
|
message: MessageSchema,
|
||||||
|
options: MessageCreateOptions = {},
|
||||||
|
): Promise<Message> {
|
||||||
|
const { storage } = deps
|
||||||
|
|
||||||
|
const messageStore = storage.child(message.id)
|
||||||
|
|
||||||
|
const messageInstance = new Message({ ...deps, storage: messageStore }, message)
|
||||||
|
if (message.contentParts?.length) {
|
||||||
|
await messageInstance.mergeInitialParts(message.contentParts)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.hydratePartsFromStorage === false) {
|
||||||
|
await messageInstance.saveToStorage()
|
||||||
|
return messageInstance
|
||||||
|
}
|
||||||
|
|
||||||
|
await messageInstance.start();
|
||||||
|
return messageInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
private deps: MessageDependencies;
|
||||||
|
|
||||||
|
public data: Ref<MessageSchema> = ref<MessageSchema>({
|
||||||
|
id: '',
|
||||||
|
chatId: '',
|
||||||
|
branchId: null,
|
||||||
|
branchOrdinal: null,
|
||||||
|
parentMessageId: null,
|
||||||
|
role: 'user',
|
||||||
|
status: 'pending',
|
||||||
|
createdAt: Date.now(),
|
||||||
|
updatedAt: Date.now(),
|
||||||
|
})
|
||||||
|
|
||||||
|
public parts: ShallowRef<ExtMap<MessagePart>> = shallowRef<ExtMap<MessagePart>>(new ExtMap<MessagePart>())
|
||||||
|
|
||||||
|
constructor(deps: MessageDependencies, message: MessageSchema) {
|
||||||
|
super();
|
||||||
|
this.deps = deps;
|
||||||
|
|
||||||
|
const messageData: MessageSchema = { ...message }
|
||||||
|
delete messageData.contentParts
|
||||||
|
// Set the message's data
|
||||||
|
this.data.value = messageData;
|
||||||
|
}
|
||||||
|
|
||||||
|
async start(): Promise<void> {
|
||||||
|
// Load all parts in parallel but merge each one as soon as its data
|
||||||
|
// resolves. This is faster than sequential iteration (parts per message
|
||||||
|
// are few) while still triggering reactivity incrementally.
|
||||||
|
const partsStorage = this.deps.storage.child('message-parts')
|
||||||
|
const partIds = await partsStorage.keys()
|
||||||
|
|
||||||
|
await Promise.all(partIds.map(async (partId) => {
|
||||||
|
const partData = await partsStorage.get<MessagePartSchema>(partId)
|
||||||
|
if (!partData) return
|
||||||
|
await this.mergePart(partData)
|
||||||
|
}))
|
||||||
|
|
||||||
|
this.saveToStorage();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async mergeInitialParts(parts: MessagePartSchema[]): Promise<void> {
|
||||||
|
for (const part of parts) {
|
||||||
|
await this.mergePart(part)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public async saveToStorage(): Promise<void> {
|
||||||
|
await this.deps.storage.set(this.data.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async mergePart(part: MessagePartSchema): Promise<void> {
|
||||||
|
const existing = this.parts.value.get(part.id);
|
||||||
|
if (existing) {
|
||||||
|
existing.data.value = part;
|
||||||
|
await existing.saveToStorage();
|
||||||
|
} else {
|
||||||
|
const partInstance = await MessagePart.create({ ...this.deps, storage: this.deps.storage.child('message-parts') }, part);
|
||||||
|
this.parts.value.set(partInstance.data.value.id, partInstance);
|
||||||
|
|
||||||
|
partInstance.on('deleted', () => this.removePart(partInstance.data.value));
|
||||||
|
}
|
||||||
|
|
||||||
|
triggerRef(this.parts);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async addPart(part: MessagePartSchema): Promise<void> {
|
||||||
|
await this.mergePart(part);
|
||||||
|
triggerRef(this.parts);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async updatePart(part: MessagePartSchema): Promise<void> {
|
||||||
|
await this.mergePart(part);
|
||||||
|
triggerRef(this.parts);
|
||||||
|
}
|
||||||
|
|
||||||
|
public removePart(part: MessagePartSchema): void {
|
||||||
|
this.parts.value.delete(part.id);
|
||||||
|
this.deps.storage
|
||||||
|
.child('message-parts')
|
||||||
|
.child(part.id)
|
||||||
|
.clear()
|
||||||
|
.catch((error) => console.error('Failed to clear deleted message part from storage:', error));
|
||||||
|
triggerRef(this.parts);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async delete(): Promise<void> {
|
||||||
|
await this.deps.apiClient.requestRaw(`/messages/${this.data.value.id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
await this.deps.storage.delete();
|
||||||
|
this.parts.value.forEach(part => part.delete());
|
||||||
|
this.parts.value.clear();
|
||||||
|
triggerRef(this.parts);
|
||||||
|
|
||||||
|
this.emit('deleted', undefined);
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src/style.css
Normal file
20
src/style.css
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');
|
||||||
|
|
||||||
|
@import "tailwindcss";
|
||||||
|
@import "tw-animate-css";
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--font-heading: var(--font-serif);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
152
src/utils/event-emitter.ts
Normal file
152
src/utils/event-emitter.ts
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
// TODO: You'll probably want to use WeakRef's here.
|
||||||
|
|
||||||
|
export type EventMap = Record<string, unknown>;
|
||||||
|
|
||||||
|
type Listener<T> = (detail: T) => void;
|
||||||
|
|
||||||
|
interface ListenerEntry<T> {
|
||||||
|
listener: Listener<T>;
|
||||||
|
wrappedListener: Listener<T>;
|
||||||
|
debounceTime?: number;
|
||||||
|
once?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type OffCallback = () => void;
|
||||||
|
|
||||||
|
export class EventEmitter<T extends EventMap> {
|
||||||
|
private listeners: Map<keyof T, Set<ListenerEntry<T[keyof T]>>> = new Map();
|
||||||
|
|
||||||
|
on<K extends keyof T>(
|
||||||
|
type: K,
|
||||||
|
listener: Listener<T[K]>,
|
||||||
|
debounceMilliseconds?: number,
|
||||||
|
): OffCallback {
|
||||||
|
const wrappedListener =
|
||||||
|
debounceMilliseconds && debounceMilliseconds > 0
|
||||||
|
? this.debounce(listener, debounceMilliseconds)
|
||||||
|
: listener;
|
||||||
|
|
||||||
|
if (!this.listeners.has(type)) {
|
||||||
|
this.listeners.set(type, new Set());
|
||||||
|
}
|
||||||
|
|
||||||
|
const listenerEntry: ListenerEntry<T[K]> = {
|
||||||
|
listener,
|
||||||
|
wrappedListener,
|
||||||
|
debounceTime: debounceMilliseconds,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.listeners.get(type)?.add(listenerEntry as ListenerEntry<T[keyof T]>);
|
||||||
|
|
||||||
|
// Return an "off" callback that can be called to stop listening for events.
|
||||||
|
return () => this.off(type, listener);
|
||||||
|
}
|
||||||
|
|
||||||
|
once<K extends keyof T>(
|
||||||
|
type: K,
|
||||||
|
listener: Listener<T[K]>,
|
||||||
|
debounceMilliseconds?: number,
|
||||||
|
): OffCallback {
|
||||||
|
const wrappedListener: Listener<T[K]> = (detail: T[K]) => {
|
||||||
|
this.off(type, listener);
|
||||||
|
listener(detail);
|
||||||
|
};
|
||||||
|
|
||||||
|
const debouncedListener =
|
||||||
|
debounceMilliseconds && debounceMilliseconds > 0
|
||||||
|
? this.debounce(wrappedListener, debounceMilliseconds)
|
||||||
|
: wrappedListener;
|
||||||
|
|
||||||
|
if (!this.listeners.has(type)) {
|
||||||
|
this.listeners.set(type, new Set());
|
||||||
|
}
|
||||||
|
|
||||||
|
const listenerEntry: ListenerEntry<T[K]> = {
|
||||||
|
listener,
|
||||||
|
wrappedListener: debouncedListener,
|
||||||
|
debounceTime: debounceMilliseconds,
|
||||||
|
once: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.listeners.get(type)?.add(listenerEntry as ListenerEntry<T[keyof T]>);
|
||||||
|
|
||||||
|
// Return an "off" callback that can be called to stop listening for events.
|
||||||
|
return () => this.off(type, listener);
|
||||||
|
}
|
||||||
|
|
||||||
|
off<K extends keyof T>(type: K, listener: Listener<T[K]>): void {
|
||||||
|
const listeners = this.listeners.get(type);
|
||||||
|
if (!listeners) return;
|
||||||
|
|
||||||
|
const listenerEntry = Array.from(listeners).find(
|
||||||
|
(entry) =>
|
||||||
|
entry.listener === listener || entry.wrappedListener === listener,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (listenerEntry) {
|
||||||
|
listeners.delete(listenerEntry);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
emit<K extends keyof T>(type: K, payload: T[K]): boolean {
|
||||||
|
const listeners = this.listeners.get(type);
|
||||||
|
if (!listeners) return false;
|
||||||
|
|
||||||
|
listeners.forEach((entry) => {
|
||||||
|
entry.wrappedListener(payload);
|
||||||
|
});
|
||||||
|
|
||||||
|
return listeners.size > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
removeAllListeners(): void {
|
||||||
|
this.listeners.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
async waitFor<K extends keyof T>(
|
||||||
|
type: K,
|
||||||
|
predicate: (payload: T[K]) => boolean,
|
||||||
|
timeoutMs?: number,
|
||||||
|
): Promise<T[K]> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let timeoutId: ReturnType<typeof setTimeout> | undefined;
|
||||||
|
|
||||||
|
const listener = (payload: T[K]) => {
|
||||||
|
if (predicate(payload)) {
|
||||||
|
// Clean up
|
||||||
|
this.off(type, listener);
|
||||||
|
if (timeoutId !== undefined) {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
}
|
||||||
|
resolve(payload);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Set up timeout if specified
|
||||||
|
if (timeoutMs !== undefined) {
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
|
this.off(type, listener);
|
||||||
|
reject(new Error(`Timeout waiting for event "${String(type)}"`));
|
||||||
|
}, timeoutMs);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.on(type, listener);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private debounce<K extends keyof T>(
|
||||||
|
func: Listener<T[K]>,
|
||||||
|
wait: number,
|
||||||
|
): Listener<T[K]> {
|
||||||
|
let timeout: ReturnType<typeof setTimeout>;
|
||||||
|
|
||||||
|
return (detail: T[K]) => {
|
||||||
|
if (timeout !== null) {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
timeout = setTimeout(() => {
|
||||||
|
func(detail);
|
||||||
|
}, wait);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
156
src/utils/exponential-backoff.ts
Normal file
156
src/utils/exponential-backoff.ts
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
/**
|
||||||
|
* Exponential backoff is a technique used to retry a function after a delay.
|
||||||
|
*
|
||||||
|
* The delay increases exponentially with each attempt, up to a maximum delay.
|
||||||
|
*
|
||||||
|
* The jitter is a random amount of time added to the delay to prevent thundering herd problems.
|
||||||
|
*
|
||||||
|
* The growth rate is the factor by which the delay increases with each attempt.
|
||||||
|
*/
|
||||||
|
export class ExponentialBackoff {
|
||||||
|
/**
|
||||||
|
* Create a new ExponentialBackoff instance
|
||||||
|
*
|
||||||
|
* @param config - The configuration for the exponential backoff
|
||||||
|
* @returns The ExponentialBackoff instance
|
||||||
|
*/
|
||||||
|
static from(config?: Partial<ExponentialBackoffOptions>): ExponentialBackoff {
|
||||||
|
const backoff = new ExponentialBackoff(config);
|
||||||
|
return backoff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Run the function with exponential backoff
|
||||||
|
*
|
||||||
|
* @param fn - The function to run
|
||||||
|
* @param onError - The callback to call when an error occurs
|
||||||
|
* @param options - The configuration for the exponential backoff
|
||||||
|
*
|
||||||
|
* @throws The last error if the function fails and we have hit the max attempts
|
||||||
|
*
|
||||||
|
* @returns The result of the function
|
||||||
|
*/
|
||||||
|
static run<T>(
|
||||||
|
fn: () => Promise<T>,
|
||||||
|
onError = (_error: Error) => {},
|
||||||
|
options?: Partial<ExponentialBackoffOptions>,
|
||||||
|
): Promise<T> {
|
||||||
|
const backoff = ExponentialBackoff.from(options);
|
||||||
|
return backoff.run(fn, onError);
|
||||||
|
}
|
||||||
|
|
||||||
|
private readonly options: ExponentialBackoffOptions;
|
||||||
|
|
||||||
|
constructor(options?: Partial<ExponentialBackoffOptions>) {
|
||||||
|
this.options = {
|
||||||
|
maxDelay: 10000,
|
||||||
|
maxAttempts: 10,
|
||||||
|
baseDelay: 1000,
|
||||||
|
growthRate: 2,
|
||||||
|
jitter: 0.1,
|
||||||
|
...options,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Run the function with exponential backoff
|
||||||
|
*
|
||||||
|
* If the function fails but we have not hit the max attempts, the error will be passed to the onError callback
|
||||||
|
* and the function will be retried with an exponential delay
|
||||||
|
*
|
||||||
|
* If the function fails and we have hit the max attempts, the last error will be thrown
|
||||||
|
*
|
||||||
|
* @param fn - The function to run
|
||||||
|
* @param onError - The callback to call when an error occurs
|
||||||
|
*
|
||||||
|
* @throws The last error if the function fails and we have hit the max attempts
|
||||||
|
*
|
||||||
|
* @returns The result of the function
|
||||||
|
*/
|
||||||
|
async run<T>(
|
||||||
|
fn: () => Promise<T>,
|
||||||
|
onError = (_error: Error) => {},
|
||||||
|
): Promise<T> {
|
||||||
|
let lastError: Error = new Error("Exponential backoff: Max retries hit");
|
||||||
|
|
||||||
|
let attempt = 0;
|
||||||
|
|
||||||
|
while (
|
||||||
|
attempt < this.options.maxAttempts ||
|
||||||
|
this.options.maxAttempts == 0
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
return await fn();
|
||||||
|
} catch (error) {
|
||||||
|
// Store the error in case we fail every attempt
|
||||||
|
lastError = error instanceof Error ? error : new Error(`${error}`);
|
||||||
|
onError(lastError);
|
||||||
|
|
||||||
|
// Wait before going to the next attempt
|
||||||
|
const delay = this.calculateDelay(attempt);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, delay));
|
||||||
|
}
|
||||||
|
|
||||||
|
attempt++;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We completed the loop without ever succeeding. Throw the last error we got
|
||||||
|
throw lastError;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate the delay before we should attempt to retry
|
||||||
|
*
|
||||||
|
* NOTE: The maximum delay is (maxDelay * (1 + jitter))
|
||||||
|
*
|
||||||
|
* @param attempt
|
||||||
|
* @returns The time in milliseconds before another attempt should be made
|
||||||
|
*/
|
||||||
|
private calculateDelay(attempt: number): number {
|
||||||
|
// Get the power of the growth rate
|
||||||
|
const power = Math.pow(this.options.growthRate, attempt);
|
||||||
|
|
||||||
|
// Get the delay before jitter or limit
|
||||||
|
const rawDelay = this.options.baseDelay * power;
|
||||||
|
|
||||||
|
// Cap the delay to the maximum. Do this before the jitter so jitter does not become larger than delay
|
||||||
|
const cappedDelay = Math.min(rawDelay, this.options.maxDelay);
|
||||||
|
|
||||||
|
// Get the jitter direction. This will be between -1 and 1
|
||||||
|
const jitterDirection = 2 * Math.random() - 1;
|
||||||
|
|
||||||
|
// Calculate the jitter
|
||||||
|
const jitter = jitterDirection * this.options.jitter * cappedDelay;
|
||||||
|
|
||||||
|
// Add the jitter to the delay
|
||||||
|
return cappedDelay + jitter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ExponentialBackoffOptions = {
|
||||||
|
/**
|
||||||
|
* The maximum delay between attempts in milliseconds
|
||||||
|
*/
|
||||||
|
maxDelay: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The maximum number of attempts. Passing 0 will result in infinite attempts.
|
||||||
|
*/
|
||||||
|
maxAttempts: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The base delay between attempts in milliseconds
|
||||||
|
*/
|
||||||
|
baseDelay: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The growth rate of the delay
|
||||||
|
*/
|
||||||
|
growthRate: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The jitter of the delay as a percentage of growthRate
|
||||||
|
*/
|
||||||
|
jitter: number;
|
||||||
|
};
|
||||||
|
|
||||||
435
src/utils/sse-session.ts
Normal file
435
src/utils/sse-session.ts
Normal file
@@ -0,0 +1,435 @@
|
|||||||
|
import { ExponentialBackoff } from "./exponential-backoff.js";
|
||||||
|
|
||||||
|
// Type declarations for browser environment (not available in Node.js)
|
||||||
|
declare const document:
|
||||||
|
| {
|
||||||
|
visibilityState: "visible" | "hidden";
|
||||||
|
addEventListener: (
|
||||||
|
event: string,
|
||||||
|
handler: (event: Event) => void,
|
||||||
|
) => void;
|
||||||
|
removeEventListener: (
|
||||||
|
event: string,
|
||||||
|
handler: (event: Event) => void,
|
||||||
|
) => void;
|
||||||
|
}
|
||||||
|
| undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A Server-Sent Events client implementation using fetch API.
|
||||||
|
* Supports custom headers, POST requests, and is non-blocking.
|
||||||
|
*/
|
||||||
|
export class SSESession {
|
||||||
|
/**
|
||||||
|
* Creates and connects a new SSESession instance.
|
||||||
|
* @param url The URL to connect to
|
||||||
|
* @param options Configuration options
|
||||||
|
* @returns A new connected SSESession instance
|
||||||
|
*/
|
||||||
|
public static async from(
|
||||||
|
url: string,
|
||||||
|
options: Partial<SSESessionOptions> = {},
|
||||||
|
): Promise<SSESession> {
|
||||||
|
const client = new SSESession(url, options);
|
||||||
|
await client.connect();
|
||||||
|
return client;
|
||||||
|
}
|
||||||
|
|
||||||
|
// State.
|
||||||
|
private url: string;
|
||||||
|
private controller: AbortController;
|
||||||
|
private connected: boolean = false;
|
||||||
|
protected options: SSESessionOptions;
|
||||||
|
protected messageBuffer: Uint8Array = new Uint8Array();
|
||||||
|
|
||||||
|
// Listener for when the tab is hidden or shown.
|
||||||
|
private visibilityChangeHandler: ((event: Event) => void) | null = null;
|
||||||
|
|
||||||
|
// Text decoders and encoders for parsing the message buffer.
|
||||||
|
private textDecoder: TextDecoder = new TextDecoder();
|
||||||
|
private textEncoder: TextEncoder = new TextEncoder();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new SSESession instance.
|
||||||
|
* @param url The URL to connect to
|
||||||
|
* @param options Configuration options
|
||||||
|
*/
|
||||||
|
constructor(url: string, options: Partial<SSESessionOptions> = {}) {
|
||||||
|
this.url = url;
|
||||||
|
this.options = {
|
||||||
|
// Use default fetch function.
|
||||||
|
fetch: (...args) => fetch(...args),
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
Accept: "text/event-stream",
|
||||||
|
"Cache-Control": "no-cache",
|
||||||
|
},
|
||||||
|
onConnected: () => {},
|
||||||
|
onMessage: () => {},
|
||||||
|
onError: (error) => console.error("SSESession error:", error),
|
||||||
|
onDisconnected: () => {},
|
||||||
|
onReconnect: (options) => Promise.resolve(options),
|
||||||
|
|
||||||
|
// Reconnection options
|
||||||
|
attemptReconnect: true,
|
||||||
|
retryDelay: 1000,
|
||||||
|
persistent: false,
|
||||||
|
...options,
|
||||||
|
};
|
||||||
|
this.controller = new AbortController();
|
||||||
|
|
||||||
|
// Set up visibility change handling if in mobile browser environment
|
||||||
|
if (typeof document !== "undefined") {
|
||||||
|
this.visibilityChangeHandler = this.handleVisibilityChange.bind(this);
|
||||||
|
document.addEventListener(
|
||||||
|
"visibilitychange",
|
||||||
|
this.visibilityChangeHandler,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles visibility change events in the browser.
|
||||||
|
*/
|
||||||
|
private async handleVisibilityChange(): Promise<void> {
|
||||||
|
// Guard for Node.js environment where document is undefined
|
||||||
|
if (typeof document === "undefined") return;
|
||||||
|
|
||||||
|
// When going to background, close the current connection cleanly
|
||||||
|
// This allows us to reconnect mobile devices when they come back after leaving the tab or browser app.
|
||||||
|
if (document.visibilityState === "hidden") {
|
||||||
|
this.controller.abort();
|
||||||
|
}
|
||||||
|
|
||||||
|
// When coming back to foreground, attempt to reconnect if not connected
|
||||||
|
if (document.visibilityState === "visible" && !this.connected) {
|
||||||
|
await this.connect();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Connects to the SSE endpoint.
|
||||||
|
*/
|
||||||
|
public async connect(): Promise<void> {
|
||||||
|
if (this.connected) return;
|
||||||
|
|
||||||
|
this.connected = true;
|
||||||
|
this.controller = new AbortController();
|
||||||
|
|
||||||
|
const { method, headers, body } = this.options;
|
||||||
|
|
||||||
|
const fetchOptions: RequestInit = {
|
||||||
|
method,
|
||||||
|
headers: headers || {},
|
||||||
|
body: body || null,
|
||||||
|
signal: this.controller.signal,
|
||||||
|
cache: "no-store",
|
||||||
|
};
|
||||||
|
|
||||||
|
const exponentialBackoff = ExponentialBackoff.from({
|
||||||
|
baseDelay: this.options.retryDelay,
|
||||||
|
maxDelay: 10000,
|
||||||
|
maxAttempts: 0,
|
||||||
|
growthRate: 1.3,
|
||||||
|
jitter: 0.3,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Establish the connection and get the reader using the exponential backoff
|
||||||
|
const reader = await exponentialBackoff.run(async () => {
|
||||||
|
const reconnectOptions = await this.handleCallback(
|
||||||
|
this.options.onReconnect,
|
||||||
|
fetchOptions,
|
||||||
|
);
|
||||||
|
|
||||||
|
const updatedFetchOptions = {
|
||||||
|
...fetchOptions,
|
||||||
|
...reconnectOptions,
|
||||||
|
};
|
||||||
|
|
||||||
|
const res = await this.options.fetch(this.url, updatedFetchOptions);
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${res.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!res.body) {
|
||||||
|
throw new Error("Response body is null");
|
||||||
|
}
|
||||||
|
|
||||||
|
return res.body.getReader();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Call the onConnected callback
|
||||||
|
this.handleCallback(this.options.onConnected);
|
||||||
|
|
||||||
|
const readStream = async () => {
|
||||||
|
try {
|
||||||
|
while (true) {
|
||||||
|
const { done, value } = await reader.read();
|
||||||
|
|
||||||
|
if (done) {
|
||||||
|
this.connected = false;
|
||||||
|
|
||||||
|
// Call the onDisconnected callback.
|
||||||
|
this.handleCallback(this.options.onDisconnected, undefined);
|
||||||
|
|
||||||
|
// If the connection was closed by the server, we want to attempt a reconnect if the connection should be persistent.
|
||||||
|
if (this.options.persistent) {
|
||||||
|
await this.connect();
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
const events = this.parseEvents(value);
|
||||||
|
|
||||||
|
for (const event of events) {
|
||||||
|
if (this.options.onMessage) {
|
||||||
|
this.handleCallback(this.options.onMessage, event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.connected = false;
|
||||||
|
|
||||||
|
// Call the onDisconnected callback.
|
||||||
|
this.handleCallback(this.options.onDisconnected, error);
|
||||||
|
|
||||||
|
// If the connection was aborted using the controller, we don't need to call onError.
|
||||||
|
if (this.controller.signal.aborted) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call the onError callback.
|
||||||
|
// NOTE: we dont use the handleCallback here because it would result in 2 error callbacks.
|
||||||
|
try {
|
||||||
|
this.options.onError(error);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(`SSE Session: onError callback error:`, error);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Attempt to reconnect if enabled
|
||||||
|
if (this.options.attemptReconnect) {
|
||||||
|
await this.connect();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
readStream();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected parseEvents(chunk: Uint8Array): SSEvent[] {
|
||||||
|
// Append new chunk to existing buffer
|
||||||
|
this.messageBuffer = new Uint8Array([...this.messageBuffer, ...chunk]);
|
||||||
|
|
||||||
|
const events: SSEvent[] = [];
|
||||||
|
const lines = this.textDecoder
|
||||||
|
.decode(this.messageBuffer)
|
||||||
|
.split(/\r\n|\r|\n/);
|
||||||
|
|
||||||
|
let currentEvent: Partial<SSEvent> = {};
|
||||||
|
let completeEventCount = 0;
|
||||||
|
|
||||||
|
// Iterate over the lines to find complete events
|
||||||
|
for (let i = 0; i < lines.length; i++) {
|
||||||
|
const line = lines[i];
|
||||||
|
|
||||||
|
// Empty line signals the end of an event
|
||||||
|
if (line === "") {
|
||||||
|
if (currentEvent.data) {
|
||||||
|
// Remove trailing newline if present
|
||||||
|
currentEvent.data = currentEvent.data.replace(/\n$/, "");
|
||||||
|
events.push(currentEvent as SSEvent);
|
||||||
|
currentEvent = {};
|
||||||
|
completeEventCount = i + 1;
|
||||||
|
}
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!line) continue;
|
||||||
|
|
||||||
|
// Parse field: value format
|
||||||
|
const colonIndex = line.indexOf(":");
|
||||||
|
if (colonIndex === -1) continue;
|
||||||
|
|
||||||
|
const field = line.slice(0, colonIndex);
|
||||||
|
// Skip initial space after colon if present
|
||||||
|
const valueStartIndex =
|
||||||
|
colonIndex + 1 + (line[colonIndex + 1] === " " ? 1 : 0);
|
||||||
|
const value = line.slice(valueStartIndex);
|
||||||
|
|
||||||
|
if (field === "data") {
|
||||||
|
currentEvent.data = currentEvent.data
|
||||||
|
? currentEvent.data + "\n" + value
|
||||||
|
: value;
|
||||||
|
} else if (field === "event") {
|
||||||
|
currentEvent.event = value;
|
||||||
|
} else if (field === "id") {
|
||||||
|
currentEvent.id = value;
|
||||||
|
} else if (field === "retry") {
|
||||||
|
const retryMs = parseInt(value, 10);
|
||||||
|
if (!isNaN(retryMs)) {
|
||||||
|
currentEvent.retry = retryMs;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store the remainder of the buffer for the next chunk
|
||||||
|
const remainder = lines.slice(completeEventCount).join("\n");
|
||||||
|
this.messageBuffer = this.textEncoder.encode(remainder);
|
||||||
|
|
||||||
|
return events;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Override the onMessage callback.
|
||||||
|
*
|
||||||
|
* @param onMessage The callback to set.
|
||||||
|
*/
|
||||||
|
public setOnMessage(onMessage: (event: SSEvent) => void): void {
|
||||||
|
this.options.onMessage = onMessage;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Closes the SSE connection and cleans up event listeners.
|
||||||
|
*/
|
||||||
|
public close(): void {
|
||||||
|
// Clean up everything including the visibility handler
|
||||||
|
this.controller.abort();
|
||||||
|
|
||||||
|
// Remove the visibility handler (This is only required on browsers)
|
||||||
|
if (this.visibilityChangeHandler && typeof document !== "undefined") {
|
||||||
|
document.removeEventListener(
|
||||||
|
"visibilitychange",
|
||||||
|
this.visibilityChangeHandler,
|
||||||
|
);
|
||||||
|
this.visibilityChangeHandler = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks if the client is currently connected.
|
||||||
|
* @returns Whether the client is connected
|
||||||
|
*/
|
||||||
|
public isConnected(): boolean {
|
||||||
|
return this.connected;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Will handle thrown errors from the callback and call the onError callback.
|
||||||
|
* This is to avoid the sse-session from disconnecting from errors that are not a result of the sse-session itself.
|
||||||
|
*
|
||||||
|
* @param callback The callback to handle.
|
||||||
|
* @param args The arguments to pass to the callback.
|
||||||
|
*/
|
||||||
|
private handleCallback<T extends (...args: Parameters<T>) => ReturnType<T>>(
|
||||||
|
callback: T,
|
||||||
|
...args: Parameters<T>
|
||||||
|
): ReturnType<T> | undefined {
|
||||||
|
try {
|
||||||
|
return callback(...args);
|
||||||
|
} catch (error) {
|
||||||
|
try {
|
||||||
|
this.options.onError(error);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(`SSE Session: onError callback error:`, error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Configuration options for the SSESession.
|
||||||
|
*/
|
||||||
|
export interface SSESessionOptions {
|
||||||
|
/**
|
||||||
|
* The fetch function to use.
|
||||||
|
*
|
||||||
|
* NOTE: This is compatible with Browser/Node's native "fetcH" function.
|
||||||
|
* We use this in place of "typeof fetch" so that we can accept non-standard URLs ("url" is a "string" here).
|
||||||
|
* For example, a LibP2P adapter might not use a standardized URL format (and might only include "path").
|
||||||
|
* This would cause a type error as native fetch expects type "URL".
|
||||||
|
*/
|
||||||
|
fetch: (url: string, options: RequestInit) => Promise<Response>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* HTTP method to use (GET or POST).
|
||||||
|
*/
|
||||||
|
method: "GET" | "POST";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* HTTP headers to send with the request.
|
||||||
|
*/
|
||||||
|
headers?: Record<string, string>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Body to send with POST requests.
|
||||||
|
*/
|
||||||
|
body?: string | FormData;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the connection is established.
|
||||||
|
*/
|
||||||
|
onConnected: () => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when a message is received.
|
||||||
|
*/
|
||||||
|
onMessage: (event: SSEvent) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when an error occurs.
|
||||||
|
*/
|
||||||
|
onError: (error: unknown) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the connection is closed.
|
||||||
|
*/
|
||||||
|
onDisconnected: (error: unknown) => void;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Called when the connection is going to try to reconnect.
|
||||||
|
*/
|
||||||
|
onReconnect: (options: RequestInit) => Promise<RequestInit>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether to attempt to reconnect.
|
||||||
|
*/
|
||||||
|
attemptReconnect: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The delay in milliseconds between reconnection attempts.
|
||||||
|
*/
|
||||||
|
retryDelay: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether to reconnect when the session is terminated by the server.
|
||||||
|
*/
|
||||||
|
persistent: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Represents a Server-Sent Event.
|
||||||
|
*/
|
||||||
|
export interface SSEvent {
|
||||||
|
/**
|
||||||
|
* Event data.
|
||||||
|
*/
|
||||||
|
data: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event type.
|
||||||
|
*/
|
||||||
|
event?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event ID.
|
||||||
|
*/
|
||||||
|
id?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reconnection time in milliseconds.
|
||||||
|
*/
|
||||||
|
retry?: number;
|
||||||
|
}
|
||||||
20
tsconfig.app.json
Normal file
20
tsconfig.app.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
17
tsconfig.json
Normal file
17
tsconfig.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "esnext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
13
vite.config.ts
Normal file
13
vite.config.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import path from 'node:path'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue(), tailwindcss()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, './src'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user