@tanstack/create 0.49.1

package/dist/frameworks/solid/examples/tanchat/assets/ai-streaming-server/src/index.js

@@ -0,0 +1,73 @@
+import express 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,
+});
+// Streaming chat endpoint
+app.post('/api/chat', async (req, res) => {
+    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) => 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/dist/frameworks/solid/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/dist/frameworks/solid/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/dist/frameworks/solid/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/dist/frameworks/solid/examples/tanchat/assets/src/lib/demo-store.js

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