create-chaaskit 0.1.0

package/dist/templates/app/routes/terms.tsx

@@ -0,0 +1,173 @@
+import type { Route } from './+types/terms';
+import { config } from '../../config/app.config';
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: `Terms of Service - ${config.app.name}` },
+    { name: 'description', content: `Terms of Service for ${config.app.name}` },
+  ];
+}
+
+export default function Terms() {
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        backgroundColor: 'rgb(var(--color-background))',
+        padding: '2rem 1rem',
+      }}
+    >
+      <div style={{ maxWidth: '48rem', marginLeft: 'auto', marginRight: 'auto' }}>
+        <div style={{ marginBottom: '2rem' }}>
+          <a
+            href="/"
+            style={{
+              fontSize: '0.875rem',
+              color: 'rgb(var(--color-primary))',
+              textDecoration: 'none',
+            }}
+          >
+            &larr; Back to {config.app.name}
+          </a>
+        </div>
+
+        <article>
+          <h1
+            style={{
+              fontSize: '2rem',
+              fontWeight: 'bold',
+              color: 'rgb(var(--color-text-primary))',
+              marginBottom: '1.5rem',
+            }}
+          >
+            Terms of Service
+          </h1>
+
+          <p
+            style={{
+              color: 'rgb(var(--color-text-muted))',
+              marginBottom: '2rem',
+              fontSize: '0.875rem',
+            }}
+          >
+            Last updated:{' '}
+            {new Date().toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            })}
+          </p>
+
+          <div
+            style={{
+              color: 'rgb(var(--color-text-secondary))',
+              lineHeight: 1.7,
+            }}
+          >
+            <Section title="Agreement to Terms">
+              <p>
+                By accessing or using {config.app.name}, you agree to be bound by
+                these Terms of Service. If you disagree with any part of the
+                terms, you may not access the service.
+              </p>
+            </Section>
+
+            <Section title="Use of Service">
+              <p>
+                You agree to use {config.app.name} only for lawful purposes and
+                in accordance with these Terms. You agree not to:
+              </p>
+              <ul style={{ marginTop: '1rem', paddingLeft: '1.5rem' }}>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Use the service for any illegal purpose
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Attempt to gain unauthorized access to the service
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Interfere with or disrupt the service
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Use the service to send spam or unsolicited messages
+                </li>
+              </ul>
+            </Section>
+
+            <Section title="User Accounts">
+              <p>
+                When you create an account, you must provide accurate and
+                complete information. You are responsible for maintaining the
+                security of your account and password.
+              </p>
+            </Section>
+
+            <Section title="AI-Generated Content">
+              <p>
+                {config.app.name} uses AI to generate responses. While we strive
+                for accuracy, AI-generated content may contain errors or
+                inaccuracies. You should verify important information
+                independently.
+              </p>
+            </Section>
+
+            <Section title="Intellectual Property">
+              <p>
+                The service and its original content, features, and
+                functionality are owned by us and are protected by international
+                copyright, trademark, and other intellectual property laws.
+              </p>
+            </Section>
+
+            <Section title="Limitation of Liability">
+              <p>
+                In no event shall we be liable for any indirect, incidental,
+                special, consequential, or punitive damages arising out of or
+                relating to your use of the service.
+              </p>
+            </Section>
+
+            <Section title="Changes to Terms">
+              <p>
+                We reserve the right to modify these terms at any time. We will
+                notify users of any material changes by posting the new Terms of
+                Service on this page.
+              </p>
+            </Section>
+
+            <Section title="Contact Us">
+              <p>
+                If you have any questions about these Terms of Service, please
+                contact us.
+              </p>
+            </Section>
+          </div>
+        </article>
+      </div>
+    </div>
+  );
+}
+
+function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <h2
+        style={{
+          fontSize: '1.25rem',
+          fontWeight: 600,
+          marginTop: '2rem',
+          marginBottom: '1rem',
+          color: 'rgb(var(--color-text-primary))',
+        }}
+      >
+        {title}
+      </h2>
+      {children}
+    </>
+  );
+}

