diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs new file mode 100644 index 0000000..185a2da --- /dev/null +++ b/.git-blame-ignore-revs @@ -0,0 +1,4 @@ +# Biome formatter migration — bulk formatting changes +# To use: git config blame.ignoreRevsFile .git-blame-ignore-revs +# GitHub uses this file automatically. +f2f648acfa64e14f9fabb51419e6b0922adb60fe diff --git a/apps/docs/app/(home)/layout.tsx b/apps/docs/app/(home)/layout.tsx index cf05597..45ec0eb 100644 --- a/apps/docs/app/(home)/layout.tsx +++ b/apps/docs/app/(home)/layout.tsx @@ -1,7 +1,7 @@ -import { HomeLayout } from 'fumadocs-ui/layouts/home'; -import { baseOptions } from '@/lib/layout.shared'; -import type { ReactNode } from 'react'; +import { HomeLayout } from 'fumadocs-ui/layouts/home' +import type { ReactNode } from 'react' +import { baseOptions } from '@/lib/layout.shared' export default function Layout({ children }: { children: ReactNode }) { - return {children}; + return {children} } diff --git a/apps/docs/app/(home)/page.tsx b/apps/docs/app/(home)/page.tsx index 2125a48..9e42fd2 100644 --- a/apps/docs/app/(home)/page.tsx +++ b/apps/docs/app/(home)/page.tsx @@ -1,18 +1,13 @@ -import Link from 'next/link'; +import Link from 'next/link' export default function HomePage() { return (
-

- surf-kit -

-

- AI-First Design System -

+

surf-kit

+

AI-First Design System

- Purpose-built components for agent interfaces. Trust through - transparency, accessible by default, enterprise-grade theming, and a - composable architecture. + Purpose-built components for agent interfaces. Trust through transparency, accessible by + default, enterprise-grade theming, and a composable architecture.

