@chaaskit/client 0.1.0

package/src/styles/index.css

@@ -0,0 +1,254 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Default theme variables (Light) */
+:root {
+  --color-primary: 99 102 241;
+  --color-primary-hover: 79 70 229;
+  --color-secondary: 139 92 246;
+
+  --color-background: 255 255 255;
+  --color-background-secondary: 249 250 251;
+  --color-sidebar: 243 244 246;
+
+  --color-text-primary: 17 24 39;
+  --color-text-secondary: 107 114 128;
+  --color-text-muted: 156 163 175;
+
+  --color-border: 229 231 235;
+  --color-input-background: 255 255 255;
+  --color-input-border: 209 213 219;
+
+  --color-user-message-bg: 99 102 241;
+  --color-user-message-text: 255 255 255;
+  --color-assistant-message-bg: 243 244 246;
+  --color-assistant-message-text: 17 24 39;
+
+  --color-success: 16 185 129;
+  --color-warning: 245 158 11;
+  --color-error: 239 68 68;
+
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', Menlo, monospace;
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-full: 9999px;
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  --color-primary: 129 140 248;
+  --color-primary-hover: 165 180 252;
+  --color-secondary: 167 139 250;
+
+  --color-background: 17 24 39;
+  --color-background-secondary: 31 41 55;
+  --color-sidebar: 15 23 42;
+
+  --color-text-primary: 249 250 251;
+  --color-text-secondary: 209 213 219;
+  --color-text-muted: 107 114 128;
+
+  --color-border: 55 65 81;
+  --color-input-background: 31 41 55;
+  --color-input-border: 75 85 99;
+
+  --color-user-message-bg: 79 70 229;
+  --color-user-message-text: 255 255 255;
+  --color-assistant-message-bg: 31 41 55;
+  --color-assistant-message-text: 249 250 251;
+
+  --color-success: 52 211 153;
+  --color-warning: 251 191 36;
+  --color-error: 248 113 113;
+}
+
+/* Base styles */
+html {
+  font-family: var(--font-sans);
+}
+
+body {
+  @apply bg-background text-text-primary;
+}
+
+/* Mobile viewport height fix - use dvh where supported */
+@supports (height: 100dvh) {
+  .h-screen-safe {
+    height: 100dvh;
+  }
+}
+
+@supports not (height: 100dvh) {
+  .h-screen-safe {
+    height: 100vh;
+  }
+}
+
+/* Fallback for older browsers */
+.h-screen-safe {
+  height: 100vh;
+  height: 100dvh;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-border rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-text-muted;
+}
+
+/* Code block styling */
+pre {
+  @apply font-mono text-sm;
+}
+
+code {
+  @apply font-mono;
+}
+
+/* Markdown content styling */
+.markdown-content {
+  @apply leading-relaxed;
+}
+
+.markdown-content h1 {
+  @apply text-2xl font-bold mt-6 mb-4;
+}
+
+.markdown-content h2 {
+  @apply text-xl font-bold mt-5 mb-3;
+}
+
+.markdown-content h3 {
+  @apply text-lg font-semibold mt-4 mb-2;
+}
+
+.markdown-content p {
+  @apply mb-4;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  @apply mb-4 pl-6;
+}
+
+.markdown-content ul {
+  @apply list-disc;
+}
+
+.markdown-content ol {
+  @apply list-decimal;
+}
+
+.markdown-content li {
+  @apply mb-1;
+}
+
+.markdown-content blockquote {
+  @apply border-l-4 border-border pl-4 italic my-4;
+}
+
+.markdown-content a {
+  @apply text-primary hover:underline;
+}
+
+.markdown-content table {
+  @apply w-full border-collapse my-4;
+}
+
+.markdown-content th,
+.markdown-content td {
+  @apply border border-border px-4 py-2 text-left;
+}
+
+.markdown-content th {
+  @apply bg-background-secondary font-semibold;
+}
+
+.markdown-content hr {
+  @apply my-6 border-border;
+}
+
+/* Animation utilities */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+.animate-slide-up {
+  animation: slide-up 0.2s ease-out;
+}
+
+/* Typing animation for assistant messages */
+@keyframes typing {
+  0%, 60%, 100% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0.3;
+  }
+}
+
+.typing-indicator span {
+  animation: typing 1s infinite;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+/* Search highlight styling */
+mark {
+  @apply bg-warning/30 text-text-primary rounded px-0.5;
+}
+
+/* Line clamp utility */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Keyboard shortcut styling */
+kbd {
+  @apply font-sans;
+}

package/src/utils/api.ts

@@ -0,0 +1,78 @@
+class ApiError extends Error {
+  constructor(
+    public status: number,
+    message: string,
+    public code?: string
+  ) {
+    super(message);
+    this.name = 'ApiError';
+  }
+}
+
+interface ApiOptions {
+  headers?: Record<string, string>;
+}
+
+async function request<T>(
+  url: string,
+  options: RequestInit & ApiOptions = {}
+): Promise<T> {
+  const { headers, ...rest } = options;
+
+  const response = await fetch(url, {
+    ...rest,
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+    credentials: 'include',
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ message: 'Request failed' }));
+    throw new ApiError(response.status, error.error?.message || error.message, error.error?.code);
+  }
+
+  // Handle 204 No Content
+  if (response.status === 204) {
+    return undefined as T;
+  }
+
+  return response.json();
+}
+
+export const api = {
+  get<T>(url: string, options?: ApiOptions): Promise<T> {
+    return request<T>(url, { method: 'GET', ...options });
+  },
+
+  post<T>(url: string, data: unknown, options?: ApiOptions): Promise<T> {
+    return request<T>(url, {
+      method: 'POST',
+      body: JSON.stringify(data),
+      ...options,
+    });
+  },
+
+  patch<T>(url: string, data: unknown, options?: ApiOptions): Promise<T> {
+    return request<T>(url, {
+      method: 'PATCH',
+      body: JSON.stringify(data),
+      ...options,
+    });
+  },
+
+  put<T>(url: string, data: unknown, options?: ApiOptions): Promise<T> {
+    return request<T>(url, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+      ...options,
+    });
+  },
+
+  delete<T>(url: string, options?: ApiOptions): Promise<T> {
+    return request<T>(url, { method: 'DELETE', ...options });
+  },
+};
+
+export { ApiError };

package/src/vite-env.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL?: string;
+  readonly DEV: boolean;
+  readonly PROD: boolean;
+  readonly MODE: string;
+  readonly BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}