@chaaskit/client 0.1.0

package/src/contexts/ConfigContext.tsx

@@ -0,0 +1,214 @@
+import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
+import type { AppConfig } from '@chaaskit/shared';
+
+// Default config - used as fallback while loading
+const defaultConfig: AppConfig = {
+  app: {
+    name: 'AI Chat',
+    description: 'Your AI assistant',
+    url: 'http://localhost:5173',
+  },
+  ui: {
+    welcomeTitle: 'Welcome to AI Chat',
+    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,
+    },
+  },
+  agent: {
+    type: 'built-in',
+    provider: 'anthropic',
+    model: 'claude-sonnet-4-20250514',
+    systemPrompt: 'You are a helpful AI assistant.',
+    maxTokens: 4096,
+  },
+  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: false,
+    scope: 'public',
+    expirationOptions: ['1h', '24h', '7d', '30d', 'never'],
+  },
+  promptTemplates: {
+    enabled: true,
+    builtIn: [],
+    allowUserTemplates: true,
+  },
+  teams: {
+    enabled: true,
+  },
+  documents: {
+    enabled: false,
+    storage: {
+      provider: 'database',
+    },
+    maxFileSizeMB: 10,
+    hybridThreshold: 1000,
+    acceptedTypes: ['text/plain', 'text/markdown', 'application/json'],
+  },
+  projects: {
+    enabled: false,
+    colors: ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f97316', '#eab308', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6'],
+  },
+  api: {
+    enabled: false,
+  },
+};
+
+interface ConfigContextValue {
+  config: AppConfig;
+  configLoaded: boolean;
+}
+
+const ConfigContext = createContext<ConfigContextValue>({
+  config: defaultConfig,
+  configLoaded: false,
+});
+
+export function ConfigProvider({ children }: { children: ReactNode }) {
+  const [config, setConfig] = useState<AppConfig>(defaultConfig);
+  const [configLoaded, setConfigLoaded] = useState(false);
+
+  useEffect(() => {
+    async function loadConfig() {
+      try {
+        const response = await fetch('/api/config');
+        if (response.ok) {
+          const serverConfig = await response.json();
+          // Merge with defaults to ensure all fields exist
+          setConfig({
+            ...defaultConfig,
+            ...serverConfig,
+          });
+        }
+      } catch (error) {
+        console.warn('[Config] Failed to load config from server:', error);
+      } finally {
+        setConfigLoaded(true);
+      }
+    }
+    loadConfig();
+  }, []);
+
+  return (
+    <ConfigContext.Provider value={{ config, configLoaded }}>
+      {children}
+    </ConfigContext.Provider>
+  );
+}
+
+export function useConfig() {
+  return useContext(ConfigContext).config;
+}
+
+export function useConfigLoaded() {
+  return useContext(ConfigContext).configLoaded;
+}

package/src/contexts/ProjectContext.tsx

