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

package/{examples/tanchat/assets/src/components/example-AIAssistant.tsx → add-ons/ai/assets/src/components/demo-AIAssistant.tsx}

@@ -2,13 +2,13 @@ import { useEffect, useRef, useState } from 'react'
 import { useStore } from '@tanstack/react-store'
 import { Store } from '@tanstack/store'
 
-import { Send, X, ChevronRight } from 'lucide-react'
+import { Send, X, ChevronRight, BotIcon } from 'lucide-react'
 import { Streamdown } from 'streamdown'
 
-import { useGuitarRecommendationChat } from '@/lib/example.ai-hook'
-import type { ChatMessages } from '@/lib/example.ai-hook'
+import { useGuitarRecommendationChat } from '@/lib/demo-ai-hook'
+import type { ChatMessages } from '@/lib/demo-ai-hook'
 
-import GuitarRecommendation from './example-GuitarRecommendation'
+import GuitarRecommendation from './demo-GuitarRecommendation'
 
 export const showAIAssistant = new Store(false)
 
@@ -87,12 +87,10 @@ export default function AIAssistant() {
     <div className="relative z-50">
       <button
         onClick={() => showAIAssistant.setState((state) => !state)}
-        className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-orange-500 to-red-600 text-white hover:opacity-90 transition-opacity"
+        className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-green-700 to-green-900 text-white hover:opacity-90 transition-opacity"
       >
         <div className="flex items-center gap-2">
-          <div className="w-5 h-5 rounded-lg bg-white/20 flex items-center justify-center text-xs font-medium">
-            AI
-          </div>
+          <BotIcon size={24} />
           <span className="font-medium">AI Assistant</span>
         </div>
         <ChevronRight className="w-4 h-4" />

package/{examples/tanchat/assets/src/components/example-GuitarRecommendation.tsx → add-ons/ai/assets/src/components/demo-GuitarRecommendation.tsx}

@@ -1,8 +1,8 @@
 import { useNavigate } from '@tanstack/react-router'
 
-import { showAIAssistant } from './example-AIAssistant'
+import { showAIAssistant } from './demo-AIAssistant'
 
-import guitars from '../data/example-guitars'
+import guitars from '@/data/demo-guitars'
 
 export default function GuitarRecommendation({ id }: { id: string }) {
   const navigate = useNavigate()

package/{examples/tanchat/assets/src/lib/example.ai-hook.ts → add-ons/ai/assets/src/lib/demo-ai-hook.ts}

@@ -2,21 +2,21 @@ import {
   fetchServerSentEvents,
   useChat,
   createChatClientOptions,
-} from "@tanstack/ai-react";
-import type { InferChatMessages } from "@tanstack/ai-react";
-import { clientTools } from "@tanstack/ai-client";
+} from '@tanstack/ai-react'
+import type { InferChatMessages } from '@tanstack/ai-react'
+import { clientTools } from '@tanstack/ai-client'
 
-import { recommendGuitarToolDef } from "@/lib/example.guitar-tools";
+import { recommendGuitarToolDef } from '@/lib/demo-guitar-tools'
 
 const recommendGuitarToolClient = recommendGuitarToolDef.client(({ id }) => ({
   id: +id,
-}));
+}))
 
 const chatOptions = createChatClientOptions({
-  connection: fetchServerSentEvents("/demo/api/tanchat"),
+  connection: fetchServerSentEvents('/demo/api/ai/chat'),
   tools: clientTools(recommendGuitarToolClient),
-});
+})
 
-export type ChatMessages = InferChatMessages<typeof chatOptions>;
+export type ChatMessages = InferChatMessages<typeof chatOptions>
 
-export const useGuitarRecommendationChat = () => useChat(chatOptions);
+export const useGuitarRecommendationChat = () => useChat(chatOptions)

package/{examples/tanchat/assets/src/lib/example.guitar-tools.ts → add-ons/ai/assets/src/lib/demo-guitar-tools.ts}

@@ -1,6 +1,6 @@
 import { toolDefinition } from '@tanstack/ai'
 import { z } from 'zod'
