@tanstack/cta-framework-react-cra 0.44.3 → 0.46.1

package/examples/resume/assets/src/components/ResumeAssistant.tsx

@@ -0,0 +1,193 @@
+import { useEffect, useRef, useState } from "react";
+import { Send, X, Briefcase, UserCheck } from "lucide-react";
+import { Streamdown } from "streamdown";
+import { Store } from "@tanstack/store";
+
+import { useResumeChat } from "@/lib/resume-ai-hook";
+import type { ResumeChatMessages } from "@/lib/resume-ai-hook";
+
+function Messages({ messages }: { messages: ResumeChatMessages }) {
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  if (!messages.length) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center text-slate-300/60 text-sm px-6 py-8">
+        <div className="relative mb-4">
+          <Briefcase className="w-12 h-12 text-blue-400/40 animate-pulse" />
+          <UserCheck className="w-6 h-6 text-purple-400/60 absolute -bottom-1 -right-1" />
+        </div>
+        <p className="text-center text-slate-200/80 font-medium">
+          Welcome, Recruiter!
+        </p>
+        <p className="text-xs text-slate-300/40 mt-2 text-center max-w-[200px]">
+          Ask about skills, experience, or qualifications...
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
+      {messages.map(({ id, role, parts }) => (
+        <div
+          key={id}
+          className={`py-3 ${
+            role === "assistant"
+              ? "bg-linear-to-r from-blue-500/5 via-purple-500/5 to-slate-500/5"
+              : "bg-transparent"
+          }`}
+        >
+          {parts.map((part, index) => {
+            if (part.type === "text" && part.content) {
+              return (
+                <div key={index} className="flex items-start gap-3 px-4">
+                  {role === "assistant" ? (
+                    <div className="w-7 h-7 rounded-full bg-linear-to-br from-blue-500 via-purple-500 to-slate-600 flex items-center justify-center text-xs font-bold text-white flex-shrink-0 shadow-lg shadow-blue-500/20">
+                      <Briefcase className="w-4 h-4" />
+                    </div>
+                  ) : (
+                    <div className="w-7 h-7 rounded-full bg-slate-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                      You
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0 text-slate-100 prose dark:prose-invert max-w-none prose-sm prose-p:text-slate-100 prose-headings:text-slate-200 prose-strong:text-slate-300">
+                    <Streamdown>{part.content}</Streamdown>
+                  </div>
+                </div>
+              );
+            }
+            return null;
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Export store for header control
+export const showResumeAssistant = new Store(false);
+
+export default function ResumeAssistant() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { messages, sendMessage, isLoading } = useResumeChat();
+  const [input, setInput] = useState("");
+
+  // Sync with store for header control
+  useEffect(() => {
+    return showResumeAssistant.subscribe(() => {
+      setIsOpen(showResumeAssistant.state);
+    });
+  }, []);
+
+  const handleToggle = () => {
+    const newState = !isOpen;
+    setIsOpen(newState);
+    showResumeAssistant.setState(() => newState);
+  };
+
+  const handleSend = () => {
+    if (input.trim()) {
+      sendMessage(input);
+      setInput("");
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed top-20 right-4 z-[100] w-[400px] h-[520px] rounded-3xl shadow-2xl flex flex-col overflow-hidden border border-blue-500/20 backdrop-blur-xl bg-linear-to-b from-slate-900/98 via-slate-900/95 to-slate-800/98">
+      {/* Decorative top gradient */}
+      <div className="absolute top-0 left-0 right-0 h-32 bg-linear-to-b from-blue-500/10 via-purple-500/5 to-transparent pointer-events-none" />
+
+      {/* Header */}
+      <div className="relative flex items-center justify-between p-4 border-b border-blue-500/10">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-2xl bg-linear-to-br from-blue-500 via-purple-500 to-slate-600 flex items-center justify-center shadow-lg shadow-blue-500/30 rotate-3 hover:rotate-0 transition-transform">
+            <Briefcase className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <h3 className="font-bold text-slate-200 text-base tracking-tight">
+              Resume Assistant
+            </h3>
+            <p className="text-xs text-blue-300/50">Candidate Evaluation AI</p>
+          </div>
+        </div>
+        <button
+          onClick={handleToggle}
+          className="text-slate-300/50 hover:text-slate-100 transition-colors p-2 hover:bg-white/5 rounded-xl"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
+      {/* Messages */}
+      <Messages messages={messages} />
+
+      {/* Loading indicator */}
+      {isLoading && (
+        <div className="px-4 py-3 border-t border-blue-500/10">
+          <div className="flex items-center gap-2 text-blue-400/80 text-xs">
+            <div className="flex gap-1">
+              <span className="w-2 h-2 bg-blue-400 rounded-full animate-bounce [animation-delay:-0.3s]"></span>
+              <span className="w-2 h-2 bg-purple-400 rounded-full animate-bounce [animation-delay:-0.15s]"></span>
+              <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"></span>
+            </div>
+            <span className="font-medium">Analyzing experience...</span>
+          </div>
+        </div>
+      )}
+
+      {/* Input */}
+      <div className="relative p-4 border-t border-blue-500/10 bg-slate-900/50">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleSend();
+          }}
+        >
+          <div className="relative">
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="Ask about skills, experience, or qualifications..."
+              disabled={isLoading}
+              className="w-full rounded-2xl border border-blue-500/20 bg-slate-800/50 pl-4 pr-12 py-3 text-sm text-slate-100 placeholder-slate-300/30 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-transparent resize-none overflow-hidden disabled:opacity-50 transition-all"
+              rows={1}
+              style={{ minHeight: "48px", maxHeight: "100px" }}
+              onInput={(e) => {
+                const target = e.target as HTMLTextAreaElement;
+                target.style.height = "auto";
+                target.style.height = Math.min(target.scrollHeight, 100) + "px";
+              }}
+              onKeyDown={(e) => {
+                if (
+                  e.key === "Enter" &&
+                  !e.shiftKey &&
+                  input.trim() &&
+                  !isLoading
+                ) {
+                  e.preventDefault();
+                  handleSend();
+                }
+              }}
+            />
+            <button
+              type="submit"
+              disabled={!input.trim() || isLoading}
+              className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-xl bg-linear-to-r from-blue-500 to-purple-500 text-white disabled:opacity-30 disabled:bg-gray-600 disabled:from-gray-600 disabled:to-gray-600 transition-all hover:shadow-lg hover:shadow-blue-500/20"
+            >
+              <Send className="w-4 h-4" />
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/examples/resume/assets/src/components/ResumeAssistantButton.tsx

@@ -0,0 +1,20 @@
+import { Briefcase, ChevronRight } from "lucide-react";
+import { showResumeAssistant } from "./ResumeAssistant";
+
+export default function RemyButton() {
+  return (
+    <div className="px-2 mb-2 w-full">
+      <button
+        onClick={() => showResumeAssistant.setState(true)}
+        className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-blue-500 to-purple-800 text-white hover:opacity-90 transition-opacity"
+        aria-label="Open Resume Assistant"
+      >
+        <div className="flex items-center gap-2">
+          <Briefcase size={24} />
+          <span className="text-sm">Resume Assistant</span>
+        </div>
+        <ChevronRight className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

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))
+}