@tanstack/cta-framework-react-cra 0.45.0 → 0.46.2

package/examples/resume/assets/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/examples/resume/assets/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/examples/resume/assets/src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/examples/resume/assets/src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/examples/resume/assets/src/lib/resume-ai-hook.ts

@@ -0,0 +1,21 @@
+import {
+  fetchServerSentEvents,
+  useChat,
+  createChatClientOptions,
+} from '@tanstack/ai-react'
+import type { InferChatMessages } from '@tanstack/ai-react'
+
+// Default chat options for type inference
+const defaultChatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents('/api/resume-chat'),
+})
+
+export type ResumeChatMessages = InferChatMessages<typeof defaultChatOptions>
+
+export const useResumeChat = () => {
+  const chatOptions = createChatClientOptions({
+    connection: fetchServerSentEvents('/api/resume-chat'),
+  })
+
+  return useChat(chatOptions)
+}

package/examples/resume/assets/src/lib/resume-tools.ts

@@ -0,0 +1,165 @@
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+
+import { allJobs, allEducations } from 'content-collections'
+
+// Tool definition for getting jobs by skill
+export const getJobsBySkillToolDef = toolDefinition({
+  name: 'getJobsBySkill',
+  description:
+    'Find all jobs where the candidate used a specific technology or skill. Use this to check if the candidate has experience with particular technologies.',
+  inputSchema: z.object({
+    skill: z
+      .string()
+      .describe(
+        'The skill or technology to search for (e.g., "React", "TypeScript", "Leadership")',
+      ),
+  }),
+  outputSchema: z.array(
+    z.object({
+      jobTitle: z.string(),
+      company: z.string(),
+      location: z.string(),
+      startDate: z.string(),
+      endDate: z.string().optional(),
+      summary: z.string(),
+      tags: z.array(z.string()),
+      content: z.string(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getJobsBySkill = getJobsBySkillToolDef.server(({ skill }) => {
+  return allJobs.filter((job) =>
+    job.tags.some((tag) => tag.toLowerCase().includes(skill.toLowerCase())),
+  )
+})
+
+// Tool definition for getting all jobs
+export const getAllJobsToolDef = toolDefinition({
+  name: 'getAllJobs',
+  description:
+    'Get a complete list of all work experience with full details including job titles, companies, dates, summaries, and skills. Use this to get an overview of the candidate\'s entire work history.',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      jobTitle: z.string(),
+      company: z.string(),
+      location: z.string(),
+      startDate: z.string(),
+      endDate: z.string().optional(),
+      summary: z.string(),
+      tags: z.array(z.string()),
+      content: z.string(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getAllJobs = getAllJobsToolDef.server(() => {
+  return allJobs.map((job) => ({
+    jobTitle: job.jobTitle,
+    company: job.company,
+    location: job.location,
+    startDate: job.startDate,
+    endDate: job.endDate,
+    summary: job.summary,
+    tags: job.tags,
+    content: job.content,
+  }))
+})
+
+// Tool definition for getting all education
+export const getAllEducationToolDef = toolDefinition({
+  name: 'getAllEducation',
+  description:
+    'Get a complete list of all education history including schools, programs, dates, and skills learned. Use this to understand the candidate\'s educational background.',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      school: z.string(),
+      summary: z.string(),
+      startDate: z.string(),
+      endDate: z.string().optional(),
+      tags: z.array(z.string()),
+      content: z.string(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getAllEducation = getAllEducationToolDef.server(() => {
+  return allEducations.map((education) => ({
+    school: education.school,
+    summary: education.summary,
+    startDate: education.startDate,
+    endDate: education.endDate,
+    tags: education.tags,
+    content: education.content,
+  }))
+})
+
+// Tool definition for searching experience
+export const searchExperienceToolDef = toolDefinition({
+  name: 'searchExperience',
+  description:
+    'Search for jobs by keywords in the job title, company name, summary, or content. Use this to find specific types of experience or roles.',
+  inputSchema: z.object({
+    query: z
+      .string()
+      .describe(
+        'The search query (e.g., "senior", "lead", "frontend", "startup")',
+      ),
+  }),
+  outputSchema: z.array(
+    z.object({
+      jobTitle: z.string(),
+      company: z.string(),
+      location: z.string(),
+      startDate: z.string(),
+      endDate: z.string().optional(),
+      summary: z.string(),
+      tags: z.array(z.string()),
+      matchedIn: z
+        .array(z.string())
+        .describe('Which fields matched the search'),
+    }),
+  ),
+})
+
+// Server implementation
+export const searchExperience = searchExperienceToolDef.server(({ query }) => {
+  const lowerQuery = query.toLowerCase()
+
+  return allJobs
+    .map((job) => {
+      const matchedIn: string[] = []
+
+      if (job.jobTitle.toLowerCase().includes(lowerQuery)) {
+        matchedIn.push('job title')
+      }
+      if (job.company.toLowerCase().includes(lowerQuery)) {
+        matchedIn.push('company')
+      }
+      if (job.summary.toLowerCase().includes(lowerQuery)) {
+        matchedIn.push('summary')
+      }
+      if (job.content.toLowerCase().includes(lowerQuery)) {
+        matchedIn.push('description')
+      }
+
+      return { job, matchedIn }
+    })
+    .filter(({ matchedIn }) => matchedIn.length > 0)
+    .map(({ job, matchedIn }) => ({
+      jobTitle: job.jobTitle,
+      company: job.company,
+      location: job.location,
+      startDate: job.startDate,
+      endDate: job.endDate,
+      summary: job.summary,
+      tags: job.tags,
+      matchedIn,
+    }))
+})

package/examples/resume/assets/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/examples/resume/assets/src/routes/api.resume-chat.ts

@@ -0,0 +1,110 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, maxIterations, toServerSentEventsResponse } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { openaiText } from '@tanstack/ai-openai'
+import { geminiText } from '@tanstack/ai-gemini'
+import { ollamaText } from '@tanstack/ai-ollama'
+
+import {
+  getJobsBySkill,
+  getAllJobs,
+  getAllEducation,
+  searchExperience,
+} from '@/lib/resume-tools'
+
+export const Route = createFileRoute('/api/resume-chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const requestSignal = request.signal
+
+        if (requestSignal.aborted) {
+          return new Response(null, { status: 499 })
+        }
+
+        const abortController = new AbortController()
+
+        try {
+          const body = await request.json()
+          const { messages } = body
+          const data = body.data || {}
+
+          const SYSTEM_PROMPT = `You are a helpful resume assistant helping recruiters and hiring managers evaluate if this candidate is a good fit for their job requirements.
+
+CAPABILITIES:
+1. Use getJobsBySkill to find jobs where the candidate used specific technologies or skills
+2. Use getAllJobs to get the candidate's complete work history with all details
+3. Use getAllEducation to get the candidate's educational background
+4. Use searchExperience to search for specific types of roles or experience by keywords
+
+INSTRUCTIONS:
+- When asked about specific technologies or skills, use getJobsBySkill to find relevant experience
+- When asked about overall experience or career progression, use getAllJobs
+- When asked about education or training, use getAllEducation
+- When asked about specific types of roles (e.g., "senior", "lead"), use searchExperience
+- Be professional, concise, and helpful in your responses
+- Provide specific details from the resume when available
+- When calculating years of experience, consider the date ranges provided
+- If the candidate has experience with something, highlight specific roles and time periods
+- If the candidate lacks certain experience, be honest but constructive
+
+CONTEXT: You are helping evaluate this candidate's qualifications for potential job opportunities.`
+
+          // Determine the best available provider
+          let provider: 'anthropic' | 'openai' | 'gemini' | 'ollama' = data.provider || 'ollama'
+          let model: string = data.model || 'mistral:7b'
+
+          // Use the first available provider with an API key, fallback to ollama
+          if (process.env.ANTHROPIC_API_KEY) {
+            provider = 'anthropic'
+            model = 'claude-haiku-4-5'
+          } else if (process.env.OPENAI_API_KEY) {
+            provider = 'openai'
+            model = 'gpt-4o'
+          } else if (process.env.GEMINI_API_KEY) {
+            provider = 'gemini'
+            model = 'gemini-2.0-flash-exp'
+          }
+          // else keep ollama as default
+
+          // Adapter factory pattern for multi-vendor support
+          const adapterConfig = {
+            anthropic: () =>
+              anthropicText((model || 'claude-haiku-4-5') as any),
+            openai: () => openaiText((model || 'gpt-4o') as any),
+            gemini: () => geminiText((model || 'gemini-2.0-flash-exp') as any),
+            ollama: () => ollamaText((model || 'mistral:7b') as any),
+          }
+
+          const adapter = adapterConfig[provider]()
+
+          const stream = chat({
+            adapter,
+            tools: [getJobsBySkill, getAllJobs, getAllEducation, searchExperience],
+            systemPrompts: [SYSTEM_PROMPT],
+            agentLoopStrategy: maxIterations(5),
+            messages,
+            abortController,
+          })
+
+          return toServerSentEventsResponse(stream, { abortController })
+        } catch (error: any) {
+          console.error('Resume chat error:', error)
+          if (error.name === 'AbortError' || abortController.signal.aborted) {
+            return new Response(null, { status: 499 })
+          }
+          return new Response(
+            JSON.stringify({
+              error: 'Failed to process chat request',
+              message: error.message,
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
+  },
+})