Merge pull request #33 from endernoke/ui-ux-patch-1

Mermaid render fix, docs, release prep

Author: supreme-gg-gg

.vscodeignore

@@ -1,11 +1,41 @@
-.vscode/**
-.vscode-test/**
-src/**
+# Source control
+.git
 .gitignore
-.yarnrc
-vsc-extension-quickstart.md
+
+# Source code
+src/**
+out/test/**
 **/tsconfig.json
-**/eslint.config.mjs
+**/.eslintrc.json
 **/*.map
 **/*.ts
-**/.vscode-test.*
+
+# Development files
+.vscode/**
+.vscode-test.mjs
+.vscode-test/**
+node_modules/**
+test/**
+live2d-container/node_modules/**
+.env
+
+# Build tools and config
+.github/**
+.azure-pipelines/**
+webpack.config.js
+**/webpack.config.js
+**/tsconfig.json
+**/.eslintrc.json
+
+# Documentation and examples
+docs/**
+examples/**
+images/**/*.psd
+*.md
+!README.md
+
+# Misc
+.editorconfig
+.prettierrc
+.npmrc
+.npmignore

README.md

@@ -1,7 +1,7 @@
 # Cheerleader
 
 <p align="center">
-  <img src="assets/cheerleader.svg" alt="Cheerleader" width="50"><br>
+  <img src="assets/cheerleader.png" alt="Cheerleader" width="50"><br>
   Supercharge your dev experience with an anime coding companion!
 </p>
 
@@ -15,84 +15,59 @@ Cheerleader brings a fun, interactive anime assistant to your VS Code environmen
    <em>Coding with your anime companion</em>
 </p>
 
-### Interactive Anime Companion
+- Interactive anime character that floats on your screen and motivates you
 
-- An interactive anime character that floats on your screen and provides encouragement
-- Choose from multiple character models to be your coding companion
-- Position your cheerleader anywhere on your screen
-- Interact with your cheerleader with the mouse or action buttons
+- Audio code support and AI assistance such as inline chat, code review, rubber duck debugging that integrates with your editor (like Copilot but entirely voice-based)
 
-### Code Support & AI Assistance
+- Get encouraging messages based on your coding activity, console output, build/test results, LSP feedback, and more
 
-- Ask questions about your code using text or voice
-- Receive constructive comments, explanations, and suggested edits for your code
+- Cheer you up with productivity monitoring, music, and compliments
 
-### Editor Features
-
-- Get encouraging messages based on your coding activity
-- Hear cheerful feedback when you complete tasks like builds or tests
-- Get recognized for consistent coding sessions
-
-- Monitor your productivity and get gentle reminders when you stray
-- Toggle background lofi music to help you focus
-- Get motivated when you've been inactive for too long
+> For a detailed description of each feature, please refer to [this page](docs/features.md)
 
 ## Usage
 
