# MakeInfinite UI

A React-based front-end for the MakeInfinite service, enabling non-technical users to develop miniapps through chat-based interactions with LLMs.

## Features

### Chat-Based Development

- Interactive chat interface for communicating with LLMs
- Real-time component development and modification
- Git-based project management using isomorphic-git

### Image Gallery

The Image Gallery feature allows users to easily reference images in their chat messages when discussing component modifications.

#### Using Images in Chat

1. Click the "Images" button next to the chat input
2. Browse available images in your project
3. Click an image to insert its path into your message
4. Continue editing your message or send it

#### Project Image Management

Images should be placed in the `your-project/src/assets/images/` directory of your project:

```
your-project/
  ├── src/
  │   ├── assets/
  │   │   ├── images/
  │   │   │   ├── image1.jpg
  │   │   │   ├── image2.png
  │   │   │   └── ...
  │   └── ...
  └── ...
```

#### Supported Image Formats

- JPEG/JPG
- PNG
- GIF
- WebP

#### First-Time Setup

- If no images directory exists, the gallery will prompt you to create one
- Once created, you can add images to the directory
- Images will automatically appear in the gallery

## Development Setup

This project uses Vite with React and TypeScript.

### Getting Started

1. Install dependencies:

```bash
npm install
# or
yarn install
```

2. Serve CDN server

This command will build makeinfinite-ui in DEV mode so it's easier for debugging as well as serve the build files to be accessed through CDN

```bash
npm run serve-cdn
# or
yarn serve-cdn
```
 _Optional:_ Test that serving CDN worked
 ```bash
 yarn test-cdn
 ``` 

3. Update the bff script to point to the above CDN url
4. Update index requestedHost to your miniapp url
```js
  // Example:
  const requestedHost = "brewingbliss.cosmics.app";
```
5. Start bff
```bash
  cd /your-path/dreamspace-miniapp-bff
  yarn dev
```

### Project Structure

```
makeinfinite-ui/
  ├── lib/
  │   ├── components/
  │   │   ├── ImageGallery/
  │   │   ├── PlaceholderChatbot/
  │   │   └── ...
  │   ├── filesystem.ts
  │   └── ...
  ├── src/
  └── ...
```

## ESLint Configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level `parserOptions` property:

```js
export default tseslint.config({
  languageOptions: {
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});
```

For React-specific linting:

```js
// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  settings: { react: { version: "18.3" } },
  plugins: {
    react,
  },
  rules: {
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});
```

## Testing

Run the test suite:

```bash
npm test
# or
yarn test
```

### Test Coverage

The project includes comprehensive tests for all components, including:

- Unit tests for components
- Integration tests for features
- Mock filesystem operations
- Error handling scenarios

## Contributing

1. Fork the repository
2. Create your feature branch
3. Write tests for your changes
4. Ensure all tests pass
5. Submit a pull request

## Project Architecture

### Key Components

#### ImageGallery

- Displays project images in a modal gallery
- Handles image selection and insertion into chat
- Manages directory creation and file loading
- Provides error handling and recovery options

#### PlaceholderChatbot

- Manages chat interface and message history
- Integrates with image gallery for image references
- Handles real-time communication with backend

### File System Integration

The project uses isomorphic-git for managing local repositories:

- Files are stored in the browser's filesystem
- Changes are synchronized with remote repositories
- Image files are loaded and displayed from local storage

## License

This project is licensed under the terms specified in the LICENSE file.