-import guitars from '@/data/example-guitars'
+import guitars from '@/data/demo-guitars'
 
 // Tool definition for getting guitars
 export const getGuitarsToolDef = toolDefinition({

package/{examples/tanchat/assets/src/routes/demo/tanchat.tsx → add-ons/ai/assets/src/routes/demo/ai-chat.tsx}

@@ -11,24 +11,16 @@ import {
 } from 'lucide-react'
 import { Streamdown } from 'streamdown'
 
-import { useGuitarRecommendationChat } from '@/lib/example.ai-hook'
-import type { ChatMessages } from '@/lib/example.ai-hook'
-import {
-  MODEL_OPTIONS,
-  getAvailableModelOptions,
-  getStoredModelPreference,
-  setStoredModelPreference,
-} from '@/lib/model-selection'
-import type { Provider, ModelOption } from '@/lib/model-selection'
-import { hasCapability } from '@/lib/vendor-capabilities'
-import { useAudioRecorder } from '@/hooks/useAudioRecorder'
-import { useTTS } from '@/hooks/useTTS'
+import { useGuitarRecommendationChat } from '@/lib/demo-ai-hook'
+import type { ChatMessages } from '@/lib/demo-ai-hook'
+import { useAudioRecorder } from '@/hooks/demo-useAudioRecorder'
+import { useTTS } from '@/hooks/demo-useTTS'
 
-import GuitarRecommendation from '@/components/example-GuitarRecommendation'
+import GuitarRecommendation from '@/components/demo-GuitarRecommendation'
 
-import './tanchat.css'
+import './ai-chat.css'
 
-function InitalLayout({ children }: { children: React.ReactNode }) {
+function InitialLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex-1 flex items-center justify-center px-4">
       <div className="text-center max-w-3xl mx-auto w-full">
@@ -58,13 +50,11 @@ function Messages({
   playingId,
   onSpeak,
   onStopSpeak,
-  canPlayTTS,
 }: {
   messages: ChatMessages
   playingId: string | null
   onSpeak: (text: string, id: string) => void
   onStopSpeak: () => void
-  canPlayTTS: boolean
 }) {
   const messagesContainerRef = useRef<HTMLDivElement>(null)
 
@@ -148,7 +138,7 @@ function Messages({
                   })}
                 </div>
                 {/* TTS button for assistant messages */}
-                {message.role === 'assistant' && textContent && canPlayTTS && (
+                {message.role === 'assistant' && textContent && (
                   <button
                     onClick={() =>
                       isPlaying
@@ -176,69 +166,13 @@ function Messages({
 
 function ChatPage() {
   const [input, setInput] = useState('')
-  const [availableProviders, setAvailableProviders] = useState<Provider[]>([])
-  const [selectedModel, setSelectedModel] = useState<ModelOption | null>(null)
-  const [isCheckingProviders, setIsCheckingProviders] = useState(true)
 
-  // Audio hooks
   const { isRecording, isTranscribing, startRecording, stopRecording } =
     useAudioRecorder()
   const { playingId, speak, stop: stopTTS } = useTTS()
 
-  // Fetch available providers on mount
-  useEffect(() => {
-    fetch('/demo/api/available-providers')
-      .then((res) => res.json())
-      .then((data) => {
-        setAvailableProviders(data.providers)
-
-        // Set default model based on stored preference or first available
-        const storedPref = getStoredModelPreference()
-        const availableOptions = getAvailableModelOptions(data.providers)
-
-        if (
-          storedPref &&
-          availableOptions.some((o) => o.model === storedPref.model)
-        ) {
-          setSelectedModel(storedPref)
-        } else if (availableOptions.length > 0) {
-          setSelectedModel(availableOptions[0])
-        }
-
-        setIsCheckingProviders(false)
-      })
-      .catch(() => {
-        // Fallback to Ollama if can't reach API
-        setAvailableProviders(['ollama'])
-        const ollamaOption = MODEL_OPTIONS.find((m) => m.provider === 'ollama')
-        if (ollamaOption) setSelectedModel(ollamaOption)
-        setIsCheckingProviders(false)
-      })
-  }, [])
-
-  const availableModelOptions = getAvailableModelOptions(availableProviders)
-
-  // Check if current provider supports TTS (only OpenAI)
-  const canPlayTTS =
-    selectedModel && hasCapability(selectedModel.provider, 'tts')
-  const canRecordAudio =
-    selectedModel && hasCapability(selectedModel.provider, 'transcription')
-
   const { messages, sendMessage, isLoading, stop } =
-    useGuitarRecommendationChat(
-      selectedModel?.provider || 'anthropic',
-      selectedModel?.model || 'claude-haiku-4-5',
-    )
-
-  const handleModelChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const selected = availableModelOptions.find(
-      (m) => `${m.provider}:${m.model}` === e.target.value,
-    )
-    if (selected) {
-      setSelectedModel(selected)
-      setStoredModelPreference(selected)
-    }
-  }
+    useGuitarRecommendationChat()
 
   const handleMicClick = async () => {
     if (isRecording) {
@@ -253,34 +187,7 @@ function ChatPage() {
     }
   }
 
-  const Layout = messages.length ? ChattingLayout : InitalLayout
-
-  if (isCheckingProviders) {
-    return (
-      <div className="relative flex h-[calc(100vh-80px)] bg-gray-900 items-center justify-center">
-        <Loader2 className="w-8 h-8 text-orange-500 animate-spin" />
-      </div>
-    )
-  }
-
-  if (availableModelOptions.length === 0) {
-    return (
-      <div className="relative flex h-[calc(100vh-80px)] bg-gray-900">
-        <div className="flex-1 flex items-center justify-center px-4">
-          <div className="text-center max-w-xl">
-            <h1 className="text-2xl font-bold text-white mb-4">
-              No AI Providers Available
-            </h1>
-            <p className="text-gray-400 mb-4">
-              Please configure at least one AI provider in your{' '}
-              <code className="text-orange-400">.env.local</code> file, or
-              ensure Ollama is running locally.
-            </p>
-          </div>
-        </div>
-      </div>
-    )
-  }
+  const Layout = messages.length ? ChattingLayout : InitialLayout
 
   return (
     <div className="relative flex h-[calc(100vh-80px)] bg-gray-900">
@@ -290,34 +197,10 @@ function ChatPage() {
           playingId={playingId}
           onSpeak={speak}
           onStopSpeak={stopTTS}
-          canPlayTTS={!!canPlayTTS}
         />
 
         <Layout>
           <div className="space-y-3">
-            {/* Model Selector */}
-            <div className="flex justify-center">
-              <select
-                value={
-                  selectedModel
-                    ? `${selectedModel.provider}:${selectedModel.model}`
-                    : ''
-                }
-                onChange={handleModelChange}
-                disabled={isLoading}
-                className="rounded-lg border border-orange-500/20 bg-gray-800/50 px-3 py-1.5 text-xs text-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-500/50"
-              >
-                {availableModelOptions.map((option) => (
-                  <option
-                    key={`${option.provider}:${option.model}`}
-                    value={`${option.provider}:${option.model}`}
-                  >
-                    {option.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-
             {isLoading && (
               <div className="flex items-center justify-center">
                 <button
@@ -339,28 +222,25 @@ function ChatPage() {
               }}
             >
               <div className="relative max-w-xl mx-auto flex items-center gap-2">
-                {/* Mic button - only show if OpenAI is available */}
-                {canRecordAudio && (
-                  <button
-                    type="button"
-                    onClick={handleMicClick}
-                    disabled={isLoading || isTranscribing}
-                    className={`p-3 rounded-lg transition-colors ${
-                      isRecording
-                        ? 'bg-red-600 hover:bg-red-700 text-white'
-                        : 'bg-gray-800/50 text-gray-400 hover:text-orange-400 border border-orange-500/20'
-                    } disabled:opacity-50`}
-                    title={isRecording ? 'Stop recording' : 'Start recording'}
-                  >
-                    {isTranscribing ? (
-                      <Loader2 className="w-4 h-4 animate-spin" />
-                    ) : isRecording ? (
-                      <MicOff className="w-4 h-4" />
-                    ) : (
-                      <Mic className="w-4 h-4" />
-                    )}
-                  </button>
-                )}
+                <button
+                  type="button"
+                  onClick={handleMicClick}
+                  disabled={isLoading || isTranscribing}
+                  className={`p-3 rounded-lg transition-colors ${
+                    isRecording
+                      ? 'bg-red-600 hover:bg-red-700 text-white'
+                      : 'bg-gray-800/50 text-gray-400 hover:text-orange-400 border border-orange-500/20'
+                  } disabled:opacity-50`}
+                  title={isRecording ? 'Stop recording' : 'Start recording'}
+                >
+                  {isTranscribing ? (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  ) : isRecording ? (
+                    <MicOff className="w-4 h-4" />
+                  ) : (
+                    <Mic className="w-4 h-4" />
+                  )}
+                </button>
 
                 <div className="relative flex-1">
                   <textarea
@@ -402,6 +282,6 @@ function ChatPage() {
   )
 }
 
-export const Route = createFileRoute('/demo/tanchat')({
+export const Route = createFileRoute('/demo/ai/chat')({
   component: ChatPage,
 })

package/{examples/tanchat/assets/src/routes/demo/image.tsx → add-ons/ai/assets/src/routes/demo/ai-image.tsx}

@@ -19,16 +19,6 @@ function ImagePage() {
   const [images, setImages] = useState<Array<GeneratedImage>>([])
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [usedModel, setUsedModel] = useState<string | null>(null)
-  const [hasOpenAI, setHasOpenAI] = useState<boolean | null>(null)
-
-  // Check if OpenAI is available
-  useEffect(() => {
-    fetch('/demo/api/available-providers')
-      .then((res) => res.json())
-      .then((data) => setHasOpenAI(data.hasOpenAI))
-      .catch(() => setHasOpenAI(false))
-  }, [])
 
   const handleGenerate = async () => {
     setIsLoading(true)
@@ -36,7 +26,7 @@ function ImagePage() {
     setImages([])
 
     try {
-      const response = await fetch('/demo/api/image', {
+      const response = await fetch('/demo/api/ai/image', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ prompt, size, numberOfImages }),
@@ -49,7 +39,6 @@ function ImagePage() {
       }
 
       setImages(data.images)
-      setUsedModel(data.model)
     } catch (err: any) {
       setError(err.message)
     } finally {
@@ -83,34 +72,6 @@ function ImagePage() {
     }
   }
 
-  // Show loading state while checking for OpenAI
-  if (hasOpenAI === null) {
-    return (
-      <div className="min-h-[calc(100vh-80px)] bg-gray-900 p-6 flex items-center justify-center">
-        <Loader2 className="w-8 h-8 text-orange-500 animate-spin" />
-      </div>
-    )
-  }
-
-  // Show message if OpenAI is not available
-  if (!hasOpenAI) {
-    return (
-      <div className="min-h-[calc(100vh-80px)] bg-gray-900 p-6">
-        <div className="max-w-2xl mx-auto text-center py-16">
-          <ImageIcon className="w-16 h-16 text-gray-600 mx-auto mb-4" />
-          <h1 className="text-2xl font-bold text-white mb-4">
-            Image Generation Unavailable
-          </h1>
-          <p className="text-gray-400 mb-4">
-            Image generation requires an OpenAI API key. Please add your{' '}
-            <code className="text-orange-400">OPENAI_API_KEY</code> to your{' '}
-            <code className="text-orange-400">.env.local</code> file.
-          </p>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <div className="min-h-[calc(100vh-80px)] bg-gray-900 p-6">
       <div className="max-w-6xl mx-auto">
@@ -227,15 +188,6 @@ function ImagePage() {
                     </div>
                   ))}
                 </div>
-                <div className="pt-4 border-t border-gray-700 text-sm text-gray-400">
-                  <p>
-                    Provider:{' '}
-                    <span className="text-orange-400">OpenAI</span>
-                  </p>
-                  <p>
-                    Model: <span className="text-orange-400">{usedModel}</span>
-                  </p>
-                </div>
               </div>
             ) : !error && !isLoading ? (
               <div className="flex flex-col items-center justify-center h-64 text-gray-500">
@@ -252,6 +204,6 @@ function ImagePage() {
   )
 }
 
-export const Route = createFileRoute('/demo/image')({
+export const Route = createFileRoute('/demo/ai/image')({
   component: ImagePage,
 })