feat: update tanchat example

Author: jherr

frameworks/react-cra/examples/tanchat/assets/src/hooks/useAudioRecorder.ts

@@ -0,0 +1,85 @@
+import { useCallback, useRef, useState } from 'react'
+
+/**
+ * Hook for recording audio and transcribing it via the transcription API.
+ */
+export function useAudioRecorder() {
+  const [isRecording, setIsRecording] = useState(false)
+  const [isTranscribing, setIsTranscribing] = useState(false)
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+  const chunksRef = useRef<Blob[]>([])
+
+  const startRecording = useCallback(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      const mediaRecorder = new MediaRecorder(stream, {
+        mimeType: 'audio/webm;codecs=opus',
+      })
+      mediaRecorderRef.current = mediaRecorder
+      chunksRef.current = []
+
+      mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+          chunksRef.current.push(e.data)
+        }
+      }
+
+      mediaRecorder.start()
+      setIsRecording(true)
+    } catch (error) {
+      console.error('Failed to start recording:', error)
+      alert('Could not access microphone. Please check permissions.')
+    }
+  }, [])
+
+  const stopRecording = useCallback(async (): Promise<string | null> => {
+    return new Promise((resolve) => {
+      const mediaRecorder = mediaRecorderRef.current
+      if (!mediaRecorder) {
+        resolve(null)
+        return
+      }
+
+      mediaRecorder.onstop = async () => {
+        setIsRecording(false)
+        setIsTranscribing(true)
+
+        const audioBlob = new Blob(chunksRef.current, { type: 'audio/webm' })
+
+        // Stop all tracks
+        mediaRecorder.stream.getTracks().forEach((track) => track.stop())
+
+        try {
+          const formData = new FormData()
+          formData.append(
+            'audio',
+            new File([audioBlob], 'recording.webm', { type: 'audio/webm' }),
+          )
+          formData.append('model', 'whisper-1')
+
+          const response = await fetch('/demo/api/transcription', {
+            method: 'POST',
+            body: formData,
+          })
+
+          if (!response.ok) {
+            const errorData = await response.json()
+            throw new Error(errorData.error || 'Transcription failed')
+          }
+
+          const result = await response.json()
+          setIsTranscribing(false)
+          resolve(result.text || null)
+        } catch (error) {
+          console.error('Transcription error:', error)
+          setIsTranscribing(false)
+          resolve(null)
+        }
+      }
+
+      mediaRecorder.stop()
+    })
+  }, [])
+
+  return { isRecording, isTranscribing, startRecording, stopRecording }
+}

frameworks/react-cra/examples/tanchat/assets/src/hooks/useTTS.ts

@@ -0,0 +1,78 @@
+import { useCallback, useRef, useState } from 'react'
+
+/**
+ * Hook for text-to-speech playback via the TTS API.
+ */
+export function useTTS() {
+  const [playingId, setPlayingId] = useState<string | null>(null)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+
+  const speak = useCallback(async (text: string, id: string) => {
+    // Stop any currently playing audio
+    if (audioRef.current) {
+      audioRef.current.pause()
+      audioRef.current = null
+    }
+
+    setPlayingId(id)
+
+    try {
+      const response = await fetch('/demo/api/tts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          text,
+          voice: 'nova',
+          model: 'tts-1',
+          format: 'mp3',
+        }),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'TTS failed')
+      }
+
+      const result = await response.json()
+
+      // Convert base64 to audio and play
+      const audioData = atob(result.audio)
+      const bytes = new Uint8Array(audioData.length)
+      for (let i = 0; i < audioData.length; i++) {
+        bytes[i] = audioData.charCodeAt(i)
+      }
+      const blob = new Blob([bytes], { type: result.contentType })
+      const url = URL.createObjectURL(blob)
+
+      const audio = new Audio(url)
+      audioRef.current = audio
+
+      audio.onended = () => {
+        URL.revokeObjectURL(url)
+        setPlayingId(null)
+        audioRef.current = null
+      }
+
+      audio.onerror = () => {
+        URL.revokeObjectURL(url)
+        setPlayingId(null)
+        audioRef.current = null
+      }
+
+      await audio.play()
+    } catch (error) {
+      console.error('TTS error:', error)
+      setPlayingId(null)
+    }
+  }, [])
+
+  const stop = useCallback(() => {
+    if (audioRef.current) {
+      audioRef.current.pause()
+      audioRef.current = null
+    }
+    setPlayingId(null)
+  }, [])
+
+  return { playingId, speak, stop }
+}

frameworks/react-cra/examples/tanchat/assets/src/lib/model-selection.ts

