feat: new TanChat with AI assistant

Author: jherr

src/create-app.ts

@@ -712,7 +712,7 @@ ${environment.getErrors().join('\n')}`
       startCommand = `deno ${isAddOnEnabled('start') ? 'task dev' : 'start'}`
     }
 
-    outro(`Created your TanStack app in '${basename(targetDir)}'.
+    outro(`Your TanStack app is ready in '${basename(targetDir)}'.
 
 Use the following commands to start your app:
 % cd ${options.projectName}

templates/react/example/tanchat/assets/public/example-guitar-dune.jpg

@@ -0,0 +1,173 @@
+import { useEffect, useRef } from 'react'
+import { useStore } from '@tanstack/react-store'
+import { Send, X } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import rehypeHighlight from 'rehype-highlight'
+import remarkGfm from 'remark-gfm'
+import { useChat } from '@ai-sdk/react'
+import { genAIResponse } from '../utils/demo.ai'
+
+import { showAIAssistant } from '../store/example-assistant'
+import GuitarRecommendation from './example-GuitarRecommendation'
+
+import type { UIMessage } from 'ai'
+
+function Messages({ messages }: { messages: Array<UIMessage> }) {
+  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 items-center justify-center text-gray-400 text-sm">
+        Ask me anything! I'm here to help.
+      </div>
+    )
+  }
+
+  return (
+    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
+      {messages.map(({ id, role, content, parts }) => (
+        <div
+          key={id}
+          className={`py-3 ${
+            role === 'assistant'
+              ? 'bg-gradient-to-r from-orange-500/5 to-red-600/5'
+              : 'bg-transparent'
+          }`}
+        >
+          {content.length > 0 && (
+            <div className="flex items-start gap-2 px-4">
+              {role === 'assistant' ? (
+                <div className="w-6 h-6 rounded-lg bg-gradient-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                  AI
+                </div>
+              ) : (
+                <div className="w-6 h-6 rounded-lg bg-gray-700 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                  Y
+                </div>
+              )}
+              <div className="flex-1 min-w-0">
+                <ReactMarkdown
+                  className="prose dark:prose-invert max-w-none prose-sm"
+                  rehypePlugins={[
+                    rehypeRaw,
+                    rehypeSanitize,
+                    rehypeHighlight,
+                    remarkGfm,
+                  ]}
+                >
+                  {content}
+                </ReactMarkdown>
+              </div>
+            </div>
+          )}
+          {parts
+            .filter((part) => part.type === 'tool-invocation')
+            .filter(
+              (part) => part.toolInvocation.toolName === 'recommendGuitar',
+            )
+            .map((toolCall) => (
+              <div
+                key={toolCall.toolInvocation.toolName}
+                className="max-w-[80%] mx-auto"
+              >
+                <GuitarRecommendation id={toolCall.toolInvocation.args.id} />
+              </div>
+            ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default function AIAssistant() {
+  const isOpen = useStore(showAIAssistant)
+  const { messages, input, handleInputChange, handleSubmit } = useChat({
+    initialMessages: [],
+    fetch: (_url, options) => {
+      const { messages } = JSON.parse(options!.body! as string)
+      return genAIResponse({
+        data: {
+          messages,
+        },
+      })
+    },
+    onToolCall: (call) => {
+      if (call.toolCall.toolName === 'recommendGuitar') {
+        return 'Handled by the UI'
+      }
+    },
+  })
+
+  return (
+    <div className="relative z-50">
+      <button
+        onClick={() => showAIAssistant.setState((state) => !state)}
+        className="flex items-center gap-2 px-3 py-1 rounded-lg bg-gradient-to-r from-orange-500 to-red-600 text-white hover:opacity-90 transition-opacity"
+      >
+        <div className="w-5 h-5 rounded-lg bg-white/20 flex items-center justify-center text-xs font-medium">
+          AI
+        </div>
+        AI Assistant
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full right-0 mt-2 w-[700px] h-[600px] bg-gray-900 rounded-lg shadow-xl border border-orange-500/20 flex flex-col">
+          <div className="flex items-center justify-between p-3 border-b border-orange-500/20">
+            <h3 className="font-semibold text-white">AI Assistant</h3>
+            <button
+              onClick={() => showAIAssistant.setState((state) => !state)}
+              className="text-gray-400 hover:text-white transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+
+          <Messages messages={messages} />
+
+          <div className="p-3 border-t border-orange-500/20">
+            <form onSubmit={handleSubmit}>
+              <div className="relative">
+                <textarea
+                  value={input}
+                  onChange={handleInputChange}
+                  placeholder="Type your message..."
+                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-3 pr-10 py-2 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"
+                  rows={1}
+                  style={{ minHeight: '36px', maxHeight: '120px' }}
+                  onInput={(e) => {
+                    const target = e.target as HTMLTextAreaElement
+                    target.style.height = 'auto'
+                    target.style.height =
+                      Math.min(target.scrollHeight, 120) + 'px'
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault()
+                      handleSubmit(e)
+                    }
+                  }}
+                />
+                <button
+                  type="submit"
+                  disabled={!input.trim()}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                >
+                  <Send className="w-4 h-4" />
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

templates/react/example/tanchat/assets/public/example-guitar-motherboard.jpg

@@ -0,0 +1,47 @@
+import { useNavigate } from '@tanstack/react-router'
+
+import { showAIAssistant } from '../store/example-assistant'
+
+import guitars from '../data/example-guitars'
+
+export default function GuitarRecommendation({ id }: { id: string }) {
+  const navigate = useNavigate()
+  const guitar = guitars.find((guitar) => guitar.id === +id)
+  if (!guitar) {
+    return null
+  }
+  return (
+    <div className="my-4 rounded-lg overflow-hidden border border-orange-500/20 bg-gray-800/50">
+      <div className="aspect-[4/3] relative overflow-hidden">
+        <img
+          src={guitar.image}
+          alt={guitar.name}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="text-lg font-semibold text-white mb-2">{guitar.name}</h3>
+        <p className="text-sm text-gray-300 mb-3 line-clamp-2">
+          {guitar.shortDescription}
+        </p>
+        <div className="flex items-center justify-between">
+          <div className="text-lg font-bold text-emerald-400">
+            ${guitar.price}
+          </div>
+          <button
+            onClick={() => {
+              navigate({
+                to: '/example/guitars/$guitarId',
+                params: { guitarId: guitar.id.toString() },
+              })
+              showAIAssistant.setState(() => false)
+            }}
+            className="bg-gradient-to-r from-orange-500 to-red-600 text-white px-4 py-1.5 rounded-lg text-sm hover:opacity-90 transition-opacity"
+          >
+            View Details
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}