@tanstack/cta-framework-react-cra 0.43.1 → 0.44.0

package/examples/tanchat/assets/src/routes/demo/tanchat.tsx

@@ -1,10 +1,28 @@
 import { useEffect, useRef, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
-import { Send, Square } from 'lucide-react'
+import {
+  Send,
+  Square,
+  Mic,
+  MicOff,
+  Volume2,
+  VolumeX,
+  Loader2,
+} 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 GuitarRecommendation from '@/components/example-GuitarRecommendation'
 
@@ -35,7 +53,19 @@ function ChattingLayout({ children }: { children: React.ReactNode }) {
   )
 }
 
-function Messages({ messages }: { messages: ChatMessages }) {
+function Messages({
+  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)
 
   useEffect(() => {
@@ -49,80 +79,245 @@ function Messages({ messages }: { messages: ChatMessages }) {
     return null
   }
 
+  // Extract text content from message parts
+  const getTextContent = (
+    parts: ChatMessages[number]['parts'],
+  ): string | null => {
+    for (const part of parts) {
+      if (part.type === 'text' && part.content) {
+        return part.content
+      }
+    }
+    return null
+  }
+
   return (
     <div
       ref={messagesContainerRef}
       className="flex-1 overflow-y-auto pb-4 min-h-0"
     >
       <div className="max-w-3xl mx-auto w-full px-4">
-        {messages.map((message) => (
-          <div
-            key={message.id}
-            className={`p-4 ${
-              message.role === 'assistant'
-                ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
-                : 'bg-transparent'
-            }`}
-          >
-            <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
-              {message.role === 'assistant' ? (
-                <div className="w-8 h-8 rounded-lg bg-linear-to-r from-orange-500 to-red-600 mt-2 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
-                  AI
-                </div>
-              ) : (
-                <div className="w-8 h-8 rounded-lg bg-gray-700 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
-                  Y
+        {messages.map((message) => {
+          const textContent = getTextContent(message.parts)
+          const isPlaying = playingId === message.id
+
+          return (
+            <div
+              key={message.id}
+              className={`p-4 ${
+                message.role === 'assistant'
+                  ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
+                  : 'bg-transparent'
+              }`}
+            >
+              <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
+                {message.role === 'assistant' ? (
+                  <div className="w-8 h-8 rounded-lg bg-linear-to-r from-orange-500 to-red-600 mt-2 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
+                    AI
+                  </div>
+                ) : (
+                  <div className="w-8 h-8 rounded-lg bg-gray-700 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
+                    Y
+                  </div>
+                )}
+                <div className="flex-1 min-w-0">
+                  {message.parts.map((part, index) => {
+                    if (part.type === 'text' && part.content) {
+                      return (
+                        <div
+                          className="flex-1 min-w-0 prose dark:prose-invert max-w-none prose-sm"
+                          key={index}
+                        >
+                          <Streamdown>{part.content}</Streamdown>
+                        </div>
+                      )
+                    }
+                    // Guitar recommendation card
+                    if (
+                      part.type === 'tool-call' &&
+                      part.name === 'recommendGuitar' &&
+                      part.output
+                    ) {
+                      return (
+                        <div key={part.id} className="max-w-[80%] mx-auto">
+                          <GuitarRecommendation id={String(part.output?.id)} />
+                        </div>
+                      )
+                    }
+                    return null
+                  })}
                 </div>
-              )}
-              <div className="flex-1 min-w-0">
-                {message.parts.map((part, index) => {
-                  if (part.type === 'text' && part.content) {
-                    return (
-                      <div
-                        className="flex-1 min-w-0 prose dark:prose-invert max-w-none prose-sm"
-                        key={index}
-                      >
-                        <Streamdown>{part.content}</Streamdown>
-                      </div>
-                    )
-                  }
-                  // Guitar recommendation card
-                  if (
-                    part.type === 'tool-call' &&
-                    part.name === 'recommendGuitar' &&
-                    part.output
-                  ) {
-                    return (
-                      <div key={part.id} className="max-w-[80%] mx-auto">
-                        <GuitarRecommendation id={String(part.output?.id)} />
-                      </div>
-                    )
-                  }
-                  return null
-                })}
+                {/* TTS button for assistant messages */}
+                {message.role === 'assistant' && textContent && canPlayTTS && (
+                  <button
+                    onClick={() =>
+                      isPlaying
+                        ? onStopSpeak()
+                        : onSpeak(textContent, message.id)
+                    }
+                    className="flex-shrink-0 p-2 text-gray-400 hover:text-orange-400 transition-colors"
+                    title={isPlaying ? 'Stop speaking' : 'Read aloud'}
+                  >
+                    {isPlaying ? (
+                      <VolumeX className="w-4 h-4" />
+                    ) : (
+                      <Volume2 className="w-4 h-4" />
+                    )}
+                  </button>
+                )}
               </div>
             </div>
-          </div>
-        ))}
+          )
+        })}
       </div>
     </div>
   )
 }
 
 function ChatPage() {
-  const { messages, sendMessage, isLoading, stop } =
-    useGuitarRecommendationChat()
   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)
+    }
+  }
+
+  const handleMicClick = async () => {
+    if (isRecording) {
+      const transcribedText = await stopRecording()
+      if (transcribedText) {
+        setInput((prev) =>
+          prev ? `${prev} ${transcribedText}` : transcribedText,
+        )
+      }
+    } else {
+      await startRecording()
+    }
+  }
 
   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>
+    )
+  }
+
   return (
     <div className="relative flex h-[calc(100vh-80px)] bg-gray-900">
       <div className="flex-1 flex flex-col min-h-0">
-        <Messages messages={messages} />
+        <Messages
+          messages={messages}
+          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
@@ -143,36 +338,61 @@ function ChatPage() {
                 }
               }}
             >