@@ -0,0 +1,78 @@
+export type Provider = 'openai' | 'anthropic' | 'gemini' | 'ollama'
+
+export interface ModelOption {
+  provider: Provider
+  model: string
+  label: string
+}
+
+export const MODEL_OPTIONS: Array<ModelOption> = [
+  // OpenAI models
+  { provider: 'openai', model: 'gpt-4o', label: 'OpenAI - GPT-4o' },
+  { provider: 'openai', model: 'gpt-4o-mini', label: 'OpenAI - GPT-4o Mini' },
+
+  // Anthropic models
+  {
+    provider: 'anthropic',
+    model: 'claude-haiku-4-5',
+    label: 'Anthropic - Claude Haiku 4.5',
+  },
+  {
+    provider: 'anthropic',
+    model: 'claude-sonnet-4-5-20250929',
+    label: 'Anthropic - Claude Sonnet 4.5',
+  },
+
+  // Gemini models
+  {
+    provider: 'gemini',
+    model: 'gemini-2.0-flash-exp',
+    label: 'Gemini - 2.0 Flash',
+  },
+
+  // Ollama models
+  { provider: 'ollama', model: 'mistral:7b', label: 'Ollama - Mistral 7B' },
+]
+
+const STORAGE_KEY = 'tanstack-ai-model-preference'
+
+export function getStoredModelPreference(): ModelOption | null {
+  if (typeof window === 'undefined') return null
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      const parsed = JSON.parse(stored)
+      // Validate that the stored option still exists in MODEL_OPTIONS
+      const found = MODEL_OPTIONS.find(
+        (o) => o.provider === parsed.provider && o.model === parsed.model,
+      )
+      if (found) return found
+    }
+  } catch {
+    // Ignore storage errors
+  }
+  return null
+}
+
+export function setStoredModelPreference(option: ModelOption): void {
+  if (typeof window === 'undefined') return
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(option))
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+export function getDefaultModelOption(): ModelOption {
+  return getStoredModelPreference() || MODEL_OPTIONS[0]
+}
+
+export function getModelOptionsForProvider(provider: Provider): ModelOption[] {
+  return MODEL_OPTIONS.filter((o) => o.provider === provider)
+}
+
+export function getAvailableModelOptions(
+  availableProviders: Provider[],
+): ModelOption[] {
+  return MODEL_OPTIONS.filter((o) => availableProviders.includes(o.provider))
+}

frameworks/react-cra/examples/tanchat/assets/src/lib/vendor-capabilities.ts

@@ -0,0 +1,55 @@
+import type { Provider } from './model-selection'
+
+export interface VendorCapabilities {
+  chat: boolean
+  structured: boolean
+  image: boolean
+  transcription: boolean
+  tts: boolean
+}
+
+export const VENDOR_CAPABILITIES: Record<Provider, VendorCapabilities> = {
+  openai: {
+    chat: true,
+    structured: true,
+    image: true,
+    transcription: true,
+    tts: true,
+  },
+  anthropic: {
+    chat: true,
+    structured: true,
+    image: false,
+    transcription: false,
+    tts: false,
+  },
+  gemini: {
+    chat: true,
+    structured: true,
+    image: false,
+    transcription: false,
+    tts: false,
+  },
+  ollama: {
+    chat: true,
+    structured: true,
+    image: false,
+    transcription: false,
+    tts: false,
+  },
+}
+
+export function hasCapability(
+  provider: Provider,
+  capability: keyof VendorCapabilities,
+): boolean {
+  return VENDOR_CAPABILITIES[provider]?.[capability] ?? false
+}
+
+export function getProvidersWithCapability(
+  capability: keyof VendorCapabilities,
+): Provider[] {
+  return (Object.keys(VENDOR_CAPABILITIES) as Provider[]).filter(
+    (provider) => VENDOR_CAPABILITIES[provider][capability],
+  )
+}

frameworks/react-cra/examples/tanchat/assets/src/routes/demo/api.available-providers.ts

@@ -0,0 +1,35 @@
+import { createFileRoute } from '@tanstack/react-router'
+import type { Provider } from '@/lib/model-selection'
+
+export const Route = createFileRoute('/demo/api/available-providers')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const available: Provider[] = []
+
+        if (process.env.OPENAI_API_KEY) {
+          available.push('openai')
+        }
+        if (process.env.ANTHROPIC_API_KEY) {
+          available.push('anthropic')
+        }
+        if (process.env.GEMINI_API_KEY) {
+          available.push('gemini')
+        }
+        // Ollama is always available (local, no key needed)
+        available.push('ollama')
+
+        return new Response(
+          JSON.stringify({
+            providers: available,
+            hasOpenAI: available.includes('openai'),
+          }),
+          {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+          },
+        )
+      },
+    },
+  },
+})