diff --git a/apps/apollo-vertex/app/_meta.ts b/apps/apollo-vertex/app/_meta.ts index 152665709..133fd3f89 100644 --- a/apps/apollo-vertex/app/_meta.ts +++ b/apps/apollo-vertex/app/_meta.ts @@ -6,6 +6,7 @@ export default { templates: "Templates", guidelines: "Guidelines", experiment: "Experiment", + "vertex-components": "Vertex Components", "data-querying": "Data Querying", localization: "Localization", mcp: "MCP Server", diff --git a/apps/apollo-vertex/app/patterns/ai-chat/page.mdx b/apps/apollo-vertex/app/patterns/ai-chat/page.mdx index b28514cef..9aad19945 100644 --- a/apps/apollo-vertex/app/patterns/ai-chat/page.mdx +++ b/apps/apollo-vertex/app/patterns/ai-chat/page.mdx @@ -1,12 +1,15 @@ import { AiChatTemplate } from '@/templates/AiChatTemplate'; +import { PreviewFullScreen } from '@/app/_components/preview-full-screen'; # AI Chat A composable AI chat UI component for Apollo Vertex. Built with React, TypeScript, and Tailwind CSS. Designed to work with [TanStack AI](https://tanstack.com/ai) — you bring `useChat` and a connection adapter, the component handles the chrome (scroll, input, loading, suggestions, errors) while you control how messages and tool calls render. -
- -
+ + + + +> **All visual states and sub-components →** [Component Preview](/vertex-components/ai-chat/preview) ## Features diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts new file mode 100644 index 000000000..22630face --- /dev/null +++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts @@ -0,0 +1,218 @@ +import type { UIMessage } from "@tanstack/ai-client"; + +export const MOCK_MESSAGES_BASIC: UIMessage[] = [ + { + id: "1", + role: "user", + parts: [{ type: "text", content: "What is Apollo Design System?" }], + createdAt: new Date(Date.now() - 120000), + }, + { + id: "2", + role: "assistant", + parts: [ + { + type: "text", + content: + "Apollo is UiPath's open-source design system. It provides a unified component library with **design tokens**, **React components**, and **Web Components** for building consistent user interfaces.", + }, + ], + createdAt: new Date(Date.now() - 60000), + }, +]; + +export const MOCK_MESSAGES_MARKDOWN: UIMessage[] = [ + { + id: "1", + role: "user", + parts: [ + { + type: "text", + content: "Show me all the markdown formatting you support.", + }, + ], + createdAt: new Date(), + }, + { + id: "2", + role: "assistant", + parts: [ + { + type: "text", + content: `Here's a comprehensive demo of supported markdown: + +## Headings & Text + +This is a paragraph with **bold**, *italic*, and \`inline code\`. + +> This is a blockquote with some important information. + +--- + +## Lists + +**Unordered list:** +- First item +- Second item with **bold** +- Third item + +**Ordered list:** +1. Step one +2. Step two +3. Step three + +## Code Block + +\`\`\`typescript +interface AiChatProps { + messages: UIMessage[]; + isLoading: boolean; + onSendMessage: (content: string) => void; +} +\`\`\` + +## Table + +| Component | Status | Description | +|-----------|--------|-------------| +| AiChat | Ready | Main chat shell | +| AiChatMessage | Ready | Message renderer | +| AiChatInput | Ready | Text input | +| AiChatMarkdown | Ready | Markdown renderer | + +## Links + +Check [Apollo UI](https://github.com/UiPath/apollo-ui) for more info.`, + }, + ], + createdAt: new Date(), + }, +]; + +export const MOCK_MESSAGES_CONVERSATION: UIMessage[] = [ + { + id: "1", + role: "user", + parts: [{ type: "text", content: "Can you help me set up a new project?" }], + createdAt: new Date(Date.now() - 300000), + }, + { + id: "2", + role: "assistant", + parts: [ + { + type: "text", + content: + "Of course! I'd be happy to help. What kind of project are you looking to create?", + }, + ], + createdAt: new Date(Date.now() - 240000), + }, + { + id: "3", + role: "user", + parts: [ + { + type: "text", + content: "A React app with Tailwind CSS and TypeScript.", + }, + ], + createdAt: new Date(Date.now() - 180000), + }, + { + id: "4", + role: "assistant", + parts: [ + { + type: "text", + content: + "Great choice! Here's how to get started:\n\n1. Run `npx create-next-app@latest`\n2. Select **TypeScript** and **Tailwind CSS** during setup\n3. Install Apollo components:\n\n```bash\nnpx shadcn@latest add @uipath/button\n```\n\nWould you like me to walk through any of these steps in detail?", + }, + ], + createdAt: new Date(Date.now() - 120000), + }, + { + id: "5", + role: "user", + parts: [{ type: "text", content: "Yes, explain step 3 please." }], + createdAt: new Date(Date.now() - 60000), + }, + { + id: "6", + role: "assistant", + parts: [ + { + type: "text", + content: + "The `shadcn` CLI copies component source code directly into your project. When you run the command, it will:\n\n- Create `components/ui/button.tsx` in your project\n- Add any required dependencies to `package.json`\n- Set up the `cn()` utility if not present\n\nYou own the code — modify it however you need.", + }, + ], + createdAt: new Date(), + }, +]; + +export const MOCK_MESSAGES_WITH_CHOICES: UIMessage[] = [ + { + id: "1", + role: "user", + parts: [{ type: "text", content: "What presentation style should I use?" }], + createdAt: new Date(), + }, + { + id: "2", + role: "assistant", + parts: [ + { + type: "text", + content: "Here are some options based on your audience:", + }, + { + type: "tool-call", + id: "call-1", + name: "presentChoices", + arguments: "{}", + state: "input-complete" as const, + }, + { + type: "tool-result", + toolCallId: "call-1", + state: "complete" as const, + content: JSON.stringify({ + type: "choices", + prompt: "Pick a presentation style:", + options: [ + { id: "1", label: "Executive Summary", recommended: true }, + { id: "2", label: "Technical Deep Dive" }, + { id: "3", label: "Workshop Format" }, + ], + }), + }, + ], + createdAt: new Date(), + }, +]; + +export const MOCK_SOURCES_BASIC: Record< + string, + { label: string; url: string }[] +> = { + "2": [ + { label: "Apollo UI GitHub", url: "https://github.com/UiPath/apollo-ui" }, + { label: "Tailwind CSS", url: "https://tailwindcss.com" }, + { label: "shadcn/ui", url: "https://ui.shadcn.com" }, + ], +}; + +export const MOCK_ATTACHMENTS_BASIC: Record< + string, + { name: string; type: string; size: number }[] +> = { + "1": [{ name: "Q4_Report.pdf", type: "application/pdf", size: 245000 }], +}; + +export const MOCK_CHOICE_OPTIONS = [ + { id: "1", label: "Option A — Recommended", recommended: true }, + { id: "2", label: "Option B — Alternative" }, + { id: "3", label: "Option C — Experimental" }, + { id: "4", label: "Option D — Conservative" }, +]; diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx new file mode 100644 index 000000000..c6de1cef7 --- /dev/null +++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx @@ -0,0 +1,523 @@ +// oxlint-disable eslint/max-lines -- preview page documents many visual states +"use client"; + +import { Maximize2, Minimize2 } from "lucide-react"; +import { type ReactNode, useState } from "react"; +import { AiChat } from "@/registry/ai-chat/components/ai-chat"; +import { AiChatCodeBlock } from "@/registry/ai-chat/components/ai-chat-code-block"; +import { AiChatEmptyState } from "@/registry/ai-chat/components/ai-chat-empty-state"; +import { AiChatFlow } from "@/registry/ai-chat/components/ai-chat-flow"; +import { AiChatInput } from "@/registry/ai-chat/components/ai-chat-input"; +import { AiChatMarkdown } from "@/registry/ai-chat/components/ai-chat-markdown"; +import { AiChatMessage } from "@/registry/ai-chat/components/ai-chat-message"; +import { AiChatMessageActions } from "@/registry/ai-chat/components/ai-chat-message-actions"; +import { AiChatSuggestions } from "@/registry/ai-chat/components/ai-chat-suggestions"; +import type { ToolResultFlow } from "@/registry/ai-chat/utils/ai-chat-utils"; +import { Button } from "@/registry/button/button"; +import { + Dialog, + DialogClose, + DialogContent, + DialogTitle, + DialogTrigger, +} from "@/registry/dialog/dialog"; +import { + MOCK_ATTACHMENTS_BASIC, + MOCK_CHOICE_OPTIONS, + MOCK_MESSAGES_BASIC, + MOCK_MESSAGES_CONVERSATION, + MOCK_MESSAGES_MARKDOWN, + MOCK_MESSAGES_WITH_CHOICES, + MOCK_SOURCES_BASIC, +} from "./mock-data"; +import { ThinkingDemo } from "./thinking-demo"; + +function noop(..._args: unknown[]) { + // no-op for preview +} + +const MOCK_FLOW: ToolResultFlow = { + type: "flow", + steps: [ + { + id: "step-1", + prompt: "What type of content are you creating?", + options: [ + { id: "blog", label: "Blog post" }, + { id: "email", label: "Email campaign" }, + { id: "social", label: "Social media posts" }, + ], + }, + { + id: "step-2", + prompt: "Who is your target audience?", + options: [ + { id: "developers", label: "Developers" }, + { id: "business", label: "Business leaders" }, + { id: "general", label: "General audience" }, + ], + canSkip: true, + }, + { + id: "step-3", + prompt: "What tone would you like?", + options: [ + { id: "professional", label: "Professional" }, + { id: "casual", label: "Casual & friendly" }, + { id: "technical", label: "Technical & precise" }, + ], + }, + ], +}; + +function FlowDemo() { + const [flowKey, setFlowKey] = useState(0); + const [result, setResult] = useState(null); + + if (result !== null) { + return ( +
+

+ {result} +

+ +
+ ); + } + + return ( + { + setResult( + answers.map((a, i) => `Step ${i + 1}: ${a.answer}`).join(" · "), + ); + }} + onDismiss={() => { + setResult("(dismissed)"); + }} + /> + ); +} + +function SectionHeader({ + title, + description, +}: { + title: string; + description: string; +}) { + return ( +
+

{title}

+

{description}

+
+ ); +} + +function PreviewCard({ + children, + className, + title, +}: { + children: ReactNode; + className?: string; + title?: string; +}) { + const [isOpen, setIsOpen] = useState(false); + const baseClass = `border rounded-lg bg-background overflow-hidden ${className ?? ""}`; + + if (!title) { + return
{children}
; + } + + return ( + +
+ {!isOpen && children} + + + +
+ + {title} + + + +
{children}
+ + + ); +} + +function renderBasicMsg(msg: (typeof MOCK_MESSAGES_BASIC)[number]) { + return ( + + ); +} + +export default function AiChatPreviewPage() { + return ( +
+
+

+ {"AI Chat — Component Preview"} +

+

+ {"All visual states and sub-components rendered with mock data."} +

+
+ + {/* ── 1. Empty State (default) ────────────────────────── */} +
+ + + + +
+ + {/* ── 2. Empty State (with suggestions) ──────────────── */} +
+ + + + } + suggestions={["Create a React app", "Debug my code", "Write tests"]} + /> + +
+ + {/* ── 3. Basic Conversation with timestamps ──────────── */} +
+ + + + {MOCK_MESSAGES_BASIC.map((msg) => renderBasicMsg(msg))} + + +
+ + {/* ── 4. Multi-turn Conversation ─────────────────────── */} +
+ + + + {MOCK_MESSAGES_CONVERSATION.map((msg) => ( + + ))} + + +
+ + {/* ── 5. Markdown + Code Block ───────────────────────── */} +
+ + + + {MOCK_MESSAGES_MARKDOWN.map((msg) => ( + + ))} + + +
+ + {/* ── 6. Loading State ───────────────────────────────── */} +
+ +
+ + + {renderBasicMsg(MOCK_MESSAGES_BASIC[0])} + + + +

+ {"Thinking indicator (interactive)"} +

+ + +
+
+ + {/* ── 7. Error + Retry ───────────────────────────────── */} +
+ + + + {MOCK_MESSAGES_BASIC.map((msg) => renderBasicMsg(msg))} + + +
+ + {/* ── 8. Suggestion Buttons ──────────────────────────── */} +
+ + + + {MOCK_MESSAGES_WITH_CHOICES.map((msg) => ( + + ))} + + +
+ + {/* ── 9. Message Actions ─────────────────────────────── */} +
+ +
+ +

+ {"Assistant actions"} +

+ + + +

+ {"User actions"} +

+ + +
+
+ + {/* ── 10. Edit Mode ──────────────────────────────────── */} +
+ + + + {MOCK_MESSAGES_BASIC.map((msg) => renderBasicMsg(msg))} + + +
+ + {/* ── 11. Isolated Sub-Components ────────────────────── */} +
+ +
+ +

+ {"AiChatSuggestions (with recommended)"} +

+ + + + +

+ {"AiChatFlow (multi-step)"} +

+ + + + +

+ {"AiChatInput (with text + attachment)"} +

+ + + + +

+ {"AiChatCodeBlock"} +

+ + {`import { AiChat } from "@/components/ui/ai-chat"; + +function App() { + return ; +}`} + + + + +

+ {"AiChatMarkdown (standalone)"} +

+ + {`Here's a quick example with **bold**, *italic*, \`code\`, and a [link](https://example.com).\n\n| Feature | Supported |\n|---------|----------|\n| Tables | Yes |\n| Code | Yes |`} + + +
+
+
+ ); +} diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx new file mode 100644 index 000000000..12041faa1 --- /dev/null +++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx @@ -0,0 +1,77 @@ +"use client"; + +import { AnimatePresence, motion } from "framer-motion"; +import { useState } from "react"; +import { AiChatThinking } from "@/registry/ai-chat/components/ai-chat-thinking"; +import { useThinkingLabel } from "@/registry/ai-chat/hooks/use-thinking-label"; +import { Button } from "@/registry/button/button"; + +const ENTRANCE_EASE = [0.22, 1, 0.36, 1] as const; +const LABEL_SLIDE = 6; + +const shimmerStyle = { + display: "inline-block", + whiteSpace: "nowrap", + lineHeight: 1.3, + fontSize: "14px", + fontWeight: 500, + backgroundImage: + "linear-gradient(90deg, var(--muted-foreground) 0%, var(--muted-foreground) 30%, #6C5AEF 42%, var(--foreground) 50%, #69C7DD 58%, var(--muted-foreground) 70%, var(--muted-foreground) 100%)", + backgroundSize: "200% 100%", + backgroundClip: "text", + WebkitBackgroundClip: "text", + color: "transparent", + animation: "ap-chat-shimmer-thinking 2.4s linear infinite", +} as const; + +export function ThinkingDemo() { + const [isThinking, setIsThinking] = useState(false); + const { label, key: labelKey } = useThinkingLabel(); + + return ( +
+ +
+ + + + + {isThinking ? label : "Thinking…"} + + + +
+ +
+ ); +} diff --git a/apps/apollo-vertex/lib/auth.ts b/apps/apollo-vertex/lib/auth.ts index 3f8cfcc4e..3dff14828 100644 --- a/apps/apollo-vertex/lib/auth.ts +++ b/apps/apollo-vertex/lib/auth.ts @@ -1,4 +1,4 @@ -import { useQueryClient } from "@tanstack/react-query"; +import type { useQueryClient } from "@tanstack/react-query"; import PKCEChallenge from "pkce-challenge"; import { toast } from "sonner"; import { z } from "zod"; diff --git a/apps/apollo-vertex/next-env.d.ts b/apps/apollo-vertex/next-env.d.ts index 9edff1c7c..c4b7818fb 100644 --- a/apps/apollo-vertex/next-env.d.ts +++ b/apps/apollo-vertex/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/types/routes.d.ts"; +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/apps/apollo-vertex/package.json b/apps/apollo-vertex/package.json index 15cb90d6b..dfa26c66a 100644 --- a/apps/apollo-vertex/package.json +++ b/apps/apollo-vertex/package.json @@ -69,6 +69,7 @@ "embla-carousel-react": "^8.6.0", "eventsource-parser": "^3.0.6", "framer-motion": "^12.26.2", + "highlight.js": "^11.11.1", "i18next": "^25.8.1", "input-otp": "^1.4.2", "jwt-decode": "^4.0.0", diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json index 170d79712..a9835a596 100644 --- a/apps/apollo-vertex/registry.json +++ b/apps/apollo-vertex/registry.json @@ -66,6 +66,20 @@ "color-sidebar-accent-foreground": "var(--sidebar-accent-foreground)", "color-sidebar-border": "var(--sidebar-border)", "color-sidebar-ring": "var(--sidebar-ring)", + "color-ai-chat": "var(--ai-chat)", + "color-ai-chat-foreground": "var(--ai-chat-foreground)", + "color-ai-chat-accent": "var(--ai-chat-accent)", + "color-ai-chat-accent-foreground": "var(--ai-chat-accent-foreground)", + "color-ai-chat-bubble-user": "var(--ai-chat-bubble-user)", + "color-ai-chat-bubble-user-foreground": "var(--ai-chat-bubble-user-foreground)", + "color-ai-chat-bubble-assistant": "var(--ai-chat-bubble-assistant)", + "color-ai-chat-bubble-assistant-foreground": "var(--ai-chat-bubble-assistant-foreground)", + "color-ai-chat-border": "var(--ai-chat-border)", + "color-ai-chat-input": "var(--ai-chat-input)", + "color-ai-chat-input-foreground": "var(--ai-chat-input-foreground)", + "color-ai-chat-ring": "var(--ai-chat-ring)", + "color-ai-chat-muted": "var(--ai-chat-muted)", + "color-ai-chat-muted-foreground": "var(--ai-chat-muted-foreground)", "font-sans": "var(--font-sans)" }, "light": { @@ -120,6 +134,23 @@ "sidebar-accent-foreground": "oklch(0.1660 0.0283 203.3380)", "sidebar-border": "oklch(0.9237 0.0133 262.3780)", "sidebar-ring": "oklch(0.64 0.115 208)", + "ai-chat": "oklch(0.985 0.002 260)", + "ai-chat-foreground": "oklch(0.2394 0.0455 252.45)", + "ai-chat-accent": "oklch(0.64 0.115 208)", + "ai-chat-accent-foreground": "oklch(1 0 0)", + "ai-chat-bubble-user": "oklch(0.955 0.008 252)", + "ai-chat-bubble-user-foreground": "oklch(0.2394 0.0455 252.45)", + "ai-chat-bubble-assistant": "oklch(0.96 0.020 275)", + "ai-chat-bubble-assistant-foreground": "oklch(0.2394 0.0455 252.45)", + "ai-chat-border": "oklch(0.92 0.008 260)", + "ai-chat-input": "oklch(0.975 0.004 260)", + "ai-chat-input-foreground": "oklch(0.2394 0.0455 252.45)", + "ai-chat-ring": "oklch(0.64 0.115 208)", + "ai-chat-muted": "oklch(0.955 0.006 260)", + "ai-chat-muted-foreground": "oklch(0.50 0.020 260)", + "font-sans": "Inter, ui-sans-serif, sans-serif, system-ui", + "font-serif": "IBM Plex Serif, ui-serif, serif", + "font-mono": "IBM Plex Mono, ui-monospace, monospace", "radius": "0.625rem", "shadow-x": "0", "shadow-y": "0px", @@ -152,7 +183,8 @@ "--info-fg": "oklch(0.49 0.12 210)", "--success-fg": "oklch(0.46 0.10 152)", "--destructive-fg": "oklch(0.50 0.14 18)", - "ai-gradient": "linear-gradient(100.64deg, rgb(238, 224, 255) 8.29%, rgb(207, 217, 255) 88.73%)" + "ai-gradient": "linear-gradient(100.64deg, rgb(238, 224, 255) 8.29%, rgb(207, 217, 255) 88.73%)", + "ai-gradient-strong": "linear-gradient(97.73deg, #6C5AEF 8.79%, #69C7DD 91.48%)" }, "dark": { "background": "oklch(0.2100 0.0300 258.5000)", @@ -206,6 +238,23 @@ "sidebar-accent-foreground": "oklch(0.9525 0.0110 225.9830)", "sidebar-border": "oklch(0.9525 0.0110 225.9830)", "sidebar-ring": "oklch(0.69 0.112 207)", + "ai-chat": "oklch(0.19 0.025 260)", + "ai-chat-foreground": "oklch(0.95 0.010 225)", + "ai-chat-accent": "oklch(0.69 0.112 207)", + "ai-chat-accent-foreground": "oklch(0.1660 0.0283 203.34)", + "ai-chat-bubble-user": "oklch(0.28 0.035 255)", + "ai-chat-bubble-user-foreground": "oklch(0.95 0.010 225)", + "ai-chat-bubble-assistant": "oklch(0.25 0.030 270)", + "ai-chat-bubble-assistant-foreground": "oklch(0.95 0.010 225)", + "ai-chat-border": "oklch(0.30 0.040 258)", + "ai-chat-input": "oklch(0.22 0.030 258)", + "ai-chat-input-foreground": "oklch(0.95 0.010 225)", + "ai-chat-ring": "oklch(0.69 0.112 207)", + "ai-chat-muted": "oklch(0.26 0.030 258)", + "ai-chat-muted-foreground": "oklch(0.65 0.020 258)", + "font-sans": "Inter, ui-sans-serif, sans-serif, system-ui", + "font-serif": "IBM Plex Serif, ui-serif, serif", + "font-mono": "IBM Plex Mono, ui-monospace, monospace", "radius": "0.625rem", "shadow-x": "0", "shadow-y": "0px", @@ -223,7 +272,8 @@ "shadow-2xl": "0 0px 12px 0px hsl(0 0% 0% / 0.25)", "tracking-normal": "0em", "spacing": "0.25rem", - "ai-gradient": "linear-gradient(98.69deg, rgb(108, 90, 239) 8.79%, rgb(105, 199, 221) 91.48%)" + "ai-gradient": "linear-gradient(98.69deg, rgb(108, 90, 239) 8.79%, rgb(105, 199, 221) 91.48%)", + "ai-gradient-strong": "linear-gradient(97.73deg, #6C5AEF 8.79%, #69C7DD 91.48%)" } } }, @@ -272,7 +322,16 @@ "react-markdown", "remark-gfm" ], - "registryDependencies": [], + "registryDependencies": [ + "avatar", + "button", + "tooltip", + "dropdown-menu", + "scroll-area", + "skeleton", + "badge", + "kbd" + ], "files": [ { "path": "registry/ai-chat/types.ts", @@ -339,6 +398,21 @@ "type": "registry:lib", "target": "components/ui/ai-chat/hooks/use-sticky-scroll.ts" }, + { + "path": "registry/ai-chat/hooks/use-typewriter.ts", + "type": "registry:lib", + "target": "components/ui/ai-chat/hooks/use-typewriter.ts" + }, + { + "path": "registry/ai-chat/hooks/use-thinking-label.ts", + "type": "registry:lib", + "target": "components/ui/ai-chat/hooks/use-thinking-label.ts" + }, + { + "path": "registry/ai-chat/components/ai-chat-provider.tsx", + "type": "registry:ui", + "target": "components/ui/ai-chat/components/ai-chat-provider.tsx" + }, { "path": "registry/ai-chat/components/ai-chat.tsx", "type": "registry:ui", @@ -359,6 +433,11 @@ "type": "registry:ui", "target": "components/ui/ai-chat/components/ai-chat-loading.tsx" }, + { + "path": "registry/ai-chat/components/ai-chat-thinking.tsx", + "type": "registry:ui", + "target": "components/ui/ai-chat/components/ai-chat-thinking.tsx" + }, { "path": "registry/ai-chat/components/ai-chat-input.tsx", "type": "registry:ui", @@ -368,6 +447,31 @@ "path": "registry/ai-chat/components/ai-chat-suggestions.tsx", "type": "registry:ui", "target": "components/ui/ai-chat/components/ai-chat-suggestions.tsx" + }, + { + "path": "registry/ai-chat/components/ai-chat-message-actions.tsx", + "type": "registry:ui", + "target": "components/ui/ai-chat/components/ai-chat-message-actions.tsx" + }, + { + "path": "registry/ai-chat/components/ai-chat-code-block.tsx", + "type": "registry:ui", + "target": "components/ui/ai-chat/components/ai-chat-code-block.tsx" + }, + { + "path": "registry/ai-chat/components/ai-chat-empty-state.tsx", + "type": "registry:ui", + "target": "components/ui/ai-chat/components/ai-chat-empty-state.tsx" + }, + { + "path": "registry/ai-chat/components/icons/autopilot.tsx", + "type": "registry:ui", + "target": "components/ui/ai-chat/components/icons/autopilot.tsx" + }, + { + "path": "registry/ai-chat/components/icons/autopilot-gradient.tsx", + "type": "registry:ui", + "target": "components/ui/ai-chat/components/icons/autopilot-gradient.tsx" } ] }, diff --git a/apps/apollo-vertex/registry/ai-chat/adapters/agenthub/tools.ts b/apps/apollo-vertex/registry/ai-chat/adapters/agenthub/tools.ts index 855440c6e..26488eca0 100644 --- a/apps/apollo-vertex/registry/ai-chat/adapters/agenthub/tools.ts +++ b/apps/apollo-vertex/registry/ai-chat/adapters/agenthub/tools.ts @@ -1,4 +1,4 @@ -import { convertSchemaToJsonSchema, type AnyClientTool } from "@tanstack/ai"; +import { type AnyClientTool, convertSchemaToJsonSchema } from "@tanstack/ai"; import type { AgentHubVendor } from "./types"; export function buildToolDefinitions( diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx new file mode 100644 index 000000000..58bd052fa --- /dev/null +++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx @@ -0,0 +1,164 @@ +"use client"; + +import "highlight.js/styles/github.min.css"; + +// Dark-mode override: github-dark-dimmed palette scoped to `.dark` +const DARK_HLJS_STYLE = ` +.dark .hljs { + color: #adbac7; + background: transparent; +} +.dark .hljs-doctag,.dark .hljs-keyword,.dark .hljs-meta .hljs-keyword,.dark .hljs-template-tag,.dark .hljs-template-variable,.dark .hljs-type,.dark .hljs-variable.language_ { + color: #f47067; +} +.dark .hljs-title,.dark .hljs-title.class_,.dark .hljs-title.class_.inherited__,.dark .hljs-title.function_ { + color: #dcbdfb; +} +.dark .hljs-attr,.dark .hljs-attribute,.dark .hljs-literal,.dark .hljs-meta,.dark .hljs-number,.dark .hljs-operator,.dark .hljs-variable,.dark .hljs-selector-attr,.dark .hljs-selector-class,.dark .hljs-selector-id { + color: #6cb6ff; +} +.dark .hljs-regexp,.dark .hljs-string,.dark .hljs-meta .hljs-string { + color: #96d0ff; +} +.dark .hljs-built_in,.dark .hljs-symbol { + color: #f69d50; +} +.dark .hljs-comment,.dark .hljs-code,.dark .hljs-formula { + color: #768390; +} +.dark .hljs-name,.dark .hljs-quote,.dark .hljs-selector-tag,.dark .hljs-selector-pseudo { + color: #8ddb8c; +} +.dark .hljs-subst { + color: #adbac7; +} +.dark .hljs-section { + color: #316dca; + font-weight: bold; +} +.dark .hljs-bullet { + color: #eac55f; +} +.dark .hljs-emphasis { + color: #adbac7; + font-style: italic; +} +.dark .hljs-strong { + color: #adbac7; + font-weight: bold; +} +.dark .hljs-addition { + color: #b4f1b4; + background-color: #1b4721; +} +.dark .hljs-deletion { + color: #ffd8d3; + background-color: #78191b; +} +`; + +import hljs from "highlight.js/lib/core"; +import bash from "highlight.js/lib/languages/bash"; +import css from "highlight.js/lib/languages/css"; +import javascript from "highlight.js/lib/languages/javascript"; +import json from "highlight.js/lib/languages/json"; +import python from "highlight.js/lib/languages/python"; +import sql from "highlight.js/lib/languages/sql"; +import typescript from "highlight.js/lib/languages/typescript"; +import xml from "highlight.js/lib/languages/xml"; +import { Check, Copy } from "lucide-react"; +import { useEffect, useRef, useState } from "react"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/registry/tooltip/tooltip"; + +hljs.registerLanguage("javascript", javascript); +hljs.registerLanguage("js", javascript); +hljs.registerLanguage("typescript", typescript); +hljs.registerLanguage("ts", typescript); +hljs.registerLanguage("tsx", typescript); +hljs.registerLanguage("jsx", javascript); +hljs.registerLanguage("python", python); +hljs.registerLanguage("py", python); +hljs.registerLanguage("bash", bash); +hljs.registerLanguage("sh", bash); +hljs.registerLanguage("shell", bash); +hljs.registerLanguage("json", json); +hljs.registerLanguage("css", css); +hljs.registerLanguage("html", xml); +hljs.registerLanguage("xml", xml); +hljs.registerLanguage("sql", sql); + +const COPY_LABEL = "Copy code"; +const COPIED_LABEL = "Copied!"; + +interface AiChatCodeBlockProps { + children: string; + language?: string; +} + +export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) { + const [copied, setCopied] = useState(false); + const codeRef = useRef(null); + + const highlightedHtml = + language && hljs.getLanguage(language) + ? hljs.highlight(children, { language }).value + : hljs.highlightAuto(children).value; + + useEffect(() => { + if (codeRef.current) { + codeRef.current.innerHTML = highlightedHtml; + } + }, [highlightedHtml]); + + const handleCopy = async () => { + await navigator.clipboard.writeText(children); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + const copyLabel = copied ? COPIED_LABEL : COPY_LABEL; + + return ( + <> + +
+
+ {language && ( + + {language} + + )} + + + + + {copyLabel} + +
+ 
+          
+
+
+ + ); +} diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx new file mode 100644 index 000000000..397a8acc4 --- /dev/null +++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx @@ -0,0 +1,31 @@ +"use client"; + +import type { ReactNode } from "react"; + +interface AiChatEmptyStateProps { + title?: string; + description?: string; + icon?: ReactNode; +} + +export function AiChatEmptyState({ + title = "How can I help you?", + description, + icon, +}: AiChatEmptyStateProps) { + return ( +
+ {icon} +
+

+ {title} +

+ {description && ( +

+ {description} +

+ )} +
+
+ ); +} diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx new file mode 100644 index 000000000..71f6fc38b --- /dev/null +++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx @@ -0,0 +1,174 @@ +"use client"; + +import { AnimatePresence, motion } from "framer-motion"; +import { ChevronLeft, ChevronRight, X } from "lucide-react"; +import { useEffect, useState } from "react"; +import type { FlowOption, ToolResultFlow } from "../utils/ai-chat-utils"; + +const EASE = [0.22, 1, 0.36, 1] as const; + +interface AiChatFlowProps { + flow: ToolResultFlow; + onComplete: ( + answers: { stepId: string; prompt: string; answer: string }[], + ) => void; + onDismiss: () => void; + /** Called on mount and on every step change with a resolver for the current step's free-text answer. */ + onFreeTextReady?: (resolve: (text: string) => void) => void; +} + +export function AiChatFlow({ + flow, + onComplete, + onDismiss, + onFreeTextReady, +}: AiChatFlowProps) { + const [stepIndex, setStepIndex] = useState(0); + const [answers, setAnswers] = useState< + { stepId: string; prompt: string; answer: string }[] + >([]); + + const step = flow.steps[stepIndex]; + const isFirst = stepIndex === 0; + const isLast = stepIndex === flow.steps.length - 1; + const total = flow.steps.length; + + const advance = ( + updated: { stepId: string; prompt: string; answer: string }[], + ) => { + if (isLast) { + onComplete(updated); + } else { + setStepIndex((i) => i + 1); + } + }; + + // Notify parent with a fresh resolver whenever the step changes + useEffect(() => { + onFreeTextReady?.((text) => { + const updated = [ + ...answers.filter((a) => a.stepId !== step.id), + { stepId: step.id, prompt: step.prompt, answer: text }, + ]; + setAnswers(updated); + advance(updated); + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [stepIndex]); + + const handleSelect = (option: FlowOption) => { + const answer = option.value ?? option.label; + const updated = [ + ...answers.filter((a) => a.stepId !== step.id), + { stepId: step.id, prompt: step.prompt, answer }, + ]; + setAnswers(updated); + advance(updated); + }; + + const handleBack = () => setStepIndex((i) => Math.max(0, i - 1)); + + const handleSkip = () => { + const updated = [ + ...answers.filter((a) => a.stepId !== step.id), + { stepId: step.id, prompt: step.prompt, answer: "(skipped)" }, + ]; + setAnswers(updated); + advance(updated); + }; + + return ( + + {/* Header: prompt + controls */} +
+ + + {step.prompt} + + + +
+
+ + + {stepIndex + 1} + {"/"} + {total} + + +
+ +
+
+ + {/* Options */} + + + {step.options.map((option, i) => ( +
+ {i > 0 && ( + + ))} + + + + ); +} diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx index f0da010fe..920c2d619 100644 --- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx +++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx @@ -1,105 +1,489 @@ +// oxlint-disable eslint/max-lines -- input bundles file handling, paste, quote chip, and lightbox portal; split would add indirection "use client"; -import { Send, Square, Trash2 } from "lucide-react"; -import type { FormEvent, KeyboardEvent } from "react"; +import { + ArrowUp, + CircleStop, + FileText, + MessageSquareText, + Plus, + X, +} from "lucide-react"; +import { + type ClipboardEvent, + type FocusEvent, + type FormEvent, + forwardRef, + type KeyboardEvent, + type Ref, + useEffect, + useImperativeHandle, + useRef, + useState, +} from "react"; +import { createPortal } from "react-dom"; import { useTranslation } from "react-i18next"; +import { Button } from "@/registry/button/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/dropdown-menu/dropdown-menu"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/registry/tooltip/tooltip"; + +interface PendingFile { + uid: string; + name: string; + size: number; + type: string; + file: File; + thumbnailUrl?: string; +} interface AiChatInputProps { value: string; onChange: (value: string) => void; - onSubmit: () => void; + onSubmit: (files?: File[]) => void; onStop: () => void; - onClear?: () => void; isLoading: boolean; disabled?: boolean; placeholder?: string; - showClearButton?: boolean; hasMessages?: boolean; + maxLength?: number; + initialFiles?: PendingFile[]; + quotedText?: string | null; + onClearQuote?: () => void; +} + +function makePendingFile(file: File, nameOverride?: string): PendingFile { + const uid = crypto.randomUUID(); + const name = nameOverride ?? file.name; + if (file.type.startsWith("image/")) { + return { + uid, + name, + size: file.size, + type: file.type, + file, + thumbnailUrl: URL.createObjectURL(file), + }; + } + return { uid, name, size: file.size, type: file.type, file }; +} + +export interface AiChatInputHandle { + focus: () => void; } -export function AiChatInput({ - value, - onChange, - onSubmit, - onStop, - onClear, - isLoading, - disabled = false, - placeholder, - showClearButton = true, - hasMessages = false, -}: AiChatInputProps) { - const { t } = useTranslation(); - const displayPlaceholder = placeholder ?? t("type_a_message"); - - const submitMessage = () => { - if (!value.trim() || isLoading) return; - onSubmit(); - }; - - const handleSubmit = (e: FormEvent) => { - e.preventDefault(); - submitMessage(); - }; - - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === "Enter" && !e.shiftKey) { +export const AiChatInput = forwardRef( + function AiChatInput( + { + value, + onChange, + onSubmit, + onStop, + isLoading, + disabled = false, + placeholder, + hasMessages = false, + maxLength, + initialFiles = [], + quotedText, + onClearQuote, + }: AiChatInputProps, + ref: Ref, + ) { + const { t } = useTranslation(); + const textareaRef = useRef(null); + const glowRef = useRef(null); + const [pendingFiles, setPendingFiles] = + useState(initialFiles); + const [lightboxUrl, setLightboxUrl] = useState(null); + + useEffect(() => { + if (!lightboxUrl) return; + const handler = (e: globalThis.KeyboardEvent) => { + if (e.key === "Escape") setLightboxUrl(null); + }; + document.addEventListener("keydown", handler); + return () => document.removeEventListener("keydown", handler); + }, [lightboxUrl]); + + useImperativeHandle(ref, () => ({ + focus: () => textareaRef.current?.focus(), + })); + const displayPlaceholder = placeholder ?? "Start with a task or goal"; + + const adjustHeight = () => { + if (!hasMessages) return; + const el = textareaRef.current; + if (!el) return; + el.style.height = "auto"; + el.style.height = `${Math.min(el.scrollHeight, 200)}px`; + }; + + const handleChange = (val: string) => { + if (maxLength && val.length > maxLength) return; + onChange(val); + requestAnimationFrame(adjustHeight); + }; + + const submitMessage = () => { + if (!value.trim()) return; + const files = pendingFiles.map((f) => f.file); + if (files.length > 0) onSubmit(files); + else onSubmit(); + pendingFiles.forEach((f) => { + if (f.thumbnailUrl) URL.revokeObjectURL(f.thumbnailUrl); + }); + setPendingFiles([]); + requestAnimationFrame(() => { + const el = textareaRef.current; + if (el) el.style.height = "auto"; + }); + }; + + const handleSubmit = (e: FormEvent) => { e.preventDefault(); submitMessage(); - } - }; - - return ( -
-
-
) => { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + submitMessage(); + } + }; + + const handleFileClick = () => { + const fileInput = document.createElement("input"); + fileInput.type = "file"; + fileInput.multiple = true; + fileInput.addEventListener("change", () => { + if (!fileInput.files) return; + const newFiles = Array.from(fileInput.files).map((file) => + makePendingFile(file), + ); + setPendingFiles((prev) => [...prev, ...newFiles]); + }); + fileInput.click(); + }; + + const removeFile = (index: number) => { + setPendingFiles((prev) => { + const removed = prev[index]; + if (removed?.thumbnailUrl) URL.revokeObjectURL(removed.thumbnailUrl); + return prev.filter((_, i) => i !== index); + }); + }; + + const handlePaste = (e: ClipboardEvent) => { + const imageFiles: PendingFile[] = Array.from(e.clipboardData.items) + .filter( + (item) => item.kind === "file" && item.type.startsWith("image/"), + ) + .flatMap((item) => { + const file = item.getAsFile(); + if (!file) return []; + const name = + file.name === "" + ? `pasted-image.${file.type.split("/")[1]}` + : file.name; + return [makePendingFile(file, name)]; + }); + if (imageFiles.length > 0) { + e.preventDefault(); + setPendingFiles((prev) => [...prev, ...imageFiles]); + } + }; + + const focusStyles = { + onFocusCapture: (e: FocusEvent) => { + const el = e.currentTarget; + el.style.borderColor = "transparent"; + el.style.backgroundImage = `linear-gradient(var(--background), var(--background)), var(--ai-gradient-strong)`; + el.style.backgroundOrigin = "border-box"; + el.style.backgroundClip = "padding-box, border-box"; + el.style.boxShadow = + "0 0 0 3px color-mix(in oklch, var(--muted-foreground) 10%, transparent)"; + if (glowRef.current) glowRef.current.style.opacity = "0"; + }, + onBlurCapture: (e: FocusEvent) => { + if (!e.currentTarget.contains(e.relatedTarget)) { + const el = e.currentTarget; + el.style.borderColor = ""; + el.style.backgroundImage = ""; + el.style.backgroundOrigin = ""; + el.style.backgroundClip = ""; + el.style.boxShadow = ""; + if (glowRef.current) glowRef.current.style.opacity = ""; + } + }, + }; + + const quoteChip = quotedText && ( +
+