-              <div className="relative max-w-xl mx-auto">
-                <textarea
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  placeholder="Type something clever..."
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-4 pr-12 py-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden shadow-lg"
-                  rows={1}
-                  style={{ minHeight: '44px', maxHeight: '200px' }}
-                  disabled={isLoading}
-                  onInput={(e) => {
-                    const target = e.target as HTMLTextAreaElement
-                    target.style.height = 'auto'
-                    target.style.height =
-                      Math.min(target.scrollHeight, 200) + 'px'
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' && !e.shiftKey && input.trim()) {
-                      e.preventDefault()
-                      sendMessage(input)
-                      setInput('')
-                    }
-                  }}
-                />
-                <button
-                  type="submit"
-                  disabled={!input.trim() || isLoading}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
-                >
-                  <Send className="w-4 h-4" />
-                </button>
+              <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>
+                )}
+
+                <div className="relative flex-1">
+                  <textarea
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    placeholder="Type something clever..."
+                    className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-4 pr-12 py-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden shadow-lg"
+                    rows={1}
+                    style={{ minHeight: '44px', maxHeight: '200px' }}
+                    disabled={isLoading}
+                    onInput={(e) => {
+                      const target = e.target as HTMLTextAreaElement
+                      target.style.height = 'auto'
+                      target.style.height =
+                        Math.min(target.scrollHeight, 200) + 'px'
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && !e.shiftKey && input.trim()) {
+                        e.preventDefault()
+                        sendMessage(input)
+                        setInput('')
+                      }
+                    }}
+                  />
+                  <button
+                    type="submit"
+                    disabled={!input.trim() || isLoading}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                  >
+                    <Send className="w-4 h-4" />
+                  </button>
+                </div>
               </div>
             </form>
           </div>

package/examples/tanchat/info.json

