apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-29 19:06:24 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components

Browse source 
Frontend - Web Dashboard:
- Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs
- Add 11 tool-ui components for inline chat display
- Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.)
- Add modals (AddTokenModal, CreateAlertModal)
- Add mock data for development

Frontend - Browser Extension:
- Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard)
- Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal)
- Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay)
- Add widget components for inline display
- Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface

Documentation:
- Add conversational UX specification
- Add UX analysis report
- Update extension UX design

This implements the Conversational UX paradigm where crypto features
are AI-callable tools that render inline in the chat interface.
This commit is contained in:
API Test Bot 2026-02-04 02:19:57 +07:00
parent ad795eb830
commit e4d020799b
58 changed files with 11315 additions and 661 deletions
Download patch file Download diff file Expand all files Collapse all files

126
surfsense_web/components/tool-ui/crypto/market-overview-tool.tsx Normal file
View file

@ -0,0 +1,126 @@
"use client";
import { makeAssistantToolUI } from "@assistant-ui/react";
import { z } from "zod";
import { cn } from "@/lib/utils";
import { BarChart3, TrendingUp, TrendingDown, Globe } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
// Schema for market token
const MarketTokenSchema = z.object({
symbol: z.string(),
name: z.string(),
price: z.number(),
priceChange24h: z.number(),
marketCap: z.number().optional(),
volume24h: z.number().optional(),
});
// Schema for market overview tool arguments
export const MarketOverviewArgsSchema = z.object({
tokens: z.array(MarketTokenSchema),
totalMarketCap: z.number().optional(),
totalVolume24h: z.number().optional(),
btcDominance: z.number().optional(),
fearGreedIndex: z.number().optional(),
});
export type MarketOverviewArgs = z.infer<typeof MarketOverviewArgsSchema>;
// Schema for market overview result
export const MarketOverviewResultSchema = z.object({
success: z.boolean(),
message: z.string().optional(),
});
export type MarketOverviewResult = z.infer<typeof MarketOverviewResultSchema>;
const formatPrice = (price: number): string => {
if (price < 1) return `$${price.toFixed(4)}`;
return `$${price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
};
const formatLargeNumber = (num: number): string => {
if (num >= 1e12) return `$${(num / 1e12).toFixed(2)}T`;
if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
return `$${num.toFixed(2)}`;
};
/**
* MarketOverviewToolUI - Displays market overview inline in chat
* Used when AI responds to "show market overview" or "how's the market?"
*/
export const MarketOverviewToolUI = makeAssistantToolUI<MarketOverviewArgs, MarketOverviewResult>({
toolName: "get_market_overview",
render: ({ args, status }) => {
const isLoading = status.type === "running";
const tokens = args.tokens || [];
return (
<Card className="my-3 overflow-hidden">
<CardHeader className="pb-3">
<CardTitle className="text-lg flex items-center gap-2">
<Globe className="h-5 w-5 text-blue-500" />
Market Overview
{isLoading && <Badge variant="outline" className="animate-pulse">Loading...</Badge>}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* Global Stats */}
{(args.totalMarketCap || args.btcDominance || args.fearGreedIndex) && (
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
{args.totalMarketCap && (
<div className="bg-muted/50 rounded-lg p-3">
<p className="text-xs text-muted-foreground">Total Market Cap</p>
<p className="font-medium">{formatLargeNumber(args.totalMarketCap)}</p>
</div>
)}
{args.totalVolume24h && (
<div className="bg-muted/50 rounded-lg p-3">
<p className="text-xs text-muted-foreground">24h Volume</p>
<p className="font-medium">{formatLargeNumber(args.totalVolume24h)}</p>
</div>
)}
{args.btcDominance && (
<div className="bg-muted/50 rounded-lg p-3">
<p className="text-xs text-muted-foreground">BTC Dominance</p>
<p className="font-medium">{args.btcDominance.toFixed(1)}%</p>
</div>
)}
{args.fearGreedIndex && (
<div className={cn("rounded-lg p-3", args.fearGreedIndex > 50 ? "bg-green-500/10" : "bg-red-500/10")}>
<p className="text-xs text-muted-foreground">Fear & Greed</p>
<p className={cn("font-medium", args.fearGreedIndex > 50 ? "text-green-500" : "text-red-500")}>
{args.fearGreedIndex} - {args.fearGreedIndex > 75 ? "Extreme Greed" : args.fearGreedIndex > 50 ? "Greed" : args.fearGreedIndex > 25 ? "Fear" : "Extreme Fear"}
</p>
</div>
)}
</div>
)}
{/* Token Prices */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
{tokens.map((token) => (
<div key={token.symbol} className="bg-muted/50 rounded-lg p-4 flex items-center justify-between">
<div>
<p className="font-bold text-lg">{token.symbol}</p>
<p className="text-xs text-muted-foreground">{token.name}</p>
</div>
<div className="text-right">
<p className="font-medium">{formatPrice(token.price)}</p>
<p className={cn("text-sm flex items-center justify-end gap-0.5", token.priceChange24h >= 0 ? "text-green-500" : "text-red-500")}>
{token.priceChange24h >= 0 ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
{token.priceChange24h >= 0 ? "+" : ""}{token.priceChange24h.toFixed(2)}%
</p>
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
},
});