create-chaaskit 0.1.0

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

@@ -0,0 +1,57 @@
+import type { Route } from './+types/documents';
+import { lazy, Suspense } from 'react';
+import { ClientOnly } from '../components/ClientOnly';
+
+const DocumentsClient = lazy(() => import('../components/DocumentsClient'));
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Documents' }];
+}
+
+export function links() {
+  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+}
+
+export default function Documents() {
+  return (
+    <ClientOnly fallback={<LoadingSkeleton />}>
+      {() => (
+        <Suspense fallback={<LoadingSkeleton />}>
+          <DocumentsClient />
+        </Suspense>
+      )}
+    </ClientOnly>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: '100vh',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgb(var(--color-background))',
+      }}
+    >
+      <div
+        style={{
+          width: '2rem',
+          height: '2rem',
+          border: '2px solid rgb(var(--color-primary))',
+          borderTopColor: 'transparent',
+          borderRadius: '50%',
+          animation: 'spin 1s linear infinite',
+        }}
+      />
+      <style>
+        {`
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+    </div>
+  );
+}

package/dist/templates/app/routes/invite.$token.tsx

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

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

@@ -0,0 +1,334 @@
+import { Form, redirect, useNavigation } from 'react-router';
+import type { Route } from './+types/login';
+import { config } from '../../config/app.config';
+
+export async function loader({}: Route.LoaderArgs) {
+  return { config };
+}
+
+export async function action({ request }: Route.ActionArgs) {
+  const formData = await request.formData();
+  const email = formData.get('email') as string;
+  const password = formData.get('password') as string;
+
+  const apiUrl = process.env.API_URL || 'http://localhost:3000';
+  const res = await fetch(`${apiUrl}/api/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password }),
+  });
+
+  if (!res.ok) {
+    // Try to parse JSON, fallback to text for rate limit errors etc.
+    let errorMessage = 'Login failed';
+    const contentType = res.headers.get('content-type');
+    if (contentType?.includes('application/json')) {
+      try {
+        const data = await res.json();
+        // Handle both {error: "string"} and {error: {message: "string"}} formats
+        errorMessage = typeof data.error === 'string'
+          ? data.error
+          : data.error?.message || data.message || 'Login failed';
+      } catch {
+        errorMessage = await res.text() || 'Login failed';
+      }
+    } else {
+      errorMessage = await res.text() || 'Login failed';
+    }
+    return { error: errorMessage };
+  }
+
+  // Get redirect URL from query params or default to /chat
+  const url = new URL(request.url);
+  const redirectTo = url.searchParams.get('redirect') || '/chat';
+
+  // Forward the session cookie from the API response
+  const setCookie = res.headers.get('set-cookie');
+
+  return redirect(redirectTo, {
+    headers: setCookie ? { 'Set-Cookie': setCookie } : {},
+  });
+}
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: `Sign In - ${config.app.name}` }];
+}
+
+export default function Login({
+  loaderData,
+  actionData,
+}: Route.ComponentProps) {
+  const { config } = loaderData;
+  const navigation = useNavigation();
+  const isSubmitting = navigation.state === 'submitting';
+
+  const hasGoogle = config.auth?.methods?.includes('google') ?? false;
+  const hasGitHub = config.auth?.methods?.includes('github') ?? false;
+  const hasEmailPassword = config.auth?.methods?.includes('email-password') ?? true;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        minHeight: '100vh',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgb(var(--color-background))',
+        padding: '1rem',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '28rem' }}>
+        <div style={{ marginBottom: '2rem', textAlign: 'center' }}>
+          {config.ui?.logo && (
+            <img
+              src={
+                typeof config.ui.logo === 'string'
+                  ? config.ui.logo
+                  : config.ui.logo.light
+              }
+              alt={config.app.name}
+              style={{
+                height: '4rem',
+                width: '4rem',
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                marginBottom: '1rem',
+                borderRadius: '0.5rem',
+                objectFit: 'contain',
+              }}
+            />
+          )}
+          <h1
+            style={{
+              fontSize: '1.875rem',
+              fontWeight: 'bold',
+              color: 'rgb(var(--color-text-primary))',
+              margin: 0,
+            }}
+          >
+            Welcome back
+          </h1>
+          <p
+            style={{
+              marginTop: '0.5rem',
+              color: 'rgb(var(--color-text-secondary))',
+            }}
+          >
+            Sign in to {config.app.name}
+          </p>
+        </div>
+
+        {/* OAuth buttons */}
+        {(hasGoogle || hasGitHub) && (
+          <div
+            style={{
+              marginBottom: '1.5rem',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.75rem',
+            }}
+          >
+            {hasGoogle && (
+              <a
+                href="/api/auth/oauth/google"
+                style={{
+                  display: 'flex',
+                  width: '100%',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '0.5rem',
+                  borderRadius: '0.5rem',
+                  border: '1px solid rgb(var(--color-border))',
+                  backgroundColor: 'rgb(var(--color-background))',
+                  padding: '0.5rem 1rem',
+                  color: 'rgb(var(--color-text-primary))',
+                  textDecoration: 'none',
+                }}
+              >
+                Continue with Google
+              </a>
+            )}
+            {hasGitHub && (
+              <a
+                href="/api/auth/oauth/github"
+                style={{
+                  display: 'flex',
+                  width: '100%',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '0.5rem',
+                  borderRadius: '0.5rem',
+                  border: '1px solid rgb(var(--color-border))',
+                  backgroundColor: 'rgb(var(--color-background))',
+                  padding: '0.5rem 1rem',
+                  color: 'rgb(var(--color-text-primary))',
+                  textDecoration: 'none',
+                }}
+              >
+                Continue with GitHub
+              </a>
+            )}
+          </div>
+        )}
+
+        {(hasGoogle || hasGitHub) && hasEmailPassword && (
+          <div style={{ position: 'relative', marginBottom: '1.5rem' }}>
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <div
+                style={{
+                  width: '100%',
+                  borderTop: '1px solid rgb(var(--color-border))',
+                }}
+              />
+            </div>
+            <div
+              style={{
+                position: 'relative',
+                display: 'flex',
+                justifyContent: 'center',
+                fontSize: '0.875rem',
+              }}
+            >
+              <span
+                style={{
+                  backgroundColor: 'rgb(var(--color-background))',
+                  padding: '0 0.5rem',
+                  color: 'rgb(var(--color-text-muted))',
+                }}
+              >
+                Or continue with email
+              </span>
+            </div>
+          </div>
+        )}
+
+        {hasEmailPassword && (
+          <Form
+            method="post"
+            style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+          >
+            <div>
+              <label
+                htmlFor="email"
+                style={{
+                  display: 'block',
+                  fontSize: '0.875rem',
+                  fontWeight: 500,
+                  color: 'rgb(var(--color-text-primary))',
+                }}
+              >
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                required
+                style={{
+                  marginTop: '0.25rem',
+                  width: '100%',
+                  borderRadius: '0.5rem',
+                  border: '1px solid rgb(var(--color-input-border))',
+                  backgroundColor: 'rgb(var(--color-input-background))',
+                  padding: '0.5rem 1rem',
+                  color: 'rgb(var(--color-text-primary))',
+                  boxSizing: 'border-box',
+                }}
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="password"
+                style={{
+                  display: 'block',
+                  fontSize: '0.875rem',
+                  fontWeight: 500,
+                  color: 'rgb(var(--color-text-primary))',
+                }}
+              >
+                Password
+              </label>
+              <input
+                type="password"
+                id="password"
+                name="password"
+                required
+                style={{
+                  marginTop: '0.25rem',
+                  width: '100%',
+                  borderRadius: '0.5rem',
+                  border: '1px solid rgb(var(--color-input-border))',
+                  backgroundColor: 'rgb(var(--color-input-background))',
+                  padding: '0.5rem 1rem',
+                  color: 'rgb(var(--color-text-primary))',
+                  boxSizing: 'border-box',
+                }}
+              />
+            </div>
+
+            {actionData?.error && (
+              <div
+                style={{
+                  padding: '0.75rem',
+                  backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                  borderRadius: '0.5rem',
+                  color: 'rgb(239, 68, 68)',
+                  fontSize: '0.875rem',
+                  textAlign: 'center',
+                }}
+              >
+                {actionData.error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              style={{
+                width: '100%',
+                borderRadius: '0.5rem',
+                backgroundColor: 'rgb(var(--color-primary))',
+                padding: '0.5rem 1rem',
+                fontWeight: 500,
+                color: 'white',
+                border: 'none',
+                cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                opacity: isSubmitting ? 0.7 : 1,
+              }}
+            >
+              {isSubmitting ? 'Signing in...' : 'Sign in'}
+            </button>
+          </Form>
+        )}
+
+        <p
+          style={{
+            marginTop: '1.5rem',
+            textAlign: 'center',
+            fontSize: '0.875rem',
+            color: 'rgb(var(--color-text-secondary))',
+          }}
+        >
+          Don't have an account?{' '}
+          <a
+            href="/register"
+            style={{
+              color: 'rgb(var(--color-primary))',
+              textDecoration: 'none',
+            }}
+          >
+            Sign up
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}

package/dist/templates/app/routes/oauth.consent.tsx

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

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

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

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

@@ -0,0 +1,197 @@
+import type { Route } from './+types/privacy';
+import { config } from '../../config/app.config';
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: `Privacy Policy - ${config.app.name}` },
+    { name: 'description', content: `Privacy Policy for ${config.app.name}` },
+  ];
+}
+
+export default function Privacy() {
+  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',
+            }}
+          >
+            Privacy Policy
+          </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="Information We Collect">
+              <p>
+                We collect information you provide directly to us, such as when
+                you create an account, use our services, or contact us for
+                support.
+              </p>
+              <ul style={{ marginTop: '1rem', paddingLeft: '1.5rem' }}>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Account information (name, email address)
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Chat conversations and messages
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Usage data and preferences
+                </li>
+              </ul>
+            </Section>
+
+            <Section title="How We Use Your Information">
+              <p>We use the information we collect to:</p>
+              <ul style={{ marginTop: '1rem', paddingLeft: '1.5rem' }}>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Provide, maintain, and improve our services
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Process your requests and respond to your inquiries
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Send you technical notices and support messages
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Detect, prevent, and address technical issues
+                </li>
+              </ul>
+            </Section>
+
+            <Section title="Data Security">
+              <p>
+                We implement appropriate security measures to protect your
+                personal information. However, no method of transmission over the
+                Internet or electronic storage is 100% secure.
+              </p>
+            </Section>
+
+            <Section title="AI Processing">
+              <p>
+                Your conversations may be processed by AI models to provide
+                responses. We do not use your conversations to train AI models
+                without your explicit consent.
+              </p>
+            </Section>
+
+            <Section title="Data Retention">
+              <p>
+                We retain your information for as long as your account is active
+                or as needed to provide you services. You can request deletion of
+                your data at any time.
+              </p>
+            </Section>
+
+            <Section title="Third-Party Services">
+              <p>
+                We may use third-party services that collect, monitor, and
+                analyze data. These services have their own privacy policies
+                addressing how they use such information.
+              </p>
+            </Section>
+
+            <Section title="Your Rights">
+              <p>You have the right to:</p>
+              <ul style={{ marginTop: '1rem', paddingLeft: '1.5rem' }}>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Access your personal data
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Correct inaccurate data
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Request deletion of your data
+                </li>
+                <li style={{ marginBottom: '0.5rem' }}>
+                  Export your data
+                </li>
+              </ul>
+            </Section>
+
+            <Section title="Changes to This Policy">
+              <p>
+                We may update this privacy policy from time to time. We will
+                notify you of any changes by posting the new policy on this page.
+              </p>
+            </Section>
+
+            <Section title="Contact Us">
+              <p>
+                If you have any questions about this Privacy Policy, 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}
+    </>
+  );
+}