@tanstack/cta-framework-solid 0.10.0-alpha.20

package/examples/tanchat/README.md

@@ -0,0 +1,52 @@
+# TanStack Chat Application
+
+Am example chat application built with TanStack Start, TanStack Store, and Claude AI.
+
+## Sidecar service
+
+This applicaton requires a sidecar microservice to be running. The server is located in the `ai-streaming-service` directory.
+
+In that directory you should edit the `.env.local` file to add your Anthropic API key:
+
+```env
+ANTHROPIC_API_KEY=your_anthropic_api_key
+```
+
+Then run the server:
+
+```bash
+cd ai-streaming-service
+npm install
+npm run dev
+```
+
+## ✨ Features
+
+### AI Capabilities
+
+- 🤖 Powered by Claude 3.5 Sonnet
+- 📝 Rich markdown formatting with syntax highlighting
+- 🎯 Customizable system prompts for tailored AI behavior
+- 🔄 Real-time message updates and streaming responses (coming soon)
+
+### User Experience
+
+- 🎨 Modern UI with Tailwind CSS and Lucide icons
+- 🔍 Conversation management and history
+- 🔐 Secure API key management
+- 📋 Markdown rendering with code highlighting
+
+### Technical Features
+
+- 📦 Centralized state management with TanStack Store
+- 🔌 Extensible architecture for multiple AI providers
+- 🛠️ TypeScript for type safety
+
+## Architecture
+
+### Tech Stack
+
+- **Routing**: TanStack Router
+- **State Management**: TanStack Store
+- **Styling**: Tailwind CSS
+- **AI Integration**: Anthropic's Claude API

package/examples/tanchat/assets/ai-streaming-server/README.md

@@ -0,0 +1,110 @@
+# AI Streaming Server
+
+An Express server with TypeScript that provides a streaming API endpoint for Anthropic's Claude AI model.
+
+## Setup
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Copy `.env.example` to `.env` and add your Anthropic API key:
+   ```bash
+   cp .env.example .env
+   ```
+4. Edit `.env` and replace `your_api_key_here` with your actual Anthropic API key
+
+## Development
+
+Run in development mode with auto-reload:
+
+```bash
+npm run dev
+```
+
+Type checking:
+
+```bash
+npm run typecheck
+```
+
+## Production
+
+Build the TypeScript code:
+
+```bash
+npm run build
+```
+
+Run in production mode:
+
+```bash
+npm start
+```
+
+## API Usage
+
+### POST /api/chat
+
+Endpoint that accepts chat messages and returns a streaming response from Claude.
+
+#### Request Body
+
+```typescript
+interface ChatMessage {
+  role: "user" | "assistant";
+  content: string;
+}
+
+interface ChatRequest {
+  messages: ChatMessage[];
+}
+```
+
+Example request:
+
+```json
+{
+  "messages": [{ "role": "user", "content": "Hello, how are you?" }]
+}
+```
+
+#### Response
+
+The endpoint returns a Server-Sent Events (SSE) stream. Each event contains a chunk of the response from Claude.
+
+Example usage with JavaScript/TypeScript:
+
+```typescript
+const response = await fetch("http://localhost:3000/api/chat", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: JSON.stringify({
+    messages: [{ role: "user", content: "Hello, how are you?" }],
+  }),
+});
+
+const reader = response.body!.getReader();
+const decoder = new TextDecoder();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) break;
+
+  const chunk = decoder.decode(value);
+  const lines = chunk.split("\n");
+
+  for (const line of lines) {
+    if (line.startsWith("data: ")) {
+      const data = JSON.parse(line.slice(6));
+      if (data === "[DONE]") break;
+
+      // Handle the streaming response chunk
+      console.log(data);
+    }
+  }
+}
+```

package/examples/tanchat/assets/ai-streaming-server/_dot_env.example

@@ -0,0 +1 @@
+ANTHROPIC_API_KEY=your_api_key_here 

package/examples/tanchat/assets/ai-streaming-server/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ai-streaming-server",
+  "version": "1.0.0",
+  "description": "Express server for streaming Anthropic AI chat responses",
+  "main": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "dev": "tsx watch src/index.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.18.0",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
+    "express": "^4.18.3"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.11.24",
+    "tsx": "^4.7.1",
+    "typescript": "^5.3.3"
+  }
+}

