mirror of
https://github.com/aljazceru/goose.git
synced 2026-01-23 16:24:28 +01:00
86 lines
3.3 KiB
Plaintext
86 lines
3.3 KiB
Plaintext
## Project Overview
|
|
|
|
The Goose Desktop App is an Electron application built with TypeScript, React, and modern web technologies. It's a chat interface application that connects to various AI providers and allows users to interact with AI models.
|
|
|
|
## Key Technologies
|
|
|
|
- **Electron**: For cross-platform desktop app functionality
|
|
- **React**: For UI components and state management
|
|
- **TypeScript**: For type-safe code
|
|
- **Tailwind CSS**: For styling components
|
|
- **Vite**: For fast development and bundling
|
|
- **Electron Forge**: For packaging and distribution
|
|
|
|
## Project Structure
|
|
|
|
- `/src`: Main source code directory
|
|
- `/main.ts`: Electron main process entry point
|
|
- `/preload.ts`: Preload script for secure renderer access
|
|
- `/renderer.tsx`: React entry point for the renderer process
|
|
- `/App.tsx`: Main React component that manages views
|
|
- `/components`: React components (page views, UI components, icons)
|
|
- `/api`: API client code
|
|
- `/utils`: Utility functions
|
|
- `/hooks`: React hooks
|
|
- `/types`: TypeScript type definitions
|
|
- `/styles`: CSS and styling
|
|
- `/images`: Image assets
|
|
|
|
## Getting Started
|
|
|
|
1. **Understand the application flow**:
|
|
- `main.ts` is the Electron entry point that creates windows and handles IPC
|
|
- `renderer.tsx` bootstraps the React application
|
|
- `App.tsx` manages the different views (chat, settings, etc.)
|
|
- The app uses a view-based navigation system with components conditionally rendered based on the current view
|
|
|
|
2. **Adding a new feature**:
|
|
- Create a new component in the `/components` directory
|
|
- Add the component to the view system in `App.tsx` by:
|
|
- Adding a new view type to the `View` type
|
|
- Importing your component
|
|
- Adding a conditional render in the App component
|
|
|
|
3. **Building and testing**:
|
|
- Use `npm run start-gui` to run the app in development mode
|
|
- Changes to React components will hot reload
|
|
- Changes to main process code require a restart
|
|
|
|
## Adding a New View/Component
|
|
|
|
1. Create a new directory under `/src/components` for your feature
|
|
2. Create a main component file (e.g., `YourFeatureView.tsx`)
|
|
3. Add your view type to the `View` type in `App.tsx`
|
|
4. Import and add your component to the render section in `App.tsx`
|
|
5. Add navigation to your view from other components (e.g., adding a button in `BottomMenu.tsx` or `MoreMenu.tsx`)
|
|
|
|
## State Management
|
|
|
|
- The app uses React's Context API for global state
|
|
- Look at existing contexts like `ConfigContext.tsx` and `ModelContext.tsx` for examples
|
|
- For local state, use React hooks like `useState` and `useEffect`
|
|
|
|
## Styling
|
|
|
|
- The app uses Tailwind CSS for styling
|
|
- Custom UI components are in `/components/ui`
|
|
- Follow the existing design patterns for consistency
|
|
|
|
## IPC Communication
|
|
|
|
- The app uses Electron's IPC for communication between main and renderer processes
|
|
- The `window.electron` object (defined in preload.ts) provides access to IPC methods
|
|
- Use existing patterns for adding new IPC functionality
|
|
|
|
## Best Practices
|
|
|
|
1. Use TypeScript types for all props and state
|
|
2. Follow the existing component structure and patterns
|
|
3. Use existing UI components when possible
|
|
4. Handle errors gracefully
|
|
5. Test your changes in both development and production builds
|
|
|
|
By following these instructions, you should be able to navigate the codebase, understand its structure, and start contributing new features or modifications.
|
|
|
|
|