Pi - Personal AI Assistant

This is a personal AI assistant app built with React and Hono on Val Town. It provides a clean, minimalist chat interface for interacting with multiple AI assistants.

• Typewriter Effect: Sentence-by-sentence revealing of AI responses
• Haptic Feedback: Subtle vibrations when scrolling and interacting
• Smooth Scrolling: Camera movements that follow gestalt principles
• Focus Mode: Highlighting current sentences while subtly blurring past ones
• Message Actions: Favorite, share, and listen to messages
• Intimate AI Responses: Warm, personalized messaging

• Clean, Minimalist Design: Modern, intuitive interface
• Multiple AI Agents: Support for different AI models with unique personalities
• Suggestion Chips: Quick-start conversation prompts
• Category Tabs: Switch between agents and suggestions
• Quick Action Buttons: For specialized tasks (Summary, Code, Design, Research)

• Login/Signup: Complete authentication with Supabase
• Profile Management: Edit profile details and settings
• User Settings: Control haptic feedback and typewriter speed
• Theme Options: Light, dark, and system theme support

• Conversations: Store chat history
• Messages: Individual chat messages
• User Profiles: User information
• Settings: User preferences
• AI Agents: Different AI personalities

• Backend: /backend/index.ts - Handles API requests and serves frontend assets

  • OpenAI integration for chat completions
  • API endpoints for authentication, chat, and user data
  • Supabase integration for database and authentication

• Frontend:

  • /frontend/index.html - Main HTML template
  • /frontend/index.tsx - Client-side entry point
  • /frontend/components/ - React components for the UI
    • App.tsx - Main application component
    • AuthScreen.tsx - Login and signup screens
    • ChatInterface.tsx - Chat UI with message display and input
    • TypewriterMessage.tsx - Typewriter effect for AI responses
    • Sidebar.tsx - Conversation history and navigation
    • Settings.tsx - User settings management
    • AuthContext.tsx - Authentication state management
    • ThemeContext.tsx - Theme state management

• Shared:

  • /shared/types.ts - TypeScript interfaces
  • /shared/utils.ts - Utility functions
  • /shared/supabase.ts - Supabase client and helper functions

• Frontend: React with TypeScript
• Backend: Hono on Deno
• Database: Supabase
• Authentication: Supabase Auth
• AI: OpenAI API
• Styling: Custom CSS with Tailwind utility classes

1. Sign up or log in to your account
2. Select an AI agent to chat with
3. Type your message or select a suggestion
4. Enjoy the typewriter effect as the AI responds
5. Use message actions to favorite, share, or listen to responses
6. Switch between different AI agents for different types of assistance
7. Customize your experience in the settings

• Voice input functionality
• Image upload and processing
• Custom AI agent creation
• Conversation search and filtering
• Export conversations
• Mobile app with push notifications