-We will be adding a detailed description of each button on Cheerleader for better readability soon, stay tuned...
-
-### Character Interaction
+Some background features can be configured in the sidebar, refer to the [Setup and Configuration](#setup-and-configuration) section below. Other features can be accessed through the overlay UI:
 
-- Click and drag the character to reposition it
-- Use the buttons around the character to access features:
-  - Chat button: Start an inline chat
-  - Code review button: Review your current file
-  - Music button: Toggle lofi background music
-
-### Voice Commands
+<p align="center">
+   <img src="assets/screenshots/buttons.png" alt="Try out interactive features" width="600">
+   <br>
+   <em>Try out interactive features!</em>
+</p>
 
-1. Click on the microphone button or use the `cheerleader.startVoiceInteraction` command
-2. Speak your question or request
-3. Click "Stop" when you're done speaking
-4. Your cheerleader will process your speech and respond both visually and with audio
+## Setup and Configuration
 
-### Code Review
+### API Keys Management
 
-1. Open a file you want to review
-2. Run the `cheerleader.reviewCode` command or click the code review button
-3. Cheerleader will analyze your code and provide helpful feedback with voice explanations
+You can choose between ElevenLabs **OR** Hugging Face for text-to-speech and speech-to-text features. By default, we use ElevenLabs. ElevenLabs provides free API keys with quite generous usage limits. You can sign up for an account and get your API key from [ElevenLabs](https://elevenlabs.io/).
 
-### Inline Chat
+We also support alternative service using [Hugging Face](https://huggingface.co/), which is free to use. You can sign up for an account and get your API key for free. Otherwise, we will use ElevenLabs by default.
 
-1. Open a file you want to discuss
-2. Run `cheerleader.inlineChat` , `cheerleader.inlineChatVoice`, or use the inline chat button
-3. Ask questions about your code
-4. Receive conversational responses, code comments, or detailed explanations
+> [!NOTE]
+> In future releases, we might consider adding local TTS and STT models to avoid the need for API keys. However, this will make the extension less accessible to many users who do not have the required hardware since these models are quite large.
 
 ### Settings
 
-- Access the cheerleader controls from the sidebar
-- Configure API keys for text-to-speech and speech-to-text processes
-- Switch between different cheerleader characters
-- Toggle encouragement features on/off
-- Toggle productivity tracking on/off
+You can configure the following settings in the sidebar (with cheerleader icon):
 
-### API Keys Management
+- **API Keys**: Enter your ElevenLabs or Hugging Face API key for TTS and STT features.
 
-You are required to provide your own ElevenLabs API key for text-to-speech feature. They provide free API keys with quite generous usage limits. You can sign up for an account and get your API key from [ElevenLabs](https://elevenlabs.io/).
+- **Copilot Models**: Choose which Copilot models to use for inline chat and code review. Currently, we support `gpt4o`, `gpt4o-mini`, and `claude-3.5-sonnet`. Note that `o1` and `o1-mini` are said to be supported in their documentation but somehow not in reality...
 
-We also offer an alternative speech-to-text service using [Hugging Face](https://huggingface.co/), which is free to use. You can sign up for an account and get your API key for free. Otherwise, we will use ElevenLabs by default.
+- **Anime Character**: Choose your favorite anime character from the list. The cheerleader will reload with the new character after a few seconds.
+
+- **Features Toggle**: Enable or disable different features of the cheerleader.
 
 > [!NOTE]
-> In future releases, we might consider adding local TTS and STT models to avoid the need for API keys. However, this will make the extension less accessible to many users who do not have the required hardware since these models are quite large.
+> In a future release soon you will be able to bring any Live2D model you want by providing a URL. We will also expand the default catalog to include characters other than anime.
 
 ## Installation
 
 ### VSCode Extensions Marketplace
 
-We will be available on the VSCode Extensions Marketplace soon. For now, you can install from source with the steps below.
+We are officially listed on the VSCode Marketplace. Just search for "Cheerleader" in the extensions tab of VSCode and install it from there.
 
-## From Source
+### From Source
 
 `node.js` and `npm` are required for installing from source. You can install them from npm's [official website](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
 
@@ -129,37 +104,27 @@ We will be available on the VSCode Extensions Marketplace soon. For now, you can
 
 6. Open VSCode and go to the extensions tab. Under more options, select "Install from VSIX" and select the `.vsix` file you just built to install it.
 
-## Extension Settings
+## Commands Catalog
 
-Extension settings can be configured in the activity sidebar under the cheerleader icon.
+If you wish to execute any of the commands **manually**, you can do so by opening the command palette (Ctrl+Shift+P) and type the command name:
 
-You can configure:
-
-- Your ElevenLabs API key for text-to-speech, Hugging Face API key for speech-to-text
-- Copilot models to use (gpt4o, gpt4o-mini, claude-3.5-sonnet), note that o1 and o1-mini are said to be supported on their documentation but somehow not in reality...
-- Anime character (takes a few seconds to reload, so be patient)
-- Toggle on/off different editor features
-
-> [!NOTE]
-> In a future release soon you will be able to bring any Live2D model you want by providing a URL. We will also expand the default catalog to include characters other than anime.
-
-## Commands
-
-- `cheerleader.inlineChatVoice`: Start a voice-based inline chat for the current file
-- `cheerleader.reviewCode`: Run a code review on the current file
-- `cheerleader.startVoiceInteraction`: Start a voice interaction with the cheerleader
+- `cheerleader.launchOverlay`: Launch the cheerleader overlay
+- `cheerleader.killOverlay`: Stop the cheerleader overlay
+- `cheerleader.inlineChat`: Open a text-based inline chat for the current file
+- `cheerleader.inlineChatVoice`: Start a voice-based inline chat for the current file **(Key binding: ctrl/cmd+shift+c)**
+- `cheerleader.rubberDuckVoice`: Start a voice-based rubber duck debugging session **(Key binding: ctrl/cmd+shift+d)**
+- `cheerleader.reviewCode`: Run a code review on the current file **(Key binding: ctrl/cmd+shift+r)**
+- `cheerleader.explainPastedCode`: Explain the pasted code
 
 - `cheerleader.toggleEncouragement`: Toggle encouragement features on/off
 - `cheerleader.toggleMonitoringRotting`: Toggle productivity monitoring
-- `cheerleader.togglePasteMe`: Toggle paste me feature **(TO BE ADDED)**
+- `cheerleader.togglePasteMonitoring`: Toggle paste me feature
 
 The following commands are used for testing and development purposes, categorized under "Testing":
 
+- `cheerleader.record`: Test recording audio
 - `cheerleader.testTTS`: Test text-to-speech functionality
 - `cheerleader.testEncouragement`: Test encouragement messages
-- `cheerleader.startRecording`: Start recording audio
-- `cheerleader.stopRecording`: Stop recording audio
-- `cheerleader.inlineChat`: Open a text-based inline chat for the current file
 
 ## Requirements
 

assets/cheerleader.png

@@ -0,0 +1,34 @@
+# Features Breakdown
+
+This document lists in detail each feature of the Cheerleader extension. While it does not act as a developer's guide, it provides a comprehensive overview of the extension's capabilities and how to use them effectively.
+
+> [!NOTE]
+> This is still being constructed. We will add more details and examples in the future.
+
+## Copilot features
+
+### Inline Chat
+
+The inline chat feature allows you to have a conversation with the cheerleader while you code. You can ask questions, get explanations, and receive suggestions in real-time. The cheerleader will respond inline, making it easy to follow along with your code.
+
+### Code Review
+
+The code review feature enables the cheerleader to analyze your code and provide feedback. It can identify potential issues, suggest improvements, and help you understand best practices. This feature is particularly useful for learning and improving your coding skills.
+
+### Rubber Duck Debugging
+
+The rubber duck debugging feature allows you to explain your code to the cheerleader as if it were a rubber duck. This technique can help you clarify your thoughts, identify bugs, and gain a deeper understanding of your code. The cheerleader will listen and provide feedback, making the process more interactive and engaging.
+
+## Editor Support
+
+### Encouragements
+
+The cheerleader provides encouragements based on your coding activity. It can recognize when you're making progress, completing tasks, or overcoming challenges. The cheerleader will offer positive reinforcement to keep you motivated and focused. It also reads from the console output, build/test results, and LSP feedback to provide relevant encouragements.
+
+### Music
+
+The cheerleader can play music to enhance your coding experience. We play a random free lo-fi music.
+
+### Explain Pasted Code
+
+The explain pasted code feature allows you to paste code into the cheerleader, and it will provide an explanation of what the code does. This feature is helpful for understanding unfamiliar code snippets or learning new programming concepts.