@chaaskit/client 0.1.0

package/src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,50 @@
+import { useEffect, useCallback } from 'react';
+
+interface ShortcutHandlers {
+  onSearch?: () => void;
+  onNewThread?: () => void;
+  onEscape?: () => void;
+}
+
+export function useKeyboardShortcuts(handlers: ShortcutHandlers) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const isMod = e.metaKey || e.ctrlKey;
+
+      // Cmd/Ctrl + K - Open search
+      if (isMod && e.key === 'k') {
+        e.preventDefault();
+        handlers.onSearch?.();
+        return;
+      }
+
+      // Cmd/Ctrl + N - New thread
+      if (isMod && e.key === 'n') {
+        e.preventDefault();
+        handlers.onNewThread?.();
+        return;
+      }
+
+      // Escape - Close modal/cancel
+      if (e.key === 'Escape') {
+        handlers.onEscape?.();
+        return;
+      }
+    },
+    [handlers]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+}
+
+// Display helpers for keyboard shortcut hints
+export function getModifierKey(): string {
+  return navigator.platform.includes('Mac') ? '⌘' : 'Ctrl';
+}
+
+export function formatShortcut(key: string): string {
+  return `${getModifierKey()}+${key.toUpperCase()}`;
+}

package/src/hooks/useMentionSearch.ts

