Spaces:
Sleeping
Sleeping
File size: 4,157 Bytes
2a8dd62 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
document.addEventListener('DOMContentLoaded', () => {
const toolGrid = document.querySelector('.tool-grid');
const toolModal = document.getElementById('tool-modal');
const modalCloseBtn = document.getElementById('modal-close-btn');
const toolInterface = document.getElementById('tool-interface');
// Dummy data for tools (replace with actual data from backend)
const tools = [
{ name: 'Get Price', description: 'Fetches real-time price data for a symbol.', category: 'Market Data' },
{ name: 'Place Order', description: 'Places a trade order in the market.', category: 'Execution' },
{ name: 'Portfolio Risk', description: 'Analyzes the risk of your portfolio.', category: 'Risk Management' },
{ name: 'Run Backtest', description: 'Executes a backtest on a trading strategy.', category: 'Backtesting' },
{ name: 'Analyze Ticker', description: 'Performs comprehensive analysis on a ticker.', category: 'Prompts' },
];
// Render tool cards
tools.forEach(tool => {
const toolCard = document.createElement('div');
toolCard.classList.add('tool-card');
toolCard.innerHTML = `
<h3>${tool.name}</h3>
<p>${tool.description}</p>
<div class="tool-tags">
<span class="tool-tag">${tool.category}</span>
</div>
`;
toolCard.addEventListener('click', () => openToolModal(tool));
toolGrid.appendChild(toolCard);
});
// Open tool modal
function openToolModal(tool) {
toolInterface.innerHTML = `
<h2>${tool.name}</h2>
<p>${tool.description}</p>
<!-- Here you would dynamically create input fields based on the tool's signature -->
<div class="input-field">
<label for="symbol">Symbol:</label>
<input type="text" id="symbol" placeholder="e.g. AAPL">
</div>
<button id="run-tool-btn">Run Tool</button>
<pre id="tool-result"></pre>
`;
toolModal.classList.add('show');
document.getElementById('run-tool-btn').addEventListener('click', async () => {
const symbol = document.getElementById('symbol').value;
const resultElement = document.getElementById('tool-result');
resultElement.textContent = 'Running tool...';
// Example of calling a backend tool (requires window.openai to be available)
// if (window.openai && window.openai.callTool) {
// try {
// const result = await window.openai.callTool(tool.name.replace(/\s+/g, '_').toLowerCase(), { symbol: symbol });
// resultElement.textContent = JSON.stringify(result, null, 2);
// } catch (error) {
// resultElement.textContent = `Error: ${error.message}`;
// }
// } else {
// resultElement.textContent = 'MCP not available. Cannot call backend tools.';
// }
resultElement.textContent = `Simulating tool run for ${tool.name} with symbol: ${symbol}`;
});
}
// Close tool modal
modalCloseBtn.addEventListener('click', () => {
toolModal.classList.remove('show');
});
// Close modal on outside click
window.addEventListener('click', (event) => {
if (event.target === toolModal) {
toolModal.classList.remove('show');
}
});
// Dummy dashboard rendering (replace with actual data)
document.querySelector('.portfolio').innerHTML = '<div class="trading-card"><h3>Portfolio Overview</h3><p>Detailed portfolio data will go here.</p></div>';
document.querySelector('.watchlist').innerHTML = '<div class="trading-card"><h3>Watchlist</h3><p>Your watched symbols will appear here.</p></div>';
document.querySelector('.news').innerHTML = '<div class="trading-card"><h3>Intel Feed</h3><p>Latest market news and sentiment.</p></div>';
document.querySelector('.crypto').innerHTML = '<div class="trading-card"><h3>Crypto Movers</h3><p>Trending cryptocurrency data.</p></div>';
});
|