@chaaskit/client 0.1.0

package/src/components/SearchModal.tsx

@@ -0,0 +1,173 @@
+import { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useNavigate } from 'react-router';
+import { Search, X, Loader2, MessageSquare } from 'lucide-react';
+import { formatShortcut } from '../hooks/useKeyboardShortcuts';
+import { useAppPath } from '../hooks/useAppPath';
+
+interface SearchResult {
+  id: string;
+  threadId: string;
+  threadTitle: string;
+  role: string;
+  content: string;
+  highlight: string;
+  createdAt: string;
+}
+
+interface SearchModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
+  const navigate = useNavigate();
+  const appPath = useAppPath();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+
+  // Focus input when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setQuery('');
+      setResults([]);
+      setHasSearched(false);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [isOpen]);
+
+  // Debounced search
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults([]);
+      setHasSearched(false);
+      return;
+    }
+
+    const timer = setTimeout(async () => {
+      setIsLoading(true);
+      setHasSearched(true);
+      try {
+        const response = await fetch(
+          `/api/search?q=${encodeURIComponent(query.trim())}&limit=20`,
+          { credentials: 'include' }
+        );
+        if (response.ok) {
+          const data = await response.json();
+          setResults(data.results);
+        }
+      } catch (error) {
+        console.error('Search failed:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  function handleResultClick(result: SearchResult) {
+    navigate(appPath(`/thread/${result.threadId}`));
+    onClose();
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  }
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+
+      {/* Modal */}
+      <div
+        className="relative w-full max-w-2xl rounded-xl bg-background shadow-2xl"
+        style={{ maxHeight: '70vh' }}
+      >
+        {/* Search Input */}
+        <div className="flex items-center gap-3 border-b border-border px-4 py-3">
+          <Search size={20} className="flex-shrink-0 text-text-muted" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search conversations..."
+            className="flex-1 bg-transparent text-base text-text-primary placeholder-text-muted focus:outline-none"
+          />
+          {isLoading && <Loader2 size={20} className="animate-spin text-text-muted" />}
+          <button
+            onClick={onClose}
+            className="flex-shrink-0 rounded p-1 text-text-muted hover:bg-background-secondary hover:text-text-primary"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Results */}
+        <div className="overflow-y-auto" style={{ maxHeight: 'calc(70vh - 60px)' }}>
+          {!hasSearched && !query && (
+            <div className="px-4 py-8 text-center text-text-muted">
+              <p className="mb-2">Search your conversations</p>
+              <p className="text-sm">
+                Press <kbd className="rounded bg-background-secondary px-1.5 py-0.5 text-xs">{formatShortcut('K')}</kbd> anytime to open search
+              </p>
+            </div>
+          )}
+
+          {hasSearched && results.length === 0 && !isLoading && (
+            <div className="px-4 py-8 text-center text-text-muted">
+              No results found for "{query}"
+            </div>
+          )}
+
+          {results.length > 0 && (
+            <div className="py-2">
+              {results.map((result) => (
+                <button
+                  key={result.id}
+                  onClick={() => handleResultClick(result)}
+                  className="w-full px-4 py-3 text-left hover:bg-background-secondary"
+                >
+                  <div className="mb-1 flex items-center gap-2">
+                    <MessageSquare size={14} className="text-text-muted" />
+                    <span className="text-sm font-medium text-text-primary">
+                      {result.threadTitle}
+                    </span>
+                    <span className="text-xs text-text-muted">
+                      {result.role === 'user' ? 'You' : 'Assistant'}
+                    </span>
+                  </div>
+                  <p
+                    className="line-clamp-2 text-sm text-text-secondary"
+                    dangerouslySetInnerHTML={{ __html: result.highlight }}
+                  />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer hint */}
+        <div className="border-t border-border px-4 py-2 text-xs text-text-muted">
+          <span className="mr-4">
+            <kbd className="rounded bg-background-secondary px-1.5 py-0.5">↵</kbd> to select
+          </span>
+          <span>
+            <kbd className="rounded bg-background-secondary px-1.5 py-0.5">esc</kbd> to close
+          </span>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

package/src/components/SettingsModal.tsx

@@ -0,0 +1,412 @@
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useNavigate, Link } from 'react-router';
+import { X, Loader2, Check, BarChart3, CreditCard, ExternalLink, Key } from 'lucide-react';
+import { useConfig } from '../contexts/ConfigContext';
+import { useTheme } from '../contexts/ThemeContext';
+import { useAuth } from '../contexts/AuthContext';
+import { useAppPath } from '../hooks/useAppPath';
+import MCPCredentialsSection from './MCPCredentialsSection';
+import OAuthAppsSection from './OAuthAppsSection';
+import { api } from '../utils/api';
+
+interface UsageData {
+  messagesThisMonth: number;
+  monthlyLimit: number;
+  credits: number;
+  plan: string;
+}
+
+interface SettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
+  const config = useConfig();
+  const { theme, setTheme, availableThemes } = useTheme();
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const appPath = useAppPath();
+
+  const [settings, setSettings] = useState<Record<string, string>>({});
+  const [usageData, setUsageData] = useState<UsageData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'saved' | 'error'>('idle');
+  const [isBillingLoading, setIsBillingLoading] = useState(false);
+  const [canAccessApiKeys, setCanAccessApiKeys] = useState(false);
+
+  // Load settings and usage when modal opens
+  useEffect(() => {
+    if (isOpen && user) {
+      loadSettings();
+      loadUsage();
+      // Check API keys access
+      if (config.api?.enabled) {
+        api.get<{ canAccess: boolean }>('/api/api-keys/access')
+          .then((res) => setCanAccessApiKeys(res.canAccess))
+          .catch(() => setCanAccessApiKeys(false));
+      }
+    }
+  }, [isOpen, user, config.api?.enabled]);
+
+  // Reset save status after showing
+  useEffect(() => {
+    if (saveStatus !== 'idle') {
+      const timer = setTimeout(() => setSaveStatus('idle'), 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [saveStatus]);
+
+  async function loadSettings() {
+    setIsLoading(true);
+    try {
+      const response = await fetch('/api/user/settings', {
+        credentials: 'include',
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setSettings(data.settings || {});
+      }
+    } catch (error) {
+      console.error('Failed to load settings:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function loadUsage() {
+    try {
+      const response = await fetch('/api/user/usage', {
+        credentials: 'include',
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setUsageData(data);
+      }
+    } catch (error) {
+      console.error('Failed to load usage:', error);
+    }
+  }
+
+  async function handleSave() {
+    setIsSaving(true);
+    setSaveStatus('idle');
+    try {
+      const response = await fetch('/api/user/settings', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          ...settings,
+          themePreference: theme,
+        }),
+      });
+
+      if (response.ok) {
+        setSaveStatus('saved');
+      } else {
+        setSaveStatus('error');
+      }
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+      setSaveStatus('error');
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  function handleFieldChange(key: string, value: string) {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+  }
+
+  function handleThemeChange(newTheme: string) {
+    setTheme(newTheme);
+  }
+
+  async function handleOpenBillingPortal() {
+    setIsBillingLoading(true);
+    try {
+      const response = await fetch('/api/payments/billing-portal', {
+        method: 'POST',
+        credentials: 'include',
+      });
+      if (response.ok) {
+        const { url } = await response.json();
+        window.location.href = url;
+      }
+    } catch (error) {
+      console.error('Failed to open billing portal:', error);
+    } finally {
+      setIsBillingLoading(false);
+    }
+  }
+
+  function handleUpgrade() {
+    onClose();
+    navigate(appPath('/pricing'));
+  }
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div
+        className="relative w-full max-w-lg rounded-t-2xl bg-background sm:rounded-2xl"
+        style={{
+          maxHeight: 'calc(100vh - env(safe-area-inset-top) - 1rem)',
+          paddingBottom: 'env(safe-area-inset-bottom)',
+        }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
+          <h2 className="text-lg font-semibold text-text-primary">Settings</h2>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-2 text-text-secondary hover:bg-background-secondary hover:text-text-primary active:bg-background-secondary"
+            aria-label="Close settings"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="overflow-y-auto px-4 py-4 sm:px-6" style={{ maxHeight: 'calc(100vh - 200px)' }}>
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 animate-spin text-primary" />
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {/* Account Info */}
+              {user && (
+                <div className="rounded-lg border border-border bg-background-secondary p-4">
+                  <h3 className="mb-2 font-medium text-text-primary">Account</h3>
+                  <div className="text-sm text-text-secondary">
+                    <span className="text-text-muted">Email: </span>
+                    <span className="text-text-primary">{user.email}</span>
+                  </div>
+                </div>
+              )}
+
+              {/* Usage Metrics */}
+              {usageData && (
+                <div className="rounded-lg border border-border bg-background-secondary p-4">
+                  <div className="mb-3 flex items-center gap-2">
+                    <BarChart3 size={18} className="text-primary" />
+                    <h3 className="font-medium text-text-primary">Usage</h3>
+                    <span className="ml-auto rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                      {usageData.plan}
+                    </span>
+                  </div>
+
+                  {/* Messages Progress */}
+                  <div className="space-y-2">
+                    <div className="flex justify-between text-sm">
+                      <span className="text-text-secondary">Messages this month</span>
+                      <span className="text-text-primary">
+                        {usageData.messagesThisMonth.toLocaleString()}
+                        {usageData.monthlyLimit > 0 ? (
+                          <span className="text-text-muted"> / {usageData.monthlyLimit.toLocaleString()}</span>
+                        ) : (
+                          <span className="text-text-muted"> / Unlimited</span>
+                        )}
+                      </span>
+                    </div>
+
+                    {usageData.monthlyLimit > 0 && (
+                      <div className="h-2 overflow-hidden rounded-full bg-background">
+                        <div
+                          className={`h-full rounded-full transition-all ${
+                            usageData.messagesThisMonth / usageData.monthlyLimit > 0.9
+                              ? 'bg-error'
+                              : usageData.messagesThisMonth / usageData.monthlyLimit > 0.7
+                              ? 'bg-warning'
+                              : 'bg-primary'
+                          }`}
+                          style={{
+                            width: `${Math.min(100, (usageData.messagesThisMonth / usageData.monthlyLimit) * 100)}%`,
+                          }}
+                        />
+                      </div>
+                    )}
+
+                    {usageData.credits > 0 && (
+                      <div className="mt-3 flex justify-between text-sm">
+                        <span className="text-text-secondary">Credits remaining</span>
+                        <span className="text-text-primary">{usageData.credits.toLocaleString()}</span>
+                      </div>
+                    )}
+
+                    {/* Billing Actions */}
+                    <div className="mt-4 flex flex-wrap gap-2">
+                      <button
+                        onClick={handleUpgrade}
+                        className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-hover"
+                      >
+                        <CreditCard size={14} />
+                        {usageData.plan === 'free' ? 'Upgrade Plan' : 'Change Plan'}
+                      </button>
+                      {usageData.plan !== 'free' && (
+                        <button
+                          onClick={handleOpenBillingPortal}
+                          disabled={isBillingLoading}
+                          className="flex items-center gap-1.5 rounded-lg border border-border bg-background px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-background-secondary disabled:opacity-50"
+                        >
+                          {isBillingLoading ? (
+                            <Loader2 size={14} className="animate-spin" />
+                          ) : (
+                            <ExternalLink size={14} />
+                          )}
+                          Manage Subscription
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Theme Selection */}
+              {config.theming.allowUserThemeSwitch && (
+                <div>
+                  <label className="mb-2 block text-sm font-medium text-text-primary">
+                    Theme
+                  </label>
+                  <div className="flex flex-wrap gap-2">
+                    {availableThemes.map((t) => (
+                      <button
+                        key={t}
+                        onClick={() => handleThemeChange(t)}
+                        className={`rounded-lg px-4 py-2 text-sm capitalize ${
+                          theme === t
+                            ? 'bg-primary text-white'
+                            : 'bg-background-secondary text-text-secondary hover:text-text-primary active:bg-primary/10'
+                        }`}
+                      >
+                        {config.theming.themes[t]?.name || t}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* User Settings Fields */}
+              {config.userSettings.fields.map((field) => (
+                <div key={field.key}>
+                  <label
+                    htmlFor={field.key}
+                    className="mb-2 block text-sm font-medium text-text-primary"
+                  >
+                    {field.label}
+                  </label>
+
+                  {field.type === 'text' && (
+                    <input
+                      id={field.key}
+                      type="text"
+                      value={settings[field.key] || ''}
+                      onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                      placeholder={field.placeholder}
+                      className="w-full rounded-lg border border-input-border bg-input-background px-3 py-2.5 text-base text-text-primary placeholder-text-muted focus:border-primary focus:outline-none sm:text-sm"
+                    />
+                  )}
+
+                  {field.type === 'textarea' && (
+                    <textarea
+                      id={field.key}
+                      value={settings[field.key] || ''}
+                      onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                      placeholder={field.placeholder}
+                      rows={3}
+                      className="w-full rounded-lg border border-input-border bg-input-background px-3 py-2.5 text-base text-text-primary placeholder-text-muted focus:border-primary focus:outline-none sm:text-sm"
+                    />
+                  )}
+
+                  {field.type === 'select' && field.options && (
+                    <select
+                      id={field.key}
+                      value={settings[field.key] || ''}
+                      onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                      className="w-full rounded-lg border border-input-border bg-input-background px-3 py-2.5 text-base text-text-primary focus:border-primary focus:outline-none sm:text-sm"
+                    >
+                      <option value="">Select...</option>
+                      {field.options.map((option) => (
+                        <option key={option} value={option}>
+                          {option}
+                        </option>
+                      ))}
+                    </select>
+                  )}
+                </div>
+              ))}
+
+              {/* MCP Credentials Section */}
+              <MCPCredentialsSection />
+
+              {/* OAuth Connected Applications */}
+              <OAuthAppsSection />
+
+              {/* API Keys Link */}
+              {config.api?.enabled && canAccessApiKeys && (
+                <div className="rounded-lg border border-border bg-background-secondary p-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <Key size={18} className="text-primary" />
+                      <div>
+                        <h3 className="font-medium text-text-primary">API Keys</h3>
+                        <p className="text-xs text-text-muted">Manage keys for programmatic API access</p>
+                      </div>
+                    </div>
+                    <Link
+                      to={appPath('/api-keys')}
+                      onClick={onClose}
+                      className="text-sm text-primary hover:underline"
+                    >
+                      Manage
+                    </Link>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 border-t border-border px-4 py-3 sm:px-6 sm:py-4">
+          {saveStatus === 'saved' && (
+            <span className="flex items-center gap-1 text-sm text-success">
+              <Check size={16} />
+              Saved
+            </span>
+          )}
+          {saveStatus === 'error' && (
+            <span className="text-sm text-error">Failed to save</span>
+          )}
+          <button
+            onClick={onClose}
+            className="rounded-lg px-4 py-2 text-sm text-text-secondary hover:bg-background-secondary hover:text-text-primary active:bg-background-secondary"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={isSaving || isLoading}
+            className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm text-white hover:bg-primary-hover active:bg-primary-hover disabled:opacity-50"
+          >
+            {isSaving && <Loader2 size={16} className="animate-spin" />}
+            Save
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}