GraceAI Chat Widget (Vue 3)

Project Directory Structure

This section describes the folder structure and purpose of each directory and key files in the project.

project-root/
├── .yarn/                     # Yarn package management directory
├── demo                       # Html files n main.js
├── dist/                      # Production build output
├── node_modules/              # Installed dependencies
│
├── src/                       # Main source code directory
│   ├── assets/                # Static assets (images, icons, styles)
│   ├── components/            # Reusable Vue components (UI, widgets, layouts)
|   │   ├── Board/             # Includes -> Action.vue, Content.vue, Header.vue                   
|   │   ├── MessageBubble/     # Inlcudes -> ButtonOptions.vue, Main.vue, Single.vue, Typing        
|   │   ├── Outer/             # Includes -> AppStyle.vue, BotUi.vue, Homesection.vue
|   │   ├── AppStyle.vue                 
|   │   ├── HomePage.vue    
|   |   ├── BotUI.vue          
|   │   └── RegistrationForm.vue
|   |
│   ├── config/                # Configuration files (API endpoints, environment variables)
│   ├── helpers/               # Utility and helper functions
│   ├── App.vue                # Root Vue component
│   ├── main.js                # Main entry point that initializes the Vue app
│   └── vue-bot-ui.js          # Bot UI integration entry script
│
├── tests/
│   └── unit/                  # Unit tests for components and logic
│
├── .editorconfig              # Editor configuration for consistent coding styles
├── .env                       # Environment variables for local development
├── .example.env               # Example environment variable file
├── .eslintrc.js               # ESLint configuration for code linting
├── .gitignore                 # Git ignored files and folders
├── .yarnrc.yml                # Yarn configuration file
│
├── babel.config.js            # Babel transpiler configuration
├── changelog.md               # Project changelog (version history)
├── commitlint.config.js       # Commit message linting configuration
├── jest.config.js             # Jest testing configuration
│
├── LICENSE                    # License for the project
├── package.json               # Project metadata and dependencies
├── package-lock.json          # NPM lock file (for deterministic builds)
├── README.md                  # Project overview, setup, and usage guide
├── vue.config.js              # Vue CLI configuration
└── yarn.lock                  # Yarn lock file (dependency versions)

Quick start

yarn
yarn serve
# open http://localhost:5173

Build

yarn build

Config

Set VUE_APP_API_BASE in .env.

Embed (as a widget)

Serve dist/ and include vue-bot-ui.js in your host page.

text: `

<li style="margin-top: 10px;">
  <strong>Secure Your Public Launch Package:</strong>
  Choose and confirm your benefits for the FMV Public Launch:
  <a href="https://docs.google.com/forms/d/e/1FAIpQLSdkAxEw8TXLCFzj6Ei6Ns8wuWdodz5Lbs6saOLQcU5LZT8hDA/viewform?usp=send_form" target="_blank" style="color:#7a4cff; font-weight:bold;">
    Order Form
  </a>
</li>

<li style="margin-top: 10px;">
  <strong> Your Personal Invitation / Referral Code:</strong>
    Share your code with friends, partners, or your community and earn commissions automatically as they register
    Invitation / Referral Link:
  <a href="https://auth.futuremultiverse.com/?code=FCL-QHFK0C279T&source_platform=other" target="_blank" style="color:#7a4cff; font-weight:bold;">
     Enter & Experience our Lunaprise Multiverse!
  </a>
</li>

<li style="margin-top: 10px;">
  AND, Here is your Exclusive & ,
   <a href="https://bit.ly/Lunaprise_Multiverse_Test" target="_blank" style="color:#7a4cff; font-weight:bold;">
    Time-Limited Link to Enter our Lunaprise Multiverse
  </a> Spaces & Events!
</li>


<li strong="margin-top: 10px;">
  If you need any help, you can explore our FMV GuideBook for answers, updates, and official news at any time.

Our GraceAI and Support Team are also available for you 24/7