Wally

Wally is a relationship‑wellness companion designed to strengthen offline communication skills through tailored prompts, reflective exercises, and empathetic guidance. It adopts a Singlish‑flavored English style to make interactions feel natural and engaging for its users. Currently Wally is finetuned to provide responses tailored to English (Singlish) & Chinese speakers.

Why use Wally?

Wally helps couples, friends, or colleagues engage in meaningful offline conversations by providing generated prompts, recommendations, and reflective questions. Its therapist‑style guidance is backed by a fine‑tuned language model that offers supportive feedback without judgment. Users can track their chat history, customize the app’s tone (including Singlish options), and upload relevant media for context. Streamlined with a modern React/Next.js frontend and AI pipeline, Wally is designed for both simplicity and depth in fostering better communication.

Tech Stack

• Framework & Language

  • Next.js (App Router)
  • React
  • TypeScript

• Styling & UI

  • Tailwind CSS
  • Radix UI (headless components)
  • Shadcn/ui (component library)

• Authentication & Sessions

  • Clerk (with Prisma adapter)

• State Management

  • Jotai (atomic state)

• Data Fetching & API

  • tRPC (type‑safe RPC)
  • @tanstack/react-query

• AI Orchestration

  • OpenAI API (fine‑tuned models)
  • Deepseek API

• Database

  • PostgreSQL (provisioned by Neon)
  • Prisma ORM (schema, migrations, seeding)

• Retrieval & Embeddings

  • Pinecone (vector search / RAG)
  • Milvus

• File Uploads & Media

  • Uploadthing (images & PDF uploads)
  • Custom upload/display/delete components

• Validation & Utilities

  • Zod (schema validation)

• Observability & Payments

  • Highlight.io (error logging)
  • Stripe (payment plans & processing)

TO-DO LIST

Front-End

• create home/chat/login pages
• personify home page (can be improved) - more relatable ui
• fix chat page ui
• update sidebar ui, completely hidden
• personify sidebar ui + classify by relationship maybe(?) (CAN be improved)
• create plans page
• create popup ui to be used throughout site for errors/successes etc..
• create update profile dialog box component
• create one form component to be used across create-profile and update-profile
• map each message from openai/user message to a chatmessage component, and improve scrollbox
• add image/pdf upload functionality (currently from device)
  • display file selected (if image) on frontend
  • display file selected in dropzone
  • figure out delete file flow on frontend
  • add image/pdf upload functionality (from drive/dropbox etc.)
• update frontEnd to show 3 different dropdowns for responses
• display currently selected emotion on frontend
  • store currently selected emotion in state, and change emotion only when users asks to change it
• updateProfile display (birthdate and heartLevel does not render default value)
• link user sessionStorage to jotai state (previously using localStorage)
• create delete chat alert dialog, to confirm with users before deleting chat
  • makeoverlay does not disappear when alert dialog is closed...
  • add destructive (red) coloring to alert dialog

UI/UX

• make sure ui for all pages is exactly 100vh (on all devices!)
• fix create-chat page ui (languages currently greyed out)
• make sure scroll area in chat page sticks to the bottom (still buggy for beta)
• add down button in the chat area for scrolling down
• fix scrollRef, make sure page scrolls down all the way when messageStreams render
• make entire ui mobile friendly

DB

• create schema for necessary wally components
• update schema to hold messages array + correct message
• update schema to hold file[]
• create file model for OpenAI Attachments
• save multiple messages to allMessages

Auth + tRPC

• fix login page ui (just styling)
• correct client side auth errors (import session from clerk not next-auth)
• remove user id input from all routes use id from ctx.session
• seed current users into vercel db
• user with no plan is rerouted to "/plans" page when navigating to '/create-chat'
• update clerk webhooks to send data to vercel db (for production do manually depending on external account)
• procedure to update chats's updatedAt (arrange chats by updatedAt, not createdAt)
• save message to db (including files, optional)
• procedure to add allMessages array to db, use current message route for correct message only
• convert all restricted value fields to enums
• update tRPC backend to do type validation for enums, store values in state not enums
• rate limits to each user on number of api calls (per day, maybe redis?)
• convert to personal providers for auth, before launch
• update config.ts/index.ts and src/api/auth
• use httpbatchstreamlink to stream trpc calls

Profile

• customised user settings page (optional)
• chat/profile configuration button and popup
• route to new chat page when profile is created
• create updateProfile route, only updates necessary info
• delete chat functionality + add to frontend

Homepage + Chat Headers

• test chatHeaders routes
• figure out best routing conventions
• route createChat to new page with the chat once complete
• create chat scrollbox

OpenAI API (text-to-text)

• system prompt optimization (can still be improved)
• write sendMessage route
• test sendMessage call to openAI and check response
• stream ai responses
• queries messages are added to the Messages object to send to OpenAI
• add function to stop request, and retry on error
• structure response object so that we can personalize output
• able to send image/pdf upload capabilities
• implement RAG (data flow issues) + Pinecone
• indiv pinecone namespace for each user -> id prefixes for each profile
• return multiple responses to user before beta release
• add error handling, cancelling & regeneration to UI using vercel SDK
• optimize speed and payload size
• add context window library and tokenizer, figure out embedding

OPTIMIZATION

Error Management

• set up analytic + error management (w/ highlight or launchdarkly - in the future)

  • highlight.io integration in vercel (paid integration - w vercel pro)
  • highlight.io integration in github
  • add highlight identify user session
  • add specific background traces for particular routes, eg: api call to openai, exclude http overhead
  • learn to use highlight efficiently and automate issues for errors

React Optimization

• optimize "use client" boundaries for less CSR

• optimization testing (w/ react-scan)

  • extract out entire chat-home.tsx (and similar pages) to reduce csr
  • improve page load times
  • add interactivity to page (make use of suspense boundaries/loading.tsx)
  • minimize rerenders
  • use different types of queries
  • try using abort controller

State Management

• integrate global state management - jotai (atomic state)

  • store all chatHeader data (everyth except messages)
  • use atomic state for chatHome page
  • sort (according to updatedAt) before displaying chatData on frontend
  • useEffect in app sidebar handles all:
    • update profile -> updates focusedChatData atom (useEffect in app-sidebar)
    • delete profile -> removes ref to focusedChatData atom
    • user sends message -> update updatedAt of focusedChatData atom
  • update state on delete chat, so that sidebar is updated
  • update state on create chat, so that ... (both done with tRPC invalidate)

Others

• separate dbs for production and dev
• check auth caching state
• routing pages (parallel routes)
• language option (expand wally ai to be able to give answers in different languages)

POST-PRODUCTION

Further Possible Optimizations

• payment processing + webhooks (w/ stripe)
• update user schema (paid vs free user)
• migrate from pinecone db to milvus once we start to scale
• migrate from vercel hosting to ...