package/dist/templates/app/routes/thread.$threadId.tsx

@@ -0,0 +1,102 @@
+import type { Route } from './+types/thread.$threadId';
+import { lazy, Suspense } from 'react';
+import { ClientOnly } from '../components/ClientOnly';
+
+// Lazy load the client-only component
+const ChatClient = lazy(() => import('../components/ChatClient'));
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Chat' }];
+}
+
+// Styles are loaded via link tag in root.tsx to avoid SSR import issues
+export function links() {
+  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+}
+
+/**
+ * Thread view route - shows a specific chat thread.
+ * Uses the same ChatClient component as the main chat route.
+ */
+export default function Thread() {
+  return (
+    <ClientOnly fallback={<ThreadLoadingSkeleton />}>
+      {() => (
+        <Suspense fallback={<ThreadLoadingSkeleton />}>
+          <ChatClient />
+        </Suspense>
+      )}
+    </ClientOnly>
+  );
+}
+
+function ThreadLoadingSkeleton() {
+  return (
+    <div style={{ display: 'flex', height: '100vh' }}>
+      {/* Sidebar skeleton */}
+      <div
+        style={{
+          width: '256px',
+          backgroundColor: 'rgb(var(--color-sidebar))',
+          borderRight: '1px solid rgb(var(--color-border))',
+          padding: '1rem',
+        }}
+      >
+        <div
+          style={{
+            height: '2rem',
+            backgroundColor: 'rgb(var(--color-background-secondary))',
+            borderRadius: '0.5rem',
+            marginBottom: '1rem',
+          }}
+        />
+        <div
+          style={{
+            height: '1rem',
+            backgroundColor: 'rgb(var(--color-background-secondary))',
+            borderRadius: '0.25rem',
+            width: '80%',
+          }}
+        />
+      </div>
+      {/* Main content skeleton */}
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'rgb(var(--color-background))',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '1rem',
+          }}
+        >
+          <div
+            style={{
+              width: '2rem',
+              height: '2rem',
+              border: '2px solid rgb(var(--color-primary))',
+              borderTopColor: 'transparent',
+              borderRadius: '50%',
+              animation: 'spin 1s linear infinite',
+            }}
+          />
+          <p style={{ color: 'rgb(var(--color-text-muted))' }}>Loading...</p>
+        </div>
+      </div>
+      <style>
+        {`
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+    </div>
+  );
+}

package/dist/templates/app/routes/verify-email.tsx

@@ -0,0 +1,10 @@
+import { createRoute } from '@chaaskit/client/ssr-utils';
+
+const route = createRoute({
+  title: 'Verify Email',
+  load: () => import('@chaaskit/client/routes/VerifyEmailRoute'),
+});
+
+export const meta = route.meta;
+export const links = route.links;
+export default route.default;

package/dist/templates/app/routes.ts

@@ -0,0 +1,47 @@
+import { type RouteConfig, route, index, layout } from '@react-router/dev/routes';
+import { config } from '../config/app.config';
+
+// Get basePath from config, default to '/chat'
+const basePath = config.app.basePath || '/chat';
+// Remove leading slash for route path matching
+const base = basePath.startsWith('/') ? basePath.slice(1) : basePath;
+
+export default [
+  // ==========================================
+  // Public routes (no basePath prefix)
+  // ==========================================
+  index('routes/_index.tsx'),
+  route('login', 'routes/login.tsx'),
+  route('register', 'routes/register.tsx'),
+  route('shared/:shareId', 'routes/shared.$shareId.tsx'),
+  route('terms', 'routes/terms.tsx'),
+  route('privacy', 'routes/privacy.tsx'),
+  route('verify-email', 'routes/verify-email.tsx'),
+  route('invite/:token', 'routes/invite.$token.tsx'),
+  route('pricing', 'routes/pricing.tsx'),
+  route('oauth/consent', 'routes/oauth.consent.tsx'),
+
+  // ==========================================
+  // Authenticated app routes (under basePath)
+  // Layout handles authentication check
+  // ==========================================
+  layout('routes/chat.tsx', [
+    // Main chat interface
+    route(base, 'routes/chat._index.tsx'),
+    route(`${base}/thread/:threadId`, 'routes/chat.thread.$threadId.tsx'),
+
+    // Settings pages
+    route(`${base}/api-keys`, 'routes/chat.api-keys.tsx'),
+    route(`${base}/documents`, 'routes/chat.documents.tsx'),
+    route(`${base}/automations`, 'routes/chat.automations.tsx'),
+
+    // Team settings
+    route(`${base}/team/:teamId/settings`, 'routes/chat.team.$teamId.settings.tsx'),
+
+    // Admin pages
+    route(`${base}/admin`, 'routes/chat.admin._index.tsx'),
+    route(`${base}/admin/users`, 'routes/chat.admin.users.tsx'),
+    route(`${base}/admin/teams`, 'routes/chat.admin.teams._index.tsx'),
+    route(`${base}/admin/teams/:teamId`, 'routes/chat.admin.teams.$teamId.tsx'),
+  ]),
+] satisfies RouteConfig;

package/dist/templates/config/app.config.ts

@@ -0,0 +1,216 @@
+import type { AppConfig } from '@chaaskit/shared';
+
+export const config: AppConfig = {
+  app: {
+    name: 'My Chat App',
+    description: 'AI-powered chat application',
+    url: 'http://localhost:5173',
+    basePath: '/chat',  // Chat app lives under /chat, landing page at /
+  },
+
+  ui: {
+    welcomeTitle: 'Welcome to My Chat App',
+    welcomeSubtitle: 'How can I help you today?',
+    inputPlaceholder: 'Type your message...',
+    samplePrompts: [
+      { label: 'Explain a concept', prompt: 'Explain quantum computing in simple terms' },
+      { label: 'Write code', prompt: 'Write a function to sort an array' },
+      { label: 'Help me brainstorm', prompt: 'Help me brainstorm ideas for a mobile app' },
+    ],
+    logo: '/logo.svg',
+  },
+
+  theming: {
+    defaultTheme: 'light',
+    allowUserThemeSwitch: true,
+    themes: {
+      light: {
+        name: 'Light',
+        colors: {
+          primary: '#6366f1',
+          primaryHover: '#4f46e5',
+          secondary: '#8b5cf6',
+          background: '#ffffff',
+          backgroundSecondary: '#f9fafb',
+          sidebar: '#f3f4f6',
+          textPrimary: '#111827',
+          textSecondary: '#6b7280',
+          textMuted: '#9ca3af',
+          border: '#e5e7eb',
+          inputBackground: '#ffffff',
+          inputBorder: '#d1d5db',
+          userMessageBg: '#6366f1',
+          userMessageText: '#ffffff',
+          assistantMessageBg: '#f3f4f6',
+          assistantMessageText: '#111827',
+          success: '#10b981',
+          warning: '#f59e0b',
+          error: '#ef4444',
+        },
+      },
+      dark: {
+        name: 'Dark',
+        colors: {
+          primary: '#818cf8',
+          primaryHover: '#a5b4fc',
+          secondary: '#a78bfa',
+          background: '#111827',
+          backgroundSecondary: '#1f2937',
+          sidebar: '#0f172a',
+          textPrimary: '#f9fafb',
+          textSecondary: '#d1d5db',
+          textMuted: '#6b7280',
+          border: '#374151',
+          inputBackground: '#1f2937',
+          inputBorder: '#4b5563',
+          userMessageBg: '#4f46e5',
+          userMessageText: '#ffffff',
+          assistantMessageBg: '#1f2937',
+          assistantMessageText: '#f9fafb',
+          success: '#34d399',
+          warning: '#fbbf24',
+          error: '#f87171',
+        },
+      },
+    },
+    fonts: {
+      sans: 'Inter, system-ui, sans-serif',
+      mono: 'JetBrains Mono, Menlo, monospace',
+    },
+    borderRadius: {
+      sm: '0.25rem',
+      md: '0.5rem',
+      lg: '0.75rem',
+      full: '9999px',
+    },
+  },
+
+  auth: {
+    methods: ['email-password'],
+    allowUnauthenticated: false,
+    magicLink: {
+      enabled: true,
+      expiresInMinutes: 15,
+    },
+  },
+
+  // Configure your AI agent(s) here
+  // Using multi-agent format to enable native tools
+  agent: {
+    agents: [
+      {
+        id: 'default',
+        name: 'Assistant',
+        provider: 'openai', // or 'anthropic'
+        model: 'gpt-4o-mini',
+        systemPrompt: 'You are a helpful AI assistant.',
+        maxTokens: 4096,
+        isDefault: true,
+        // Enable all native tools (web-scrape, etc.)
+        // Use 'native:*' for all, or 'native:web-scrape' for specific tools
+        allowedTools: ['native:*'],
+      },
+    ],
+  },
+
+  payments: {
+    enabled: false,
+    provider: 'stripe',
+    plans: [
+      {
+        id: 'free',
+        name: 'Free',
+        type: 'free',
+        params: {
+          monthlyMessageLimit: 20,
+        },
+      },
+    ],
+  },
+
+  legal: {
+    privacyPolicyUrl: '/privacy',
+    termsOfServiceUrl: '/terms',
+  },
+
+  userSettings: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Your Name',
+        type: 'text',
+        placeholder: 'Enter your name',
+      },
+      {
+        key: 'context',
+        label: 'Additional Context',
+        type: 'textarea',
+        placeholder: 'Any context the AI should know about you...',
+      },
+    ],
+  },
+
+  sharing: {
+    enabled: true,
+    scope: 'public',
+    expirationOptions: ['1h', '24h', '7d', '30d', 'never'],
+  },
+
+  teams: {
+    enabled: true,
+  },
+
+  projects: {
+    enabled: true,
+    colors: ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f97316', '#eab308', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6'],
+  },
+
+  // API access (for programmatic use)
+  api: {
+    enabled: true,
+    // allowedPlans: ['pro', 'enterprise'],  // Optional: restrict to specific plans
+    // keyPrefix: 'myapp-',  // Optional: custom prefix for API keys (default: "sk-")
+    // allowedEndpoints: [   // Endpoints accessible via API keys (default: none)
+    //   '/api/chat',        // Exact match
+    //   '/api/threads',     // List threads
+    //   '/api/threads/*',   // Single thread operations (e.g., /api/threads/123)
+    //   '/api/threads/**',  // All thread sub-routes (e.g., /api/threads/123/messages)
+    // ],
+  },
+
+  promptTemplates: {
+    enabled: true,
+    builtIn: [
+      {
+        id: 'explain',
+        name: 'Explain Code',
+        prompt: 'Explain this code:\n\n{{code}}',
+        variables: ['code'],
+      },
+      {
+        id: 'review',
+        name: 'Code Review',
+        prompt: 'Review this code for bugs, security issues, and improvements:\n\n{{code}}',
+        variables: ['code'],
+      },
+    ],
+    allowUserTemplates: true,
+  },
+
+  // Mentionable documents - reference documents in chat with @mentions
+  documents: {
+    enabled: true,
+    storage: {
+      provider: 'database',  // 'database' | 'filesystem' | 's3'
+    },
+    maxFileSizeMB: 10,
+    hybridThreshold: 1000,  // Documents under this char count are injected into context
+    acceptedTypes: [
+      'text/plain',
+      'text/markdown',
+      'text/x-markdown',
+      'text/csv',
+      'application/json',
+    ],
+  },
+};