package/examples/tanchat/assets/ai-streaming-server/src/index.ts

@@ -0,0 +1,102 @@
+import express, { Request, Response } from 'express'
+import cors from 'cors'
+import dotenv from 'dotenv'
+import Anthropic from '@anthropic-ai/sdk'
+
+// Load environment variables
+dotenv.config()
+
+const app = express()
+const port = process.env.PORT || 8080
+
+// Middleware
+app.use(cors())
+app.use(express.json())
+
+// Initialize Anthropic client
+const anthropic = new Anthropic({
+  apiKey: process.env.ANTHROPIC_API_KEY,
+})
+
+// Define types for the request body
+interface ChatMessage {
+  role: 'user' | 'assistant'
+  content: string
+}
+
+interface ChatRequest {
+  messages: ChatMessage[]
+}
+
+// Streaming chat endpoint
+app.post(
+  '/api/chat',
+  async (req: Request<{}, {}, ChatRequest>, res: Response) => {
+    try {
+      const { messages } = req.body
+
+      if (!messages || !Array.isArray(messages)) {
+        return res.status(400).json({ error: 'Messages array is required' })
+      }
+
+      // Validate message format
+      const isValidMessages = messages.every(
+        (msg): msg is ChatMessage =>
+          typeof msg === 'object' &&
+          (msg.role === 'user' || msg.role === 'assistant') &&
+          typeof msg.content === 'string',
+      )
+
+      if (!isValidMessages) {
+        return res.status(400).json({
+          error:
+            "Invalid message format. Each message must have 'role' and 'content'",
+        })
+      }
+
+      // Set up SSE headers
+      res.setHeader('Content-Type', 'text/event-stream')
+      res.setHeader('Cache-Control', 'no-cache')
+      res.setHeader('Connection', 'keep-alive')
+
+      // Create the message stream
+      const stream = await anthropic.messages.create({
+        messages: messages.map((msg) => ({
+          role: msg.role,
+          content: msg.content,
+        })),
+        model: 'claude-3-opus-20240229',
+        max_tokens: 4096,
+        stream: true,
+      })
+
+      // Stream the response
+      for await (const chunk of stream) {
+        if (chunk.type === 'content_block_delta') {
+          res.write(`data: ${JSON.stringify(chunk)}\n\n`)
+        }
+      }
+
+      // End the stream
+      res.write('data: [DONE]\n\n')
+      res.end()
+    } catch (error) {
+      console.error('Error:', error)
+      // If headers haven't been sent yet, send error response
+      if (!res.headersSent) {
+        res.status(500).json({ error: 'Internal server error' })
+      } else {
+        // If streaming has started, send error event
+        const errorMessage =
+          error instanceof Error ? error.message : 'Unknown error'
+        res.write(`data: ${JSON.stringify({ error: errorMessage })}\n\n`)
+        res.end()
+      }
+    }
+  },
+)
+
+// Start the server
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`)
+})

package/examples/tanchat/assets/ai-streaming-server/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/examples/tanchat/assets/src/components/demo.SettingsDialog.tsx

@@ -0,0 +1,149 @@
+import { PlusCircle, Trash2 } from 'lucide-solid'
+import { useAppActions, useAppState } from '../store/demo.hooks'
+import { createSignal } from 'solid-js'
+
+interface SettingsDialogProps {
+    isOpen: boolean
+    onClose: () => void
+}
+
+export function SettingsDialog(props: SettingsDialogProps) {
+    const [promptForm, setPromptForm] = createSignal({ name: '', content: '' })
+    const [isAddingPrompt, setIsAddingPrompt] = createSignal(false)
+    const state = useAppState()
+    const actions = useAppActions();
+
+    const handleAddPrompt = () => {
+        if (!promptForm.name.trim() || !promptForm().content.trim()) return
+        actions.createPrompt(promptForm().name, promptForm().content)
+        setPromptForm({ name: '', content: '' })
+        setIsAddingPrompt(false)
+    }
+
+    const handleClose = () => {
+        props.onClose()
+        setIsAddingPrompt(false)
+        setPromptForm({ name: '', content: '' })
+    }
+
+    if (!props.isOpen) return null
+
+    return (
+        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center" onClick={(e) => {
+            if (e.target === e.currentTarget) handleClose()
+        }}>
+            <div class="bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+                <div class="p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h2 class="text-2xl font-semibold text-white">Settings</h2>
+                        <button
+                            onClick={handleClose}
+                            class="text-gray-400 hover:text-white focus:outline-none"
+                        >
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+
+                    <div class="space-y-6">
+                        {/* Prompts Management */}
+                        <div class="space-y-2">
+                            <div class="flex items-center justify-between mb-4">
+                                <label class="block text-sm font-medium text-white">
+                                    System Prompts
+                                </label>
+                                <button
+                                    onClick={() => setIsAddingPrompt(true)}
+                                    class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-white bg-gradient-to-r from-orange-500 to-red-600 rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-orange-500"
+                                >
+                                    <PlusCircle class="w-4 h-4" />
+                                    Add Prompt
+                                </button>
+                            </div>
+
+                            {isAddingPrompt() && (
+                                <div class="space-y-3 mb-4 p-3 bg-gray-700/50 rounded-lg">
+                                    <input
+                                        type="text"
+                                        value={promptForm().name}
+                                        onChange={(e) => setPromptForm(prev => ({ ...prev, name: e.target.value }))}
+                                        placeholder="Prompt name..."
+                                        class="w-full px-3 py-2 text-sm text-white bg-gray-700 rounded-lg border border-gray-600 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+                                    />
+                                    <textarea
+                                        value={promptForm().content}
+                                        onChange={(e) => setPromptForm(prev => ({ ...prev, content: e.target.value }))}
+                                        placeholder="Enter prompt content..."
+                                        class="w-full h-32 px-3 py-2 text-sm text-white bg-gray-700 rounded-lg border border-gray-600 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+                                    />
+                                    <div class="flex justify-end gap-2">
+                                        <button
+                                            onClick={() => setIsAddingPrompt(false)}
+                                            class="px-3 py-1.5 text-sm font-medium text-gray-300 hover:text-white focus:outline-none"
+                                        >
+                                            Cancel
+                                        </button>
+                                        <button
+                                            onClick={handleAddPrompt}
+                                            class="px-3 py-1.5 text-sm font-medium text-white bg-gradient-to-r from-orange-500 to-red-600 rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-orange-500"
+                                        >
+                                            Save Prompt
+                                        </button>
+                                    </div>
+                                </div>
+                            )}
+
+                            <div class="space-y-2">
+                                {state().prompts.map((prompt) => (
+                                    <div class="flex items-center justify-between p-3 bg-gray-700/50 rounded-lg">
+                                        <div class="flex-1 min-w-0 mr-4">
+                                            <h4 class="text-sm font-medium text-white truncate">{prompt.name}</h4>
+                                            <p class="text-xs text-gray-400 truncate">{prompt.content}</p>
+                                        </div>
+                                        <div class="flex items-center gap-2">
+                                            <label class="relative inline-flex items-center cursor-pointer">
+                                                <input
+                                                    type="checkbox"
+                                                    class="sr-only peer"
+                                                    checked={prompt.is_active}
+                                                    onChange={() => actions.setPromptActive(prompt.id, !prompt.is_active)}
+                                                />
+                                                <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-500"></div>
+                                            </label>
+                                            <button
+                                                onClick={() => actions.deletePrompt(prompt.id)}
+                                                class="p-1 text-gray-400 hover:text-red-500"
+                                            >
+                                                <Trash2 class="w-4 h-4" />
+                                            </button>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                            <p class="text-xs text-gray-400">
+                                Create and manage custom system prompts. Only one prompt can be active at a time.
+                            </p>
+                        </div>
+
+                    </div>
+
+                    <div class="mt-6 flex justify-end gap-3">
+                        <button
+                            onClick={handleClose}
+                            class="px-4 py-2 text-sm font-medium text-gray-300 hover:text-white focus:outline-none"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            onClick={handleClose}
+                            class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-orange-500 to-red-600 rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-orange-500"
+                        >
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/examples/tanchat/assets/src/demo.index.css

@@ -0,0 +1,227 @@
+@import "tailwindcss";
+@import "highlight.js/styles/github-dark.css";
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.7);
+}
+
+/* Smooth transitions for dark mode */
+html {
+  transition: background-color 0.3s ease;
+}
+
+/* Markdown content styles */
+.prose {
+  max-width: none;
+  color: #e5e7eb; /* text-gray-200 */
+}
+
+/* .prose p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+} */
+
+.prose code {
+  color: #e5e7eb;
+  background-color: rgba(31, 41, 55, 0.5);
+  padding: 0.2em 0.4em;
+  border-radius: 0.375rem;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  background-color: rgba(31, 41, 55, 0.5);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1.25em 0;
+  overflow-x: auto;
+}
+
+.prose pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  color: inherit;
+}
+
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4 {
+  color: #f9fafb; /* text-gray-50 */
+  /* margin-top: 2em; */
+  /* margin-bottom: 1em; */
+}
+
+.prose ul,
+.prose ol {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose blockquote {
+  border-left-color: #f97316; /* orange-500 */
+  background-color: rgba(249, 115, 22, 0.1);
+  padding: 1em;
+  margin: 1.25em 0;
+  border-radius: 0.5rem;
+}
+
+.prose hr {
+  border-color: rgba(249, 115, 22, 0.2);
+  margin: 2em 0;
+}
+
+.prose a {
+  color: #f97316; /* orange-500 */
+  text-decoration: underline;
+  text-decoration-thickness: 0.1em;
+  text-underline-offset: 0.2em;
+}
+
+.prose a:hover {
+  color: #fb923c; /* orange-400 */
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.25em 0;
+}
+
+.prose th,
+.prose td {
+  padding: 0.75em;
+  border: 1px solid rgba(249, 115, 22, 0.2);
+}
+
+.prose th {
+  background-color: rgba(249, 115, 22, 0.1);
+  font-weight: 600;
+}
+
+/* Message transition animations */
+.message-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.message-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 300ms,
+    transform 300ms;
+}
+
+.message-exit {
+  opacity: 1;
+}
+
+.message-exit-active {
+  opacity: 0;
+  transition: opacity 300ms;
+}
+
+/* Add/update these styles to match AI formatting capabilities */
+.prose h1 {
+  font-size: 2em;
+  /* margin-top: 1em; */
+  margin-bottom: 0.5em;
+}
+
+.prose h2 {
+  font-size: 1.5em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose h3 {
+  font-size: 1.25em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+}
+
+.prose ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+
+.prose th,
+.prose td {
+  border: 1px solid rgba(249, 115, 22, 0.2);
+  padding: 0.5em;
+}
+
+.prose th {
+  background-color: rgba(249, 115, 22, 0.1);
+}
+
+.prose strong {
+  color: #f9fafb; /* text-gray-50 */
+  font-weight: 600;
+}
+
+.prose em {
+  font-style: italic;
+}
+
+.prose blockquote {
+  border-left: 4px solid #f97316; /* orange-500 */
+  padding-left: 1em;
+  margin: 1em 0;
+  color: #d1d5db; /* text-gray-300 */
+}
+
+/* Ensure code blocks match the AI's formatting */
+.prose code {
+  color: #e5e7eb;
+  background-color: rgba(31, 41, 55, 0.5);
+  padding: 0.2em 0.4em;
+  border-radius: 0.375rem;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  background-color: rgba(31, 41, 55, 0.5);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1em 0;
+}
+
+.prose pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+}

package/examples/tanchat/assets/src/lib/demo-store.ts

@@ -0,0 +1,13 @@
+import { Derived, Store } from '@tanstack/store'
+
+export const store = new Store({
+  firstName: 'Jane',
+  lastName: 'Smith',
+})
+
+export const fullName = new Derived({
+  fn: () => `${store.state.firstName} ${store.state.lastName}`,
+  deps: [store],
+})
+
+fullName.mount()