TODO
- use stream sharing So when creating a new chat, POST new chat, POST user message, /generate, redirect to chat When chatting new message, POST message, /generate, then /watch-stream When chat loaded, client first tries to /watch-stream
Once I have this, I will completely separate the argentic code, from the code that streams to the client
One function will generate a response in the agentic loop, returns a async iterable that lasts throughout all the iterations and is streamed by the api endpoint that simply streams the data streight to the user
import OpenAI from "npm:openai";
function initStream<T>(stream: AsyncIterable<T>, controller: AbortController){
const chunks: T[] = [];
let resolve: (chunk: T) => void = () => {};
let nextChunk = new Promise<T>(r => resolve = r);
controller.signal.throwIfAborted();
controller.signal.addEventListener('abort', () => resolve(null as T));
(async () => {
for await (const chunk of stream){
resolve(chunk);
nextChunk = new Promise<T>(r => resolve = r);
chunks.push(chunk);
}
controller.abort();
resolve(null as T);
})();
return async function*() {
for (const chunk of chunks) yield chunk;
while(true){
const chunk = await nextChunk;
if(controller.signal.aborted)return;
yield chunk;
}
};
}
const openai = new OpenAI();
const controller = new AbortController();
const stream = await openai.chat.completions.create(
{
stream: true,
model: "chatgpt-4o-latest",
messages: [{role: "user", content: "hello"}],
},
{signal: controller.signal}
);
const iterable = initStream(stream, controller);
for await (const chunk of iterable()){
console.log(chunk);
}-
Forget the position fixing, go back to flex boxes for layout and other scrollbars
-
Instead of appState and appProps, just make them their own signals like url
-
Namespace for db models
-
AI tools library
- Simplify messages status interface, maybe just html
-
Separate data model for memories or other AI data, like for knowlage base, lots of relationships, allowing semantic search
-
Package up jsr libs and publish, include helpers from utils.ts
-
Create markdown documentation for AI to be able to generate app
-
Create contemporary high contrast colorful theme
-
SEO & PWA Checkers
-
Manifest screenshots, and for og
-
Loader for when messages load
-
import map auto updater and deno task update
-
Fix service worker caching
-
Figure out why cannot use useSignal in messagebox in ChatList, but homepage works and signal works
-
Favicon
-
Notifications
-
Create app nav bar, and system for going between views
-
PWA things
-
Make service worker load from the first page load ctrl shift r
-
Create a universal way to send errors and messages on screen, popups that must be clicked and toasts, for not having to build error and messages.
- Toast, alert (alert, confirm, error, info), prompt (maybe)
- Maybe a error/message component that has a hook and can be inline inside a component
-
Send the chats on /chat via the html, through a chat.ts alongside the chat.mdx: decided not to because would add another way to load if we need to lazy load on client
-
during error from server login, just redirect to homepage: fixed redirect url
-
Set baseline catch of one hour for all assets
-
Catch external resources in service worker
-
XDG file paths library, in core
-
-Remove shebang permisions, add permisions to deno.json- Made it the /usr/bin/js command instead
-
Create Nav Bar
-
Fix process lock up during ai gen
-
Website analytics
-
Google font
-
Analytics
-
Webapp and manifest
-
Open telemetry
-
Should not create different render script for each 404 page
-
Set up Stripe webhook on VAZA auth server, so it stores all the events, can be read on app
-
Rename props to appProps if not being used as the component ...props alone
-
Make users have a unique username which is the email, and also an email that dont have to be unique. Bc could create non-email test accounts
-
Debug and production mode, disables preact/debug, esbuild config
-
Add the app data context
-
Find a good icon lib
-
Set up meta tags, SEO
-
View Transitions
-
Build sitemap
-
Make sure to change the domain, or have base domain on site config
-
Create basic layout and styling, Create css style lib
-
Style elements on demo page
-
Maybe instead of fg and background colors, do a bg, then a box color, then internal box color.
-
Service worker
-
Find a way to make a multilingual app
-
Maybe should just use kv_oauth, its very simple
-
Set up SQL database model
-
Build VAZA auth server
-
Tools cannot work for memory, since AI wont realize it should remember things.
Design notes
- Apple now has any search or input bars at bottom, similar to AI apps accessible
- bento grids, single column mobile (avoid for minimal tools)
- swipe gestures
- sidebar desktop, swipe gesture for sidebar mobile
- Current trends: Bold Typography & Motion, Minimalism, Dark Mode, Contrasts, Vibrance, AI Personalization user specific, immersive 3D elements, inclusive accessible fast loading designs,
- minimalism better: high density - boosts productivity but bad for new users
- hybrid high density & minimalism, having both for productivity and new users
- Hamburger Menus reduce clutter but hide features, nav bars better efficiency
- Apple Single-Page Scroll cuts feature discovery, but cuts bounce, best for not multi ti-feature apps