@@ -0,0 +1,167 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import type { Project, ProjectWithThreadCount, ProjectSharing, CreateProjectInput, UpdateProjectInput } from '@chaaskit/shared';
+import { api } from '../utils/api';
+import { useAuth } from './AuthContext';
+import { useTeam } from './TeamContext';
+import { useConfig } from './ConfigContext';
+
+interface ProjectContextType {
+  projects: ProjectWithThreadCount[];
+  currentProject: Project | null;
+  currentProjectId: string | null;
+  isLoadingProjects: boolean;
+  projectsEnabled: boolean;
+  projectColors: string[];
+  loadProjects: () => Promise<void>;
+  setCurrentProjectId: (projectId: string | null) => void;
+  createProject: (data: CreateProjectInput) => Promise<Project>;
+  updateProject: (projectId: string, updates: UpdateProjectInput) => Promise<void>;
+  archiveProject: (projectId: string) => Promise<void>;
+}
+
+const ProjectContext = createContext<ProjectContextType | undefined>(undefined);
+
+export function ProjectProvider({ children }: { children: ReactNode }) {
+  const { user } = useAuth();
+  const { currentTeamId } = useTeam();
+  const config = useConfig();
+  const [projects, setProjects] = useState<ProjectWithThreadCount[]>([]);
+  const [currentProject, setCurrentProject] = useState<Project | null>(null);
+  const [currentProjectId, setCurrentProjectId] = useState<string | null>(null);
+  const [isLoadingProjects, setIsLoadingProjects] = useState(false);
+
+  const projectsEnabled = config?.projects?.enabled ?? false;
+  const projectColors = config?.projects?.colors ?? [];
+
+  const loadProjects = useCallback(async () => {
+    if (!user || !projectsEnabled) {
+      setProjects([]);
+      return;
+    }
+
+    setIsLoadingProjects(true);
+    try {
+      const params = new URLSearchParams();
+      if (currentTeamId) {
+        params.set('teamId', currentTeamId);
+      }
+      const url = `/api/projects${params.toString() ? `?${params.toString()}` : ''}`;
+      const response = await api.get<{ projects: ProjectWithThreadCount[] }>(url);
+      setProjects(response.projects);
+
+      // If current project is no longer available, clear it
+      if (currentProjectId && !response.projects.some((p) => p.id === currentProjectId)) {
+        setCurrentProjectId(null);
+        setCurrentProject(null);
+      }
+    } catch (error) {
+      console.error('Failed to load projects:', error);
+      setProjects([]);
+    } finally {
+      setIsLoadingProjects(false);
+    }
+  }, [user, projectsEnabled, currentTeamId, currentProjectId]);
+
+  const loadProjectDetails = useCallback(async (projectId: string) => {
+    try {
+      const response = await api.get<{ project: Project }>(`/api/projects/${projectId}`);
+      setCurrentProject(response.project);
+    } catch (error) {
+      console.error('Failed to load project details:', error);
+      setCurrentProject(null);
+    }
+  }, []);
+
+  const handleSetCurrentProjectId = useCallback((projectId: string | null) => {
+    setCurrentProjectId(projectId);
+    if (!projectId) {
+      setCurrentProject(null);
+    }
+  }, []);
+
+  const createProject = useCallback(async (data: CreateProjectInput): Promise<Project> => {
+    // If we're in a team context, add the teamId
+    const projectData = {
+      ...data,
+      teamId: currentTeamId || undefined,
+    };
+    const response = await api.post<{ project: Project }>('/api/projects', projectData);
+    await loadProjects();
+    return response.project;
+  }, [loadProjects, currentTeamId]);
+
+  const updateProject = useCallback(async (projectId: string, updates: UpdateProjectInput) => {
+    await api.patch(`/api/projects/${projectId}`, updates);
+    await loadProjects();
+    if (currentProjectId === projectId) {
+      await loadProjectDetails(projectId);
+    }
+  }, [loadProjects, loadProjectDetails, currentProjectId]);
+
+  const archiveProject = useCallback(async (projectId: string) => {
+    await api.post(`/api/projects/${projectId}/archive`, {});
+    if (currentProjectId === projectId) {
+      handleSetCurrentProjectId(null);
+    }
+    await loadProjects();
+  }, [loadProjects, currentProjectId, handleSetCurrentProjectId]);
+
+  // Load projects when user or team changes
+  useEffect(() => {
+    if (user && projectsEnabled) {
+      loadProjects();
+    } else {
+      setProjects([]);
+      setCurrentProject(null);
+      setCurrentProjectId(null);
+    }
+  }, [user, projectsEnabled, currentTeamId, loadProjects]);
+
+  // Load project details when current project changes
+  useEffect(() => {
+    if (currentProjectId) {
+      loadProjectDetails(currentProjectId);
+    }
+  }, [currentProjectId, loadProjectDetails]);
+
+  // Clear project selection when team changes
+  useEffect(() => {
+    setCurrentProjectId(null);
+    setCurrentProject(null);
+  }, [currentTeamId]);
+
+  return (
+    <ProjectContext.Provider
+      value={{
+        projects,
+        currentProject,
+        currentProjectId,
+        isLoadingProjects,
+        projectsEnabled,
+        projectColors,
+        loadProjects,
+        setCurrentProjectId: handleSetCurrentProjectId,
+        createProject,
+        updateProject,
+        archiveProject,
+      }}
+    >
+      {children}
+    </ProjectContext.Provider>
+  );
+}
+
+export function useProject() {
+  const context = useContext(ProjectContext);
+  if (context === undefined) {
+    throw new Error('useProject must be used within a ProjectProvider');
+  }
+  return context;
+}

package/src/contexts/ServerConfigProvider.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { AppConfig } from '@chaaskit/shared';
+
+/**
+ * Server-safe config provider that accepts pre-loaded config data.
+ * Used for SSR routes where config is loaded in the Remix loader.
+ * Does not make any API calls or use browser APIs.
+ */
+
+interface ServerConfigContextValue {
+  config: Partial<AppConfig>;
+  configLoaded: boolean;
+}
+
+const ServerConfigContext = createContext<ServerConfigContextValue | null>(null);
+
+export interface ServerConfigProviderProps {
+  children: ReactNode;
+  config: Partial<AppConfig>;
+}
+
+export function ServerConfigProvider({ children, config }: ServerConfigProviderProps) {
+  return (
+    <ServerConfigContext.Provider value={{ config, configLoaded: true }}>
+      {children}
+    </ServerConfigContext.Provider>
+  );
+}
+
+export function useServerConfig(): Partial<AppConfig> {
+  const context = useContext(ServerConfigContext);
+  if (!context) {
+    throw new Error('useServerConfig must be used within a ServerConfigProvider');
+  }
+  return context.config;
+}
+
+export function useServerConfigLoaded(): boolean {
+  const context = useContext(ServerConfigContext);
+  return context?.configLoaded ?? false;
+}

package/src/contexts/ServerThemeProvider.tsx

@@ -0,0 +1,47 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+/**
+ * Server-safe theme provider that accepts a pre-determined theme.
+ * Used for SSR routes where theme is determined on the server.
+ * Does not access localStorage or document.
+ */
+
+interface ServerThemeContextValue {
+  theme: string;
+  availableThemes: string[];
+  // setTheme is a no-op on server, actual theme switching happens client-side
+  setTheme: (theme: string) => void;
+}
+
+const ServerThemeContext = createContext<ServerThemeContextValue | null>(null);
+
+export interface ServerThemeProviderProps {
+  children: ReactNode;
+  theme: string;
+  availableThemes: string[];
+}
+
+export function ServerThemeProvider({
+  children,
+  theme,
+  availableThemes,
+}: ServerThemeProviderProps) {
+  // Server-side setTheme is a no-op - theme changes require client-side hydration
+  const setTheme = () => {
+    // No-op on server
+  };
+
+  return (
+    <ServerThemeContext.Provider value={{ theme, availableThemes, setTheme }}>
+      {children}
+    </ServerThemeContext.Provider>
+  );
+}
+
+export function useServerTheme() {
+  const context = useContext(ServerThemeContext);
+  if (!context) {
+    throw new Error('useServerTheme must be used within a ServerThemeProvider');
+  }
+  return context;
+}