@tanstack/cta-engine 0.14.3 → 0.14.4

package/templates/solid/example/tanchat/README.md

@@ -1,52 +0,0 @@
-# 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/templates/solid/example/tanchat/assets/ai-streaming-server/README.md

@@ -1,110 +0,0 @@
-# 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/templates/solid/example/tanchat/assets/ai-streaming-server/_dot_env.example

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

package/templates/solid/example/tanchat/assets/ai-streaming-server/package.json

@@ -1,26 +0,0 @@
-{
-  "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/templates/solid/example/tanchat/assets/ai-streaming-server/src/index.ts

@@ -1,102 +0,0 @@
-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/templates/solid/example/tanchat/assets/ai-streaming-server/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "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/templates/solid/example/tanchat/assets/src/components/demo.SettingsDialog.tsx

@@ -1,149 +0,0 @@
-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/templates/solid/example/tanchat/assets/src/demo.index.css

@@ -1,227 +0,0 @@
-@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/templates/solid/example/tanchat/assets/src/lib/demo-store.ts

@@ -1,13 +0,0 @@
-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()