[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="lib/lexicon-data.ts" isMerged="true" export interface LexiconSection { id: string title: string content: string } export interface LexiconTerm { id: string title: string slug: string category?: string readTime?: string description?: string sections?: LexiconSection[] } export interface LexiconCategory { id: string title: string description: string terms: LexiconTerm[] } export const lexiconCategories: LexiconCategory[] = [ { id: "agentic-ai-fundamentals", title: "Agentic AI Fundamentals", description: "Core concepts and principles behind autonomous AI agents and their capabilities", terms: [ { id: "1", title: "Autonomous agents", slug: "autonomous-agents" }, { id: "2", title: "Agent orchestration", slug: "agent-orchestration" }, { id: "3", title: "Multi-agent systems", slug: "multi-agent-systems" }, { id: "4", title: "Agent memory", slug: "agent-memory" }, { id: "5", title: "Tool calling", slug: "tool-calling" }, { id: "6", title: "Chain of thought reasoning", slug: "chain-of-thought-reasoning" }, { id: "7", title: "ReAct pattern", slug: "react-pattern" }, { id: "8", title: "Agent loops", slug: "agent-loops" }, { id: "9", title: "Goal-directed behavior", slug: "goal-directed-behavior" }, ], }, { id: "fintech-operations", title: "FinTech Operations", description: "Essential terminology for financial technology automation and processes", terms: [ { id: "10", title: "Payment reconciliation", slug: "payment-reconciliation" }, { id: "11", title: "Transaction monitoring", slug: "transaction-monitoring" }, { id: "12", title: "Fraud detection", slug: "fraud-detection" }, { id: "13", title: "KYC automation", slug: "kyc-automation" }, { id: "14", title: "AML compliance", slug: "aml-compliance" }, { id: "15", title: "Risk assessment", slug: "risk-assessment" }, { id: "16", title: "Regulatory reporting", slug: "regulatory-reporting" }, { id: "17", title: "Settlement processing", slug: "settlement-processing" }, { id: "18", title: "Ledger management", slug: "ledger-management" }, ], }, { id: "workflow-automation", title: "Workflow Automation", description: "Terms related to automating business processes and workflows with AI", terms: [ { id: "19", title: "Task decomposition", slug: "task-decomposition" }, { id: "20", title: "Workflow orchestration", slug: "workflow-orchestration" }, { id: "21", title: "Process mining", slug: "process-mining" }, { id: "22", title: "RPA integration", slug: "rpa-integration" }, { id: "23", title: "Event-driven automation", slug: "event-driven-automation" }, { id: "24", title: "Human-in-the-loop", slug: "human-in-the-loop" }, { id: "25", title: "Approval workflows", slug: "approval-workflows" }, { id: "26", title: "Exception handling", slug: "exception-handling" }, { id: "27", title: "SLA management", slug: "sla-management" }, ], }, { id: "llm-integration", title: "LLM Integration", description: "Large Language Model integration patterns and best practices", terms: [ { id: "28", title: "Prompt engineering", slug: "prompt-engineering" }, { id: "29", title: "Context window", slug: "context-window" }, { id: "30", title: "Token optimization", slug: "token-optimization" }, { id: "31", title: "Model fine-tuning", slug: "model-fine-tuning" }, { id: "32", title: "RAG systems", slug: "rag-systems" }, { id: "33", title: "Embedding models", slug: "embedding-models" }, { id: "34", title: "Vector databases", slug: "vector-databases" }, { id: "35", title: "Model routing", slug: "model-routing" }, { id: "36", title: "Inference optimization", slug: "inference-optimization" }, ], }, { id: "security-compliance", title: "Security & Compliance", description: "Security frameworks and compliance standards for AI-powered systems", terms: [ { id: "37", title: "Data encryption", slug: "data-encryption" }, { id: "38", title: "Access control", slug: "access-control" }, { id: "39", title: "Audit logging", slug: "audit-logging" }, { id: "40", title: "SOC 2 compliance", slug: "soc-2-compliance" }, { id: "41", title: "GDPR requirements", slug: "gdpr-requirements" }, { id: "42", title: "PCI DSS", slug: "pci-dss" }, { id: "43", title: "Data residency", slug: "data-residency" }, { id: "44", title: "Zero trust architecture", slug: "zero-trust-architecture" }, { id: "45", title: "Secret management", slug: "secret-management" }, ], }, { id: "observability-monitoring", title: "Observability & Monitoring", description: "Tools and techniques for monitoring AI agent performance and behavior", terms: [ { id: "46", title: "Agent tracing", slug: "agent-tracing" }, { id: "47", title: "Performance metrics", slug: "performance-metrics" }, { id: "48", title: "Error tracking", slug: "error-tracking" }, { id: "49", title: "Cost monitoring", slug: "cost-monitoring" }, { id: "50", title: "Latency analysis", slug: "latency-analysis" }, { id: "51", title: "Token usage tracking", slug: "token-usage-tracking" }, { id: "52", title: "Anomaly detection", slug: "anomaly-detection" }, { id: "53", title: "Real-time dashboards", slug: "real-time-dashboards" }, { id: "54", title: "Alert management", slug: "alert-management" }, ], }, ] export const totalTerms = lexiconCategories.reduce( (acc, category) => acc + category.terms.length, 0 ) export const totalCategories = lexiconCategories.length [V0_FILE]typescriptreact:file="components/lexicon-category.tsx" isMerged="true" import type { LexiconCategory as LexiconCategoryType } from "@/lib/lexicon-data" import { LexiconCard } from "./lexicon-card" interface LexiconCategoryProps { category: LexiconCategoryType } export function LexiconCategory({ category }: LexiconCategoryProps) { return (

{category.title}

{category.description}

{category.terms.map((term) => ( ))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState, useMemo } from "react" import { LexiconHero } from "@/components/lexicon-hero" import { LexiconCategory } from "@/components/lexicon-category" import { lexiconCategories, totalTerms, totalCategories, } from "@/lib/lexicon-data" export default function LexiconPage() { const [searchQuery, setSearchQuery] = useState("") const filteredCategories = useMemo(() => { if (!searchQuery.trim()) return lexiconCategories const query = searchQuery.toLowerCase() return lexiconCategories .map((category) => ({ ...category, terms: category.terms.filter((term) => term.title.toLowerCase().includes(query) ), })) .filter((category) => category.terms.length > 0) }, [searchQuery]) return (

{filteredCategories.length > 0 ? ( filteredCategories.map((category) => ( )) ) : (

No terms found matching "{searchQuery}"

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Agentic AI Lexicon | Upsonic', description: 'Your comprehensive guide to agentic AI terminology, frameworks, and best practices for FinTech operations.', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: #ffffff; --foreground: #0f0f0f; --card: #ffffff; --card-foreground: #0f0f0f; --popover: #ffffff; --popover-foreground: #0f0f0f; --primary: #00c96f; --primary-foreground: #ffffff; --secondary: #f5f7f5; --secondary-foreground: #0f0f0f; --muted: #f5f7f5; --muted-foreground: #6b7280; --accent: #00c96f; --accent-foreground: #ffffff; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #e5e7eb; --input: #f5f7f5; --ring: #00c96f; --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: #ffffff; --sidebar-foreground: #0f0f0f; --sidebar-primary: #00c96f; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #f5f7f5; --sidebar-accent-foreground: #0f0f0f; --sidebar-border: #e5e7eb; --sidebar-ring: #00c96f; --hero-gradient-start: #f0fdf4; --hero-gradient-end: #ffffff; } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/lexicon-hero.tsx" isMerged="true" "use client" import { LexiconSearch } from "./lexicon-search" interface LexiconHeroProps { totalTerms: number totalCategories: number searchQuery: string onSearchChange: (value: string) => void } export function LexiconHero({ totalTerms, totalCategories, searchQuery, onSearchChange, }: LexiconHeroProps) { return (

{/* Decorative elements */}

Lexicon

Agentic AI Lexicon

Your comprehensive guide to agentic AI terminology, frameworks, and best practices. Explore {totalTerms} essential terms organized into {totalCategories} specialized categories.

) } [V0_FILE]typescriptreact:file="components/lexicon-search.tsx" isMerged="true" "use client" import { Search } from "lucide-react" interface LexiconSearchProps { value: string onChange: (value: string) => void } export function LexiconSearch({ value, onChange }: LexiconSearchProps) { return (

onChange(e.target.value)} placeholder="Search lexicon entries..." className="w-full bg-transparent px-4 py-3 text-foreground placeholder:text-muted-foreground focus:outline-none" />

) } [V0_FILE]typescriptreact:file="components/lexicon-card.tsx" isMerged="true" "use client" import { ChevronRight } from "lucide-react" import type { LexiconTerm } from "@/lib/lexicon-data" interface LexiconCardProps { term: LexiconTerm } export function LexiconCard({ term }: LexiconCardProps) { return ( {term.title} ) } [V0_FILE]typescript:file="lib/lexicon-term-details.ts" isMerged="true" import type { LexiconSection } from "./lexicon-data" export interface TermDetail { slug: string title: string category: string categorySlug: string readTime: string description: string sections: LexiconSection[] } export const termDetails: Record = { "autonomous-agents": { slug: "autonomous-agents", title: "Autonomous Agents", category: "Agentic AI Fundamentals", categorySlug: "agentic-ai-fundamentals", readTime: "5 min read", description: "Autonomous agents are AI systems capable of perceiving their environment, making decisions, and taking actions to achieve specific goals without continuous human intervention.", sections: [ { id: "overview", title: "Overview", content: "Autonomous agents represent a significant advancement in artificial intelligence, enabling systems to operate independently while adapting to changing conditions. These agents combine perception, reasoning, and action capabilities to accomplish complex tasks in dynamic environments. In the context of FinTech operations, autonomous agents can handle routine tasks, make decisions based on predefined rules and learned patterns, and escalate complex situations to human operators when necessary.", }, { id: "key-characteristics", title: "Key Characteristics", content: "The defining characteristics of autonomous agents include: Autonomy - the ability to operate without direct human control; Reactivity - responding to changes in the environment in a timely manner; Proactivity - taking initiative to achieve goals rather than simply reacting; Social ability - interacting with other agents and humans to accomplish objectives. These characteristics make autonomous agents particularly valuable in FinTech operations where speed, accuracy, and consistency are critical.", }, { id: "architecture", title: "Agent Architecture", content: "Modern autonomous agents typically follow a perception-reasoning-action loop. The perception module gathers information from the environment through APIs, databases, and other data sources. The reasoning module processes this information using LLMs, rule engines, or hybrid approaches to determine the best course of action. The action module executes decisions through tool calls, API interactions, or workflow triggers. This architecture enables agents to handle complex, multi-step processes autonomously.", }, { id: "use-cases-fintech", title: "Use Cases in FinTech", content: "In FinTech operations, autonomous agents excel at tasks such as: transaction monitoring and fraud detection, where agents analyze patterns in real-time; KYC verification, automating document review and identity checks; payment reconciliation, matching transactions across multiple systems; customer support, handling routine inquiries and escalating complex issues; regulatory reporting, gathering data and generating compliance reports automatically.", }, { id: "implementation-considerations", title: "Implementation Considerations", content: "When implementing autonomous agents in production environments, organizations must consider: reliability and error handling to ensure agents gracefully handle unexpected situations; observability to monitor agent behavior and performance; security to protect sensitive financial data; compliance to meet regulatory requirements; human oversight mechanisms to maintain control over critical decisions. Upsonic provides enterprise-grade tooling to address these considerations.", }, { id: "related-terms", title: "Related Terms", content: "Understanding autonomous agents is enhanced by exploring related concepts: Agent Orchestration for coordinating multiple agents; Multi-Agent Systems for complex collaborative tasks; Human-in-the-Loop for maintaining human oversight; Tool Calling for extending agent capabilities; Agent Memory for maintaining context across interactions.", }, ], }, "agent-orchestration": { slug: "agent-orchestration", title: "Agent Orchestration", category: "Agentic AI Fundamentals", categorySlug: "agentic-ai-fundamentals", readTime: "6 min read", description: "Agent orchestration refers to the coordination and management of multiple AI agents working together to accomplish complex tasks that require diverse capabilities.", sections: [ { id: "overview", title: "Overview", content: "Agent orchestration is the practice of coordinating multiple AI agents to work together effectively. Just as an orchestra conductor coordinates musicians to create harmonious music, agent orchestration ensures that different agents with specialized capabilities collaborate seamlessly to achieve complex objectives. This approach is essential in enterprise environments where no single agent can handle all aspects of a business process.", }, { id: "orchestration-patterns", title: "Orchestration Patterns", content: "Several patterns exist for orchestrating agents: Sequential orchestration passes tasks from one agent to another in a defined order; Parallel orchestration runs multiple agents simultaneously on different aspects of a problem; Hierarchical orchestration uses manager agents to delegate tasks to worker agents; Dynamic orchestration adapts the workflow based on intermediate results. The choice of pattern depends on the specific requirements of the task and the capabilities of available agents.", }, { id: "communication-protocols", title: "Communication Protocols", content: "Effective agent orchestration requires robust communication protocols. Agents must be able to share context, pass results, and coordinate actions. Common approaches include message passing through queues, shared state management, and event-driven architectures. The protocol must handle both synchronous interactions where agents wait for responses and asynchronous operations where agents work independently and synchronize at checkpoints.", }, { id: "state-management", title: "State Management", content: "Managing state across orchestrated agents presents unique challenges. The orchestration layer must maintain: global state visible to all agents; local state specific to individual agents; transaction boundaries ensuring consistency; rollback mechanisms for error recovery. Proper state management ensures that agents work with accurate, up-to-date information and that failures in one agent don't corrupt the overall process.", }, { id: "monitoring-debugging", title: "Monitoring and Debugging", content: "Observability is critical in orchestrated agent systems. Teams need visibility into: which agents are active and their current status; the flow of data between agents; performance metrics for each agent and the overall workflow; error conditions and their root causes. Comprehensive tracing and logging enable teams to understand system behavior and quickly diagnose issues.", }, ], }, "payment-reconciliation": { slug: "payment-reconciliation", title: "Payment Reconciliation", category: "FinTech Operations", categorySlug: "fintech-operations", readTime: "7 min read", description: "Payment reconciliation is the process of matching and verifying transactions across multiple financial systems to ensure accuracy and identify discrepancies.", sections: [ { id: "overview", title: "Overview", content: "Payment reconciliation is a critical financial operation that involves comparing transaction records from different sources to ensure they match. This process verifies that payments sent match payments received, that internal records align with bank statements, and that all financial activities are properly accounted for. In modern FinTech operations, automated reconciliation powered by AI agents can process millions of transactions efficiently while flagging exceptions for human review.", }, { id: "reconciliation-types", title: "Types of Reconciliation", content: "Several types of payment reconciliation exist: Bank reconciliation matches internal records against bank statements; Inter-company reconciliation verifies transactions between related entities; Customer reconciliation ensures customer accounts reflect accurate balances; Vendor reconciliation confirms payments to suppliers match invoices and purchase orders. Each type requires specific matching rules and tolerance thresholds appropriate to the transaction types involved.", }, { id: "matching-algorithms", title: "Matching Algorithms", content: "Automated reconciliation relies on sophisticated matching algorithms. Exact matching requires perfect correspondence between records; Fuzzy matching handles minor variations in amounts or dates; Rule-based matching applies business logic to identify related transactions; ML-based matching learns patterns from historical data to improve accuracy. The combination of these approaches enables high automation rates while minimizing false positives and negatives.", }, { id: "exception-handling", title: "Exception Handling", content: "Not all transactions can be automatically reconciled. Exceptions may arise from timing differences, data entry errors, fraud, or legitimate business variations. Effective exception handling involves: categorizing exceptions by type and priority; routing exceptions to appropriate reviewers; providing context and suggested resolutions; tracking exception patterns to identify systemic issues; measuring resolution time and outcomes.", }, { id: "ai-automation", title: "AI-Powered Automation", content: "AI agents transform payment reconciliation by: processing high transaction volumes at speed; learning from historical patterns to improve matching; automatically resolving routine exceptions; predicting and preventing reconciliation failures; continuously improving accuracy through feedback loops. Organizations using AI-powered reconciliation report significant reductions in manual effort and faster close cycles.", }, ], }, "prompt-engineering": { slug: "prompt-engineering", title: "Prompt Engineering", category: "LLM Integration", categorySlug: "llm-integration", readTime: "8 min read", description: "Prompt engineering is the practice of designing and optimizing inputs to large language models to achieve desired outputs for specific tasks.", sections: [ { id: "overview", title: "Overview", content: "Prompt engineering is both an art and a science that involves crafting effective instructions for large language models. The quality of outputs from LLMs depends significantly on how prompts are structured, what context is provided, and how the desired output format is specified. In enterprise applications, systematic prompt engineering ensures consistent, reliable results that meet business requirements.", }, { id: "prompt-components", title: "Prompt Components", content: "Effective prompts typically include several components: System instructions that define the model's role and behavior; Context that provides relevant background information; Examples that demonstrate desired input-output patterns; The specific query or task to be performed; Output format specifications that structure the response. Each component contributes to the overall effectiveness of the prompt.", }, { id: "techniques", title: "Key Techniques", content: "Several techniques improve prompt effectiveness: Few-shot prompting provides examples to guide model behavior; Chain-of-thought prompting encourages step-by-step reasoning; Self-consistency generates multiple responses and selects the most common; Role prompting assigns a specific persona to the model; Structured output prompting specifies JSON or other formats. Combining these techniques addresses different aspects of prompt optimization.", }, { id: "iteration-testing", title: "Iteration and Testing", content: "Prompt engineering is an iterative process. Initial prompts rarely achieve optimal results immediately. Systematic testing involves: creating evaluation datasets with expected outputs; measuring prompt performance across multiple dimensions; A/B testing prompt variations; analyzing failure cases to identify improvement opportunities; maintaining version control for prompt iterations. This disciplined approach leads to reliable, production-ready prompts.", }, { id: "enterprise-considerations", title: "Enterprise Considerations", content: "Enterprise prompt engineering adds additional requirements: prompts must handle edge cases gracefully; sensitive data must be protected in prompts; prompts should be maintainable and documented; performance and cost must be optimized; prompts need to work consistently across model updates. Organizations benefit from establishing prompt libraries and governance processes to manage these concerns.", }, ], }, } // Helper function to get all term slugs for static generation export function getAllTermSlugs(): string[] { return Object.keys(termDetails) } // Helper function to get term detail by slug export function getTermDetail(slug: string): TermDetail | undefined { return termDetails[slug] } [V0_FILE]typescriptreact:file="components/table-of-contents.tsx" isMerged="true" "use client" import React from "react" import { useEffect, useState } from "react" import { cn } from "@/lib/utils" import type { LexiconSection } from "@/lib/lexicon-data" import { List } from "lucide-react" interface TableOfContentsProps { sections: LexiconSection[] variant?: "sidebar" | "card" } export function TableOfContents({ sections, variant = "sidebar" }: TableOfContentsProps) { const [activeSection, setActiveSection] = useState("") useEffect(() => { const observer = new IntersectionObserver( (entries) => { for (const entry of entries) { if (entry.isIntersecting) { setActiveSection(entry.target.id) } } }, { rootMargin: "-80px 0px -80% 0px", threshold: 0 } ) for (const section of sections) { const element = document.getElementById(section.id) if (element) { observer.observe(element) } } return () => observer.disconnect() }, [sections]) const handleClick = (e: React.MouseEvent, sectionId: string) => { e.preventDefault() const element = document.getElementById(sectionId) if (element) { const offset = 100 const top = element.getBoundingClientRect().top + window.scrollY - offset window.scrollTo({ top, behavior: "smooth" }) } } if (variant === "card") { return (

Table of contents

) } return ( ) } [V0_FILE]typescriptreact:file="components/term-header.tsx" isMerged="true" import Link from "next/link" import { ArrowLeft, Calendar, Clock } from "lucide-react" interface TermHeaderProps { title: string category: string categorySlug: string readTime: string description: string } export function TermHeader({ title, category, categorySlug, readTime, description, }: TermHeaderProps) { const today = new Date().toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) return (

Back to Lexicon

{category}

{today} {readTime}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/term-content.tsx" isMerged="true" import type { LexiconSection } from "@/lib/lexicon-data" interface TermContentProps { sections: LexiconSection[] } export function TermContent({ sections }: TermContentProps) { return (

{sections.map((section, index) => (

{section.title}

{section.content}

{index < sections.length - 1 &&

}

))}

) } [V0_FILE]typescriptreact:file="app/lexicon/[slug]/page.tsx" isMerged="true" import { notFound } from "next/navigation" import { getTermDetail, getAllTermSlugs } from "@/lib/lexicon-term-details" import { TermHeader } from "@/components/term-header" import { TermContent } from "@/components/term-content" import { TableOfContents } from "@/components/table-of-contents" import type { Metadata } from "next" interface PageProps { params: Promise<{ slug: string }> } export async function generateMetadata({ params }: PageProps): Promise { const { slug } = await params const term = getTermDetail(slug) if (!term) { return { title: "Term Not Found | Upsonic Lexicon", } } return { title: `${term.title} | Upsonic Lexicon`, description: term.description, } } export function generateStaticParams() { return getAllTermSlugs().map((slug) => ({ slug })) } export default async function TermPage({ params }: PageProps) { const { slug } = await params const term = getTermDetail(slug) if (!term) { notFound() } return (

{/* Mobile Table of Contents */}

{/* Sidebar - Desktop */} {/* Main Content */}

) } [V0_FILE]typescriptreact:file="app/lexicon/[slug]/not-found.tsx" import Link from "next/link" import { ArrowLeft } from "lucide-react" export default function NotFound() { return (

Term Not Found

The lexicon term you're looking for doesn't exist or has been moved.

Back to Lexicon

) }