kaddidlehopper 0.5.0 → 0.6.0

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

@@ -1,44 +0,0 @@
-"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

@@ -1,26 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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' },
-            },
-          )
-        }
-      },
-    },
-  },
-})

package/examples/resume/assets/src/routes/index.tsx

@@ -1,220 +0,0 @@
-import { useState, useMemo } from 'react'
-import { marked } from 'marked'
-
-import { createFileRoute } from '@tanstack/react-router'
-import { allJobs, allEducations } from 'content-collections'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Badge } from '@/components/ui/badge'
-import { Separator } from '@/components/ui/separator'
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '@/components/ui/hover-card'
-
-import ResumeAssistant from '@/components/ResumeAssistant'
-
-export const Route = createFileRoute('/')({
-  component: App,
-})
-
-function App() {
-  const [selectedTags, setSelectedTags] = useState<string[]>([])
-
-  // Get unique tags from all jobs
-  const allTags = useMemo(() => {
-    const tags = new Set<string>()
-    allJobs.forEach((job) => {
-      job.tags.forEach((tag) => tags.add(tag))
-    })
-    return Array.from(tags).sort()
-  }, [])
-
-  // Filter jobs based on selected tags
-  const filteredJobs = useMemo(() => {
-    if (selectedTags.length === 0) return allJobs
-    return allJobs.filter((job) =>
-      selectedTags.some((tag) => job.tags.includes(tag)),
-    )
-  }, [selectedTags])
-
-  return (
-    <>
-      <ResumeAssistant />
-      <div className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100">
-        <div className="flex">
-          {/* Sidebar with filters */}
-          <div className="w-72 min-h-screen bg-white border-r shadow-sm p-8 sticky top-0">
-            <h3 className="text-lg font-semibold mb-6 text-gray-900">
-              Skills & Technologies
-            </h3>
-            <div className="space-y-4">
-              {allTags.map((tag) => (
-                <div key={tag} className="flex items-center space-x-3 group">
-                  <Checkbox
-                    id={tag}
-                    checked={selectedTags.includes(tag)}
-                    onCheckedChange={(checked) => {
-                      if (checked) {
-                        setSelectedTags([...selectedTags, tag])
-                      } else {
-                        setSelectedTags(selectedTags.filter((t) => t !== tag))
-                      }
-                    }}
-                    className="data-[state=checked]:bg-blue-600"
-                  />
-                  <label
-                    htmlFor={tag}
-                    className="text-sm font-medium leading-none text-gray-700 group-hover:text-gray-900 transition-colors cursor-pointer"
-                  >
-                    {tag}
-                  </label>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Main content */}
-          <div className="flex-1 p-8 lg:p-12">
-            <div className="max-w-4xl mx-auto space-y-12">
-              <div className="text-center space-y-4">
-                <h1 className="text-5xl font-bold bg-linear-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
-                  My Resume
-                </h1>
-                <p className="text-gray-600 text-lg">
-                  Professional Experience & Education
-                </p>
-                <Separator className="mt-8" />
-              </div>
-
-              {/* Career Summary */}
-              <Card className="border-0 shadow-lg bg-white/50 backdrop-blur-sm">
-                <CardHeader>
-                  <CardTitle className="text-2xl text-gray-900">
-                    Career Summary
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex items-center gap-8">
-                    <p className="text-gray-700 flex-1 leading-relaxed">
-                      I am a passionate and driven professional seeking
-                      opportunities that will leverage my extensive experience
-                      in frontend development while providing continuous growth
-                      and learning opportunities. My goal is to contribute to
-                      innovative projects that challenge me to expand my skill
-                      set and make meaningful impacts through technology.
-                    </p>
-                    <img
-                      src="/headshot-on-white.jpg"
-                      alt="Professional headshot"
-                      className="w-44 h-52 rounded-2xl object-cover shadow-md transition-transform hover:scale-105"
-                    />
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Work Experience */}
-              <section className="space-y-6">
-                <h2 className="text-3xl font-semibold text-gray-900">
-                  Work Experience
-                </h2>
-                <div className="space-y-6">
-                  {filteredJobs.map((job) => (
-                    <Card
-                      key={job.jobTitle}
-                      className="border-0 shadow-md hover:shadow-lg transition-shadow"
-                    >
-                      <CardHeader>
-                        <div className="flex justify-between items-start">
-                          <div className="space-y-2">
-                            <CardTitle className="text-xl text-gray-900">
-                              {job.jobTitle}
-                            </CardTitle>
-                            <p className="text-blue-600 font-medium">
-                              {job.company} - {job.location}
-                            </p>
-                          </div>
-                          <Badge variant="secondary" className="text-sm">
-                            {job.startDate} - {job.endDate || 'Present'}
-                          </Badge>
-                        </div>
-                      </CardHeader>
-                      <CardContent>
-                        <p className="text-gray-700 mb-6 leading-relaxed">
-                          {job.summary}
-                        </p>
-                        <div className="flex flex-wrap gap-2">
-                          {job.tags.map((tag) => (
-                            <HoverCard key={tag}>
-                              <HoverCardTrigger>
-                                <Badge
-                                  variant="outline"
-                                  className="hover:bg-gray-100 transition-colors cursor-pointer"
-                                >
-                                  {tag}
-                                </Badge>
-                              </HoverCardTrigger>
-                              <HoverCardContent className="w-64">
-                                <p className="text-sm text-gray-600">
-                                  Experience with {tag} in professional
-                                  development
-                                </p>
-                              </HoverCardContent>
-                            </HoverCard>
-                          ))}
-                        </div>
-                        {job.content && (
-                          <div
-                            className="mt-6 text-gray-700 prose prose-sm max-w-none"
-                            dangerouslySetInnerHTML={{
-                              __html: marked(job.content),
-                            }}
-                          />
-                        )}
-                      </CardContent>
-                    </Card>
-                  ))}
-                </div>
-              </section>
-
-              {/* Education */}
-              <section className="space-y-6">
-                <h2 className="text-3xl font-semibold text-gray-900">
-                  Education
-                </h2>
-                <div className="space-y-6">
-                  {allEducations.map((education) => (
-                    <Card
-                      key={education.school}
-                      className="border-0 shadow-md hover:shadow-lg transition-shadow"
-                    >
-                      <CardHeader>
-                        <CardTitle className="text-xl text-gray-900">
-                          {education.school}
-                        </CardTitle>
-                      </CardHeader>
-                      <CardContent>
-                        <p className="text-gray-700 leading-relaxed">
-                          {education.summary}
-                        </p>
-                        {education.content && (
-                          <div
-                            className="mt-6 text-gray-700 prose prose-sm max-w-none"
-                            dangerouslySetInnerHTML={{
-                              __html: marked(education.content),
-                            }}
-                          />
-                        )}
-                      </CardContent>
-                    </Card>
-                  ))}
-                </div>
-              </section>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}