mirror of
https://github.com/vercel/chat.git
synced 2026-09-14 18:32:29 +08:00
3ae34b3ed1
Third repo in the design sync, after `vercel/geistdocs#216`/`#218` and `vercel/flags#457`. Upgrades the docs site to `@vercel/geistdocs@1.19.2` and brings the homepage onto the Geist design system. `apps/docs` is `private: true`, so no changeset. ## Dependency `1.19.2` peers on `next: ^16.2.11` and the app pinned `16.2.6`, so **next moves to `16.2.12`** alongside it — without that pnpm reports an unmet peer. Installed via `pnpm add --save-exact` per AGENTS.md. All 20 geistdocs subpaths this app imports still exist in 1.19.2; no API breakage. The footer needed no work: 1.16 already shipped the prop-less Vercel-directory `<Footer />`. ## Layout — `home-grid.css` is gone Deleted `app/styles/home-grid.css` (368 lines) and its `global.css` import, and rebuilt each section on `grid-cols-12` / `col-span-*`: | section | before (CSS) | after | |---|---|---| | OSS stats | 2×2 → 4×1 @768 | `col-span-6 min-[768px]:col-span-3` | | Features | 2-up + full-width 3rd → 3×1 @961 | `col-span-12 sm:col-span-6 lg:col-span-4` | | Code | stacked → sidebar 1/3 + code 2/3 @961 | `lg:col-span-8` / `lg:col-span-4`, pinned with `col-start` + `row-start` | | Integrations | 1×5 → tall left + 2×2 @961 | `lg:col-span-4 lg:row-span-2` + four `lg:col-span-4` | The code section needs explicit `col-start`/`row-start` because the sidebar follows the code in the DOM but sits left of it from `lg`. Other layout changes: - **Single gutter at the page root** (`mx-auto w-full max-w-[1448px] px-4 sm:px-6`); removed the per-section horizontal padding that duplicated it, so every section's content lands on the navbar/footer content edge. - **Content widened 1114px → 1400px**, the navbar's content span (1448 − 2×24). - **Bottom gap above the footer trimmed ~320px → ~176px** — layout `pb-32` → `pb-16` and page `pb-24 sm:pb-36` → `pb-12 sm:pb-16`. Three paddings were stacking. The 768px stats breakpoint is preserved with `min-[768px]:` — there's no Tailwind equivalent here (`md`=601, `lg`=961) and four KPI columns at 601px would be ~140px each. ## Design — ported from vercel.com/ai-sdk Read off the flagged source in `front/apps/vercel-marketing/.../ai-sdk`, not the live site. - **Code showcase tabs** → the `SlidingTabs` primitive: pill labels with an animated indicator, full keyboard nav (arrows/Home/End, roving tabindex), and an invisible-bold label so the tab doesn't shift width when it bolds. Four tabs per group with dot pagination for the rest, tabs above the code block. Copied into `components/ui/sliding-tabs.tsx` with `cn` rewired and the `no-scrollbar` utility inlined (geistdocs doesn't define it). - **"Scale with confidence"** → heading and paragraph on one bottom-aligned row (cols 1–4 / 8–12), then four bordered cards `col-span-12 md:col-span-6 lg:col-span-3`. Type mapped from their primitives: `SectionHeading size="48"` → `text-heading-40 lg:text-heading-48`, `SectionParagraph size="18"` → `text-copy-16 lg:text-copy-18`. - **Feature row** → icon + muted eyebrow over a prominent statement. Note this **inverts the previous emphasis**: the heading is now the small muted label and the description the larger line, matching the reference. Icons come from geistdocs' own set so they match Geist's line weight: `IconLinked`, `IconWorkflow`, `IconAcronymTs`. - **Get-started install snippet** → the shared `CommandPrompt`, with its buttons on one row from `lg`. - Remaining headings converted to `text-heading-*`. - Navbar logo drops `height={22}` to take `LogoChatSdk`'s new 18px default (renders 106.9×22 → 87.4×18). ## Two fixes worth calling out **`lib/utils.ts` — `cn` was silently dropping typography.** Geist's `text-copy-*`/`text-heading-*` share the `text-` prefix with colour utilities, so stock `tailwind-merge` classifies them as colours and drops the size whenever both appear in one `cn()` call. geistdocs ships a `cn` that registers them as `font-size` for exactly this reason but doesn't export it, so the config is replicated here. This was a latent bug across the app, not just the new code. **`Analytics`/`SpeedInsights` moved out of the `"use client"` provider** into the server layout. Both emit `<script>`, and scripts rendered inside a client tree never execute — so analytics wasn't firing on client navigations. React 19.2.7 (pulled in by this bump) now warns about it; the bug predates it. ## Verification - `pnpm --filter docs build` passes (270 pages), `tsc --noEmit` clean, `biome check` clean. - Rendered output spot-checked for the tab strip, dot pagination, card classes, and feature icons. **`pnpm validate` could not be run** — it needs Node ≥20.19 and this machine is on v20.11.1 (`pnpm check` dies on `styleText` from `node:util`). Biome, tsc and build were run directly instead, but the knip and test legs are unrun and should be confirmed in CI. Signed-off-by: christopherkindl <53372002+christopherkindl@users.noreply.github.com>
99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
import type {
|
|
GeistdocsAgentReadinessConfig,
|
|
GeistdocsGithubConfig,
|
|
} from "@vercel/geistdocs/config";
|
|
import { LogoChatSdk } from "@vercel/geistdocs/assets/logos/logo-chat-sdk";
|
|
|
|
export const Logo = () => <LogoChatSdk />;
|
|
|
|
export const github: GeistdocsGithubConfig = {
|
|
branch: "main",
|
|
editPath: "apps/docs/content/docs/{path}",
|
|
owner: "vercel",
|
|
repo: "chat",
|
|
};
|
|
|
|
export const nav = [
|
|
{
|
|
label: "Docs",
|
|
href: "/docs",
|
|
},
|
|
{
|
|
label: "Adapters",
|
|
href: "/adapters",
|
|
},
|
|
{
|
|
label: "Resources",
|
|
href: "/resources",
|
|
},
|
|
{
|
|
label: "API",
|
|
href: "/docs/api",
|
|
},
|
|
{
|
|
label: "GitHub",
|
|
href: `https://github.com/${github.owner}/${github.repo}/`,
|
|
},
|
|
];
|
|
|
|
export const suggestions = [
|
|
"What platforms does Chat SDK support?",
|
|
"How do I set up a Slack bot with Next.js?",
|
|
"How do I send cards and interactive messages?",
|
|
"How do I stream AI responses in real-time?",
|
|
];
|
|
|
|
export const title = "Chat SDK Documentation";
|
|
|
|
export const prompt =
|
|
"You are a helpful assistant specializing in answering questions about Chat SDK, a unified SDK for building chat bots across Slack, Microsoft Teams, Google Chat, Discord, and more.";
|
|
|
|
export const agent: GeistdocsAgentReadinessConfig = {
|
|
product: {
|
|
name: "Chat SDK",
|
|
description:
|
|
"A unified TypeScript SDK for building chat bots and agents across Slack, Microsoft Teams, Google Chat, Discord, Telegram, WhatsApp, and more — with type-safe handlers, JSX cards, and AI streaming.",
|
|
category: "Chat bot SDK",
|
|
audience: ["developers building chat bots and agents", "Vercel users"],
|
|
useCases: [
|
|
"Build a bot once and run it on every major chat platform",
|
|
"Send rich interactive cards with JSX",
|
|
"Stream AI responses into chat threads in real time",
|
|
],
|
|
},
|
|
instructions: [
|
|
"See /adapters for the catalog of official, vendor-official, and community platform and state adapters; each adapter page is available as Markdown with a .md extension.",
|
|
"Use /sitemap.md to identify the most relevant documentation pages before answering broad questions.",
|
|
"Use /llms.txt for an index of every documentation page, or /llms-full.txt for the complete documentation corpus as Markdown context.",
|
|
"Fetch individual documentation pages with a .md or .mdx extension for focused page-level context.",
|
|
"Do not assume API, authentication, OpenAPI, or MCP support unless it is listed in this file.",
|
|
],
|
|
links: [
|
|
{
|
|
label: "Chat SDK source",
|
|
href: `https://github.com/${github.owner}/${github.repo}`,
|
|
description: "Source repository for Chat SDK and its adapters",
|
|
},
|
|
{
|
|
label: "Chat SDK agent skill",
|
|
href: "https://chat-sdk.dev/AGENTS.md",
|
|
description:
|
|
"Agent skill with instructions for building Chat SDK bots",
|
|
},
|
|
],
|
|
};
|
|
|
|
export const translations = {
|
|
en: {
|
|
displayName: "English",
|
|
},
|
|
};
|
|
|
|
export const basePath: string | undefined = undefined;
|
|
|
|
/**
|
|
* Unique identifier for this site, used in markdown request tracking analytics.
|
|
* Each site using geistdocs should set this to a unique value (e.g. "ai-sdk-docs", "next-docs").
|
|
*/
|
|
export const siteId: string | undefined = "chat-sdk";
|