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:

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

npm run serve-cdn
# or
yarn serve-cdn

Optional: Test that serving CDN worked

yarn test-cdn

3. Update the bff script to point to the above CDN url
4. Update index requestedHost to your miniapp url

  // Example:
  const requestedHost = "brewingbliss.cosmics.app";

5. Start bff

  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:

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

For React-specific linting:

// 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:

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.