@@ -0,0 +1,106 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { MentionableDocument, DocumentScope } from '@chaaskit/shared';
+import { api } from '../utils/api';
+
+interface MentionSearchResult {
+  documents: MentionableDocument[];
+  grouped: {
+    my: MentionableDocument[];
+    team: MentionableDocument[];
+    project: MentionableDocument[];
+  };
+  hasMore: boolean;
+}
+
+interface UseMentionSearchOptions {
+  debounceMs?: number;
+  limit?: number;
+}
+
+export function useMentionSearch(options: UseMentionSearchOptions = {}) {
+  const { debounceMs = 200, limit = 20 } = options;
+
+  const [isSearching, setIsSearching] = useState(false);
+  const [results, setResults] = useState<MentionSearchResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const search = useCallback(
+    async (query: string, scope?: DocumentScope, teamId?: string, projectId?: string) => {
+      // Clear any pending debounce
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+
+      // Cancel any in-flight request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+
+      // Debounce the search (allow empty query to show all documents)
+      return new Promise<void>((resolve) => {
+        debounceRef.current = setTimeout(async () => {
+          setIsSearching(true);
+          setError(null);
+
+          abortControllerRef.current = new AbortController();
+
+          try {
+            const params = new URLSearchParams();
+            if (query) params.set('q', query);
+            if (scope) params.set('scope', scope);
+            if (teamId) params.set('teamId', teamId);
+            if (projectId) params.set('projectId', projectId);
+            params.set('limit', limit.toString());
+
+            const result = await api.get<MentionSearchResult>(
+              `/api/mentions/search?${params.toString()}`
+            );
+
+            setResults(result);
+          } catch (err) {
+            if (err instanceof Error && err.name === 'AbortError') {
+              // Ignore aborted requests
+              return;
+            }
+            console.error('Mention search error:', err);
+            setError(err instanceof Error ? err.message : 'Search failed');
+            setResults(null);
+          } finally {
+            setIsSearching(false);
+            resolve();
+          }
+        }, debounceMs);
+      });
+    },
+    [debounceMs, limit]
+  );
+
+  const clearResults = useCallback(() => {
+    setResults(null);
+    setError(null);
+    setIsSearching(false);
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+
+  return {
+    search,
+    clearResults,
+    results,
+    isSearching,
+    error,
+  };
+}

package/src/index.tsx

@@ -0,0 +1,116 @@
+// Import styles for CSS extraction during build
+import './styles/index.css';
+
+// ClientOnly and Loading Skeletons for SSR-safe rendering
+export { ClientOnly } from './components/ClientOnly';
+export { ChatLoadingSkeleton, SimpleLoadingSkeleton } from './components/LoadingSkeletons';
+
+// Context providers
+export { AuthProvider, useAuth } from './contexts/AuthContext';
+export { ThemeProvider, useTheme } from './contexts/ThemeContext';
+export { ConfigProvider, useConfig, useConfigLoaded } from './contexts/ConfigContext';
+export { TeamProvider, useTeam } from './contexts/TeamContext';
+export { ProjectProvider, useProject } from './contexts/ProjectContext';
+
+// SSR-safe context providers
+export {
+  ServerConfigProvider,
+  useServerConfig,
+  useServerConfigLoaded,
+} from './contexts/ServerConfigProvider';
+export {
+  ServerThemeProvider,
+  useServerTheme,
+} from './contexts/ServerThemeProvider';
+
+// Stores
+export { useChatStore } from './stores/chatStore';
+
+// Hooks
+export { useBasePath } from './hooks/useBasePath';
+export { useAppPath } from './hooks/useAppPath';
+
+// Extension registry
+export { clientRegistry } from './extensions/registry';
+
+// Layout components for implementing projects
+export { default as MainLayout } from './layouts/MainLayout';
+export { default as Sidebar } from './components/Sidebar';
+
+// SSR-safe components for server rendering
+export { SSRMessageList } from './components/SSRMessageList';
+export { SSRMarkdownRenderer } from './components/content/SSRMarkdownRenderer';
+
+// Re-export styles path for consumers
+export const styles = '@chaaskit/client/src/styles/index.css';
+
+// ============================================
+// Page Components (for React Router v7 routes)
+// ============================================
+export { default as ChatPage } from './pages/ChatPage';
+export { default as LoginPage } from './pages/LoginPage';
+export { default as RegisterPage } from './pages/RegisterPage';
+export { default as VerifyEmailPage } from './pages/VerifyEmailPage';
+export { default as SharedThreadPage } from './pages/SharedThreadPage';
+export { default as PricingPage } from './pages/PricingPage';
+export { default as PrivacyPage } from './pages/PrivacyPage';
+export { default as TermsPage } from './pages/TermsPage';
+export { default as ApiKeysPage } from './pages/ApiKeysPage';
+export { default as DocumentsPage } from './pages/DocumentsPage';
+export { default as ScheduledPromptsPage } from './pages/ScheduledPromptsPage';
+export { default as TeamSettingsPage } from './pages/TeamSettingsPage';
+export { default as AcceptInvitePage } from './pages/AcceptInvitePage';
+export { default as OAuthConsentPage } from './pages/OAuthConsentPage';
+export { default as AdminDashboardPage } from './pages/AdminDashboardPage';
+export { default as AdminUsersPage } from './pages/AdminUsersPage';
+export { default as AdminTeamsPage } from './pages/AdminTeamsPage';
+export { default as AdminTeamPage } from './pages/AdminTeamPage';
+
+// ============================================
+// ChatProviders - Wraps the chat app with all required providers
+// Use in React Router routes that render the chat interface
+// ============================================
+import React from 'react';
+import { AuthProvider as Auth } from './contexts/AuthContext';
+import { ThemeProvider as Theme } from './contexts/ThemeContext';
+import { ConfigProvider as Config } from './contexts/ConfigContext';
+import { TeamProvider as Team } from './contexts/TeamContext';
+import { ProjectProvider as Project } from './contexts/ProjectContext';
+
+export interface ChatProvidersProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Wraps children with all context providers needed for the chat application.
+ * Use this in React Router routes that render chat-related pages.
+ *
+ * @example
+ * ```tsx
+ * // app/routes/chat.tsx
+ * import { ChatProviders, ChatPage } from '@chaaskit/client';
+ *
+ * export default function Chat() {
+ *   return (
+ *     <ChatProviders>
+ *       <ChatPage />
+ *     </ChatProviders>
+ *   );
+ * }
+ * ```
+ */
+export function ChatProviders({ children }: ChatProvidersProps) {
+  return (
+    <Config>
+      <Theme>
+        <Auth>
+          <Team>
+            <Project>
+              {children}
+            </Project>
+          </Team>
+        </Auth>
+      </Theme>
+    </Config>
+  );
+}

package/src/layouts/MainLayout.tsx

@@ -0,0 +1,98 @@
+import { useState, useCallback, type ReactNode } from 'react';
+import { Menu, Search } from 'lucide-react';
+import { useParams, useNavigate } from 'react-router';
+import Sidebar from '../components/Sidebar';
+import SearchModal from '../components/SearchModal';
+import { useConfig } from '../contexts/ConfigContext';
+import { useChatStore } from '../stores/chatStore';
+import { useKeyboardShortcuts, formatShortcut } from '../hooks/useKeyboardShortcuts';
+import { useAppPath } from '../hooks/useAppPath';
+
+interface MainLayoutProps {
+  children: ReactNode;
+}
+
+export default function MainLayout({ children }: MainLayoutProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const { threadId } = useParams();
+  const navigate = useNavigate();
+  const appPath = useAppPath();
+  const config = useConfig();
+  const { currentThread, clearCurrentThread } = useChatStore();
+
+  // Get display title for mobile header
+  const headerTitle = currentThread?.title || config.app.name;
+
+  // Keyboard shortcuts
+  const handleNewThread = useCallback(() => {
+    // Clear current thread and navigate to welcome screen
+    // Thread will be created when user sends first message with selected agent
+    clearCurrentThread();
+    navigate(appPath('/'));
+    setSidebarOpen(false);
+  }, [clearCurrentThread, navigate, appPath]);
+
+  useKeyboardShortcuts({
+    onSearch: () => setSearchOpen(true),
+    onNewThread: handleNewThread,
+    onEscape: () => {
+      if (searchOpen) setSearchOpen(false);
+      else if (sidebarOpen) setSidebarOpen(false);
+    },
+  });
+
+  return (
+    <div className="flex h-screen-safe bg-background" style={{ paddingTop: 'env(safe-area-inset-top)' }}>
+      {/* Mobile sidebar backdrop */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-20 bg-black/50 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={`
+          fixed inset-y-0 left-0 z-30 w-64 transform bg-sidebar transition-transform duration-200 ease-in-out
+          lg:relative lg:translate-x-0
+          ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+        `}
+        style={{ paddingTop: 'env(safe-area-inset-top)' }}
+      >
+        <Sidebar onClose={() => setSidebarOpen(false)} onOpenSearch={() => setSearchOpen(true)} />
+      </aside>
+
+      {/* Main content */}
+      <main className="flex flex-1 flex-col overflow-hidden">
+        {/* Mobile header - sticky at top */}
+        <header className="sticky top-0 z-10 flex items-center gap-3 border-b border-border bg-background px-4 py-3 lg:hidden">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="flex-shrink-0 rounded-lg p-2 text-text-secondary hover:bg-background-secondary hover:text-text-primary active:bg-background-secondary"
+            aria-label="Open menu"
+          >
+            <Menu size={20} />
+          </button>
+          <h1 className="flex-1 truncate text-base font-medium text-text-primary">
+            {headerTitle}
+          </h1>
+          <button
+            onClick={() => setSearchOpen(true)}
+            className="flex-shrink-0 rounded-lg p-2 text-text-secondary hover:bg-background-secondary hover:text-text-primary active:bg-background-secondary"
+            aria-label="Search"
+          >
+            <Search size={20} />
+          </button>
+        </header>
+
+        {/* Page content */}
+        <div className="flex-1 overflow-hidden">{children}</div>
+      </main>
+
+      {/* Search Modal */}
+      <SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
+    </div>
+  );
+}

package/src/pages/AcceptInvitePage.tsx

@@ -0,0 +1,175 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router';
+import { useAuth } from '../contexts/AuthContext';
+import { useTeam } from '../contexts/TeamContext';
+import { useAppPath } from '../hooks/useAppPath';
+import { api } from '../utils/api';
+
+interface InviteDetails {
+  email: string;
+  role: string;
+  teamName: string;
+  expiresAt: string;
+}
+
+export default function AcceptInvitePage() {
+  const { token } = useParams<{ token: string }>();
+  const navigate = useNavigate();
+  const appPath = useAppPath();
+  const { user, isLoading: authLoading } = useAuth();
+  const { loadTeams, setCurrentTeamId } = useTeam();
+
+  const [invite, setInvite] = useState<InviteDetails | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isAccepting, setIsAccepting] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    async function loadInvite() {
+      if (!token) return;
+
+      try {
+        const response = await api.get<{ invite: InviteDetails }>(`/api/teams/invite/${token}`);
+        setInvite(response.invite);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load invite');
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    loadInvite();
+  }, [token]);
+
+  const handleAccept = async () => {
+    if (!token) return;
+
+    setIsAccepting(true);
+    setError('');
+
+    try {
+      const response = await api.post<{ team: { id: string } }>(`/api/teams/invite/${token}/accept`, {});
+      await loadTeams();
+      setCurrentTeamId(response.team.id);
+      navigate(appPath('/'));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to accept invite');
+      setIsAccepting(false);
+    }
+  };
+
+  if (authLoading || isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-[var(--color-background)]">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--color-primary)]" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-[var(--color-background)] p-4">
+        <div className="w-full max-w-md text-center">
+          <div className="mb-4 rounded-lg bg-[var(--color-error)]/10 p-4 text-[var(--color-error)]">
+            {error}
+          </div>
+          <Link
+            to="/"
+            className="text-[var(--color-primary)] hover:underline"
+          >
+            Go to homepage
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-[var(--color-background)] p-4">
+        <div className="w-full max-w-md text-center">
+          <h1 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">
+            Team Invitation
+          </h1>
+          {invite && (
+            <div className="mb-6 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] p-6">
+              <p className="text-[var(--color-text-primary)] mb-2">
+                You've been invited to join
+              </p>
+              <p className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">
+                {invite.teamName}
+              </p>
+              <p className="text-sm text-[var(--color-text-muted)]">
+                as {invite.role}
+              </p>
+            </div>
+          )}
+          <p className="text-[var(--color-text-secondary)] mb-6">
+            Please sign in or create an account to accept this invitation.
+          </p>
+          <div className="flex gap-4 justify-center">
+            <Link
+              to="/login"
+              className="rounded-lg bg-[var(--color-primary)] px-6 py-2 font-medium text-white hover:bg-[var(--color-primary-hover)]"
+            >
+              Sign In
+            </Link>
+            <Link
+              to="/register"
+              className="rounded-lg border border-[var(--color-border)] px-6 py-2 font-medium text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)]"
+            >
+              Create Account
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[var(--color-background)] p-4">
+      <div className="w-full max-w-md text-center">
+        <h1 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">
+          Team Invitation
+        </h1>
+        {invite && (
+          <>
+            <div className="mb-6 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] p-6">
+              <p className="text-[var(--color-text-primary)] mb-2">
+                You've been invited to join
+              </p>
+              <p className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">
+                {invite.teamName}
+              </p>
+              <p className="text-sm text-[var(--color-text-muted)]">
+                as {invite.role}
+              </p>
+            </div>
+
+            {user.email.toLowerCase() !== invite.email.toLowerCase() && (
+              <div className="mb-6 rounded-lg bg-[var(--color-warning)]/10 p-4 text-sm text-[var(--color-warning)]">
+                This invite was sent to {invite.email}. You are signed in as {user.email}.
+              </div>
+            )}
+
+            <div className="flex gap-4 justify-center">
+              <button
+                onClick={handleAccept}
+                disabled={isAccepting}
+                className="rounded-lg bg-[var(--color-primary)] px-6 py-2 font-medium text-white hover:bg-[var(--color-primary-hover)] disabled:opacity-50"
+              >
+                {isAccepting ? 'Accepting...' : 'Accept Invitation'}
+              </button>
+              <Link
+                to="/"
+                className="rounded-lg border border-[var(--color-border)] px-6 py-2 font-medium text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)]"
+              >
+                Decline
+              </Link>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}