License Agreement
-Please read the following License Agreement carefully. By continuing, you acknowledge that you have read and agreed to the License.
- -
-MIT License
-
-Copyright (c) 2024 Liquid Tensor LLC
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
- By clicking Continue, installing, and/or using the MORagents software you accept the terms of the License agreement.
- - diff --git a/build_assets/macOS/postinstall.sh b/build_assets/macOS/postinstall.sh deleted file mode 100644 index 68cced52..00000000 --- a/build_assets/macOS/postinstall.sh +++ /dev/null @@ -1,85 +0,0 @@ -#!/bin/bash - -# Function to log messages -log_message() { - echo "$(date '+%Y-%m-%d %H:%M:%S') - $1" -} - -# Function to check if an application is running -is_app_running() { - app_name=$1 - pgrep -x "$app_name" >/dev/null -} - -# Function to attempt opening Docker with retries -open_docker_with_retry() { - max_attempts=5 - attempt=1 - while [ $attempt -le $max_attempts ]; do - log_message "Attempt $attempt to open Docker.app" - if [ -d "/Applications/Docker.app" ]; then - if open -a "Docker.app" 2>/dev/null; then - log_message "Docker.app opened successfully" - return 0 - else - log_message "Failed to open Docker.app, waiting before retry..." - fi - else - log_message "Docker.app not found in /Applications" - fi - sleep 10 - attempt=$((attempt+1)) - done - log_message "Failed to open Docker.app after $max_attempts attempts" - return 1 -} - -# Main script starts here -log_message "Starting post-install script" - -# Wait for a bit to ensure Docker installation is complete -log_message "Waiting for 30 seconds to ensure Docker installation is complete..." -sleep 30 - -# Attempt to open Docker -if ! open_docker_with_retry; then - log_message "Warning: Could not open Docker.app. It may need to be opened manually." -fi - -# Set the timeout duration (in seconds) -timeout=300 # 5 minutes - -# Wait for Docker Desktop to be running -log_message "Waiting for Docker Desktop to start..." -start_time=$(date +%s) -while ! is_app_running "Docker Desktop"; do - current_time=$(date +%s) - elapsed_time=$((current_time - start_time)) - - if [ $elapsed_time -ge $timeout ]; then - log_message "Warning: Docker Desktop did not start within the specified timeout." - break - fi - - sleep 5 -done - -if is_app_running "Docker Desktop"; then - log_message "Docker Desktop is running." -else - log_message "Warning: Docker Desktop is not running. It may need to be started manually." -fi - -# Open MORAgents.app -if [ -d "/Applications/MORAgents.app" ]; then - if open -a "MORAgents.app" 2>/dev/null; then - log_message "MORAgents.app opened successfully" - else - log_message "Warning: Failed to open MORAgents.app. It may need to be opened manually." - fi -else - log_message "Error: MORAgents.app not found in /Applications" -fi - -log_message "Post-install script completed." -exit 0 diff --git a/build_assets/macOS/postinstall_intel.sh b/build_assets/macOS/postinstall_intel.sh deleted file mode 100644 index c78a2e24..00000000 --- a/build_assets/macOS/postinstall_intel.sh +++ /dev/null @@ -1,91 +0,0 @@ -#!/bin/bash - -# Function to log messages -log_message() { - echo "$(date '+%Y-%m-%d %H:%M:%S') - $1" -} - -# Check if running on Intel Mac -if [ "$(uname -m)" != "x86_64" ]; then - log_message "Error: This script is for Intel-based Macs only." - exit 1 -fi - -# Function to check if an application is running -is_app_running() { - app_name=$1 - pgrep -x "$app_name" >/dev/null -} - -# Function to attempt opening Docker with retries -open_docker_with_retry() { - max_attempts=5 - attempt=1 - while [ $attempt -le $max_attempts ]; do - log_message "Attempt $attempt to open Docker.app" - if [ -d "/Applications/Docker.app" ]; then - if open -a "Docker.app" 2>/dev/null; then - log_message "Docker.app opened successfully" - return 0 - else - log_message "Failed to open Docker.app, waiting before retry..." - fi - else - log_message "Docker.app not found in /Applications" - fi - sleep 10 - attempt=$((attempt+1)) - done - log_message "Failed to open Docker.app after $max_attempts attempts" - return 1 -} - -# Main script starts here -log_message "Starting post-install script" - -# Wait for a bit to ensure Docker installation is complete -log_message "Waiting for 30 seconds to ensure Docker installation is complete..." -sleep 30 - -# Attempt to open Docker -if ! open_docker_with_retry; then - log_message "Warning: Could not open Docker.app. It may need to be opened manually." -fi - -# Set the timeout duration (in seconds) -timeout=300 # 5 minutes - -# Wait for Docker Desktop to be running -log_message "Waiting for Docker Desktop to start..." -start_time=$(date +%s) -while ! is_app_running "Docker Desktop"; do - current_time=$(date +%s) - elapsed_time=$((current_time - start_time)) - - if [ $elapsed_time -ge $timeout ]; then - log_message "Warning: Docker Desktop did not start within the specified timeout." - break - fi - - sleep 5 -done - -if is_app_running "Docker Desktop"; then - log_message "Docker Desktop is running." -else - log_message "Warning: Docker Desktop is not running. It may need to be started manually." -fi - -# Open MORAgents.app -if [ -d "/Applications/MORAgents.app" ]; then - if open -a "MORAgents.app" 2>/dev/null; then - log_message "MORAgents.app opened successfully" - else - log_message "Warning: Failed to open MORAgents.app. It may need to be opened manually." - fi -else - log_message "Error: MORAgents.app not found in /Applications" -fi - -log_message "Post-install script completed." -exit 0 diff --git a/build_assets/macOS/preinstall.sh b/build_assets/macOS/preinstall.sh deleted file mode 100644 index a18eddb3..00000000 --- a/build_assets/macOS/preinstall.sh +++ /dev/null @@ -1,12 +0,0 @@ -#!/bin/bash - -python_version=$(python3 --version 2>&1 | awk '{print $2}') -if [[ "$python_version" < "3.12.0" ]]; then - echo "Installing Python 3.12.0..." - curl -O https://www.python.org/ftp/python/3.12.0/python-3.12.0-macos11.pkg - sudo installer -pkg python-3.12.0-macos11.pkg -target / - echo "Python 3.12.0 has been successfully installed." - rm python-3.12.0-macos11.pkg -else - echo "Python version is already up to date." -fi diff --git a/build_assets/macOS/preinstall_docker.sh b/build_assets/macOS/preinstall_docker.sh deleted file mode 100644 index 57b541a8..00000000 --- a/build_assets/macOS/preinstall_docker.sh +++ /dev/null @@ -1,55 +0,0 @@ -#!/bin/bash - -# Function to log messages -log_message() { - echo "$(date '+%Y-%m-%d %H:%M:%S') - $1" -} - -# Set variables -DOCKER_DMG_URL="https://desktop.docker.com/mac/main/arm64/Docker.dmg" -DOCKER_DMG="Docker.dmg" -VOLUME_NAME="Docker" -INSTALL_PATH="/Volumes/$VOLUME_NAME/Docker.app/Contents/MacOS/install" - -# Download Docker -log_message "Downloading Docker..." -if curl -L "$DOCKER_DMG_URL" -o "$DOCKER_DMG"; then - log_message "Docker download completed." -else - log_message "Error: Failed to download Docker." - exit 1 -fi - -# Mount the DMG -log_message "Mounting Docker DMG..." -if hdiutil attach "$DOCKER_DMG"; then - log_message "Docker DMG mounted successfully." -else - log_message "Error: Failed to mount Docker DMG." - exit 1 -fi - -# Run the installer -log_message "Running Docker installer..." -if "$INSTALL_PATH" --accept-license; then - log_message "Docker installation completed." -else - log_message "Error: Docker installation failed." - hdiutil detach "/Volumes/$VOLUME_NAME" - exit 1 -fi - -# Detach the DMG -log_message "Detaching Docker DMG..." -if hdiutil detach "/Volumes/$VOLUME_NAME"; then - log_message "Docker DMG detached successfully." -else - log_message "Warning: Failed to detach Docker DMG. This is not critical." -fi - -# Clean up -log_message "Cleaning up..." -rm -f "$DOCKER_DMG" - -log_message "Docker preinstall script completed successfully." -exit 0 diff --git a/build_assets/macOS/preinstall_docker_intel.sh b/build_assets/macOS/preinstall_docker_intel.sh deleted file mode 100644 index 1ef67c59..00000000 --- a/build_assets/macOS/preinstall_docker_intel.sh +++ /dev/null @@ -1,61 +0,0 @@ -#!/bin/bash - -# Function to log messages -log_message() { - echo "$(date '+%Y-%m-%d %H:%M:%S') - $1" -} - -# Check if running on Intel Mac -if [ "$(uname -m)" != "x86_64" ]; then - log_message "Error: This script is for Intel-based Macs only." - exit 1 -fi - -# Set variables -DOCKER_DMG_URL="https://desktop.docker.com/mac/main/amd64/Docker.dmg" -DOCKER_DMG="Docker.dmg" -VOLUME_NAME="Docker" -INSTALL_PATH="/Volumes/$VOLUME_NAME/Docker.app/Contents/MacOS/install" - -# Download Docker -log_message "Downloading Docker for Intel Mac..." -if curl -L "$DOCKER_DMG_URL" -o "$DOCKER_DMG"; then - log_message "Docker download completed." -else - log_message "Error: Failed to download Docker." - exit 1 -fi - -# Mount the DMG -log_message "Mounting Docker DMG..." -if hdiutil attach "$DOCKER_DMG"; then - log_message "Docker DMG mounted successfully." -else - log_message "Error: Failed to mount Docker DMG." - exit 1 -fi - -# Run the installer -log_message "Running Docker installer..." -if "$INSTALL_PATH" --accept-license; then - log_message "Docker installation completed." -else - log_message "Error: Docker installation failed." - hdiutil detach "/Volumes/$VOLUME_NAME" - exit 1 -fi - -# Detach the DMG -log_message "Detaching Docker DMG..." -if hdiutil detach "/Volumes/$VOLUME_NAME"; then - log_message "Docker DMG detached successfully." -else - log_message "Warning: Failed to detach Docker DMG. This is not critical." -fi - -# Clean up -log_message "Cleaning up..." -rm -f "$DOCKER_DMG" - -log_message "Docker preinstall script completed successfully." -exit 0 diff --git a/build_assets/macOS/preinstall_ollama.sh b/build_assets/macOS/preinstall_ollama.sh deleted file mode 100644 index a74c1d58..00000000 --- a/build_assets/macOS/preinstall_ollama.sh +++ /dev/null @@ -1,11 +0,0 @@ -#!/bin/bash - -curl -L https://github.com/ollama/ollama/releases/download/v0.3.6/ollama-darwin -o ollama - -chmod +x ollama - -sudo mv ollama /usr/local/bin/ - -nohup /usr/local/bin/ollama serve > /dev/null 2>&1 & -/usr/local/bin/ollama pull llama3.2:3b -/usr/local/bin/ollama pull nomic-embed-text diff --git a/build_assets/macOS/welcome.html b/build_assets/macOS/welcome.html deleted file mode 100644 index 70a9c49f..00000000 --- a/build_assets/macOS/welcome.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - -Welcome to MORagents v0.2.2 Installer
-- Thank you for choosing to install MORagents on your system. This installer - will guide you through the process of setting up MORagents and its - dependencies. -
-The installer will perform the following steps:
--
-
- - Check the installed Python version and install Python 3.12.0 if - necessary. - -
- - Check if Docker is installed and install Docker Desktop if needed. - -
- Check if Ollama is installed and install Ollama if needed. -
- Install the MORagents application. -
- Please note that during the installation process, you may be prompted to - enter your system password to authorize the installation of required - components. -
-Click "Continue" to proceed with the installation.
- - diff --git a/build_assets/windows/Packaging_Instructions_Windows.md b/build_assets/windows/Packaging_Instructions_Windows.md deleted file mode 100644 index 51d3147e..00000000 --- a/build_assets/windows/Packaging_Instructions_Windows.md +++ /dev/null @@ -1,21 +0,0 @@ -## Distribution - -For Windows: -1. Export docker images after building. See [Windows Build](./README_WINDOWS_DEV_BUILD.md) -```shell - docker save -o moragents_dockers-nginx.tar moragents_dockers-nginx:latest - docker save -o moragents_dockers-agents.tar moragents_dockers-agents:latest - -``` - -2. -```shell - pyinstaller --name="MORagents" --icon=".\images\moragents.ico" main.py -``` - -Windows Inno Setup for Wizard: -1) Install Inno Setup -2) In the GUI, enter the text found in [wizard_windows.iss](../../wizard_windows.iss) -3) Click Build > Compile -4) Hit the Play/Run button on the top -5) Installer will run and create a Desktop icon to run the application. diff --git a/build_assets/windows/README_WINDOWS_DEV_BUILD.md b/build_assets/windows/README_WINDOWS_DEV_BUILD.md deleted file mode 100644 index 82d9762e..00000000 --- a/build_assets/windows/README_WINDOWS_DEV_BUILD.md +++ /dev/null @@ -1,46 +0,0 @@ -## For Developers - -This README will guide you on building a Docker container for agent execution as well as a desktop UI app. -You may instead simply download the [pre-built app](../../README.md) - -#### Windows -1. Ensure you have Python, Pip, [Docker Desktop](https://www.docker.com/products/docker-desktop/), and Git installed on your Windows machine. Note: please install python version 3.10.0+, older versions will produce outdated versions of tkinter when running the requirements install. - -2. Clone the repository using Command Prompt or PowerShell: -```shell -> git clone https://github.com/MorpheusAIs/moragents -> cd moragents -``` - -3. Build the Docker Image for Local Agent Execution: -```shell -> docker compose -f submodules/moragents_dockers/docker-compose.yml up -``` - -4. Install Deps for UI, Recommended to use virtualenv -```shell -> python -m venv .venv -> Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass -> .\.venv\Scripts\Activate.ps1 -> pip install -r requirements.txt -``` - -6. Build App for Local Installation -```shell -pyinstaller --name="MORagents" --icon="moragents.ico" main.py -``` -There is a known and common issue where pyinstaller will trigger Windows Defender (see [here](https://stackoverflow.com/questions/54733909/windows-defender-alert-users-from-my-pyinstaller-exe) for more details). If there is a security warning, perform the following: - -- Open Windows Security: Go to Start > Settings > Update & Security > Windows Security > Virus & threat protection. -- Manage Settings: Under Virus & threat protection settings, select "Manage settings." -- Add or remove exclusions: Scroll down to "Exclusions" and select "Add or remove exclusions." -- Add an exclusion: Select "Add an exclusion" and choose the folder where your project is located. - -More details located [here](https://support.microsoft.com/en-us/windows/add-an-exclusion-to-windows-security-811816c0-4dfd-af4a-47e4-c301afe13b26) - -7. The compiled executable will be located in the dist folder. You can create a shortcut to the MORagents.exe file for easy access. -8. Double-click the MORagents.exe file to open the MORagents app on your Windows machine. Make sure Docker is running before opening MORagents. - ---- - -MacOS build instructions can be found [here](../macOS/README_MACOS_DEV_BUILD.md) diff --git a/config.py b/config.py deleted file mode 100644 index cfe9b723..00000000 --- a/config.py +++ /dev/null @@ -1,72 +0,0 @@ -import os -import sys - -from utils.host_utils import get_os_and_arch - -os_name, arch = get_os_and_arch() - -if os_name == "macOS": - repo_root = os.path.dirname(__file__) -elif os_name == "Windows": - # Run as bundled executable if condition is met, else run as regular Python script - repo_root = sys._MEIPASS if getattr(sys, "frozen", False) else os.path.dirname(__file__) -elif os_name == "Linux": - repo_root = os.path.dirname(__file__) -else: - raise RuntimeError(f"Unsupported OS: {os_name}") - - -class AgentDockerConfig: - MACOS_APPLE_IMAGE_NAMES = [ - "lachsbagel/moragents_dockers-nginx:apple-0.2.2", - "lachsbagel/moragents_dockers-agents:apple-0.2.2", - ] - MACOS_INTEL_IMAGE_NAMES = [ - "lachsbagel/moragents_dockers-nginx:amd64-0.2.2", - "lachsbagel/moragents_dockers-agents:amd64-0.2.2", - ] - WINDOWS_IMAGE_NAMES = [ - "lachsbagel/moragents_dockers-nginx:amd64-0.2.2", - "lachsbagel/moragents_dockers-agents:amd64-0.2.2", - ] - LINUX_IMAGE_NAMES = [ # TODO, may need linux specific tagged images - "lachsbagel/moragents_dockers-nginx:amd64-0.2.2", - "lachsbagel/moragents_dockers-agents:amd64-0.2.2", - ] - - @staticmethod - def get_current_image_names(): - if os_name == "macOS" and arch == "ARM64": - return AgentDockerConfig.MACOS_APPLE_IMAGE_NAMES - elif os_name == "macOS" and arch == "x86_64": - return AgentDockerConfig.MACOS_INTEL_IMAGE_NAMES - elif os_name == "Windows": - return AgentDockerConfig.WINDOWS_IMAGE_NAMES - elif os_name == "Linux": - return AgentDockerConfig.LINUX_IMAGE_NAMES - else: - raise RuntimeError(f"Unsupported OS: {os_name}") - - -class AgentDockerConfigDeprecate: - OLD_IMAGE_NAMES = [ - "morpheus/price_fetcher_agent:latest", - "moragents_dockers-nginx:latest", - "moragents_dockers-agents:latest", - "lachsbagel/moragents_dockers-nginx:apple-0.0.9", - "lachsbagel/moragents_dockers-agents:apple-0.0.9", - "lachsbagel/moragents_dockers-nginx:amd64-0.0.9", - "lachsbagel/moragents_dockers-agents:amd64-0.0.9", - "lachsbagel/moragents_dockers-nginx:apple-0.1.0", - "lachsbagel/moragents_dockers-agents:apple-0.1.0", - "lachsbagel/moragents_dockers-nginx:amd64-0.1.0", - "lachsbagel/moragents_dockers-agents:amd64-0.1.0", - "lachsbagel/moragents_dockers-nginx:apple-0.2.0", - "lachsbagel/moragents_dockers-agents:apple-0.2.0", - "lachsbagel/moragents_dockers-nginx:amd64-0.2.0", - "lachsbagel/moragents_dockers-agents:amd64-0.2.0", - "lachsbagel/moragents_dockers-nginx:apple-0.2.1", - "lachsbagel/moragents_dockers-agents:apple-0.2.1", - "lachsbagel/moragents_dockers-nginx:amd64-0.2.1", - "lachsbagel/moragents_dockers-agents:amd64-0.2.1" - ] diff --git a/docs/agent-development-guide.md b/docs/agent-development-guide.md new file mode 100644 index 00000000..ba382188 --- /dev/null +++ b/docs/agent-development-guide.md @@ -0,0 +1,225 @@ +# Agent Development Guide + +This guide walks you through the process of developing new agents for the MySuperAgent platform. + +## Agent Architecture + +Agents in MySuperAgent follow a modular architecture: + +``` +your_agent_name/ +βββ __init__.py +βββ agent.py +βββ config.py +βββ tools/ + βββ tools.py +``` + +Each agent consists of: + +- **agent.py**: Main agent class that extends AgentCore +- **config.py**: Configuration including tool definitions +- **tools/tools.py**: Implementation of agent-specific tools + +## Creating a New Agent + +### 1. Use the Creation Script + +```bash +./create_new_agent.sh +``` + +When prompted, enter your agent name (must start with a letter and can only contain letters, numbers, underscores, and hyphens). + +### 2. Configure Agent in Main Config + +Add your agent to the main config file in `src/config.py`: + +```python +from services.agents.your_agent_name.config import Config as YourAgentConfig + +class Config: + # ... existing config ... + + AGENT_CONFIGS = { + # ... existing agents ... + "your_agent_name": YourAgentConfig, + } +``` + +### 3. Implement Agent Logic + +In `your_agent_name/agent.py`: + +```python +class YourAgentNameAgent(AgentCore): + """Agent for handling specific operations related to your agent's purpose.""" + + def __init__(self, config: Dict[str, Any], llm: Any, embeddings: Any): + super().__init__(config, llm, embeddings) + self.tools_provided = [ + # Add your tool functions here + ] + self.tool_bound_llm = self.llm.bind_tools(self.tools_provided) + + async def _process_request(self, request: ChatRequest) -> AgentResponse: + try: + messages = [ + SystemMessage(content="Your custom system prompt here"), + HumanMessage(content=request.prompt.content), + ] + + result = self.tool_bound_llm.invoke(messages) + return await self._handle_llm_response(result) + except Exception as e: + self.logger.error(f"Error processing request: {str(e)}", exc_info=True) + return AgentResponse.error(error_message=str(e)) + + async def _execute_tool(self, func_name: str, args: Dict[str, Any]) -> AgentResponse: + """Execute the appropriate tool based on function name.""" + tool_map = { + # Map your tool names to their implementation functions + "your_tool_name": self._your_tool_implementation, + } + + if func_name not in tool_map: + return AgentResponse.error(error_message=f"Unknown tool: {func_name}") + + try: + result = await tool_map[func_name](**args) + return AgentResponse.success(content=result) + except Exception as e: + return AgentResponse.error(error_message=str(e)) +``` + +### 4. Implement Tools + +In `your_agent_name/tools/tools.py`: + +```python +import logging +from typing import Dict, Any + +logger = logging.getLogger(__name__) + +async def your_tool_implementation(arg1: str, arg2: int) -> str: + """ + Implementation of your custom tool. + + Args: + arg1: Description of first argument + arg2: Description of second argument + + Returns: + str: Result of the tool operation + """ + try: + # Your tool implementation here + result = f"Processed {arg1} with value {arg2}" + return result + except Exception as e: + logger.error(f"Error in tool implementation: {str(e)}", exc_info=True) + raise +``` + +### 5. Configure Tools + +In `your_agent_name/config.py`: + +```python +class Config: + tools = [ + { + "name": "your_tool_name", + "description": "Description of what your tool does", + "parameters": { + "type": "object", + "properties": { + "arg1": { + "type": "string", + "description": "Description of first argument" + }, + "arg2": { + "type": "integer", + "description": "Description of second argument" + } + }, + "required": ["arg1", "arg2"] + } + } + ] +``` + +## Best Practices + +### Error Handling + +- Use the `@handle_exceptions` decorator for common exceptions +- Return appropriate `AgentResponse` types: + - `AgentResponse.success(content="Success message")` + - `AgentResponse.error(error_message="Error description")` + - `AgentResponse.needs_info(message="Additional information needed")` + +### Logging + +Always use the logger for debugging and monitoring: + +```python +self.logger.info("Processing request") +self.logger.error("Error occurred", exc_info=True) +``` + +### Input Validation + +Validate inputs early to prevent errors down the pipeline: + +```python +if not some_required_value: + return AgentResponse.needs_info(message="Please provide required value") +``` + +### Modularity + +- Keep tool implementations focused on a single responsibility +- Separate complex logic into helper functions +- Use type hints consistently for better code maintainability + +## Testing Your Agent + +Create tests in the `tests/agents/your_agent_name/` directory: + +```python +import pytest +from services.agents.your_agent_name.agent import YourAgentNameAgent +from models.service.chat_models import ChatRequest + +@pytest.mark.asyncio +async def test_agent_basic_functionality(): + # Setup test agent + agent = YourAgentNameAgent(mock_config, mock_llm, mock_embeddings) + + # Create request + request = ChatRequest(prompt="Test prompt") + + # Process request + response = await agent.chat(request) + + # Assert on response + assert response.error_message is None + assert response.content is not None +``` + +Test different aspects: + +- Basic functionality +- Tool implementations +- Error handling +- Edge cases + +## Examples + +See existing agents in the repository for real-world examples: + +- DCA Agent +- Base Agent +- Tweet Sizzler diff --git a/docs/available-apis-guide.md b/docs/available-apis-guide.md new file mode 100644 index 00000000..cfbb9310 --- /dev/null +++ b/docs/available-apis-guide.md @@ -0,0 +1,312 @@ +# API Documentation + +This document outlines the REST API endpoints available in the MySuperAgent platform. + +## Base URL + +All API endpoints are available under: + +``` +https://api.mysuperagent.io +``` + +## Authentication + +Authentication is required for all API endpoints. Use one of the following methods: + +1. **API Key Authentication**: + + - Include the API key in the request header: + + ``` + X-API-Key: your_api_key_here + ``` + +2. **Bearer Token Authentication**: + - Include a bearer token in the Authorization header: + ``` + Authorization: Bearer your_token_here + ``` + +## Endpoints + +### Agent Interaction + +#### Chat with Agent + +``` +POST /api/chat +``` + +Request an agent to process a chat message. + +**Request Body**: + +```json +{ + "prompt": "Your request here", + "agent_id": "optional_specific_agent_id", + "conversation_id": "optional_ongoing_conversation_id", + "context": { + "optional_context_parameter1": "value1", + "optional_context_parameter2": "value2" + } +} +``` + +**Response**: + +```json +{ + "id": "response_id", + "content": "Agent response message", + "tool_calls": [ + { + "tool": "tool_name", + "arguments": { + "arg1": "value1" + }, + "result": "Tool execution result" + } + ], + "conversation_id": "conversation_id", + "agent_id": "agent_that_processed_request", + "error_message": null, + "needs_info": false, + "info_needed": null +} +``` + +#### Get Available Agents + +``` +GET /api/agents +``` + +Retrieve a list of all available agents. + +**Response**: + +```json +{ + "agents": [ + { + "id": "base_agent", + "name": "Base USDC Agent", + "description": "Send USDC on Base blockchain", + "capabilities": ["send_usdc", "check_balance"] + }, + { + "id": "dca_agent", + "name": "DCA Strategy Agent", + "description": "Dollar cost averaging cryptocurrency strategy", + "capabilities": ["create_strategy", "get_strategies", "execute_strategy"] + } + ] +} +``` + +### Document Analysis + +#### Upload Document + +``` +POST /api/documents/upload +``` + +Upload a document for analysis. + +**Request Body**: + +- Form data with `file` parameter +- Optional `metadata` parameter (JSON string) + +**Response**: + +```json +{ + "document_id": "doc_123456", + "filename": "example.pdf", + "size": 1245678, + "page_count": 23, + "status": "processing" +} +``` + +#### Query Document + +``` +POST /api/documents/{document_id}/query +``` + +Ask questions about a previously uploaded document. + +**Request Body**: + +```json +{ + "query": "What is the main topic of the document?", + "include_citations": true +} +``` + +**Response**: + +```json +{ + "answer": "The main topic of the document is artificial intelligence.", + "citations": [ + { + "page": 1, + "text": "This paper explores the latest developments in artificial intelligence." + }, + { + "page": 3, + "text": "Artificial intelligence has seen rapid growth in recent years." + } + ] +} +``` + +### Web3 Interactions + +#### Get Token Balances + +``` +GET /api/wallet/{wallet_address}/balances +``` + +Retrieve token balances for a specific wallet address. + +**Response**: + +```json +{ + "eth_balance": "1.234", + "tokens": [ + { + "symbol": "USDC", + "balance": "100.00", + "chain": "Base" + }, + { + "symbol": "USDT", + "balance": "50.00", + "chain": "Ethereum" + } + ] +} +``` + +#### Submit Transaction + +``` +POST /api/transactions/submit +``` + +Submit a blockchain transaction. + +**Request Body**: + +```json +{ + "chain": "Base", + "transaction_data": { + "to": "0x1234...", + "value": "10", + "token": "USDC", + "data": "0x..." + }, + "authorization": { + "type": "signature", + "value": "0x..." + } +} +``` + +**Response**: + +```json +{ + "transaction_id": "tx_789012", + "hash": "0xabcd...", + "status": "pending", + "estimated_confirmation_time": "30 seconds" +} +``` + +## Error Handling + +All API endpoints follow consistent error handling patterns. + +**Error Response Format**: + +```json +{ + "error": { + "code": "error_code", + "message": "Human readable error message", + "details": { + "additional_information": "More details about the error" + } + } +} +``` + +**Common Error Codes**: + +- `400`: Bad Request - Missing or invalid parameters +- `401`: Unauthorized - Invalid or missing authentication +- `403`: Forbidden - Valid authentication but insufficient permissions +- `404`: Not Found - Resource not found +- `429`: Too Many Requests - Rate limit exceeded +- `500`: Internal Server Error - Server-side issue + +## Rate Limits + +API endpoints are subject to rate limits: + +- 60 requests per minute per API key +- Higher rate limits available for premium tiers + +Headers indicating rate limits are included in responses: + +``` +X-RateLimit-Limit: 60 +X-RateLimit-Remaining: 58 +X-RateLimit-Reset: 1609459200 +``` + +## Webhooks + +Configure webhooks to receive real-time updates on specific events. + +**Event Types**: + +- `agent.response_complete` +- `document.processing_complete` +- `transaction.status_change` + +**Webhook Payload Example**: + +```json +{ + "event_type": "transaction.status_change", + "timestamp": "2023-03-15T14:30:45Z", + "data": { + "transaction_id": "tx_789012", + "new_status": "confirmed", + "hash": "0xabcd..." + } +} +``` + +## SDK Support + +Official SDKs are available for: + +- Python +- JavaScript/TypeScript +- Go + +Visit [https://github.com/mysuperagent/sdks](https://github.com/mysuperagent/sdks) for SDK documentation and examples. diff --git a/docs/deployment-guide.md b/docs/deployment-guide.md new file mode 100644 index 00000000..dd1973a9 --- /dev/null +++ b/docs/deployment-guide.md @@ -0,0 +1,155 @@ +# Deployment Guide + +This document outlines the process for deploying the MySuperAgent platform and individual agents to production environments. + +## Overview + +MySuperAgent uses AWS CloudFormation for infrastructure as code (IaC) deployment, with GitHub Actions for CI/CD automation. + +## Architecture + +The platform consists of: + +- **Frontend**: React application served via CloudFront +- **Backend**: Python FastAPI service running on EC2 +- **Infrastructure**: + - Application Load Balancer + - EC2 instances + - RDS database + - S3 storage + - ACM certificates for HTTPS + - Route53 DNS configuration + +## Prerequisites + +Before deployment, ensure you have: + +1. AWS account with appropriate permissions +2. GitHub repository access +3. Required secrets configured in GitHub repository + +## Environment Setup + +### AWS Resources + +The following AWS resources should be set up: + +1. **VPC**: `vpc-0e17a977e38b866c1` +2. **Subnets**: + - `subnet-01abb34d1b3a008ac` + - `subnet-0a852de834c421b24` +3. **Security Groups**: + - ALB Security Group: `sg-0ab173f93f4f06ac1` +4. **Route53 Hosted Zone**: `Z08521642MAYLL3XZZMIN` +5. **EC2 Key Pair**: `agents-key` + +## Deployment Process + +### Infrastructure Deployment + +To deploy or update the infrastructure, use the existing GitHub Actions workflow: + +1. Navigate to the GitHub repository +2. Go to "Actions" tab +3. Select the "Deploy MySuperAgent Infrastructure" workflow +4. Click "Run workflow" +5. Choose the environment (staging/production) +6. Click "Run workflow" to execute + +This workflow will deploy the CloudFormation stack defined in `infrastructure/mysuperagent-stack.yml`. + +### Agent Deployment + +To build and push agent docker images to ECR: + +1. Navigate to the GitHub repository +2. Go to "Actions" tab +3. Select the "Reusable Docker Production Build / Push (AWS ECR)" workflow +4. Click "Run workflow" +5. Provide the required inputs: + - **app_directory**: Relative path to the application + - **app_name**: Name of the application + - **aws_account_id**: AWS account ID + - **aws_region**: AWS region + - **ecr_repository**: ECR repository name + - **image_tag**: Version tag for the image +6. Click "Run workflow" to execute + +The workflow will build and push the Docker image to ECR with the specified tag. + +## Deployment Outputs + +After successful deployment, the following outputs will be available: + +- **Frontend URL**: `https://mysuperagent.io` +- **API URL**: `https://api.mysuperagent.io` +- **Load Balancer DNS**: Available in CloudFormation outputs + +## Monitoring and Troubleshooting + +### CloudWatch Monitoring + +Monitor your deployment using: + +- CloudWatch Alarms for EC2 instance health, API response time, and error rates +- CloudWatch Logs for application logs + +### Emergency SSH Access + +**Note**: SSH access should only be used for emergency troubleshooting when the application is not functioning properly and cannot be fixed through normal deployment methods. + +If you need to access an EC2 instance directly: + +```bash +ssh -i agents-key.pem ec2-user@
+
+ );
+};
+
+export default CodexNftSearchMessage;
diff --git a/submodules/frontend/components/Agents/Codex/NftSearch/CodexNftSearchMessage.types.ts b/submodules/frontend/components/Agents/Codex/NftSearch/CodexNftSearchMessage.types.ts
new file mode 100644
index 00000000..45ebab4e
--- /dev/null
+++ b/submodules/frontend/components/Agents/Codex/NftSearch/CodexNftSearchMessage.types.ts
@@ -0,0 +1,30 @@
+// CodexNftSearchMessage.types.ts
+
+interface NftItem {
+ address: string;
+ average: string;
+ ceiling: string;
+ floor: string;
+ id: string;
+ imageUrl?: string | null;
+ name?: string | null;
+ networkId: number;
+ symbol?: string | null;
+ tradeCount: string;
+ tradeCountChange: number;
+ volume: string;
+ volumeChange: number;
+ window: string;
+}
+
+interface NftSearchMetadata {
+ success: boolean;
+ hasMore: number;
+ items: NftItem[];
+}
+
+interface CodexNftSearchMessageProps {
+ metadata: NftSearchMetadata;
+}
+
+export type { CodexNftSearchMessageProps, NftItem, NftSearchMetadata };
diff --git a/submodules/frontend/components/Agents/Codex/TopHolders/CodexTopHoldersMessage.module.css b/submodules/frontend/components/Agents/Codex/TopHolders/CodexTopHoldersMessage.module.css
new file mode 100644
index 00000000..7db0de26
--- /dev/null
+++ b/submodules/frontend/components/Agents/Codex/TopHolders/CodexTopHoldersMessage.module.css
@@ -0,0 +1,237 @@
+.container {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+}
+
+.titleContainer {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.titleIcon {
+ color: #aaa;
+}
+
+.title {
+ font-size: 15px;
+ font-weight: 500;
+ color: #e4e4e4;
+}
+
+.tokenInfo {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.tokenSymbol {
+ font-weight: 600;
+ font-size: 14px;
+ color: #e4e4e4;
+}
+
+.tokenName {
+ font-size: 12px;
+ color: #aaa;
+}
+
+.card {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 10px;
+ padding: 16px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.mainContent {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 14px;
+}
+
+.percentageDisplay {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.percentageValue {
+ font-size: 28px;
+ font-weight: 600;
+ color: #e4e4e4;
+ line-height: 1;
+}
+
+.percentageLabel {
+ font-size: 12px;
+ color: #aaa;
+ margin-top: 4px;
+}
+
+.tokenMetrics {
+ display: flex;
+ gap: 16px;
+}
+
+.metricItem {
+ text-align: right;
+}
+
+.metricLabel {
+ font-size: 11px;
+ color: #aaa;
+ margin-bottom: 2px;
+}
+
+.metricValue {
+ font-size: 14px;
+ font-weight: 500;
+ color: #e4e4e4;
+}
+
+.progressContainer {
+ margin-bottom: 14px;
+}
+
+.progressBar {
+ height: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 4px;
+ overflow: hidden;
+ margin-bottom: 4px;
+}
+
+.progressFill {
+ height: 100%;
+ transition: width 0.5s ease;
+}
+
+.highConcentration {
+ background: linear-gradient(90deg, #ff4d4d, #ff8080);
+}
+
+.moderateConcentration {
+ background: linear-gradient(90deg, #ffb74d, #ffd280);
+}
+
+.lowConcentration {
+ background: linear-gradient(90deg, #4caf50, #80e27e);
+}
+
+.progressLabels {
+ display: flex;
+ justify-content: space-between;
+ color: #888;
+ font-size: 11px;
+}
+
+.analysisContainer {
+ display: flex;
+ align-items: center;
+ padding: 12px;
+ background: rgba(255, 255, 255, 0.03);
+ border-radius: 6px;
+ gap: 12px;
+}
+
+.analysisIcon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.warningIcon {
+ color: #ff9800;
+}
+
+.successIcon {
+ color: #4caf50;
+}
+
+.analysisContent {
+ flex: 1;
+}
+
+.analysisTitle {
+ font-weight: 500;
+ font-size: 13px;
+ margin-bottom: 2px;
+ color: #e4e4e4;
+}
+
+.analysisDescription {
+ font-size: 12px;
+ color: #aaa;
+ line-height: 1.3;
+}
+
+.pairInfo {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ border-left: 1px solid rgba(255, 255, 255, 0.1);
+ padding-left: 12px;
+}
+
+.pairLabel {
+ font-size: 11px;
+ color: #aaa;
+ margin-bottom: 2px;
+}
+
+.pairValue {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 13px;
+ color: #e4e4e4;
+}
+
+.linkIcon {
+ color: #aaa;
+}
+
+@media (max-width: 640px) {
+ .card {
+ padding: 12px;
+ }
+
+ .mainContent {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ }
+
+ .percentageDisplay {
+ align-items: center;
+ width: 100%;
+ }
+
+ .tokenMetrics {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .analysisContainer {
+ flex-wrap: wrap;
+ }
+
+ .pairInfo {
+ width: 100%;
+ border-left: none;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding-left: 0;
+ padding-top: 8px;
+ margin-top: 8px;
+ align-items: flex-start;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Codex/TopHolders/CodexTopHoldersMessage.tsx b/submodules/frontend/components/Agents/Codex/TopHolders/CodexTopHoldersMessage.tsx
new file mode 100644
index 00000000..ba529da7
--- /dev/null
+++ b/submodules/frontend/components/Agents/Codex/TopHolders/CodexTopHoldersMessage.tsx
@@ -0,0 +1,158 @@
+import React from "react";
+import { AlertTriangle, Check, PieChart, ExternalLink } from "lucide-react";
+import styles from "./CodexTopHoldersMessage.module.css";
+import { CodexTopHoldersMessageProps } from "./CodexTopHoldersMessage.types";
+import { Text } from "@chakra-ui/react";
+
+export const CodexTopHoldersMessage: React.FC
+ NFT Collection Search Results
+
+ Found: {metadata.items.length}{" "}
+ {metadata.hasMore > 0 && `(${metadata.hasMore} more available)`}
+
+
+
+ {displayItems.map((item: NftItem) => (
+
+
+ ))}
+
+ {metadata.items.length > INITIAL_DISPLAY_COUNT && (
+
+ )}
+
+
+
+
+ {item.imageUrl ? (
+ 
+ ) : (
+
+
+
+ )}
+
+
+
+ {item.name || "Unnamed Collection"}
+
+ {item.symbol && (
+ {item.symbol}
+ )}
+
+ ID: {item.networkId} β’ {item.window}
+
+
+
+
+
+
+ Floor
+
+
+
+
+ Ceiling
+
+
+
+
+ Average
+
+
+
+
+
+
+
+ Volume
+
+ {formatNumber(item.volume)}
+
+
+
+
+
+ Trades
+
+ {formatNumber(item.tradeCount)}
+
+
+
+
+
+
+ {item.address.slice(0, 8)}...{item.address.slice(-8)}
+
+
+ View
+
+ );
+};
+
+export default CodexTopHoldersMessage;
diff --git a/submodules/frontend/components/Agents/Codex/TopHolders/CodexTopHoldersMessage.types.ts b/submodules/frontend/components/Agents/Codex/TopHolders/CodexTopHoldersMessage.types.ts
new file mode 100644
index 00000000..03d9e1ef
--- /dev/null
+++ b/submodules/frontend/components/Agents/Codex/TopHolders/CodexTopHoldersMessage.types.ts
@@ -0,0 +1,44 @@
+// CodexTopHoldersMessage.types.ts
+
+interface TokenPair {
+ token0: string;
+ token1: string;
+}
+
+interface Exchange {
+ name: string;
+}
+
+interface TokenDetails {
+ address: string;
+ decimals: number;
+ name: string;
+ networkId: number;
+ symbol: string;
+}
+
+interface TokenFilterResult {
+ buyCount1?: number;
+ high1?: string;
+ txnCount1?: number;
+ uniqueTransactions1?: number;
+ volume1?: string;
+ liquidity?: string;
+ marketCap?: string;
+ priceUSD?: string;
+ pair?: TokenPair;
+ exchanges?: Exchange[];
+ token?: TokenDetails;
+}
+
+interface TopHoldersMetadata {
+ success: boolean;
+ data: number; // Percentage owned by top 10 holders
+ token_info?: TokenFilterResult;
+}
+
+interface CodexTopHoldersMessageProps {
+ metadata: TopHoldersMetadata;
+}
+
+export type { CodexTopHoldersMessageProps, TopHoldersMetadata };
diff --git a/submodules/frontend/components/Agents/Codex/TopTokens/CodexTopTokensMessage.module.css b/submodules/frontend/components/Agents/Codex/TopTokens/CodexTopTokensMessage.module.css
new file mode 100644
index 00000000..3b7800e1
--- /dev/null
+++ b/submodules/frontend/components/Agents/Codex/TopTokens/CodexTopTokensMessage.module.css
@@ -0,0 +1,186 @@
+/* CodexTopTokensMessage.module.css */
+.container {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+}
+
+.title {
+ font-size: 16px;
+ font-weight: 500;
+ color: #e4e4e4;
+}
+
+.total {
+ color: #888;
+ font-size: 12px;
+}
+
+.tokenCard {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 8px;
+ padding: 12px;
+ margin-bottom: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.mainInfo {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 8px;
+}
+
+.tokenInfo {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+ flex: 1;
+}
+
+.tokenImage {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+
+.tokenDetails {
+ min-width: 0;
+ flex: 1;
+}
+
+.tokenSymbol {
+ font-size: 12px;
+ font-weight: 500;
+ color: #e4e4e4;
+}
+
+.tokenName {
+ font-size: 12px;
+ color: #888;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.priceSection {
+ text-align: right;
+ min-width: 120px;
+}
+
+.currentPrice {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ font-size: 12px;
+ font-weight: 500;
+ color: #e4e4e4;
+ justify-content: flex-end;
+}
+
+.contractInfo {
+ font-size: 11px;
+ color: #666;
+ margin-top: 2px;
+}
+
+.metricsGrid {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr;
+ gap: 12px;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding-top: 8px;
+}
+
+.metricsColumn {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.metric {
+ display: flex;
+ justify-content: space-between;
+ font-size: 12px;
+ color: #888;
+}
+
+.metricLabel {
+ color: #666;
+}
+
+.priceChanges {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ text-align: right;
+}
+
+.priceChangeItem {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 4px;
+ font-size: 12px;
+ white-space: nowrap;
+}
+
+.timeLabel {
+ color: #666;
+ width: 20px;
+ text-align: right;
+}
+
+.positive {
+ color: #4caf50;
+ display: flex;
+ align-items: center;
+ gap: 2px;
+}
+
+.negative {
+ color: #f44336;
+ display: flex;
+ align-items: center;
+ gap: 2px;
+}
+
+.showMoreButton {
+ width: 100%;
+ padding: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border: none;
+ border-radius: 8px;
+ color: #888;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ font-size: 12px;
+ margin-top: 12px;
+}
+
+.showMoreButton:hover {
+ background: rgba(255, 255, 255, 0.15);
+ color: #aaa;
+}
+
+@media (max-width: 640px) {
+ .metricsGrid {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .priceChanges {
+ display: none;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Codex/TopTokens/CodexTopTokensMessage.tsx b/submodules/frontend/components/Agents/Codex/TopTokens/CodexTopTokensMessage.tsx
new file mode 100644
index 00000000..035bdfa9
--- /dev/null
+++ b/submodules/frontend/components/Agents/Codex/TopTokens/CodexTopTokensMessage.tsx
@@ -0,0 +1,177 @@
+import React, { useState } from "react";
+import {
+ TrendingUp,
+ TrendingDown,
+ DollarSign,
+ ChevronDown,
+ ChevronUp,
+} from "lucide-react";
+import styles from "./CodexTopTokensMessage.module.css";
+import {
+ CodexTopTokensMessageProps,
+ Token,
+} from "@/components/Agents/Codex/TopTokens/CodexTopTokensMessage.types";
+import { Text } from "@chakra-ui/react";
+
+const INITIAL_DISPLAY_COUNT = 3;
+
+const formatNumber = (num: string | number): string => {
+ const value = typeof num === "string" ? parseFloat(num) : num;
+ if (value >= 1000000000) {
+ return `${(value / 1000000000).toFixed(2)}B`;
+ }
+ if (value >= 1000000) {
+ return `${(value / 1000000).toFixed(2)}M`;
+ }
+ if (value >= 1000) {
+ return `${(value / 1000).toFixed(1)}K`;
+ }
+ return value.toLocaleString();
+};
+
+const formatPrice = (price: number): string => {
+ if (price < 0.00001) {
+ return price.toExponential(4);
+ }
+ return price.toFixed(6);
+};
+
+const PriceChange: React.FC<{ change?: number; label: string }> = ({
+ change,
+ label,
+}) => {
+ if (change === undefined) return null;
+
+ const displayChange = change * 100; // Convert from decimal to percentage
+ const isPositive = displayChange > 0;
+
+ return (
+
+
+
+
+
+ {tokenInfo?.token && (
+
+ {tokenInfo.token.symbol}
+ {tokenInfo.token.name && (
+ {tokenInfo.token.name}
+ )}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {percentage.toFixed(2)}%
+
+ Top 10 holders
+
+ {tokenInfo?.priceUSD && (
+
+
+
+ )}
+ {tokenInfo?.marketCap && (
+ Price
+
+ {formatUSD(tokenInfo.priceUSD)}
+
+
+
+ )}
+ {tokenInfo?.liquidity && (
+ Market Cap
+
+ {formatUSD(tokenInfo.marketCap)}
+
+
+
+ )}
+ Liquidity
+
+ {formatUSD(tokenInfo.liquidity)}
+
+
+
+
+
+
+
+
+ 0%
+ 50%
+ 100%
+
+
+
+
+ {concentrationInfo.icon}
+
+
+
+
+ {tokenInfo?.pair && (
+
+ {concentrationInfo.label}
+
+
+ {concentrationInfo.description}
+
+
+
+ )}
+ Paired with
+
+ {tokenInfo.pair.token1}
+
+
+ {label}
+
+ {isPositive ?
+ );
+};
+
+export const CodexTopTokensMessage: React.FC
+
+ );
+};
+
+export default CodexTopTokensMessage;
diff --git a/submodules/frontend/components/Agents/Codex/TopTokens/CodexTopTokensMessage.types.ts b/submodules/frontend/components/Agents/Codex/TopTokens/CodexTopTokensMessage.types.ts
new file mode 100644
index 00000000..736b1c4e
--- /dev/null
+++ b/submodules/frontend/components/Agents/Codex/TopTokens/CodexTopTokensMessage.types.ts
@@ -0,0 +1,36 @@
+// CodexTopTokensMessage.types.ts
+
+interface Token {
+ address: string;
+ name: string;
+ symbol: string;
+ networkId: number;
+ createdAt: number;
+ lastTransaction: number;
+ imageBannerUrl?: string;
+ imageLargeUrl?: string;
+ imageSmallUrl?: string;
+ imageThumbUrl?: string;
+ price: number;
+ marketCap?: string;
+ liquidity: string;
+ volume: string;
+ priceChange1?: number;
+ priceChange4?: number;
+ priceChange12?: number;
+ priceChange24?: number;
+ txnCount24?: number;
+ uniqueBuys24?: number;
+ uniqueSells24?: number;
+}
+
+interface TopTokensMetadata {
+ success: boolean;
+ data: Token[];
+}
+
+interface CodexTopTokensMessageProps {
+ metadata: TopTokensMetadata;
+}
+
+export type { CodexTopTokensMessageProps, TopTokensMetadata, Token };
diff --git a/submodules/frontend/components/Agents/CryptoData/CryptoChartMessage.tsx b/submodules/frontend/components/Agents/CryptoData/CryptoChartMessage.tsx
new file mode 100644
index 00000000..cf83363a
--- /dev/null
+++ b/submodules/frontend/components/Agents/CryptoData/CryptoChartMessage.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { Box, IconButton, Collapse, Text } from "@chakra-ui/react";
+import { BarChart2 } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+
+const TradingViewWidget = React.lazy(() => import("./TradingViewWidget"));
+
+const CryptoChartMessage = ({
+ content,
+ metadata,
+}: {
+ content: any;
+ metadata: any;
+}) => {
+ const [show, setShow] = useState(true);
+
+ return (
+
+ Top Trending Tokens
+ Total: {metadata.data.length}
+
+
+ {displayTokens.map((token: Token) => (
+
+
+ ))}
+
+ {metadata.data.length > INITIAL_DISPLAY_COUNT && (
+
+ )}
+
+
+
+
+ {token.imageThumbUrl && (
+ 
+ )}
+
+
+
+
+ ${token.symbol}
+ {token.name}
+
+
+
+
+
+ {token.networkId} β’ {token.address.slice(0, 6)}...
+ {token.address.slice(-4)}
+
+
+
+
+
+
+
+ Market Cap:
+
+ {token.marketCap ? formatNumber(token.marketCap) : "N/A"}
+
+
+
+ Liquidity:
+ {formatNumber(token.liquidity)}
+
+
+ Volume:
+ {formatNumber(token.volume)}
+
+
+ {token.txnCount24 && (
+
+
+
+ 24h Txns:
+ {formatNumber(token.txnCount24)}
+
+ )}
+ {token.uniqueBuys24 && (
+
+ Buyers:
+ {formatNumber(token.uniqueBuys24)}
+
+ )}
+ {token.uniqueSells24 && (
+
+ Sellers:
+ {formatNumber(token.uniqueSells24)}
+
+ )}
+
+
+
+
{
+ const toast = useToast();
+ const { isOpen, onToggle } = useDisclosure();
+ const [showForm, setShowForm] = useState(false);
+
+ const [config, setConfig] = useState({
+ originToken: "usdc",
+ destinationToken: "weth",
+ stepSize: "100",
+ frequency: "weekly",
+ pauseOnVolatility: false,
+ });
+
+ const handleSave = async () => {
+ // Validation checks
+ if (config.originToken === config.destinationToken) {
+ toast({
+ title: "Invalid Configuration",
+ description: "Origin and destination tokens must be different",
+ status: "error",
+ duration: 3000,
+ isClosable: true,
+ });
+ return;
+ }
+
+ const stepSizeNum = parseFloat(config.stepSize);
+ if (isNaN(stepSizeNum) || stepSizeNum <= 0) {
+ toast({
+ title: "Invalid Step Size",
+ description: "Step size must be a valid number greater than 0",
+ status: "error",
+ duration: 3000,
+ isClosable: true,
+ });
+ return;
+ }
+
+ try {
+ const response = await fetch(
+ "http://localhost:8888/dca/create_strategy",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ ...config,
+ stepSize: stepSizeNum,
+ totalInvestmentAmount: config.totalInvestmentAmount
+ ? parseFloat(config.totalInvestmentAmount)
+ : undefined,
+ maxPurchaseAmount: config.maxPurchaseAmount
+ ? parseFloat(config.maxPurchaseAmount)
+ : undefined,
+ priceThreshold: config.priceThreshold
+ ? parseFloat(config.priceThreshold)
+ : undefined,
+ }),
+ }
+ );
+
+ const data = await response.json();
+
+ if (data.status === "success") {
+ toast({
+ title: "Strategy Created",
+ description: "Your DCA strategy has been created successfully",
+ status: "success",
+ duration: 3000,
+ isClosable: true,
+ });
+ setShowForm(false);
+ } else {
+ throw new Error(data.message);
+ }
+ } catch (error) {
+ toast({
+ title: "Strategy Creation Failed",
+ description:
+ error instanceof Error
+ ? error.message
+ : "Failed to create DCA strategy",
+ status: "error",
+ duration: 3000,
+ isClosable: true,
+ });
+ }
+ };
+
+ const calculateTimeToCompletion = () => {
+ const stepSizeNum = parseFloat(config.stepSize);
+ const totalInvestmentNum = config.totalInvestmentAmount
+ ? parseFloat(config.totalInvestmentAmount)
+ : undefined;
+
+ if (
+ !totalInvestmentNum ||
+ isNaN(totalInvestmentNum) ||
+ !stepSizeNum ||
+ isNaN(stepSizeNum) ||
+ stepSizeNum === 0
+ ) {
+ return "Ongoing strategy";
+ }
+
+ const totalPurchases = Math.ceil(totalInvestmentNum / stepSizeNum);
+ const frequencyInDays =
+ {
+ hourly: 1 / 24,
+ daily: 1,
+ weekly: 7,
+ biweekly: 14,
+ monthly: 30,
+ }[config.frequency] || 0;
+
+ const daysToComplete = totalPurchases * frequencyInDays;
+
+ if (daysToComplete < 1) return "Less than a day";
+ if (daysToComplete < 30) return `${Math.ceil(daysToComplete)} days`;
+ if (daysToComplete < 365) return `${Math.ceil(daysToComplete / 30)} months`;
+ return `${Math.round((daysToComplete / 365) * 10) / 10} years`;
+ };
+
+ return (
+
+
+ {content}
+ setShowForm(!showForm)}
+ variant="ghost"
+ size="sm"
+ color="gray.400"
+ _hover={{ color: "blue.400" }}
+ aria-label="Configure DCA"
+ icon={
+
+
+
+
+ {/* From / To selection */}
+
+
+ From (Origin)
+
+
+
+
+ To (Destination)
+
+
+
+
+ {/* Basic settings */}
+
+ Investment Step Size
+
+ setConfig({ ...config, stepSize: e.target.value })
+ }
+ />
+
+
+
+
+ Total Investment Amount (Optional)
+
+
+ setConfig({
+ ...config,
+ totalInvestmentAmount: e.target.value,
+ })
+ }
+ />
+
+
+
+ Frequency
+
+
+
+ {/* Advanced Settings Toggle */}
+
+
+
+
+
+
+ Maximum Purchase Amount (Optional)
+
+
+ setConfig({
+ ...config,
+ maxPurchaseAmount: e.target.value,
+ })
+ }
+ placeholder="No maximum"
+ />
+
+
+
+
+ Price Threshold (Optional)
+
+
+ setConfig({ ...config, priceThreshold: e.target.value })
+ }
+ placeholder="Only buy below this price"
+ />
+
+
+
+ setConfig({
+ ...config,
+ pauseOnVolatility: e.target.checked,
+ })
+ }
+ color="white"
+ sx={{
+ "[data-checked]": {
+ backgroundColor: "white !important",
+ borderColor: "white !important",
+ },
+ "& .chakra-checkbox__control": {
+ borderColor: "white",
+ },
+ }}
+ >
+ Pause strategy during high volatility
+
+
+
+
+
+ Estimated time to completion: {calculateTimeToCompletion()}
+
+
+
+
+
+
+
+ );
+};
+
+export default DCAMessage;
diff --git a/submodules/frontend/components/Agents/Dexscreener/BoostedTokens/BoostedTokensMessage.module.css b/submodules/frontend/components/Agents/Dexscreener/BoostedTokens/BoostedTokensMessage.module.css
new file mode 100644
index 00000000..bd204469
--- /dev/null
+++ b/submodules/frontend/components/Agents/Dexscreener/BoostedTokens/BoostedTokensMessage.module.css
@@ -0,0 +1,221 @@
+/* BoostedTokensMessage.module.css */
+
+.container {
+ width: 100%;
+ max-width: 900px;
+ margin: 0 auto;
+ color: #e4e4e4;
+ font-size: 14px;
+}
+
+.header {
+ margin-bottom: 16px;
+}
+
+.titleSection {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 4px;
+}
+
+.titleIcon {
+ color: #ffd700;
+}
+
+.title {
+ font-weight: 600;
+ font-size: 16px;
+}
+
+.chainBadge {
+ background-color: rgba(255, 255, 255, 0.1);
+ padding: 2px 8px;
+ border-radius: 12px;
+ font-size: 12px;
+ color: #aaa;
+}
+
+.subtitle {
+ color: #aaa;
+ font-size: 12px;
+}
+
+.table {
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+ margin-bottom: 20px;
+}
+
+.headerRow {
+ height: 40px;
+}
+
+.headerRow th {
+ text-align: left;
+ color: #888;
+ font-weight: 500;
+ padding: 8px;
+ font-size: 13px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.row {
+ height: 60px;
+ transition: background-color 0.2s;
+}
+
+.row:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+}
+
+.row td {
+ padding: 8px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.rankCell {
+ width: 40px;
+ color: #aaa;
+ font-size: 13px;
+ text-align: center;
+}
+
+.tokenCell {
+ width: 50px;
+}
+
+.tokenImg {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.addressCell {
+ width: 140px;
+}
+
+.addressWrapper {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.address {
+ font-family: monospace;
+ color: #e4e4e4;
+}
+
+.chainId {
+ color: #888;
+ font-size: 12px;
+ margin-top: 4px;
+}
+
+.copyButton {
+ background: transparent;
+ border: none;
+ color: #888;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2px;
+}
+
+.copyButton:hover {
+ color: #e4e4e4;
+}
+
+.description {
+ color: #e4e4e4;
+ font-size: 13px;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ line-height: 1.3;
+ max-width: 250px;
+}
+
+.boostCell {
+ width: 120px;
+}
+
+.boostAmount {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: #e4e4e4;
+ font-weight: 500;
+}
+
+.boostIcon {
+ color: #4caf50;
+}
+
+.totalBoost {
+ color: #888;
+ font-size: 12px;
+ margin-top: 4px;
+}
+
+.linksCell {
+ width: 120px;
+}
+
+.links {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.link {
+ color: #888;
+ transition: color 0.2s;
+ display: flex;
+}
+
+.link:hover {
+ color: #e4e4e4;
+}
+
+.noDataCell {
+ text-align: center;
+ padding: 24px;
+ color: #888;
+}
+
+.showMoreButton {
+ width: 100%;
+ padding: 8px 16px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ color: #aaa;
+ font-size: 12px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ transition: all 0.2s;
+}
+
+.showMoreButton:hover {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 768px) {
+ .table {
+ display: block;
+ overflow-x: auto;
+ }
+
+ .description {
+ max-width: 150px;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Dexscreener/BoostedTokens/BoostedTokensMessage.tsx b/submodules/frontend/components/Agents/Dexscreener/BoostedTokens/BoostedTokensMessage.tsx
new file mode 100644
index 00000000..f728a2f5
--- /dev/null
+++ b/submodules/frontend/components/Agents/Dexscreener/BoostedTokens/BoostedTokensMessage.tsx
@@ -0,0 +1,192 @@
+import React, { useState } from "react";
+import { Copy, Award, TrendingUp } from "lucide-react";
+import {
+ FaTwitter,
+ FaTelegram,
+ FaGlobe,
+ FaLink,
+ FaChevronDown,
+ FaChevronUp,
+} from "react-icons/fa";
+import { SiCoinmarketcap } from "react-icons/si";
+import styles from "./BoostedTokensMessage.module.css";
+import { BoostedTokensMessageProps } from "./BoostedTokensMessage.types";
+import { Text } from "@chakra-ui/react";
+import { Image } from "@chakra-ui/react";
+
+const INITIAL_DISPLAY_COUNT = 5;
+
+export const BoostedTokensMessage: React.FC = ({
+ metadata,
+}) => {
+ const [showAll, setShowAll] = useState(false);
+
+ const truncateAddress = (address: string) => {
+ if (!address) return "";
+ return `${address.slice(0, 4)}...${address.slice(-4)}`;
+ };
+
+ const handleCopy = async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ } catch (err) {
+ console.error("Failed to copy:", err);
+ }
+ };
+
+ const formatBoostAmount = (amount: number) => {
+ if (amount >= 1000000) {
+ return `${(amount / 1000000).toFixed(2)}M`;
+ }
+ if (amount >= 1000) {
+ return `${(amount / 1000).toFixed(1)}K`;
+ }
+ return amount.toFixed(2);
+ };
+
+ const getLinkIcon = (labelOrType = "") => {
+ const val = labelOrType.toLowerCase();
+ if (val.includes("twitter")) return = ({
+ metadata,
+}) => {
+ const [showAll, setShowAll] = useState(false);
+
+ const formatPrice = (price: number | null | undefined) => {
+ if (price === null || price === undefined) return "N/A";
+
+ if (price < 0.00001) {
+ return price.toExponential(4);
+ }
+
+ return price.toFixed(Math.min(6, getDecimalPlaces(price) + 2));
+ };
+
+ const getDecimalPlaces = (num: number) => {
+ if (num === 0) return 0;
+ const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+ if (!match) return 0;
+ return Math.max(
+ 0,
+ (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0)
+ );
+ };
+
+ const formatNumber = (value: number | string | undefined | null) => {
+ if (value === undefined || value === null) return "N/A";
+
+ const num = typeof value === "string" ? parseFloat(value) : value;
+
+ if (isNaN(num)) return "N/A";
+
+ if (num >= 1_000_000_000) {
+ return `$${(num / 1_000_000_000).toFixed(2)}B`;
+ }
+ if (num >= 1_000_000) {
+ return `$${(num / 1_000_000).toFixed(2)}M`;
+ }
+ if (num >= 1_000) {
+ return `$${(num / 1_000).toFixed(1)}K`;
+ }
+ return `$${num.toFixed(2)}`;
+ };
+
+ const getSocialIcon = (type = "") => {
+ const lowerType = type.toLowerCase();
+ if (lowerType.includes("twitter")) return = ({
+ metadata,
+}) => {
+ const [showAll, setShowAll] = useState(false);
+
+ const truncateAddress = (address: string) => {
+ if (!address) return "";
+ return `${address.slice(0, 4)}...${address.slice(-4)}`;
+ };
+
+ const handleCopy = async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ } catch (err) {
+ console.error("Failed to copy:", err);
+ }
+ };
+
+ const getLinkIcon = (labelOrType = "") => {
+ const val = labelOrType.toLowerCase();
+ if (val.includes("twitter")) return Failed to load account statistics. ;
+ }
+
+ const stats = metadata.data;
+
+ // Calculate engagement quality score (simplified example)
+ const engagementQuality = Math.min(
+ 100,
+ Math.round(
+ stats.followerEngagementRatio * 100 + stats.averageEngagement / 10
+ )
+ );
+
+ return (
+ = ({
+ metadata,
+}) => {
+ const [showAll, setShowAll] = useState(false);
+
+ if (!metadata?.success || !metadata?.data) {
+ return Failed to load mentions data. ;
+ }
+
+ const mentions = metadata.data;
+ const displayMentions = showAll
+ ? mentions
+ : mentions.slice(0, INITIAL_DISPLAY_COUNT);
+
+ return (
+ = ({
+ metadata,
+}) => {
+ const [showAll, setShowAll] = useState(false);
+
+ if (!metadata.success || !metadata.data) {
+ return Failed to load mentions data. ;
+ }
+
+ const { data: mentions, total } = metadata.data;
+ const displayMentions = showAll
+ ? mentions
+ : mentions.slice(0, INITIAL_DISPLAY_COUNT);
+
+ return (
+ Failed to load trending tokens data. ;
+ }
+
+ const { data: tokens, total } = metadata.data;
+ const displayTokens = showAll
+ ? tokens
+ : tokens.slice(0, INITIAL_DISPLAY_COUNT);
+
+ return (
+ => {
+ const response = await backendClient.post("/claim/claim", { transactions });
+ return response.data.transactions;
+};
+
+export const sendClaimStatus = async (
+ backendClient: Axios,
+ chainId: number,
+ walletAddress: string,
+ claimStatus: string,
+ txHash?: string
+): Promise => {
+ const responseBody = await backendClient.post("/claim/tx_status", {
+ chain_id: chainId,
+ wallet_address: walletAddress,
+ status: claimStatus,
+ tx_hash: txHash || "",
+ tx_type: "claim",
+ });
+
+ return {
+ role: responseBody.data.role,
+ content: responseBody.data.content,
+ agentName: responseBody.data.agentName,
+ error_message: responseBody.data.error_message,
+ metadata: responseBody.data.metadata,
+ requires_action: responseBody.data.requires_action,
+ action_type: responseBody.data.action_type,
+ timestamp: responseBody.data.timestamp,
+ } as ChatMessage;
+};
diff --git a/submodules/frontend/components/Agents/Rugcheck/MostViewed/MostViewedTokensMessage.module.css b/submodules/frontend/components/Agents/Rugcheck/MostViewed/MostViewedTokensMessage.module.css
new file mode 100644
index 00000000..1636f463
--- /dev/null
+++ b/submodules/frontend/components/Agents/Rugcheck/MostViewed/MostViewedTokensMessage.module.css
@@ -0,0 +1,181 @@
+/* ViewedTokensMessage.module.css */
+
+.container {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.header {
+ margin-bottom: 12px;
+}
+
+.title {
+ font-size: 12px;
+ font-weight: 500;
+ color: #e4e4e4;
+ margin-bottom: 2px;
+}
+
+.subtitle {
+ color: #888;
+ font-size: 12px;
+}
+
+.tokenList {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.tokenCard {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 8px;
+ padding: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tokenHeader {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.rankBadge {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ font-weight: 500;
+ color: #aaa;
+}
+
+.tokenInfo {
+ flex: 1;
+}
+
+.tokenName {
+ font-size: 12px;
+ font-weight: 500;
+ color: #e4e4e4;
+ margin-bottom: 2px;
+}
+
+.tokenSymbol {
+ font-size: 12px;
+ color: #888;
+}
+
+.addressWrapper {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ background: rgba(0, 0, 0, 0.2);
+ padding: 2px 4px;
+ border-radius: 4px;
+}
+
+.address {
+ font-family: monospace;
+ font-size: 12px;
+ color: #888;
+}
+
+.copyButton {
+ color: #666;
+ background: none;
+ border: none;
+ padding: 2px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ border-radius: 4px;
+}
+
+.copyButton:hover {
+ color: #888;
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.statsGrid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 8px;
+}
+
+.statItem {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px;
+ background: rgba(255, 255, 255, 0.03);
+ border-radius: 6px;
+}
+
+.statIcon {
+ color: #666;
+}
+
+.statInfo {
+ flex: 1;
+}
+
+.statValue {
+ font-size: 12px;
+ font-weight: 500;
+ color: #e4e4e4;
+ margin-bottom: 2px;
+}
+
+.statLabel {
+ font-size: 12px;
+ color: #888;
+}
+
+.showMoreButton {
+ width: 100%;
+ padding: 6px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 6px;
+ color: #888;
+ font-size: 12px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ transition: all 0.2s;
+}
+
+.showMoreButton:hover {
+ background: rgba(255, 255, 255, 0.08);
+ color: #aaa;
+}
+
+@media (max-width: 640px) {
+ .tokenHeader {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 6px;
+ }
+
+ .addressWrapper {
+ align-self: stretch;
+ }
+
+ .statsGrid {
+ grid-template-columns: 1fr;
+ gap: 6px;
+ }
+
+ .tokenCard {
+ padding: 8px;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Rugcheck/MostViewed/MostViewedTokensMessage.tsx b/submodules/frontend/components/Agents/Rugcheck/MostViewed/MostViewedTokensMessage.tsx
new file mode 100644
index 00000000..be1f800a
--- /dev/null
+++ b/submodules/frontend/components/Agents/Rugcheck/MostViewed/MostViewedTokensMessage.tsx
@@ -0,0 +1,118 @@
+import React, { useState } from "react";
+import { Eye, Users, Copy, ChevronDown, ChevronUp } from "lucide-react";
+import { Text } from "@chakra-ui/react";
+import styles from "./MostViewedTokensMessage.module.css";
+import { ViewedTokensMessageProps } from "./MostViewedTokensMessage.types";
+
+const INITIAL_DISPLAY_COUNT = 5;
+
+export const ViewedTokensMessage: React.FC = ({
+ metadata,
+}) => {
+ const [showAll, setShowAll] = useState(false);
+
+ if (!metadata?.tokens || metadata.tokens.length === 0) {
+ return (
+ = ({
+ metadata,
+}) => {
+ const [showAll, setShowAll] = useState(false);
+
+ if (!metadata?.tokens || metadata.tokens.length === 0) {
+ return (
+ = ({
+ metadata,
+}) => {
+ if (!metadata?.report) {
+ return (
+ = ({
+ content,
+ metadata = {
+ src: "ETH",
+ dst: "USDC",
+ src_amount: 0,
+ dst_amount: 0,
+ src_address: "0x0000000000000000000000000000000000000000",
+ dst_address: "0x0000000000000000000000000000000000000000",
+ },
+}) => {
+ const { address } = useAccount();
+ const { handleSwap, handleCancel, isLoading } = useSwapTransaction();
+ const [slippage, setSlippage] = useState(0.1);
+ const [showForm, setShowForm] = useState(true);
+
+ // Extract values from metadata
+ const src = metadata.src || "ETH";
+ const dst = metadata.dst || "USDC";
+ const srcAmount = metadata.src_amount || 0;
+ const dstAmount = metadata.dst_amount || 0;
+ const srcAddress =
+ metadata.src_address || "0x0000000000000000000000000000000000000000";
+ const dstAddress =
+ metadata.dst_address || "0x0000000000000000000000000000000000000000";
+
+ return (
+ = ({ initialContent }) => {
charactersLeft < 0 || !tweetContent || tweetContent.length === 0
}
>
- Tweet
+ Post on X
diff --git a/submodules/frontend/components/Agents/Tweet/hooks.ts b/submodules/frontend/components/Agents/Tweet/hooks.ts
new file mode 100644
index 00000000..cfc8807b
--- /dev/null
+++ b/submodules/frontend/components/Agents/Tweet/hooks.ts
@@ -0,0 +1,56 @@
+import { Axios } from "axios";
+import { decryptData, downloadFromIrys } from "@/services/LitProtocol/utils";
+
+export const postTweet = async (
+ backendClient: Axios,
+ content: string
+): Promise => {
+ const irysUrl = localStorage.getItem("twitter_irys_url");
+
+ if (!irysUrl) {
+ throw new Error(
+ "X API credentials not found. Please set them in the settings."
+ );
+ }
+
+ try {
+ const irysId = irysUrl.split("/").pop() || "";
+ const [ciphertext, dataToEncryptHash, accessControlConditions] =
+ await downloadFromIrys(irysId);
+
+ if (!ciphertext || !dataToEncryptHash || !accessControlConditions) {
+ throw new Error("Missing required data from Irys");
+ }
+
+ const decrypted = await decryptData(
+ ciphertext,
+ dataToEncryptHash,
+ accessControlConditions
+ );
+
+ const credentials = JSON.parse(decrypted);
+
+ await backendClient.post("/tweet/post", {
+ post_content: content,
+ api_key: credentials.apiKey,
+ api_secret: credentials.apiSecret,
+ access_token: credentials.accessToken,
+ access_token_secret: credentials.accessTokenSecret,
+ });
+ } catch (error) {
+ console.error("Error posting tweet:", error);
+ throw error;
+ }
+};
+
+export const regenerateTweet = async (
+ backendClient: Axios
+): Promise => {
+ try {
+ const response = await backendClient.post("/tweet/regenerate");
+ return response.data;
+ } catch (error) {
+ console.error("Error regenerating tweet:", error);
+ throw error;
+ }
+};
diff --git a/submodules/moragents_dockers/frontend/components/Avatar/index.tsx b/submodules/frontend/components/Avatar/index.tsx
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/Avatar/index.tsx
rename to submodules/frontend/components/Avatar/index.tsx
diff --git a/submodules/frontend/components/CDPWallets/Button.tsx b/submodules/frontend/components/CDPWallets/Button.tsx
new file mode 100644
index 00000000..a86b0aee
--- /dev/null
+++ b/submodules/frontend/components/CDPWallets/Button.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { Flex, Text } from "@chakra-ui/react";
+import { Wallet } from "lucide-react";
+import { CDPWalletsModal } from "./Modal";
+import styles from "./CDPWallets.module.css";
+
+export const CDPWalletsButton: React.FC = () => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+ setIsOpen(true)}
+ className={styles.menuButton}
+ opacity={0.5}
+ pointerEvents="none"
+ >
+
+ Coinbase Developer Wallets
+
+
+
+ setIsOpen(false)} />
+
+ );
+};
diff --git a/submodules/frontend/components/CDPWallets/CDPWallets.module.css b/submodules/frontend/components/CDPWallets/CDPWallets.module.css
new file mode 100644
index 00000000..92a7f02a
--- /dev/null
+++ b/submodules/frontend/components/CDPWallets/CDPWallets.module.css
@@ -0,0 +1,234 @@
+.menuButton {
+ transition: background-color 0.2s ease;
+ border-radius: 6px;
+ padding: 8px 12px;
+}
+
+.menuButton:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+}
+
+.icon {
+ color: rgba(255, 255, 255, 0.8);
+}
+
+/* Wallet Item */
+.walletItem {
+ padding: 16px;
+ border-radius: 8px;
+ background-color: rgba(255, 255, 255, 0.02);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ transition: all 0.2s ease;
+}
+
+.walletItem:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: rgba(255, 255, 255, 0.2);
+}
+
+.walletName {
+ color: white;
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.networkId {
+ color: rgba(255, 255, 255, 0.6);
+ font-size: 12px;
+}
+
+.address {
+ color: rgba(255, 255, 255, 0.4);
+ font-size: 12px;
+ font-family: monospace;
+}
+
+/* Action Buttons */
+.actions {
+ opacity: 0;
+ transition: opacity 0.2s ease;
+ gap: 4px;
+}
+
+.walletItem:hover .actions {
+ opacity: 1;
+}
+
+.actionButton {
+ background: transparent !important;
+ color: rgba(255, 255, 255, 0.6) !important;
+ padding: 6px !important;
+ height: auto !important;
+ min-width: 0 !important;
+ border-radius: 6px !important;
+ transition: all 0.2s ease !important;
+}
+
+.copyButton:hover {
+ background-color: rgba(66, 153, 225, 0.1) !important;
+ color: #4299e1 !important;
+}
+
+.starButton:hover {
+ background-color: rgba(236, 201, 75, 0.1) !important;
+ color: #ecc94b !important;
+}
+
+.starButton.active {
+ color: #ecc94b !important;
+}
+
+.downloadButton:hover {
+ background-color: rgba(72, 187, 120, 0.1) !important;
+ color: #48bb78 !important;
+}
+
+.deleteButton:hover {
+ background-color: rgba(245, 101, 101, 0.1) !important;
+ color: #f56565 !important;
+}
+
+/* Empty State */
+.emptyState {
+ text-align: center;
+ color: rgba(255, 255, 255, 0.4);
+ font-size: 12px;
+ padding: 24px;
+}
+
+/* Form Controls */
+.label {
+ color: white !important;
+ font-size: 14px !important;
+ font-weight: 500 !important;
+ margin-bottom: 8px !important;
+}
+
+.input,
+.select {
+ background-color: rgba(255, 255, 255, 0.05) !important;
+ border: 1px solid rgba(255, 255, 255, 0.1) !important;
+ color: white !important;
+ font-size: 14px !important;
+ border-radius: 8px !important;
+ height: 40px !important;
+}
+
+.input:hover,
+.select:hover {
+ border-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+.input:focus,
+.select:focus {
+ border-color: rgba(255, 255, 255, 0.3) !important;
+ box-shadow: none !important;
+}
+
+.input::placeholder {
+ color: rgba(255, 255, 255, 0.4) !important;
+}
+
+.select option {
+ background-color: #080808;
+ color: white;
+}
+
+.fileUploadButton {
+ width: 100% !important;
+ height: auto !important;
+ background-color: rgba(255, 255, 255, 0.05) !important;
+ border: 1px dashed rgba(255, 255, 255, 0.2) !important;
+ color: rgba(255, 255, 255, 0.8) !important;
+ padding: 24px !important;
+ border-radius: 8px !important;
+ transition: all 0.2s ease !important;
+}
+
+.fileUploadButton:hover {
+ background-color: rgba(255, 255, 255, 0.08) !important;
+ border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+.submitButton {
+ width: 100% !important;
+ background-color: rgba(255, 255, 255, 0.1) !important;
+ color: white !important;
+ font-size: 14px !important;
+ height: 40px !important;
+ border-radius: 8px !important;
+ transition: all 0.2s ease !important;
+}
+
+.submitButton:hover {
+ background-color: rgba(255, 255, 255, 0.15) !important;
+}
+
+.submitButton:active {
+ background-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+/* Delete Dialog */
+.deleteDialog {
+ background: #080808 !important;
+ border: 1px solid rgba(255, 255, 255, 0.1) !important;
+ border-radius: 12px !important;
+ max-width: 400px !important;
+ margin: 16px !important;
+}
+
+.deleteDialogHeader {
+ color: white !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+ padding: 16px !important;
+ font-size: 16px !important;
+ font-weight: 500 !important;
+}
+
+.deleteDialogBody {
+ padding: 16px !important;
+}
+
+.deleteConfirmText {
+ color: rgba(255, 255, 255, 0.8) !important;
+ font-size: 14px !important;
+ margin-bottom: 16px !important;
+}
+
+.deleteConfirmInput {
+ background-color: rgba(255, 255, 255, 0.05) !important;
+ border: 1px solid rgba(255, 255, 255, 0.1) !important;
+ color: white !important;
+ border-radius: 8px !important;
+}
+
+.deleteDialogFooter {
+ border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+ padding: 16px !important;
+}
+
+.cancelButton {
+ background-color: rgba(255, 255, 255, 0.05) !important;
+ color: white !important;
+ border-radius: 8px !important;
+ font-size: 14px !important;
+}
+
+.cancelButton:hover {
+ background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.confirmDeleteButton {
+ background-color: rgba(245, 101, 101, 0.1) !important;
+ color: #f56565 !important;
+ margin-left: 8px !important;
+ border-radius: 8px !important;
+ font-size: 14px !important;
+}
+
+.confirmDeleteButton:hover {
+ background-color: rgba(245, 101, 101, 0.2) !important;
+}
diff --git a/submodules/moragents_dockers/frontend/components/CDPWallets/CreateWalletForm.tsx b/submodules/frontend/components/CDPWallets/CreateWalletForm.tsx
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/CDPWallets/CreateWalletForm.tsx
rename to submodules/frontend/components/CDPWallets/CreateWalletForm.tsx
diff --git a/submodules/moragents_dockers/frontend/components/CDPWallets/DeleteWalletDialog.tsx b/submodules/frontend/components/CDPWallets/DeleteWalletDialog.tsx
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/CDPWallets/DeleteWalletDialog.tsx
rename to submodules/frontend/components/CDPWallets/DeleteWalletDialog.tsx
diff --git a/submodules/frontend/components/CDPWallets/Modal.tsx b/submodules/frontend/components/CDPWallets/Modal.tsx
new file mode 100644
index 00000000..bb4dbf1a
--- /dev/null
+++ b/submodules/frontend/components/CDPWallets/Modal.tsx
@@ -0,0 +1,532 @@
+import React, { useState, useEffect, useCallback } from "react";
+import {
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
+ ModalCloseButton,
+ Button,
+ VStack,
+ HStack,
+ Text,
+ Box,
+ useToast,
+ Input,
+ Select,
+ FormControl,
+ FormLabel,
+ Tabs,
+ TabList,
+ TabPanels,
+ Tab,
+ TabPanel,
+ AlertDialog,
+ AlertDialogBody,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogContent,
+ AlertDialogOverlay,
+} from "@chakra-ui/react";
+import { Copy, Download, Star, Trash2 } from "lucide-react";
+import styles from "./CDPWallets.module.css";
+
+const NETWORKS = [
+ "base-mainnet",
+ "base-sepolia",
+ "base-goerli",
+ "ethereum-mainnet",
+ "ethereum-goerli",
+ "ethereum-sepolia",
+];
+
+interface CDPWalletsModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+interface Wallet {
+ wallet_id: string;
+ network_id: string;
+ address: string;
+}
+
+export const CDPWalletsModal: React.FC = ({
+ isOpen,
+ onClose,
+}) => {
+ const [wallets, setWallets] = useState([]);
+ const [activeWallet, setActiveWallet] = useState(null);
+ const [newWalletName, setNewWalletName] = useState("");
+ const [selectedNetwork, setSelectedNetwork] = useState(NETWORKS[0]);
+ const [walletFile, setWalletFile] = useState(null);
+ const [walletToDelete, setWalletToDelete] = useState("");
+ const [confirmWalletId, setConfirmWalletId] = useState("");
+ const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+ const toast = useToast();
+ const cancelRef = React.useRef(null);
+
+ const fetchWallets = useCallback(async () => {
+ try {
+ const [walletsResponse, activeWalletResponse] = await Promise.all([
+ fetch("/api/wallets/list"),
+ fetch("/api/wallets/active"),
+ ]);
+
+ const walletsData = await walletsResponse.json();
+ const activeData = await activeWalletResponse.json();
+
+ setWallets(walletsData.wallets || []);
+ setActiveWallet(activeData.active_wallet_id);
+ } catch (error) {
+ console.error("Failed to fetch wallets:", error);
+ }
+ }, []);
+
+ useEffect(() => {
+ if (isOpen) {
+ fetchWallets();
+ }
+ }, [isOpen, fetchWallets]);
+
+ const handleCopyAddress = (address: string) => {
+ navigator.clipboard.writeText(address);
+ toast({
+ title: "Address copied",
+ status: "success",
+ duration: 2000,
+ position: "top-right",
+ });
+ };
+
+ const handleSetActiveWallet = async (walletId: string) => {
+ try {
+ const response = await fetch("/api/wallets/active", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ wallet_id: walletId }),
+ });
+
+ if (response.ok) {
+ setActiveWallet(walletId);
+ toast({
+ title: "Active wallet set",
+ status: "success",
+ duration: 2000,
+ position: "top-right",
+ });
+ }
+ } catch (error) {
+ console.error("Error setting active wallet:", error);
+ }
+ };
+
+ const handleCreateWallet = async () => {
+ if (!newWalletName.trim()) {
+ toast({
+ title: "Please enter a wallet name",
+ status: "warning",
+ duration: 2000,
+ position: "top-right",
+ });
+ return;
+ }
+
+ try {
+ const response = await fetch("/api/wallets/create", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ wallet_id: newWalletName,
+ network_id: selectedNetwork,
+ set_active: true,
+ }),
+ });
+
+ if (response.ok) {
+ toast({
+ title: "Wallet created",
+ status: "success",
+ duration: 2000,
+ position: "top-right",
+ });
+ setNewWalletName("");
+ fetchWallets();
+ }
+ } catch (error) {
+ console.error("Error creating wallet:", error);
+ }
+ };
+
+ const handleRestoreWallet = async () => {
+ if (!walletFile) {
+ toast({
+ title: "Please select a wallet file",
+ status: "warning",
+ duration: 2000,
+ position: "top-right",
+ });
+ return;
+ }
+
+ try {
+ const fileContent = await walletFile.text();
+ const walletData = JSON.parse(fileContent);
+
+ const response = await fetch("/api/wallets/restore", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ wallet_id: walletData.wallet_id,
+ wallet_data: walletData,
+ set_active: true,
+ }),
+ });
+
+ if (response.ok) {
+ toast({
+ title: "Wallet restored",
+ status: "success",
+ duration: 2000,
+ position: "top-right",
+ });
+ setWalletFile(null);
+ fetchWallets();
+ }
+ } catch (error) {
+ console.error("Error restoring wallet:", error);
+ }
+ };
+
+ const handleDownloadWallet = async (walletId: string) => {
+ try {
+ const response = await fetch(`/api/wallets/export/${walletId}`);
+ if (response.ok) {
+ const data = await response.json();
+ const blob = new Blob([JSON.stringify(data.data, null, 2)], {
+ type: "application/json",
+ });
+ const url = window.URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `${walletId}.json`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ window.URL.revokeObjectURL(url);
+
+ toast({
+ title: "Wallet exported",
+ status: "success",
+ duration: 2000,
+ position: "top-right",
+ });
+ }
+ } catch (error) {
+ console.error("Error exporting wallet:", error);
+ }
+ };
+
+ const handleDeleteWallet = async () => {
+ if (confirmWalletId !== walletToDelete) {
+ toast({
+ title: "Wallet ID doesn't match",
+ status: "error",
+ duration: 2000,
+ position: "top-right",
+ });
+ return;
+ }
+
+ try {
+ const response = await fetch(`/api/wallets/${walletToDelete}`, {
+ method: "DELETE",
+ });
+
+ if (response.ok) {
+ toast({
+ title: "Wallet deleted",
+ status: "success",
+ duration: 2000,
+ position: "top-right",
+ });
+ setIsDeleteOpen(false);
+ setConfirmWalletId("");
+ setWalletToDelete("");
+ fetchWallets();
+ }
+ } catch (error) {
+ console.error("Error deleting wallet:", error);
+ }
+ };
+
+ return (
+ <>
+
+
+
+ CDP Wallet Management
+
+
+
+
+
+
+ Wallets
+
+
+ Create
+
+
+ Restore
+
+
+
+
+
+
+ {wallets.map((wallet) => (
+
+
+
+ {wallet.wallet_id}
+
+
+ {wallet.network_id}
+
+
+ {wallet.address}
+
+
+
+
+
+
+
+
+
+ ))}
+ {wallets.length === 0 && (
+
+ No wallets created yet
+
+ )}
+
+
+
+
+
+
+ Wallet Name
+
+ setNewWalletName(e.target.value)}
+ placeholder="Enter wallet name"
+ className={styles.input}
+ />
+
+
+ Network
+
+
+
+
+
+
+
+
+
+ Upload Wallet File
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setIsDeleteOpen(false);
+ setConfirmWalletId("");
+ setWalletToDelete("");
+ }}
+ >
+
+
+
+ Delete Wallet
+
+
+
+
+ To confirm deletion, please type the wallet ID:{" "}
+
+ {walletToDelete}
+
+
+ setConfirmWalletId(e.target.value)}
+ placeholder="Enter wallet ID to confirm"
+ className={styles.deleteConfirmInput}
+ />
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/submodules/moragents_dockers/frontend/components/CDPWallets/RestoreWalletForm.tsx b/submodules/frontend/components/CDPWallets/RestoreWalletForm.tsx
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/CDPWallets/RestoreWalletForm.tsx
rename to submodules/frontend/components/CDPWallets/RestoreWalletForm.tsx
diff --git a/submodules/moragents_dockers/frontend/components/CDPWallets/WalletItem.tsx b/submodules/frontend/components/CDPWallets/WalletItem.tsx
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/CDPWallets/WalletItem.tsx
rename to submodules/frontend/components/CDPWallets/WalletItem.tsx
diff --git a/submodules/moragents_dockers/frontend/components/CDPWallets/index.module.css b/submodules/frontend/components/CDPWallets/index.module.css
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/CDPWallets/index.module.css
rename to submodules/frontend/components/CDPWallets/index.module.css
diff --git a/submodules/moragents_dockers/frontend/components/CDPWallets/index.tsx b/submodules/frontend/components/CDPWallets/index.tsx
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/CDPWallets/index.tsx
rename to submodules/frontend/components/CDPWallets/index.tsx
diff --git a/submodules/moragents_dockers/frontend/components/CDPWallets/useWallets.tsx b/submodules/frontend/components/CDPWallets/useWallets.tsx
old mode 100644
new mode 100755
similarity index 94%
rename from submodules/moragents_dockers/frontend/components/CDPWallets/useWallets.tsx
rename to submodules/frontend/components/CDPWallets/useWallets.tsx
index a32a33c4..f2daf7dd
--- a/submodules/moragents_dockers/frontend/components/CDPWallets/useWallets.tsx
+++ b/submodules/frontend/components/CDPWallets/useWallets.tsx
@@ -30,8 +30,8 @@ export const useWallets = (): UseWalletsReturn => {
const fetchWallets = useCallback(async () => {
try {
const [walletsResponse, activeWalletResponse] = await Promise.all([
- fetch("http://localhost:8080/wallets/list"),
- fetch("http://localhost:8080/wallets/active"),
+ fetch("http://localhost:8888/wallets/list"),
+ fetch("http://localhost:8888/wallets/active"),
]);
const walletsData = await walletsResponse.json();
@@ -60,7 +60,7 @@ export const useWallets = (): UseWalletsReturn => {
const handleSetActiveWallet = async (walletId: string) => {
try {
- const response = await fetch("http://localhost:8080/wallets/active", {
+ const response = await fetch("http://localhost:8888/wallets/active", {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -105,7 +105,7 @@ export const useWallets = (): UseWalletsReturn => {
}
try {
- const response = await fetch("http://localhost:8080/wallets/create", {
+ const response = await fetch("http://localhost:8888/wallets/create", {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -144,7 +144,7 @@ export const useWallets = (): UseWalletsReturn => {
const fileContent = await walletFile.text();
const walletData = JSON.parse(fileContent);
- const response = await fetch("http://localhost:8080/wallets/restore", {
+ const response = await fetch("http://localhost:8888/wallets/restore", {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -181,7 +181,7 @@ export const useWallets = (): UseWalletsReturn => {
const handleDownloadWallet = async (walletId: string) => {
try {
const response = await fetch(
- `http://localhost:8080/wallets/export/${walletId}`
+ `http://localhost:8888/wallets/export/${walletId}`
);
if (response.ok) {
@@ -237,7 +237,7 @@ export const useWallets = (): UseWalletsReturn => {
try {
const response = await fetch(
- `http://localhost:8080/wallets/${walletId}`,
+ `http://localhost:8888/wallets/${walletId}`,
{
method: "DELETE",
}
diff --git a/submodules/frontend/components/Chat/hooks.ts b/submodules/frontend/components/Chat/hooks.ts
new file mode 100755
index 00000000..ea448b28
--- /dev/null
+++ b/submodules/frontend/components/Chat/hooks.ts
@@ -0,0 +1,129 @@
+import { useCallback, useState } from "react";
+import { useAccount, useChainId, useSendTransaction } from "wagmi";
+// import { sendClaimStatus, sendSwapStatus } from "@/services/apiHooks";
+// import { getHttpClient } from "@/services/constants";
+// import { SwapTxPayloadType, ClaimTransactionPayload } from "@/services/types";
+// import { SWAP_STATUS, CLAIM_STATUS } from "@/services/constants";
+
+export const useChat = (onBackendError: () => void) => {
+ const [txHash, setTxHash] = useState("");
+ const [approveTxHash, setApproveTxHash] = useState("");
+ const [showSpinner, setShowSpinner] = useState(false);
+
+ const { address } = useAccount();
+ const chainId = useChainId();
+ const { sendTransaction } = useSendTransaction();
+
+ // const handleSwapStatus = useCallback(
+ // async (status: string, hash: string, isApprove: number) => {
+ // try {
+ // const response = await sendSwapStatus(
+ // getHttpClient(),
+ // chainId,
+ // address?.toLowerCase() || "0x",
+ // status,
+ // hash,
+ // isApprove
+ // );
+ // if (isApprove) {
+ // setApproveTxHash("");
+ // } else {
+ // setTxHash("");
+ // }
+ // setShowSpinner(false);
+ // return response;
+ // } catch (error) {
+ // console.log(`Error sending status: ${error}`);
+ // onBackendError();
+ // setShowSpinner(false);
+ // throw error;
+ // }
+ // },
+ // [chainId, address, onBackendError]
+ // );
+
+ // const handleClaimStatus = useCallback(
+ // async (status: string, hash: string) => {
+ // try {
+ // const response = await sendClaimStatus(
+ // getHttpClient(),
+ // chainId,
+ // address?.toLowerCase() || "0x",
+ // status,
+ // hash
+ // );
+ // setTxHash("");
+ // setShowSpinner(false);
+ // return response;
+ // } catch (error) {
+ // console.log(`Error sending claim status: ${error}`);
+ // onBackendError();
+ // setShowSpinner(false);
+ // throw error;
+ // }
+ // },
+ // [chainId, address, onBackendError]
+ // );
+
+ // const handleSwapSubmit = useCallback(
+ // (swapTx: SwapTxPayloadType) => {
+ // setTxHash("");
+ // sendTransaction(
+ // {
+ // account: address,
+ // data: (swapTx?.tx.data || "0x") as `0x${string}`,
+ // to: (swapTx?.tx.to || "0x") as `0x${string}`,
+ // value: BigInt(swapTx?.tx.value || "0"),
+ // },
+ // {
+ // onSuccess: (hash) => {
+ // setTxHash(hash);
+ // handleSwapStatus(SWAP_STATUS.INIT, hash, 0);
+ // },
+ // onError: (error) => {
+ // console.log(`Error sending transaction: ${error}`);
+ // handleSwapStatus(SWAP_STATUS.FAIL, "", 0);
+ // },
+ // }
+ // );
+ // },
+ // [address, handleSwapStatus, sendTransaction]
+ // );
+
+ // const handleClaimSubmit = useCallback(
+ // (claimTx: ClaimTransactionPayload) => {
+ // setTxHash("");
+ // sendTransaction(
+ // {
+ // account: address,
+ // data: claimTx.data as `0x${string}`,
+ // to: claimTx.to as `0x${string}`,
+ // value: BigInt(claimTx.value),
+ // chainId: parseInt(claimTx.chainId),
+ // },
+ // {
+ // onSuccess: (hash) => {
+ // setTxHash(hash);
+ // handleClaimStatus(CLAIM_STATUS.INIT, hash);
+ // },
+ // onError: (error) => {
+ // console.log(`Error sending transaction: ${error}`);
+ // handleClaimStatus(CLAIM_STATUS.FAIL, "");
+ // },
+ // }
+ // );
+ // },
+ // [address, handleClaimStatus, sendTransaction]
+ // );
+
+ return {
+ txHash,
+ approveTxHash,
+ showSpinner,
+ setShowSpinner,
+ // handleSwapStatus,
+ // handleClaimStatus,
+ // handleSwapSubmit,
+ // handleClaimSubmit,
+ };
+};
diff --git a/submodules/frontend/components/Chat/index.module.css b/submodules/frontend/components/Chat/index.module.css
new file mode 100644
index 00000000..acd83253
--- /dev/null
+++ b/submodules/frontend/components/Chat/index.module.css
@@ -0,0 +1,12 @@
+/* Update Chat component styles */
+.chatContainer {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+ .chatContainer {
+ padding-bottom: env(safe-area-inset-bottom);
+ }
+}
diff --git a/submodules/frontend/components/Chat/index.tsx b/submodules/frontend/components/Chat/index.tsx
new file mode 100755
index 00000000..ab0ed90f
--- /dev/null
+++ b/submodules/frontend/components/Chat/index.tsx
@@ -0,0 +1,56 @@
+import React, { FC, useState } from "react";
+import { Box, useBreakpointValue } from "@chakra-ui/react";
+import { MessageList } from "@/components/MessageList";
+import { ChatInput } from "@/components/ChatInput";
+import { useChatContext } from "@/contexts/chat/useChatContext";
+import styles from "./index.module.css";
+
+export const Chat: FC<{ isSidebarOpen?: boolean }> = ({
+ isSidebarOpen = false,
+}) => {
+ const { state, sendMessage } = useChatContext();
+ const { messages, currentConversationId, isLoading } = state;
+ const [localLoading, setLocalLoading] = useState(false);
+
+ const currentMessages = messages[currentConversationId] || [];
+ const isMobile = useBreakpointValue({ base: true, md: false });
+ const showLoading = isLoading || localLoading;
+
+ const handleSubmit = async (message: string, file: File | null) => {
+ try {
+ setLocalLoading(true);
+ await sendMessage(message, file);
+ setTimeout(() => setLocalLoading(false), 200);
+ } catch (error) {
+ console.error("Error sending message:", error);
+ setLocalLoading(false);
+ }
+ };
+
+ return (
+
+
+ {/* Give ChatInput a higher z-index than sidebar to ensure it's always accessible */}
+
+
+ );
+};
diff --git a/submodules/moragents_dockers/frontend/components/Chat/types.ts b/submodules/frontend/components/Chat/types.ts
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/Chat/types.ts
rename to submodules/frontend/components/Chat/types.ts
diff --git a/submodules/frontend/components/ChatInput/Commands.module.css b/submodules/frontend/components/ChatInput/Commands.module.css
new file mode 100644
index 00000000..22215c93
--- /dev/null
+++ b/submodules/frontend/components/ChatInput/Commands.module.css
@@ -0,0 +1,85 @@
+.commandsContainer {
+ background-color: #080808;
+ border-radius: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ max-height: 200px;
+ overflow-y: auto;
+ z-index: 99999;
+ padding: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+ position: fixed;
+ bottom: 55px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ max-width: 800px;
+ pointer-events: auto;
+}
+
+@media (max-width: 768px) {
+ .commandsContainer {
+ max-height: 200px;
+ width: calc(100% - 1rem);
+ margin: 0 0.5rem;
+ }
+}
+
+.commandsContainer::-webkit-scrollbar {
+ width: 6px;
+}
+
+.commandsContainer::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 4px;
+}
+
+.commandsContainer::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 4px;
+}
+
+.commandsContainer::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.15);
+}
+
+.commandItem {
+ padding: 8px 12px;
+ background-color: transparent;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+ border-radius: 8px;
+ margin-bottom: 2px;
+}
+
+.commandItem:last-child {
+ margin-bottom: 0;
+}
+
+.commandItem:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+}
+
+.commandItem.selected {
+ background-color: rgba(255, 255, 255, 0.08);
+}
+
+.commandText {
+ color: #59f886;
+ font-size: 14px;
+ margin-bottom: 2px;
+ transition: color 0.2s ease;
+}
+
+.commandItem:hover .commandText {
+ color: #6aff97;
+}
+
+.description {
+ color: rgba(255, 255, 255, 0.6);
+ font-size: 12px;
+ transition: color 0.2s ease;
+}
+
+.commandItem:hover .description {
+ color: rgba(255, 255, 255, 0.8);
+}
diff --git a/submodules/frontend/components/ChatInput/Commands.tsx b/submodules/frontend/components/ChatInput/Commands.tsx
new file mode 100644
index 00000000..9acfab32
--- /dev/null
+++ b/submodules/frontend/components/ChatInput/Commands.tsx
@@ -0,0 +1,66 @@
+import React, { FC, useRef, useEffect } from "react";
+import { Box, VStack, Text, useMediaQuery } from "@chakra-ui/react";
+import styles from "./Commands.module.css";
+
+export type Command = {
+ command: string;
+ description: string;
+ name: string;
+};
+
+type CommandsProps = {
+ commands: Command[];
+ selectedIndex: number;
+ onSelect: (command: Command) => void;
+ isSidebarOpen: boolean;
+};
+
+export const Commands: FC = ({
+ commands,
+ selectedIndex,
+ onSelect,
+ isSidebarOpen,
+}) => {
+ const [isMobile] = useMediaQuery("(max-width: 768px)");
+ const commandsRef = useRef(null);
+
+ useEffect(() => {
+ if (commandsRef.current) {
+ const selectedElement = commandsRef.current.querySelector(
+ `[data-index="${selectedIndex}"]`
+ );
+ if (selectedElement) {
+ selectedElement.scrollIntoView({
+ block: "nearest",
+ behavior: "smooth",
+ });
+ }
+ }
+ }, [selectedIndex]);
+
+ return (
+
+
+ {commands.map((cmd, index) => (
+ onSelect(cmd)}
+ role="button"
+ tabIndex={0}
+ >
+
+ /{cmd.command}
+
+
+ {cmd.name} - {cmd.description}
+
+
+ ))}
+
+
+ );
+};
diff --git a/submodules/frontend/components/ChatInput/CommandsPortal.tsx b/submodules/frontend/components/ChatInput/CommandsPortal.tsx
new file mode 100644
index 00000000..f5e8a7c9
--- /dev/null
+++ b/submodules/frontend/components/ChatInput/CommandsPortal.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { Commands, Command } from "./Commands";
+
+type CommandsPortalProps = {
+ commands: Command[];
+ selectedIndex: number;
+ onSelect: (command: Command) => void;
+ isSidebarOpen: boolean;
+};
+
+export const CommandsPortal: React.FC = (props) => {
+ React.useEffect(() => {
+ const portalId = "commands-portal";
+ if (!document.getElementById(portalId)) {
+ const div = document.createElement("div");
+ div.id = portalId;
+ document.body.appendChild(div);
+ }
+ }, []);
+
+ return createPortal(
+ = ({
+ onSelect,
+ isSidebarOpen = true,
+ onExpandChange,
+}) => {
+ const [selectedGroup, setSelectedGroup] = useState(null);
+ const [isMobile, setIsMobile] = useState(false);
+ const [isExamplesPanelVisible, setIsExamplesPanelVisible] = useState(false);
+
+ useEffect(() => {
+ const checkMobile = () => setIsMobile(window.innerWidth < 768);
+ checkMobile();
+ window.addEventListener("resize", checkMobile);
+ return () => window.removeEventListener("resize", checkMobile);
+ }, []);
+
+ // Notify parent component about expansion state
+ useEffect(() => {
+ if (onExpandChange) {
+ onExpandChange(isExamplesPanelVisible, selectedGroup);
+ }
+ }, [selectedGroup, isExamplesPanelVisible, onExpandChange]);
+
+ // This effect ensures panel visibility follows selected group state
+ useEffect(() => {
+ if (selectedGroup) {
+ setIsExamplesPanelVisible(true);
+ } else {
+ setIsExamplesPanelVisible(false);
+ }
+ }, [selectedGroup]);
+
+ const handleGroupClick = (group: string) => {
+ if (selectedGroup === group) {
+ setSelectedGroup(null);
+ } else {
+ setSelectedGroup(group);
+ }
+ };
+
+ // Calculate container style with adjusted padding to avoid sidebar overlap
+ const containerStyle = isMobile
+ ? { width: "100%" }
+ : {
+ paddingLeft: isSidebarOpen ? "380px" : "100px", // Adjusted to be wider than the sidebar (360px)
+ paddingRight: "20%",
+ position: "relative" as const,
+ zIndex: 100, // Ensure it's above content but below sidebar
+ };
+
+ const renderExamples = () => {
+ if (!selectedGroup) return null;
+
+ return (
+ ;
+ disabled: boolean;
+ isSidebarOpen: boolean;
+};
+
+export const ChatInput: FC = ({
+ onSubmit,
+ disabled,
+ isSidebarOpen,
+}) => {
+ const [message, setMessage] = useState("");
+ const [file, setFile] = useState(null);
+ const [commands, setCommands] = useState([]);
+ const [showCommands, setShowCommands] = useState(false);
+ const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
+ const [isMobile] = useMediaQuery("(max-width: 768px)");
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ const inputGroupRef = useRef(null);
+ const inputRef = useRef(null);
+
+ // Add this useEffect to prevent focus zoom on mobile
+ useEffect(() => {
+ // Add meta viewport tag to prevent zoom
+ const viewportMeta = document.createElement("meta");
+ viewportMeta.name = "viewport";
+ viewportMeta.content =
+ "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no";
+
+ // Check if there's already a viewport meta tag
+ const existingMeta = document.querySelector('meta[name="viewport"]');
+
+ if (existingMeta) {
+ // Update existing meta tag
+ existingMeta.setAttribute(
+ "content",
+ "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+ );
+ } else {
+ // Add new meta tag
+ document.head.appendChild(viewportMeta);
+ }
+
+ // Optional cleanup
+ return () => {
+ if (!existingMeta && viewportMeta.parentNode) {
+ document.head.removeChild(viewportMeta);
+ }
+ };
+ }, []);
+
+ // Fetch commands
+ useEffect(() => {
+ fetch(`${API_BASE_URL}/agents/commands`)
+ .then((res) => res.json())
+ .then((data) => setCommands(data.commands))
+ .catch((error) => console.error("Error fetching commands:", error));
+ }, []);
+
+ // Filter commands based on input
+ const filteredCommands = message.startsWith("/")
+ ? commands.filter((cmd) =>
+ cmd.command.toLowerCase().includes(message.slice(1).toLowerCase())
+ )
+ : [];
+
+ // Show/hide commands dropdown based on input
+ useEffect(() => {
+ setShowCommands(message.startsWith("/") && filteredCommands.length > 0);
+ setSelectedCommandIndex(0);
+ }, [message, filteredCommands.length]);
+
+ const handleCommandSelect = (command: Command) => {
+ setMessage(`/${command.command} `);
+ setShowCommands(false);
+ inputRef.current?.focus();
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (showCommands) {
+ switch (e.key) {
+ case "ArrowDown":
+ e.preventDefault();
+ setSelectedCommandIndex((prev) =>
+ Math.min(prev + 1, filteredCommands.length - 1)
+ );
+ break;
+ case "ArrowUp":
+ e.preventDefault();
+ setSelectedCommandIndex((prev) => Math.max(prev - 1, 0));
+ break;
+ case "Tab":
+ case "Enter":
+ e.preventDefault();
+ handleCommandSelect(filteredCommands[selectedCommandIndex]);
+ break;
+ case "Escape":
+ setShowCommands(false);
+ break;
+ }
+ } else if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleSubmit();
+ }
+ };
+
+ const agentSupportsFileUploads = !isMobile;
+
+ const handleSubmit = async () => {
+ if ((!message && !file) || isSubmitting || disabled) return;
+
+ try {
+ setIsSubmitting(true);
+ const messageToSend = message;
+ const fileToSend = file;
+
+ // Clear input immediately to improve UX
+ setMessage("");
+ setFile(null);
+
+ // Then submit the message
+ await onSubmit(messageToSend, fileToSend);
+ } catch (error) {
+ console.error("Error submitting message:", error);
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ return (
+ <>
+ {showCommands && (
+
+
+
+
+
+ {tokens.length > INITIAL_DISPLAY_COUNT && (
+
+ )}
+
+ );
+};
+
+export default BoostedTokensMessage;
diff --git a/submodules/frontend/components/Agents/Dexscreener/BoostedTokens/BoostedTokensMessage.types.ts b/submodules/frontend/components/Agents/Dexscreener/BoostedTokens/BoostedTokensMessage.types.ts
new file mode 100644
index 00000000..6ad021c6
--- /dev/null
+++ b/submodules/frontend/components/Agents/Dexscreener/BoostedTokens/BoostedTokensMessage.types.ts
@@ -0,0 +1,35 @@
+// BoostedTokensMessage.types.ts
+
+interface TokenLink {
+ type: string;
+ label: string;
+ url: string;
+}
+
+interface BoostedToken {
+ url: string;
+ chainId: string;
+ tokenAddress: string;
+ icon?: string | null;
+ header?: string | null;
+ description?: string | null;
+ links?: TokenLink[] | null;
+ amount: number;
+ totalAmount: number;
+}
+
+interface BoostedTokensMetadata {
+ chain_id?: string | null;
+ tokens: BoostedToken[];
+}
+
+interface BoostedTokensMessageProps {
+ metadata: BoostedTokensMetadata;
+}
+
+export type {
+ BoostedTokensMessageProps,
+ BoostedTokensMetadata,
+ BoostedToken,
+ TokenLink,
+};
diff --git a/submodules/frontend/components/Agents/Dexscreener/DexPairs/DexPairsMessage.module.css b/submodules/frontend/components/Agents/Dexscreener/DexPairs/DexPairsMessage.module.css
new file mode 100644
index 00000000..f5508a3a
--- /dev/null
+++ b/submodules/frontend/components/Agents/Dexscreener/DexPairs/DexPairsMessage.module.css
@@ -0,0 +1,300 @@
+/* DexPairsMessage.module.css */
+
+.container {
+ width: 100%;
+ max-width: 900px;
+ margin: 0 auto;
+ color: #e4e4e4;
+ font-size: 14px;
+}
+
+.header {
+ margin-bottom: 16px;
+}
+
+.title {
+ font-weight: 600;
+ font-size: 16px;
+ margin-bottom: 4px !important;
+}
+
+.subtitle {
+ color: #aaa;
+ font-size: 12px;
+}
+
+.pairList {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 16px;
+}
+
+.pairCard {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 16px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.pairCard:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+.pairHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 12px;
+}
+
+.pairInfo {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.pairTokens {
+ font-size: 16px;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.baseToken {
+ color: #e4e4e4;
+}
+
+.separator {
+ color: #888;
+}
+
+.quoteToken {
+ color: #aaa;
+}
+
+.pairDetails {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 12px;
+}
+
+.dex {
+ color: #888;
+}
+
+.chainBadge {
+ background-color: rgba(255, 255, 255, 0.1);
+ padding: 2px 8px;
+ border-radius: 12px;
+ font-size: 12px;
+ color: #aaa;
+}
+
+.pairLink {
+ color: #888;
+ margin-top: 4px;
+ transition: color 0.2s;
+}
+
+.pairLink:hover {
+ color: #e4e4e4;
+}
+
+.priceSection {
+ margin-bottom: 16px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.priceContainer {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.priceIcon {
+ color: #aaa;
+}
+
+.price {
+ font-size: 20px;
+ font-weight: 500;
+}
+
+.priceChange {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ font-size: 13px;
+ margin-left: 8px;
+}
+
+.positive {
+ color: #4caf50;
+}
+
+.negative {
+ color: #f44336;
+}
+
+.statsGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+ margin-bottom: 16px;
+}
+
+.statItem {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.statIcon {
+ color: #aaa;
+}
+
+.statLabel {
+ color: #888;
+ font-size: 13px;
+}
+
+.statValue {
+ color: #e4e4e4;
+ font-weight: 500;
+ margin-left: auto;
+}
+
+.txStats {
+ grid-column: span 2;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: rgba(255, 255, 255, 0.03);
+ padding: 8px 12px;
+ border-radius: 8px;
+ margin-top: 4px;
+}
+
+.txCount {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.txLabel {
+ color: #888;
+ font-size: 12px;
+}
+
+.txValue {
+ font-weight: 500;
+}
+
+.buysSells {
+ display: flex;
+ gap: 12px;
+}
+
+.txBuys,
+.txSells {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 13px;
+}
+
+.buyIcon {
+ color: #4caf50;
+ font-size: 10px;
+}
+
+.sellIcon {
+ color: #f44336;
+ font-size: 10px;
+}
+
+.linksSection {
+ margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.linksList {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.linkItem {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 4px;
+ padding: 4px 8px;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ color: #aaa;
+ font-size: 12px;
+ transition: background-color 0.2s, color 0.2s;
+}
+
+.linkItem:hover {
+ background: rgba(255, 255, 255, 0.1);
+ color: #e4e4e4;
+}
+
+.linkLabel {
+ display: none;
+}
+
+.noPairs {
+ text-align: center;
+ padding: 24px;
+ color: #888;
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 12px;
+}
+
+.showMoreButton {
+ width: 100%;
+ padding: 8px 16px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ color: #aaa;
+ font-size: 12px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ transition: all 0.2s;
+}
+
+.showMoreButton:hover {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 768px) {
+ .statsGrid {
+ grid-template-columns: 1fr;
+ gap: 8px;
+ }
+
+ .txStats {
+ grid-column: span 1;
+ }
+
+ .linkItem {
+ padding: 4px 6px;
+ }
+
+ .linkLabel {
+ display: none;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Dexscreener/DexPairs/DexPairsMessage.tsx b/submodules/frontend/components/Agents/Dexscreener/DexPairs/DexPairsMessage.tsx
new file mode 100644
index 00000000..dff20baf
--- /dev/null
+++ b/submodules/frontend/components/Agents/Dexscreener/DexPairs/DexPairsMessage.tsx
@@ -0,0 +1,249 @@
+import React, { useState } from "react";
+import {
+ ExternalLink,
+ DollarSign,
+ BarChart2,
+ ArrowUpRight,
+ ArrowDownRight,
+ Droplet,
+} from "lucide-react";
+import {
+ FaTwitter,
+ FaTelegram,
+ FaGlobe,
+ FaLink,
+ FaChevronDown,
+ FaChevronUp,
+ FaCircle,
+} from "react-icons/fa";
+import { SiCoinmarketcap, SiMedium, SiDiscord, SiGithub } from "react-icons/si";
+import styles from "./DexPairsMessage.module.css";
+import { DexPairsMessageProps } from "./DexPairsMessage.types";
+import { Text } from "@chakra-ui/react";
+
+const INITIAL_DISPLAY_COUNT = 4;
+
+export const DexPairsMessage: React.FC
+
+ Tokens with active promotional boosts on DexScreener
+
+
+
+
+ Boosted Tokens
+ {chainName}
+
+ | + | + | Address | +Description | +Boost Amount | +Links | +
|---|---|---|---|---|---|
| #{index + 1} | +
+ {token.icon && (
+
+ |
+
+
+
+ {truncateAddress(token.tokenAddress)}
+
+
+
+ {token.chainId}
+ |
+
+
+ {token.description || "-"}
+
+ |
+
+
+
+
+ Total: {formatBoostAmount(token.totalAmount)}
+
+ |
+
+
+
+
+ |
+
| + No boosted tokens found + {metadata?.chain_id ? ` for ${metadata.chain_id}` : ""} + | +
+
+ );
+};
+
+export default DexPairsMessage;
diff --git a/submodules/frontend/components/Agents/Dexscreener/DexPairs/DexPairsMessage.types.ts b/submodules/frontend/components/Agents/Dexscreener/DexPairs/DexPairsMessage.types.ts
new file mode 100644
index 00000000..224aa30e
--- /dev/null
+++ b/submodules/frontend/components/Agents/Dexscreener/DexPairs/DexPairsMessage.types.ts
@@ -0,0 +1,89 @@
+// DexPairsMessage.types.ts
+
+interface TokenLink {
+ type: string;
+ label: string;
+ url: string;
+}
+
+interface TokenProfile {
+ url: string;
+ chainId: string;
+ tokenAddress: string;
+ icon?: string | null;
+ header?: string | null;
+ description?: string | null;
+ links?: TokenLink[] | null;
+ symbol?: string;
+}
+
+interface Transaction {
+ buys: number;
+ sells: number;
+}
+
+interface VolumeData {
+ h24?: number;
+ h6?: number;
+ h1?: number;
+ m5?: number;
+}
+
+interface PriceChangeData {
+ h24?: string | number;
+ h6?: string | number;
+ h1?: string | number;
+ m5?: string | number;
+}
+
+interface LiquidityData {
+ usd?: number | string;
+ base?: number | string;
+ quote?: number | string;
+}
+
+interface DexPair {
+ chainId: string;
+ dexId: string;
+ url: string;
+ pairAddress: string;
+ baseToken: TokenProfile;
+ quoteToken: TokenProfile;
+ priceNative: number;
+ priceUsd?: number | null;
+ txns?: {
+ h24?: Transaction;
+ h6?: Transaction;
+ h1?: Transaction;
+ m5?: Transaction;
+ };
+ volume?: VolumeData;
+ priceChange?: PriceChangeData;
+ liquidity?: LiquidityData;
+ fdv?: number | null;
+ pairCreatedAt?: number | null;
+ info?: {
+ websites?: any[];
+ socials?: any[];
+ };
+}
+
+interface DexPairsMetadata {
+ pairs: DexPair[];
+}
+
+interface DexPairsMessageProps {
+ metadata: DexPairsMetadata;
+}
+
+export type {
+ DexPairsMessageProps,
+ DexPairsMetadata,
+ DexPair,
+ TokenProfile,
+ TokenLink,
+ Transaction,
+ VolumeData,
+ PriceChangeData,
+ LiquidityData,
+};
diff --git a/submodules/frontend/components/Agents/Dexscreener/TopTokens/TopTokensMessage.module.css b/submodules/frontend/components/Agents/Dexscreener/TopTokens/TopTokensMessage.module.css
new file mode 100644
index 00000000..000a6390
--- /dev/null
+++ b/submodules/frontend/components/Agents/Dexscreener/TopTokens/TopTokensMessage.module.css
@@ -0,0 +1,188 @@
+.container {
+ width: 100%;
+ overflow-x: auto;
+}
+
+.table {
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+ margin-top: 12px;
+}
+
+.headerRow th {
+ text-align: left;
+ padding: 12px 16px;
+ color: #666;
+ font-weight: 500;
+ font-size: 12px;
+ border-bottom: 1px solid #1a1a1a;
+}
+
+.rankCell {
+ width: 32px;
+ padding-right: 0 !important;
+ color: #666;
+}
+
+.tokenCell {
+ width: 48px;
+ padding: 12px 8px !important;
+}
+
+.tokenImg {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+.addressCell {
+ width: 140px;
+ padding: 12px 16px;
+}
+
+.addressWrapper {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.address {
+ font-family: monospace;
+ font-size: 12px;
+ color: #888;
+}
+
+.copyButton {
+ color: #666;
+ background: none;
+ border: none;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+}
+
+.copyButton:hover {
+ color: #888;
+}
+
+.description {
+ padding: 12px 16px;
+ color: #888;
+ font-size: 12px;
+ line-height: 1.4;
+ max-height: 5em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: normal;
+ display: block;
+}
+
+.linksCell {
+ width: 120px;
+ padding: 12px 16px;
+}
+
+.links {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.link {
+ color: #4d9eff;
+ display: flex;
+ align-items: center;
+}
+
+.link:hover {
+ color: #66adff;
+}
+
+.row {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.row:last-child {
+ border-bottom: none;
+}
+
+/* Add these new mobile styles */
+@media (max-width: 768px) {
+ .container {
+ overflow-x: hidden;
+ }
+
+ .table {
+ display: block;
+ }
+
+ .headerRow {
+ display: none;
+ }
+
+ .row {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 4px;
+ }
+
+ .rankCell {
+ grid-column: 1;
+ grid-row: 1;
+ width: auto;
+ padding: 4px 12px !important;
+ }
+
+ .tokenCell {
+ grid-column: 1;
+ grid-row: 2/5;
+ width: auto;
+ padding: 0 8px !important;
+ }
+
+ .addressCell {
+ grid-column: 2;
+ grid-row: 1;
+ width: auto;
+ padding: 4px 8px;
+ }
+
+ .description {
+ grid-column: 2;
+ grid-row: 2;
+ padding: 4px 8px;
+ max-height: none;
+ }
+
+ .linksCell {
+ grid-column: 2;
+ grid-row: 3;
+ width: auto;
+ padding: 4px 8px;
+ }
+}
+
+/* Add show more button styles */
+.showMoreButton {
+ width: 100%;
+ margin-top: 16px;
+ padding: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border: none;
+ border-radius: 8px;
+ color: #888;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ font-size: 12px;
+}
+
+.showMoreButton:hover {
+ background: rgba(255, 255, 255, 0.15);
+ color: #aaa;
+}
diff --git a/submodules/frontend/components/Agents/Dexscreener/TopTokens/TopTokensMessage.tsx b/submodules/frontend/components/Agents/Dexscreener/TopTokens/TopTokensMessage.tsx
new file mode 100644
index 00000000..5dfc3ca8
--- /dev/null
+++ b/submodules/frontend/components/Agents/Dexscreener/TopTokens/TopTokensMessage.tsx
@@ -0,0 +1,137 @@
+// TopTokensMessage.tsx
+import React, { useState } from "react";
+import { Copy } from "lucide-react";
+import {
+ FaTwitter,
+ FaTelegram,
+ FaGlobe,
+ FaLink,
+ FaChevronDown,
+ FaChevronUp,
+} from "react-icons/fa";
+import { SiCoinmarketcap } from "react-icons/si";
+import styles from "./TopTokensMessage.module.css";
+import { TopTokensMessageProps } from "./TopTokensMessage.types";
+import { Text } from "@chakra-ui/react";
+import { Image } from "@chakra-ui/react";
+
+const INITIAL_DISPLAY_COUNT = 5;
+
+export const TopTokensMessage: React.FC
+ DexScreener Trading Pairs
+
+ Found {pairs.length} popular DEX trading pairs
+
+
+
+
+ {displayPairs.map((pair, index) => (
+
+
+ {pairs.length > INITIAL_DISPLAY_COUNT && (
+
+ )}
+
+
+ ))}
+
+ {pairs.length === 0 && (
+
+
+
+
+
+
+
+
+ {pair.baseToken?.symbol || "Unknown"}
+
+ /
+
+ {pair.quoteToken?.symbol || "Unknown"}
+
+
+
+
+ {pair.dexId.charAt(0).toUpperCase() + pair.dexId.slice(1)}
+
+
+ {pair.chainId.toUpperCase()}
+
+
+
+
+
+
+
+
+
+
+ {pair.baseToken?.links && pair.baseToken.links.length > 0 && (
+
+
+
+
+ {pair.txns?.h24 && (
+
+
+ )}
+
+ 24h Txns:
+
+ {(pair.txns.h24.buys || 0) + (pair.txns.h24.sells || 0)}
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ DexScreener
+
+ {pair.baseToken.links.map((link, idx) => (
+
+ {getSocialIcon(link.type || link.label)}
+
+ {link.type || link.label}
+
+
+ ))}
+
+
+ No DEX pairs found matching your search.
+
+ )}
+
+ Here are the top tokens from Dexscreener!
+
+
+
+
+ {tokens.length > INITIAL_DISPLAY_COUNT && (
+
+ )}
+
+ );
+};
diff --git a/submodules/frontend/components/Agents/Dexscreener/TopTokens/TopTokensMessage.types.ts b/submodules/frontend/components/Agents/Dexscreener/TopTokens/TopTokensMessage.types.ts
new file mode 100644
index 00000000..a2b374d2
--- /dev/null
+++ b/submodules/frontend/components/Agents/Dexscreener/TopTokens/TopTokensMessage.types.ts
@@ -0,0 +1,24 @@
+interface Link {
+ label?: string;
+ type?: string;
+ url: string;
+}
+
+interface Token {
+ url?: string;
+ tokenAddress: string;
+ icon?: string;
+ description?: string;
+ links?: Link[];
+}
+
+interface MetadataProps {
+ chain_id?: string;
+ tokens?: Token[];
+}
+
+interface TopTokensMessageProps {
+ metadata: any;
+}
+
+export type { Link, Token, MetadataProps, TopTokensMessageProps };
diff --git a/submodules/frontend/components/Agents/Elfa/AccountSmartStats/AccountSmartStatsMessage.module.css b/submodules/frontend/components/Agents/Elfa/AccountSmartStats/AccountSmartStatsMessage.module.css
new file mode 100644
index 00000000..9bebec94
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/AccountSmartStats/AccountSmartStatsMessage.module.css
@@ -0,0 +1,114 @@
+/* ElfaAccountSmartStatsMessage.module.css */
+
+.container {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+ color: #e4e4e4;
+}
+
+.header {
+ margin-bottom: 16px;
+}
+
+.title {
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.statsGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+ margin-bottom: 24px;
+}
+
+.statCard {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 16px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ display: flex;
+ flex-direction: column;
+}
+
+.statHeader {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: #aaa;
+ font-size: 14px;
+ margin-bottom: 12px;
+}
+
+.statValue {
+ font-size: 24px;
+ font-weight: 600;
+ margin-bottom: 8px;
+}
+
+.statDescription {
+ font-size: 12px;
+ color: #888;
+ line-height: 1.4;
+}
+
+.insightSection {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 16px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.insightHeader {
+ font-size: 14px;
+ font-weight: 500;
+ margin-bottom: 16px;
+}
+
+.scoreContainer {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 16px;
+}
+
+.scoreBar {
+ flex: 1;
+ height: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.scoreProgress {
+ height: 100%;
+ background: linear-gradient(90deg, #4f46e5, #6366f1);
+ border-radius: 4px;
+}
+
+.scoreValue {
+ font-weight: 500;
+ font-size: 14px;
+}
+
+.insightText {
+ font-size: 13px;
+ color: #aaa;
+ line-height: 1.5;
+}
+
+@media (max-width: 640px) {
+ .statsGrid {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ }
+
+ .statCard {
+ padding: 12px;
+ }
+
+ .insightSection {
+ padding: 12px;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Elfa/AccountSmartStats/AccountSmartStatsMessage.tsx b/submodules/frontend/components/Agents/Elfa/AccountSmartStats/AccountSmartStatsMessage.tsx
new file mode 100644
index 00000000..82157012
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/AccountSmartStats/AccountSmartStatsMessage.tsx
@@ -0,0 +1,104 @@
+import React from "react";
+import { Users, BarChart3, Percent } from "lucide-react";
+import styles from "./AccountSmartStatsMessage.module.css";
+import { ElfaAccountSmartStatsMessageProps } from "./AccountSmartStatsMessage.types";
+import { Text } from "@chakra-ui/react";
+
+const formatNumber = (num: number): string => {
+ if (num >= 1000000) {
+ return `${(num / 1000000).toFixed(1)}M`;
+ }
+ if (num >= 1000) {
+ return `${(num / 1000).toFixed(1)}K`;
+ }
+ return num.toString();
+};
+
+export const ElfaAccountSmartStatsMessage: React.FC<
+ ElfaAccountSmartStatsMessageProps
+> = ({ metadata }) => {
+ if (!metadata.success || !metadata.data) {
+ return | + | + | Address | +Description | +Links | +
|---|---|---|---|---|
| #{index + 1} | +
+ {token.icon && (
+
+ |
+
+
+
+ {truncateAddress(token.tokenAddress)}
+
+
+
+ |
+
+
+ {token.description || "-"}
+
+ |
+
+
+ {token.links?.map((link: any, idx: number) => (
+
+ {getLinkIcon(link.label || link.type)}
+
+ ))}
+
+ |
+
+
+ );
+};
diff --git a/submodules/frontend/components/Agents/Elfa/AccountSmartStats/AccountSmartStatsMessage.types.ts b/submodules/frontend/components/Agents/Elfa/AccountSmartStats/AccountSmartStatsMessage.types.ts
new file mode 100644
index 00000000..93f4798a
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/AccountSmartStats/AccountSmartStatsMessage.types.ts
@@ -0,0 +1,22 @@
+// ElfaAccountSmartStatsMessage.types.ts
+
+interface AccountSmartStats {
+ followerEngagementRatio: number;
+ averageEngagement: number;
+ smartFollowingCount: number;
+}
+
+interface AccountSmartStatsMetadata {
+ success: boolean;
+ data: AccountSmartStats;
+}
+
+interface ElfaAccountSmartStatsMessageProps {
+ metadata: AccountSmartStatsMetadata;
+}
+
+export type {
+ ElfaAccountSmartStatsMessageProps,
+ AccountSmartStats,
+ AccountSmartStatsMetadata,
+};
diff --git a/submodules/frontend/components/Agents/Elfa/Mentions/MentionsMessage.module.css b/submodules/frontend/components/Agents/Elfa/Mentions/MentionsMessage.module.css
new file mode 100644
index 00000000..a9637196
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/Mentions/MentionsMessage.module.css
@@ -0,0 +1,175 @@
+/* ElfaMentionsMessage.module.css */
+
+.container {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.mentionCard {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 16px;
+ margin-bottom: 16px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.accountInfo {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12px;
+}
+
+.accountDetails {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.profileImage {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.profilePlaceholder {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.accountName {
+ font-weight: 500;
+ color: #e4e4e4;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.verifiedBadge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: rgb(29, 155, 240);
+}
+
+.username {
+ color: #888;
+ font-size: 12px;
+}
+
+.followInfo {
+ color: #888;
+ font-size: 12px;
+}
+
+.content {
+ color: #e4e4e4;
+ font-size: 14px;
+ line-height: 1.5;
+ margin-bottom: 12px;
+ white-space: pre-wrap;
+}
+
+.metricsList {
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+ margin-bottom: 12px;
+ padding-bottom: 12px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metric {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: #888;
+ font-size: 13px;
+}
+
+.footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.timestamp {
+ color: #666;
+ font-size: 12px;
+}
+
+.viewOriginal {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: rgb(29, 155, 240);
+ font-size: 12px;
+ text-decoration: none;
+}
+
+.viewOriginal:hover {
+ text-decoration: underline;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 16px;
+}
+
+.title {
+ font-size: 16px;
+ font-weight: 500;
+ color: #e4e4e4;
+}
+
+.total {
+ color: #888;
+ font-size: 12px;
+}
+
+.showMoreButton {
+ width: 100%;
+ padding: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border: none;
+ border-radius: 8px;
+ color: #888;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ font-size: 12px;
+ margin-top: 16px;
+}
+
+.showMoreButton:hover {
+ background: rgba(255, 255, 255, 0.15);
+ color: #aaa;
+}
+
+@media (max-width: 640px) {
+ .mentionCard {
+ padding: 12px;
+ }
+
+ .metricsList {
+ gap: 12px;
+ }
+
+ .accountDetails {
+ gap: 8px;
+ }
+
+ .profileImage,
+ .profilePlaceholder {
+ width: 32px;
+ height: 32px;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Elfa/Mentions/MentionsMessage.tsx b/submodules/frontend/components/Agents/Elfa/Mentions/MentionsMessage.tsx
new file mode 100644
index 00000000..c9935244
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/Mentions/MentionsMessage.tsx
@@ -0,0 +1,163 @@
+import React, { useState } from "react";
+import {
+ Eye,
+ MessageCircle,
+ Heart,
+ Repeat,
+ ChevronDown,
+ ChevronUp,
+ Bookmark,
+ ExternalLink,
+ CheckCircle,
+} from "lucide-react";
+import Image from "next/image";
+import styles from "./MentionsMessage.module.css";
+import { ElfaMentionsMessageProps } from "./MentionsMessage.types";
+import { Text } from "@chakra-ui/react";
+
+const INITIAL_DISPLAY_COUNT = 3;
+
+const formatNumber = (num?: number): string => {
+ if (!num) return "0";
+ if (num >= 1000000) {
+ return `${(num / 1000000).toFixed(1)}M`;
+ }
+ if (num >= 1000) {
+ return `${(num / 1000).toFixed(1)}K`;
+ }
+ return num.toString();
+};
+
+const formatDate = (dateString?: string): string => {
+ if (!dateString) return "";
+ const date = new Date(dateString);
+ return date.toLocaleString("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ hour: "numeric",
+ minute: "numeric",
+ hour12: true,
+ });
+};
+
+export const ElfaMentionsMessage: React.FC
+ Account Smart Statistics
+
+
+
+
+
+
+
+
+
+
+
+ {formatNumber(stats.smartFollowingCount)}
+
+
+ Number of high-value accounts following this profile
+
+
+
+
+
+
+
+ {stats.averageEngagement.toFixed(2)}
+
+
+ Average interactions per post
+
+
+
+
+
+
+ {(stats.followerEngagementRatio * 100).toFixed(2)}%
+
+
+ Percentage of followers who engage regularly
+
+
+
+ Engagement Quality Score
+
+
+
+
+
+ {engagementQuality}/100
+
+ {engagementQuality >= 80
+ ? "Excellent engagement quality with high follower interaction."
+ : engagementQuality >= 60
+ ? "Good engagement quality with active follower base."
+ : engagementQuality >= 40
+ ? "Moderate engagement quality with potential for improvement."
+ : "Low engagement quality. Consider improving content strategy."}
+
+
+
+ );
+};
diff --git a/submodules/frontend/components/Agents/Elfa/Mentions/MentionsMessage.types.ts b/submodules/frontend/components/Agents/Elfa/Mentions/MentionsMessage.types.ts
new file mode 100644
index 00000000..d5dd1b1d
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/Mentions/MentionsMessage.types.ts
@@ -0,0 +1,52 @@
+// ElfaMentionsMessage.types.ts
+
+interface AccountData {
+ profileBannerUrl?: string | null;
+ profileImageUrl?: string | null;
+ description?: string | null;
+ userSince?: string;
+ location?: string | null;
+ name?: string;
+}
+
+interface Account {
+ id?: number;
+ username?: string;
+ data?: AccountData;
+ followerCount?: number;
+ followingCount?: number;
+ isVerified?: boolean;
+}
+
+interface Mention {
+ id?: number;
+ type?: string;
+ content?: string;
+ originalUrl?: string | null;
+ data?: string | null;
+ likeCount?: number;
+ quoteCount?: number;
+ replyCount?: number;
+ repostCount?: number;
+ viewCount?: number;
+ mentionedAt?: string;
+ bookmarkCount?: number;
+ account?: Account;
+}
+
+interface MentionsMetadata {
+ success?: boolean;
+ data?: Mention[];
+}
+
+interface ElfaMentionsMessageProps {
+ metadata?: MentionsMetadata;
+}
+
+export type {
+ ElfaMentionsMessageProps,
+ Mention,
+ Account,
+ AccountData,
+ MentionsMetadata,
+};
diff --git a/submodules/frontend/components/Agents/Elfa/TopMentions/TopMentionsMessage.module.css b/submodules/frontend/components/Agents/Elfa/TopMentions/TopMentionsMessage.module.css
new file mode 100644
index 00000000..423d13d3
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/TopMentions/TopMentionsMessage.module.css
@@ -0,0 +1,92 @@
+/* ElfaTopMentionsMessage.module.css */
+
+.container {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.mentionCard {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 16px;
+ margin-bottom: 16px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.content {
+ color: #e4e4e4;
+ font-size: 12px;
+ line-height: 1.5;
+ margin-bottom: 12px;
+ white-space: pre-wrap;
+}
+
+.metricsList {
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+ margin-bottom: 8px;
+}
+
+.metric {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: #888;
+ font-size: 13px;
+}
+
+.timestamp {
+ color: #666;
+ font-size: 12px;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 16px;
+}
+
+.title {
+ font-size: 16px;
+ font-weight: 500;
+ color: #e4e4e4;
+}
+
+.total {
+ color: #888;
+ font-size: 12px;
+}
+
+.showMoreButton {
+ width: 100%;
+ padding: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border: none;
+ border-radius: 8px;
+ color: #888;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ font-size: 12px;
+ margin-top: 16px;
+}
+
+.showMoreButton:hover {
+ background: rgba(255, 255, 255, 0.15);
+ color: #aaa;
+}
+
+@media (max-width: 640px) {
+ .mentionCard {
+ padding: 12px;
+ }
+
+ .metricsList {
+ gap: 12px;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Elfa/TopMentions/TopMentionsMessage.tsx b/submodules/frontend/components/Agents/Elfa/TopMentions/TopMentionsMessage.tsx
new file mode 100644
index 00000000..25f895c9
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/TopMentions/TopMentionsMessage.tsx
@@ -0,0 +1,112 @@
+// ElfaTopMentionsMessage.tsx
+import React, { useState } from "react";
+import {
+ Eye,
+ MessageCircle,
+ Heart,
+ Repeat,
+ ChevronDown,
+ ChevronUp,
+} from "lucide-react";
+import styles from "./TopMentionsMessage.module.css";
+import {
+ ElfaTopMentionsMessageProps,
+ Mention,
+} from "./TopMentionsMessage.types";
+import { Text } from "@chakra-ui/react";
+
+const INITIAL_DISPLAY_COUNT = 3;
+
+const formatNumber = (num: number): string => {
+ if (num >= 1000000) {
+ return `${(num / 1000000).toFixed(1)}M`;
+ }
+ if (num >= 1000) {
+ return `${(num / 1000).toFixed(1)}K`;
+ }
+ return num.toString();
+};
+
+const formatDate = (dateString: string): string => {
+ const date = new Date(dateString);
+ return date.toLocaleString("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ hour: "numeric",
+ minute: "numeric",
+ hour12: true,
+ });
+};
+
+export const ElfaTopMentionsMessage: React.FC
+ Latest Social Media Mentions
+ Total: {mentions.length} mentions
+
+
+ {displayMentions.map((mention) => (
+
+
+ ))}
+
+ {mentions.length > INITIAL_DISPLAY_COUNT && (
+
+ )}
+
+
+
+
+ {mention.account?.data?.profileImageUrl ? (
+
+
+
+
+ {mention.account?.data?.name || "Unknown"}
+ {mention.account?.isVerified && (
+
+
+
+ @{mention.account?.username || "unknown"}
+
+
+
+ {formatNumber(mention.account?.followerCount)} followers
+
+
+ {mention.content}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {formatDate(mention.mentionedAt)}
+
+ {mention.originalUrl && (
+
+ View Original
+
+ );
+};
diff --git a/submodules/frontend/components/Agents/Elfa/TopMentions/TopMentionsMessage.types.ts b/submodules/frontend/components/Agents/Elfa/TopMentions/TopMentionsMessage.types.ts
new file mode 100644
index 00000000..6fa214bf
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/TopMentions/TopMentionsMessage.types.ts
@@ -0,0 +1,39 @@
+// ElfaTopMentionsMessage.types.ts
+
+interface Metrics {
+ view_count: number;
+ repost_count: number;
+ reply_count: number;
+ like_count: number;
+}
+
+interface Mention {
+ id: number;
+ content: string;
+ mentioned_at: string;
+ metrics: Metrics;
+}
+
+interface TopMentionsData {
+ pageSize: number;
+ page: number;
+ total: number;
+ data: Mention[];
+}
+
+interface TopMentionsMetadata {
+ success: boolean;
+ data: TopMentionsData;
+}
+
+interface ElfaTopMentionsMessageProps {
+ metadata: TopMentionsMetadata;
+}
+
+export type {
+ ElfaTopMentionsMessageProps,
+ Mention,
+ Metrics,
+ TopMentionsData,
+ TopMentionsMetadata,
+};
diff --git a/submodules/frontend/components/Agents/Elfa/TrendingTokens/TrendingTokensMessage.module.css b/submodules/frontend/components/Agents/Elfa/TrendingTokens/TrendingTokensMessage.module.css
new file mode 100644
index 00000000..1b00b0dd
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/TrendingTokens/TrendingTokensMessage.module.css
@@ -0,0 +1,109 @@
+/* ElfaTrendingTokensMessage.module.css */
+
+.container {
+ width: 100%;
+ overflow-x: auto;
+}
+
+.table {
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+ margin-top: 12px;
+}
+
+.headerRow th {
+ text-align: left;
+ padding: 12px 16px;
+ color: #666;
+ font-weight: 500;
+ font-size: 12px;
+ border-bottom: 1px solid #1a1a1a;
+ white-space: nowrap;
+}
+
+.headerRow th:first-child {
+ min-width: 150px;
+}
+
+.headerRow th:nth-child(2) {
+ min-width: 200px;
+}
+
+.headerRow th:last-child {
+ text-align: right;
+ min-width: 120px;
+}
+
+.row {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.row:last-child {
+ border-bottom: none;
+}
+
+.row td {
+ padding: 12px 16px;
+ font-size: 12px;
+}
+
+.tokenCell {
+ color: #e4e4e4;
+ font-weight: 500;
+ white-space: nowrap;
+}
+
+.mentionsCell {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: #888;
+}
+
+.arrow {
+ color: #666;
+ flex-shrink: 0;
+}
+
+.changeCell {
+ text-align: right;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 4px;
+ white-space: nowrap;
+}
+
+.changePositive {
+ color: #4caf50;
+}
+
+.changeNegative {
+ color: #f44336;
+}
+
+.changeNeutral {
+ color: #888;
+}
+
+.showMoreButton {
+ width: 100%;
+ padding: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border: none;
+ border-radius: 8px;
+ color: #888;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ font-size: 12px;
+ margin-top: 16px;
+}
+
+.showMoreButton:hover {
+ background: rgba(255, 255, 255, 0.15);
+ color: #aaa;
+}
diff --git a/submodules/frontend/components/Agents/Elfa/TrendingTokens/TrendingTokensMessage.tsx b/submodules/frontend/components/Agents/Elfa/TrendingTokens/TrendingTokensMessage.tsx
new file mode 100644
index 00000000..71c24947
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/TrendingTokens/TrendingTokensMessage.tsx
@@ -0,0 +1,121 @@
+// ElfaTrendingTokensMessage.tsx
+import React, { useState } from "react";
+import {
+ ChevronDown,
+ ChevronUp,
+ ArrowRight,
+ ArrowUpRight,
+ ArrowDownRight,
+ Minus,
+} from "lucide-react";
+import styles from "./TrendingTokensMessage.module.css";
+import {
+ ElfaTrendingTokensMessageProps,
+ TokenData,
+} from "./TrendingTokensMessage.types";
+import { Text } from "@chakra-ui/react";
+
+const INITIAL_DISPLAY_COUNT = 10;
+
+const formatNumber = (num: number): string => {
+ if (num >= 1000000) {
+ return `${(num / 1000000).toFixed(1)}M`;
+ }
+ if (num >= 1000) {
+ return `${(num / 1000).toFixed(1)}K`;
+ }
+ return num.toString();
+};
+
+const getChangeIndicator = (changePercent: number) => {
+ if (changePercent > 0) {
+ return {
+ icon:
+ Top Social Mentions
+
+ Total: {total} mentions over the last 1D
+
+
+
+ {displayMentions.map((mention: Mention) => (
+
+
+ ))}
+
+ {mentions.length > INITIAL_DISPLAY_COUNT && (
+
+ )}
+ {mention.content}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {formatDate(mention.mentioned_at)}
+
+
+
+
+
+
+ {tokens.length > INITIAL_DISPLAY_COUNT && (
+
+ )}
+
+ );
+};
diff --git a/submodules/frontend/components/Agents/Elfa/TrendingTokens/TrendingTokensMessage.types.ts b/submodules/frontend/components/Agents/Elfa/TrendingTokens/TrendingTokensMessage.types.ts
new file mode 100644
index 00000000..25555fee
--- /dev/null
+++ b/submodules/frontend/components/Agents/Elfa/TrendingTokens/TrendingTokensMessage.types.ts
@@ -0,0 +1,31 @@
+// ElfaTrendingTokensMessage.types.ts
+
+interface TokenData {
+ token: string;
+ current_count: number;
+ previous_count: number;
+ change_percent: number;
+}
+
+interface TrendingTokensData {
+ pageSize: number;
+ page: number;
+ total: number;
+ data: TokenData[];
+}
+
+interface TrendingTokensMetadata {
+ success: boolean;
+ data: TrendingTokensData;
+}
+
+interface ElfaTrendingTokensMessageProps {
+ metadata: TrendingTokensMetadata;
+}
+
+export type {
+ ElfaTrendingTokensMessageProps,
+ TokenData,
+ TrendingTokensData,
+ TrendingTokensMetadata,
+};
diff --git a/submodules/moragents_dockers/frontend/components/Agents/Imagen/ImageDisplayMessage.module.css b/submodules/frontend/components/Agents/Imagen/ImageDisplayMessage.module.css
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/Agents/Imagen/ImageDisplayMessage.module.css
rename to submodules/frontend/components/Agents/Imagen/ImageDisplayMessage.module.css
diff --git a/submodules/moragents_dockers/frontend/components/Agents/Imagen/ImageDisplayMessage.tsx b/submodules/frontend/components/Agents/Imagen/ImageDisplayMessage.tsx
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/Agents/Imagen/ImageDisplayMessage.tsx
rename to submodules/frontend/components/Agents/Imagen/ImageDisplayMessage.tsx
diff --git a/submodules/moragents_dockers/frontend/components/Agents/MorClaims/ClaimForm.tsx b/submodules/frontend/components/Agents/MorClaims/CustomMessages/ClaimForm.tsx
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/Agents/MorClaims/ClaimForm.tsx
rename to submodules/frontend/components/Agents/MorClaims/CustomMessages/ClaimForm.tsx
diff --git a/submodules/moragents_dockers/frontend/components/Agents/MorClaims/ClaimMessage.tsx b/submodules/frontend/components/Agents/MorClaims/CustomMessages/ClaimMessage.tsx
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/Agents/MorClaims/ClaimMessage.tsx
rename to submodules/frontend/components/Agents/MorClaims/CustomMessages/ClaimMessage.tsx
diff --git a/submodules/frontend/components/Agents/MorClaims/hooks.ts b/submodules/frontend/components/Agents/MorClaims/hooks.ts
new file mode 100644
index 00000000..774a8443
--- /dev/null
+++ b/submodules/frontend/components/Agents/MorClaims/hooks.ts
@@ -0,0 +1,37 @@
+import { Axios } from "axios";
+import { ChatMessage, ClaimTransactionPayload } from "@/services/types";
+
+export const getClaimTxPayload = async (
+ backendClient: Axios,
+ transactions: ClaimTransactionPayload[]
+): Promise| Token / Ticker | +Change in # of Mentions | +% Change | +
|---|---|---|
| ${token.token} | +
+ {formatNumber(token.previous_count)}
+ |
+
+
+ {change.icon}
+
+ {change.prefix}
+ {token.change_percent.toFixed(2)}%
+
+
+ |
+
+ No token view data available
+
+ );
+ }
+
+ const truncateAddress = (address: string) => {
+ if (!address) return "";
+ return `${address.slice(0, 6)}...${address.slice(-6)}`;
+ };
+
+ const handleCopy = async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ } catch (err) {
+ console.error("Failed to copy:", err);
+ }
+ };
+
+ const displayTokens = showAll
+ ? metadata.tokens
+ : metadata.tokens.slice(0, INITIAL_DISPLAY_COUNT);
+
+ return (
+
+
+ );
+};
diff --git a/submodules/frontend/components/Agents/Rugcheck/MostViewed/MostViewedTokensMessage.types.ts b/submodules/frontend/components/Agents/Rugcheck/MostViewed/MostViewedTokensMessage.types.ts
new file mode 100644
index 00000000..c0b4a606
--- /dev/null
+++ b/submodules/frontend/components/Agents/Rugcheck/MostViewed/MostViewedTokensMessage.types.ts
@@ -0,0 +1,29 @@
+// ViewedTokensMessage.types.ts
+
+interface TokenMetadata {
+ name?: string;
+ symbol?: string;
+ [key: string]: any;
+}
+
+interface ViewedToken {
+ mint: string;
+ metadata: TokenMetadata;
+ visits: number;
+ user_visits: number;
+}
+
+interface ViewedTokensMetadata {
+ tokens: ViewedToken[];
+}
+
+interface ViewedTokensMessageProps {
+ metadata: ViewedTokensMetadata;
+}
+
+export type {
+ ViewedTokensMessageProps,
+ ViewedTokensMetadata,
+ ViewedToken,
+ TokenMetadata,
+};
diff --git a/submodules/frontend/components/Agents/Rugcheck/MostVoted/MostVotedTokensMessage.module.css b/submodules/frontend/components/Agents/Rugcheck/MostVoted/MostVotedTokensMessage.module.css
new file mode 100644
index 00000000..6025ab82
--- /dev/null
+++ b/submodules/frontend/components/Agents/Rugcheck/MostVoted/MostVotedTokensMessage.module.css
@@ -0,0 +1,200 @@
+/* VotedTokensMessage.module.css */
+.container {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.header {
+ margin-bottom: 12px;
+}
+
+.title {
+ font-size: 12px;
+ font-weight: 500;
+ color: #e4e4e4;
+ margin-bottom: 2px;
+}
+
+.subtitle {
+ color: #888;
+ font-size: 12px;
+}
+
+.tokenList {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.tokenCard {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 8px;
+ padding: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tokenHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 8px;
+}
+
+.tokenInfo {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.rankBadge {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ font-weight: 500;
+ color: #aaa;
+}
+
+.addressWrapper {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ background: rgba(0, 0, 0, 0.2);
+ padding: 2px 4px;
+ border-radius: 4px;
+}
+
+.address {
+ font-family: monospace;
+ font-size: 12px;
+ color: #888;
+}
+
+.copyButton {
+ color: #666;
+ background: none;
+ border: none;
+ padding: 2px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ border-radius: 4px;
+}
+
+.copyButton:hover {
+ color: #888;
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.statsGroup {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.statItem {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 4px 8px;
+ background: rgba(255, 255, 255, 0.03);
+ border-radius: 4px;
+}
+
+.statIcon {
+ color: #666;
+}
+
+.statValue {
+ font-size: 12px;
+ font-weight: 500;
+ color: #e4e4e4;
+}
+
+.approvalSection {
+ padding: 8px;
+ background: rgba(255, 255, 255, 0.03);
+ border-radius: 6px;
+}
+
+.approvalHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 4px;
+}
+
+.approvalLabel {
+ font-size: 12px;
+ color: #888;
+}
+
+.approvalValue {
+ font-size: 12px;
+ font-weight: 500;
+ color: #e4e4e4;
+}
+
+.approvalBar {
+ height: 6px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 3px;
+ overflow: hidden;
+}
+
+.approvalFill {
+ height: 100%;
+ transition: width 0.3s ease;
+}
+
+.highApproval {
+ background: linear-gradient(90deg, #22c55e, #4ade80);
+}
+
+.mediumApproval {
+ background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.lowApproval {
+ background: linear-gradient(90deg, #ef4444, #f87171);
+}
+
+.showMoreButton {
+ width: 100%;
+ padding: 6px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 6px;
+ color: #888;
+ font-size: 12px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ transition: all 0.2s;
+}
+
+.showMoreButton:hover {
+ background: rgba(255, 255, 255, 0.08);
+ color: #aaa;
+}
+
+@media (max-width: 640px) {
+ .tokenHeader {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 6px;
+ }
+
+ .statsGroup {
+ margin-top: 8px;
+ align-self: stretch;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Rugcheck/MostVoted/MostVotedTokensMessage.tsx b/submodules/frontend/components/Agents/Rugcheck/MostVoted/MostVotedTokensMessage.tsx
new file mode 100644
index 00000000..f62fed08
--- /dev/null
+++ b/submodules/frontend/components/Agents/Rugcheck/MostVoted/MostVotedTokensMessage.tsx
@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import { ThumbsUp, Vote, Copy, ChevronDown, ChevronUp } from "lucide-react";
+import { Text } from "@chakra-ui/react";
+import styles from "./MostVotedTokensMessage.module.css";
+import { VotedTokensMessageProps } from "./MostVotedTokensMessage.types";
+
+const INITIAL_DISPLAY_COUNT = 5;
+
+export const VotedTokensMessage: React.FC
+ Most Viewed Tokens (24h)
+
+ Top {metadata.tokens.length} tokens by view count
+
+
+
+
+ {displayTokens.map((token, index) => (
+
+
+ {metadata.tokens.length > INITIAL_DISPLAY_COUNT && (
+
+ )}
+
+
+ ))}
+
+
+
+ #{index + 1}
+
+
+
+ {token.metadata.name || "Unknown Token"}
+
+
+ {token.metadata.symbol || "???"}
+
+
+
+ {truncateAddress(token.mint)}
+
+
+
+
+
+
+
+
+
+
+
+ {token.visits.toLocaleString()}
+
+ Total Views
+
+
+
+
+
+ {token.user_visits.toLocaleString()}
+
+ Unique Visitors
+
+ No token voting data available
+
+ );
+ }
+
+ const truncateAddress = (address: string) => {
+ if (!address) return "";
+ return `${address.slice(0, 6)}...${address.slice(-6)}`;
+ };
+
+ const handleCopy = async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ } catch (err) {
+ console.error("Failed to copy:", err);
+ }
+ };
+
+ const getApprovalClass = (upvotes: number, total: number) => {
+ const ratio = upvotes / total;
+ if (ratio >= 0.8) return styles.highApproval;
+ if (ratio >= 0.5) return styles.mediumApproval;
+ return styles.lowApproval;
+ };
+
+ const displayTokens = showAll
+ ? metadata.tokens
+ : metadata.tokens.slice(0, INITIAL_DISPLAY_COUNT);
+
+ return (
+
+
+ );
+};
diff --git a/submodules/frontend/components/Agents/Rugcheck/MostVoted/MostVotedTokensMessage.types.ts b/submodules/frontend/components/Agents/Rugcheck/MostVoted/MostVotedTokensMessage.types.ts
new file mode 100644
index 00000000..18bf7a52
--- /dev/null
+++ b/submodules/frontend/components/Agents/Rugcheck/MostVoted/MostVotedTokensMessage.types.ts
@@ -0,0 +1,17 @@
+// VotedTokensMessage.types.ts
+
+interface VotedToken {
+ mint: string;
+ up_count: number;
+ vote_count: number;
+}
+
+interface VotedTokensMetadata {
+ tokens: VotedToken[];
+}
+
+interface VotedTokensMessageProps {
+ metadata: VotedTokensMetadata;
+}
+
+export type { VotedTokensMessageProps, VotedTokensMetadata, VotedToken };
diff --git a/submodules/frontend/components/Agents/Rugcheck/Report/RugcheckReportMessage.module.css b/submodules/frontend/components/Agents/Rugcheck/Report/RugcheckReportMessage.module.css
new file mode 100644
index 00000000..edf24464
--- /dev/null
+++ b/submodules/frontend/components/Agents/Rugcheck/Report/RugcheckReportMessage.module.css
@@ -0,0 +1,145 @@
+.container {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 16px;
+}
+
+.title {
+ font-size: 20px;
+ font-weight: 500;
+ color: #e4e4e4;
+}
+
+.scoreWrapper {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.score {
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.highScore {
+ color: #ef4444;
+}
+
+.mediumScore {
+ color: #f59e0b;
+}
+
+.lowScore {
+ color: #22c55e;
+}
+
+.addressBar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 24px;
+ background: rgba(255, 255, 255, 0.05);
+ padding: 8px 12px;
+ border-radius: 8px;
+}
+
+.address {
+ font-family: monospace;
+ font-size: 12px;
+ color: #888;
+}
+
+.copyButton {
+ color: #666;
+ background: none;
+ border: none;
+ padding: 4px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ border-radius: 4px;
+}
+
+.copyButton:hover {
+ color: #888;
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.riskList {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.riskCard {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 16px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.dangerRisk {
+ background: rgba(239, 68, 68, 0.1);
+ border-color: rgba(239, 68, 68, 0.2);
+}
+
+.warnRisk {
+ background: rgba(245, 158, 11, 0.1);
+ border-color: rgba(245, 158, 11, 0.2);
+}
+
+.infoRisk {
+ background: rgba(59, 130, 246, 0.1);
+ border-color: rgba(59, 130, 246, 0.2);
+}
+
+.riskHeader {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.riskName {
+ font-size: 16px;
+ font-weight: 500;
+ color: #e4e4e4;
+}
+
+.riskValue {
+ font-size: 12px;
+ color: #888;
+}
+
+.riskDescription {
+ color: #888;
+ font-size: 12px;
+ line-height: 1.5;
+ margin-bottom: 12px;
+}
+
+.riskScore {
+ color: #666;
+ font-size: 12px;
+}
+
+@media (max-width: 640px) {
+ .header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ }
+
+ .riskCard {
+ padding: 12px;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Rugcheck/Report/RugcheckReportMessage.tsx b/submodules/frontend/components/Agents/Rugcheck/Report/RugcheckReportMessage.tsx
new file mode 100644
index 00000000..ebc82eba
--- /dev/null
+++ b/submodules/frontend/components/Agents/Rugcheck/Report/RugcheckReportMessage.tsx
@@ -0,0 +1,98 @@
+import React from "react";
+import { Copy } from "lucide-react";
+import { Text } from "@chakra-ui/react";
+import styles from "./RugcheckReportMessage.module.css";
+import { RugcheckReportMessageProps } from "./RugcheckReportMessage.types";
+
+export const RugcheckReportMessage: React.FC
+ Most Voted Tokens (24h)
+
+ Top {metadata.tokens.length} tokens by community votes
+
+
+
+
+ {displayTokens.map((token, index) => (
+
+
+ {metadata.tokens.length > INITIAL_DISPLAY_COUNT && (
+
+ )}
+
+
+ ))}
+
+
+
+
+
+
+ #{index + 1}
+
+
+ {truncateAddress(token.mint)}
+
+
+
+
+
+
+
+
+
+ {token.up_count.toLocaleString()}
+
+
+
+
+ {token.vote_count.toLocaleString()}
+
+
+
+
+
+ Community Approval
+
+ {((token.up_count / token.vote_count) * 100).toFixed(1)}%
+
+
+
+
+
+
+ No security analysis report available
+
+
+ );
+ }
+
+ const { report, mint_address } = metadata;
+
+ const truncateAddress = (address: string) => {
+ if (!address) return "";
+ return `${address.slice(0, 6)}...${address.slice(-6)}`;
+ };
+
+ const handleCopy = async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ } catch (err) {
+ console.error("Failed to copy:", err);
+ }
+ };
+
+ const getRiskClass = (level: string) => {
+ switch (level) {
+ case "danger":
+ return styles.dangerRisk;
+ case "warn":
+ return styles.warnRisk;
+ default:
+ return styles.infoRisk;
+ }
+ };
+
+ const getScoreClass = (score: number) => {
+ if (score > 10000) return styles.highScore;
+ if (score > 5000) return styles.mediumScore;
+ return styles.lowScore;
+ };
+
+ return (
+
+
+ );
+};
diff --git a/submodules/frontend/components/Agents/Rugcheck/Report/RugcheckReportMessage.types.ts b/submodules/frontend/components/Agents/Rugcheck/Report/RugcheckReportMessage.types.ts
new file mode 100644
index 00000000..9d652a51
--- /dev/null
+++ b/submodules/frontend/components/Agents/Rugcheck/Report/RugcheckReportMessage.types.ts
@@ -0,0 +1,29 @@
+// RugcheckReportMessage.types.ts
+
+interface Risk {
+ name: string;
+ value: string;
+ description: string;
+ score: number;
+ level: "danger" | "warn" | "info";
+}
+
+interface Report {
+ tokenProgram: string;
+ tokenType: string;
+ risks: Risk[];
+ score: number;
+}
+
+interface RugcheckMetadata {
+ report: Report;
+ mint_address: string;
+ token_name: string;
+ identifier: string;
+}
+
+interface RugcheckReportMessageProps {
+ metadata: RugcheckMetadata;
+}
+
+export type { RugcheckReportMessageProps, Risk, Report, RugcheckMetadata };
diff --git a/submodules/frontend/components/Agents/Swaps/Swap/SwapMessage.module.css b/submodules/frontend/components/Agents/Swaps/Swap/SwapMessage.module.css
new file mode 100644
index 00000000..02ea1df4
--- /dev/null
+++ b/submodules/frontend/components/Agents/Swaps/Swap/SwapMessage.module.css
@@ -0,0 +1,218 @@
+/* OneInchSwapMessage.module.css */
+.container {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.contentRow {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 12px;
+}
+
+.messageContent {
+ color: #e4e4e4;
+ font-size: 14px;
+ margin: 0;
+}
+
+.toggleButton {
+ background: transparent;
+ border: none;
+ color: #888;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 4px;
+ border-radius: 4px;
+ transition: all 0.2s ease;
+}
+
+.toggleButton:hover {
+ color: #59f886;
+ background: rgba(89, 248, 134, 0.1);
+}
+
+.swapCard {
+ margin-top: 12px;
+ background: rgba(22, 24, 22, 0.7);
+ border-radius: 12px;
+ padding: 2px;
+ border: 1px solid rgba(103, 107, 104, 0.5);
+}
+
+.swapPanel {
+ background: #111613;
+ border-radius: 10px;
+ padding: 16px;
+}
+
+.swapGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 16px;
+ border-bottom: 1px solid rgba(204, 206, 205, 0.2);
+ padding-bottom: 16px;
+}
+
+.swapColumn {
+ position: relative;
+}
+
+.swapColumn:not(:last-child)::after {
+ content: "";
+ position: absolute;
+ top: 10%;
+ right: -8px;
+ height: 80%;
+ width: 1px;
+ background-color: rgba(204, 206, 205, 0.2);
+}
+
+.swapSection {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.sectionTitle {
+ color: #e4e4e4;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.tokenAmount {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.amountValue {
+ color: #9a9c9b;
+ font-size: 16px;
+}
+
+.tokenSymbol {
+ color: #e4e4e4;
+ font-size: 16px;
+}
+
+.slippageHeader {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 4px;
+}
+
+.infoButton {
+ background: transparent;
+ border: none;
+ color: #9a9c9b;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2px;
+}
+
+.infoButton:hover {
+ color: #e4e4e4;
+}
+
+.inputGroup {
+ display: flex;
+ align-items: center;
+ height: 32px;
+ margin-bottom: 4px;
+}
+
+.slippageInput {
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ border: 1px solid #676b68;
+ border-radius: 4px 0 0 4px;
+ color: #e4e4e4;
+ padding: 0 8px;
+ font-size: 14px;
+}
+
+.inputAddon {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 8px;
+ background: transparent;
+ border: 1px solid #676b68;
+ border-left: none;
+ border-radius: 0 4px 4px 0;
+ color: #9a9c9b;
+}
+
+.poweredBy {
+ color: #676b68;
+ font-size: 10px;
+}
+
+.actionButtons {
+ display: flex;
+ justify-content: flex-end;
+ gap: 16px;
+ margin-top: 16px;
+}
+
+.cancelButton {
+ background: transparent;
+ border: none;
+ color: #e4e4e4;
+ font-size: 14px;
+ cursor: pointer;
+ padding: 8px 16px;
+ border-radius: 4px;
+}
+
+.cancelButton:hover {
+ color: #59f886;
+}
+
+.swapButton {
+ background: #59f886;
+ color: #0a120d;
+ border: none;
+ padding: 8px 24px;
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.swapButton:hover {
+ background: #4ae977;
+}
+
+.swapButton:disabled {
+ background: #2d7c43;
+ color: #9a9c9b;
+ cursor: not-allowed;
+}
+
+@media (max-width: 640px) {
+ .swapGrid {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ }
+
+ .swapColumn::after {
+ display: none;
+ }
+
+ .swapColumn:not(:last-child) {
+ border-bottom: 1px solid rgba(204, 206, 205, 0.2);
+ padding-bottom: 12px;
+ }
+}
diff --git a/submodules/frontend/components/Agents/Swaps/Swap/SwapMessage.tsx b/submodules/frontend/components/Agents/Swaps/Swap/SwapMessage.tsx
new file mode 100644
index 00000000..4da9fa43
--- /dev/null
+++ b/submodules/frontend/components/Agents/Swaps/Swap/SwapMessage.tsx
@@ -0,0 +1,143 @@
+// OneInchSwapMessage.jsx
+import React, { useState } from "react";
+import { ArrowLeftRight, Info } from "lucide-react";
+import { useAccount } from "wagmi";
+import { useSwapTransaction, SwapTx } from "../hooks";
+import styles from "./SwapMessage.module.css";
+import { OneInchSwapMessageProps } from "./SwapMessage.types";
+import { StyledTooltip } from "@/components/Common/StyledTooltip";
+
+const OneInchSwapMessage: React.FC
+ Security Analysis Report
+
+
+
+
+ Score: {report?.score?.toLocaleString() || "0"}
+
+
+
+ {truncateAddress(mint_address)}
+
+
+
+
+ {report?.risks?.map((risk, index) => (
+
+
+ {risk.description}
+
+
+ ))}
+
+ {risk.name}
+ {risk.value && (
+ {risk.value}
+ )}
+
+
+
+ Risk Score: {risk.score.toLocaleString()}
+
+
+
+ );
+};
+
+export default OneInchSwapMessage;
diff --git a/submodules/frontend/components/Agents/Swaps/Swap/SwapMessage.types.ts b/submodules/frontend/components/Agents/Swaps/Swap/SwapMessage.types.ts
new file mode 100644
index 00000000..7574d199
--- /dev/null
+++ b/submodules/frontend/components/Agents/Swaps/Swap/SwapMessage.types.ts
@@ -0,0 +1,17 @@
+// OneInchSwapMessage.types.ts
+
+export interface SwapMetadata {
+ src?: string;
+ dst?: string;
+ src_address?: string;
+ dst_address?: string;
+ src_amount?: number;
+ dst_amount?: number;
+}
+
+export interface OneInchSwapMessageProps {
+ content: string | React.ReactNode;
+ metadata?: SwapMetadata;
+}
+
+// Note: Main SwapTx type is now imported directly from useSwapTransaction.ts
diff --git a/submodules/frontend/components/Agents/Swaps/hooks.ts b/submodules/frontend/components/Agents/Swaps/hooks.ts
new file mode 100755
index 00000000..3952638b
--- /dev/null
+++ b/submodules/frontend/components/Agents/Swaps/hooks.ts
@@ -0,0 +1,148 @@
+import { useState, useCallback } from "react";
+import { useAccount, useChainId, useSendTransaction } from "wagmi";
+import { sendSwapStatus } from "@/services/apiHooks";
+import { getHttpClient, SWAP_STATUS } from "@/services/constants";
+
+export type SwapTx = {
+ dstAmount: string;
+ tx: {
+ data: string;
+ from: string;
+ gas: number;
+ gasPrice: string;
+ to: string;
+ value: string;
+ };
+};
+
+export const useSwapTransaction = () => {
+ const [isLoading, setIsLoading] = useState(false);
+ const [txHash, setTxHash] = useState("");
+ const { address } = useAccount();
+ const chainId = useChainId();
+ const { sendTransaction } = useSendTransaction();
+
+ const handleSwap = useCallback(
+ async (swapTx: SwapTx) => {
+ if (!address) {
+ console.error("Wallet not connected");
+ return;
+ }
+
+ setIsLoading(true);
+ setTxHash("");
+
+ try {
+ // Safely handle the value conversion to BigInt
+ let valueInWei: bigint;
+
+ try {
+ // Check if the value is already in Wei format
+ if (swapTx.tx.value.includes("e")) {
+ // Handle scientific notation
+ const valueNumber = Number(swapTx.tx.value);
+ valueInWei = BigInt(Math.floor(valueNumber * 1e18));
+ } else if (Number(swapTx.tx.value) < 1) {
+ // Small values need to be converted to Wei
+ valueInWei = BigInt(Math.floor(Number(swapTx.tx.value) * 1e18));
+ } else {
+ // Try to parse the value directly
+ valueInWei = BigInt(swapTx.tx.value);
+ }
+ } catch (e) {
+ console.error("Error converting value to BigInt:", e);
+ // Fallback to 0 if conversion fails
+ valueInWei = BigInt(0);
+ }
+
+ // Make sure tx.to is a valid address
+ const toAddress =
+ swapTx.tx.to && swapTx.tx.to !== "0x"
+ ? (swapTx.tx.to as `0x${string}`)
+ : ("0x0000000000000000000000000000000000000000" as `0x${string}`);
+
+ // Make sure tx.data is a valid hex string
+ const txData =
+ swapTx.tx.data && swapTx.tx.data !== ""
+ ? (swapTx.tx.data as `0x${string}`)
+ : ("0x" as `0x${string}`);
+
+ sendTransaction(
+ {
+ account: address,
+ data: txData,
+ to: toAddress,
+ value: valueInWei,
+ },
+ {
+ onSuccess: async (hash) => {
+ setTxHash(hash);
+ try {
+ await sendSwapStatus(
+ getHttpClient(),
+ chainId,
+ address.toLowerCase(),
+ SWAP_STATUS.INIT,
+ hash,
+ 0
+ );
+ } catch (error) {
+ console.error("Error sending swap status:", error);
+ }
+ },
+ onError: async (error) => {
+ console.error(`Error sending transaction: ${error}`);
+ try {
+ await sendSwapStatus(
+ getHttpClient(),
+ chainId,
+ address.toLowerCase(),
+ SWAP_STATUS.FAIL,
+ "",
+ 0
+ );
+ } catch (statusError) {
+ console.error("Error sending failure status:", statusError);
+ }
+ setIsLoading(false);
+ },
+ onSettled: () => setIsLoading(false),
+ }
+ );
+ } catch (error) {
+ setIsLoading(false);
+ console.error("Swap failed:", error);
+ }
+ },
+ [address, chainId, sendTransaction]
+ );
+
+ const handleCancel = useCallback(
+ async (fromAction: number) => {
+ if (!address) return;
+
+ try {
+ await sendSwapStatus(
+ getHttpClient(),
+ chainId,
+ address.toLowerCase(),
+ SWAP_STATUS.CANCELLED,
+ "",
+ fromAction
+ );
+ } catch (error) {
+ console.error(`Failed to cancel swap: ${error}`);
+ }
+ },
+ [address, chainId]
+ );
+
+ return {
+ handleSwap,
+ handleCancel,
+ isLoading,
+ txHash,
+ };
+};
+
+export default useSwapTransaction;
diff --git a/submodules/moragents_dockers/frontend/components/Agents/Tweet/TweetMessage.module.css b/submodules/frontend/components/Agents/Tweet/CustomMessages/TweetMessage.module.css
old mode 100644
new mode 100755
similarity index 100%
rename from submodules/moragents_dockers/frontend/components/Agents/Tweet/TweetMessage.module.css
rename to submodules/frontend/components/Agents/Tweet/CustomMessages/TweetMessage.module.css
diff --git a/submodules/moragents_dockers/frontend/components/Agents/Tweet/TweetMessage.tsx b/submodules/frontend/components/Agents/Tweet/CustomMessages/TweetMessage.tsx
old mode 100644
new mode 100755
similarity index 96%
rename from submodules/moragents_dockers/frontend/components/Agents/Tweet/TweetMessage.tsx
rename to submodules/frontend/components/Agents/Tweet/CustomMessages/TweetMessage.tsx
index 0cb0a1ad..335ee174
--- a/submodules/moragents_dockers/frontend/components/Agents/Tweet/TweetMessage.tsx
+++ b/submodules/frontend/components/Agents/Tweet/CustomMessages/TweetMessage.tsx
@@ -13,13 +13,8 @@ import {
Text,
Box,
} from "@chakra-ui/react";
-import {
- FaPaperPlane,
- FaCheckCircle,
- FaTimesCircle,
- FaSync,
-} from "react-icons/fa";
-import { postTweet, regenerateTweet } from "@/services/apiHooks";
+import { FaPaperPlane, FaCheckCircle, FaTimesCircle } from "react-icons/fa";
+import { postTweet, regenerateTweet } from "@/components/Agents/Tweet/hooks";
import { getHttpClient } from "@/services/constants";
import styles from "./TweetMessage.module.css";
@@ -130,7 +125,7 @@ export const Tweet: FC
+
+
+ {showForm && (
+ {content}
+ +
+
+ )}
+
+
+
+
+
+
+
+
+
+ You Pay
+
+
+ {srcAmount}
+ {src}
+
+
+
+
+
+ You Receive
+
+
+
+ {dstAmount.toFixed(4)}
+
+ {dst}
+
+
+
+
+
+
+ Slippage
+
+
+
+ setSlippage(Number(e.target.value))}
+ className={styles.slippageInput}
+ />
+
+ %
+ Using 1inch
+
+
+
+
+
+
+
+ {OPTION_GROUPS[selectedGroup as keyof typeof OPTION_GROUPS].map(
+ (agentType) => {
+ const option =
+ prefilledOptionsMap[
+ agentType as keyof typeof prefilledOptionsMap
+ ];
+ if (!option) return null;
+
+ return (
+
+ );
+ };
+
+ return (
+
+
+ );
+ }
+ )}
+
+ {option.icon}
+ {option.title}
+
+
+ {option.examples.map(
+ (example: { text: string }, index: number) => (
+
+ )
+ )}
+
+
+
+ );
+};
+
+export default PrefilledOptions;
diff --git a/submodules/frontend/components/ChatInput/index.module.css b/submodules/frontend/components/ChatInput/index.module.css
new file mode 100755
index 00000000..3fab0e85
--- /dev/null
+++ b/submodules/frontend/components/ChatInput/index.module.css
@@ -0,0 +1,150 @@
+.container {
+ position: relative;
+ width: 100%;
+ background-color: transparent;
+ margin-bottom: 1.5rem;
+}
+
+.flexContainer {
+ margin-top: 0.5rem;
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+ background-color: transparent;
+ width: 100%;
+}
+
+.inputGroup {
+ margin-bottom: 0.2rem;
+ border-radius: 8px;
+ background-color: #333;
+ width: 100%;
+ max-width: 100%;
+}
+
+@media (min-width: 640px) {
+ .inputGroup {
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+
+.fileAddon {
+ background-color: transparent !important;
+ border: none !important;
+ color: #59f886 !important;
+ cursor: pointer;
+ padding: 8px !important;
+ display: flex;
+ align-items: center;
+}
+
+.fileAddon button {
+ width: 32px !important;
+ height: 32px !important;
+ min-width: 32px !important;
+ padding: 0 !important;
+}
+
+.hiddenInput {
+ display: none;
+}
+
+.disabledIcon {
+ color: #6c6c6c !important;
+}
+
+.messageInput {
+ border: none !important;
+ color: white;
+ width: 100%;
+ font-size: 16px !important; /* Ensure this is at least 16px to prevent zoom */
+ margin-top: 0.15rem;
+ -webkit-text-size-adjust: 100%; /* Prevent iOS from adjusting text size */
+ /* Add the following to prevent zoom */
+ touch-action: manipulation;
+}
+@media (min-width: 640px) {
+ .messageInput {
+ font-size: 14px;
+ }
+}
+
+.messageInput:focus {
+ border-color: transparent !important;
+ box-shadow: none !important;
+}
+
+.rightAddon {
+ background-color: transparent !important;
+ border: none !important;
+}
+
+.sendButton {
+ background-color: transparent !important;
+ color: #59f886 !important;
+}
+
+@media (max-width: 768px) {
+ .sendButton {
+ padding: 0.25rem;
+ }
+}
+
+.sendButton:hover {
+ background-color: transparent !important;
+}
+
+/* New styles for file preview */
+.filePreview {
+ margin: 0 auto;
+ padding: 0.5rem;
+ background-color: #333;
+ border-radius: 8px;
+ max-width: 800px;
+ margin-bottom: 0.5rem;
+}
+
+.fileInfo {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.5rem;
+}
+
+.fileIcon {
+ font-size: 1.5rem;
+ margin-right: 0.75rem;
+}
+
+.fileName {
+ font-size: 14px;
+ font-weight: 500;
+ color: white;
+ margin-bottom: 0.25rem;
+ max-width: 250px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.fileType {
+ font-size: 12px;
+ color: #a0a0a0;
+}
+
+.removeFile {
+ color: white;
+ background: transparent !important;
+}
+
+.removeFile:hover {
+ background: rgba(255, 255, 255, 0.1) !important;
+}
+
+.uploadingIndicator {
+ padding: 0.5rem;
+ text-align: center;
+ color: #a0a0a0;
+ font-size: 12px;
+}
diff --git a/submodules/frontend/components/ChatInput/index.tsx b/submodules/frontend/components/ChatInput/index.tsx
new file mode 100755
index 00000000..29521d54
--- /dev/null
+++ b/submodules/frontend/components/ChatInput/index.tsx
@@ -0,0 +1,220 @@
+import React, { FC, useState, useEffect, useRef } from "react";
+import {
+ Textarea,
+ InputGroup,
+ InputLeftAddon,
+ InputRightAddon,
+ IconButton,
+ useMediaQuery,
+} from "@chakra-ui/react";
+import { AttachmentIcon } from "@chakra-ui/icons";
+import { SendIcon } from "../CustomIcon/SendIcon";
+import { Command } from "./Commands";
+import { CommandsPortal } from "./CommandsPortal";
+import styles from "./index.module.css";
+import API_BASE_URL from "../../config";
+
+type ChatInputProps = {
+ onSubmit: (message: string, file: File | null) => Promise
+
+
+ {Object.keys(OPTION_GROUPS).map((group) => (
+
+ ))}
+
+ {renderExamples()}
+
+
+ {agentSupportsFileUploads && (
+
+ setFile(e.target.files?.[0] || null)}
+ disabled={isSubmitting || disabled}
+ />
+
+ )}
+