- ); + ) } -function FeatureCard({ - title, - description, -}: { - title: string; - description: string; -}) { +function FeatureCard({ title, description }: { title: string; description: string }) { return (

{title}

{description}

- ); + ) } diff --git a/apps/docs/app/docs/[[...slug]]/page.tsx b/apps/docs/app/docs/[[...slug]]/page.tsx index fd64ba1..119b23b 100644 --- a/apps/docs/app/docs/[[...slug]]/page.tsx +++ b/apps/docs/app/docs/[[...slug]]/page.tsx @@ -1,25 +1,20 @@ -import { source } from '@/lib/source'; -import { - DocsPage, - DocsBody, - DocsDescription, - DocsTitle, -} from 'fumadocs-ui/page'; -import { notFound } from 'next/navigation'; -import defaultMdxComponents from 'fumadocs-ui/mdx'; -import type { Metadata } from 'next'; +import defaultMdxComponents from 'fumadocs-ui/mdx' +import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page' +import type { Metadata } from 'next' +import { notFound } from 'next/navigation' +import { source } from '@/lib/source' interface PageProps { - params: Promise<{ slug?: string[] }>; + params: Promise<{ slug?: string[] }> } export default async function Page(props: PageProps) { - const params = await props.params; - const page = source.getPage(params.slug); + const params = await props.params + const page = source.getPage(params.slug) - if (!page) notFound(); + if (!page) notFound() - const MDX = page.data.body; + const MDX = page.data.body return ( @@ -29,21 +24,21 @@ export default async function Page(props: PageProps) { - ); + ) } export async function generateStaticParams() { - return source.generateParams(); + return source.generateParams() } export async function generateMetadata(props: PageProps): Promise { - const params = await props.params; - const page = source.getPage(params.slug); + const params = await props.params + const page = source.getPage(params.slug) - if (!page) notFound(); + if (!page) notFound() return { title: page.data.title, description: page.data.description, - }; + } } diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx index 04c158e..3985f7b 100644 --- a/apps/docs/app/docs/layout.tsx +++ b/apps/docs/app/docs/layout.tsx @@ -1,12 +1,12 @@ -import { DocsLayout } from 'fumadocs-ui/layouts/docs'; -import { baseOptions } from '@/lib/layout.shared'; -import { source } from '@/lib/source'; -import type { ReactNode } from 'react'; +import { DocsLayout } from 'fumadocs-ui/layouts/docs' +import type { ReactNode } from 'react' +import { baseOptions } from '@/lib/layout.shared' +import { source } from '@/lib/source' export default function Layout({ children }: { children: ReactNode }) { return ( {children} - ); + ) } diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index b6543d4..9afa8d2 100644 --- a/apps/docs/app/layout.tsx +++ b/apps/docs/app/layout.tsx @@ -1,8 +1,8 @@ -import { RootProvider } from 'fumadocs-ui/provider'; -import 'fumadocs-ui/style.css'; -import './globals.css'; -import type { ReactNode } from 'react'; -import type { Metadata } from 'next'; +import { RootProvider } from 'fumadocs-ui/provider' +import 'fumadocs-ui/style.css' +import './globals.css' +import type { Metadata } from 'next' +import type { ReactNode } from 'react' export const metadata: Metadata = { title: { @@ -11,7 +11,7 @@ export const metadata: Metadata = { }, description: 'Purpose-built component library for agent interfaces. Trust, transparency, and accessibility by default.', -}; +} export default function RootLayout({ children }: { children: ReactNode }) { return ( @@ -20,5 +20,5 @@ export default function RootLayout({ children }: { children: ReactNode }) { {children} - ); + ) } diff --git a/apps/docs/content/docs/components/core/meta.json b/apps/docs/content/docs/components/core/meta.json index 16e3fc4..928b488 100644 --- a/apps/docs/content/docs/components/core/meta.json +++ b/apps/docs/content/docs/components/core/meta.json @@ -1,4 +1,16 @@ { "title": "Core", - "pages": ["button", "text-input", "select", "badge", "spinner", "alert", "dialog", "tabs", "table", "card", "accordion"] + "pages": [ + "button", + "text-input", + "select", + "badge", + "spinner", + "alert", + "dialog", + "tabs", + "table", + "card", + "accordion" + ] } diff --git a/apps/docs/content/docs/meta.json b/apps/docs/content/docs/meta.json index ca88e73..985def9 100644 --- a/apps/docs/content/docs/meta.json +++ b/apps/docs/content/docs/meta.json @@ -1,4 +1,12 @@ { "title": "Documentation", - "pages": ["getting-started", "design-principles", "tokens", "components", "patterns", "theming", "recipes"] + "pages": [ + "getting-started", + "design-principles", + "tokens", + "components", + "patterns", + "theming", + "recipes" + ] } diff --git a/apps/docs/content/docs/patterns/meta.json b/apps/docs/content/docs/patterns/meta.json index f20859b..4785cf9 100644 --- a/apps/docs/content/docs/patterns/meta.json +++ b/apps/docs/content/docs/patterns/meta.json @@ -1,4 +1,12 @@ { "title": "Patterns", - "pages": ["agent-chat", "source-attribution", "confidence-display", "multi-agent", "streaming", "error-handling", "accessibility"] + "pages": [ + "agent-chat", + "source-attribution", + "confidence-display", + "multi-agent", + "streaming", + "error-handling", + "accessibility" + ] } diff --git a/apps/docs/global.d.ts b/apps/docs/global.d.ts index 35306c6..5894ae0 100644 --- a/apps/docs/global.d.ts +++ b/apps/docs/global.d.ts @@ -1 +1 @@ -declare module '*.css'; +declare module '*.css' diff --git a/apps/docs/lib/layout.shared.tsx b/apps/docs/lib/layout.shared.tsx index 3080d0d..e2a2fd3 100644 --- a/apps/docs/lib/layout.shared.tsx +++ b/apps/docs/lib/layout.shared.tsx @@ -1,4 +1,4 @@ -import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'; +import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared' export function baseOptions(): BaseLayoutProps { return { @@ -17,5 +17,5 @@ export function baseOptions(): BaseLayoutProps { external: true, }, ], - }; + } } diff --git a/apps/docs/lib/source.ts b/apps/docs/lib/source.ts index 0edc758..12e7475 100644 --- a/apps/docs/lib/source.ts +++ b/apps/docs/lib/source.ts @@ -1,7 +1,7 @@ -import { docs } from '@/.source'; -import { loader } from 'fumadocs-core/source'; +import { loader } from 'fumadocs-core/source' +import { docs } from '@/.source' export const source = loader({ baseUrl: '/docs', source: docs.toFumadocsSource(), -}); +}) diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs index bb54628..636752e 100644 --- a/apps/docs/next.config.mjs +++ b/apps/docs/next.config.mjs @@ -1,15 +1,15 @@ -import { createMDX } from 'fumadocs-mdx/next'; -import { fileURLToPath } from 'url'; -import path from 'path'; +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import { createMDX } from 'fumadocs-mdx/next' -const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const __dirname = path.dirname(fileURLToPath(import.meta.url)) /** @type {import('next').NextConfig} */ const config = { reactStrictMode: true, outputFileTracingRoot: path.resolve(__dirname, '../../'), -}; +} -const withMDX = createMDX(); +const withMDX = createMDX() -export default withMDX(config); +export default withMDX(config) diff --git a/apps/docs/postcss.config.mjs b/apps/docs/postcss.config.mjs index 5d6d845..a869506 100644 --- a/apps/docs/postcss.config.mjs +++ b/apps/docs/postcss.config.mjs @@ -3,6 +3,6 @@ const config = { plugins: { '@tailwindcss/postcss': {}, }, -}; +} -export default config; +export default config diff --git a/apps/docs/source.config.ts b/apps/docs/source.config.ts index 0b6ee4d..4605ea8 100644 --- a/apps/docs/source.config.ts +++ b/apps/docs/source.config.ts @@ -1,7 +1,7 @@ -import { defineDocs, defineConfig } from 'fumadocs-mdx/config'; +import { defineConfig, defineDocs } from 'fumadocs-mdx/config' export const docs = defineDocs({ dir: 'content/docs', -}); +}) -export default defineConfig(); +export default defineConfig() diff --git a/apps/docs/tailwind.config.ts b/apps/docs/tailwind.config.ts index 8d673e5..0f0041f 100644 --- a/apps/docs/tailwind.config.ts +++ b/apps/docs/tailwind.config.ts @@ -1,5 +1,5 @@ -import { createPreset } from 'fumadocs-ui/tailwind-plugin'; -import type { Config } from 'tailwindcss'; +import { createPreset } from 'fumadocs-ui/tailwind-plugin' +import type { Config } from 'tailwindcss' const config: Config = { content: [ @@ -9,6 +9,6 @@ const config: Config = { './node_modules/fumadocs-ui/dist/**/*.js', ], presets: [createPreset()], -}; +} -export default config; +export default config diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json index d064c44..8ba9017 100644 --- a/apps/docs/tsconfig.json +++ b/apps/docs/tsconfig.json @@ -14,12 +14,8 @@ } ], "paths": { - "@/*": [ - "./*" - ], - "@/.source": [ - "./.source" - ] + "@/*": ["./*"], + "@/.source": ["./.source"] }, "allowJs": true, "incremental": true, @@ -33,9 +29,5 @@ "next-env.d.ts", ".next/types/**/*.ts" ], - "exclude": [ - "node_modules", - ".next", - "dist" - ] + "exclude": ["node_modules", ".next", "dist"] } diff --git a/apps/playground/src/App.tsx b/apps/playground/src/App.tsx index fc00a74..22708cc 100644 --- a/apps/playground/src/App.tsx +++ b/apps/playground/src/App.tsx @@ -1,20 +1,19 @@ -import { useState } from "react"; -import { ThemeProvider } from "@surf-kit/theme"; -import { FullPageDemo, LIVE_API_URL } from "./demos/full-page/FullPageDemo"; -import { ShowcasePage } from "./demos/showcase/ShowcasePage"; +import { ThemeProvider } from '@surf-kit/theme' +import { useState } from 'react' +import { FullPageDemo, LIVE_API_URL } from './demos/full-page/FullPageDemo' +import { ShowcasePage } from './demos/showcase/ShowcasePage' -type Page = "chat" | "showcase"; +type Page = 'chat' | 'showcase' export function App() { - const [page, setPage] = useState("chat"); + const [page, setPage] = useState('chat') return (
{/* Header */} @@ -26,46 +25,38 @@ export function App() { alt="Surf Kit" className="w-7 h-7 rounded-md" /> - - Surf - + Surf / - - Playground - + Playground - {LIVE_API_URL ? `Live: ${LIVE_API_URL}` : "Mock API"} + {LIVE_API_URL ? `Live: ${LIVE_API_URL}` : 'Mock API'}
{/* Right — page tabs */} {/* Main content */}
- {page === "chat" ? : } + {page === 'chat' ? : }
- ); + ) } function PageTab({ @@ -73,20 +64,21 @@ function PageTab({ isActive, onClick, }: { - label: string; - isActive: boolean; - onClick: () => void; + label: string + isActive: boolean + onClick: () => void }) { return ( - ); + ) } diff --git a/apps/playground/src/demos/full-page/FullPageDemo.tsx b/apps/playground/src/demos/full-page/FullPageDemo.tsx index 5a53cf2..c0a34c0 100644 --- a/apps/playground/src/demos/full-page/FullPageDemo.tsx +++ b/apps/playground/src/demos/full-page/FullPageDemo.tsx @@ -1,48 +1,39 @@ -import React, { useCallback, useEffect, useRef, useState } from "react"; -import { useAgentChat, useCharacterDrain } from "@surf-kit/agent/hooks"; -import { - AgentResponseView, - TypewriterText, - type ChatMessage, -} from "@surf-kit/agent"; - -export const LIVE_API_URL = import.meta.env.VITE_SURF_API_URL as - | string - | undefined; - -const base = import.meta.env.BASE_URL; - -const BG_IMAGES = [ - `${base}branding/bg.jpg`, - `${base}branding/bg2.jpg`, - `${base}branding/bg3.jpg`, -]; +import { AgentResponseView, type ChatMessage, TypewriterText } from '@surf-kit/agent' +import { useAgentChat, useCharacterDrain } from '@surf-kit/agent/hooks' +import type React from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' + +export const LIVE_API_URL = import.meta.env.VITE_SURF_API_URL as string | undefined + +const base = import.meta.env.BASE_URL + +const BG_IMAGES = [`${base}branding/bg.jpg`, `${base}branding/bg2.jpg`, `${base}branding/bg3.jpg`] const CHAT_CONFIG = { - apiUrl: LIVE_API_URL ?? "/api/v1", - streamPath: "/chat/stream", - feedbackPath: "/feedback", - conversationsPath: "/conversations", + apiUrl: LIVE_API_URL ?? '/api/v1', + streamPath: '/chat/stream', + feedbackPath: '/feedback', + conversationsPath: '/conversations', timeout: 60000, -}; +} /* ------------------------------------------------------------------ */ /* Phase indicator */ /* ------------------------------------------------------------------ */ function PhaseIndicator({ phase }: { phase: string }) { - if (phase === "idle") return null; + if (phase === 'idle') return null const labels: Record = { - thinking: "Thinking...", - retrieving: "Searching knowledge base...", - generating: "Writing response...", - waiting: "Still working, please wait...", - }; + thinking: 'Thinking...', + retrieving: 'Searching knowledge base...', + generating: 'Writing response...', + waiting: 'Still working, please wait...', + } return (
- {phase === "verifying" ? ( + {phase === 'verifying' ? ( <> - ); + ) } /* ------------------------------------------------------------------ */ @@ -70,12 +61,12 @@ function MessageBubble({ onFollowUp, noEntryAnimation = false, }: { - msg: ChatMessage; - onFollowUp: (text: string) => void; - noEntryAnimation?: boolean; + msg: ChatMessage + onFollowUp: (text: string) => void + noEntryAnimation?: boolean }) { - const isUser = msg.role === "user"; - const suggestions = msg.response?.follow_up_suggestions ?? []; + const isUser = msg.role === 'user' + const suggestions = msg.response?.follow_up_suggestions ?? [] if (isUser) { return ( @@ -84,16 +75,16 @@ function MessageBubble({ {msg.content}
- ); + ) } return (
{msg.agent && (
- {msg.agent.replace("_agent", "").replace("_", " ")} + {msg.agent.replace('_agent', '').replace('_', ' ')}
)} @@ -101,9 +92,7 @@ function MessageBubble({ {msg.response ? ( ) : ( -

- {msg.content} -

+

{msg.content}

)}
@@ -111,6 +100,7 @@ function MessageBubble({
{suggestions.map((s) => (
)} - ); + ) } /* ------------------------------------------------------------------ */ @@ -132,20 +122,19 @@ function StreamingBubble({ streamingContent, onDrainingChange, }: { - streamingContent: string; - onDrainingChange: (isDraining: boolean) => void; + streamingContent: string + onDrainingChange: (isDraining: boolean) => void }) { - const { displayed: displayedContent, isDraining } = - useCharacterDrain(streamingContent); + const { displayed: displayedContent, isDraining } = useCharacterDrain(streamingContent) // Always notify parent of the current draining state, including on mount. // The previous prevDrainingRef pattern skipped the initial notification // when isDraining was true at mount time, leaving the parent stuck at false. useEffect(() => { - onDrainingChange(isDraining); - }, [isDraining, onDrainingChange]); + onDrainingChange(isDraining) + }, [isDraining, onDrainingChange]) - if (!displayedContent) return null; + if (!displayedContent) return null return (
@@ -156,7 +145,7 @@ function StreamingBubble({

- ); + ) } /* ------------------------------------------------------------------ */ @@ -165,21 +154,21 @@ function StreamingBubble({ /* ------------------------------------------------------------------ */ function BackgroundSlideshow() { - const [bgIndex, setBgIndex] = useState(0); + const [bgIndex, setBgIndex] = useState(0) useEffect(() => { BG_IMAGES.forEach((src) => { - const img = new Image(); - img.src = src; - }); - }, []); + const img = new Image() + img.src = src + }) + }, []) useEffect(() => { const id = setInterval(() => { - setBgIndex((prev) => (prev + 1) % BG_IMAGES.length); - }, 15000); - return () => clearInterval(id); - }, []); + setBgIndex((prev) => (prev + 1) % BG_IMAGES.length) + }, 15000) + return () => clearInterval(id) + }, []) return ( <> @@ -194,7 +183,7 @@ function BackgroundSlideshow() { /> ))} - ); + ) } /* ------------------------------------------------------------------ */ @@ -202,142 +191,125 @@ function BackgroundSlideshow() { /* ------------------------------------------------------------------ */ export function FullPageDemo() { - const { state, actions } = useAgentChat(CHAT_CONFIG); - const threadRef = useRef(null); - const inputRef = useRef(null); - const [isDraining, setIsDraining] = useState(false); - const prevIsLoadingRef = useRef(state.isLoading); - const prevIsDrainingRef = useRef(isDraining); - const justStoppedLoading = prevIsLoadingRef.current && !state.isLoading; - const justStoppedDraining = prevIsDrainingRef.current && !isDraining; - prevIsLoadingRef.current = state.isLoading; - prevIsDrainingRef.current = isDraining; + const { state, actions } = useAgentChat(CHAT_CONFIG) + const threadRef = useRef(null) + const inputRef = useRef(null) + const [isDraining, setIsDraining] = useState(false) + const prevIsLoadingRef = useRef(state.isLoading) + const prevIsDrainingRef = useRef(isDraining) + const justStoppedLoading = prevIsLoadingRef.current && !state.isLoading + const justStoppedDraining = prevIsDrainingRef.current && !isDraining + prevIsLoadingRef.current = state.isLoading + prevIsDrainingRef.current = isDraining const handleDrainingChange = useCallback((draining: boolean) => { - setIsDraining(draining); - }, []); + setIsDraining(draining) + }, []) useEffect(() => { - const el = threadRef.current; - if (el) el.scrollTop = el.scrollHeight; - }, [state.messages, state.streamPhase]); + const el = threadRef.current + if (el) el.scrollTop = el.scrollHeight + }, []) const handleSend = useCallback(() => { - const text = state.inputValue.trim(); - if (!text || state.isLoading) return; - actions.sendMessage(text); + const text = state.inputValue.trim() + if (!text || state.isLoading) return + actions.sendMessage(text) if (inputRef.current) { - inputRef.current.style.height = "auto"; + inputRef.current.style.height = 'auto' } - }, [state.inputValue, state.isLoading, actions]); + }, [state.inputValue, state.isLoading, actions]) const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { - if (e.key === "Enter" && !e.shiftKey) { - e.preventDefault(); - handleSend(); + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault() + handleSend() } }, [handleSend], - ); + ) - const isEmpty = state.messages.length === 0 && !state.isLoading; + const isEmpty = state.messages.length === 0 && !state.isLoading return (
{/* Message thread */} -
+
{isEmpty ? ( -
- {/* Pulsing icon */} - Surf Kit - -
-

- Hi, I'm Surf. -

-

- -

-
- -
- {[ - "What pricing plans are available?", - "How do I get started with the API?", - "What are the rate limits for the Pro plan?", - ].map((chip) => ( - - ))} -
+
+ {/* Pulsing icon */} + Surf Kit + +
+

Hi, I'm Surf.

+

+ +

- ) : ( -
- {state.messages.map((msg, i) => { - // Hide the final assistant message while the drain animation - // is still typing it out — prevents the jump from streaming - // bubble to fully-rendered message. - const isLastAssistant = - i === state.messages.length - 1 && msg.role === "assistant"; - if (isLastAssistant && isDraining) return null; - - return ( - { - actions.setInputValue(text); - inputRef.current?.focus(); - }} - /> - ); - })} -
- )} - {state.isLoading && - !state.streamingContent && ( -
- +
+ {[ + 'What pricing plans are available?', + 'How do I get started with the API?', + 'What are the rate limits for the Pro plan?', + ].map((chip) => ( + + ))}
- )} +
+ ) : ( +
+ {state.messages.map((msg, i) => { + // Hide the final assistant message while the drain animation + // is still typing it out — prevents the jump from streaming + // bubble to fully-rendered message. + const isLastAssistant = i === state.messages.length - 1 && msg.role === 'assistant' + if (isLastAssistant && isDraining) return null + + return ( + { + actions.setInputValue(text) + inputRef.current?.focus() + }} + /> + ) + })} +
+ )} + + {state.isLoading && !state.streamingContent && ( +
+ +
+ )} {state.error && (
- - Error:{" "} - - - {state.error.message} - + Error: + {state.error.message} {state.error.retryable && (
- ); + ) } diff --git a/apps/playground/src/demos/layouts/LayoutDemos.tsx b/apps/playground/src/demos/layouts/LayoutDemos.tsx index f057a92..5c8820d 100644 --- a/apps/playground/src/demos/layouts/LayoutDemos.tsx +++ b/apps/playground/src/demos/layouts/LayoutDemos.tsx @@ -1,11 +1,11 @@ -import React, { useState } from 'react' import { + AgentEmbed, AgentPanel, AgentWidget, - AgentEmbed, ConversationList, type ConversationSummary, } from '@surf-kit/agent' +import { useState } from 'react' const DEMO_ENDPOINT = '/api/v1' @@ -61,14 +61,22 @@ export function LayoutDemos() {
diff --git a/apps/playground/src/demos/showcase/ShowcasePage.tsx b/apps/playground/src/demos/showcase/ShowcasePage.tsx index 3ae2905..651cf8a 100644 --- a/apps/playground/src/demos/showcase/ShowcasePage.tsx +++ b/apps/playground/src/demos/showcase/ShowcasePage.tsx @@ -1,48 +1,47 @@ -import { useCallback, useEffect, useState } from "react"; -import { useAgentChat, useCharacterDrain } from "@surf-kit/agent/hooks"; import { + AgentAvatar, + AgentLabel, + ErrorResponse, + FollowUpChips, MessageBubble, MessageComposer, - WelcomeScreen, StreamingMessage, + type StreamState, ThinkingIndicator, VerificationProgress, - FollowUpChips, - ErrorResponse, - AgentAvatar, - AgentLabel, - type StreamState, -} from "@surf-kit/agent"; -import { Badge, Tabs } from "@surf-kit/core"; -import { ThemeProvider, type ColorMode } from "@surf-kit/theme"; -import { LIVE_API_URL } from "../full-page/FullPageDemo"; - -import { PrimitivesSection } from "./sections/PrimitivesSection"; -import { ButtonsInputsSection } from "./sections/ButtonsInputsSection"; -import { FeedbackSection } from "./sections/FeedbackSection"; -import { OverlaysSection } from "./sections/OverlaysSection"; -import { NavigationSection } from "./sections/NavigationSection"; -import { DataDisplaySection } from "./sections/DataDisplaySection"; -import { LayoutSection } from "./sections/LayoutSection"; -import { AgentComponentsSection } from "./sections/AgentComponentsSection"; -import { AgentStreamingSection } from "./sections/AgentStreamingSection"; -import { MCPSection } from "./sections/MCPSection"; -import { IconsSection } from "./sections/IconsSection"; -import { HooksSection } from "./sections/HooksSection"; + WelcomeScreen, +} from '@surf-kit/agent' +import { useAgentChat, useCharacterDrain } from '@surf-kit/agent/hooks' +import { Badge, Tabs } from '@surf-kit/core' +import { type ColorMode, ThemeProvider } from '@surf-kit/theme' +import { useCallback, useEffect, useState } from 'react' +import { LIVE_API_URL } from '../full-page/FullPageDemo' +import { AgentComponentsSection } from './sections/AgentComponentsSection' +import { AgentStreamingSection } from './sections/AgentStreamingSection' +import { ButtonsInputsSection } from './sections/ButtonsInputsSection' +import { DataDisplaySection } from './sections/DataDisplaySection' +import { FeedbackSection } from './sections/FeedbackSection' +import { HooksSection } from './sections/HooksSection' +import { IconsSection } from './sections/IconsSection' +import { LayoutSection } from './sections/LayoutSection' +import { MCPSection } from './sections/MCPSection' +import { NavigationSection } from './sections/NavigationSection' +import { OverlaysSection } from './sections/OverlaysSection' +import { PrimitivesSection } from './sections/PrimitivesSection' const CHAT_CONFIG = { - apiUrl: LIVE_API_URL ?? "/api/v1", - streamPath: "/chat/stream", - feedbackPath: "/feedback", - conversationsPath: "/conversations", + apiUrl: LIVE_API_URL ?? '/api/v1', + streamPath: '/chat/stream', + feedbackPath: '/feedback', + conversationsPath: '/conversations', timeout: 60000, -}; +} const WELCOME_QUESTIONS = [ - "What pricing plans are available?", - "How do I get started with the API?", - "What are the rate limits for the Pro plan?", -]; + 'What pricing plans are available?', + 'How do I get started with the API?', + 'What are the rate limits for the Pro plan?', +] /* ------------------------------------------------------------------ */ /* Streaming bubble — uses library's character drain */ @@ -53,29 +52,29 @@ function ShowcaseStreamingBubble({ streamPhase, onDrainingChange, }: { - streamingContent: string; - streamPhase: string; - onDrainingChange: (isDraining: boolean) => void; + streamingContent: string + streamPhase: string + onDrainingChange: (isDraining: boolean) => void }) { - const { displayed, isDraining } = useCharacterDrain(streamingContent); + const { displayed, isDraining } = useCharacterDrain(streamingContent) useEffect(() => { - onDrainingChange(isDraining); - }, [isDraining, onDrainingChange]); + onDrainingChange(isDraining) + }, [isDraining, onDrainingChange]) // Build a StreamState to pass to StreamingMessage const streamState: StreamState = { active: true, - phase: streamPhase as StreamState["phase"], + phase: streamPhase as StreamState['phase'], content: displayed, sources: [], agent: null, agentLabel: null, - }; + } - if (!displayed && streamPhase === "idle") return null; + if (!displayed && streamPhase === 'idle') return null - return ; + return } /* ------------------------------------------------------------------ */ @@ -83,40 +82,36 @@ function ShowcaseStreamingBubble({ /* ------------------------------------------------------------------ */ function ShowcaseChat() { - const { state, actions } = useAgentChat(CHAT_CONFIG); - const [isDraining, setIsDraining] = useState(false); + const { state, actions } = useAgentChat(CHAT_CONFIG) + const [isDraining, setIsDraining] = useState(false) const handleDrainingChange = useCallback((draining: boolean) => { - setIsDraining(draining); - }, []); + setIsDraining(draining) + }, []) - const isEmpty = state.messages.length === 0 && !state.isLoading; + const isEmpty = state.messages.length === 0 && !state.isLoading // Filter messages for display (hide last assistant while draining) const visibleMessages = state.messages.filter((msg, i) => { - const isLastAssistant = - i === state.messages.length - 1 && msg.role === "assistant"; - return !(isLastAssistant && isDraining); - }); + const isLastAssistant = i === state.messages.length - 1 && msg.role === 'assistant' + return !(isLastAssistant && isDraining) + }) // Get last message's follow-up suggestions - const lastMsg = state.messages[state.messages.length - 1]; + const lastMsg = state.messages[state.messages.length - 1] const suggestions = - lastMsg?.role === "assistant" && !isDraining - ? lastMsg.response?.follow_up_suggestions ?? [] - : []; + lastMsg?.role === 'assistant' && !isDraining + ? (lastMsg.response?.follow_up_suggestions ?? []) + : [] return (
{/* Chat header */}
- - - - {LIVE_API_URL ? "Live" : "Mock API"} + + + + {LIVE_API_URL ? 'Live' : 'Mock API'}
@@ -132,12 +127,7 @@ function ShowcaseChat() { ) : (
{visibleMessages.map((msg) => ( - + ))}
)} @@ -145,14 +135,14 @@ function ShowcaseChat() { {/* Phase indicators using library components */} {state.isLoading && !state.streamingContent && (
- {state.streamPhase === "thinking" && } - {state.streamPhase === "retrieving" && ( + {state.streamPhase === 'thinking' && } + {state.streamPhase === 'retrieving' && ( )} - {state.streamPhase === "generating" && ( + {state.streamPhase === 'generating' && ( )} - {state.streamPhase === "waiting" && ( + {state.streamPhase === 'waiting' && ( )}
@@ -168,7 +158,7 @@ function ShowcaseChat() { )} {/* Verification in-progress */} - {state.streamPhase === "verifying" && state.streamingContent && ( + {state.streamPhase === 'verifying' && state.streamingContent && (
@@ -204,7 +194,7 @@ function ShowcaseChat() { />
- ); + ) } /* ------------------------------------------------------------------ */ @@ -212,20 +202,24 @@ function ShowcaseChat() { /* ------------------------------------------------------------------ */ const THEME_OPTIONS: { label: string; value: ColorMode }[] = [ - { label: "Brand", value: "brand" }, - { label: "Dark", value: "dark" }, - { label: "Light", value: "light" }, -]; + { label: 'Brand', value: 'brand' }, + { label: 'Dark', value: 'dark' }, + { label: 'Light', value: 'light' }, +] function ThemeSwitcher({ value, onChange, }: { - value: ColorMode; - onChange: (mode: ColorMode) => void; + value: ColorMode + onChange: (mode: ColorMode) => void }) { return ( -
+
{THEME_OPTIONS.map((opt) => ( ))}
- ); + ) } /* ------------------------------------------------------------------ */ @@ -254,23 +248,23 @@ function ShowcaseSections({ colorMode, onColorModeChange, }: { - colorMode: ColorMode; - onColorModeChange: (mode: ColorMode) => void; + colorMode: ColorMode + onColorModeChange: (mode: ColorMode) => void }) { const tabItems = [ - { key: "primitives", title: "Primitives", content: }, - { key: "inputs", title: "Buttons & Inputs", content: }, - { key: "feedback", title: "Feedback", content: }, - { key: "overlays", title: "Overlays", content: }, - { key: "navigation", title: "Navigation", content: }, - { key: "data", title: "Data Display", content: }, - { key: "layout", title: "Layout", content: }, - { key: "agent", title: "Agent", content: }, - { key: "streaming", title: "Streaming", content: }, - { key: "mcp", title: "MCP", content: }, - { key: "icons", title: "Icons", content: }, - { key: "hooks", title: "Hooks", content: }, - ]; + { key: 'primitives', title: 'Primitives', content: }, + { key: 'inputs', title: 'Buttons & Inputs', content: }, + { key: 'feedback', title: 'Feedback', content: }, + { key: 'overlays', title: 'Overlays', content: }, + { key: 'navigation', title: 'Navigation', content: }, + { key: 'data', title: 'Data Display', content: }, + { key: 'layout', title: 'Layout', content: }, + { key: 'agent', title: 'Agent', content: }, + { key: 'streaming', title: 'Streaming', content: }, + { key: 'mcp', title: 'MCP', content: }, + { key: 'icons', title: 'Icons', content: }, + { key: 'hooks', title: 'Hooks', content: }, + ] return (
@@ -279,7 +273,7 @@ function ShowcaseSections({
- ); + ) } /* ------------------------------------------------------------------ */ @@ -287,7 +281,7 @@ function ShowcaseSections({ /* ------------------------------------------------------------------ */ export function ShowcasePage() { - const [colorMode, setColorMode] = useState("brand"); + const [colorMode, setColorMode] = useState('brand') return ( @@ -299,12 +293,9 @@ export function ShowcasePage() { {/* Right: component showcase tabs */}
- +
- ); + ) } diff --git a/apps/playground/src/demos/showcase/sections/AgentComponentsSection.tsx b/apps/playground/src/demos/showcase/sections/AgentComponentsSection.tsx index 26d74e1..fe987a5 100644 --- a/apps/playground/src/demos/showcase/sections/AgentComponentsSection.tsx +++ b/apps/playground/src/demos/showcase/sections/AgentComponentsSection.tsx @@ -1,35 +1,35 @@ -import { useState } from "react"; import { AgentAvatar, - AgentLabel, AgentHandoff, + AgentLabel, + ConfidenceBadge, + ConfidenceBreakdownView, + ConfidenceMeter, + FeedbackDialog, RoutingIndicator, + SourceBadge, SourceCard, SourceList, - SourceBadge, - ConfidenceBadge, - ConfidenceMeter, - ConfidenceBreakdownView, + ThumbsFeedback, VerificationBadge, VerificationDetail, - ThumbsFeedback, - FeedbackDialog, -} from "@surf-kit/agent"; -import { Stack, Text, Separator } from "@surf-kit/core"; +} from '@surf-kit/agent' +import { Separator, Stack, Text } from '@surf-kit/core' +import { useState } from 'react' import { mockAgents, - mockSources, mockConfidenceHigh, - mockConfidenceMedium, mockConfidenceLow, - mockVerificationPassed, - mockVerificationFlagged, + mockConfidenceMedium, + mockSources, mockVerificationFailed, -} from "../showcase-data"; -import { SectionWrapper } from "./SectionWrapper"; + mockVerificationFlagged, + mockVerificationPassed, +} from '../showcase-data' +import { SectionWrapper } from './SectionWrapper' export function AgentComponentsSection() { - const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false); + const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false) return ( @@ -92,11 +92,7 @@ export function AgentComponentsSection() { - + SourceBadge: @@ -124,10 +120,7 @@ export function AgentComponentsSection() { - +
@@ -144,10 +137,7 @@ export function AgentComponentsSection() { - +
@@ -161,22 +151,20 @@ export function AgentComponentsSection() { - console.log("Feedback:", id, rating) - } + onFeedback={(id, rating) => console.log('Feedback:', id, rating)} onNegative={() => setFeedbackDialogOpen(true)} /> setFeedbackDialogOpen(false)} onSubmit={(comment) => { - console.log("Feedback submitted:", comment); - setFeedbackDialogOpen(false); + console.log('Feedback submitted:', comment) + setFeedbackDialogOpen(false) }} /> - ); + ) } diff --git a/apps/playground/src/demos/showcase/sections/AgentStreamingSection.tsx b/apps/playground/src/demos/showcase/sections/AgentStreamingSection.tsx index 81c0c8b..6556a1d 100644 --- a/apps/playground/src/demos/showcase/sections/AgentStreamingSection.tsx +++ b/apps/playground/src/demos/showcase/sections/AgentStreamingSection.tsx @@ -1,22 +1,22 @@ -import { useState } from "react"; import { - ThinkingIndicator, - TypingIndicator, - TextGlimmer, - TypewriterText, + RetrievalProgress, StreamingList, StreamingStructure, + TextGlimmer, + ThinkingIndicator, ToolExecution, - RetrievalProgress, + TypewriterText, + TypingIndicator, VerificationProgress, -} from "@surf-kit/agent"; -import { Stack, Text, Separator, Button } from "@surf-kit/core"; -import { mockSources } from "../showcase-data"; -import { SectionWrapper } from "./SectionWrapper"; +} from '@surf-kit/agent' +import { Button, Separator, Stack, Text } from '@surf-kit/core' +import { useState } from 'react' +import { mockSources } from '../showcase-data' +import { SectionWrapper } from './SectionWrapper' export function AgentStreamingSection() { - const [streamingActive, setStreamingActive] = useState(true); - const [listItems, setListItems] = useState(["Item 1", "Item 2"]); + const [streamingActive, setStreamingActive] = useState(true) + const [listItems, setListItems] = useState(['Item 1', 'Item 2']) return ( @@ -87,21 +87,12 @@ export function AgentStreamingSection() { - @@ -115,9 +106,9 @@ export function AgentStreamingSection() { @@ -151,12 +142,9 @@ export function AgentStreamingSection() { VerificationProgress - + - ); + ) } diff --git a/apps/playground/src/demos/showcase/sections/ButtonsInputsSection.tsx b/apps/playground/src/demos/showcase/sections/ButtonsInputsSection.tsx index 307e085..d790155 100644 --- a/apps/playground/src/demos/showcase/sections/ButtonsInputsSection.tsx +++ b/apps/playground/src/demos/showcase/sections/ButtonsInputsSection.tsx @@ -1,33 +1,33 @@ -import { useState } from "react"; import { Button, - IconButton, - Toggle, - ToggleGroup, - TextInput, - TextArea, - Select, + Calendar, Checkbox, + IconButton, RadioGroup, - Switch, SearchInput, + Select, + Separator, Slider, - Calendar, Stack, + Switch, Text, - Separator, -} from "@surf-kit/core"; -import { Settings, Copy, Check } from "@surf-kit/icons"; -import { SectionWrapper } from "./SectionWrapper"; + TextArea, + TextInput, + Toggle, + ToggleGroup, +} from '@surf-kit/core' +import { Check, Copy, Settings } from '@surf-kit/icons' +import { useState } from 'react' +import { SectionWrapper } from './SectionWrapper' export function ButtonsInputsSection() { - const [switchOn, setSwitchOn] = useState(false); - const [checkboxOn, setCheckboxOn] = useState(true); - const [radioValue, setRadioValue] = useState("light"); - const [selectKey, setSelectKey] = useState("pro"); - const [searchValue, setSearchValue] = useState(""); - const [sliderValue, setSliderValue] = useState(65); - const [toggleOn, setToggleOn] = useState(false); + const [switchOn, setSwitchOn] = useState(false) + const [checkboxOn, setCheckboxOn] = useState(true) + const [radioValue, setRadioValue] = useState('light') + const [selectKey, setSelectKey] = useState('pro') + const [searchValue, setSearchValue] = useState('') + const [sliderValue, setSliderValue] = useState(65) + const [toggleOn, setToggleOn] = useState(false) return ( @@ -76,12 +76,7 @@ export function ButtonsInputsSection() { Toggle & ToggleGroup - + B @@ -106,20 +101,9 @@ export function ButtonsInputsSection() { TextInput & TextArea - - -