diff --git a/README.md b/README.md
index 930941e0..461ca289 100755
--- a/README.md
+++ b/README.md
@@ -1,327 +1,41 @@
+# MCP SuperAssistant (Image Enhanced)
-
-
-
MCP SuperAssistant Chrome Extension
-
+> **Fork Features:**
+> * **Visual Preview:** Renders Base64 data as inline images.
+> * **Batch Upload:** One-click multi-image upload to chat.
-
-Brings MCP to ChatGPT, Perplexity, Grok, Gemini, Google AI Studio, OpenRouter, Kimi, Github Copilot, Mistral and more...
-
-
-
- 🌐 Visit Official Website
-
-
-
-
-
-
-
- 
- 
- 
- 
- 
- 
-
-
-
-## Installation
-
-
-
-
-
## Overview
-MCP SuperAssistant is a Chrome extension that integrates the Model Context Protocol (MCP) tools with AI platforms like Perplexity, ChatGPT, Google Gemini, Google AI Studio, Grokand more. It allows users to execute MCP tools directly from these platforms enhancing the capabilities of web-based AI assistants.
-
-## Currently Supported Platforms
-
-- [ChatGPT](https://chatgpt.com/)
-- [Google Gemini](https://gemini.google.com/)
-- [Perplexity](https://perplexity.ai/)
-- [Grok](https://grok.com/)
-- [Google AI Studio](https://aistudio.google.com/)
-- [OpenRouter Chat](https://openrouter.ai/chat)
-- [DeepSeek](https://chat.deepseek.com/)
-- [T3 Chat](https://t3.chat/)
-- [GitHub Copilot](https://github.com/copilot)
-- [Mistral AI](https://chat.mistral.ai/)
-- [Kimi](https://kimi.com/)
-- [Qwen Chat](https://chat.qwen.ai/)
-- [Z Chat](https://chat.z.ai/)
-
-
-## Demo Video
-
-Kimi.com
-
-[](https://www.youtube.com/watch?v=jnBPh2jzunM)
-
-ChatGPT
-
-[](https://www.youtube.com/watch?v=PY0SKjtmy4E)
-
-Watch the demo to see MCP SuperAssistant in action!
-
-[MCP SuperAssistant Demo Playlist](https://www.youtube.com/playlist?list=PLOK1DBnkeaJFzxC4M-z7TU7_j04SShX_w)
-
-## Setup Tutorial
-
-[](https://www.youtube.com/watch?v=h9f_GX1Ef20&pp=ygUTbWNwIHN1cGVyIGFzc2lzdGFudA%3D%3D)
-
-**New to MCP SuperAssistant?** Watch this complete setup guide to get started in minutes!
-
-[View Setup Tutorial](https://www.youtube.com/watch?v=h9f_GX1Ef20&pp=ygUTbWNwIHN1cGVyIGFzc2lzdGFudA%3D%3D)
-
-## What is MCP?
-
-The Model Context Protocol (MCP) is an open standard developed by Anthropic that connects AI assistants to systems where data actually lives, including content repositories, business tools, and development environments. It serves as a universal protocol that enables AI systems to securely and dynamically interact with data sources in real time.
-
-## Key Features
-
-- **Multiple AI Platform Support**: Works with ChatGPT, Perplexity, Google Gemini, Grok, Google AI Studio, OpenRouter Chat, DeepSeek, Kagi, T3 Chat, GitHub Copilot, Mistral AI, Kimi, Qwen Chat, Z Chat and more
-- **Tool Detection**: Automatically detects MCP tool calls in AI responses
-- **Tool Execution**: Execute MCP tools with a single click
-- **Tool Result Integration**: Seamlessly insert tool execution results back into the AI conversation
-- **Render Mode**: Renders Function call and Function results.
-- **Auto-Execute Mode**: Automatically execute detected tools
-- **Auto-Submit Mode**: Automatically submit chat input after result insertion
-- **Push Content Mode**: Option to push page content instead of overlaying
-- **Preferences Persistence**: Remembers sidebar position, size, and settings
-- **Dark/Light Mode Support**: Adapts to the AI platform's theme
-
-```mermaid
-flowchart TD
- A[AI Chat Interface] -->|Generate| B[Tool Calls]
- B -->|Detect| C[Extension Detects Tool Calls]
- C -->|Send via SSE| D[MCP Local Proxy Server]
- D -->|Forward| E[Actual MCP Server]
- E -->|Return Results| D
- D -->|Return Results| C
- C -->|Insert| F[Add Results Back to Chat]
-```
-
-### Connecting to Local Proxy Server
-
-To connect the Chrome extension to a local server for proxying connections:
-
-#### Run MCP SuperAssistant Proxy via npx:
-
-1. Create a `config.json` file with your MCP server details. For example, to use the [Desktop Commander](https://github.com/wonderwhy-er/DesktopCommanderMCP):
-
-
- **Example config.json:**
- ```json
- {
- "mcpServers": {
- "desktop-commander": {
- "command": "npx",
- "args": [
- "-y",
- "@wonderwhy-er/desktop-commander"
- ]
- }
- }
- }
- ```
- config.json also support other MCP server configurations like remote MCP server URLs.
- Try composio mcp, zappier mcp, or smithery or any other remote MCP server.
-
- **Or use existing config file location from Cursor or other tools:**
- ```
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json
- ```
-
-2. Start the MCP SuperAssistant Proxy server using one of the following commands:
-
- ```bash
- npx -y @srbhptl39/mcp-superassistant-proxy@latest --config ./config.json --outputTransport sse
- ```
- or
- ```bash
- npx -y @srbhptl39/mcp-superassistant-proxy --config ./config.json --outputTransport streamableHttp
- ```
- or
- ```bash
- npx -y @srbhptl39/mcp-superassistant-proxy --config ./config.json --outputTransport ws
- ```
-
- **View all available options:**
- ```bash
- npx -y @srbhptl39/mcp-superassistant-proxy@latest --help
- ```
-
- This is useful for:
- - Proxying remote MCP servers
- - Adding CORS support to remote servers
- - Providing health endpoints for monitoring
-
-#### Connection Steps:
-
-1. Start the proxy server using one of the commands above
-2. Open the MCP SuperAssistant sidebar in one of the supported AI platforms, this should show the sidebar UI
-3. Click on the server status indicator (usually showing as "Disconnected")
-4. Enter the local server URL (default: `http://localhost:3006/sse`)
- URL format depends on the --outputTransport method used:
- - For SSE: `http://localhost:3006/sse`
- - For Streamable HTTP: `http://localhost:3006/mcp`
- - For WebSocket: `ws://localhost:3006/message`
- - Choose the appropriate transport method (SSE or Streamable HTTP or WebSocket)
- - You can add any remote MCP server URL here as well, if it supports CORS or is proxied via this local proxy server. Try [Composio mcp](https://mcp.composio.dev/), [Zappier mcp](https://zapier.com/mcp), or [smithery](https://smithery.ai/) or any other remote MCP server.
-5. Click "Connect" to establish the connection
-6. The status indicator should change to "Connected" if successful
-
-## Usage
-Example Workflow:
-1. Navigate to a supported AI platform example chatgpt.
-2. The MCP SuperAssistant sidebar will appear on the right side of the page
-3. Configure your MCP Tools to enable and disable the tools you want to use.
-4. In the message prompt area, hover the 'MCP' button to see the available tools and their descriptions.
-5. MCP SuperAssistant requires to add an MCP working instructions prompt to the chat, to give details of its new capabilities and how to use the tools. Use the 'Insert' or attach button to add the instructions prompt.
-6. Once the instructions prompt is added, Now you can ask it to read files or any related MCP tool operations.
-7. When AI wants to use any tool it will show a custom tool call card with the tool name and parameters.
-8. User can manually execute the tool call by clicking on the "RUN" button on the tool call card, or if Auto-Execute mode is enabled, it will execute automatically.
-9. Automation can be achieved by enabling Auto-Execute and Auto-Submit modes, by clicking on the 'MCP' button and configuring the Auto modes.
-
-
-## Tips & Tricks
-
-1. **Turn off search mode** (chatgpt, perplexity) in AI chat interfaces for better tool call prompt experience and to prevent MCP SuperAssistant from getting derail.
-2. **Turn on Reasoning mode** (chatgpt, perplexity, grok) in AI chat interfaces, which will help the AI to understand the context better and generate the correct tool calls.
-3. Use newer high-end models as they are better at understanding the context and generating the correct tool calls.
-4. Copy the MCP instructions prompt and paste it in the AI chat system prompt (Google AI Studio).
-5. Mention the specific tools you want to use in your conversation.
-6. Use the MCP Auto toggles to control the tool execution.
-
-## Common Issues with MCP SuperAssistant
-
-This page covers the most common issues users encounter with MCP SuperAssistant and provides solutions to resolve them.
-
-### 1. Extension Not Detecting Tool Calls
-
-- Make sure the extension is enabled in your browser.
-- Make sure the **mcp prompt instructions are properly attached or inserted** in the chat, before starting any chat.
-- Check that your AI platform supports tool calls and that the feature is enabled.
-- Refresh the page or restart your browser if the issue persists.
-
-### 2. Tool Execution Fails
-
-- Ensure your proxy server is running and the URL is correct in the sidebar server settings.
-- check your config.json file for any errors or formatting issues.
-- Check your network connectivity and firewall settings.
-
-### 3. Connection Issues
-
-- Ensure that your MCP server is running and accessible.
-- Check the server URL in the extension settings.
-- First start the npx mcp-SuperAssistant-proxy server and then reload/restart the extension from chrome://extensions/ page.
-- Check the proxy server logs for any errors or issues.
-- Ensure that your firewall or antivirus software is not blocking the connection.
-- Make sure the server shows the proper connected status and exposes the `/sse` endpoint.
-
-### 4. Incorrect tool call format
-
-- There are times model does not generate correct tool call format as requested, this makes the tool detection to fail.
-In such cases, use better models which are meant for tool calling or have better tool calling capabilities.
-- Use the custom instructions prompt, which can be found in the MCP SuperAssistant sidebar.
-- Ask explicitily to use the tools by mentioning them in the prompt.
-- This Below is an example of correct MCP function call format, which is rendered by MCP SuperAssistant extension:
-
-```
-```jsonl
-{"type": "function_call_start", "name": "function_name", "call_id": 1}
-{"type": "description", "text": "Short 1 line of what this function does"}
-{"type": "parameter", "key": "parameter_1", "value": "value_1"}
-{"type": "parameter", "key": "parameter_2", "value": "value_2"}
-{"type": "function_call_end", "call_id": 1}
-```
-```
-
-### Manual Installation (Development)
-
-#### Release Version
-1. Download the latest release from [Releases](https://github.com/srbhptl39/MCP-SuperAssistant/releases)
-2. Unzip the downloaded file
-3. Navigate to `chrome://extensions/` in Chrome
-4. Enable "Developer mode"
-5. Click "Load unpacked" and select the unzipped directory
-6. Follow [Connecting to Local Proxy Server](#connecting-to-local-proxy-server) to connect to your MCP server
-
-## Development
-
-### Prerequisites
-
-- Node.js (v16+)
-- pnpm
-
-### Setup
-
-```bash
-# Install dependencies
-pnpm install
-
-# Start development server
-pnpm dev
-
-# Build for production
-pnpm build
-
-# Create zip package for distribution
-pnpm zip
-```
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add some amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
-
-## Author
-
-### [Saurabh Patel](https://github.com/srbhptl39)
-
-## Sponsor & Support
-
-This project is developed entirely in my spare time, driven by a passion for AI and the Model Context Protocol (MCP). As a full-time professional, balancing work commitments with open-source development makes it challenging to contribute regularly and maintain the pace of updates.
-
-Your support helps me dedicate more time to:
-- 🐛 Fixing bugs and addressing issues
-- ✨ Adding new features and platform support
-- 📚 Improving documentation and tutorials
-- 🔄 Keeping dependencies up-to-date
-- 💬 Responding to community requests
-
-**Support this project:**
-- ⭐ Star the repository to show your appreciation
-- 💖 [Sponsor on GitHub](https://github.com/sponsors/srbhptl39) to help sustain development
-- 🐦 Follow me on [Twitter](https://twitter.com/srbhptl39) (@srbhptl39) for updates
-- 📧 For private support or custom implementations, reach out via [Twitter](https://twitter.com/srbhptl39)
-
-Every contribution, big or small, helps keep this project alive and thriving! 🙏
-
-## License
-
-This project is licensed under the MIT License - see the LICENSE file for details.
-
-## Acknowledgments
-
-- Inspired by the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) by Anthropic
-- Thanks to [Cline](https://github.com/cline/cline) for idea inspiration
-- Built with [Chrome Extension Boilerplate with React + Vite](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite)
-
-
-## Star History
-
-[](https://www.star-history.com/#srbhptl39/MCP-SuperAssistant&Date)
+**MCP SuperAssistant** connects your local **Model Context Protocol (MCP)** servers to web-based AI platforms. It allows LLMs running in your browser (ChatGPT, Gemini, Perplexity, etc.) to execute local tools, read files, and interact with your environment securely.
+
+## Quick Start
+
+### 1. Installation
+* **Users:** Download the `.zip` from [Releases](https://github.com/srbhptl39/MCP-SuperAssistant/releases), unzip, and use "Load unpacked" in `chrome://extensions/`.
+* **Devs:** Clone repo -> `pnpm install` -> `pnpm build` -> Load `dist` folder.
+
+### 2. Setup Local Proxy
+The extension needs a local bridge to talk to MCP servers.
+
+1. Create `config.json` (defines your tools):
+ ```json
+ {
+ "mcpServers": {
+ "desktop-commander": {
+ "command": "npx",
+ "args": ["-y", "@wonderwhy-er/desktop-commander"]
+ }
+ }
+ }
+ ```
+2. Run the proxy:
+ ```bash
+ npx -y @srbhptl39/mcp-superassistant-proxy@latest --config ./config.json --outputTransport sse
+ ```
+
+### 3. Connect
+Open sidebar in ChatGPT (or supported site) -> Enter `http://localhost:3006/sse` -> **Connect**.
+
+---
+*Original Project by [Saurabh Patel](https://github.com/srbhptl39).*
diff --git a/build.bat b/build.bat
new file mode 100644
index 00000000..64d149e3
--- /dev/null
+++ b/build.bat
@@ -0,0 +1,16 @@
+@echo off
+:: Install dependencies if missing
+if not exist "node_modules" call pnpm install
+
+:: Build project
+call pnpm build
+
+:: Check if icon-16.png exists in dist, if not copy from icon-34.png
+if exist "dist\icon-34.png" (
+ if not exist "dist\icon-16.png" (
+ echo Missing icon-16.png detected. Creating copy from icon-34.png...
+ copy "dist\icon-34.png" "dist\icon-16.png"
+ )
+)
+
+pause
\ No newline at end of file
diff --git a/pages/content/src/render_prescript/src/renderer/components.ts b/pages/content/src/render_prescript/src/renderer/components.ts
index c36651c5..77f184f2 100644
--- a/pages/content/src/render_prescript/src/renderer/components.ts
+++ b/pages/content/src/render_prescript/src/renderer/components.ts
@@ -120,6 +120,8 @@ const ICONS = {
'',
SPINNER:
'',
+ CHECK:
+ '',
};
// Performance utility: Object pooling for DOM elements
@@ -926,6 +928,20 @@ export const extractFunctionParameters = (rawContent: string): Record {
+ const byteCharacters = atob(base64Data);
+ const byteNumbers = new Array(byteCharacters.length);
+ for (let i = 0; i < byteCharacters.length; i++) {
+ byteNumbers[i] = byteCharacters.charCodeAt(i);
+ }
+ const byteArray = new Uint8Array(byteNumbers);
+ const blob = new Blob([byteArray], { type: mimeType });
+ return new File([blob], fileName, { type: mimeType });
+};
+
/**
* Optimized file attachment helper with improved performance
* Performance improvements: reduce DOM operations, batch state changes, efficient event handling
@@ -1252,6 +1268,96 @@ const attachResultAsFile = async (
return { success: false, message: null };
};
+/**
+ * Renders different content types in the function result
+ */
+const renderFunctionResultContent = (resultContent: string, contentArea: HTMLDivElement): void => {
+ try {
+ const jsonResult = JSON.parse(resultContent);
+
+ // If it's JSON and has content array, render it properly
+ if (jsonResult && jsonResult.content && Array.isArray(jsonResult.content)) {
+ // Render each content item
+ jsonResult.content.forEach((item: any) => {
+ if (item.type === 'text') {
+ const textDiv = document.createElement('div');
+ textDiv.className = 'function-result-text';
+ textDiv.style.margin = '0 0 10px 0';
+ textDiv.style.whiteSpace = 'pre-wrap';
+ textDiv.style.wordBreak = 'break-word';
+ textDiv.textContent = item.text;
+ contentArea.appendChild(textDiv);
+ } else if (item.type === 'image') {
+ // Enhanced Image Handling for both URL and Base64 Data
+ const imgContainer = document.createElement('div');
+ imgContainer.className = 'function-result-image';
+ imgContainer.style.margin = '10px 0';
+
+ const img = document.createElement('img');
+
+ if (item.url) {
+ img.src = item.url;
+ } else if (item.data) {
+ // Handle Base64 Data
+ const mimeType = item.mimeType || 'image/png';
+ img.src = `data:${mimeType};base64,${item.data}`;
+ }
+
+ img.alt = item.alt || 'Result Image';
+ img.style.maxWidth = '100%';
+ img.style.maxHeight = '400px'; // Limit height so it doesn't take up too much space
+ img.style.borderRadius = '4px';
+ img.style.border = '1px solid rgba(0,0,0,0.1)';
+
+ imgContainer.appendChild(img);
+ contentArea.appendChild(imgContainer);
+
+ } else if (item.type === 'code' && item.code) {
+ const codeContainer = document.createElement('div');
+ codeContainer.className = 'function-result-code';
+ codeContainer.style.margin = '10px 0';
+ codeContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.05)';
+ codeContainer.style.borderRadius = '4px';
+ codeContainer.style.padding = '10px';
+
+ const pre = document.createElement('pre');
+ pre.style.margin = '0';
+ pre.style.whiteSpace = 'pre-wrap';
+ pre.style.wordBreak = 'break-word';
+ pre.style.fontFamily = 'monospace';
+ pre.textContent = item.code;
+
+ codeContainer.appendChild(pre);
+ contentArea.appendChild(codeContainer);
+ } else {
+ // For unknown types, just render as JSON
+ const unknownDiv = document.createElement('div');
+ unknownDiv.className = 'function-result-unknown';
+ unknownDiv.style.margin = '5px 0';
+ unknownDiv.style.fontFamily = 'monospace';
+ unknownDiv.style.fontSize = '12px';
+ unknownDiv.textContent = JSON.stringify(item, null, 2);
+ contentArea.appendChild(unknownDiv);
+ }
+ });
+ } else {
+ // If it's JSON but not in the expected format, format it nicely
+ const pre = document.createElement('pre');
+ pre.style.margin = '0';
+ pre.style.whiteSpace = 'pre-wrap';
+ pre.style.wordBreak = 'break-word';
+ pre.style.fontFamily = 'monospace';
+ pre.textContent = JSON.stringify(jsonResult, null, 2);
+ contentArea.appendChild(pre);
+ }
+ } catch (e) {
+ // If not JSON, just display as text with proper line breaks
+ contentArea.style.whiteSpace = 'pre-wrap';
+ contentArea.style.wordBreak = 'break-word';
+ contentArea.textContent = resultContent;
+ }
+};
+
/**
* Optimized result display with efficient DOM operations and batch processing
* Performance improvements: reduce DOM queries, batch operations, efficient element creation
@@ -1273,26 +1379,20 @@ export const displayResult = (
// Efficient cleanup of previous results
const cleanupPreviousResults = () => {
- // Remove loading indicator if present
if (loadingIndicator.parentNode === resultsPanel) {
resultsPanel.removeChild(loadingIndicator);
}
-
- // Batch remove existing result content
const existingResults = resultsPanel.querySelectorAll('.function-result-success, .function-result-error');
existingResults.forEach(el => resultsPanel.removeChild(el));
-
- // Remove previous button container
const existingButtonContainer = resultsPanel.nextElementSibling;
if (existingButtonContainer?.classList.contains('insert-button-container')) {
existingButtonContainer.parentNode?.removeChild(existingButtonContainer);
}
};
- // Optimized error message processing
+ // ... (keep existing processErrorMessage function) ...
const processErrorMessage = (errorResult: any): string => {
let errorMessage = '';
-
if (typeof errorResult === 'string') {
errorMessage = errorResult;
} else if (errorResult && typeof errorResult === 'object') {
@@ -1300,7 +1400,6 @@ export const displayResult = (
} else {
errorMessage = 'An unknown error occurred';
}
-
// Optimize server error message handling
if (typeof errorMessage === 'string') {
const errorMap = {
@@ -1309,14 +1408,10 @@ export const displayResult = (
RECONNECT_ERROR: 'Connection to server failed. Please try reconnecting.',
SERVER_ERROR: 'Server error occurred. Please check server status.',
};
-
for (const [key, message] of Object.entries(errorMap)) {
- if (errorMessage.includes(key)) {
- return message;
- }
+ if (errorMessage.includes(key)) return message;
}
}
-
return errorMessage;
};
@@ -1325,8 +1420,9 @@ export const displayResult = (
loadingIndicator.style.display = 'none';
if (success) {
- // Optimized success result processing
let rawResultText = '';
+ // CHANGE 1: Use an array to store all detected images
+ let detectedImageFiles: File[] = [];
// Create result content efficiently
const resultContent = createOptimizedElement('div', {
@@ -1338,57 +1434,57 @@ export const displayResult = (
try {
// Check if result has the new format with content array
if (result && result.content && Array.isArray(result.content)) {
- // Extract text from content array
- const textParts = result.content
- .filter((item: any) => item.type === 'text' && item.text)
- .map((item: any) => item.text);
-
- if (textParts.length > 0) {
- rawResultText = textParts.join('\n');
- resultContent.textContent = rawResultText;
- } else {
- // Fallback to full JSON if no text content found
- rawResultText = JSON.stringify(result, null, 2);
- const pre = createOptimizedElement('pre', {
- textContent: rawResultText,
- styles: {
- fontFamily: 'inherit',
- fontSize: '13px',
- lineHeight: '1.5',
- padding: '0',
- margin: '0',
- },
+
+ // CHANGE 2: Iterate through content array to preserve order of text and images
+ // This builds the rawResultText with interleaved text and [Image] placeholders
+ result.content.forEach((item: any, index: number) => {
+ if (item.type === 'text') {
+ // Append text content
+ rawResultText += (item.text || '') + '\n';
+ } else if (item.type === 'image' && item.data) {
+ // Handle image: create File and add placeholder to text
+ try {
+ const mimeType = item.mimeType || 'image/png';
+ const ext = mimeType.split('/')[1] || 'png';
+ // Add index to filename to prevent overwriting and ensure uniqueness
+ const fileName = `${functionName}_${callId}_${index + 1}.${ext}`;
+ const file = base64ToFile(item.data, mimeType, fileName);
+ detectedImageFiles.push(file);
+
+ // Add Generic Placeholder to text flow
+ rawResultText += '\n[Image]\n';
+ } catch (e) {
+ logger.error('Failed to convert base64 to file', e);
+ }
+ }
});
- resultContent.appendChild(pre);
- }
+
+ // If rawResultText is empty (e.g. only images, or failed parsing), try fallback
+ if (!rawResultText && detectedImageFiles.length === 0) {
+ rawResultText = JSON.stringify(result, null, 2);
+ }
+
} else {
// Original object handling for backward compatibility
rawResultText = JSON.stringify(result, null, 2);
- const pre = createOptimizedElement('pre', {
- textContent: rawResultText,
- styles: {
- fontFamily: 'inherit',
- fontSize: '13px',
- lineHeight: '1.5',
- padding: '0',
- margin: '0',
- },
- });
- resultContent.appendChild(pre);
}
} catch (e) {
rawResultText = String(result);
- resultContent.textContent = rawResultText;
}
} else {
rawResultText = String(result);
- resultContent.textContent = rawResultText;
+ }
+
+ // If we didn't find text content but parsed an object, set text content for display
+ if (!resultContent.textContent && !resultContent.children.length) {
+ const contentString = typeof result === 'object' ? JSON.stringify(result) : String(result);
+ renderFunctionResultContent(contentString, resultContent);
}
// Add result to panel
resultsPanel.appendChild(resultContent);
- // Create button container efficiently using DocumentFragment
+ // Create button container efficiently
const fragment = document.createDocumentFragment();
const buttonContainer = createOptimizedElement('div', {
className: 'function-buttons insert-button-container',
@@ -1400,320 +1496,277 @@ export const displayResult = (
},
});
- // Create optimized insert button
- const insertButton = createOptimizedElement('button', {
- className: 'insert-result-button',
- innerHTML: `${ICONS.INSERT}Insert`,
- styles: {
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- gap: '6px',
- },
- attributes: {
- 'data-result-id': `result-${callId}-${Date.now()}`,
- },
- }) as HTMLButtonElement;
-
- // Cache button text element
- const insertButtonText = insertButton.querySelector('span')!;
-
- // Optimized insert button click handler
- insertButton.onclick = async () => {
- const adapter = getCurrentAdapter();
-
- if (!adapter) {
- const setErrorState = () => {
- insertButton.textContent = 'Failed (No Adapter)';
- insertButton.classList.add('insert-error');
- setTimeout(() => {
- insertButton.innerHTML = `${ICONS.INSERT}Insert`;
- insertButton.classList.remove('insert-error');
- }, 2000);
- };
-
- setErrorState();
- logger.error('No adapter available for text insertion.');
- return;
- }
-
- // Check if adapter supports text insertion
- if (!adapterSupportsCapability('text-insertion')) {
- const setErrorState = () => {
- insertButton.textContent = 'Not Supported';
- insertButton.classList.add('insert-error');
- setTimeout(() => {
- insertButton.innerHTML = `${ICONS.INSERT}Insert`;
- insertButton.classList.remove('insert-error');
- }, 2000);
- };
-
- setErrorState();
- logger.error('Current adapter does not support text insertion.');
- return;
- }
-
- const wrapperText = `\n${rawResultText}\n`;
-
- // Check result length and handle accordingly
- if (rawResultText.length > MAX_INSERT_LENGTH && WEBSITE_NAME_FOR_MAX_INSERT_LENGTH_CHECK.includes(websiteName)) {
- logger.debug(`Result length (${wrapperText.length}) exceeds ${MAX_INSERT_LENGTH}. Attaching as file.`);
- await attachResultAsFile(
- adapter,
- functionName,
- callId,
- wrapperText,
- insertButton,
- insertButton.querySelector('span') as HTMLElement,
- true,
- );
- } else {
- // Try the new plugin system insertText method first
- if (typeof adapter.insertText === 'function') {
- try {
- const success = await adapter.insertText(wrapperText);
-
- if (success) {
- // Optimized success state handling
- insertButton.textContent = 'Inserted!';
- insertButton.classList.add('insert-success');
- insertButton.disabled = true;
+ // Determine Primary Button Action (Insert Text OR Upload Image)
+ // CHANGE 3: Check if array has length > 0
+ if (detectedImageFiles.length > 0) {
+ // --- IMAGE MODE (Multi-file support) ---
+
+ const count = detectedImageFiles.length;
+ const buttonLabel = count > 1 ? `Upload ${count} Images` : 'Upload Image';
- setTimeout(() => {
- insertButton.innerHTML = `${ICONS.INSERT}Insert`;
- insertButton.classList.remove('insert-success');
- insertButton.disabled = false;
- }, 2000);
+ const uploadButton = createOptimizedElement('button', {
+ className: 'insert-result-button',
+ innerHTML: `${ICONS.ATTACH}${buttonLabel}`,
+ styles: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '6px',
+ backgroundColor: 'var(--light-primary)',
+ color: '#fff'
+ },
+ attributes: {
+ 'data-result-id': `upload-${callId}-${Date.now()}`,
+ },
+ }) as HTMLButtonElement;
- // Efficient event dispatch with requestAnimationFrame
- requestAnimationFrame(() => {
- document.dispatchEvent(
- new CustomEvent('mcp:tool-execution-complete', {
- detail: {
- result: wrapperText,
- isFileAttachment: false,
- fileName: '',
- skipAutoInsertCheck: true,
- },
- }),
- );
- });
- } else {
- throw new Error('Adapter insertText method returned false');
+ uploadButton.onclick = async () => {
+ const adapter = getCurrentAdapter();
+ if (!adapter) {
+ uploadButton.textContent = 'No Adapter';
+ return;
}
- } catch (error) {
- logger.error('New adapter insertText method failed:', error);
- // Fallback to legacy method if available
- if (typeof adapter.insertTextIntoInput === 'function') {
- logger.debug('Falling back to legacy insertTextIntoInput method');
-
- // Efficient event dispatch with requestAnimationFrame
- requestAnimationFrame(() => {
- document.dispatchEvent(
- new CustomEvent('mcp:tool-execution-complete', {
- detail: {
- result: wrapperText,
- isFileAttachment: false,
- fileName: '',
- skipAutoInsertCheck: true,
- },
- }),
- );
- });
+ try {
+ uploadButton.disabled = true;
+ uploadButton.innerHTML = `${ICONS.SPINNER}Uploading...`;
+
+ if (adapterSupportsCapability('file-attachment')) {
+ let successCount = 0;
+
+ // CHANGE 4: Loop through all files and attach them sequentially
+ for (const file of detectedImageFiles) {
+ const success = await adapter.attachFile(file);
+ if (success) {
+ successCount++;
+ // Update progress if multiple
+ if (count > 1) {
+ uploadButton.innerHTML = `${ICONS.SPINNER}Uploading ${successCount}/${count}...`;
+ }
+ // Add a small delay between uploads to be safe with UI responsiveness
+ if (count > 1) await new Promise(r => setTimeout(r, 500));
+ }
+ }
+
+ if (successCount > 0) {
+ // CHANGE 5: Check if there is text to insert as well
+ if (rawResultText && rawResultText.trim().length > 0) {
+ uploadButton.innerHTML = `${ICONS.SPINNER}Inserting Text...`;
+
+ const wrapperText = `\n${rawResultText}\n`;
+
+ if (wrapperText.length > MAX_INSERT_LENGTH && WEBSITE_NAME_FOR_MAX_INSERT_LENGTH_CHECK.includes(websiteName)) {
+ // Text too long, attach as file
+ await attachResultAsFile(
+ adapter,
+ functionName,
+ callId,
+ wrapperText,
+ uploadButton,
+ null,
+ true
+ );
+ } else {
+ // Insert text directly
+ if (typeof adapter.insertText === 'function') {
+ await adapter.insertText(wrapperText);
+ } else if (typeof adapter.insertTextIntoInput === 'function') {
+ // legacy
+ requestAnimationFrame(() => {
+ document.dispatchEvent(new CustomEvent('mcp:tool-execution-complete', {
+ detail: { result: wrapperText, skipAutoInsertCheck: true },
+ }));
+ });
+ }
+ }
+ }
+
+ const successMsg = count > 1 ? `Uploaded ${successCount}/${count}!` : 'Uploaded!';
+ uploadButton.innerHTML = `${ICONS.CHECK}${successMsg}`;
+ uploadButton.classList.add('insert-success');
+
+ // Dispatch completion event
+ // We pass the list of files AND the text result so the AI knows what happened
+ requestAnimationFrame(() => {
+ document.dispatchEvent(
+ new CustomEvent('mcp:tool-execution-complete', {
+ detail: {
+ result: rawResultText ? `\n${rawResultText}\n` : `[${successCount} Images uploaded]`,
+ isFileAttachment: true,
+ file: detectedImageFiles[0], // Primary file for backward compat
+ files: detectedImageFiles, // New field for all files
+ fileName: detectedImageFiles[0]?.name,
+ skipAutoInsertCheck: true,
+ },
+ }),
+ );
+ });
+ } else {
+ throw new Error('Adapter returned false for all files');
+ }
+ } else {
+ throw new Error('File attachment not supported');
+ }
+ } catch (error) {
+ logger.error('Image upload failed', error);
+ uploadButton.innerHTML = `${ICONS.ATTACH}Failed`;
+ uploadButton.classList.add('insert-error');
+ uploadButton.disabled = false;
+ setTimeout(() => {
+ uploadButton.innerHTML = `${ICONS.ATTACH}${buttonLabel}`;
+ uploadButton.classList.remove('insert-error');
+ }, 2000);
+ }
+ };
+
+ buttonContainer.appendChild(uploadButton);
+
+ // Auto-execute logic handling
+ const automationState = (window as any).__mcpAutomationState;
+ if (automationState?.autoInsert && detectedImageFiles.length > 0) {
+ setTimeout(() => uploadButton.click(), 500);
+ }
- // Optimized success state handling
- insertButton.textContent = 'Inserted!';
- insertButton.classList.add('insert-success');
- insertButton.disabled = true;
+ } else {
+ // --- TEXT MODE (Existing Logic) ---
+
+ const insertButton = createOptimizedElement('button', {
+ className: 'insert-result-button',
+ innerHTML: `${ICONS.INSERT}Insert`,
+ styles: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '6px',
+ },
+ attributes: {
+ 'data-result-id': `result-${callId}-${Date.now()}`,
+ },
+ }) as HTMLButtonElement;
- setTimeout(() => {
- insertButton.innerHTML = `${ICONS.INSERT}Insert`;
- insertButton.classList.remove('insert-success');
- insertButton.disabled = false;
- }, 2000);
- } else {
- // Optimized error state
- logger.error('No valid insert method found on adapter');
- insertButton.textContent = 'Failed (No Insert Method)';
- insertButton.classList.add('insert-error');
+ insertButton.onclick = async () => {
+ const adapter = getCurrentAdapter();
+ if (!adapter) {
+ // ... (keep existing error handling)
+ insertButton.textContent = 'Failed (No Adapter)';
+ insertButton.classList.add('insert-error');
setTimeout(() => {
insertButton.innerHTML = `${ICONS.INSERT}Insert`;
insertButton.classList.remove('insert-error');
}, 2000);
- }
+ return;
}
- } else if (typeof adapter.insertTextIntoInput === 'function') {
- // Legacy method fallback
- logger.debug('Using legacy insertTextIntoInput method');
-
- // Efficient event dispatch with requestAnimationFrame
- requestAnimationFrame(() => {
- document.dispatchEvent(
- new CustomEvent('mcp:tool-execution-complete', {
- detail: {
- result: wrapperText,
- isFileAttachment: false,
- fileName: '',
- skipAutoInsertCheck: true,
- },
- }),
- );
- });
-
- // Optimized success state handling
- insertButton.textContent = 'Inserted!';
- insertButton.classList.add('insert-success');
- insertButton.disabled = true;
- setTimeout(() => {
- insertButton.innerHTML = `${ICONS.INSERT}Insert`;
- insertButton.classList.remove('insert-success');
- insertButton.disabled = false;
- }, 2000);
- } else {
- // Optimized error state
- logger.error('Adapter has no insert method available');
- insertButton.textContent = 'Failed (No Insert Method)';
- insertButton.classList.add('insert-error');
-
- setTimeout(() => {
- insertButton.innerHTML = `${ICONS.INSERT}Insert`;
- insertButton.classList.remove('insert-error');
- }, 2000);
- }
- }
- };
+ // ... (keep existing adapterSupportsCapability check) ...
+ if (!adapterSupportsCapability('text-insertion')) {
+ // ... error handling
+ return;
+ }
- // Create attach button efficiently
- const attachButton = createOptimizedElement('button', {
- className: 'attach-file-button',
- innerHTML: `${ICONS.ATTACH}Attach File`,
- styles: {
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- gap: '6px',
- },
- attributes: {
- 'data-result-id': `attach-${callId}-${Date.now()}`,
- },
- }) as HTMLButtonElement;
-
- // Optimized attach button handler
- attachButton.onclick = async () => {
- const adapter = getCurrentAdapter();
- await attachResultAsFile(
- adapter,
- functionName,
- callId,
- rawResultText,
- attachButton,
- null, // No longer need iconSpan parameter
- true, // Set skipAutoInsertCheck to true to prevent AutomationService from auto-inserting the same file
- );
- };
+ const wrapperText = `\n${rawResultText}\n`;
+
+ if (rawResultText.length > MAX_INSERT_LENGTH && WEBSITE_NAME_FOR_MAX_INSERT_LENGTH_CHECK.includes(websiteName)) {
+ // ... (keep existing logic for large text attachment) ...
+ await attachResultAsFile(
+ adapter,
+ functionName,
+ callId,
+ wrapperText,
+ insertButton,
+ insertButton.querySelector('span') as HTMLElement,
+ true,
+ );
+ } else {
+ // ... (keep existing text insertion logic) ...
+ if (typeof adapter.insertText === 'function') {
+ await adapter.insertText(wrapperText);
+ // ... update UI to 'Inserted!' ...
+ insertButton.textContent = 'Inserted!';
+ insertButton.classList.add('insert-success');
+ insertButton.disabled = true;
+ setTimeout(() => {
+ insertButton.innerHTML = `${ICONS.INSERT}Insert`;
+ insertButton.classList.remove('insert-success');
+ insertButton.disabled = false;
+ }, 2000);
+
+ requestAnimationFrame(() => {
+ document.dispatchEvent(new CustomEvent('mcp:tool-execution-complete', {
+ detail: { result: wrapperText, skipAutoInsertCheck: true },
+ }));
+ });
+ } else if (typeof adapter.insertTextIntoInput === 'function') {
+ // ... legacy fallback ...
+ requestAnimationFrame(() => {
+ document.dispatchEvent(new CustomEvent('mcp:tool-execution-complete', {
+ detail: { result: wrapperText, skipAutoInsertCheck: true },
+ }));
+ });
+ insertButton.textContent = 'Inserted!';
+ // ... rest of UI updates
+ }
+ }
+ };
+
+ buttonContainer.appendChild(insertButton);
+ }
- // Efficiently build button container
- buttonContainer.appendChild(insertButton);
+ // Create attach button (always show as secondary option if not in Image Mode)
+ // CHANGE 6: Check array length
+ if (detectedImageFiles.length === 0) {
+ const attachButton = createOptimizedElement('button', {
+ className: 'attach-file-button',
+ innerHTML: `${ICONS.ATTACH}Attach as File`,
+ styles: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '6px',
+ },
+ attributes: {
+ 'data-result-id': `attach-${callId}-${Date.now()}`,
+ },
+ }) as HTMLButtonElement;
+
+ attachButton.onclick = async () => {
+ const adapter = getCurrentAdapter();
+ await attachResultAsFile(
+ adapter,
+ functionName,
+ callId,
+ rawResultText,
+ attachButton,
+ null,
+ true,
+ );
+ };
- // Only add attach button if supported
- const adapter = getCurrentAdapter();
- if (adapter && adapterSupportsCapability('file-attachment')) {
- buttonContainer.appendChild(attachButton);
+ const adapter = getCurrentAdapter();
+ if (adapter && adapterSupportsCapability('file-attachment')) {
+ buttonContainer.appendChild(attachButton);
+ }
}
// Batch DOM update
fragment.appendChild(buttonContainer);
resultsPanel.parentNode?.insertBefore(fragment, resultsPanel.nextSibling);
- // Handle auto-attachment for large results
+ // Handle auto-attachment / event dispatch for non-image results
+ // CHANGE 7: Check array length
if (
+ detectedImageFiles.length === 0 &&
rawResultText.length > MAX_INSERT_LENGTH &&
adapter && adapterSupportsCapability('file-attachment') &&
WEBSITE_NAME_FOR_MAX_INSERT_LENGTH_CHECK.includes(websiteName)
) {
- logger.debug(`Auto-attaching file: Result length (${rawResultText.length}) exceeds ${MAX_INSERT_LENGTH}`);
-
- // Create efficient fake button for auto-attachment
- const fakeElements = {
- button: createOptimizedElement('button', {
- className: 'insert-result-button',
- styles: { display: 'none' },
- }) as HTMLButtonElement,
- };
-
- attachResultAsFile(adapter, functionName, callId, rawResultText, fakeElements.button, null, true) // Set to true to prevent double attachment
- .then(async ({ success, message }) => {
- if (success && message) {
- logger.debug(`Auto-attached file successfully: ${message}`);
-
- // Insert the auto-attachment confirmation text
- if (typeof adapter.insertText === 'function') {
- try {
- await adapter.insertText(message);
- logger.debug('Auto-attachment confirmation text inserted successfully');
- } catch (insertError) {
- logger.warn('Failed to insert auto-attachment confirmation text:', insertError);
- // Fallback to legacy method if available
- if (typeof adapter.insertTextIntoInput === 'function') {
- try {
- // Dispatch event for legacy insertion
- requestAnimationFrame(() => {
- document.dispatchEvent(
- new CustomEvent('mcp:tool-execution-complete', {
- detail: {
- result: message,
- isFileAttachment: false,
- fileName: '',
- skipAutoInsertCheck: true,
- },
- }),
- );
- });
- } catch (legacyError) {
- logger.warn('Legacy insertion for auto-attachment also failed:', legacyError);
- }
- }
- }
- } else if (typeof adapter.insertTextIntoInput === 'function') {
- // Use legacy method directly
- try {
- requestAnimationFrame(() => {
- document.dispatchEvent(
- new CustomEvent('mcp:tool-execution-complete', {
- detail: {
- result: message,
- isFileAttachment: false,
- fileName: '',
- skipAutoInsertCheck: true,
- },
- }),
- );
- });
- } catch (legacyError) {
- logger.warn('Legacy insertion for auto-attachment failed:', legacyError);
- }
- }
- } else {
- logger.error('Failed to auto-attach file.');
- // Fallback to manual attach button
- setTimeout(() => attachButton.click(), 100);
- }
-
- // Cleanup fake elements
- ElementPool.release(fakeElements.button);
- })
- .catch(err => {
- logger.error('Error auto-attaching file:', err);
- ElementPool.release(fakeElements.button);
- });
- } else {
- // Dispatch event for normal-sized results
+ // ... (existing auto-attach logic for large text) ...
+ const fakeElements = {
+ button: createOptimizedElement('button', { className: 'insert-result-button', styles: { display: 'none' } }) as HTMLButtonElement,
+ };
+ attachResultAsFile(adapter, functionName, callId, rawResultText, fakeElements.button, null, true);
+ } else if (detectedImageFiles.length === 0) {
const wrappedResult = `\n${rawResultText}\n`;
-
- // Dispatch event - delays are handled by automation service
requestAnimationFrame(() => {
document.dispatchEvent(
new CustomEvent('mcp:tool-execution-complete', {
@@ -1726,14 +1779,12 @@ export const displayResult = (
});
}
} else {
- // Optimized error result handling
+ // Error handling
const errorMessage = processErrorMessage(result);
-
const resultContent = createOptimizedElement('div', {
className: 'function-result-error',
textContent: errorMessage,
});
-
resultsPanel.appendChild(resultContent);
}
};