@@ -15,15 +15,18 @@
       "jsName": "ChatDemo"
     },
     {
-      "icon": "Guitar",
-      "url": "/example/guitars",
-      "name": "Guitar Demo",
-      "path": "src/routes/example.guitars.tsx",
-      "jsName": "GuitarDemo"
+      "icon": "ImageIcon",
+      "url": "/demo/image",
+      "name": "Generate Image",
+      "path": "src/routes/demo/image.tsx",
+      "jsName": "ImageDemo"
     },
     {
-      "path": "src/routes/example.guitars/$guitarId.tsx",
-      "jsName": "GuitarById"
+      "icon": "ChefHat",
+      "url": "/demo/structured",
+      "name": "Structured Output",
+      "path": "src/routes/demo/structured.tsx",
+      "jsName": "StructuredDemo"
     }
   ],
   "integrations": [

package/examples/tanchat/package.json

@@ -1,10 +1,13 @@
 {
   "dependencies": {
-    "@tanstack/ai": "^0.0.1",
-    "@tanstack/ai-anthropic": "^0.0.1",
-    "@tanstack/ai-client": "^0.0.1",
-    "@tanstack/ai-react": "^0.0.1",
-    "@tanstack/react-ai-devtools": "^0.0.1",
+    "@tanstack/ai": "latest",
+    "@tanstack/ai-anthropic": "latest",
+    "@tanstack/ai-client": "latest",
+    "@tanstack/ai-gemini": "latest",
+    "@tanstack/ai-ollama": "latest",
+    "@tanstack/ai-openai": "latest",
+    "@tanstack/ai-react": "latest",
+    "@tanstack/react-ai-devtools": "latest",
     "highlight.js": "^11.11.1",
     "streamdown": "^1.6.5",
     "lucide-react": "^0.544.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-framework-react-cra",
-  "version": "0.43.1",
+  "version": "0.44.0",
   "description": "CTA Framework for React (Create React App)",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
   "author": "Jack Herrington <jherr@pobox.com>",
   "license": "MIT",
   "dependencies": {
-    "@tanstack/cta-engine": "0.43.1"
+    "@tanstack/cta-engine": "0.44.0"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",

package/project/base/src/routes/__root.tsx.ejs

@@ -1,5 +1,6 @@
+<% let hasContext = addOnEnabled["apollo-client"] || addOnEnabled["tanstack-query"]; %>
 <% if (!fileRouter) { ignoreFile() } %>import { <% if (addOnEnabled.start) { %>
-  HeadContent<% } else { %>Outlet<% } %><% if (addOnEnabled.start) { %>, Scripts<% } %>, <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
+  HeadContent<% } else { %>Outlet<% } %><% if (addOnEnabled.start) { %>, Scripts<% } %>, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
 import { TanStackDevtools } from '@tanstack/react-devtools'
 <% if (addOns.length) { %>
@@ -9,21 +10,28 @@ import <%= integration.jsName %> from '<%= relativePath(integration.path, true)
 <% } %>
 <% if (addOnEnabled.start) { %>
 import appCss from '../styles.css?url'
-<% } %><% if (addOnEnabled["tanstack-query"]) { %>
+<% } %>
+<% if (addOnEnabled["apollo-client"]) { %>
+import type { ApolloClientIntegration } from "@apollo/client-integration-tanstack-start";
+<% } %>
+<% if (addOnEnabled["tanstack-query"]) { %>
 import type { QueryClient } from '@tanstack/react-query'
 <% if (addOnEnabled.tRPC) { %>
 import type { TRPCRouter } from '@/integrations/trpc/router'
 import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'
 <% } %>
-
-interface MyRouterContext {
+<% } %>
+<% if (hasContext) { %>
+interface MyRouterContext <% if (addOnEnabled["apollo-client"]) {%> extends ApolloClientIntegration.RouterContext <%} %>{
+<% if (addOnEnabled["tanstack-query"]) { %>
   queryClient: QueryClient
   <% if (addOnEnabled.tRPC) { %>
   trpc: TRPCOptionsProxy<TRPCRouter>
   <% } %>
+<% } %>
 }<% } %>
-  
-export const Route = <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({
+
+export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({
 <% if (addOnEnabled.start) { %>
     head: () => ({
     meta: [

package/tests/react-cra.test.ts

@@ -148,3 +148,17 @@ test('file router with add-on start on npm', async () => {
     './snapshots/react-cra/cr-ts-start-tanstack-query-npm.json',
   )
 })
+
+test('file router with add-on start and apollo-client on npm', async () => {
+  const { environment, output } = createMemoryEnvironment()
+  const options = {
+    ...(await createReactOptions(['start', 'apollo-client'])),
+    tailwind: true,
+    typescript: true,
+  } as Options
+  await createApp(environment, options)
+  const cleanedOutput = cleanupOutput(options, output)
+  await expect(JSON.stringify(cleanedOutput, null, 2)).toMatchFileSnapshot(
+    './snapshots/react-cra/cr-ts-start-apollo-client-npm.json',
+  )
+})