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

121
surfsense_web/components/tool-ui/crypto/portfolio-display.tsx Normal file
View file

@ -0,0 +1,121 @@
"use client";
import { makeAssistantToolUI } from "@assistant-ui/react";
import { z } from "zod";
import { cn } from "@/lib/utils";
import { Wallet, TrendingUp, TrendingDown, PieChart } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ChainIcon } from "@/components/crypto/ChainIcon";
// Schema for portfolio holding
const HoldingSchema = z.object({
symbol: z.string(),
name: z.string(),
chain: z.string(),
balance: z.number(),
value: z.number(),
costBasis: z.number().optional(),
pnl: z.number().optional(),
pnlPercent: z.number().optional(),
allocation: z.number(),
});
// Schema for portfolio display tool arguments
export const PortfolioDisplayArgsSchema = z.object({
holdings: z.array(HoldingSchema),
totalValue: z.number(),
totalPnl: z.number().optional(),
totalPnlPercent: z.number().optional(),
lastUpdated: z.string().optional(),
});
export type PortfolioDisplayArgs = z.infer<typeof PortfolioDisplayArgsSchema>;
// Schema for portfolio display result
export const PortfolioDisplayResultSchema = z.object({
success: z.boolean(),
message: z.string().optional(),
});
export type PortfolioDisplayResult = z.infer<typeof PortfolioDisplayResultSchema>;
const formatValue = (value: number): string => {
if (value >= 1e6) return `$${(value / 1e6).toFixed(2)}M`;
if (value >= 1e3) return `$${(value / 1e3).toFixed(2)}K`;
return `$${value.toFixed(2)}`;
};
/**
* PortfolioDisplayToolUI - Displays user's portfolio inline in chat
* Used when AI responds to "how's my portfolio?" or "show my holdings"
*/
export const PortfolioDisplayToolUI = makeAssistantToolUI<PortfolioDisplayArgs, PortfolioDisplayResult>({
toolName: "get_portfolio",
render: ({ args, status }) => {
const isLoading = status.type === "running";
const holdings = args.holdings || [];
const hasPnl = args.totalPnl !== undefined;
return (
<Card className="my-3 overflow-hidden">
<CardHeader className="pb-3">
<CardTitle className="text-lg flex items-center justify-between">
<div className="flex items-center gap-2">
<Wallet className="h-5 w-5 text-emerald-500" />
Your Portfolio
{isLoading && <Badge variant="outline" className="animate-pulse">Loading...</Badge>}
</div>
{args.lastUpdated && (
<span className="text-xs text-muted-foreground">Updated {args.lastUpdated}</span>
)}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* Total Value */}
<div className="bg-gradient-to-r from-emerald-500/10 to-blue-500/10 rounded-lg p-4">
<p className="text-sm text-muted-foreground">Total Value</p>
<p className="text-3xl font-bold">{formatValue(args.totalValue)}</p>
{hasPnl && (
<p className={cn("text-sm flex items-center gap-1 mt-1", (args.totalPnl || 0) >= 0 ? "text-green-500" : "text-red-500")}>
{(args.totalPnl || 0) >= 0 ? <TrendingUp className="h-4 w-4" /> : <TrendingDown className="h-4 w-4" />}
{(args.totalPnl || 0) >= 0 ? "+" : ""}{formatValue(args.totalPnl || 0)} ({(args.totalPnlPercent || 0) >= 0 ? "+" : ""}{(args.totalPnlPercent || 0).toFixed(2)}%)
</p>
)}
</div>
{/* Holdings List */}
{holdings.length === 0 ? (
<p className="text-muted-foreground text-center py-4">No holdings found</p>
) : (
<div className="divide-y">
{holdings.map((holding) => (
<div key={holding.symbol} className="flex items-center justify-between py-3">
<div className="flex items-center gap-3">
<ChainIcon chain={holding.chain} size="sm" />
<div>
<div className="flex items-center gap-2">
<span className="font-medium">{holding.symbol}</span>
<Badge variant="secondary" className="text-xs">{holding.allocation.toFixed(1)}%</Badge>
</div>
<span className="text-xs text-muted-foreground">{holding.balance.toLocaleString()} tokens</span>
</div>
</div>
<div className="text-right">
<p className="font-medium">{formatValue(holding.value)}</p>
{holding.pnlPercent !== undefined && (
<p className={cn("text-sm", holding.pnlPercent >= 0 ? "text-green-500" : "text-red-500")}>
{holding.pnlPercent >= 0 ? "+" : ""}{holding.pnlPercent.toFixed(2)}%
</p>
)}
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
);
},
});