diff --git a/surfsense_browser_extension/sidepanel/chat/ChatMessages.tsx b/surfsense_browser_extension/sidepanel/chat/ChatMessages.tsx index bc545ce3a..4f7125bdd 100644 --- a/surfsense_browser_extension/sidepanel/chat/ChatMessages.tsx +++ b/surfsense_browser_extension/sidepanel/chat/ChatMessages.tsx @@ -6,11 +6,20 @@ import { WatchlistWidget, AlertWidget, TokenAnalysisWidget, + WhaleActivityWidget, + TradingSuggestionWidget, + PortfolioWidget, + ChartCaptureWidget, + ThreadGeneratorWidget, type ProactiveAlertData, type WatchlistItem, type AlertConfigData, type TokenAnalysisData, } from "../widgets"; +import type { WhaleTransaction } from "../whale/WhaleActivityFeed"; +import type { TradingSuggestion } from "../analysis/TradingSuggestionPanel"; +import type { PortfolioData } from "../portfolio/PortfolioPanel"; +import type { ChartCaptureMetadata } from "../capture/ChartCapturePanel"; // Widget types that can be embedded in messages export type MessageWidget = @@ -18,7 +27,12 @@ export type MessageWidget = | { type: "proactive_alert"; alert: ProactiveAlertData; recommendation?: string } | { type: "watchlist"; tokens: WatchlistItem[] } | { type: "alert_config"; config: AlertConfigData; isNew?: boolean } - | { type: "token_analysis"; data: TokenAnalysisData; isInWatchlist?: boolean }; + | { type: "token_analysis"; data: TokenAnalysisData; isInWatchlist?: boolean } + | { type: "whale_activity"; transactions: WhaleTransaction[] } + | { type: "trading_suggestion"; suggestion: TradingSuggestion } + | { type: "portfolio"; portfolio: PortfolioData } + | { type: "chart_capture"; metadata?: ChartCaptureMetadata } + | { type: "thread_generator"; tokenAddress?: string; tokenSymbol?: string; chain?: string }; export interface Message { id: string; @@ -48,6 +62,11 @@ export interface ChatMessagesProps { * - WatchlistWidget: Inline watchlist display * - AlertWidget: Alert configuration display * - TokenAnalysisWidget: Full token analysis + * - WhaleActivityWidget: Whale transaction feed (Epic 2) + * - TradingSuggestionWidget: Entry/exit suggestions (Epic 3) + * - PortfolioWidget: Portfolio tracker (Epic 3) + * - ChartCaptureWidget: Chart screenshot tool (Epic 4) + * - ThreadGeneratorWidget: Twitter thread generator (Epic 4) */ export function ChatMessages({ messages, @@ -122,6 +141,51 @@ export function ChatMessages({ onAnalyzeFurther={() => handleWidgetAction("analyze_further", widget.data)} /> ); + case "whale_activity": + return ( + handleWidgetAction("track_wallet", address)} + onViewTransaction={(txHash) => handleWidgetAction("view_transaction", txHash)} + /> + ); + case "trading_suggestion": + return ( + handleWidgetAction("set_alerts", widget.suggestion)} + onViewChart={() => handleWidgetAction("view_chart", widget.suggestion)} + /> + ); + case "portfolio": + return ( + handleWidgetAction("refresh_portfolio")} + onAnalyzeToken={(holding) => handleWidgetAction("analyze_token", holding)} + onSetAlert={(holding) => handleWidgetAction("set_alert", holding)} + onViewToken={(holding) => handleWidgetAction("view_token", holding)} + onAddPosition={() => handleWidgetAction("add_position")} + /> + ); + case "chart_capture": + return ( + handleWidgetAction("capture_chart")} + onExport={(format) => handleWidgetAction("export_chart", format)} + /> + ); + case "thread_generator": + return ( + handleWidgetAction("generate_thread", request)} + onExport={(format) => handleWidgetAction("export_thread", format)} + /> + ); default: return null; } diff --git a/surfsense_browser_extension/sidepanel/widgets/ChartCaptureWidget.tsx b/surfsense_browser_extension/sidepanel/widgets/ChartCaptureWidget.tsx new file mode 100644 index 000000000..a8b0db828 --- /dev/null +++ b/surfsense_browser_extension/sidepanel/widgets/ChartCaptureWidget.tsx @@ -0,0 +1,31 @@ +import { ChartCapturePanel, type ChartCaptureMetadata } from "../capture/ChartCapturePanel"; + +export interface ChartCaptureWidgetProps { + /** Current token metadata */ + metadata?: ChartCaptureMetadata; + /** Callback when capture is clicked */ + onCapture?: () => void; + /** Callback when export is clicked */ + onExport?: (format: "twitter" | "telegram" | "instagram" | "clipboard") => void; +} + +/** + * ChartCaptureWidget - Inline chart capture tool in chat + * Wraps ChartCapturePanel for conversational UX + */ +export function ChartCaptureWidget({ + metadata, + onCapture, + onExport, +}: ChartCaptureWidgetProps) { + return ( +
+ +
+ ); +} + diff --git a/surfsense_browser_extension/sidepanel/widgets/PortfolioWidget.tsx b/surfsense_browser_extension/sidepanel/widgets/PortfolioWidget.tsx new file mode 100644 index 000000000..3bfcbe1f3 --- /dev/null +++ b/surfsense_browser_extension/sidepanel/widgets/PortfolioWidget.tsx @@ -0,0 +1,43 @@ +import { PortfolioPanel, type PortfolioData, type PortfolioHolding } from "../portfolio/PortfolioPanel"; + +export interface PortfolioWidgetProps { + /** Portfolio data */ + portfolio: PortfolioData; + /** Callback when refresh is clicked */ + onRefresh?: () => void; + /** Callback when "Analyze" is clicked for a token */ + onAnalyzeToken?: (holding: PortfolioHolding) => void; + /** Callback when "Set Alert" is clicked for a token */ + onSetAlert?: (holding: PortfolioHolding) => void; + /** Callback when "View on DexScreener" is clicked */ + onViewToken?: (holding: PortfolioHolding) => void; + /** Callback when "Add Manual Position" is clicked */ + onAddPosition?: () => void; +} + +/** + * PortfolioWidget - Inline portfolio display in chat + * Wraps PortfolioPanel for conversational UX + */ +export function PortfolioWidget({ + portfolio, + onRefresh, + onAnalyzeToken, + onSetAlert, + onViewToken, + onAddPosition, +}: PortfolioWidgetProps) { + return ( +
+ +
+ ); +} + diff --git a/surfsense_browser_extension/sidepanel/widgets/ThreadGeneratorWidget.tsx b/surfsense_browser_extension/sidepanel/widgets/ThreadGeneratorWidget.tsx new file mode 100644 index 000000000..bd32bbd95 --- /dev/null +++ b/surfsense_browser_extension/sidepanel/widgets/ThreadGeneratorWidget.tsx @@ -0,0 +1,40 @@ +import { ThreadGeneratorPanel, type GeneratedThread } from "../content/ThreadGeneratorPanel"; + +export interface ThreadGeneratorWidgetProps { + /** Current token info */ + tokenAddress?: string; + tokenSymbol?: string; + chain?: string; + /** Generated thread (if available) */ + generatedThread?: GeneratedThread; + /** Callback when thread is generated */ + onGenerate?: (request: any) => void; + /** Callback when thread is exported */ + onExport?: (format: "copy" | "twitter") => void; +} + +/** + * ThreadGeneratorWidget - Inline thread generator in chat + * Wraps ThreadGeneratorPanel for conversational UX + */ +export function ThreadGeneratorWidget({ + tokenAddress, + tokenSymbol, + chain, + generatedThread, + onGenerate, + onExport, +}: ThreadGeneratorWidgetProps) { + return ( +
+ +
+ ); +} + diff --git a/surfsense_browser_extension/sidepanel/widgets/TradingSuggestionWidget.tsx b/surfsense_browser_extension/sidepanel/widgets/TradingSuggestionWidget.tsx new file mode 100644 index 000000000..6e0c60e61 --- /dev/null +++ b/surfsense_browser_extension/sidepanel/widgets/TradingSuggestionWidget.tsx @@ -0,0 +1,31 @@ +import { TradingSuggestionPanel, type TradingSuggestion } from "../analysis/TradingSuggestionPanel"; + +export interface TradingSuggestionWidgetProps { + /** Trading suggestion data */ + suggestion: TradingSuggestion; + /** Callback when "Set Alerts" is clicked */ + onSetAlerts?: () => void; + /** Callback when "View Chart" is clicked */ + onViewChart?: () => void; +} + +/** + * TradingSuggestionWidget - Inline trading suggestion display in chat + * Wraps TradingSuggestionPanel for conversational UX + */ +export function TradingSuggestionWidget({ + suggestion, + onSetAlerts, + onViewChart, +}: TradingSuggestionWidgetProps) { + return ( +
+ +
+ ); +} + diff --git a/surfsense_browser_extension/sidepanel/widgets/WhaleActivityWidget.tsx b/surfsense_browser_extension/sidepanel/widgets/WhaleActivityWidget.tsx new file mode 100644 index 000000000..97f62a4f1 --- /dev/null +++ b/surfsense_browser_extension/sidepanel/widgets/WhaleActivityWidget.tsx @@ -0,0 +1,31 @@ +import { WhaleActivityFeed, type WhaleTransaction } from "../whale/WhaleActivityFeed"; + +export interface WhaleActivityWidgetProps { + /** List of whale transactions */ + transactions: WhaleTransaction[]; + /** Callback when a wallet is tracked */ + onTrackWallet?: (address: string) => void; + /** Callback when a transaction is viewed */ + onViewTransaction?: (txHash: string) => void; +} + +/** + * WhaleActivityWidget - Inline whale activity display in chat + * Wraps WhaleActivityFeed for conversational UX + */ +export function WhaleActivityWidget({ + transactions, + onTrackWallet, + onViewTransaction, +}: WhaleActivityWidgetProps) { + return ( +
+ +
+ ); +} + diff --git a/surfsense_browser_extension/sidepanel/widgets/index.ts b/surfsense_browser_extension/sidepanel/widgets/index.ts index 2c92ccb39..9b83ef394 100644 --- a/surfsense_browser_extension/sidepanel/widgets/index.ts +++ b/surfsense_browser_extension/sidepanel/widgets/index.ts @@ -7,3 +7,14 @@ export { WatchlistWidget, type WatchlistWidgetProps, type WatchlistItem } from " export { AlertWidget, type AlertWidgetProps, type AlertConfigData } from "./AlertWidget"; export { TokenAnalysisWidget, type TokenAnalysisWidgetProps, type TokenAnalysisData } from "./TokenAnalysisWidget"; +// Epic 2: Smart Monitoring & Alerts +export { WhaleActivityWidget, type WhaleActivityWidgetProps } from "./WhaleActivityWidget"; + +// Epic 3: Trading Intelligence +export { TradingSuggestionWidget, type TradingSuggestionWidgetProps } from "./TradingSuggestionWidget"; +export { PortfolioWidget, type PortfolioWidgetProps } from "./PortfolioWidget"; + +// Epic 4: Content Creation & Productivity +export { ChartCaptureWidget, type ChartCaptureWidgetProps } from "./ChartCaptureWidget"; +export { ThreadGeneratorWidget, type ThreadGeneratorWidgetProps } from "./ThreadGeneratorWidget"; +