From 47d7b8b364685af5fe79277957d49b96ded4645e Mon Sep 17 00:00:00 2001 From: mindesbunister Date: Thu, 17 Jul 2025 15:29:52 +0200 Subject: [PATCH] feat: Add interactive Trade Follow-up Assistant with ChatGPT integration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Interactive chat interface to ask questions about active trades - Automatic position detection and context-aware responses - Fresh screenshot capture with updated market analysis - Smart conversation flow with trade-specific insights - Quick action buttons for common trade management questions - TradeFollowUpPanel.tsx: Full-featured chat interface with position tracking - /api/trade-followup: GPT-4o mini integration with screenshot analysis - Enhanced AIAnalysisPanel with Follow-up button integration - 'Should I exit now?' - Real-time exit recommendations - 'Update my stop loss' - SL adjustment guidance based on current conditions - 'Move to break even' - Risk-free position management - 'Current market analysis' - Fresh chart analysis with updated screenshots - 'Risk assessment' - Position risk evaluation - 'Take profit strategy' - TP optimization recommendations - Enter trade based on AI analysis ā†’ Use Follow-up for ongoing management - Ask specific questions: 'Is this still a valid setup?' - Get updated analysis: 'What do the charts look like now?' - Risk management: 'Should I move my stop loss?' - Exit timing: 'Is this a good time to take profits?' The assistant provides context-aware guidance by: Tracking your current position details (entry, size, P&L) Capturing fresh screenshots when needed for updated analysis Combining position context with current market conditions Providing specific price levels and actionable advice Maintaining conversation history for continuity Perfect for traders who want ongoing AI guidance throughout their trades! --- app/api/trade-followup/route.js | 180 ++++++++++++++++ components/AIAnalysisPanel.tsx | 20 ++ components/ScreenshotGallery.tsx | 208 ++++++++++++------ components/TradeFollowUpPanel.tsx | 346 ++++++++++++++++++++++++++++++ 4 files changed, 685 insertions(+), 69 deletions(-) create mode 100644 app/api/trade-followup/route.js create mode 100644 components/TradeFollowUpPanel.tsx diff --git a/app/api/trade-followup/route.js b/app/api/trade-followup/route.js new file mode 100644 index 0000000..7d3a6e9 --- /dev/null +++ b/app/api/trade-followup/route.js @@ -0,0 +1,180 @@ +import { NextResponse } from 'next/server' +import OpenAI from 'openai' +import fs from 'fs' +import path from 'path' + +const openai = new OpenAI({ + apiKey: process.env.OPENAI_API_KEY +}) + +// Helper function to convert image file to base64 +function imageToBase64(imagePath) { + try { + const fullPath = path.join(process.cwd(), 'screenshots', imagePath) + if (fs.existsSync(fullPath)) { + const imageBuffer = fs.readFileSync(fullPath) + return imageBuffer.toString('base64') + } + return null + } catch (error) { + console.error('Error converting image to base64:', error) + return null + } +} + +export async function POST(request) { + try { + const { message, position, screenshots, chatHistory } = await request.json() + + if (!message || !position) { + return NextResponse.json({ + success: false, + error: 'Message and position are required' + }, { status: 400 }) + } + + // Build context about the current position + const positionContext = ` +CURRENT POSITION DETAILS: +- Symbol: ${position.symbol} +- Side: ${position.side} +- Entry Price: $${position.entryPrice} +- Current Price: $${position.currentPrice || 'Unknown'} +- Position Size: ${position.size} +- Current P&L: ${position.pnl > 0 ? '+' : ''}$${position.pnl?.toFixed(2) || 'Unknown'} +- Stop Loss: ${position.stopLoss ? `$${position.stopLoss}` : 'Not set'} +- Take Profit: ${position.takeProfit ? `$${position.takeProfit}` : 'Not set'} +- Entry Time: ${position.entryTime} +- Entry Analysis: ${position.entryAnalysis || 'Not available'} +` + + // Build chat history context + const chatContext = chatHistory?.length > 0 + ? `\n\nRECENT CONVERSATION:\n${chatHistory.map((msg) => + `${msg.type === 'user' ? 'TRADER' : 'ASSISTANT'}: ${msg.content}` + ).join('\n')}` + : '' + + // Analyze screenshots if provided + let screenshotAnalysis = '' + if (screenshots && screenshots.length > 0) { + console.log('šŸ“ø Processing screenshots for analysis:', screenshots.length) + + const screenshotMessages = [] + + for (const screenshot of screenshots) { + // Extract filename from screenshot path/URL + const filename = screenshot.split('/').pop() || screenshot + console.log('šŸ” Processing screenshot:', filename) + + // Convert to base64 + const base64Image = imageToBase64(filename) + if (base64Image) { + screenshotMessages.push({ + type: "image_url", + image_url: { + url: `data:image/png;base64,${base64Image}`, + detail: "high" + } + }) + } else { + console.warn('āš ļø Failed to convert screenshot to base64:', filename) + } + } + + if (screenshotMessages.length > 0) { + console.log('šŸ¤– Sending screenshots to OpenAI for analysis...') + const analysisResponse = await openai.chat.completions.create({ + model: "gpt-4o-mini", + messages: [ + { + role: "system", + content: `You are an expert trading analyst providing real-time trade management advice. + +CURRENT POSITION: ${positionContext} + +Analyze the provided chart screenshots and provide specific guidance on: +1. Current market structure and price action +2. Whether to hold, exit, or adjust the position +3. Stop loss and take profit recommendations +4. Risk assessment based on current conditions +5. Key levels to watch + +Be specific with price levels and actionable advice. Focus on PRACTICAL trade management.` + }, + { + role: "user", + content: [ + { + type: "text", + text: `Analyze these current chart screenshots for my ${position.side} position in ${position.symbol}. What should I do now?` + }, + ...screenshotMessages + ] + } + ], + max_tokens: 1000, + temperature: 0.1 + }) + + screenshotAnalysis = analysisResponse.choices[0]?.message?.content || '' + console.log('āœ… Screenshot analysis completed') + } + } + + // Generate conversational response + const systemPrompt = `You are an expert trading coach helping a trader manage their active position. You have access to: + +${positionContext} +${chatContext} + +${screenshotAnalysis ? `\nLATEST CHART ANALYSIS:\n${screenshotAnalysis}` : ''} + +GUIDELINES: +- Be conversational and supportive +- Give specific, actionable advice +- Use exact price levels when possible +- Consider risk management principles +- Be honest about market uncertainty +- Use emojis appropriately +- Format important information clearly + +The trader is asking: "${message}" + +Provide helpful, specific guidance for their current position.` + + const response = await openai.chat.completions.create({ + model: "gpt-4o-mini", + messages: [ + { + role: "system", + content: systemPrompt + }, + { + role: "user", + content: message + } + ], + max_tokens: 800, + temperature: 0.3 + }) + + const assistantResponse = response.choices[0]?.message?.content + + return NextResponse.json({ + success: true, + response: assistantResponse, + analysis: screenshotAnalysis ? { + timestamp: new Date().toISOString(), + content: screenshotAnalysis + } : null + }) + + } catch (error) { + console.error('Trade follow-up error:', error) + return NextResponse.json({ + success: false, + error: 'Failed to process trade follow-up request' + }, { status: 500 }) + } +} diff --git a/components/AIAnalysisPanel.tsx b/components/AIAnalysisPanel.tsx index ff1f22c..50f379e 100644 --- a/components/AIAnalysisPanel.tsx +++ b/components/AIAnalysisPanel.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react' import TradeModal from './TradeModal' import ScreenshotGallery from './ScreenshotGallery' +import TradeFollowUpPanel from './TradeFollowUpPanel' const layouts = (process.env.NEXT_PUBLIC_TRADINGVIEW_LAYOUTS || 'ai,Diy module').split(',').map(l => l.trim()) @@ -88,6 +89,7 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP const analysisInProgress = useRef(false) const [tradeModalOpen, setTradeModalOpen] = useState(false) const [tradeModalData, setTradeModalData] = useState(null) + const [followUpPanelOpen, setFollowUpPanelOpen] = useState(false) // Helper function to safely render any value const safeRender = (value: any): string => { @@ -807,6 +809,17 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP )} + + {/* Trade Follow-up Button */} + {/* Results Section */} @@ -1541,6 +1554,13 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP tradeData={tradeModalData} onExecute={executeTrade} /> + + {/* Trade Follow-up Panel */} + {followUpPanelOpen && ( + setFollowUpPanelOpen(false)} + /> + )} ) } diff --git a/components/ScreenshotGallery.tsx b/components/ScreenshotGallery.tsx index b85cc23..d47f9a0 100644 --- a/components/ScreenshotGallery.tsx +++ b/components/ScreenshotGallery.tsx @@ -157,84 +157,154 @@ export default function ScreenshotGallery({ šŸ“ø Chart Screenshots - {sortedData.length === 2 && ( - - Side-by-Side View - - )}
- {sortedData.length} captured ā€¢ Click to enlarge + {screenshots.length} captured ā€¢ Click to enlarge
-
- {sortedData.map((item, displayIndex) => { - const imageUrl = formatScreenshotUrl(item.screenshot) - - return ( -
onImageClick(imageUrl)} - > - {/* Preview Image */} -
- {`${symbol} { - const target = e.target as HTMLImageElement - target.style.display = 'none' - const fallback = target.nextElementSibling as HTMLElement - if (fallback) fallback.classList.remove('hidden') - }} - /> -
-
-
šŸ“Š
-
Chart Preview
-
{item.filename}
-
-
+
+ {/* AI Layout Screenshots */} + {groupedData['ai'] && groupedData['ai'].length > 0 && ( +
+
+ šŸ¤– + AI Layout +
+
+ {groupedData['ai'].sort((a: any, b: any) => a.sortOrder - b.sortOrder).map((item: any, displayIndex: number) => { + const imageUrl = formatScreenshotUrl(item.screenshot) - {/* Overlay */} -
-
-
- šŸ” + return ( +
onImageClick(imageUrl)} + > + {/* Preview Image */} +
+ {`${symbol} { + const target = e.target as HTMLImageElement + target.style.display = 'none' + const fallback = target.nextElementSibling as HTMLElement + if (fallback) fallback.classList.remove('hidden') + }} + /> +
+
+
šŸ“Š
+
Chart Preview
+
{item.filename}
+
+
+ + {/* Overlay */} +
+
+
+ šŸ” +
+
+
+
+ + {/* Image Info */} +
+
+
+
{symbol}
+
{item.displayLayout}
+
{item.displayTimeframe} Timeframe
+
+
+ Click to view +
+
-
-
- - {/* Image Info */} -
-
-
-
{symbol}
-
{item.displayLayout}
-
{item.displayTimeframe} Timeframe
-
-
- Click to view -
-
-
+ ) + })}
- ) - })} +
+ )} + + {/* DIY Layout Screenshots */} + {groupedData['Diy module'] && groupedData['Diy module'].length > 0 && ( +
+
+ šŸ”§ + DIY Module +
+
+ {groupedData['Diy module'].sort((a: any, b: any) => a.sortOrder - b.sortOrder).map((item: any, displayIndex: number) => { + const imageUrl = formatScreenshotUrl(item.screenshot) + + return ( +
onImageClick(imageUrl)} + > + {/* Preview Image */} +
+ {`${symbol} { + const target = e.target as HTMLImageElement + target.style.display = 'none' + const fallback = target.nextElementSibling as HTMLElement + if (fallback) fallback.classList.remove('hidden') + }} + /> +
+
+
šŸ“Š
+
Chart Preview
+
{item.filename}
+
+
+ + {/* Overlay */} +
+
+
+ šŸ” +
+
+
+
+ + {/* Image Info */} +
+
+
+
{symbol}
+
{item.displayLayout}
+
{item.displayTimeframe} Timeframe
+
+
+ Click to view +
+
+
+
+ ) + })} +
+
+ )}
diff --git a/components/TradeFollowUpPanel.tsx b/components/TradeFollowUpPanel.tsx new file mode 100644 index 0000000..efbbb08 --- /dev/null +++ b/components/TradeFollowUpPanel.tsx @@ -0,0 +1,346 @@ +"use client" +import React, { useState, useRef, useEffect } from 'react' + +interface TradePosition { + id: string + symbol: string + side: 'LONG' | 'SHORT' + entryPrice: number + currentPrice: number + size: number + pnl: number + stopLoss?: number + takeProfit?: number + entryTime: string + entryAnalysis?: string +} + +interface ChatMessage { + id: string + type: 'user' | 'assistant' | 'system' + content: string + timestamp: string + analysis?: any + screenshots?: string[] +} + +interface TradeFollowUpPanelProps { + onClose: () => void +} + +export default function TradeFollowUpPanel({ onClose }: TradeFollowUpPanelProps) { + const [activePosition, setActivePosition] = useState(null) + const [chatMessages, setChatMessages] = useState([]) + const [currentMessage, setCurrentMessage] = useState('') + const [isLoading, setIsLoading] = useState(false) + const [isAnalyzing, setIsAnalyzing] = useState(false) + const chatEndRef = useRef(null) + + // Auto-scroll to bottom of chat + useEffect(() => { + chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }) + }, [chatMessages]) + + // Load active positions on mount + useEffect(() => { + loadActivePositions() + }, []) + + const loadActivePositions = async () => { + try { + const response = await fetch('/api/trading/positions') + const data = await response.json() + + if (data.success && data.positions?.length > 0) { + // For now, take the first active position + // TODO: Add position selector if multiple positions + setActivePosition(data.positions[0]) + + // Add welcome message + setChatMessages([{ + id: Date.now().toString(), + type: 'system', + content: `šŸŽÆ **Trade Follow-up Assistant**\n\nI'm here to help you manage your active ${data.positions[0].symbol} ${data.positions[0].side} position.\n\n**Current Position:**\nā€¢ Entry: $${data.positions[0].entryPrice}\nā€¢ Size: ${data.positions[0].size}\nā€¢ Current P&L: ${data.positions[0].pnl > 0 ? '+' : ''}$${data.positions[0].pnl.toFixed(2)}\n\nAsk me anything about your trade!`, + timestamp: new Date().toISOString() + }]) + } else { + setChatMessages([{ + id: Date.now().toString(), + type: 'system', + content: 'āš ļø **No Active Positions Found**\n\nI don\'t see any active positions to analyze. Please enter a trade first, then come back for follow-up analysis.', + timestamp: new Date().toISOString() + }]) + } + } catch (error) { + console.error('Error loading positions:', error) + setChatMessages([{ + id: Date.now().toString(), + type: 'system', + content: 'āŒ **Error Loading Positions**\n\nCouldn\'t load your active positions. Please try again.', + timestamp: new Date().toISOString() + }]) + } + } + + const handleSendMessage = async () => { + if (!currentMessage.trim() || isLoading) return + + const userMessage: ChatMessage = { + id: Date.now().toString(), + type: 'user', + content: currentMessage, + timestamp: new Date().toISOString() + } + + setChatMessages(prev => [...prev, userMessage]) + setCurrentMessage('') + setIsLoading(true) + + try { + // Check if user is asking for updated analysis + const needsScreenshot = currentMessage.toLowerCase().includes('analysis') || + currentMessage.toLowerCase().includes('update') || + currentMessage.toLowerCase().includes('current') || + currentMessage.toLowerCase().includes('now') + + let screenshots: string[] = [] + + if (needsScreenshot && activePosition) { + setIsAnalyzing(true) + + // Add thinking message + const thinkingMessage: ChatMessage = { + id: (Date.now() + 1).toString(), + type: 'assistant', + content: 'šŸ”„ **Getting Updated Analysis...**\n\nCapturing fresh screenshots and analyzing current market conditions for your position...', + timestamp: new Date().toISOString() + } + setChatMessages(prev => [...prev, thinkingMessage]) + + // Get fresh screenshots + const screenshotResponse = await fetch('/api/enhanced-screenshot', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + symbol: activePosition.symbol, + timeframe: '240', // 4h default for trade follow-up + layouts: ['ai', 'diy'], + analyze: false // We'll analyze separately with trade context + }) + }) + + const screenshotData = await screenshotResponse.json() + if (screenshotData.success && screenshotData.screenshots) { + screenshots = screenshotData.screenshots + } + + setIsAnalyzing(false) + } + + // Send to trade follow-up API + const response = await fetch('/api/trade-followup', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + message: currentMessage, + position: activePosition, + screenshots: screenshots, + chatHistory: chatMessages.slice(-5) // Last 5 messages for context + }) + }) + + const data = await response.json() + + if (data.success) { + const assistantMessage: ChatMessage = { + id: (Date.now() + 2).toString(), + type: 'assistant', + content: data.response, + timestamp: new Date().toISOString(), + analysis: data.analysis, + screenshots: screenshots + } + + setChatMessages(prev => [...prev.filter(m => !m.content.includes('Getting Updated Analysis')), assistantMessage]) + } else { + throw new Error(data.error || 'Failed to get response') + } + } catch (error) { + console.error('Error sending message:', error) + const errorMessage: ChatMessage = { + id: (Date.now() + 3).toString(), + type: 'assistant', + content: 'āŒ **Error**\n\nSorry, I encountered an error. Please try again.', + timestamp: new Date().toISOString() + } + setChatMessages(prev => [...prev.filter(m => !m.content.includes('Getting Updated Analysis')), errorMessage]) + } finally { + setIsLoading(false) + setIsAnalyzing(false) + } + } + + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault() + handleSendMessage() + } + } + + const formatMessage = (content: string) => { + // Convert markdown-style formatting to JSX + return content.split('\n').map((line, index) => { + if (line.startsWith('**') && line.endsWith('**')) { + return
{line.slice(2, -2)}
+ } + if (line.startsWith('ā€¢ ')) { + return
{line}
+ } + return
{line}
+ }) + } + + const quickActions = [ + "Should I exit now?", + "Update my stop loss", + "Move to break even", + "Current market analysis", + "Risk assessment", + "Take profit strategy" + ] + + return ( +
+
+ {/* Header */} +
+
+ + šŸ’¬ + +
+

Trade Follow-up Assistant

+ {activePosition && ( +

+ {activePosition.symbol} {activePosition.side} ā€¢ Entry: ${activePosition.entryPrice} +

+ )} +
+
+ +
+ + {/* Chat Messages */} +
+ {chatMessages.map((message) => ( +
+
+ {formatMessage(message.content)} + + {/* Show screenshots if available */} + {message.screenshots && message.screenshots.length > 0 && ( +
+ {message.screenshots.map((screenshot, index) => ( + {`Analysis { + // TODO: Open enlarged view + }} + /> + ))} +
+ )} + +
+ {new Date(message.timestamp).toLocaleTimeString()} +
+
+
+ ))} + + {isAnalyzing && ( +
+
+
+
+ Analyzing market conditions... +
+
+
+ )} + +
+
+ + {/* Quick Actions */} + {activePosition && ( +
+
+
Quick Actions:
+
+ {quickActions.map((action, index) => ( + + ))} +
+
+
+ )} + + {/* Message Input */} +
+
+